From 229393945db06a34754b30d071eb7bc39a2cd214 Mon Sep 17 00:00:00 2001 From: Adam Stankiewicz Date: Sat, 31 Aug 2024 14:47:03 -0400 Subject: [PATCH] feat: --output-references CLI arg for building tokens, registers filters, and updates CSS vars format * Exposes --output-references CLI argument for build-tokens command. Defaults to true. Ensures brand package output with the CLI includes references in build output out-of-the-box. * Registers filter(s) isThemeVariant{"Light"}. * Migrates createCustomCSSVariables to use formattedVariables to rely on out-of-the-box CSS variable formatting. The formatter still supports token-specific overrides of `outputReferences` * Relies on default style-dictionary fileHeader, with opt-in timestamp. --- Makefile | 1 + bin/paragon-scripts.js | 10 + lib/build-tokens.js | 49 +- package.json | 3 +- styles/css/core/custom-media-breakpoints.css | 7 +- styles/css/core/variables.css | 193 ++-- styles/css/themes/light/utility-classes.css | 7 +- styles/css/themes/light/variables.css | 1032 ++++-------------- tokens/style-dictionary.js | 114 +- tokens/utils.js | 12 - 10 files changed, 429 insertions(+), 999 deletions(-) diff --git a/Makefile b/Makefile index d6dc6ff320..8fb1778064 100644 --- a/Makefile +++ b/Makefile @@ -1,3 +1,4 @@ +.PHONY: build build: rm -rf ./dist tsc --project tsconfig.build.json diff --git a/bin/paragon-scripts.js b/bin/paragon-scripts.js index a029b19564..3d811b39f7 100755 --- a/bin/paragon-scripts.js +++ b/bin/paragon-scripts.js @@ -85,11 +85,21 @@ const COMMANDS = { description: 'Include only source design tokens in the build.', defaultValue: false, }, + { + name: '--output-references', + description: 'Include references in the build output.', + defaultValue: true, + }, { name: '-t, --themes', description: 'Specify themes to include in the token build.', defaultValue: 'light', }, + { + name: '-v, --verbose', + description: 'Enable verbose logging.', + defaultValue: false, + }, ], }, 'replace-variables': { diff --git a/lib/build-tokens.js b/lib/build-tokens.js index 19f9199d09..25e2b3c273 100755 --- a/lib/build-tokens.js +++ b/lib/build-tokens.js @@ -13,24 +13,37 @@ const { createIndexCssFile } = require('../tokens/utils'); * @param {string|string[]} [commandArgs.themes=['light']] - The themes (variants) for which to build tokens. */ async function buildTokensCommand(commandArgs) { - const StyleDictionary = await initializeStyleDictionary(); - const defaultParams = { themes: ['light'], 'build-dir': './build/', + 'source-tokens-only': false, + 'output-references': true, + verbose: false, }; const alias = { 'build-dir': 'b', themes: 't', + verbose: '-v', }; const { 'build-dir': buildDir, source: tokensSource, 'source-tokens-only': hasSourceTokensOnly, + 'output-references': outputReferences, themes, - } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' }); + verbose, + } = minimist( + commandArgs, + { + alias, + default: defaultParams, + boolean: ['source-tokens-only', 'output-references', 'verbose'], + }, + ); + + const StyleDictionary = await initializeStyleDictionary({ themes }); const coreConfig = { include: [ @@ -52,7 +65,10 @@ async function buildTokensCommand(commandArgs) { destination: 'core/variables.css', filter: hasSourceTokensOnly ? 'isSource' : undefined, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, + formatting: { + fileHeaderTimestamp: true, + }, }, }, { @@ -60,16 +76,19 @@ async function buildTokensCommand(commandArgs) { destination: 'core/custom-media-breakpoints.css', filter: hasSourceTokensOnly ? 'isSource' : undefined, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, + formatting: { + fileHeaderTimestamp: true, + }, }, }, ], transforms: StyleDictionary.hooks.transformGroups.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'), - options: { - fileHeader: 'customFileHeader', - }, }, }, + log: { + verbosity: verbose ? 'verbose' : 'default', + }, }; const getStyleDictionaryConfig = (themeVariant) => ({ @@ -104,9 +123,14 @@ async function buildTokensCommand(commandArgs) { { format: 'css/custom-variables', destination: `themes/${themeVariant}/variables.css`, - filter: hasSourceTokensOnly ? 'isSource' : undefined, + filter: hasSourceTokensOnly + ? `isThemeVariant${themeVariant.charAt(0).toUpperCase()}${themeVariant.slice(1)}SourceOnly` + : `isThemeVariant${themeVariant.charAt(0).toUpperCase()}${themeVariant.slice(1)}`, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, + formatting: { + fileHeaderTimestamp: true, + }, }, }, { @@ -114,7 +138,10 @@ async function buildTokensCommand(commandArgs) { destination: `themes/${themeVariant}/utility-classes.css`, filter: hasSourceTokensOnly ? 'isSource' : undefined, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, + formatting: { + fileHeaderTimestamp: true, + }, }, }, ], diff --git a/package.json b/package.json index 6a52a674bf..451cab0e35 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,8 @@ "prepare": "husky || true", "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css", "replace-variables-usage-with-css": "./bin/paragon-scripts.js replace-variables -p src -t usage", - "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition" + "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition", + "cli:help": "./bin/paragon-scripts.js help" }, "dependencies": { "@popperjs/core": "^2.11.4", diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css index 71df821c71..256274ff40 100644 --- a/styles/css/core/custom-media-breakpoints.css +++ b/styles/css/core/custom-media-breakpoints.css @@ -1,7 +1,6 @@ -/* - * IMPORTANT: This file is the result of assembling design tokens. - * Do not edit directly. - * Generated on Tue, 27 Aug 2024 17:14:44 GMT +/** + * Do not edit directly, this file was auto-generated. + * Generated on Sat, 31 Aug 2024 19:26:11 GMT */ @custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0rem); diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index 056692268f..a814f46c5b 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,7 +1,6 @@ -/* - * IMPORTANT: This file is the result of assembling design tokens. - * Do not edit directly. - * Generated on Tue, 27 Aug 2024 17:14:44 GMT +/** + * Do not edit directly, this file was auto-generated. + * Generated on Sat, 31 Aug 2024 19:26:11 GMT */ :root { @@ -10,19 +9,19 @@ --pgn-other-form-control-custom-file-lang: en; --pgn-other-form-control-range-track-cursor: pointer; --pgn-other-form-control-cursor: auto; - --pgn-elevation-zindex-fixed: 1030; - --pgn-elevation-zindex-sticky: 1020; - --pgn-elevation-zindex-2000: 2000; - --pgn-elevation-zindex-1800: 1800; - --pgn-elevation-zindex-1600: 1600; - --pgn-elevation-zindex-1400: 1400; - --pgn-elevation-zindex-1200: 1200; - --pgn-elevation-zindex-1000: 1000; - --pgn-elevation-zindex-800: 800; - --pgn-elevation-zindex-600: 600; - --pgn-elevation-zindex-400: 400; - --pgn-elevation-zindex-200: 200; - --pgn-elevation-zindex-0: 0; + --pgn-elevation-zindex-fixed: 1030; /* z-index of for fixed element. */ + --pgn-elevation-zindex-sticky: 1020; /* z-index for sticky element. */ + --pgn-elevation-zindex-2000: 2000; /* z-index of level 2000. */ + --pgn-elevation-zindex-1800: 1800; /* z-index of level 1800. */ + --pgn-elevation-zindex-1600: 1600; /* z-index of level 1600. */ + --pgn-elevation-zindex-1400: 1400; /* z-index of level 1400. */ + --pgn-elevation-zindex-1200: 1200; /* z-index of level 1200. */ + --pgn-elevation-zindex-1000: 1000; /* z-index of level 1000. */ + --pgn-elevation-zindex-800: 800; /* z-index of level 800. */ + --pgn-elevation-zindex-600: 600; /* z-index of level 600. */ + --pgn-elevation-zindex-400: 400; /* z-index of level 400. */ + --pgn-elevation-zindex-200: 200; /* z-index of level 200. */ + --pgn-elevation-zindex-0: 0; /* z-index of level 0. */ --pgn-elevation-tooltip-zindex: 1070; --pgn-elevation-sheet-zindex-main: 1032; --pgn-elevation-sheet-zindex-backdrop: 1031; @@ -31,10 +30,10 @@ --pgn-elevation-modal-zindex: 1050; --pgn-elevation-modal-backdrop-zindex: 1040; --pgn-elevation-dropdown-zindex: 1000; - --pgn-transition-collapse-width: width .35s ease; - --pgn-transition-collapse-height: height .35s ease; - --pgn-transition-fade: opacity .15s linear; - --pgn-transition-base: all .2s ease-in-out; + --pgn-transition-collapse-width: width .35s ease; /* Collapse transition for width that takes 350ms */ + --pgn-transition-collapse-height: height .35s ease; /* Collapse transition for height that takes 350ms */ + --pgn-transition-fade: opacity .15s linear; /* Opacity transition that takes 150ms */ + --pgn-transition-base: all .2s ease-in-out; /* Generic transition for any property change */ --pgn-transition-progress-bar-bar-transition: width .6s ease; --pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite; --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; @@ -45,55 +44,55 @@ --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; --pgn-transition-btn: none; --pgn-transition-badge: none; - --pgn-typography-line-height-micro: .938rem; - --pgn-typography-line-height-sm: 1.5rem; - --pgn-typography-line-height-lg: 1.5rem; - --pgn-typography-line-height-base: 1.5556rem; - --pgn-typography-font-weight-table-th: normal; - --pgn-typography-font-weight-lead: inherit; - --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); - --pgn-typography-font-weight-bolder: bolder; - --pgn-typography-font-weight-bold: 700; - --pgn-typography-font-weight-semi-bold: 500; - --pgn-typography-font-weight-normal: 400; - --pgn-typography-font-weight-light: 300; - --pgn-typography-font-weight-lighter: lighter; - --pgn-typography-font-size-micro: .688rem; - --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25); - --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6); - --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5); - --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4); - --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3); - --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2); - --pgn-typography-font-size-mobile-h1: 2.25rem; - --pgn-typography-font-size-h6: .75rem; - --pgn-typography-font-size-h5: .875rem; - --pgn-typography-font-size-h4: 1.125rem; - --pgn-typography-font-size-h3: 1.375rem; - --pgn-typography-font-size-h2: 2rem; - --pgn-typography-font-size-h1: 2.5rem; - --pgn-typography-font-size-small-x: 75%; - --pgn-typography-font-size-small-base: 87.5%; - --pgn-typography-font-size-xs: .75rem; - --pgn-typography-font-size-sm: .875rem; - --pgn-typography-font-size-lg: 1.4063rem; - --pgn-typography-font-size-base: 1.125rem; - --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace; - --pgn-typography-font-family-serif: serif; - --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, '"Helvetica Neue"', Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'; - --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); + --pgn-typography-line-height-micro: .938rem; /* Micro utils line height. */ + --pgn-typography-line-height-sm: 1.5rem; /* Small line height. */ + --pgn-typography-line-height-lg: 1.5rem; /* Large line height. */ + --pgn-typography-line-height-base: 1.5556rem; /* Basic line height. */ + --pgn-typography-font-weight-table-th: normal; /* Table th font weight. */ + --pgn-typography-font-weight-lead: inherit; /* Lead text font weight. */ + --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); /* Basic font weight. */ + --pgn-typography-font-weight-bolder: bolder; /* Bolder font weight. */ + --pgn-typography-font-weight-bold: 700; /* Bold font weight. */ + --pgn-typography-font-weight-semi-bold: 500; /* Semi-bold font weight. */ + --pgn-typography-font-weight-normal: 400; /* Normal font weight. */ + --pgn-typography-font-weight-light: 300; /* Light font weight. */ + --pgn-typography-font-weight-lighter: lighter; /* Lighter font weight. */ + --pgn-typography-font-size-micro: .688rem; /* Micro utils text font size. */ + --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25); /* Lead text font size. */ + --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6); /* Mobile font size of heading level 6. */ + --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5); /* Mobile font size of heading level 5. */ + --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4); /* Mobile font size of heading level 4. */ + --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3); /* Mobile font size of heading level 3. */ + --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2); /* Mobile font size of heading level 2. */ + --pgn-typography-font-size-mobile-h1: 2.25rem; /* Mobile font size of heading level 1. */ + --pgn-typography-font-size-h6: .75rem; /* Font size of heading level 6. */ + --pgn-typography-font-size-h5: .875rem; /* Font size of heading level 5. */ + --pgn-typography-font-size-h4: 1.125rem; /* Font size of heading level 4. */ + --pgn-typography-font-size-h3: 1.375rem; /* Font size of heading level 3. */ + --pgn-typography-font-size-h2: 2rem; /* Font size of heading level 2. */ + --pgn-typography-font-size-h1: 2.5rem; /* Font size of heading level 1. */ + --pgn-typography-font-size-small-x: 75%; /* X-small font size. */ + --pgn-typography-font-size-small-base: 87.5%; /* Small font size. */ + --pgn-typography-font-size-xs: .75rem; /* Extra-small font size. */ + --pgn-typography-font-size-sm: .875rem; /* Small font size. */ + --pgn-typography-font-size-lg: 1.4063rem; /* Large font size. */ + --pgn-typography-font-size-base: 1.125rem; /* Base font size. */ + --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace; /* Monospace font family. */ + --pgn-typography-font-family-serif: serif; /* Serif font family. */ + --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, '"Helvetica Neue"', Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'; /* Sans-serif font family. */ + --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); /* Basic font family. */ --pgn-typography-print-page-size: a3; - --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-mobile: 3.25rem; - --pgn-typography-display-line-height-mobile: 3.5rem; - --pgn-typography-display-line-height-base: 1rem; - --pgn-typography-display-4: 7.5rem; - --pgn-typography-display-3: 5.625rem; - --pgn-typography-display-2: 4.875rem; - --pgn-typography-display-1: 3.75rem; + --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold); /* Font weight of level 4. */ + --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold); /* Font weight of level 3. */ + --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold); /* Font weight of level 2. */ + --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold); /* Font weight of level 1. */ + --pgn-typography-display-mobile: 3.25rem; /* Font size for mobile devices. */ + --pgn-typography-display-line-height-mobile: 3.5rem; /* Mobile line height. */ + --pgn-typography-display-line-height-base: 1rem; /* Standard line height. */ + --pgn-typography-display-4: 7.5rem; /* Font size for heading of level 4. */ + --pgn-typography-display-3: 5.625rem; /* Font size for heading of level 3. */ + --pgn-typography-display-2: 4.875rem; /* Font size for heading of level 2. */ + --pgn-typography-display-1: 3.75rem; /* Font size for heading of level 1. */ --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25); --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base); --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold); @@ -179,23 +178,23 @@ --pgn-typography-alert-line-height: 1.5rem; --pgn-typography-alert-font-size: .875rem; --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); - --pgn-spacing-grid-gutter-width: 24px; - --pgn-spacing-table-cell-padding-sm: .3rem; - --pgn-spacing-table-cell-padding-base: .75rem; - --pgn-spacing-label-margin-bottom: .5rem; - --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); - --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); - --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); - --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); - --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); - --pgn-spacing-spacer-base: 1rem; - --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); - --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); - --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); - --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); - --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); - --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); - --pgn-spacing-spacer-0: 0rem; + --pgn-spacing-grid-gutter-width: 24px; /* Grid gutter width value. */ + --pgn-spacing-table-cell-padding-sm: .3rem; /* Padding sm for tables. */ + --pgn-spacing-table-cell-padding-base: .75rem; /* Padding for tables. */ + --pgn-spacing-label-margin-bottom: .5rem; /* Margin bottom for label. */ + --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); /* Space value of level 5.5 */ + --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); /* Space value of level 4.5 */ + --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); /* Space value of level 3.5 */ + --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); /* Space value of level 2.5 */ + --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); /* Space value of level 1.5 */ + --pgn-spacing-spacer-base: 1rem; /* Basic space value */ + --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); /* Space value of level 6 */ + --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); /* Space value of level 5 */ + --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); /* Space value of level 4 */ + --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); /* Space value of level 3 */ + --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); /* Space value of level 2 */ + --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); /* Space value of level 1 */ + --pgn-spacing-spacer-0: 0rem; /* Space value of level 0 */ --pgn-spacing-mark-padding: .2em; --pgn-spacing-paragraph-margin-bottom: 1rem; --pgn-spacing-list-group-item-padding-x: 1.25rem; @@ -384,12 +383,12 @@ --pgn-spacing-alert-padding-y: 1.5rem; --pgn-spacing-action-row-gap-y: .5rem; --pgn-spacing-action-row-gap-x: .5rem; - --pgn-size-breakpoint-xxl: 1400px; - --pgn-size-breakpoint-xl: 1200px; - --pgn-size-breakpoint-lg: 992px; - --pgn-size-breakpoint-md: 768px; - --pgn-size-breakpoint-sm: 576px; - --pgn-size-breakpoint-xs: 0rem; + --pgn-size-breakpoint-xxl: 1400px; /* Starting breakpoint for large desktops, more than 1400px. */ + --pgn-size-breakpoint-xl: 1200px; /* Starting breakpoint for large desktops. */ + --pgn-size-breakpoint-lg: 992px; /* Starting breakpoint for desktops. */ + --pgn-size-breakpoint-md: 768px; /* Starting breakpoint for tablets. */ + --pgn-size-breakpoint-sm: 576px; /* Starting breakpoint for landscape phones. */ + --pgn-size-breakpoint-xs: 0rem; /* Starting breakpoint for portrait phones. */ --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base); --pgn-size-list-group-border-width: var(--pgn-size-border-width); --pgn-size-input-btn-focus-width: 1px; @@ -595,9 +594,9 @@ --pgn-size-annotation-arrow-border-width: .5rem; --pgn-size-alert-border-width: 0rem; --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-rounded-pill: 50rem; - --pgn-size-border-radius-sm: .25rem; - --pgn-size-border-radius-lg: .425rem; - --pgn-size-border-radius-base: .375rem; - --pgn-size-border-width: 1px; + --pgn-size-rounded-pill: 50rem; /* Pill border radius. */ + --pgn-size-border-radius-sm: .25rem; /* Small border radius. */ + --pgn-size-border-radius-lg: .425rem; /* Large border radius. */ + --pgn-size-border-radius-base: .375rem; /* Default border radius. */ + --pgn-size-border-width: 1px; /* Default border width. */ } diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css index d3aee7ed00..d9a16df413 100644 --- a/styles/css/themes/light/utility-classes.css +++ b/styles/css/themes/light/utility-classes.css @@ -1,7 +1,6 @@ -/* - * IMPORTANT: This file is the result of assembling design tokens. - * Do not edit directly. - * Generated on Tue, 27 Aug 2024 17:14:44 GMT +/** + * Do not edit directly, this file was auto-generated. + * Generated on Sat, 31 Aug 2024 19:26:11 GMT */ .bg-accent-a { diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 895537aa53..c9abae598a 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -1,7 +1,6 @@ -/* - * IMPORTANT: This file is the result of assembling design tokens. - * Do not edit directly. - * Generated on Tue, 27 Aug 2024 17:14:44 GMT +/** + * Do not edit directly, this file was auto-generated. + * Generated on Sat, 31 Aug 2024 19:26:11 GMT */ :root { @@ -114,115 +113,115 @@ --pgn-color-action-default-gray-300: #949494FF; --pgn-color-action-default-gray-200: #B3B3B3FF; --pgn-color-action-default-gray-100: #D2D2D2FF; - --pgn-color-dark-base: #273F2FFF; - --pgn-color-dark-900: #1B2C21FF; - --pgn-color-dark-800: #1D2F23FF; - --pgn-color-dark-700: #1F3226FF; - --pgn-color-dark-600: #23392AFF; - --pgn-color-dark-500: var(--pgn-color-dark-base); - --pgn-color-dark-400: #5D6F63FF; - --pgn-color-dark-300: #939F97FF; - --pgn-color-dark-200: #C9CFCBFF; - --pgn-color-dark-100: #F2F3F3FF; - --pgn-color-light-base: #E1DDDBFF; - --pgn-color-light-900: #9E9B99FF; - --pgn-color-light-800: #A9A6A4FF; - --pgn-color-light-700: #B4B1AFFF; - --pgn-color-light-600: #CBC7C5FF; - --pgn-color-light-500: var(--pgn-color-light-base); - --pgn-color-light-400: #E9E6E4FF; - --pgn-color-light-300: #F0EEEDFF; - --pgn-color-light-200: #F8F7F6FF; - --pgn-color-light-100: #FDFDFDFF; - --pgn-color-danger-base: var(--pgn-color-red); - --pgn-color-danger-900: #892029FF; - --pgn-color-danger-800: #92222CFF; - --pgn-color-danger-700: #9C242EFF; - --pgn-color-danger-600: #B02934FF; - --pgn-color-danger-500: var(--pgn-color-danger-base); - --pgn-color-danger-400: #D2626BFF; - --pgn-color-danger-300: #E1969DFF; - --pgn-color-danger-200: #F0CBCEFF; - --pgn-color-danger-100: #FBF2F3FF; - --pgn-color-warning-base: var(--pgn-color-yellow); - --pgn-color-warning-900: #B39800FF; - --pgn-color-warning-800: #BFA300FF; - --pgn-color-warning-700: #CCAE00FF; - --pgn-color-warning-600: #E6C300FF; - --pgn-color-warning-500: var(--pgn-color-warning-base); - --pgn-color-warning-400: #FFE340FF; - --pgn-color-warning-300: #FFEC80FF; - --pgn-color-warning-200: #FFF6BFFF; - --pgn-color-warning-100: #FFFDF0FF; - --pgn-color-info-base: var(--pgn-color-teal); - --pgn-color-info-900: #004C77FF; - --pgn-color-info-800: #005280FF; - --pgn-color-info-700: #005788FF; - --pgn-color-info-600: #006299FF; - --pgn-color-info-500: var(--pgn-color-info-base); - --pgn-color-info-400: #4092BFFF; - --pgn-color-info-300: #80B6D5FF; - --pgn-color-info-200: #BFDBEAFF; - --pgn-color-info-100: #F0F6FAFF; - --pgn-color-success-base: var(--pgn-color-green); - --pgn-color-success-900: #105B3AFF; - --pgn-color-success-800: #11623EFF; - --pgn-color-success-700: #126842FF; - --pgn-color-success-600: #15754BFF; - --pgn-color-success-500: var(--pgn-color-success-base); - --pgn-color-success-400: #51A17EFF; - --pgn-color-success-300: #8BC1A9FF; - --pgn-color-success-200: #C5E0D4FF; - --pgn-color-success-100: #F1F8F5FF; - --pgn-color-brand-base: #9D0054FF; - --pgn-color-brand-900: #6E003BFF; - --pgn-color-brand-800: #76003FFF; - --pgn-color-brand-700: #7E0043FF; - --pgn-color-brand-600: #8D004CFF; - --pgn-color-brand-500: var(--pgn-color-brand-base); - --pgn-color-brand-400: #B6407FFF; - --pgn-color-brand-300: #CE80AAFF; - --pgn-color-brand-200: #E7BFD4FF; - --pgn-color-brand-100: #F9F0F5FF; - --pgn-color-secondary-base: var(--pgn-color-gray-700); - --pgn-color-secondary-900: #303030FF; - --pgn-color-secondary-800: #343434FF; - --pgn-color-secondary-700: #373737FF; - --pgn-color-secondary-600: #3E3E3EFF; - --pgn-color-secondary-500: var(--pgn-color-secondary-base); - --pgn-color-secondary-400: #747474FF; - --pgn-color-secondary-300: #A2A2A2FF; - --pgn-color-secondary-200: #D1D1D1FF; - --pgn-color-secondary-100: #F4F4F4FF; - --pgn-color-primary-base: #0A3055FF; - --pgn-color-primary-900: #07223CFF; - --pgn-color-primary-800: #082440FF; - --pgn-color-primary-700: #082644FF; - --pgn-color-primary-600: #092B4DFF; - --pgn-color-primary-500: var(--pgn-color-primary-base); - --pgn-color-primary-400: #476480FF; - --pgn-color-primary-300: #8598AAFF; - --pgn-color-primary-200: #C2CBD5FF; - --pgn-color-primary-100: #F0F3F5FF; - --pgn-color-gray-base: #707070FF; - --pgn-color-gray-900: #212529FF; - --pgn-color-gray-800: #333333FF; - --pgn-color-gray-700: #454545FF; - --pgn-color-gray-600: #5C5C5CFF; - --pgn-color-gray-500: var(--pgn-color-gray-base); - --pgn-color-gray-400: #8F8F8FFF; - --pgn-color-gray-300: #ADADADFF; - --pgn-color-gray-200: #CCCCCCFF; - --pgn-color-gray-100: #EBEBEBFF; - --pgn-color-accent-b: #FFEE88FF; - --pgn-color-accent-a: #00BBF9FF; - --pgn-color-teal: #006DAAFF; - --pgn-color-yellow: #FFD900FF; - --pgn-color-green: #178253FF; - --pgn-color-red: #C32D3AFF; - --pgn-color-blue: #23419FFF; - --pgn-color-black: #000000FF; - --pgn-color-white: #FFFFFFFF; + --pgn-color-dark-base: #273F2FFF; /* Basic dark color. */ + --pgn-color-dark-900: #1B2C21FF; /* Dark color of level 900. */ + --pgn-color-dark-800: #1D2F23FF; /* Dark color of level 800. */ + --pgn-color-dark-700: #1F3226FF; /* Info color of level 700. */ + --pgn-color-dark-600: #23392AFF; /* Dark color of level 600. */ + --pgn-color-dark-500: var(--pgn-color-dark-base); /* Dark color of level 500. */ + --pgn-color-dark-400: #5D6F63FF; /* Dark color of level 400. */ + --pgn-color-dark-300: #939F97FF; /* Dark color of level 300. */ + --pgn-color-dark-200: #C9CFCBFF; /* Dark color of level 200. */ + --pgn-color-dark-100: #F2F3F3FF; /* Dark color of level 100. */ + --pgn-color-light-base: #E1DDDBFF; /* Basic light color. */ + --pgn-color-light-900: #9E9B99FF; /* Light color of level 900. */ + --pgn-color-light-800: #A9A6A4FF; /* Light color of level 800. */ + --pgn-color-light-700: #B4B1AFFF; /* Light color of level 700. */ + --pgn-color-light-600: #CBC7C5FF; /* Light color of level 600. */ + --pgn-color-light-500: var(--pgn-color-light-base); /* Light color of level 500. */ + --pgn-color-light-400: #E9E6E4FF; /* Light color of level 400. */ + --pgn-color-light-300: #F0EEEDFF; /* Light color of level 300. */ + --pgn-color-light-200: #F8F7F6FF; /* Light color of level 200. */ + --pgn-color-light-100: #FDFDFDFF; /* Light color of level 100. */ + --pgn-color-danger-base: var(--pgn-color-red); /* Basic danger color. */ + --pgn-color-danger-900: #892029FF; /* Danger color of level 900. */ + --pgn-color-danger-800: #92222CFF; /* Danger color of level 800. */ + --pgn-color-danger-700: #9C242EFF; /* Danger color of level 700. */ + --pgn-color-danger-600: #B02934FF; /* Danger color of level 600. */ + --pgn-color-danger-500: var(--pgn-color-danger-base); /* Danger color of level 500. */ + --pgn-color-danger-400: #D2626BFF; /* Danger color of level 400. */ + --pgn-color-danger-300: #E1969DFF; /* Danger color of level 300. */ + --pgn-color-danger-200: #F0CBCEFF; /* Danger color of level 200. */ + --pgn-color-danger-100: #FBF2F3FF; /* Danger color of level 100. */ + --pgn-color-warning-base: var(--pgn-color-yellow); /* Basic warning color. */ + --pgn-color-warning-900: #B39800FF; /* Warning color of level 900. */ + --pgn-color-warning-800: #BFA300FF; /* Warning color of level 800. */ + --pgn-color-warning-700: #CCAE00FF; /* Warning color of level 700. */ + --pgn-color-warning-600: #E6C300FF; /* Warning color of level 600. */ + --pgn-color-warning-500: var(--pgn-color-warning-base); /* Warning color of level 500. */ + --pgn-color-warning-400: #FFE340FF; /* Warning color of level 400. */ + --pgn-color-warning-300: #FFEC80FF; /* Warning color of level 300. */ + --pgn-color-warning-200: #FFF6BFFF; /* Warning color of level 200. */ + --pgn-color-warning-100: #FFFDF0FF; /* Warning color of level 100. */ + --pgn-color-info-base: var(--pgn-color-teal); /* Basic info color. */ + --pgn-color-info-900: #004C77FF; /* Info color of level 900. */ + --pgn-color-info-800: #005280FF; /* Info color of level 800. */ + --pgn-color-info-700: #005788FF; /* Info color of level 700. */ + --pgn-color-info-600: #006299FF; /* Info color of level 600. */ + --pgn-color-info-500: var(--pgn-color-info-base); /* Info color of level 500. */ + --pgn-color-info-400: #4092BFFF; /* Info color of level 400. */ + --pgn-color-info-300: #80B6D5FF; /* Info color of level 300. */ + --pgn-color-info-200: #BFDBEAFF; /* Info color of level 200. */ + --pgn-color-info-100: #F0F6FAFF; /* Info color of level 100. */ + --pgn-color-success-base: var(--pgn-color-green); /* Basic success color. */ + --pgn-color-success-900: #105B3AFF; /* Success color of level 900. */ + --pgn-color-success-800: #11623EFF; /* Success color of level 800. */ + --pgn-color-success-700: #126842FF; /* Success color of level 700. */ + --pgn-color-success-600: #15754BFF; /* Success color of level 600. */ + --pgn-color-success-500: var(--pgn-color-success-base); /* Success color of level 500. */ + --pgn-color-success-400: #51A17EFF; /* Success color of level 400. */ + --pgn-color-success-300: #8BC1A9FF; /* Success color of level 300. */ + --pgn-color-success-200: #C5E0D4FF; /* Success color of level 200. */ + --pgn-color-success-100: #F1F8F5FF; /* Success color of level 100. */ + --pgn-color-brand-base: #9D0054FF; /* Basic brand color. */ + --pgn-color-brand-900: #6E003BFF; /* Brand color of level 900. */ + --pgn-color-brand-800: #76003FFF; /* Brand color of level 800. */ + --pgn-color-brand-700: #7E0043FF; /* Brand color of level 700. */ + --pgn-color-brand-600: #8D004CFF; /* Brand color of level 600. */ + --pgn-color-brand-500: var(--pgn-color-brand-base); /* Brand color of level 500. */ + --pgn-color-brand-400: #B6407FFF; /* Brand color of level 400. */ + --pgn-color-brand-300: #CE80AAFF; /* Brand color of level 300. */ + --pgn-color-brand-200: #E7BFD4FF; /* Brand color of level 200. */ + --pgn-color-brand-100: #F9F0F5FF; /* Brand color of level 100. */ + --pgn-color-secondary-base: var(--pgn-color-gray-700); /* Basic secondary color. */ + --pgn-color-secondary-900: #303030FF; /* Secondary color of level 900. */ + --pgn-color-secondary-800: #343434FF; /* Secondary color of level 800. */ + --pgn-color-secondary-700: #373737FF; /* Secondary color of level 700. */ + --pgn-color-secondary-600: #3E3E3EFF; /* Secondary color of level 600. */ + --pgn-color-secondary-500: var(--pgn-color-secondary-base); /* Secondary color of level 500. */ + --pgn-color-secondary-400: #747474FF; /* Secondary color of level 400. */ + --pgn-color-secondary-300: #A2A2A2FF; /* Secondary color of level 300. */ + --pgn-color-secondary-200: #D1D1D1FF; /* Secondary color of level 200. */ + --pgn-color-secondary-100: #F4F4F4FF; /* Secondary color of level 100. */ + --pgn-color-primary-base: #0A3055FF; /* Basic primary color. */ + --pgn-color-primary-900: #07223CFF; /* Primary color of level 900. */ + --pgn-color-primary-800: #082440FF; /* Primary color of level 800. */ + --pgn-color-primary-700: #082644FF; /* Primary color of level 700. */ + --pgn-color-primary-600: #092B4DFF; /* Primary color of level 600. */ + --pgn-color-primary-500: var(--pgn-color-primary-base); /* Primary color of level 500. */ + --pgn-color-primary-400: #476480FF; /* Primary color of level 400. */ + --pgn-color-primary-300: #8598AAFF; /* Primary color of level 300. */ + --pgn-color-primary-200: #C2CBD5FF; /* Primary color of level 200. */ + --pgn-color-primary-100: #F0F3F5FF; /* Primary color of level 100. */ + --pgn-color-gray-base: #707070FF; /* Basic gray color. */ + --pgn-color-gray-900: #212529FF; /* Gray color of level 900. */ + --pgn-color-gray-800: #333333FF; /* Gray color of level 800. */ + --pgn-color-gray-700: #454545FF; /* Gray color of level 700. */ + --pgn-color-gray-600: #5C5C5CFF; /* Gray color of level 600. */ + --pgn-color-gray-500: var(--pgn-color-gray-base); /* Gray color of level 500. */ + --pgn-color-gray-400: #8F8F8FFF; /* Gray color of level 400. */ + --pgn-color-gray-300: #ADADADFF; /* Gray color of level 300. */ + --pgn-color-gray-200: #CCCCCCFF; /* Gray color of level 200. */ + --pgn-color-gray-100: #EBEBEBFF; /* Gray color of level 100. */ + --pgn-color-accent-b: #FFEE88FF; /* Accent-B color. */ + --pgn-color-accent-a: #00BBF9FF; /* Accent-A color. */ + --pgn-color-teal: #006DAAFF; /* Teal color. */ + --pgn-color-yellow: #FFD900FF; /* Yellow color. */ + --pgn-color-green: #178253FF; /* Green color. */ + --pgn-color-red: #C32D3AFF; /* Red color. */ + --pgn-color-blue: #23419FFF; /* Blue color. */ + --pgn-color-black: #000000FF; /* Black color. */ + --pgn-color-white: #FFFFFFFF; /* White color. */ --pgn-color-yiq-light: var(--pgn-color-white); --pgn-color-blockquote-small: var(--pgn-color-gray-500); --pgn-color-mark-bg: #FFF243FF; @@ -240,19 +239,19 @@ --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100); --pgn-color-list-group-bg-base: var(--pgn-color-white); --pgn-color-list-group-base: inherit; - --pgn-color-link-brand-inline-hover-decoration: var(--pgn-color-link-brand-inline-hover-base); + --pgn-color-link-brand-inline-hover-decoration: #51002BFF; --pgn-color-link-brand-inline-hover-base: #51002BFF; --pgn-color-link-brand-inline-decoration: #9D00544D; --pgn-color-link-brand-inline-base: var(--pgn-color-brand-500); --pgn-color-link-brand-hover: #51002BFF; --pgn-color-link-brand-base: var(--pgn-color-brand-500); - --pgn-color-link-muted-inline-hover-decoration: var(--pgn-color-link-muted-inline-hover-base); + --pgn-color-link-muted-inline-hover-decoration: #020911FF; --pgn-color-link-muted-inline-hover-base: #020911FF; --pgn-color-link-muted-inline-decoration: #0A30554D; --pgn-color-link-muted-inline-base: var(--pgn-color-primary-500); --pgn-color-link-muted-hover: #020911FF; --pgn-color-link-muted-base: var(--pgn-color-primary-500); - --pgn-color-link-inline-hover-decoration: var(--pgn-color-link-inline-hover-base); + --pgn-color-link-inline-hover-decoration: #003C5EFF; --pgn-color-link-inline-hover-base: #003C5EFF; --pgn-color-link-inline-decoration: #006DAA4D; --pgn-color-link-inline-base: var(--pgn-color-info-500); @@ -1442,78 +1441,77 @@ --pgn-color-alert-icon-success: var(--pgn-color-theme-default-success); --pgn-color-alert-content: var(--pgn-color-gray-700); --pgn-color-alert-title: var(--pgn-color-black); - --pgn-color-theme-active-gray: var(--pgn-color-gray-900); - --pgn-color-theme-active-dark: var(--pgn-color-dark-900); - --pgn-color-theme-active-light: var(--pgn-color-light-900); - --pgn-color-theme-active-danger: var(--pgn-color-danger-900); - --pgn-color-theme-active-warning: var(--pgn-color-warning-900); - --pgn-color-theme-active-info: var(--pgn-color-info-900); - --pgn-color-theme-active-success: var(--pgn-color-success-900); - --pgn-color-theme-active-brand: var(--pgn-color-brand-900); - --pgn-color-theme-active-secondary: var(--pgn-color-secondary-900); - --pgn-color-theme-active-primary: var(--pgn-color-primary-900); - --pgn-color-theme-hover-gray: var(--pgn-color-gray-700); - --pgn-color-theme-hover-dark: var(--pgn-color-dark-700); - --pgn-color-theme-hover-light: var(--pgn-color-light-700); - --pgn-color-theme-hover-danger: var(--pgn-color-danger-700); - --pgn-color-theme-hover-warning: var(--pgn-color-warning-700); - --pgn-color-theme-hover-info: var(--pgn-color-info-700); - --pgn-color-theme-hover-success: var(--pgn-color-success-700); - --pgn-color-theme-hover-brand: var(--pgn-color-brand-700); - --pgn-color-theme-hover-secondary: var(--pgn-color-secondary-700); - --pgn-color-theme-hover-primary: var(--pgn-color-primary-700); - --pgn-color-theme-default-gray: var(--pgn-color-gray-500); - --pgn-color-theme-default-dark: var(--pgn-color-dark-500); - --pgn-color-theme-default-light: var(--pgn-color-light-500); - --pgn-color-theme-default-danger: var(--pgn-color-danger-500); - --pgn-color-theme-default-warning: var(--pgn-color-warning-500); - --pgn-color-theme-default-info: var(--pgn-color-info-500); - --pgn-color-theme-default-success: var(--pgn-color-success-500); - --pgn-color-theme-default-brand: var(--pgn-color-brand-500); - --pgn-color-theme-default-secondary: var(--pgn-color-secondary-500); - --pgn-color-theme-default-primary: var(--pgn-color-primary-500); - --pgn-color-theme-focus-gray: var(--pgn-color-gray-500); - --pgn-color-theme-focus-dark: var(--pgn-color-dark-500); - --pgn-color-theme-focus-light: var(--pgn-color-light-500); - --pgn-color-theme-focus-danger: var(--pgn-color-danger-500); - --pgn-color-theme-focus-warning: var(--pgn-color-warning-500); - --pgn-color-theme-focus-info: var(--pgn-color-info-500); - --pgn-color-theme-focus-success: var(--pgn-color-success-500); - --pgn-color-theme-focus-brand: var(--pgn-color-brand-500); - --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500); - --pgn-color-theme-focus-primary: var(--pgn-color-primary-500); - --pgn-color-theme-border-gray: var(--pgn-color-gray-200); - --pgn-color-theme-border-dark: var(--pgn-color-dark-200); - --pgn-color-theme-border-light: var(--pgn-color-light-200); - --pgn-color-theme-border-danger: var(--pgn-color-danger-200); - --pgn-color-theme-border-warning: var(--pgn-color-warning-200); - --pgn-color-theme-border-info: var(--pgn-color-info-200); - --pgn-color-theme-border-success: var(--pgn-color-success-200); - --pgn-color-theme-border-brand: var(--pgn-color-brand-200); - --pgn-color-theme-border-secondary: var(--pgn-color-secondary-200); - --pgn-color-theme-border-primary: var(--pgn-color-primary-200); - --pgn-color-theme-bg-gray: var(--pgn-color-gray-100); - --pgn-color-theme-bg-dark: var(--pgn-color-dark-100); - --pgn-color-theme-bg-light: var(--pgn-color-light-100); - --pgn-color-theme-bg-danger: var(--pgn-color-danger-100); - --pgn-color-theme-bg-warning: var(--pgn-color-warning-100); - --pgn-color-theme-bg-info: var(--pgn-color-info-100); - --pgn-color-theme-bg-success: var(--pgn-color-success-100); - --pgn-color-theme-bg-brand: var(--pgn-color-brand-100); - --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100); - --pgn-color-theme-bg-primary: var(--pgn-color-primary-100); - --pgn-color-border: var(--pgn-color-gray-200); - --pgn-color-table-border: var(--pgn-color-border); - --pgn-color-table-caption: var(--pgn-color-text-muted); + --pgn-color-theme-active-gray: var(--pgn-color-gray-900); /* Theme-specific gray active color. */ + --pgn-color-theme-active-dark: var(--pgn-color-dark-900); /* Theme-specific dark active color. */ + --pgn-color-theme-active-light: var(--pgn-color-light-900); /* Theme-specific light active color. */ + --pgn-color-theme-active-danger: var(--pgn-color-danger-900); /* Theme-specific danger active color. */ + --pgn-color-theme-active-warning: var(--pgn-color-warning-900); /* Theme-specific warning active color. */ + --pgn-color-theme-active-info: var(--pgn-color-info-900); /* Theme-specific info active color. */ + --pgn-color-theme-active-success: var(--pgn-color-success-900); /* Theme-specific success active color. */ + --pgn-color-theme-active-brand: var(--pgn-color-brand-900); /* Theme-specific brand active color. */ + --pgn-color-theme-active-secondary: var(--pgn-color-secondary-900); /* Theme-specific secondary active color. */ + --pgn-color-theme-active-primary: var(--pgn-color-primary-900); /* Theme-specific primary active color. */ + --pgn-color-theme-hover-gray: var(--pgn-color-gray-700); /* Theme-specific gray hover color. */ + --pgn-color-theme-hover-dark: var(--pgn-color-dark-700); /* Theme-specific dark hover color. */ + --pgn-color-theme-hover-light: var(--pgn-color-light-700); /* Theme-specific light hover color. */ + --pgn-color-theme-hover-danger: var(--pgn-color-danger-700); /* Theme-specific danger hover color. */ + --pgn-color-theme-hover-warning: var(--pgn-color-warning-700); /* Theme-specific warning hover color. */ + --pgn-color-theme-hover-info: var(--pgn-color-info-700); /* Theme-specific info hover color. */ + --pgn-color-theme-hover-success: var(--pgn-color-success-700); /* Theme-specific success hover color. */ + --pgn-color-theme-hover-brand: var(--pgn-color-brand-700); /* Theme-specific brand hover color. */ + --pgn-color-theme-hover-secondary: var(--pgn-color-secondary-700); /* Theme-specific secondary hover color. */ + --pgn-color-theme-hover-primary: var(--pgn-color-primary-700); /* Theme-specific primary hover color. */ + --pgn-color-theme-default-gray: var(--pgn-color-gray-500); /* Theme-specific gray default color. */ + --pgn-color-theme-default-dark: var(--pgn-color-dark-500); /* Theme-specific dark default color. */ + --pgn-color-theme-default-light: var(--pgn-color-light-500); /* Theme-specific light default color. */ + --pgn-color-theme-default-danger: var(--pgn-color-danger-500); /* Theme-specific danger default color. */ + --pgn-color-theme-default-warning: var(--pgn-color-warning-500); /* Theme-specific warning default color. */ + --pgn-color-theme-default-info: var(--pgn-color-info-500); /* Theme-specific info default color. */ + --pgn-color-theme-default-success: var(--pgn-color-success-500); /* Theme-specific success default color. */ + --pgn-color-theme-default-brand: var(--pgn-color-brand-500); /* Theme-specific brand default color. */ + --pgn-color-theme-default-secondary: var(--pgn-color-secondary-500); /* Theme-specific secondary default color. */ + --pgn-color-theme-default-primary: var(--pgn-color-primary-500); /* Theme-specific primary default color. */ + --pgn-color-theme-focus-gray: var(--pgn-color-gray-500); /* Theme-specific gray focus color. */ + --pgn-color-theme-focus-dark: var(--pgn-color-dark-500); /* Theme-specific dark focus color. */ + --pgn-color-theme-focus-light: var(--pgn-color-light-500); /* Theme-specific light focus color. */ + --pgn-color-theme-focus-danger: var(--pgn-color-danger-500); /* Theme-specific danger focus color. */ + --pgn-color-theme-focus-warning: var(--pgn-color-warning-500); /* Theme-specific warning focus color. */ + --pgn-color-theme-focus-info: var(--pgn-color-info-500); /* Theme-specific info focus color. */ + --pgn-color-theme-focus-success: var(--pgn-color-success-500); /* Theme-specific success focus color. */ + --pgn-color-theme-focus-brand: var(--pgn-color-brand-500); /* Theme-specific brand focus color. */ + --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500); /* Theme-specific secondary focus color. */ + --pgn-color-theme-focus-primary: var(--pgn-color-primary-500); /* Theme-specific primary focus color. */ + --pgn-color-theme-border-gray: var(--pgn-color-gray-200); /* Theme-specific gray border color. */ + --pgn-color-theme-border-dark: var(--pgn-color-dark-200); /* Theme-specific dark border color. */ + --pgn-color-theme-border-light: var(--pgn-color-light-200); /* Theme-specific light border color. */ + --pgn-color-theme-border-danger: var(--pgn-color-danger-200); /* Theme-specific danger border color. */ + --pgn-color-theme-border-warning: var(--pgn-color-warning-200); /* Theme-specific warning border color. */ + --pgn-color-theme-border-info: var(--pgn-color-info-200); /* Theme-specific info border color. */ + --pgn-color-theme-border-success: var(--pgn-color-success-200); /* Theme-specific success border color. */ + --pgn-color-theme-border-brand: var(--pgn-color-brand-200); /* Theme-specific brand border color. */ + --pgn-color-theme-border-secondary: var(--pgn-color-secondary-200); /* Theme-specific secondary border color. */ + --pgn-color-theme-border-primary: var(--pgn-color-primary-200); /* Theme-specific primary border color. */ + --pgn-color-theme-bg-gray: var(--pgn-color-gray-100); /* Theme-specific gray background color. */ + --pgn-color-theme-bg-dark: var(--pgn-color-dark-100); /* Theme-specific dark background color. */ + --pgn-color-theme-bg-light: var(--pgn-color-light-100); /* Theme-specific light background color. */ + --pgn-color-theme-bg-danger: var(--pgn-color-danger-100); /* Theme-specific danger background color. */ + --pgn-color-theme-bg-warning: var(--pgn-color-warning-100); /* Theme-specific warning background color. */ + --pgn-color-theme-bg-info: var(--pgn-color-info-100); /* Theme-specific info background color. */ + --pgn-color-theme-bg-success: var(--pgn-color-success-100); /* Theme-specific success background color. */ + --pgn-color-theme-bg-brand: var(--pgn-color-brand-100); /* Theme-specific brand background color. */ + --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100); /* Theme-specific secondary background color. */ + --pgn-color-theme-bg-primary: var(--pgn-color-primary-100); /* Theme-specific primary background color. */ + --pgn-color-border: var(--pgn-color-gray-200); /* Border color. */ + --pgn-color-table-border: var(--pgn-color-border); /* Table border color. */ + --pgn-color-table-caption: var(--pgn-color-text-muted); /* Table caption color. */ --pgn-color-input-btn-focus: var(--pgn-color-bg-active); - --pgn-color-input-focus: var(--pgn-color-primary-500); - --pgn-color-disabled: var(--pgn-color-gray-500); - --pgn-color-active: var(--pgn-color-white); - --pgn-color-text-50-white: #FFFFFF80; - --pgn-color-text-50-black: #00000080; - --pgn-color-bg-active: var(--pgn-color-primary-500); - --pgn-color-bg-base: var(--pgn-color-white); - --pgn-theme-interval: 8%; + --pgn-color-input-focus: var(--pgn-color-primary-500); /* Focused input value color. */ + --pgn-color-disabled: var(--pgn-color-gray-500); /* Color for disabled element. */ + --pgn-color-active: var(--pgn-color-white); /* Color for active element. */ + --pgn-color-text-50-white: #FFFFFF80; /* White text color with transparency of 50%. */ + --pgn-color-text-50-black: #00000080; /* Black text color with transparency of 50%. */ + --pgn-color-bg-active: var(--pgn-color-primary-500); /* Active background color. */ + --pgn-color-bg-base: var(--pgn-color-white); /* Basic background color. */ --pgn-other-link-emphasized-hover-darken-percentage: 15%; --pgn-other-tooltip-opacity: 1; --pgn-other-search-field-disabled-opacity: .3; @@ -1536,43 +1534,39 @@ --pgn-other-carousel-control-opacity-base: .5; --pgn-other-btn-disabled-opacity: .65; --pgn-other-form-feedback-tooltip-opacity: .9; - --pgn-other-form-control-custom-file-content: Browse; - --pgn-other-form-control-custom-file-lang: en; - --pgn-other-form-control-range-track-cursor: pointer; - --pgn-other-form-control-cursor: auto; - --pgn-elevation-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); - --pgn-elevation-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); - --pgn-elevation-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); - --pgn-elevation-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15); /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15); /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15); /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15); /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15); /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15); /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15); /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15); /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15); /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15); /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15); /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15); /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15); /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15); /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15); /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15); /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15); /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); /* Large box shadow. */ + --pgn-elevation-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); /* Small box shadow. */ + --pgn-elevation-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); /* Default box shadow. */ + --pgn-elevation-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); /* Basic box shadow of level 1. */ --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus); --pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15); --pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); @@ -1642,598 +1636,8 @@ --pgn-elevation-btn-box-shadow-active: none; --pgn-elevation-btn-box-shadow-base: none; --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); - --pgn-elevation-zindex-fixed: 1030; - --pgn-elevation-zindex-sticky: 1020; - --pgn-elevation-zindex-2000: 2000; - --pgn-elevation-zindex-1800: 1800; - --pgn-elevation-zindex-1600: 1600; - --pgn-elevation-zindex-1400: 1400; - --pgn-elevation-zindex-1200: 1200; - --pgn-elevation-zindex-1000: 1000; - --pgn-elevation-zindex-800: 800; - --pgn-elevation-zindex-600: 600; - --pgn-elevation-zindex-400: 400; - --pgn-elevation-zindex-200: 200; - --pgn-elevation-zindex-0: 0; --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); - --pgn-elevation-tooltip-zindex: 1070; - --pgn-elevation-sheet-zindex-main: 1032; - --pgn-elevation-sheet-zindex-backdrop: 1031; - --pgn-elevation-product-tour-checkpoint-zindex: 1060; --pgn-elevation-popover-box-shadow: none; - --pgn-elevation-popover-zindex: 1060; --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15); - --pgn-elevation-modal-zindex: 1050; - --pgn-elevation-modal-backdrop-zindex: 1040; --pgn-elevation-dropdown-box-shadow: none; - --pgn-elevation-dropdown-zindex: 1000; - --pgn-transition-collapse-width: width .35s ease; - --pgn-transition-collapse-height: height .35s ease; - --pgn-transition-fade: opacity .15s linear; - --pgn-transition-base: all .2s ease-in-out; - --pgn-transition-progress-bar-bar-transition: width .6s ease; - --pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite; - --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; - --pgn-transition-form-input: border-color .15s ease-in-out, box-shadow .15s ease-in-out; - --pgn-transition-carousel-control: opacity .15s ease; - --pgn-transition-carousel-indicator: opacity .6s ease; - --pgn-transition-carousel-duration: .6s; - --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; - --pgn-transition-btn: none; - --pgn-transition-badge: none; - --pgn-typography-line-height-micro: .938rem; - --pgn-typography-line-height-sm: 1.5rem; - --pgn-typography-line-height-lg: 1.5rem; - --pgn-typography-line-height-base: 1.5556rem; - --pgn-typography-font-weight-table-th: normal; - --pgn-typography-font-weight-lead: inherit; - --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); - --pgn-typography-font-weight-bolder: bolder; - --pgn-typography-font-weight-bold: 700; - --pgn-typography-font-weight-semi-bold: 500; - --pgn-typography-font-weight-normal: 400; - --pgn-typography-font-weight-light: 300; - --pgn-typography-font-weight-lighter: lighter; - --pgn-typography-font-size-micro: .688rem; - --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25); - --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6); - --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5); - --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4); - --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3); - --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2); - --pgn-typography-font-size-mobile-h1: 2.25rem; - --pgn-typography-font-size-h6: .75rem; - --pgn-typography-font-size-h5: .875rem; - --pgn-typography-font-size-h4: 1.125rem; - --pgn-typography-font-size-h3: 1.375rem; - --pgn-typography-font-size-h2: 2rem; - --pgn-typography-font-size-h1: 2.5rem; - --pgn-typography-font-size-small-x: 75%; - --pgn-typography-font-size-small-base: 87.5%; - --pgn-typography-font-size-xs: .75rem; - --pgn-typography-font-size-sm: .875rem; - --pgn-typography-font-size-lg: 1.4063rem; - --pgn-typography-font-size-base: 1.125rem; - --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace; - --pgn-typography-font-family-serif: serif; - --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, '"Helvetica Neue"', Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'; - --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); - --pgn-typography-print-page-size: a3; - --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-mobile: 3.25rem; - --pgn-typography-display-line-height-mobile: 3.5rem; - --pgn-typography-display-line-height-base: 1rem; - --pgn-typography-display-4: 7.5rem; - --pgn-typography-display-3: 5.625rem; - --pgn-typography-display-2: 4.875rem; - --pgn-typography-display-1: 3.75rem; - --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25); - --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base); - --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-link-decoration-brand-inline-hover: underline; - --pgn-typography-link-decoration-brand-inline-base: underline; - --pgn-typography-link-decoration-brand-hover: underline; - --pgn-typography-link-decoration-brand-base: none; - --pgn-typography-link-decoration-muted-inline-hover: underline; - --pgn-typography-link-decoration-muted-inline-base: underline; - --pgn-typography-link-decoration-muted-hover: underline; - --pgn-typography-link-decoration-muted-base: none; - --pgn-typography-link-decoration-inline-hover: underline; - --pgn-typography-link-decoration-inline-base: underline; - --pgn-typography-link-decoration-hover: underline; - --pgn-typography-link-decoration-base: none; - --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg); - --pgn-typography-input-btn-line-height-sm: 1.4286rem; - --pgn-typography-input-btn-line-height-base: 1.3333rem; - --pgn-typography-input-btn-font-size-lg: 1.325rem; - --pgn-typography-input-btn-font-size-sm: .875rem; - --pgn-typography-input-btn-font-size-base: 1.125rem; - --pgn-typography-input-btn-font-family: inherit; - --pgn-typography-headings-line-height: 1.25rem; - --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-headings-font-family: inherit; - --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-toast-font-size: .875rem; - --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs); - --pgn-typography-spacer-line-height: 1px; - --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75); - --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-pagination-line-height: 1.5rem; - --pgn-typography-pagination-font-size-sm: .875rem; - --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg); - --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2); - --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg); - --pgn-typography-nav-link-text-decoration: none; - --pgn-typography-nav-link-font-weight: 500; - --pgn-typography-menu-select-btn-link-text-decoration-thickness: .125rem; - --pgn-typography-menu-select-btn-link-text-decoration-line: underline; - --pgn-typography-image-figure-caption-font-size: 90%; - --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base); - --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base); - --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight); - --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family); - --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base); - --pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base); - --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight); - --pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg); - --pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm); - --pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base); - --pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family); - --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); - --pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm); - --pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base); - --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base); - --pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg); - --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); - --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base); - --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family); - --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-small-x); - --pgn-typography-dropdown-item-text-decoration: none; - --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base); - --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size); - --pgn-typography-code-font-size: 87.5%; - --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5); - --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-small-x); - --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); - --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm); - --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base); - --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal); - --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg); - --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); - --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base); - --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family); - --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-badge-font-size: 75%; - --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm); - --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-alert-line-height: 1.5rem; - --pgn-typography-alert-font-size: .875rem; - --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); - --pgn-spacing-grid-gutter-width: 24px; - --pgn-spacing-table-cell-padding-sm: .3rem; - --pgn-spacing-table-cell-padding-base: .75rem; - --pgn-spacing-label-margin-bottom: .5rem; - --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); - --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); - --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); - --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); - --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); - --pgn-spacing-spacer-base: 1rem; - --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); - --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); - --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); - --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); - --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); - --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); - --pgn-spacing-spacer-0: 0rem; - --pgn-spacing-mark-padding: .2em; - --pgn-spacing-paragraph-margin-bottom: 1rem; - --pgn-spacing-list-group-item-padding-x: 1.25rem; - --pgn-spacing-list-group-item-padding-y: .75rem; - --pgn-spacing-list-inline-padding: .5rem; - --pgn-spacing-input-btn-padding-lg-x: 1.25rem; - --pgn-spacing-input-btn-padding-lg-y: .6875rem; - --pgn-spacing-input-btn-padding-sm-x: .75rem; - --pgn-spacing-input-btn-padding-sm-y: .4375rem; - --pgn-spacing-input-btn-padding-x: 1rem; - --pgn-spacing-input-btn-padding-y: .5625rem; - --pgn-spacing-headings-margin-bottom: .5rem; - --pgn-spacing-caret-vertical-align: .255em; - --pgn-spacing-caret-base: .255em; - --pgn-spacing-tooltip-margin: 0rem; - --pgn-spacing-tooltip-padding-x: .5rem; - --pgn-spacing-tooltip-padding-y: .5rem; - --pgn-spacing-toast-container-gutter-sm: .625rem; - --pgn-spacing-toast-container-gutter-lg: 1.25rem; - --pgn-spacing-toast-padding-y: .25rem; - --pgn-spacing-toast-padding-x: .75rem; - --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px; - --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); - --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem; - --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); - --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem; - --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); - --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem; - --pgn-spacing-sticky-offset: 0rem; - --pgn-spacing-stepper-header-step-list-margin: 0rem; - --pgn-spacing-stepper-header-step-list-padding-x: 0rem; - --pgn-spacing-stepper-header-step-list-padding-y: .25rem; - --pgn-spacing-stepper-header-step-padding: .25rem; - --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base); - --pgn-spacing-stepper-header-padding-y: .75rem; - --pgn-spacing-vertical-align: .125em; - --pgn-spacing-selectable-box-box-space: .75rem; - --pgn-spacing-selectable-box-border-radius: .25rem; - --pgn-spacing-selectable-box-padding: 1rem; - --pgn-spacing-search-field-margin-button: .5rem; - --pgn-spacing-progress-bar-hint-annotation-gap: .5rem; - --pgn-spacing-popover-icon-margin-right: .5rem; - --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x); - --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y); - --pgn-spacing-popover-header-padding-x: 1rem; - --pgn-spacing-popover-header-padding-y: .5rem; - --pgn-spacing-pagination-padding-x-lg: 1.5rem; - --pgn-spacing-pagination-padding-x-sm: .6rem; - --pgn-spacing-pagination-padding-x-base: 1rem; - --pgn-spacing-pagination-padding-y-lg: .75rem; - --pgn-spacing-pagination-padding-y-sm: .8rem; - --pgn-spacing-pagination-padding-y-base: .625rem; - --pgn-spacing-navbar-toggler-padding-x: .75rem; - --pgn-spacing-navbar-toggler-padding-y: .25rem; - --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2); - --pgn-spacing-navbar-padding-x-nav-link: .5rem; - --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base); - --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2); - --pgn-spacing-nav-link-distance-to-border: 4px; - --pgn-spacing-nav-link-padding-x: 1rem; - --pgn-spacing-nav-link-padding-y: .5rem; - --pgn-spacing-modal-dialog-margin: 1.5rem; - --pgn-spacing-modal-header-padding-y: 1rem; - --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem; - --pgn-spacing-modal-footer-padding-y: 1rem; - --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem; - --pgn-spacing-modal-inner-padding-bottom: .7rem; - --pgn-spacing-modal-inner-padding-base: 1.5rem; - --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left); - --pgn-spacing-menu-item-icon-margin-left: .25em; - --pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base); - --pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base); - --pgn-spacing-image-thumbnail-padding: .25rem; - --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base); - --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base); - --pgn-spacing-form-control-select-icon-padding: .5625rem; - --pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem; - --pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem; - --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); - --pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)); - --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)); - --pgn-spacing-form-control-select-indicator-padding: 1rem; - --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg); - --pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm); - --pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base); - --pgn-spacing-form-control-select-padding-y-lg: var(--pgn-spacing-form-input-padding-y-lg); - --pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm); - --pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base); - --pgn-spacing-form-control-spacer-x: 1rem; - --pgn-spacing-form-control-gutter: .5rem; - --pgn-spacing-form-group-margin-bottom: 1rem; - --pgn-spacing-form-check-position-axis: .375rem; - --pgn-spacing-form-check-inline-margin-x: .75rem; - --pgn-spacing-form-text-margin-top: .25rem; - --pgn-spacing-form-input-check-margin-y: .3rem; - --pgn-spacing-form-input-check-margin-x-inline: .3125rem; - --pgn-spacing-form-input-check-margin-x-base: .25rem; - --pgn-spacing-form-input-check-gutter: 1.25rem; - --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x); - --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x); - --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x); - --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y); - --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y); - --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y); - --pgn-spacing-dropzone-border-base: 1px; - --pgn-spacing-dropzone-padding: 1.5rem; - --pgn-spacing-dropdown-close-container-top: .625rem; - --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2); - --pgn-spacing-dropdown-padding-header: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-item); - --pgn-spacing-dropdown-padding-y-item: .25rem; - --pgn-spacing-dropdown-padding-y-base: .5rem; - --pgn-spacing-dropdown-padding-x-item: 1rem; - --pgn-spacing-dropdown-padding-x-base: 0rem; - --pgn-spacing-dropdown-spacer: .125rem; - --pgn-spacing-data-table-footer-position: center; - --pgn-spacing-data-table-padding-cell: .5rem .75rem; - --pgn-spacing-data-table-padding-small: .5rem; - --pgn-spacing-data-table-padding-y: .75rem; - --pgn-spacing-data-table-padding-x: .75rem; - --pgn-spacing-collapsible-card-spacer-basic-icon: .625rem; - --pgn-spacing-collapsible-card-spacer-basic-x: .5rem; - --pgn-spacing-collapsible-card-spacer-basic-y: .5rem; - --pgn-spacing-collapsible-card-spacer-icon: 2.5rem; - --pgn-spacing-collapsible-card-spacer-left-body: .75rem; - --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x); - --pgn-spacing-collapsible-card-spacer-x-base: .5rem; - --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y); - --pgn-spacing-collapsible-card-spacer-y-base: .5rem; - --pgn-spacing-code-kbd-padding-x: .4rem; - --pgn-spacing-code-kbd-padding-y: .2rem; - --pgn-spacing-chip-carousel-container-padding-y: .313rem; - --pgn-spacing-chip-carousel-container-padding-x: .625rem; - --pgn-spacing-chip-carousel-controls-top-offset: .375rem; - --pgn-spacing-chip-outline-width: 3px; - --pgn-spacing-chip-outline-focus-distance-dark: .313rem; - --pgn-spacing-chip-outline-focus-distance-light: .313rem; - --pgn-spacing-chip-outline-selected-distance-dark: 3px; - --pgn-spacing-chip-outline-selected-distance-light: 3px; - --pgn-spacing-chip-padding-x: .5rem; - --pgn-spacing-chip-padding-y: 1px; - --pgn-spacing-chip-margin-icon: .25rem; - --pgn-spacing-chip-margin-base: .125rem; - --pgn-spacing-carousel-indicator-spacer: 3px; - --pgn-spacing-card-focus-border-offset: 5px; - --pgn-spacing-card-logo-bottom-offset-horizontal: .4375rem; - --pgn-spacing-card-logo-bottom-offset-base: 1rem; - --pgn-spacing-card-logo-left-offset-horizontal: .4375rem; - --pgn-spacing-card-logo-left-offset-base: 1.5rem; - --pgn-spacing-card-loading-skeleton-spacer: .313rem; - --pgn-spacing-card-footer-action-gap: .5rem; - --pgn-spacing-card-columns-gap: 1.25rem; - --pgn-spacing-card-columns-count: 3rem; - --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y); - --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3); - --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group); - --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3); - --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group); - --pgn-spacing-card-margin-group: 12px; - --pgn-spacing-card-spacer-y: .75rem; - --pgn-spacing-card-spacer-x: 1.25rem; - --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width)); - --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap)); - --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width); - --pgn-spacing-btn-block-spacing-y: .5rem; - --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x); - --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x); - --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x); - --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y); - --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y); - --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y); - --pgn-spacing-bubble-expandable-padding-x: .25rem; - --pgn-spacing-bubble-expandable-padding-y: 0rem; - --pgn-spacing-breadcrumb-margin-left: .5rem; - --pgn-spacing-badge-padding-y: .125rem; - --pgn-spacing-badge-padding-x-pill: .6em; - --pgn-spacing-badge-padding-x-base: .5rem; - --pgn-spacing-avatar-button-padding-left-lg: .25em; - --pgn-spacing-avatar-button-padding-left-sm: .25em; - --pgn-spacing-avatar-button-padding-left-base: .25em; - --pgn-spacing-annotation-arrow-side-margin: .25rem; - --pgn-spacing-annotation-padding: .5rem; - --pgn-spacing-alert-icon-space: .8rem; - --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3); - --pgn-spacing-alert-margin-bottom: 1rem; - --pgn-spacing-alert-padding-x: 1.5rem; - --pgn-spacing-alert-padding-y: 1.5rem; - --pgn-spacing-action-row-gap-y: .5rem; - --pgn-spacing-action-row-gap-x: .5rem; - --pgn-size-breakpoint-xxl: 1400px; - --pgn-size-breakpoint-xl: 1200px; - --pgn-size-breakpoint-lg: 992px; - --pgn-size-breakpoint-md: 768px; - --pgn-size-breakpoint-sm: 576px; - --pgn-size-breakpoint-xs: 0rem; - --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-list-group-border-width: var(--pgn-size-border-width); - --pgn-size-input-btn-focus-width: 1px; - --pgn-size-input-btn-border-width: var(--pgn-size-border-width); - --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base); - --pgn-size-hr-border-width: var(--pgn-size-border-width); - --pgn-size-caret-width: .3em; - --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-tooltip-arrow-width: .8rem; - --pgn-size-tooltip-arrow-height: .4rem; - --pgn-size-tooltip-max-width: 200px; - --pgn-size-toast-border-radius: .25rem; - --pgn-size-toast-border-width: 1px; - --pgn-size-toast-max-width: 400px; - --pgn-size-tabs-notification-width: 1rem; - --pgn-size-tabs-notification-height: 1rem; - --pgn-size-stepper-step-bubble-error-shadow-width: 3px; - --pgn-size-stepper-step-width-min: 0rem; - --pgn-size-stepper-header-height-min: 5.13rem; - --pgn-size-stack-gap: 0rem; - --pgn-size-spinner-sm-border-width: .2em; - --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width); - --pgn-size-spinner-sm-width: 1rem; - --pgn-size-spinner-base-border-width: .25em; - --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width); - --pgn-size-spinner-base-width: 2rem; - --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2); - --pgn-size-search-field-border-radius: 0rem; - --pgn-size-search-field-border-width-focus: .3125rem; - --pgn-size-search-field-border-width-base: .0625rem; - --pgn-size-progress-bar-threshold-circle: .5625rem; - --pgn-size-progress-bar-border-radius: 0rem; - --pgn-size-progress-bar-border-width: 1px; - --pgn-size-progress-bar-height-annotated: .3125rem; - --pgn-size-progress-bar-height-base: 1rem; - --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow); - --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow); - --pgn-size-product-tour-checkpoint-width-max: 480px; - --pgn-size-product-tour-checkpoint-width-arrow: 15px; - --pgn-size-product-tour-checkpoint-width-border: 8px; - --pgn-size-popover-arrow-height: .5rem; - --pgn-size-popover-arrow-width: 1rem; - --pgn-size-popover-icon-width: 1rem; - --pgn-size-popover-icon-height: 1rem; - --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm); - --pgn-size-popover-border-width: var(--pgn-size-border-width); - --pgn-size-popover-max-width: 480px; - --pgn-size-pagination-focus-outline: 0rem; - --pgn-size-pagination-toggle-border-sm: .25rem; - --pgn-size-pagination-toggle-border-base: .3125rem; - --pgn-size-pagination-reduced-dropdown-min-width: 6rem; - --pgn-size-pagination-reduced-dropdown-max-height: 60vh; - --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg); - --pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm); - --pgn-size-pagination-border-width: var(--pgn-size-border-width); - --pgn-size-pagination-secondary-height-sm: 2.25rem; - --pgn-size-pagination-secondary-height-base: 2.75rem; - --pgn-size-pagination-icon-height: 2.25rem; - --pgn-size-pagination-icon-width: 2.25rem; - --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base); - --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base)); - --pgn-size-navbar-nav-scroll-max-height: 75vh; - --pgn-size-nav-tabs-border-radius: 0rem; - --pgn-size-nav-tabs-border-width: 2px; - --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width); - --pgn-size-nav-tabs-link-border-bottom-width: .188rem; - --pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-border-width); - --pgn-size-nav-pills-link-border-width: 1px; - --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg); - --pgn-size-modal-content-border-width: 0px; - --pgn-size-modal-sm: 400px; - --pgn-size-modal-md: 500px; - --pgn-size-modal-lg: 800px; - --pgn-size-modal-xl: 1140px; - --pgn-size-menu-item-border-width: var(--pgn-size-btn-border-width); - --pgn-size-menu-item-width-xs: 13.438rem; - --pgn-size-menu-item-width-base: 19rem; - --pgn-size-menu-item-height: 3rem; - --pgn-size-menu-base-max-height: 16.813rem; - --pgn-size-menu-base-border-radius: .25em; - --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width); - --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em); - --pgn-size-icon-button-diameter-sm: 2.25rem; - --pgn-size-icon-button-diameter-md: 2.75rem; - --pgn-size-icon-lg: 1.75rem; - --pgn-size-icon-md: 1.5rem; - --pgn-size-icon-sm: 1.25rem; - --pgn-size-icon-xs: 1rem; - --pgn-size-icon-inline: .8em; - --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-form-border-radius-width: .125rem; - --pgn-size-form-border-radius-check-focus: .0625rem; - --pgn-size-form-autosuggest-border-width: .125rem; - --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width); - --pgn-size-form-autosuggest-spinner-width: 1.25rem; - --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width); - --pgn-size-form-autosuggest-icon-width: 2.4rem; - --pgn-size-form-grid-gutter-width: 0.625rem; - --pgn-size-form-control-border-radio-indicator-radius: 50%; - --pgn-size-form-control-border-checkbox-indicator-radius: 0rem; - --pgn-size-form-control-icon-width: 2rem; - --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base); - --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base); - --pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base); - --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border); - --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus); - --pgn-size-form-control-range-thumb-border-radius: 1rem; - --pgn-size-form-control-range-thumb-border-base: 0rem; - --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width); - --pgn-size-form-control-range-thumb-width: 1rem; - --pgn-size-form-control-range-track-border-radius: 1rem; - --pgn-size-form-control-range-track-height: .5rem; - --pgn-size-form-control-range-track-width: 100%; - --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border); - --pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half); - --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm); - --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg); - --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base); - --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2); - --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4); - --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75); - --pgn-size-form-control-indicator-border-width: 0.125rem; - --pgn-size-form-control-indicator-bg: 100%; - --pgn-size-form-control-indicator-base: 1.25rem; - --pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm); - --pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg); - --pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base); - --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width); - --pgn-size-form-input-width-focus: 0.063rem; - --pgn-size-form-input-width-hover: 0.063rem; - --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2); - --pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2)); - --pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base)); - --pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2); - --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border)); - --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border)); - --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border)); - --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width)); - --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-dropdown-border-width: var(--pgn-size-border-width); - --pgn-size-dropdown-min-width: 18rem; - --pgn-size-data-table-layout-sidebar-width: 12rem; - --pgn-size-data-table-dropdown-pagination-min-width: 6rem; - --pgn-size-data-table-dropdown-pagination-max-height: 60vh; - --pgn-size-data-table-border: 2px; - --pgn-size-container-max-width-xl: 1440px; - --pgn-size-container-max-width-lg: 1192px; - --pgn-size-container-max-width-md: 952px; - --pgn-size-container-max-width-sm: 708px; - --pgn-size-container-max-width-xs: 464px; - --pgn-size-color-picker-md: calc(1.3333em + 1.125rem + 2px); - --pgn-size-color-picker-sm: 2rem; - --pgn-size-code-pre-scrollable-max-height: 340px; - --pgn-size-chip-icon: 1.5rem; - --pgn-size-chip-border-radius: .375rem; - --pgn-size-carousel-caption-width: 70%; - --pgn-size-carousel-indicator-height-area-hit: 10px; - --pgn-size-carousel-indicator-height-base: 3px; - --pgn-size-carousel-indicator-width: 30px; - --pgn-size-carousel-control-width-icon: 20px; - --pgn-size-carousel-control-width-base: 15%; - --pgn-size-card-logo-height: 4.125rem; - --pgn-size-card-logo-width: 7.25rem; - --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base); - --pgn-size-card-image-vertical-max-height: 140px; - --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max); - --pgn-size-card-image-horizontal-width-max: 240px; - --pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base)); - --pgn-size-card-focus-border-width: 2px; - --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); - --pgn-size-card-border-radius-logo: .25rem; - --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-card-border-width: var(--pgn-size-border-width); - --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base); - --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base); - --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap)); - --pgn-size-btn-focus-width: 2px; - --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm); - --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg); - --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width); - --pgn-size-breadcrumb-border-width-focus: .0625rem; - --pgn-size-breadcrumb-border-axis-y-focus: .5rem; - --pgn-size-breadcrumb-border-axis-x-focus: .25rem; - --pgn-size-breadcrumb-border-radius-focus: .125rem; - --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width); - --pgn-size-badge-border-radius-pill: 10rem; - --pgn-size-badge-border-radius-base: .25rem; - --pgn-size-avatar-border-radius: 100%; - --pgn-size-avatar-border-base: 1px; - --pgn-size-avatar-huge: 18.75rem; - --pgn-size-avatar-xxl: 11.5rem; - --pgn-size-avatar-xl: 6rem; - --pgn-size-avatar-lg: 4rem; - --pgn-size-avatar-sm: 2.25rem; - --pgn-size-avatar-xs: 1.5rem; - --pgn-size-avatar-base: 3rem; - --pgn-size-annotation-border-radius: .25rem; - --pgn-size-annotation-max-width: 18.75rem; - --pgn-size-annotation-arrow-border-width: .5rem; - --pgn-size-alert-border-width: 0rem; - --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-rounded-pill: 50rem; - --pgn-size-border-radius-sm: .25rem; - --pgn-size-border-radius-lg: .425rem; - --pgn-size-border-radius-base: .375rem; - --pgn-size-border-width: 1px; } diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js index 1a25ff759a..e07cda80c9 100644 --- a/tokens/style-dictionary.js +++ b/tokens/style-dictionary.js @@ -5,7 +5,11 @@ const toml = require('js-toml'); const chroma = require('chroma-js'); const { colorYiq, darken, lighten } = require('./sass-helpers'); const cssUtilities = require('./css-utilities'); -const { composeBreakpointName, createCustomHeader } = require('./utils'); +const { composeBreakpointName } = require('./utils'); + +/* eslint-disable import/no-unresolved */ +const getStyleDictionaryUtils = async () => import('style-dictionary/utils'); +/* eslint-enable import/no-unresolved */ /** * Transforms a color token based on various modifications. @@ -80,33 +84,30 @@ const colorTransform = (token, theme) => { * 2. 'theme' to output only theme's variables (e.g, 'light' or 'dark'), if theme is not provided - only * core tokens are built. */ -const createCustomCSSVariables = async ({ - formatterArgs, - themeVariant, -}, StyleDictionary) => { - // eslint-disable-next-line import/no-unresolved - const { sortByReference, usesReferences, getReferences } = (await import('style-dictionary/utils')); +const createCustomCSSVariables = async ({ formatterArgs }) => { + const { fileHeader, formattedVariables } = await getStyleDictionaryUtils(); const { dictionary, options, file } = formatterArgs; - const outputTokens = themeVariant - ? dictionary.allTokens.filter(token => token.filePath.includes(themeVariant)) - : dictionary.allTokens; - - const variables = outputTokens.sort(sortByReference(dictionary)).map(token => { - let { $value } = token; - - const outputReferencesForToken = (token.original.outputReferences === false) ? false : options.outputReferences; - - if (usesReferences(token.original.$value) && outputReferencesForToken) { - const refs = getReferences(token.original.$value, dictionary.tokens); - refs.forEach(ref => { - $value = $value.replace(ref.$value, `var(--${ref.name})`); - }); - } - - return ` --${token.name}: ${$value};`; - }).join('\n'); - - return `${createCustomHeader(StyleDictionary, file).join('\n')}\n:root {\n${variables}\n}\n`; + const { outputReferences, formatting } = options; + const variables = formattedVariables({ + format: 'css', + dictionary, + outputReferences: (token) => { + // Formatter options configured to never output references + if (!outputReferences) { + return false; + } + // Token has modifications (e.g., mix, darken, lighten); the computed + // value should be output instead of the reference. + if (token.modify) { + return false; + } + // Formatter options configured to show output references, but handle when individual tokens might opt-out. + return token.outputReferences ?? true; + }, + usesDtcg: true, + }); + const header = await fileHeader({ file, formatting }); + return `${header}:root {\n${variables}\n}\n`; }; /** @@ -114,11 +115,10 @@ const createCustomCSSVariables = async ({ * * @returns {Promise} - A promise that resolves to the configured Style Dictionary instance. */ -const initializeStyleDictionary = async () => { +const initializeStyleDictionary = async ({ themes }) => { // eslint-disable-next-line import/no-unresolved const StyleDictionary = (await import('style-dictionary')).default; - // eslint-disable-next-line import/no-unresolved - const { getReferences } = (await import('style-dictionary/utils')); + const { getReferences } = await getStyleDictionaryUtils(); /** * Transformer that applies SASS color functions to tokens. @@ -151,7 +151,7 @@ const initializeStyleDictionary = async () => { */ StyleDictionary.registerFormat({ name: 'css/custom-variables', - format: formatterArgs => createCustomCSSVariables({ formatterArgs }, StyleDictionary), + format: formatterArgs => createCustomCSSVariables({ formatterArgs }), }); /** @@ -163,7 +163,9 @@ const initializeStyleDictionary = async () => { */ StyleDictionary.registerFormat({ name: 'css/utility-classes', - format: async ({ dictionary, file }) => { + format: async ({ dictionary, file, options = {} }) => { + const { formatting } = options; + const { fileHeader } = await getStyleDictionaryUtils(); const { utilities } = dictionary.tokens; if (!utilities) { return ''; @@ -189,8 +191,8 @@ const initializeStyleDictionary = async () => { } } }); - - return `${createCustomHeader(StyleDictionary, file).join('\n')}\n${utilityClasses}`; + const header = await fileHeader({ file, formatting }); + return `${header}${utilityClasses}`; }, }); @@ -201,7 +203,9 @@ const initializeStyleDictionary = async () => { */ StyleDictionary.registerFormat({ name: 'css/custom-media-breakpoints', - format: ({ dictionary, file }) => { + format: async ({ dictionary, file, options = {} }) => { + const { fileHeader } = await getStyleDictionaryUtils(); + const { formatting } = options; const { breakpoint } = dictionary.tokens.size; let customMediaVariables = ''; @@ -216,26 +220,8 @@ const initializeStyleDictionary = async () => { += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.$value});\n`; } } - - return `${createCustomHeader(StyleDictionary, file).join('\n')}\n${customMediaVariables}`; - }, - }); - - /** - * Custom file header for custom and built-in formatters. - */ - StyleDictionary.registerFileHeader({ - name: 'customFileHeader', - fileHeader: () => { - const currentDate = new Date().toUTCString(); - return [ - '/*', - ' * IMPORTANT: This file is the result of assembling design tokens.', - ' * Do not edit directly.', - ` * Generated on ${currentDate}`, - ' */', - '', - ]; + const header = await fileHeader({ file, formatting }); + return `${header}${customMediaVariables}`; }, }); @@ -245,7 +231,23 @@ const initializeStyleDictionary = async () => { */ StyleDictionary.registerFilter({ name: 'isSource', - filter: token => token.isSource === true, + filter: token => token.isSource, + }); + + themes.forEach((themeVariant) => { + const capitalizedThemeVariant = `${themeVariant.charAt(0).toUpperCase()}${themeVariant.slice(1)}`; + const themeVariantFilter = `isThemeVariant${capitalizedThemeVariant}`; + const themeVariantFilterSourceOnly = `${themeVariantFilter}SourceOnly`; + + StyleDictionary.registerFilter({ + name: themeVariantFilter, + filter: token => token.filePath.includes(themeVariant), + }); + + StyleDictionary.registerFilter({ + name: themeVariantFilterSourceOnly, + filter: token => token.isSource && token.filePath.includes(themeVariant), + }); }); /** diff --git a/tokens/utils.js b/tokens/utils.js index d3c230b87d..9fb48b6523 100644 --- a/tokens/utils.js +++ b/tokens/utils.js @@ -237,22 +237,10 @@ function composeBreakpointName(breakpointName, format) { return `@custom-media --${breakpointName.replace(/breakpoint/g, `breakpoint-${format}-width`)}`; } -/** - * Generates a custom file header using Style Dictionary hooks. - * - * @param {Object} StyleDictionary - The Style Dictionary instance being used. - * @param {Object} file - The file object containing metadata about the file being generated. - * @returns {string[]} - An array of strings representing the lines of the file header. - */ -function createCustomHeader(StyleDictionary, file) { - return StyleDictionary.hooks.fileHeaders.customFileHeader({ file }); -} - module.exports = { createIndexCssFile, getFilesWithExtension, getSCSStoCSSMap, transformInPath, composeBreakpointName, - createCustomHeader, };