From 95b9de05d936a4611fb8e80c2b37eff96acb08c7 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"}`, handling future theme variants when implemented (e.g., `isThemeVariantDark`). * Migrates `createCustomCSSVariables` to use `formattedVariables` to rely on out-of-the-box CSS variable formatting. The formatter still supports token-specific overrides of `outputReferences`. If a token has modifications via `modify`, the modified base reference is not included in the output. * Relies on `style-dictionary`'s default `fileHeader`, with opt-in timestamp. * Fixes bug with line-height tokens, switching their `$type` from `dimension` to `number` to resolve typography style regressions. * Updates typography tokens related to font size for more consistent naming structure. * Ensures the "Typography" foundations page properly previews the correct font size for regular "Body" text and includes the missing "HEADING LABEL" example. * Updates to "Colors" page in docs site * Displays token name instead of CSS variable in the color swatch previews (see screenshot below). * Include `accent-a` and `accent-b` alongside other color names, rather than manually rendering `Swatch` for the accents. * Modifies the grid styles for color swatch preview to be more responsive. * Resolves `NaNpx` bug in `MeasuredItem` component on docs site, while computing the measurements to display for an element (e.g., font size). Instead, it renders an empty block while measurements are resolved. * Updates `CodeBlock` styles on docs site to add its border and background color only to the `LivePreview`, not the entire `CodeBlock` example. * Reduces whitespace on docs site homepage. * Simplifies columns on docs site header, ensuring `SiteTitle` is horizontally aligned in the center. --- Makefile | 1 + bin/paragon-scripts.js | 10 + lib/build-tokens.js | 85 +- package-lock.json | 8 +- package.json | 5 +- src/Form/_FormText.scss | 2 +- src/PageBanner/index.scss | 4 +- src/ProgressBar/index.scss | 2 +- src/Stepper/index.scss | 2 +- src/Toast/index.scss | 2 +- styles/css/core/custom-media-breakpoints.css | 9 +- styles/css/core/variables.css | 239 ++-- styles/css/themes/light/utility-classes.css | 7 +- styles/css/themes/light/variables.css | 1032 ++++------------- styles/scss/core/_typography.scss | 20 +- styles/scss/core/_utilities.scss | 10 +- styles/scss/core/_variables.scss | 63 +- tokens/src/core/components/Alert.json | 2 +- tokens/src/core/components/Annotation.json | 2 +- tokens/src/core/components/Button/core.json | 2 +- tokens/src/core/components/Card.json | 2 +- tokens/src/core/components/Dropzone.json | 2 +- .../src/core/components/Form/typography.json | 10 +- tokens/src/core/components/Pagination.json | 2 +- tokens/src/core/components/Stepper.json | 2 +- .../src/core/components/general/headings.json | 2 +- tokens/src/core/components/general/input.json | 2 +- tokens/src/core/components/general/text.json | 2 +- tokens/src/core/global/display.json | 77 -- tokens/src/core/global/typography.json | 227 ++-- tokens/style-dictionary.js | 212 ++-- tokens/utils.js | 20 +- www/src/components/ComponentsList.tsx | 4 +- www/src/components/MeasuredItem.tsx | 6 +- www/src/components/TableCells.tsx | 26 +- www/src/components/_CodeBlock.scss | 7 +- www/src/components/_doc-elements.scss | 16 +- www/src/components/header/Navbar.tsx | 6 +- www/src/components/header/SiteTitle.tsx | 2 +- www/src/components/typography-page/Body.tsx | 8 +- .../components/typography-page/Display.tsx | 2 +- .../components/typography-page/Headings.tsx | 12 +- .../typography-page/measuredTypeProps.tsx | 9 +- www/src/pages/foundations/colors.tsx | 161 ++- www/src/scss/base.scss | 4 - www/src/scss/edxorg-theme.scss | 5 +- www/src/scss/openedx-theme.scss | 3 - 47 files changed, 970 insertions(+), 1368 deletions(-) delete mode 100644 tokens/src/core/global/display.json diff --git a/Makefile b/Makefile index d6dc6ff320..8fb1778064 100644 --- a/Makefile +++ b/Makefile @@ -1,3 +1,4 @@ +.PHONY: build build: rm -rf ./dist tsc --project tsconfig.build.json diff --git a/bin/paragon-scripts.js b/bin/paragon-scripts.js index a029b19564..3d811b39f7 100755 --- a/bin/paragon-scripts.js +++ b/bin/paragon-scripts.js @@ -85,11 +85,21 @@ const COMMANDS = { description: 'Include only source design tokens in the build.', defaultValue: false, }, + { + name: '--output-references', + description: 'Include references in the build output.', + defaultValue: true, + }, { name: '-t, --themes', description: 'Specify themes to include in the token build.', defaultValue: 'light', }, + { + name: '-v, --verbose', + description: 'Enable verbose logging.', + defaultValue: false, + }, ], }, 'replace-variables': { diff --git a/lib/build-tokens.js b/lib/build-tokens.js index 19f9199d09..a4dd71fdb4 100755 --- a/lib/build-tokens.js +++ b/lib/build-tokens.js @@ -1,6 +1,10 @@ const path = require('path'); const minimist = require('minimist'); -const { initializeStyleDictionary, createCustomCSSVariables, colorTransform } = require('../tokens/style-dictionary'); +const { + initializeStyleDictionary, + createCustomCSSVariables, + colorTransform, +} = require('../tokens/style-dictionary'); const { createIndexCssFile } = require('../tokens/utils'); /** @@ -13,24 +17,37 @@ const { createIndexCssFile } = require('../tokens/utils'); * @param {string|string[]} [commandArgs.themes=['light']] - The themes (variants) for which to build tokens. */ async function buildTokensCommand(commandArgs) { - const StyleDictionary = await initializeStyleDictionary(); - const defaultParams = { themes: ['light'], 'build-dir': './build/', + 'source-tokens-only': false, + 'output-references': true, + verbose: false, }; const alias = { 'build-dir': 'b', themes: 't', + verbose: '-v', }; const { 'build-dir': buildDir, source: tokensSource, 'source-tokens-only': hasSourceTokensOnly, + 'output-references': outputReferences, themes, - } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' }); + verbose, + } = minimist( + commandArgs, + { + alias, + default: defaultParams, + boolean: ['source-tokens-only', 'output-references', 'verbose'], + }, + ); + + const StyleDictionary = await initializeStyleDictionary({ themes }); const coreConfig = { include: [ @@ -43,7 +60,6 @@ async function buildTokensCommand(commandArgs) { platforms: { css: { prefix: 'pgn', - transformGroup: 'css', // NOTE: buildPath must end with a slash buildPath: buildDir.slice(-1) === '/' ? buildDir : `${buildDir}/`, files: [ @@ -52,7 +68,10 @@ async function buildTokensCommand(commandArgs) { destination: 'core/variables.css', filter: hasSourceTokensOnly ? 'isSource' : undefined, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, + formatting: { + fileHeaderTimestamp: true, + }, }, }, { @@ -60,16 +79,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 +126,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 +141,10 @@ async function buildTokensCommand(commandArgs) { destination: `themes/${themeVariant}/utility-classes.css`, filter: hasSourceTokensOnly ? 'isSource' : undefined, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, + formatting: { + fileHeaderTimestamp: true, + }, }, }, ], @@ -122,14 +152,29 @@ async function buildTokensCommand(commandArgs) { }, }); - new StyleDictionary(coreConfig).buildAllPlatforms(); - createIndexCssFile({ buildDir, isTheme: false }); + // Create list of style-dictionary configurations to build (core + theme variants) + const configs = [ + { config: coreConfig }, + ...themes.map((themeVariant) => { + const config = getStyleDictionaryConfig(themeVariant); + return { + config, + themeVariant, + }; + }), + ]; - themes.forEach(async (themeVariant) => { - const config = getStyleDictionaryConfig(themeVariant); - new StyleDictionary(config).buildAllPlatforms(); - createIndexCssFile({ buildDir, isTheme: true, themeVariant }); - }); + // Build tokens for each configuration + await Promise.all(configs.map(async ({ config, isThemeVariant, themeVariant }) => { + const sd = new StyleDictionary(config); + await sd.cleanAllPlatforms(); + await sd.buildAllPlatforms(); + createIndexCssFile({ + buildDir, + isThemeVariant: !!isThemeVariant, + themeVariant, + }); + })); } module.exports = buildTokensCommand; diff --git a/package-lock.json b/package-lock.json index 919cb6752f..574036908f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -73,7 +73,7 @@ "@babel/preset-typescript": "^7.16.7", "@edx/eslint-config": "^3.2.0", "@edx/stylelint-config-edx": "^2.3.0", - "@edx/typescript-config": "^1.0.1", + "@edx/typescript-config": "^1.1.0", "@formatjs/cli": "^5.0.2", "@semantic-release/changelog": "^6.0.1", "@semantic-release/git": "^10.0.1", @@ -4478,9 +4478,9 @@ } }, "node_modules/@edx/typescript-config": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@edx/typescript-config/-/typescript-config-1.0.1.tgz", - "integrity": "sha512-w0g3nIX9oEch8Rip8q8sb/nrurGEHA1BEjK/I1LAQwA44K4FPMWvyvabmZErrdTJ9sXcZL10aWD3bat1obV8Bg==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@edx/typescript-config/-/typescript-config-1.1.0.tgz", + "integrity": "sha512-HF+7dsSgA2YQ6f/qV4HnrEYBoIhIdxVQZgDyYk/YGvaVGqT6IFuaHnYUP7ImpCUMOUmx/Jl7EyuVeaMe2LrMcA==", "dev": true, "peerDependencies": { "typescript": "^4.9.4" diff --git a/package.json b/package.json index 6a52a674bf..96e162c515 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,8 @@ "prepare": "husky || true", "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css", "replace-variables-usage-with-css": "./bin/paragon-scripts.js replace-variables -p src -t usage", - "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition" + "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition", + "cli:help": "./bin/paragon-scripts.js help" }, "dependencies": { "@popperjs/core": "^2.11.4", @@ -114,7 +115,7 @@ "@babel/preset-typescript": "^7.16.7", "@edx/eslint-config": "^3.2.0", "@edx/stylelint-config-edx": "^2.3.0", - "@edx/typescript-config": "^1.0.1", + "@edx/typescript-config": "^1.1.0", "@formatjs/cli": "^5.0.2", "@semantic-release/changelog": "^6.0.1", "@semantic-release/git": "^10.0.1", diff --git a/src/Form/_FormText.scss b/src/Form/_FormText.scss index 3f19d55ab5..6e22e92a7d 100644 --- a/src/Form/_FormText.scss +++ b/src/Form/_FormText.scss @@ -1,5 +1,5 @@ .pgn__form-text { - font-size: var(--pgn-typography-font-size-small-base); + font-size: var(--pgn-typography-font-size-sm); display: flex; align-items: center; diff --git a/src/PageBanner/index.scss b/src/PageBanner/index.scss index 320b2be9f5..0b6cf3f05f 100644 --- a/src/PageBanner/index.scss +++ b/src/PageBanner/index.scss @@ -4,12 +4,12 @@ min-height: 36px; display: flex; flex-wrap: nowrap; - font-size: var(--pgn-typography-font-size-small-x); + font-size: var(--pgn-typography-font-size-xs); background-color: var(--pgn-page-baner-bg, inherit); color: var(--pgn-page-baner-color, inherit); @include media-breakpoint-up(md) { - font-size: var(--pgn-typography-font-size-small-base); + font-size: var(--pgn-typography-font-size-sm); } } diff --git a/src/ProgressBar/index.scss b/src/ProgressBar/index.scss index 3f4852536e..96271b1813 100644 --- a/src/ProgressBar/index.scss +++ b/src/ProgressBar/index.scss @@ -87,6 +87,6 @@ .pgn__progress-hint { box-sizing: border-box; padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap); - font-size: var(--pgn-typography-font-size-small-base); + font-size: var(--pgn-typography-font-size-sm); } } diff --git a/src/Stepper/index.scss b/src/Stepper/index.scss index e89bea41be..1995425c29 100644 --- a/src/Stepper/index.scss +++ b/src/Stepper/index.scss @@ -56,7 +56,7 @@ } .pgn__stepper-header-step-description { - font-size: var(--pgn-typography-font-size-small-x); + font-size: var(--pgn-typography-font-size-xs); } &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step { diff --git a/src/Toast/index.scss b/src/Toast/index.scss index 69b6a58a46..866e049709 100644 --- a/src/Toast/index.scss +++ b/src/Toast/index.scss @@ -31,7 +31,7 @@ padding: 0; p { - font-size: var(--pgn-typography-font-size-small-base); + font-size: var(--pgn-typography-font-size-sm); margin: 0; padding-right: .75rem; } diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css index 71df821c71..3935bb85ec 100644 --- a/styles/css/core/custom-media-breakpoints.css +++ b/styles/css/core/custom-media-breakpoints.css @@ -1,10 +1,9 @@ -/* - * IMPORTANT: This file is the result of assembling design tokens. - * Do not edit directly. - * Generated on Tue, 27 Aug 2024 17:14:44 GMT +/** + * Do not edit directly, this file was auto-generated. + * Generated on Mon, 02 Sep 2024 19:21:13 GMT */ -@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0rem); +@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0); @custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px); @custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px); @custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px); diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index 056692268f..fc64608b5f 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 Mon, 02 Sep 2024 19:21:13 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,57 @@ --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; --pgn-transition-btn: none; --pgn-transition-badge: none; - --pgn-typography-line-height-micro: .938rem; - --pgn-typography-line-height-sm: 1.5rem; - --pgn-typography-line-height-lg: 1.5rem; - --pgn-typography-line-height-base: 1.5556rem; - --pgn-typography-font-weight-table-th: normal; - --pgn-typography-font-weight-lead: inherit; - --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); - --pgn-typography-font-weight-bolder: bolder; - --pgn-typography-font-weight-bold: 700; - --pgn-typography-font-weight-semi-bold: 500; - --pgn-typography-font-weight-normal: 400; - --pgn-typography-font-weight-light: 300; - --pgn-typography-font-weight-lighter: lighter; - --pgn-typography-font-size-micro: .688rem; - --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25); - --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6); - --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5); - --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4); - --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3); - --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2); - --pgn-typography-font-size-mobile-h1: 2.25rem; - --pgn-typography-font-size-h6: .75rem; - --pgn-typography-font-size-h5: .875rem; - --pgn-typography-font-size-h4: 1.125rem; - --pgn-typography-font-size-h3: 1.375rem; - --pgn-typography-font-size-h2: 2rem; - --pgn-typography-font-size-h1: 2.5rem; - --pgn-typography-font-size-small-x: 75%; - --pgn-typography-font-size-small-base: 87.5%; - --pgn-typography-font-size-xs: .75rem; - --pgn-typography-font-size-sm: .875rem; - --pgn-typography-font-size-lg: 1.4063rem; - --pgn-typography-font-size-base: 1.125rem; - --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace; - --pgn-typography-font-family-serif: serif; - --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, '"Helvetica Neue"', Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'; - --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); --pgn-typography-print-page-size: a3; - --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-mobile: 3.25rem; - --pgn-typography-display-line-height-mobile: 3.5rem; - --pgn-typography-display-line-height-base: 1rem; - --pgn-typography-display-4: 7.5rem; - --pgn-typography-display-3: 5.625rem; - --pgn-typography-display-2: 4.875rem; - --pgn-typography-display-1: 3.75rem; + --pgn-typography-line-height-display-mobile: 3.5rem; /* Mobile display line height. */ + --pgn-typography-line-height-display-base: 1; /* Standard display line height. */ + --pgn-typography-line-height-micro: .938rem; /* Micro utils line height. */ + --pgn-typography-line-height-sm: 1.5; /* Small line height. */ + --pgn-typography-line-height-lg: 1.5; /* Large line height. */ + --pgn-typography-line-height-base: 1.5556; /* Basic line height. */ + --pgn-typography-font-weight-display-4: var(--pgn-typography-font-weight-bold); /* Font weight of display level 4. */ + --pgn-typography-font-weight-display-3: var(--pgn-typography-font-weight-bold); /* Font weight of display level 3. */ + --pgn-typography-font-weight-display-2: var(--pgn-typography-font-weight-bold); /* Font weight of display level 2. */ + --pgn-typography-font-weight-display-1: var(--pgn-typography-font-weight-bold); /* Font weight of display level 1. */ + --pgn-typography-font-weight-table-th: normal; /* Table th font weight. */ + --pgn-typography-font-weight-lead: inherit; /* Lead text font weight. */ + --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); /* Basic font weight. */ + --pgn-typography-font-weight-bolder: bolder; /* Bolder font weight. */ + --pgn-typography-font-weight-bold: 700; /* Bold font weight. */ + --pgn-typography-font-weight-semi-bold: 500; /* Semi-bold font weight. */ + --pgn-typography-font-weight-normal: 400; /* Normal font weight. */ + --pgn-typography-font-weight-light: 300; /* Light font weight. */ + --pgn-typography-font-weight-lighter: lighter; /* Lighter font weight. */ + --pgn-typography-font-size-display-mobile-4: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 4. */ + --pgn-typography-font-size-display-mobile-3: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 3. */ + --pgn-typography-font-size-display-mobile-2: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 2. */ + --pgn-typography-font-size-display-mobile-1: 3.25rem; /* Mobile font size for heading of level 1. */ + --pgn-typography-font-size-display-4: 7.5rem; /* Font size for heading of level 4. */ + --pgn-typography-font-size-display-3: 5.625rem; /* Font size for heading of level 3. */ + --pgn-typography-font-size-display-2: 4.875rem; /* Font size for heading of level 2. */ + --pgn-typography-font-size-display-1: 3.75rem; /* Font size for heading of level 1. */ + --pgn-typography-font-size-h6-mobile: var(--pgn-typography-font-size-h6-base); /* Mobile font size of heading level 6. */ + --pgn-typography-font-size-h6-base: .75rem; /* Font size of heading level 6. */ + --pgn-typography-font-size-h5-mobile: var(--pgn-typography-font-size-h5-base); /* Mobile font size of heading level 5. */ + --pgn-typography-font-size-h5-base: .875rem; /* Font size of heading level 5. */ + --pgn-typography-font-size-h4-mobile: var(--pgn-typography-font-size-h4-base); /* Mobile font size of heading level 4. */ + --pgn-typography-font-size-h4-base: 1.125rem; /* Font size of heading level 4. */ + --pgn-typography-font-size-h3-mobile: var(--pgn-typography-font-size-h3-base); /* Mobile font size of heading level 3. */ + --pgn-typography-font-size-h3-base: 1.375rem; /* Font size of heading level 3. */ + --pgn-typography-font-size-h2-mobile: var(--pgn-typography-font-size-h2-base); /* Mobile font size of heading level 2. */ + --pgn-typography-font-size-h2-base: 2rem; /* Font size of heading level 2. */ + --pgn-typography-font-size-h1-mobile: 2.25rem; /* Mobile font size of heading level 1. */ + --pgn-typography-font-size-h1-base: 2.5rem; /* Base font size of heading level 1. */ + --pgn-typography-font-size-micro: .6875rem; /* Micro utils text font size. */ + --pgn-typography-font-size-xs: 0.75rem; /* X-small font size. */ + --pgn-typography-font-size-sm: 0.875rem; /* Small font size. */ + --pgn-typography-font-size-lg: var(--pgn-typography-font-size-base) * 1.25; /* Lead text font size. */ + --pgn-typography-font-size-base: 1.125rem; /* Base font size. */ + --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace; /* Monospace font family. */ + --pgn-typography-font-family-serif: serif; /* Serif font family. */ + --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, '"Helvetica Neue"', Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'; /* Sans-serif font family. */ + --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); /* Basic font family. */ --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25); - --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base); + --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-sm); --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold); --pgn-typography-link-decoration-brand-inline-hover: underline; --pgn-typography-link-decoration-brand-inline-base: underline; @@ -110,13 +109,13 @@ --pgn-typography-link-decoration-hover: underline; --pgn-typography-link-decoration-base: none; --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg); - --pgn-typography-input-btn-line-height-sm: 1.4286rem; - --pgn-typography-input-btn-line-height-base: 1.3333rem; + --pgn-typography-input-btn-line-height-sm: 1.4286; + --pgn-typography-input-btn-line-height-base: 1.3333; --pgn-typography-input-btn-font-size-lg: 1.325rem; --pgn-typography-input-btn-font-size-sm: .875rem; --pgn-typography-input-btn-font-size-base: 1.125rem; --pgn-typography-input-btn-font-family: inherit; - --pgn-typography-headings-line-height: 1.25rem; + --pgn-typography-headings-line-height: 1.25; --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold); --pgn-typography-headings-font-family: inherit; --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm); @@ -137,7 +136,7 @@ --pgn-typography-image-figure-caption-font-size: 90%; --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base); --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base); + --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-sm); --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight); --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family); --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base); @@ -155,7 +154,7 @@ --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base); --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family); - --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-small-x); + --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-xs); --pgn-typography-dropdown-item-text-decoration: none; --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base); --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold); @@ -163,7 +162,7 @@ --pgn-typography-code-font-size: 87.5%; --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold); --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5); - --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-small-x); + --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-xs); --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm); --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base); @@ -179,23 +178,23 @@ --pgn-typography-alert-line-height: 1.5rem; --pgn-typography-alert-font-size: .875rem; --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); - --pgn-spacing-grid-gutter-width: 24px; - --pgn-spacing-table-cell-padding-sm: .3rem; - --pgn-spacing-table-cell-padding-base: .75rem; - --pgn-spacing-label-margin-bottom: .5rem; - --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); - --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); - --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); - --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); - --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); - --pgn-spacing-spacer-base: 1rem; - --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); - --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); - --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); - --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); - --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); - --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); - --pgn-spacing-spacer-0: 0rem; + --pgn-spacing-grid-gutter-width: 24px; /* Grid gutter width value. */ + --pgn-spacing-table-cell-padding-sm: .3rem; /* Padding sm for tables. */ + --pgn-spacing-table-cell-padding-base: .75rem; /* Padding for tables. */ + --pgn-spacing-label-margin-bottom: .5rem; /* Margin bottom for label. */ + --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); /* Space value of level 5.5 */ + --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); /* Space value of level 4.5 */ + --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); /* Space value of level 3.5 */ + --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); /* Space value of level 2.5 */ + --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); /* Space value of level 1.5 */ + --pgn-spacing-spacer-base: 1rem; /* Basic space value */ + --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); /* Space value of level 6 */ + --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); /* Space value of level 5 */ + --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); /* Space value of level 4 */ + --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); /* Space value of level 3 */ + --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); /* Space value of level 2 */ + --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); /* Space value of level 1 */ + --pgn-spacing-spacer-0: 0; /* Space value of level 0 */ --pgn-spacing-mark-padding: .2em; --pgn-spacing-paragraph-margin-bottom: 1rem; --pgn-spacing-list-group-item-padding-x: 1.25rem; @@ -210,7 +209,7 @@ --pgn-spacing-headings-margin-bottom: .5rem; --pgn-spacing-caret-vertical-align: .255em; --pgn-spacing-caret-base: .255em; - --pgn-spacing-tooltip-margin: 0rem; + --pgn-spacing-tooltip-margin: 0; --pgn-spacing-tooltip-padding-x: .5rem; --pgn-spacing-tooltip-padding-y: .5rem; --pgn-spacing-toast-container-gutter-sm: .625rem; @@ -224,9 +223,9 @@ --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem; --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem; - --pgn-spacing-sticky-offset: 0rem; - --pgn-spacing-stepper-header-step-list-margin: 0rem; - --pgn-spacing-stepper-header-step-list-padding-x: 0rem; + --pgn-spacing-sticky-offset: 0; + --pgn-spacing-stepper-header-step-list-margin: 0; + --pgn-spacing-stepper-header-step-list-padding-x: 0; --pgn-spacing-stepper-header-step-list-padding-y: .25rem; --pgn-spacing-stepper-header-step-padding: .25rem; --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base); @@ -308,7 +307,7 @@ --pgn-spacing-dropdown-padding-y-item: .25rem; --pgn-spacing-dropdown-padding-y-base: .5rem; --pgn-spacing-dropdown-padding-x-item: 1rem; - --pgn-spacing-dropdown-padding-x-base: 0rem; + --pgn-spacing-dropdown-padding-x-base: 0; --pgn-spacing-dropdown-spacer: .125rem; --pgn-spacing-data-table-footer-position: center; --pgn-spacing-data-table-padding-cell: .5rem .75rem; @@ -347,7 +346,7 @@ --pgn-spacing-card-loading-skeleton-spacer: .313rem; --pgn-spacing-card-footer-action-gap: .5rem; --pgn-spacing-card-columns-gap: 1.25rem; - --pgn-spacing-card-columns-count: 3rem; + --pgn-spacing-card-columns-count: 3; --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y); --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3); --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group); @@ -367,7 +366,7 @@ --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y); --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y); --pgn-spacing-bubble-expandable-padding-x: .25rem; - --pgn-spacing-bubble-expandable-padding-y: 0rem; + --pgn-spacing-bubble-expandable-padding-y: 0; --pgn-spacing-breadcrumb-margin-left: .5rem; --pgn-spacing-badge-padding-y: .125rem; --pgn-spacing-badge-padding-x-pill: .6em; @@ -384,12 +383,12 @@ --pgn-spacing-alert-padding-y: 1.5rem; --pgn-spacing-action-row-gap-y: .5rem; --pgn-spacing-action-row-gap-x: .5rem; - --pgn-size-breakpoint-xxl: 1400px; - --pgn-size-breakpoint-xl: 1200px; - --pgn-size-breakpoint-lg: 992px; - --pgn-size-breakpoint-md: 768px; - --pgn-size-breakpoint-sm: 576px; - --pgn-size-breakpoint-xs: 0rem; + --pgn-size-breakpoint-xxl: 1400px; /* Starting breakpoint for large desktops, more than 1400px. */ + --pgn-size-breakpoint-xl: 1200px; /* Starting breakpoint for large desktops. */ + --pgn-size-breakpoint-lg: 992px; /* Starting breakpoint for desktops. */ + --pgn-size-breakpoint-md: 768px; /* Starting breakpoint for tablets. */ + --pgn-size-breakpoint-sm: 576px; /* Starting breakpoint for landscape phones. */ + --pgn-size-breakpoint-xs: 0; /* Starting breakpoint for portrait phones. */ --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base); --pgn-size-list-group-border-width: var(--pgn-size-border-width); --pgn-size-input-btn-focus-width: 1px; @@ -407,9 +406,9 @@ --pgn-size-tabs-notification-width: 1rem; --pgn-size-tabs-notification-height: 1rem; --pgn-size-stepper-step-bubble-error-shadow-width: 3px; - --pgn-size-stepper-step-width-min: 0rem; + --pgn-size-stepper-step-width-min: 0; --pgn-size-stepper-header-height-min: 5.13rem; - --pgn-size-stack-gap: 0rem; + --pgn-size-stack-gap: 0; --pgn-size-spinner-sm-border-width: .2em; --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width); --pgn-size-spinner-sm-width: 1rem; @@ -417,11 +416,11 @@ --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width); --pgn-size-spinner-base-width: 2rem; --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2); - --pgn-size-search-field-border-radius: 0rem; + --pgn-size-search-field-border-radius: 0; --pgn-size-search-field-border-width-focus: .3125rem; --pgn-size-search-field-border-width-base: .0625rem; --pgn-size-progress-bar-threshold-circle: .5625rem; - --pgn-size-progress-bar-border-radius: 0rem; + --pgn-size-progress-bar-border-radius: 0; --pgn-size-progress-bar-border-width: 1px; --pgn-size-progress-bar-height-annotated: .3125rem; --pgn-size-progress-bar-height-base: 1rem; @@ -437,7 +436,7 @@ --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm); --pgn-size-popover-border-width: var(--pgn-size-border-width); --pgn-size-popover-max-width: 480px; - --pgn-size-pagination-focus-outline: 0rem; + --pgn-size-pagination-focus-outline: 0; --pgn-size-pagination-toggle-border-sm: .25rem; --pgn-size-pagination-toggle-border-base: .3125rem; --pgn-size-pagination-reduced-dropdown-min-width: 6rem; @@ -452,7 +451,7 @@ --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base); --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base)); --pgn-size-navbar-nav-scroll-max-height: 75vh; - --pgn-size-nav-tabs-border-radius: 0rem; + --pgn-size-nav-tabs-border-radius: 0; --pgn-size-nav-tabs-border-width: 2px; --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width); --pgn-size-nav-tabs-link-border-bottom-width: .188rem; @@ -491,7 +490,7 @@ --pgn-size-form-autosuggest-icon-width: 2.4rem; --pgn-size-form-grid-gutter-width: 0.625rem; --pgn-size-form-control-border-radio-indicator-radius: 50%; - --pgn-size-form-control-border-checkbox-indicator-radius: 0rem; + --pgn-size-form-control-border-checkbox-indicator-radius: 0; --pgn-size-form-control-icon-width: 2rem; --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base); --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base); @@ -499,7 +498,7 @@ --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border); --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus); --pgn-size-form-control-range-thumb-border-radius: 1rem; - --pgn-size-form-control-range-thumb-border-base: 0rem; + --pgn-size-form-control-range-thumb-border-base: 0; --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width); --pgn-size-form-control-range-thumb-width: 1rem; --pgn-size-form-control-range-track-border-radius: 1rem; @@ -593,11 +592,11 @@ --pgn-size-annotation-border-radius: .25rem; --pgn-size-annotation-max-width: 18.75rem; --pgn-size-annotation-arrow-border-width: .5rem; - --pgn-size-alert-border-width: 0rem; + --pgn-size-alert-border-width: 0; --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-rounded-pill: 50rem; - --pgn-size-border-radius-sm: .25rem; - --pgn-size-border-radius-lg: .425rem; - --pgn-size-border-radius-base: .375rem; - --pgn-size-border-width: 1px; + --pgn-size-rounded-pill: 50rem; /* Pill border radius. */ + --pgn-size-border-radius-sm: .25rem; /* Small border radius. */ + --pgn-size-border-radius-lg: .425rem; /* Large border radius. */ + --pgn-size-border-radius-base: .375rem; /* Default border radius. */ + --pgn-size-border-width: 1px; /* Default border width. */ } diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css index d3aee7ed00..824c7895a1 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 Mon, 02 Sep 2024 19:21:13 GMT */ .bg-accent-a { diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 895537aa53..b2837b1027 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 Mon, 02 Sep 2024 19:21:13 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/_typography.scss b/styles/scss/core/_typography.scss index 1bc648d691..03a479a002 100644 --- a/styles/scss/core/_typography.scss +++ b/styles/scss/core/_typography.scss @@ -1,11 +1,23 @@ @import "~bootstrap/scss/type"; @mixin mobile-type { - .display-1, - .display-2, - .display-3, + .display-1 { + font-size: $display1-mobile-size; + line-height: $display-mobile-line-height; + } + + .display-2 { + font-size: $display2-mobile-size; + line-height: $display-mobile-line-height; + } + + .display-3 { + font-size: $display3-mobile-size; + line-height: $display-mobile-line-height; + } + .display-4 { - font-size: $display-mobile-size; + font-size: $display4-mobile-size; line-height: $display-mobile-line-height; } diff --git a/styles/scss/core/_utilities.scss b/styles/scss/core/_utilities.scss index afdb2c671a..9fc1f30765 100644 --- a/styles/scss/core/_utilities.scss +++ b/styles/scss/core/_utilities.scss @@ -21,13 +21,17 @@ $color-levels: 100, 200, 300, 400, 500, 600, 700, 800, 900; .x-small { - font-size: $x-small-font-size; + font-size: $x-small-font-size !important; } .micro { - font-size: $micro-font-size; + font-size: $micro-font-size !important; font-weight: normal; - line-height: $micro-line-height; + line-height: $micro-line-height !important; +} + +.font-size-normal { + font-size: $font-size-base !important; } .mw-xs { diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss index 5e1f358f1a..e5723b6a73 100644 --- a/styles/scss/core/_variables.scss +++ b/styles/scss/core/_variables.scss @@ -703,19 +703,19 @@ $font-weight-bolder: var(--pgn-typography-font-weight-bolder) !default; $font-weight-base: var(--pgn-typography-font-weight-base) !default; $line-height-base: var(--pgn-typography-line-height-base) !default; -$h1-font-size: var(--pgn-typography-font-size-h1) !default; -$h2-font-size: var(--pgn-typography-font-size-h2) !default; -$h3-font-size: var(--pgn-typography-font-size-h3) !default; -$h4-font-size: var(--pgn-typography-font-size-h4) !default; -$h5-font-size: var(--pgn-typography-font-size-h5) !default; -$h6-font-size: var(--pgn-typography-font-size-h6) !default; - -$h1-mobile-font-size: var(--pgn-typography-font-size-mobile-h1) !default; -$h2-mobile-font-size: var(--pgn-typography-font-size-mobile-h2) !default; -$h3-mobile-font-size: var(--pgn-typography-font-size-mobile-h3) !default; -$h4-mobile-font-size: var(--pgn-typography-font-size-mobile-h4) !default; -$h5-mobile-font-size: var(--pgn-typography-font-size-mobile-h5) !default; -$h6-mobile-font-size: var(--pgn-typography-font-size-mobile-h6) !default; +$h1-font-size: var(--pgn-typography-font-size-h1-base) !default; +$h2-font-size: var(--pgn-typography-font-size-h2-base) !default; +$h3-font-size: var(--pgn-typography-font-size-h3-base) !default; +$h4-font-size: var(--pgn-typography-font-size-h4-base) !default; +$h5-font-size: var(--pgn-typography-font-size-h5-base) !default; +$h6-font-size: var(--pgn-typography-font-size-h6-base) !default; + +$h1-mobile-font-size: var(--pgn-typography-font-size-h1-mobile) !default; +$h2-mobile-font-size: var(--pgn-typography-font-size-h2-mobile) !default; +$h3-mobile-font-size: var(--pgn-typography-font-size-h3-mobile) !default; +$h4-mobile-font-size: var(--pgn-typography-font-size-h4-mobile) !default; +$h5-mobile-font-size: var(--pgn-typography-font-size-h5-mobile) !default; +$h6-mobile-font-size: var(--pgn-typography-font-size-h6-mobile) !default; $headings-margin-bottom: var(--pgn-spacing-headings-margin-bottom) !default; $headings-font-family: var(--pgn-typography-headings-font-family) !default; @@ -723,29 +723,34 @@ $headings-font-weight: var(--pgn-typography-headings-font-weight) !default; $headings-line-height: var(--pgn-typography-headings-line-height) !default; $headings-color: var(--pgn-color-headings-base) !default; -$display1-size: var(--pgn-typography-display-1) !default; -$display2-size: var(--pgn-typography-display-2) !default; -$display3-size: var(--pgn-typography-display-3) !default; -$display4-size: var(--pgn-typography-display-4) !default; +$display1-size: var(--pgn-typography-font-size-display-1) !default; +$display2-size: var(--pgn-typography-font-size-display-2) !default; +$display3-size: var(--pgn-typography-font-size-display-3) !default; +$display4-size: var(--pgn-typography-font-size-display-4) !default; -$display-mobile-size: var(--pgn-typography-display-mobile) !default; +$display-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default; // deprecated in favor of $display1-mobile-size +$display1-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default; +$display2-mobile-size: var(--pgn-typography-font-size-display-mobile-2) !default; +$display3-mobile-size: var(--pgn-typography-font-size-display-mobile-3) !default; +$display4-mobile-size: var(--pgn-typography-font-size-display-mobile-4) !default; -$display1-weight: var(--pgn-typography-display-weight-1) !default; -$display2-weight: var(--pgn-typography-display-weight-2) !default; -$display3-weight: var(--pgn-typography-display-weight-3) !default; -$display4-weight: var(--pgn-typography-display-weight-4) !default; -$display-line-height: var(--pgn-typography-display-line-height-base) !default; -$display-mobile-line-height: var(--pgn-typography-display-line-height-mobile) !default; +$display1-weight: var(--pgn-typography-font-weight-display-1) !default; +$display2-weight: var(--pgn-typography-font-weight-display-2) !default; +$display3-weight: var(--pgn-typography-font-weight-display-3) !default; +$display4-weight: var(--pgn-typography-font-weight-display-4) !default; -$lead-font-size: var(--pgn-typography-font-size-lead) !default; +$display-line-height: var(--pgn-typography-line-height-display-base) !default; +$display-mobile-line-height: var(--pgn-typography-line-height-display-mobile) !default; + +$lead-font-size: var(--pgn-typography-font-size-lg) !default; $lead-font-weight: var(--pgn-typography-font-weight-lead) !default; -$small-font-size: var(--pgn-typography-font-size-small-base) !default; -$x-small-font-size: var(--pgn-typography-font-size-small-x) !default; +$small-font-size: var(--pgn-typography-font-size-sm) !default; +$x-small-font-size: var(--pgn-typography-font-size-xs) !default; -$micro-font-size: var(--pgn-typography-font-size-micro); -$micro-line-height: var(--pgn-typography-line-height-micro); +$micro-font-size: var(--pgn-typography-font-size-micro) !default; +$micro-line-height: var(--pgn-typography-line-height-micro) !default; $text-muted: var(--pgn-color-text-muted) !default; diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json index 133b336cc8..aafa21a782 100644 --- a/tokens/src/core/components/Alert.json +++ b/tokens/src/core/components/Alert.json @@ -17,7 +17,7 @@ "weight-link": { "source": "$alert-link-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" }, "size": { "source": "$alert-font-size", "$value": ".875rem", "$type": "dimension" } }, - "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "dimension" } + "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "number" } } }, "size": { diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json index 4a20f37204..62539f1e2f 100644 --- a/tokens/src/core/components/Annotation.json +++ b/tokens/src/core/components/Annotation.json @@ -11,7 +11,7 @@ "typography": { "annotation": { "font-size": { "source": "$annotation-font-size", "$value": "{typography.font.size.sm}" }, - "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}" } + "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}", "type": "number" } } }, "size": { diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json index bcfcc5bc6c..93a9a7366f 100644 --- a/tokens/src/core/components/Button/core.json +++ b/tokens/src/core/components/Button/core.json @@ -43,7 +43,7 @@ "weight": { "source": "$btn-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" } }, "line-height": { - "$type": "dimension", + "$type": "number", "base": { "source": "$btn-line-height", "$value": "{typography.input.btn.line-height.base}" }, "sm": { "source": "$btn-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" }, "lg": { "source": "$btn-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" } diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json index 52e9a46ddc..e6260ebae8 100644 --- a/tokens/src/core/components/Card.json +++ b/tokens/src/core/components/Card.json @@ -76,7 +76,7 @@ "typography": { "footer": { "text": { - "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.small.x}" } + "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.xs}" } } } } diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json index f3927f9aeb..c3f78c9007 100644 --- a/tokens/src/core/components/Dropzone.json +++ b/tokens/src/core/components/Dropzone.json @@ -3,7 +3,7 @@ "typography": { "dropzone": { "restriction-msg": { - "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.small.x}" } + "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.xs}" } } } }, diff --git a/tokens/src/core/components/Form/typography.json b/tokens/src/core/components/Form/typography.json index da1a0e8e6a..dd4973969b 100644 --- a/tokens/src/core/components/Form/typography.json +++ b/tokens/src/core/components/Form/typography.json @@ -13,7 +13,7 @@ "weight": { "source": "$input-font-weight", "$value": "{typography.font.weight.base}", "$type": "fontWeight" } }, "line-height": { - "$type": "dimension", + "$type": "number", "base": { "source": "$input-line-height", "$value": "{typography.input.btn.line-height.base}" }, "sm": { "source": "$input-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" }, "lg": { "source": "$input-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" } @@ -31,10 +31,10 @@ }, "weight": { "source": "$custom-select-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" } }, - "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "dimension" } + "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" } }, "file": { - "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "dimension" }, + "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" }, "font": { "family": { "source": "$custom-file-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" }, "weight": { "source": "$custom-file-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" } @@ -44,13 +44,13 @@ "feedback": { "$type": "dimension", "font": { - "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.small.base}" } + "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.sm}" } }, "tooltip": { "font": { "size": { "source": "$form-feedback-tooltip-font-size", "$value": "{typography.font.size.sm}" } }, - "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}" } + "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}", "$type": "number" } } } } diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json index 2d28cec0c5..b300e4ac78 100644 --- a/tokens/src/core/components/Pagination.json +++ b/tokens/src/core/components/Pagination.json @@ -5,7 +5,7 @@ "font-size": { "sm": { "source": "$pagination-font-size-sm", "$value": ".875rem" } }, - "line-height": { "source": "$pagination-line-height", "$value": "1.5rem" } + "line-height": { "source": "$pagination-line-height", "$value": "1.5rem", "$type": "number" } } }, "spacing": { diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json index 2590069543..e3e33d5ddc 100644 --- a/tokens/src/core/components/Stepper.json +++ b/tokens/src/core/components/Stepper.json @@ -33,7 +33,7 @@ }, "typography": { "spacer": { - "line-height": { "source": "$stepper-header-line-height", "$value": "1px" } + "line-height": { "source": "$stepper-header-line-height", "$value": "1px", "$type": "number" } } } } diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json index 40312e767b..c631e3d2d6 100644 --- a/tokens/src/core/components/general/headings.json +++ b/tokens/src/core/components/general/headings.json @@ -5,7 +5,7 @@ "family": { "source": "$headings-font-family", "$value": "inherit", "$type": "fontFamily" }, "weight": { "source": "$headings-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" } }, - "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "dimension" } + "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "number" } } }, "spacing": { diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json index f0fabce75c..0bdc756950 100644 --- a/tokens/src/core/components/general/input.json +++ b/tokens/src/core/components/general/input.json @@ -12,7 +12,7 @@ } }, "line-height": { - "$type": "dimension", + "$type": "number", "base": { "source": "$input-btn-line-height", "$value": "1.3333" }, "sm": { "source": "$input-btn-line-height-sm", "$value": "1.4286" }, "lg": { "source": "$input-btn-line-height-lg", "$value": "{typography.line-height.lg}" } diff --git a/tokens/src/core/components/general/text.json b/tokens/src/core/components/general/text.json index 45ce22da9a..8608354cdc 100644 --- a/tokens/src/core/components/general/text.json +++ b/tokens/src/core/components/general/text.json @@ -9,7 +9,7 @@ "typography": { "blockquote": { "small": { - "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.small.base}" } + "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.sm}" } }, "font-size": { "source": "$blockquote-font-size", "$value": "calc({typography.font.size.base} * 1.25)" } } diff --git a/tokens/src/core/global/display.json b/tokens/src/core/global/display.json deleted file mode 100644 index 17eb942016..0000000000 --- a/tokens/src/core/global/display.json +++ /dev/null @@ -1,77 +0,0 @@ -{ - "typography": { - "display": { - "1": { - "source": "$display1-size", - "$value": "3.75rem", - "$type": "dimension", - "$description": "Font size for heading of level 1." - }, - "2": { - "source": "$display2-size", - "$value": "4.875rem", - "$type": "dimension", - "$description": "Font size for heading of level 2." - }, - "3": { - "source": "$display3-size", - "$value": "5.625rem", - "$type": "dimension", - "$description": "Font size for heading of level 3." - }, - "4": { - "source": "$display4-size", - "$value": "7.5rem", - "$type": "dimension", - "$description": "Font size for heading of level 4." - }, - "line-height": { - "$type": "dimension", - "base": { - "source": "$display-line-height", - "$value": "1", - "$description": "Standard line height." - }, - "mobile": { - "source": "$display-mobile-line-height", - "$value": "3.5rem", - "$description": "Mobile line height." - } - }, - "mobile": { - "source": "$display-mobile-size", - "$value": "3.25rem", - "$type": "dimension", - "$description": "Font size for mobile devices." - }, - "weight": { - "1": { - "source": "$display1-weight", - "$value": "{typography.font.weight.bold}", - "$description": "Font weight of level 1." - }, - "2": { - "source": "$display2-weight", - "$value": "{typography.font.weight.bold}", - "$description": "Font weight of level 2." - }, - "3": { - "source": "$display3-weight", - "$value": "{typography.font.weight.bold}", - "$description": "Font weight of level 3." - }, - "4": { - "source": "$display4-weight", - "$value": "{typography.font.weight.bold}", - "$description": "Font weight of level 4." - }, - "$type": "fontWeight" - } - }, - "print-page-size": { - "source": "$print-page-size", - "$value": "a3", - "$type": "dimension" - } - } -} diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json index 20646617ed..022e875753 100644 --- a/tokens/src/core/global/typography.json +++ b/tokens/src/core/global/typography.json @@ -27,123 +27,145 @@ } }, "size": { + "$type": "dimension", "base": { "source": "$font-size-base", "$value": "1.125rem", - "$type": "dimension", "$description": "Base font size." }, "lg": { - "source": "$font-size-lg", - "$value": "1.4063rem", - "$type": "dimension", - "$description": "Large font size." + "source": "$lead-font-size", + "$value": "{typography.font.size.base} * 1.25", + "$description": "Lead text font size." }, "sm": { - "source": "$font-size-sm", - "$value": ".875rem", - "$type": "dimension", + "source": "$small-font-size", + "$value": "0.875rem", "$description": "Small font size." }, "xs": { - "source": "$font-size-xs", - "$value": ".75rem", + "source": "$x-small-font-size", + "$value": "0.75rem", + "$description": "X-small font size." + }, + "micro": { + "source": "$micro-font-size", + "$value": ".6875rem", "$type": "dimension", - "$description": "Extra-small font size." + "$description": "Micro utils text font size." }, - "small": { - "$type": "percentage", + "h1": { "base": { - "source": "$small-font-size", - "$value": "87.5%", - "$description": "Small font size." + "source": "$h1-font-size", + "$value": "2.5rem", + "$description": "Base font size of heading level 1." }, - "x": { - "source": "$x-small-font-size", - "$value": "75%", - "$description": "X-small font size." - } - }, - "h1": { - "source": "$h1-font-size", - "$value": "2.5rem", - "$type": "dimension", - "$description": "Font size of heading level 1." - }, - "h2": { - "source": "$h2-font-size", - "$value": "2rem", - "$type": "dimension", - "$description": "Font size of heading level 2." - }, - "h3": { - "source": "$h3-font-size", - "$value": "1.375rem", - "$type": "dimension", - "$description": "Font size of heading level 3." - }, - "h4": { - "source": "$h4-font-size", - "$value": "1.125rem", - "$type": "dimension", - "$description": "Font size of heading level 4." - }, - "h5": { - "source": "$h5-font-size", - "$value": ".875rem", - "$type": "dimension", - "$description": "Font size of heading level 5." - }, - "h6": { - "source": "$h6-font-size", - "$value": ".75rem", - "$type": "dimension", - "$description": "Font size of heading level 6." - }, - "mobile": { - "$type": "dimension", - "h1": { + "mobile": { "source": "$h1-mobile-font-size", "$value": "2.25rem", "$description": "Mobile font size of heading level 1." + } + }, + "h2": { + "base": { + "source": "$h2-font-size", + "$value": "2rem", + "$description": "Font size of heading level 2." }, - "h2": { + "mobile": { "source": "$h2-mobile-font-size", - "$value": "{typography.font.size.h2}", + "$value": "{typography.font.size.h2.base}", "$description": "Mobile font size of heading level 2." + } + }, + "h3": { + "base": { + "source": "$h3-font-size", + "$value": "1.375rem", + "$description": "Font size of heading level 3." }, - "h3": { + "mobile": { "source": "$h3-mobile-font-size", - "$value": "{typography.font.size.h3}", + "$value": "{typography.font.size.h3.base}", "$description": "Mobile font size of heading level 3." + } + }, + "h4": { + "base": { + "source": "$h4-font-size", + "$value": "1.125rem", + "$description": "Font size of heading level 4." }, - "h4": { + "mobile": { "source": "$h4-mobile-font-size", - "$value": "{typography.font.size.h4}", + "$value": "{typography.font.size.h4.base}", "$description": "Mobile font size of heading level 4." + } + }, + "h5": { + "base": { + "source": "$h5-font-size", + "$value": ".875rem", + "$description": "Font size of heading level 5." }, - "h5": { + "mobile": { "source": "$h5-mobile-font-size", - "$value": "{typography.font.size.h5}", + "$value": "{typography.font.size.h5.base}", "$description": "Mobile font size of heading level 5." + } + }, + "h6": { + "base": { + "source": "$h6-font-size", + "$value": ".75rem", + "$description": "Font size of heading level 6." }, - "h6": { + "mobile": { "source": "$h6-mobile-font-size", - "$value": "{typography.font.size.h6}", + "$value": "{typography.font.size.h6.base}", "$description": "Mobile font size of heading level 6." } }, - "lead": { - "source": "$lead-font-size", - "$value": "calc({typography.font.size.base} * 1.25)", - "$type": "dimension", - "$description": "Lead text font size." - }, - "micro": { - "source": "$micro-font-size", - "$value": ".688rem", - "$type": "dimension", - "$description": "Micro utils text font size." + "display": { + "1": { + "source": "$display1-size", + "$value": "3.75rem", + "$description": "Font size for heading of level 1." + }, + "2": { + "source": "$display2-size", + "$value": "4.875rem", + "$description": "Font size for heading of level 2." + }, + "3": { + "source": "$display3-size", + "$value": "5.625rem", + "$description": "Font size for heading of level 3." + }, + "4": { + "source": "$display4-size", + "$value": "7.5rem", + "$description": "Font size for heading of level 4." + }, + "mobile": { + "1": { + "source": "$display-mobile-size", + "$value": "3.25rem", + "$description": "Mobile font size for heading of level 1." + }, + "2": { + "$value": "{typography.font.size.display.mobile.1}", + "$description": "Mobile font size for heading of level 2." + }, + "3": { + "$value": "{typography.font.size.display.mobile.1}", + "$description": "Mobile font size for heading of level 3." + }, + "4": { + "$value": "{typography.font.size.display.mobile.1}", + "$description": "Mobile font size for heading of level 4." + } + } } }, "weight": { @@ -194,11 +216,33 @@ "source": "$table-th-font-weight", "$value": "normal", "$description": "Table th font weight." + }, + "display": { + "1": { + "source": "$display1-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of display level 1." + }, + "2": { + "source": "$display2-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of display level 2." + }, + "3": { + "source": "$display3-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of display level 3." + }, + "4": { + "source": "$display4-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of display level 4." + } } } }, "line-height": { - "$type": "dimension", + "$type": "number", "base": { "source": "$line-height-base", "$value": "1.5556", @@ -218,7 +262,24 @@ "source": "$micro-line-height", "$value": ".938rem", "$description": "Micro utils line height." + }, + "display": { + "base": { + "source": "$display-line-height", + "$value": "1", + "$description": "Standard display line height." + }, + "mobile": { + "source": "$display-mobile-line-height", + "$value": "3.5rem", + "$description": "Mobile display line height." + } } + }, + "print-page-size": { + "source": "$print-page-size", + "$value": "a3", + "$type": "dimension" } } } diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js index 1a25ff759a..ae559e6202 100644 --- a/tokens/style-dictionary.js +++ b/tokens/style-dictionary.js @@ -2,35 +2,81 @@ * This module creates and exports custom StyleDictionary instance for Paragon. */ const toml = require('js-toml'); +const chalk = require('chalk'); const chroma = require('chroma-js'); const { colorYiq, darken, lighten } = require('./sass-helpers'); const cssUtilities = require('./css-utilities'); -const { composeBreakpointName, createCustomHeader } = require('./utils'); +const { composeBreakpointName } = require('./utils'); + +/* eslint-disable import/no-unresolved */ +const getStyleDictionary = async () => (await import('style-dictionary')).default; +const getStyleDictionaryUtils = async () => import('style-dictionary/utils'); +/* eslint-enable import/no-unresolved */ + +/** + * @typedef {import('style-dictionary/types').DesignToken} DesignToken + */ + +/** + * @typedef ModifyColorYiq + * @property {'color-yiq'} type - The type of modification. + * @property {number} [amount] - The amount of modification to apply. + * @property {string} [otherColor] - The other color to mix with. + * @property {number} [light] - The light color to use for color-yiq. + * @property {number} [dark] - The dark color to use for color-yiq. + * @property {number} [threshold] - The threshold to use for color-yiq. + */ + +/** + * @typedef ModifyColorDarken + * @property {'darken'} type - The type of modification. + * @property {number} amount - The amount of modification to apply. + */ + +/** + * @typedef ModifyColorLighten + * @property {'lighten'} type - The type of modification. + * @property {number} amount - The amount of modification to apply. + */ + +/** + * @typedef ModifyColorMix + * @property {'mix'} type - The type of modification. + * @property {number} amount - The amount of modification to apply. + * @property {string} otherColor - The other color to mix with. + */ + +/** + * @typedef ModifyColorAlpha + * @property {'alpha'} type - The type of modification. + * @property {number} amount - The amount of modification to apply. + */ + +/** + * @typedef DesignTokenModify + * @type {ModifyColorYiq | ModifyColorDarken | ModifyColorLighten | ModifyColorMix | ModifyColorAlpha} + */ + +/** + * @typedef {DesignToken & { + * outputReferences?: boolean; + * modify?: DesignTokenModify[]; + * }} ParagonDesignToken + */ /** * Transforms a color token based on various modifications. * - * @param {Object} token - The token object containing color information and modifications. - * @param {string} token.name - The name of the color token. - * @param {string} token.$value - The initial color value of the token. - * @param {Object} token.original - The original token object containing the original value. - * @param {string} token.original.$value - The original color value before any modifications. - * @param {Array} [token.modify=[]] - An array of modification objects to apply to the color. - * @param {string} token.modify.type - The type of modification to apply (e.g., 'mix', 'darken', 'lighten'). - * @param {number} token.modify.amount - The amount by which to modify the color (e.g., percentage or value). - * @param {string} [token.modify.otherColor] - The other color to mix with, if applicable. - * @param {string} [token.modify.light] - The light color for YIQ modification. - * @param {string} [token.modify.dark] - The dark color for YIQ modification. - * @param {number} [token.modify.threshold] - The threshold for YIQ modification. - * @param {Object} theme - The theme object containing additional information for color transformations. + * @param {ParagonDesignToken} token - The token object containing color information and modifications. + * @param {string} themeVariant - The themeVariant object containing additional information for color transformations. * @returns {string} - The transformed color value in hexadecimal format, including alpha if applicable. */ -const colorTransform = (token, theme) => { +const colorTransform = (token, themeVariant) => { const { name: tokenName, $value, original, - modify = [], + modify, } = token; const reservedColorValues = ['inherit', 'initial', 'revert', 'unset', 'currentColor', 'none']; @@ -40,7 +86,7 @@ const colorTransform = (token, theme) => { let color = chroma($value); - if (modify && modify.length > 0) { + if (modify?.length > 0) { modify.forEach((modifier) => { const { type, amount, otherColor } = modifier; switch (type) { @@ -55,7 +101,7 @@ const colorTransform = (token, theme) => { light, dark, threshold, - theme, + themeVariant, }); break; } @@ -65,8 +111,16 @@ const colorTransform = (token, theme) => { case 'lighten': color = lighten(color, amount); break; - default: + default: { + if (!color[type]) { + // eslint-disable-next-line no-console + console.warn( + chalk.keyword('orange').bold(`[Paragon] Warning: Invalid color modification type "${type}" for ${tokenName}.`), + ); + return; + } color = color[type](amount); + } } }); } @@ -80,45 +134,44 @@ const colorTransform = (token, theme) => { * 2. 'theme' to output only theme's variables (e.g, 'light' or 'dark'), if theme is not provided - only * core tokens are built. */ -const createCustomCSSVariables = async ({ - formatterArgs, - themeVariant, -}, StyleDictionary) => { - // eslint-disable-next-line import/no-unresolved - const { sortByReference, usesReferences, getReferences } = (await import('style-dictionary/utils')); +const createCustomCSSVariables = async ({ formatterArgs }) => { + const { fileHeader, formattedVariables } = await getStyleDictionaryUtils(); const { dictionary, options, file } = formatterArgs; - const outputTokens = themeVariant - ? dictionary.allTokens.filter(token => token.filePath.includes(themeVariant)) - : dictionary.allTokens; - - const variables = outputTokens.sort(sortByReference(dictionary)).map(token => { - let { $value } = token; - - const outputReferencesForToken = (token.original.outputReferences === false) ? false : options.outputReferences; - - if (usesReferences(token.original.$value) && outputReferencesForToken) { - const refs = getReferences(token.original.$value, dictionary.tokens); - refs.forEach(ref => { - $value = $value.replace(ref.$value, `var(--${ref.name})`); - }); - } - - return ` --${token.name}: ${$value};`; - }).join('\n'); - - return `${createCustomHeader(StyleDictionary, file).join('\n')}\n:root {\n${variables}\n}\n`; + const { outputReferences, formatting } = options; + const variables = formattedVariables({ + format: 'css', + dictionary, + outputReferences: (token) => { + // Formatter options configured to never output references + if (!outputReferences) { + return false; + } + // Token has modifications (e.g., mix, darken, lighten); the computed + // value should be output instead of the reference. + if (token.modify) { + return false; + } + // Formatter options configured to show output references, but handle when individual tokens might opt-out. + return token.outputReferences ?? true; + }, + usesDtcg: true, + }); + const header = await fileHeader({ file, formatting }); + return `${header}:root {\n${variables}\n}\n`; }; +/** + * @typedef {type import("style-dictionary/types").StyleDictionary} StyleDictionary + */ + /** * Initializes and configures Style Dictionary with custom transforms, formatters, filters, and parsers. * - * @returns {Promise} - A promise that resolves to the configured Style Dictionary instance. + * @returns {Promise} - A promise that resolves to the configured Style Dictionary instance. */ -const initializeStyleDictionary = async () => { - // eslint-disable-next-line import/no-unresolved - const StyleDictionary = (await import('style-dictionary')).default; - // eslint-disable-next-line import/no-unresolved - const { getReferences } = (await import('style-dictionary/utils')); +const initializeStyleDictionary = async ({ themes }) => { + const StyleDictionary = await getStyleDictionary(); + const { getReferences } = await getStyleDictionaryUtils(); /** * Transformer that applies SASS color functions to tokens. @@ -127,7 +180,7 @@ const initializeStyleDictionary = async () => { name: 'color/sass-color-functions', transitive: true, type: 'value', - filter: (token) => token.attributes.category === 'color' || token.$value?.toString().startsWith('#'), + filter: (token) => token.attributes?.category === 'color' || token.$value.toString().startsWith('#'), transform: (token) => colorTransform(token), }); @@ -151,7 +204,7 @@ const initializeStyleDictionary = async () => { */ StyleDictionary.registerFormat({ name: 'css/custom-variables', - format: formatterArgs => createCustomCSSVariables({ formatterArgs }, StyleDictionary), + format: formatterArgs => createCustomCSSVariables({ formatterArgs }), }); /** @@ -163,7 +216,9 @@ const initializeStyleDictionary = async () => { */ StyleDictionary.registerFormat({ name: 'css/utility-classes', - format: async ({ dictionary, file }) => { + format: async ({ dictionary, file, options = {} }) => { + const { formatting } = options; + const { fileHeader } = await getStyleDictionaryUtils(); const { utilities } = dictionary.tokens; if (!utilities) { return ''; @@ -189,8 +244,8 @@ const initializeStyleDictionary = async () => { } } }); - - return `${createCustomHeader(StyleDictionary, file).join('\n')}\n${utilityClasses}`; + const header = await fileHeader({ file, formatting }); + return `${header}${utilityClasses}`; }, }); @@ -201,7 +256,9 @@ const initializeStyleDictionary = async () => { */ StyleDictionary.registerFormat({ name: 'css/custom-media-breakpoints', - format: ({ dictionary, file }) => { + format: async ({ dictionary, file, options = {} }) => { + const { fileHeader } = await getStyleDictionaryUtils(); + const { formatting } = options; const { breakpoint } = dictionary.tokens.size; let customMediaVariables = ''; @@ -216,26 +273,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 +284,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), + }); }); /** @@ -264,4 +319,5 @@ module.exports = { initializeStyleDictionary, createCustomCSSVariables, colorTransform, + getStyleDictionaryUtils, }; diff --git a/tokens/utils.js b/tokens/utils.js index d3c230b87d..5fb09c77ea 100644 --- a/tokens/utils.js +++ b/tokens/utils.js @@ -195,11 +195,11 @@ async function transformInPath(location, variablesMap, transformType = 'definiti * @param {Object} options - The options for creating the `index.css` file. * @param {string} [options.buildDir=path.resolve(__dirname, '../styles/css')] * - The base directory where the CSS files are located. - * @param {boolean} options.isTheme - A flag indicating whether the directory is for theme files. + * @param {boolean} options.isThemeVariant - A flag indicating whether the directory is for theme files. * @param {string} options.themeVariant - The specific theme variant to be used (e.g., 'dark', 'light'). */ -function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'), isTheme, themeVariant }) { - const directoryPath = isTheme ? `${buildDir}/themes/${themeVariant}` : `${buildDir}/core`; +function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'), isThemeVariant, themeVariant }) { + const directoryPath = isThemeVariant ? `${buildDir}/themes/${themeVariant}` : `${buildDir}/core`; fs.readdir(directoryPath, (errDir, files) => { if (errDir) { @@ -211,7 +211,7 @@ function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css' const outputCssFiles = files.filter(file => file !== 'index.css'); // When creating themes, there are typically two files: one for utility classes and one for variables. // It's organized them to allow variables be reading first. - if (isTheme) { outputCssFiles.reverse(); } + if (isThemeVariant) { outputCssFiles.reverse(); } const exportStatements = outputCssFiles.map((file) => `@import "${file}";`); @@ -237,22 +237,10 @@ function composeBreakpointName(breakpointName, format) { return `@custom-media --${breakpointName.replace(/breakpoint/g, `breakpoint-${format}-width`)}`; } -/** - * Generates a custom file header using Style Dictionary hooks. - * - * @param {Object} StyleDictionary - The Style Dictionary instance being used. - * @param {Object} file - The file object containing metadata about the file being generated. - * @returns {string[]} - An array of strings representing the lines of the file header. - */ -function createCustomHeader(StyleDictionary, file) { - return StyleDictionary.hooks.fileHeaders.customFileHeader({ file }); -} - module.exports = { createIndexCssFile, getFilesWithExtension, getSCSStoCSSMap, transformInPath, composeBreakpointName, - createCustomHeader, }; diff --git a/www/src/components/ComponentsList.tsx b/www/src/components/ComponentsList.tsx index f0a20f0b8e..113394990d 100644 --- a/www/src/components/ComponentsList.tsx +++ b/www/src/components/ComponentsList.tsx @@ -41,9 +41,9 @@ function ComponentsList() { return ( -
+

All components (A-Z)

-
    +
      {all.map((node: IComponentNavItem) => )}
diff --git a/www/src/components/MeasuredItem.tsx b/www/src/components/MeasuredItem.tsx index 646cafcc54..77e7ab3078 100644 --- a/www/src/components/MeasuredItem.tsx +++ b/www/src/components/MeasuredItem.tsx @@ -41,8 +41,6 @@ function MeasuredItem({ }, {}); setMeasurements(measurementsItems); }; - // Needs a moment to finish switching theme and re-render children to DOM first. - setMeasurements(initialMeasurements); const timeout = setTimeout(measure, 1000); return () => clearTimeout(timeout); }, @@ -51,9 +49,9 @@ function MeasuredItem({ return ( <> - {renderBefore ? renderBefore(measurements) : null} + {renderBefore?.(measurements)} {React.cloneElement(children as React.ReactElement, { ref: itemRef })} - {renderAfter ? renderAfter(measurements) : null} + {renderAfter?.(measurements)} ); } diff --git a/www/src/components/TableCells.tsx b/www/src/components/TableCells.tsx index 2dd00c84a2..339aefb06b 100644 --- a/www/src/components/TableCells.tsx +++ b/www/src/components/TableCells.tsx @@ -6,6 +6,18 @@ export type CodeCellType = { value: string | number | undefined, }; +export type ClassNameRowType = { + className: string | undefined, + text: string, + hasClass?: boolean, +}; + +export type ClassNameCellType = { + row: { + original: ClassNameRowType, + }, +} & CodeCellType; + export type DataTableRowType = { row: { original: { @@ -17,13 +29,17 @@ export type DataTableRowType = { }, }; -export function ClassNameCell({ value }: CodeCellType) { +export function ClassNameCell({ row, value }: ClassNameCellType) { + if (row.original.hasClass === false) { + return null; + } + if (!value) { return null; } return ( - + .{value} ); @@ -31,7 +47,7 @@ export function ClassNameCell({ value }: CodeCellType) { export function TextCell({ value }: CodeCellType) { return ( -

+

{value}

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

+

{row.original.text}

); diff --git a/www/src/components/_CodeBlock.scss b/www/src/components/_CodeBlock.scss index bfff2bae46..99f6d3dfc8 100644 --- a/www/src/components/_CodeBlock.scss +++ b/www/src/components/_CodeBlock.scss @@ -1,10 +1,11 @@ .pgn-doc__code-block { margin: var(--pgn-spacing-spacer-base) 0 2rem; - background-color: var(--pgn-color-light-200); - border: solid 2px var(--pgn-color-light-300); - border-radius: var(--pgn-size-border-radius-base); .pgn-doc__code-block-preview { + background-color: var(--pgn-color-light-200); + border: solid 2px var(--pgn-color-light-300); + border-bottom: 0; + border-radius: var(--pgn-size-border-radius-base) var(--pgn-size-border-radius-base) 0 0; padding: var(--pgn-spacing-spacer-base); } diff --git a/www/src/components/_doc-elements.scss b/www/src/components/_doc-elements.scss index 94d3e937cd..decd92b57e 100644 --- a/www/src/components/_doc-elements.scss +++ b/www/src/components/_doc-elements.scss @@ -327,6 +327,18 @@ .color-palette { display: grid; - grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); - grid-row-gap: 2rem; + grid-gap: 2rem; + grid-template-columns: repeat(2, 1fr); // Default to 2 columns +} + +@media (--pgn-size-breakpoint-min-width-md) { + .color-palette { + grid-template-columns: repeat(3, 1fr); // 3 columns for medium+ screens + } +} + +@media (--pgn-size-breakpoint-min-width-lg) { + .color-palette { + grid-template-columns: repeat(4, 1fr); // 4 columns for large+ screens + } } diff --git a/www/src/components/header/Navbar.tsx b/www/src/components/header/Navbar.tsx index ffef619923..dd7f188ec7 100644 --- a/www/src/components/header/Navbar.tsx +++ b/www/src/components/header/Navbar.tsx @@ -35,7 +35,7 @@ export default function Navbar({ return ( - + {showMinimizedTitle && (