From 24c4d7b3623b038f138ea7a767f5fdfff07f7dad 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 build-tokens, registers filters, and updates CSS vars format * Exposes --output-references CLI argument for build-tokens command. Defaults to true. Ensures brand package output with the CLI includes references in build output out-of-the-box. * Registers filter(s) isThemeVariant{"Light"}. * 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 +- src/Form/_FormText.scss | 2 +- src/PageBanner/index.scss | 4 +- src/ProgressBar/index.scss | 2 +- src/Stepper/index.scss | 2 +- src/Toast/index.scss | 2 +- styles/css/core/custom-media-breakpoints.css | 7 +- styles/css/core/variables.css | 204 ++-- styles/css/themes/light/utility-classes.css | 7 +- styles/css/themes/light/variables.css | 1032 ++++------------- styles/scss/core/_utilities.scss | 10 +- styles/scss/core/_variables.scss | 10 +- tokens/src/core/components/Alert.json | 2 +- tokens/src/core/components/Annotation.json | 2 +- tokens/src/core/components/Button/core.json | 2 +- tokens/src/core/components/Card.json | 2 +- tokens/src/core/components/Dropzone.json | 2 +- .../src/core/components/Form/typography.json | 10 +- tokens/src/core/components/Pagination.json | 2 +- tokens/src/core/components/Stepper.json | 2 +- .../src/core/components/general/headings.json | 2 +- tokens/src/core/components/general/input.json | 2 +- tokens/src/core/components/general/text.json | 2 +- tokens/src/core/global/display.json | 2 +- tokens/src/core/global/typography.json | 58 +- tokens/style-dictionary.js | 114 +- tokens/utils.js | 12 - www/src/components/MeasuredItem.tsx | 6 +- www/src/components/TableCells.tsx | 26 +- www/src/components/_doc-elements.scss | 16 +- www/src/components/typography-page/Body.tsx | 8 +- .../components/typography-page/Headings.tsx | 12 +- .../typography-page/measuredTypeProps.tsx | 9 +- www/src/pages/foundations/colors.tsx | 161 ++- www/src/scss/base.scss | 4 - www/src/scss/edxorg-theme.scss | 5 +- www/src/scss/openedx-theme.scss | 3 - 40 files changed, 654 insertions(+), 1157 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/src/Form/_FormText.scss b/src/Form/_FormText.scss index 3f19d55ab5..6e22e92a7d 100644 --- a/src/Form/_FormText.scss +++ b/src/Form/_FormText.scss @@ -1,5 +1,5 @@ .pgn__form-text { - font-size: var(--pgn-typography-font-size-small-base); + font-size: var(--pgn-typography-font-size-sm); display: flex; align-items: center; diff --git a/src/PageBanner/index.scss b/src/PageBanner/index.scss index 320b2be9f5..0b6cf3f05f 100644 --- a/src/PageBanner/index.scss +++ b/src/PageBanner/index.scss @@ -4,12 +4,12 @@ min-height: 36px; display: flex; flex-wrap: nowrap; - font-size: var(--pgn-typography-font-size-small-x); + font-size: var(--pgn-typography-font-size-xs); background-color: var(--pgn-page-baner-bg, inherit); color: var(--pgn-page-baner-color, inherit); @include media-breakpoint-up(md) { - font-size: var(--pgn-typography-font-size-small-base); + font-size: var(--pgn-typography-font-size-sm); } } diff --git a/src/ProgressBar/index.scss b/src/ProgressBar/index.scss index 3f4852536e..96271b1813 100644 --- a/src/ProgressBar/index.scss +++ b/src/ProgressBar/index.scss @@ -87,6 +87,6 @@ .pgn__progress-hint { box-sizing: border-box; padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap); - font-size: var(--pgn-typography-font-size-small-base); + font-size: var(--pgn-typography-font-size-sm); } } diff --git a/src/Stepper/index.scss b/src/Stepper/index.scss index e89bea41be..1995425c29 100644 --- a/src/Stepper/index.scss +++ b/src/Stepper/index.scss @@ -56,7 +56,7 @@ } .pgn__stepper-header-step-description { - font-size: var(--pgn-typography-font-size-small-x); + font-size: var(--pgn-typography-font-size-xs); } &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step { diff --git a/src/Toast/index.scss b/src/Toast/index.scss index 69b6a58a46..866e049709 100644 --- a/src/Toast/index.scss +++ b/src/Toast/index.scss @@ -31,7 +31,7 @@ padding: 0; p { - font-size: var(--pgn-typography-font-size-small-base); + font-size: var(--pgn-typography-font-size-sm); margin: 0; padding-right: .75rem; } diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css index 71df821c71..36dbc88a6b 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 Sun, 01 Sep 2024 16:28:16 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..1a8e6a7924 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 Sun, 01 Sep 2024 16:28:16 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,57 +44,54 @@ --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.5; /* Small line height. */ + --pgn-typography-line-height-lg: 1.5; /* Large line height. */ + --pgn-typography-line-height-base: 1.5556; /* Basic line height. */ + --pgn-typography-font-weight-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-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-micro: .6875rem; /* Micro utils text font size. */ + --pgn-typography-font-size-xs: 0.75rem; /* X-small font size. */ + --pgn-typography-font-size-sm: 0.875rem; /* Small font size. */ + --pgn-typography-font-size-lg: calc(var(--pgn-typography-font-size-base) * 1.25); /* Lead text font size. */ + --pgn-typography-font-size-base: 1.125rem; /* Base font size. */ + --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace; /* Monospace font family. */ + --pgn-typography-font-family-serif: serif; /* Serif font family. */ + --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, '"Helvetica Neue"', Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'; /* Sans-serif font family. */ + --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); /* Basic font family. */ --pgn-typography-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: 1; /* 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-blockquote-small-font-size: var(--pgn-typography-font-size-sm); --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold); --pgn-typography-link-decoration-brand-inline-hover: underline; --pgn-typography-link-decoration-brand-inline-base: underline; @@ -110,13 +106,13 @@ --pgn-typography-link-decoration-hover: underline; --pgn-typography-link-decoration-base: none; --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg); - --pgn-typography-input-btn-line-height-sm: 1.4286rem; - --pgn-typography-input-btn-line-height-base: 1.3333rem; + --pgn-typography-input-btn-line-height-sm: 1.4286; + --pgn-typography-input-btn-line-height-base: 1.3333; --pgn-typography-input-btn-font-size-lg: 1.325rem; --pgn-typography-input-btn-font-size-sm: .875rem; --pgn-typography-input-btn-font-size-base: 1.125rem; --pgn-typography-input-btn-font-family: inherit; - --pgn-typography-headings-line-height: 1.25rem; + --pgn-typography-headings-line-height: 1.25; --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold); --pgn-typography-headings-font-family: inherit; --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm); @@ -137,7 +133,7 @@ --pgn-typography-image-figure-caption-font-size: 90%; --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base); --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base); + --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-sm); --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight); --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family); --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base); @@ -155,7 +151,7 @@ --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base); --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family); - --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-small-x); + --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-xs); --pgn-typography-dropdown-item-text-decoration: none; --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base); --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold); @@ -163,7 +159,7 @@ --pgn-typography-code-font-size: 87.5%; --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold); --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5); - --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-small-x); + --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-xs); --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm); --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base); @@ -179,23 +175,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 +380,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 +591,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..9cf1f8c66d 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 Sun, 01 Sep 2024 16:28:17 GMT */ .bg-accent-a { diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 895537aa53..034b2659fe 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 Sun, 01 Sep 2024 16:28:17 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/styles/scss/core/_utilities.scss b/styles/scss/core/_utilities.scss index afdb2c671a..9fc1f30765 100644 --- a/styles/scss/core/_utilities.scss +++ b/styles/scss/core/_utilities.scss @@ -21,13 +21,17 @@ $color-levels: 100, 200, 300, 400, 500, 600, 700, 800, 900; .x-small { - font-size: $x-small-font-size; + font-size: $x-small-font-size !important; } .micro { - font-size: $micro-font-size; + font-size: $micro-font-size !important; font-weight: normal; - line-height: $micro-line-height; + line-height: $micro-line-height !important; +} + +.font-size-normal { + font-size: $font-size-base !important; } .mw-xs { diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss index 5e1f358f1a..522ae50904 100644 --- a/styles/scss/core/_variables.scss +++ b/styles/scss/core/_variables.scss @@ -738,14 +738,14 @@ $display4-weight: var(--pgn-typography-display-weight-4) !default; $display-line-height: var(--pgn-typography-display-line-height-base) !default; $display-mobile-line-height: var(--pgn-typography-display-line-height-mobile) !default; -$lead-font-size: var(--pgn-typography-font-size-lead) !default; +$lead-font-size: var(--pgn-typography-font-size-lg) !default; $lead-font-weight: var(--pgn-typography-font-weight-lead) !default; -$small-font-size: var(--pgn-typography-font-size-small-base) !default; -$x-small-font-size: var(--pgn-typography-font-size-small-x) !default; +$small-font-size: var(--pgn-typography-font-size-sm) !default; +$x-small-font-size: var(--pgn-typography-font-size-xs) !default; -$micro-font-size: var(--pgn-typography-font-size-micro); -$micro-line-height: var(--pgn-typography-line-height-micro); +$micro-font-size: var(--pgn-typography-font-size-micro) !default; +$micro-line-height: var(--pgn-typography-line-height-micro) !default; $text-muted: var(--pgn-color-text-muted) !default; diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json index 133b336cc8..aafa21a782 100644 --- a/tokens/src/core/components/Alert.json +++ b/tokens/src/core/components/Alert.json @@ -17,7 +17,7 @@ "weight-link": { "source": "$alert-link-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" }, "size": { "source": "$alert-font-size", "$value": ".875rem", "$type": "dimension" } }, - "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "dimension" } + "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "number" } } }, "size": { diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json index 4a20f37204..62539f1e2f 100644 --- a/tokens/src/core/components/Annotation.json +++ b/tokens/src/core/components/Annotation.json @@ -11,7 +11,7 @@ "typography": { "annotation": { "font-size": { "source": "$annotation-font-size", "$value": "{typography.font.size.sm}" }, - "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}" } + "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}", "type": "number" } } }, "size": { diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json index bcfcc5bc6c..93a9a7366f 100644 --- a/tokens/src/core/components/Button/core.json +++ b/tokens/src/core/components/Button/core.json @@ -43,7 +43,7 @@ "weight": { "source": "$btn-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" } }, "line-height": { - "$type": "dimension", + "$type": "number", "base": { "source": "$btn-line-height", "$value": "{typography.input.btn.line-height.base}" }, "sm": { "source": "$btn-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" }, "lg": { "source": "$btn-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" } diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json index 52e9a46ddc..e6260ebae8 100644 --- a/tokens/src/core/components/Card.json +++ b/tokens/src/core/components/Card.json @@ -76,7 +76,7 @@ "typography": { "footer": { "text": { - "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.small.x}" } + "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.xs}" } } } } diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json index f3927f9aeb..c3f78c9007 100644 --- a/tokens/src/core/components/Dropzone.json +++ b/tokens/src/core/components/Dropzone.json @@ -3,7 +3,7 @@ "typography": { "dropzone": { "restriction-msg": { - "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.small.x}" } + "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.xs}" } } } }, diff --git a/tokens/src/core/components/Form/typography.json b/tokens/src/core/components/Form/typography.json index da1a0e8e6a..dd4973969b 100644 --- a/tokens/src/core/components/Form/typography.json +++ b/tokens/src/core/components/Form/typography.json @@ -13,7 +13,7 @@ "weight": { "source": "$input-font-weight", "$value": "{typography.font.weight.base}", "$type": "fontWeight" } }, "line-height": { - "$type": "dimension", + "$type": "number", "base": { "source": "$input-line-height", "$value": "{typography.input.btn.line-height.base}" }, "sm": { "source": "$input-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" }, "lg": { "source": "$input-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" } @@ -31,10 +31,10 @@ }, "weight": { "source": "$custom-select-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" } }, - "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "dimension" } + "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" } }, "file": { - "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "dimension" }, + "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" }, "font": { "family": { "source": "$custom-file-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" }, "weight": { "source": "$custom-file-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" } @@ -44,13 +44,13 @@ "feedback": { "$type": "dimension", "font": { - "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.small.base}" } + "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.sm}" } }, "tooltip": { "font": { "size": { "source": "$form-feedback-tooltip-font-size", "$value": "{typography.font.size.sm}" } }, - "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}" } + "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}", "$type": "number" } } } } diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json index 2d28cec0c5..b300e4ac78 100644 --- a/tokens/src/core/components/Pagination.json +++ b/tokens/src/core/components/Pagination.json @@ -5,7 +5,7 @@ "font-size": { "sm": { "source": "$pagination-font-size-sm", "$value": ".875rem" } }, - "line-height": { "source": "$pagination-line-height", "$value": "1.5rem" } + "line-height": { "source": "$pagination-line-height", "$value": "1.5rem", "$type": "number" } } }, "spacing": { diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json index 2590069543..e3e33d5ddc 100644 --- a/tokens/src/core/components/Stepper.json +++ b/tokens/src/core/components/Stepper.json @@ -33,7 +33,7 @@ }, "typography": { "spacer": { - "line-height": { "source": "$stepper-header-line-height", "$value": "1px" } + "line-height": { "source": "$stepper-header-line-height", "$value": "1px", "$type": "number" } } } } diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json index 40312e767b..c631e3d2d6 100644 --- a/tokens/src/core/components/general/headings.json +++ b/tokens/src/core/components/general/headings.json @@ -5,7 +5,7 @@ "family": { "source": "$headings-font-family", "$value": "inherit", "$type": "fontFamily" }, "weight": { "source": "$headings-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" } }, - "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "dimension" } + "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "number" } } }, "spacing": { diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json index f0fabce75c..0bdc756950 100644 --- a/tokens/src/core/components/general/input.json +++ b/tokens/src/core/components/general/input.json @@ -12,7 +12,7 @@ } }, "line-height": { - "$type": "dimension", + "$type": "number", "base": { "source": "$input-btn-line-height", "$value": "1.3333" }, "sm": { "source": "$input-btn-line-height-sm", "$value": "1.4286" }, "lg": { "source": "$input-btn-line-height-lg", "$value": "{typography.line-height.lg}" } diff --git a/tokens/src/core/components/general/text.json b/tokens/src/core/components/general/text.json index 45ce22da9a..8608354cdc 100644 --- a/tokens/src/core/components/general/text.json +++ b/tokens/src/core/components/general/text.json @@ -9,7 +9,7 @@ "typography": { "blockquote": { "small": { - "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.small.base}" } + "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.sm}" } }, "font-size": { "source": "$blockquote-font-size", "$value": "calc({typography.font.size.base} * 1.25)" } } diff --git a/tokens/src/core/global/display.json b/tokens/src/core/global/display.json index 17eb942016..799e3df52e 100644 --- a/tokens/src/core/global/display.json +++ b/tokens/src/core/global/display.json @@ -26,7 +26,7 @@ "$description": "Font size for heading of level 4." }, "line-height": { - "$type": "dimension", + "$type": "number", "base": { "source": "$display-line-height", "$value": "1", diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json index 20646617ed..835274c9bd 100644 --- a/tokens/src/core/global/typography.json +++ b/tokens/src/core/global/typography.json @@ -27,77 +27,61 @@ } }, "size": { + "$type": "dimension", "base": { "source": "$font-size-base", "$value": "1.125rem", - "$type": "dimension", "$description": "Base font size." }, "lg": { - "source": "$font-size-lg", - "$value": "1.4063rem", - "$type": "dimension", - "$description": "Large font size." + "source": "$lead-font-size", + "$value": "calc({typography.font.size.base} * 1.25)", + "$description": "Lead text font size." }, "sm": { - "source": "$font-size-sm", - "$value": ".875rem", - "$type": "dimension", + "source": "$small-font-size", + "$value": "0.875rem", "$description": "Small font size." }, "xs": { - "source": "$font-size-xs", - "$value": ".75rem", + "source": "$x-small-font-size", + "$value": "0.75rem", + "$description": "X-small font size." + }, + "micro": { + "source": "$micro-font-size", + "$value": ".6875rem", "$type": "dimension", - "$description": "Extra-small font size." - }, - "small": { - "$type": "percentage", - "base": { - "source": "$small-font-size", - "$value": "87.5%", - "$description": "Small font size." - }, - "x": { - "source": "$x-small-font-size", - "$value": "75%", - "$description": "X-small font size." - } + "$description": "Micro utils text font size." }, "h1": { "source": "$h1-font-size", "$value": "2.5rem", - "$type": "dimension", "$description": "Font size of heading level 1." }, "h2": { "source": "$h2-font-size", "$value": "2rem", - "$type": "dimension", "$description": "Font size of heading level 2." }, "h3": { "source": "$h3-font-size", "$value": "1.375rem", - "$type": "dimension", "$description": "Font size of heading level 3." }, "h4": { "source": "$h4-font-size", "$value": "1.125rem", - "$type": "dimension", "$description": "Font size of heading level 4." }, "h5": { "source": "$h5-font-size", "$value": ".875rem", - "$type": "dimension", "$description": "Font size of heading level 5." }, "h6": { "source": "$h6-font-size", "$value": ".75rem", - "$type": "dimension", "$description": "Font size of heading level 6." }, "mobile": { @@ -132,18 +116,6 @@ "$value": "{typography.font.size.h6}", "$description": "Mobile font size of heading level 6." } - }, - "lead": { - "source": "$lead-font-size", - "$value": "calc({typography.font.size.base} * 1.25)", - "$type": "dimension", - "$description": "Lead text font size." - }, - "micro": { - "source": "$micro-font-size", - "$value": ".688rem", - "$type": "dimension", - "$description": "Micro utils text font size." } }, "weight": { @@ -198,7 +170,7 @@ } }, "line-height": { - "$type": "dimension", + "$type": "number", "base": { "source": "$line-height-base", "$value": "1.5556", 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, }; diff --git a/www/src/components/MeasuredItem.tsx b/www/src/components/MeasuredItem.tsx index 646cafcc54..77e7ab3078 100644 --- a/www/src/components/MeasuredItem.tsx +++ b/www/src/components/MeasuredItem.tsx @@ -41,8 +41,6 @@ function MeasuredItem({ }, {}); setMeasurements(measurementsItems); }; - // Needs a moment to finish switching theme and re-render children to DOM first. - setMeasurements(initialMeasurements); const timeout = setTimeout(measure, 1000); return () => clearTimeout(timeout); }, @@ -51,9 +49,9 @@ function MeasuredItem({ return ( <> - {renderBefore ? renderBefore(measurements) : null} + {renderBefore?.(measurements)} {React.cloneElement(children as React.ReactElement, { ref: itemRef })} - {renderAfter ? renderAfter(measurements) : null} + {renderAfter?.(measurements)} ); } diff --git a/www/src/components/TableCells.tsx b/www/src/components/TableCells.tsx index 2dd00c84a2..339aefb06b 100644 --- a/www/src/components/TableCells.tsx +++ b/www/src/components/TableCells.tsx @@ -6,6 +6,18 @@ export type CodeCellType = { value: string | number | undefined, }; +export type ClassNameRowType = { + className: string | undefined, + text: string, + hasClass?: boolean, +}; + +export type ClassNameCellType = { + row: { + original: ClassNameRowType, + }, +} & CodeCellType; + export type DataTableRowType = { row: { original: { @@ -17,13 +29,17 @@ export type DataTableRowType = { }, }; -export function ClassNameCell({ value }: CodeCellType) { +export function ClassNameCell({ row, value }: ClassNameCellType) { + if (row.original.hasClass === false) { + return null; + } + if (!value) { return null; } return ( - + .{value} ); @@ -31,7 +47,7 @@ export function ClassNameCell({ value }: CodeCellType) { export function TextCell({ value }: CodeCellType) { return ( -

+

{value}

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

+

{row.original.text}

); diff --git a/www/src/components/_doc-elements.scss b/www/src/components/_doc-elements.scss index 94d3e937cd..0e12160312 100644 --- a/www/src/components/_doc-elements.scss +++ b/www/src/components/_doc-elements.scss @@ -327,6 +327,18 @@ .color-palette { display: grid; - grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); - grid-row-gap: 2rem; + grid-gap: 5rem; + grid-template-columns: repeat(2, 1fr); // Default to 2 columns +} + +@media (--pgn-size-breakpoint-min-width-md) { + .color-palette { + grid-template-columns: repeat(3, 1fr); // 3 columns for medium+ screens + } +} + +@media (--pgn-size-breakpoint-min-width-lg) { + .color-palette { + grid-template-columns: repeat(4, 1fr); // 4 columns for large+ screens + } } diff --git a/www/src/components/typography-page/Body.tsx b/www/src/components/typography-page/Body.tsx index 2b2c62be8f..a0c34fc52a 100644 --- a/www/src/components/typography-page/Body.tsx +++ b/www/src/components/typography-page/Body.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { DataTable } from '~paragon-react'; -import { DesktopMeasuredCell, ClassNameCell } from '../TableCells'; +import { DesktopMeasuredCell, ClassNameCell, ClassNameRowType } from '../TableCells'; -const bodyClassesAndDescriptions = [ +const bodyClassesAndDescriptions: ClassNameRowType[] = [ { className: 'lead', text: 'Large Body' }, - { className: '', text: 'Body' }, + { className: 'font-size-normal', text: 'Body', hasClass: false }, { className: 'small', text: 'Small Body' }, { className: 'x-small', text: 'Extra Small Body' }, { className: 'micro', text: 'Micro Body' }, @@ -17,7 +17,7 @@ export default function Body() {

Body

({ text: `Heading ${size}`, className: `h${size}` })); + const tableData = [ + ...headingSizesTableData, + { + text: 'Heading Label', + className: 'heading-label', + }, + ]; return ( <>

Headings

({ text: `Heading ${size}`, className: `h${size}` }))} + itemCount={tableData.length} + data={tableData} columns={[ { Header: 'Desktop', diff --git a/www/src/components/typography-page/measuredTypeProps.tsx b/www/src/components/typography-page/measuredTypeProps.tsx index 82e5075cd7..38a9c9caec 100644 --- a/www/src/components/typography-page/measuredTypeProps.tsx +++ b/www/src/components/typography-page/measuredTypeProps.tsx @@ -13,9 +13,12 @@ const weightLabels: Record = { const measuredTypeProps = { properties: ['font-size', 'line-height', 'font-family', 'font-weight'], renderAfter: (measurements: { [x: string]: string; }) => { - const fontFamily = measurements['font-family'] - ? measurements['font-family'].split(',')[0] - : null; + if (!measurements || Object.keys(measurements).length === 0) { + return ( +

 

+ ); + } + const fontFamily = measurements['font-family']?.split(',')[0]; const weight = weightLabels[measurements['font-weight']]; // only one significant digit if needed const fontSize = Math.round(Number.parseFloat(measurements['font-size']) * 10) / 10; diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx index 52b423e899..5084d56f67 100644 --- a/www/src/pages/foundations/colors.tsx +++ b/www/src/pages/foundations/colors.tsx @@ -9,27 +9,52 @@ import { SettingsContext } from '../../context/SettingsContext'; import { CodeCell } from '../../components/TableCells'; const utilityClasses = { - bg: (color: string, level: number) => (level ? `bg-${color}-${level}` : `bg-${color}`), + bg: (color: string, level?: number) => (level ? `bg-${color}-${level}` : `bg-${color}`), border: (color: string, level: number) => (level ? `border-${color}-${level}` : `border-${color}`), text: (color: string, level: number) => (level ? `text-${color}-${level}` : `text-${color}`), }; -export interface IColors { +type UnusedLevels = number[]; + +interface ColorVariant { + name: string, + unusedLevels?: UnusedLevels, + hasLevels?: boolean, +} + +export interface IColorsBase { themeName: string, - color: string, - unusedLevels: number[], } +export interface IColorsWithUnusedLevels extends IColorsBase { + unusedLevels?: UnusedLevels, + variants?: never, +} + +export interface IColorsWithVariants extends IColorsBase { + variants: ColorVariant[], + unusedLevels?: never, +} + +export type IColors = IColorsWithUnusedLevels | IColorsWithVariants; + const colors: IColors[] = [ - { themeName: 'gray', color: 'gray', unusedLevels: [] }, - { themeName: 'primary', color: 'blue', unusedLevels: [] }, - { themeName: 'brand', color: 'blue', unusedLevels: [] }, - { themeName: 'light', color: 'light', unusedLevels: [] }, - { themeName: 'dark', color: 'dark', unusedLevels: [] }, - { themeName: 'success', color: 'green', unusedLevels: [] }, - { themeName: 'info', color: 'teal', unusedLevels: [] }, - { themeName: 'danger', color: 'red', unusedLevels: [] }, - { themeName: 'warning', color: 'yellow', unusedLevels: [] }, + { themeName: 'gray' }, + { themeName: 'primary' }, + { themeName: 'brand' }, + { themeName: 'light' }, + { themeName: 'dark' }, + { themeName: 'success' }, + { themeName: 'info' }, + { themeName: 'danger' }, + { themeName: 'warning' }, + { + themeName: 'accent', + variants: [ + { name: 'a', hasLevels: false }, + { name: 'b', hasLevels: false }, + ], + }, ]; const levels = [100, 200, 300, 400, 500, 600, 700, 800, 900]; @@ -61,21 +86,20 @@ export interface ISwatch { function Swatch({ name, colorClassName, isUnused, styles, }: ISwatch) { - const computedValue = styles?.getPropertyValue(name); + const computedValue = styles?.getPropertyValue(`--pgn-color-${name}`); + + if (isUnused) { + return null; + } return (
-
+
- - {`var(${name})`} + + {name} - - + {computedValue}
@@ -93,20 +117,70 @@ Swatch.defaultProps = { isUnused: false, }; -const renderColorRamp = (themeName: string, unusedLevels: number[], styles: CSSStyleDeclarationType) => ( -
+export interface IRenderColorRampBase { + themeName: string; + styles: CSSStyleDeclarationType; +} + +export interface IRenderColorRampWithUnusedLevels extends IRenderColorRampBase { + unusedLevels?: UnusedLevels; + variants?: never; +} + +export interface IRenderColorRampWithVariants extends IRenderColorRampBase { + variants: ColorVariant[]; + unusedLevels?: never; +} + +export type IRenderColorRamp = IRenderColorRampWithUnusedLevels | IRenderColorRampWithVariants; + +const renderColorRamp = ({ + themeName, + unusedLevels = [], + variants = [], + styles, +}: IRenderColorRamp) => ( +

{themeName}

- {levels.map(level => ( - - ))} + {variants.length > 0 + ? variants.map(({ + name, + unusedLevels: variantUnusedLevels = [], + hasLevels = true, + }) => { + if (hasLevels) { + return ( +
+ {levels.map(level => ( + + ))} +
+ ); + } + return ( + + ); + }) + : levels.map(level => ( + + ))}
); @@ -144,18 +218,7 @@ export default function ColorsPage({ data, pageContext }: IColorsPage) {

Colors

- {colors - .slice(0, 3) - .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels, styles))} - {colors - .slice(3) - .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels, styles))} -
-

accents

- - - -
+ {colors.map((colorArgs) => renderColorRamp({ ...colorArgs, styles }))}

CSS Color Usage

@@ -283,7 +346,7 @@ export default function ColorsPage({ data, pageContext }: IColorsPage) {
{[500, 700, 900].map(level => (
- {colors.map(({ themeName, unusedLevels }) => { + {colors.map(({ themeName, unusedLevels = [] }) => { if (unusedLevels.includes(level)) { return null; } return (