diff --git a/package.json b/package.json index 504b6925ed..b238c9c0ea 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "module": "dist/index.js", "license": "Apache-2.0", "bin": { - "build-design-tokens": "./tokens/build-tokens.js" + "build-design-tokens": "./tokens/build-tokens.js", + "replace-scss-with-css": "./tokens/replace-variables.js" }, "publishConfig": { "access": "public" @@ -50,7 +51,7 @@ "type-check": "tsc --noEmit && tsc --project www --noEmit", "type-check:watch": "npm run type-check -- --watch", "build-types": "tsc --emitDeclarationOnly", - "build-tokens": "node tokens/build-tokens.js --build-dir scss/core/css/", + "build-tokens": "node tokens/build-tokens.js --build-dir ./scss/core/css/", "replace-variables-usage-with-css": "node tokens/replace-variables.js -p src -t usage", "replace-variables-definition-with-css": "node tokens/replace-variables.js -p src -t definition", "build-scss-to-css-map": "node tokens/map-scss-to-css.js" diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss index eb151e193b..59ad185c04 100644 --- a/scss/core/_variables.scss +++ b/scss/core/_variables.scss @@ -339,7 +339,7 @@ $enable-deprecation-messages: true !default; // variables. Mostly focused on spacing. // You can add more entries to the $spacers map, should you need more variation. -$spacer: var(--pgn-spacer-base) !default; +$spacer: var(--pgn-spacing-spacer-base) !default; $spacers: () !default; // stylelint-disable-next-line scss/dollar-variable-default $spacers: map-merge( @@ -378,54 +378,54 @@ $sizes: map-merge( // // Settings for the `` element. -$body-bg: var(--pgn-body-bg) !default; -$body-color: var(--pgn-body-color) !default; +$body-bg: var(--pgn-color-body-bg) !default; +$body-color: var(--pgn-color-body-base) !default; // Links // // Style anchor elements. -$link-color: var(--pgn-link-color) !default; -$link-decoration: var(--pgn-link-decoration) !default; -$link-hover-color: var(--pgn-link-hover-color) !default; -$link-hover-decoration: var(--pgn-link-hover-decoration) !default; -$inline-link-color: var(--pgn-link-inline-color) !default; -$inline-link-decoration: var(--pgn-link-inline-decoration) !default; -$inline-link-decoration-color: var(--pgn-link-inline-decoration-color) !default; -$inline-link-hover-color: var(--pgn-link-inline-hover-color) !default; -$inline-link-hover-decoration: var(--pgn-link-inline-hover-decoration) !default; -$inline-link-hover-decoration-color: var(--pgn-link-inline-hover-decoration-color) !default; - -$muted-link-color: var(--pgn-link-muted-color) !default; -$muted-link-decoration: var(--pgn-link-muted-decoration) !default; -$muted-link-hover-color: var(--pgn-link-muted-hover-color) !default; -$muted-link-hover-decoration: var(--pgn-link-muted-hover-decoration) !default; -$muted-inline-link-color: var(--pgn-link-muted-inline-color) !default; -$muted-inline-link-decoration: var(--pgn-link-muted-inline-decoration) !default; -$muted-inline-link-decoration-color: var(--pgn-link-muted-inline-decoration-color) !default; -$muted-inline-link-hover-color: var(--pgn-link-muted-inline-hover-color) !default; -$muted-inline-link-hover-decoration: var(--pgn-link-muted-inline-hover-decoration) !default; -$muted-inline-link-hover-decoration-color: var(--pgn-link-muted-inline-hover-decoration-color) !default; - -$brand-link-color: var(--pgn-link-brand-color) !default; -$brand-link-decoration: var(--pgn-link-brand-decoration) !default; -$brand-link-hover-color: var(--pgn-link-brand-hover-color) !default; -$brand-link-hover-decoration: var(--pgn-link-brand-hover-decoration) !default; -$brand-inline-link-color: var(--pgn-link-brand-inline-color) !default; -$brand-inline-link-decoration: var(--pgn-link-brand-inline-decoration) !default; -$brand-inline-link-decoration-color: var(--pgn-link-brand-inline-decoration-color) !default; -$brand-inline-link-hover-color: var(--pgn-link-brand-inline-hover-color) !default; -$brand-inline-link-hover-decoration: var(--pgn-link-brand-inline-hover-decoration) !default; -$brand-inline-link-hover-decoration-color: var(--pgn-link-brand-inline-hover-decoration-color) !default; +$link-color: var(--pgn-color-link-base) !default; +$link-decoration: var(--pgn-typography-link-decoration-base) !default; +$link-hover-color: var(--pgn-color-link-hover) !default; +$link-hover-decoration: var(--pgn-typography-link-decoration-hover) !default; +$inline-link-color: var(--pgn-color-link-inline-base) !default; +$inline-link-decoration: var(--pgn-typography-link-decoration-inline-base) !default; +$inline-link-decoration-color: var(--pgn-color-link-inline-decoration) !default; +$inline-link-hover-color: var(--pgn-color-link-inline-hover-base) !default; +$inline-link-hover-decoration: var(--pgn-typography-link-decoration-inline-hover) !default; +$inline-link-hover-decoration-color: var(--pgn-color-link-inline-hover-decoration) !default; + +$muted-link-color: var(--pgn-color-link-muted-base) !default; +$muted-link-decoration: var(--pgn-typography-link-decoration-muted-base) !default; +$muted-link-hover-color: var(--pgn-color-link-muted-hover) !default; +$muted-link-hover-decoration: var(--pgn-typography-link-decoration-muted-hover) !default; +$muted-inline-link-color: var(--pgn-color-link-muted-inline-base) !default; +$muted-inline-link-decoration: var(--pgn-typography-link-decoration-muted-inline-base) !default; +$muted-inline-link-decoration-color: var(--pgn-color-link-muted-inline-decoration) !default; +$muted-inline-link-hover-color: var(--pgn-color-link-muted-inline-hover-base) !default; +$muted-inline-link-hover-decoration: var(--pgn-typography-link-decoration-muted-inline-hover) !default; +$muted-inline-link-hover-decoration-color: var(--pgn-color-link-muted-inline-hover-decoration) !default; + +$brand-link-color: var(--pgn-color-link-brand-base) !default; +$brand-link-decoration: var(--pgn-typography-link-decoration-brand-base) !default; +$brand-link-hover-color: var(--pgn-color-link-brand-hover) !default; +$brand-link-hover-decoration: var(--pgn-typography-link-decoration-brand-hover) !default; +$brand-inline-link-color: var(--pgn-color-link-brand-inline-base) !default; +$brand-inline-link-decoration: var(--pgn-typography-link-decoration-brand-inline-base) !default; +$brand-inline-link-decoration-color: var(--pgn-color-link-brand-inline-decoration) !default; +$brand-inline-link-hover-color: var(--pgn-color-link-brand-inline-hover-base) !default; +$brand-inline-link-hover-decoration: var(--pgn-typography-link-decoration-brand-inline-hover) !default; +$brand-inline-link-hover-decoration-color: var(--pgn-color-link-brand-inline-hover-decoration) !default; // Darken percentage for links with `.text-*` class (e.g. `.text-success`) -$emphasized-link-hover-darken-percentage: var(--pgn-link-emphasized-hover-darken-percentage) !default; +$emphasized-link-hover-darken-percentage: var(--pgn-other-link-emphasized-hover-darken-percentage) !default; // Paragraphs // // Style p element. -$paragraph-margin-bottom: var(--pgn-paragraph-margin-bottom) !default; +$paragraph-margin-bottom: var(--pgn-spacing-paragraph-margin-bottom) !default; // Grid containers // @@ -458,8 +458,8 @@ $max-width-xl: var(--pgn-size-container-max-width-xl) !default; // // Define common padding and border radius sizes and more. -$line-height-lg: var(--pgn-line-height-lg) !default; -$line-height-sm: var(--pgn-line-height-sm) !default; +$line-height-lg: var(--pgn-typography-line-height-lg) !default; +$line-height-sm: var(--pgn-typography-line-height-sm) !default; $border-width: var(--pgn-size-border-width) !default; $border-color: var(--pgn-color-border) !default; @@ -470,41 +470,41 @@ $border-radius-sm: var(--pgn-size-border-radius-sm) !default; $rounded-pill: 50rem !default; -$level-1-box-shadow: var(--pgn-box-shadow-level-1) !default; -$level-2-box-shadow: var(--pgn-box-shadow-level-2) !default; -$level-3-box-shadow: var(--pgn-box-shadow-level-3) !default; -$level-4-box-shadow: var(--pgn-box-shadow-level-4) !default; -$level-5-box-shadow: var(--pgn-box-shadow-level-5) !default; - -$box-shadow-down-1: var(--pgn-box-shadow-down-1) !default; -$box-shadow-down-2: var(--pgn-box-shadow-down-2) !default; -$box-shadow-down-3: var(--pgn-box-shadow-down-3) !default; -$box-shadow-down-4: var(--pgn-box-shadow-down-4) !default; -$box-shadow-down-5: var(--pgn-box-shadow-down-5) !default; - -$box-shadow-left-1: var(--pgn-box-shadow-left-1) !default; -$box-shadow-left-2: var(--pgn-box-shadow-left-2) !default; -$box-shadow-left-3: var(--pgn-box-shadow-left-3) !default; -$box-shadow-left-4: var(--pgn-box-shadow-left-4) !default; -$box-shadow-left-5: var(--pgn-box-shadow-left-5) !default; - -$box-shadow-up-1: var(--pgn-box-shadow-up-1) !default; -$box-shadow-up-2: var(--pgn-box-shadow-up-2) !default; -$box-shadow-up-3: var(--pgn-box-shadow-up-3) !default; -$box-shadow-up-4: var(--pgn-box-shadow-up-4) !default; -$box-shadow-up-5: var(--pgn-box-shadow-up-5) !default; - -$box-shadow-right-1: var(--pgn-box-shadow-right-1) !default; -$box-shadow-right-2: var(--pgn-box-shadow-right-2) !default; -$box-shadow-right-3: var(--pgn-box-shadow-right-3) !default; -$box-shadow-right-4: var(--pgn-box-shadow-right-4) !default; -$box-shadow-right-5: var(--pgn-box-shadow-right-5) !default; - -$box-shadow-centered-1: var(--pgn-box-shadow-centered-1) !default; -$box-shadow-centered-2: var(--pgn-box-shadow-centered-2) !default; -$box-shadow-centered-3: var(--pgn-box-shadow-centered-3) !default; -$box-shadow-centered-4: var(--pgn-box-shadow-centered-4) !default; -$box-shadow-centered-5: var(--pgn-box-shadow-centered-5) !default; +$level-1-box-shadow: var(--pgn-elevation-box-shadow-level-1) !default; +$level-2-box-shadow: var(--pgn-elevation-box-shadow-level-2) !default; +$level-3-box-shadow: var(--pgn-elevation-box-shadow-level-3) !default; +$level-4-box-shadow: var(--pgn-elevation-box-shadow-level-4) !default; +$level-5-box-shadow: var(--pgn-elevation-box-shadow-level-5) !default; + +$box-shadow-down-1: var(--pgn-elevation-box-shadow-down-1) !default; +$box-shadow-down-2: var(--pgn-elevation-box-shadow-down-2) !default; +$box-shadow-down-3: var(--pgn-elevation-box-shadow-down-3) !default; +$box-shadow-down-4: var(--pgn-elevation-box-shadow-down-4) !default; +$box-shadow-down-5: var(--pgn-elevation-box-shadow-down-5) !default; + +$box-shadow-left-1: var(--pgn-elevation-box-shadow-left-1) !default; +$box-shadow-left-2: var(--pgn-elevation-box-shadow-left-2) !default; +$box-shadow-left-3: var(--pgn-elevation-box-shadow-left-3) !default; +$box-shadow-left-4: var(--pgn-elevation-box-shadow-left-4) !default; +$box-shadow-left-5: var(--pgn-elevation-box-shadow-left-5) !default; + +$box-shadow-up-1: var(--pgn-elevation-box-shadow-up-1) !default; +$box-shadow-up-2: var(--pgn-elevation-box-shadow-up-2) !default; +$box-shadow-up-3: var(--pgn-elevation-box-shadow-up-3) !default; +$box-shadow-up-4: var(--pgn-elevation-box-shadow-up-4) !default; +$box-shadow-up-5: var(--pgn-elevation-box-shadow-up-5) !default; + +$box-shadow-right-1: var(--pgn-elevation-box-shadow-right-1) !default; +$box-shadow-right-2: var(--pgn-elevation-box-shadow-right-2) !default; +$box-shadow-right-3: var(--pgn-elevation-box-shadow-right-3) !default; +$box-shadow-right-4: var(--pgn-elevation-box-shadow-right-4) !default; +$box-shadow-right-5: var(--pgn-elevation-box-shadow-right-5) !default; + +$box-shadow-centered-1: var(--pgn-elevation-box-shadow-centered-1) !default; +$box-shadow-centered-2: var(--pgn-elevation-box-shadow-centered-2) !default; +$box-shadow-centered-3: var(--pgn-elevation-box-shadow-centered-3) !default; +$box-shadow-centered-4: var(--pgn-elevation-box-shadow-centered-4) !default; +$box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5) !default; @mixin pgn-box-shadow($level, $side) { @if $side == "down" { @@ -654,16 +654,16 @@ $box-shadow-sides: ( "centered" ) !default; -$box-shadow-sm: var(--pgn-box-shadow-sm) !default; -$box-shadow: var(--pgn-box-shadow-base) !default; -$box-shadow-lg: var(--pgn-box-shadow-lg) !default; +$box-shadow-sm: var(--pgn-elevation-box-shadow-sm) !default; +$box-shadow: var(--pgn-elevation-box-shadow-base) !default; +$box-shadow-lg: var(--pgn-elevation-box-shadow-lg) !default; $component-active-color: var(--pgn-color-active) !default; -$component-active-bg: var(--pgn-color-background-active) !default; +$component-active-bg: var(--pgn-color-bg-active) !default; -$caret-width: var(--pgn-caret-width) !default; -$caret-vertical-align: var(--pgn-caret-vertical-align) !default; -$caret-spacing: var(--pgn-caret-spacing) !default; +$caret-width: var(--pgn-size-caret-width) !default; +$caret-vertical-align: var(--pgn-spacing-caret-vertical-align) !default; +$caret-spacing: var(--pgn-spacing-caret-base) !default; $transition-base: var(--pgn-transition-base) !default; $transition-fade: var(--pgn-transition-fade) !default; @@ -686,96 +686,96 @@ $embed-responsive-aspect-ratios: join( // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: var(--pgn-font-family-sans-serif) !default; -$font-family-serif: var(--pgn-font-family-serif) !default; -$font-family-monospace: var(--pgn-font-family-monospace) !default; -$font-family-base: var(--pgn-font-family-base) !default; +$font-family-sans-serif: var(--pgn-typography-font-family-sans-serif) !default; +$font-family-serif: var(--pgn-typography-font-family-serif) !default; +$font-family-monospace: var(--pgn-typography-font-family-monospace) !default; +$font-family-base: var(--pgn-typography-font-family-base) !default; -$font-size-base: var(--pgn-font-size-base) !default; -$font-size-lg: var(--pgn-font-size-lg) !default; -$font-size-sm: var(--pgn-font-size-sm) !default; -$font-size-xs: var(--pgn-font-size-xs) !default; +$font-size-base: var(--pgn-typography-font-size-base) !default; +$font-size-lg: var(--pgn-typography-font-size-lg) !default; +$font-size-sm: var(--pgn-typography-font-size-sm) !default; +$font-size-xs: var(--pgn-typography-font-size-xs) !default; -$font-weight-lighter: var(--pgn-font-weight-lighter) !default; -$font-weight-light: var(--pgn-font-weight-light) !default; -$font-weight-normal: var(--pgn-font-weight-normal) !default; -$font-weight-semi-bold: var(--pgn-font-weight-semi-bold) !default; -$font-weight-bold: var(--pgn-font-weight-bold) !default; -$font-weight-bolder: var(--pgn-font-weight-bolder) !default; +$font-weight-lighter: var(--pgn-typography-font-weight-lighter) !default; +$font-weight-light: var(--pgn-typography-font-weight-light) !default; +$font-weight-normal: var(--pgn-typography-font-weight-normal) !default; +$font-weight-semi-bold: var(--pgn-typography-font-weight-semi-bold) !default; +$font-weight-bold: var(--pgn-typography-font-weight-bold) !default; +$font-weight-bolder: var(--pgn-typography-font-weight-bolder) !default; -$font-weight-base: var(--pgn-font-weight-base) !default; -$line-height-base: var(--pgn-line-height-base) !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-font-size-h1) !default; -$h2-font-size: var(--pgn-font-size-h2) !default; -$h3-font-size: var(--pgn-font-size-h3) !default; -$h4-font-size: var(--pgn-font-size-h4) !default; -$h5-font-size: var(--pgn-font-size-h5) !default; -$h6-font-size: var(--pgn-font-size-h6) !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-font-size-mobile-h1) !default; -$h2-mobile-font-size: var(--pgn-font-size-mobile-h2) !default; -$h3-mobile-font-size: var(--pgn-font-size-mobile-h3) !default; -$h4-mobile-font-size: var(--pgn-font-size-mobile-h4) !default; -$h5-mobile-font-size: var(--pgn-font-size-mobile-h5) !default; -$h6-mobile-font-size: var(--pgn-font-size-mobile-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; -$headings-margin-bottom: var(--pgn-headings-margin-bottom) !default; -$headings-font-family: var(--pgn-headings-font-family) !default; -$headings-font-weight: var(--pgn-headings-font-weight) !default; -$headings-line-height: var(--pgn-headings-line-height) !default; -$headings-color: var(--pgn-headings-color) !default; +$headings-margin-bottom: var(--pgn-spacing-headings-margin-bottom) !default; +$headings-font-family: var(--pgn-typography-headings-font-family) !default; +$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-display-size-1) !default; -$display2-size: var(--pgn-display-size-2) !default; -$display3-size: var(--pgn-display-size-3) !default; -$display4-size: var(--pgn-display-size-4) !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; -$display-mobile-size: var(--pgn-display-size-mobile) !default; +$display-mobile-size: var(--pgn-typography-display-mobile) !default; -$display1-weight: var(--pgn-display-weight-1) !default; -$display2-weight: var(--pgn-display-weight-2) !default; -$display3-weight: var(--pgn-display-weight-3) !default; -$display4-weight: var(--pgn-display-weight-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-display-line-height-base) !default; -$display-mobile-line-height: var(--pgn-display-line-height-mobile) !default; +$display-line-height: var(--pgn-typography-display-line-height-base) !default; +$display-mobile-line-height: var(--pgn-typography-display-line-height-mobile) !default; -$lead-font-size: var(--pgn-font-size-lead) !default; -$lead-font-weight: var(--pgn-font-weight-lead) !default; +$lead-font-size: var(--pgn-typography-font-size-lead) !default; +$lead-font-weight: var(--pgn-typography-font-weight-lead) !default; -$small-font-size: var(--pgn-font-size-small-base) !default; -$x-small-font-size: var(--pgn-font-size-small-x) !default; +$small-font-size: var(--pgn-typography-font-size-small-base) !default; +$x-small-font-size: var(--pgn-typography-font-size-small-x) !default; -$micro-font-size: .688rem; -$micro-line-height: .938rem; +$micro-font-size: .688rem; +$micro-line-height: .938rem; -$text-muted: var(--pgn-text-muted) !default; +$text-muted: var(--pgn-color-text-muted) !default; -$blockquote-small-color: theme-color("gray", "light-text") !default; -$blockquote-small-font-size: var(--pgn-blockquote-small-font-size) !default; -$blockquote-font-size: var(--pgn-blockquote-font-size) !default; +$blockquote-small-color: theme-color("gray", "light-text") !default; +$blockquote-small-font-size: var(--pgn-typography-blockquote-small-font-size) !default; +$blockquote-font-size: var(--pgn-typography-blockquote-font-size) !default; -$hr-border-color: var(--pgn-hr-border-color) !default; -$hr-border-width: var(--pgn-hr-border-width) !default; +$hr-border-color: var(--pgn-color-hr-border) !default; +$hr-border-width: var(--pgn-size-hr-border-width) !default; -$mark-padding: var(--pgn-mark-padding) !default; +$mark-padding: var(--pgn-spacing-mark-padding) !default; -$dt-font-weight: var(--pgn-dt-font-weight) !default; +$dt-font-weight: var(--pgn-typography-dt-font-weight) !default; -$list-inline-padding: var(--pgn-list-inline-padding) !default; +$list-inline-padding: var(--pgn-spacing-list-inline-padding) !default; -$mark-bg: var(--pgn-mark-bg) !default; +$mark-bg: var(--pgn-color-mark-bg) !default; -$hr-margin-y: var(--pgn-hr-border-margin-y) !default; +$hr-margin-y: var(--pgn-size-hr-border-margin-y) !default; -$label-margin-bottom: .5rem !default; +$label-margin-bottom: .5rem !default; -$table-cell-padding: .75rem !default; -$table-cell-padding-sm: .3rem !default; -$table-caption-color: $text-muted !default; -$table-border-color: $border-color !default; -$table-th-font-weight: null !default; +$table-cell-padding: 75rem !default; +$table-cell-padding-sm: .3rem !default; +$table-caption-color: $text-muted !default; +$table-border-color: $border-color !default; +$table-th-font-weight: null !default; // Z-index master list // @@ -783,8 +783,8 @@ $table-th-font-weight: null !default; // of components dependent on the z-axis and are designed to all work together. $zindex-dropdown: var(--pgn-elevation-dropdown-zindex) !default; -$zindex-sticky: var(--pgn-zindex-sticky) !default; -$zindex-fixed: var(--pgn-zindex-fixed) !default; +$zindex-sticky: var(--pgn-elevation-zindex-sticky) !default; +$zindex-fixed: var(--pgn-elevation-zindex-fixed) !default; $zindex-sheet-backdrop: var(--pgn-elevation-sheet-zindex-backdrop) !default; $zindex-sheet: var(--pgn-elevation-sheet-zindex-main) !default; $zindex-modal-backdrop: var(--pgn-elevation-modal-backdrop-zindex) !default; @@ -796,27 +796,27 @@ $zindex-tooltip: var(--pgn-elevation-tooltip-zindex) !default; // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. -$input-btn-padding-y: var(--pgn-input-btn-padding-y) !default; -$input-btn-padding-x: var(--pgn-input-btn-padding-x) !default; -$input-btn-font-family: var(--pgn-input-btn-font-family) !default; -$input-btn-font-size: var(--pgn-input-btn-font-size-base) !default; -$input-btn-line-height: var(--pgn-input-btn-line-height-base) !default; +$input-btn-padding-y: var(--pgn-spacing-input-btn-padding-y) !default; +$input-btn-padding-x: var(--pgn-spacing-input-btn-padding-x) !default; +$input-btn-font-family: var(--pgn-typography-input-btn-font-family) !default; +$input-btn-font-size: var(--pgn-typography-input-btn-font-size-base) !default; +$input-btn-line-height: var(--pgn-typography-input-btn-line-height-base) !default; -$input-btn-focus-width: var(--pgn-input-btn-focus-width) !default; -$input-btn-focus-color: var(--pgn-input-btn-focus-color) !default; -$input-btn-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow) !default; +$input-btn-focus-width: var(--pgn-size-input-btn-focus-width) !default; +$input-btn-focus-color: var(--pgn-color-input-btn-focus) !default; +$input-btn-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow) !default; -$input-btn-padding-y-sm: var(--pgn-input-btn-padding-sm-y) !default; -$input-btn-padding-x-sm: var(--pgn-input-btn-padding-sm-x) !default; -$input-btn-font-size-sm: var(--pgn-input-btn-font-size-sm) !default; -$input-btn-line-height-sm: var(--pgn-input-btn-line-height-sm) !default; +$input-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y) !default; +$input-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x) !default; +$input-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm) !default; +$input-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm) !default; -$input-btn-padding-y-lg: var(--pgn-input-btn-padding-lg-y) !default; -$input-btn-padding-x-lg: var(--pgn-input-btn-padding-lg-x) !default; -$input-btn-font-size-lg: var(--pgn-input-btn-font-size-lg) !default; -$input-btn-line-height-lg: var(--pgn-input-btn-line-height-lg) !default; +$input-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y) !default; +$input-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x) !default; +$input-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg) !default; +$input-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg) !default; -$input-btn-border-width: var(--pgn-input-btn-border-width) !default; +$input-btn-border-width: var(--pgn-size-input-btn-border-width) !default; // Spinners @@ -844,28 +844,28 @@ $print-body-min-width: map-get($grid-breakpoints, "lg") !default; // List group -$list-group-color: var(--pgn-list-group-color) !default; -$list-group-bg: var(--pgn-list-group-bg-base) !default; -$list-group-border-color: var(--pgn-list-group-border-color) !default; -$list-group-border-width: var(--pgn-list-group-border-width) !default; -$list-group-border-radius: var(--pgn-list-group-border-radius) !default; +$list-group-color: var(--pgn-color-list-group-base) !default; +$list-group-bg: var(--pgn-color-list-group-bg-base) !default; +$list-group-border-color: var(--pgn-color-list-group-border) !default; +$list-group-border-width: var(--pgn-size-list-group-border-width) !default; +$list-group-border-radius: var(--pgn-size-list-group-border-radius) !default; -$list-group-item-padding-y: var(--pgn-list-group-item-padding-y) !default; -$list-group-item-padding-x: var(--pgn-list-group-item-padding-x) !default; +$list-group-item-padding-y: var(--pgn-spacing-list-group-item-padding-y) !default; +$list-group-item-padding-x: var(--pgn-spacing-list-group-item-padding-x) !default; -$list-group-hover-bg: var(--pgn-list-group-bg-hover) !default; -$list-group-active-color: var(--pgn-list-group-active-color-base) !default; -$list-group-active-bg: var(--pgn-list-group-active-bg) !default; -$list-group-active-border-color: var(--pgn-list-group-active-color-border) !default; +$list-group-hover-bg: var(--pgn-color-list-group-bg-hover) !default; +$list-group-active-color: var(--pgn-color-list-group-active-base) !default; +$list-group-active-bg: var(--pgn-color-list-group-active-bg) !default; +$list-group-active-border-color: var(--pgn-color-list-group-active-border) !default; -$list-group-disabled-color: var(--pgn-list-group-disabled-color) !default; -$list-group-disabled-bg: var(--pgn-list-group-disabled-bg) !default; +$list-group-disabled-color: var(--pgn-color-list-group-disabled-base) !default; +$list-group-disabled-bg: var(--pgn-color-list-group-disabled-bg) !default; -$list-group-action-color: var(--pgn-list-group-action-color-base) !default; -$list-group-action-hover-color: var(--pgn-list-group-action-color-hover) !default; +$list-group-action-color: var(--pgn-color-list-group-action-base) !default; +$list-group-action-hover-color: var(--pgn-color-list-group-action-hover) !default; -$list-group-action-active-color: var(--pgn-list-group-action-active-color) !default; -$list-group-action-active-bg: var(--pgn-list-group-action-active-bg) !default; +$list-group-action-active-color: var(--pgn-color-list-group-action-active-base) !default; +$list-group-action-active-bg: var(--pgn-color-list-group-action-active-bg) !default; $text-black-50: var(--pgn-color-text-50-black) !default; $text-white-50: var(--pgn-color-text-50-white) !default; diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css index e76e6379bd..bafbf11790 100644 --- a/scss/core/css/variables.css +++ b/scss/core/css/variables.css @@ -1,140 +1,14 @@ :root { - --pgn-line-height-sm: 1.5; - --pgn-line-height-lg: 1.5; - --pgn-line-height-base: 1.5556; - --pgn-font-weight-lead: null; - --pgn-font-weight-bolder: bolder; - --pgn-font-weight-bold: 700; - --pgn-font-weight-semi-bold: 500; - --pgn-font-weight-normal: 400; - --pgn-font-weight-light: 300; - --pgn-font-weight-lighter: lighter; - --pgn-font-size-mobile-h1: 2.25rem; - --pgn-font-size-h6: .75rem; - --pgn-font-size-h5: .875rem; - --pgn-font-size-h4: 1.125rem; - --pgn-font-size-h3: 1.375rem; - --pgn-font-size-h2: 2rem; - --pgn-font-size-h1: 2.5rem; - --pgn-font-size-small-x: 75%; - --pgn-font-size-small-base: 87.5%; - --pgn-font-size-xs: .75rem; - --pgn-font-size-sm: .875rem; - --pgn-font-size-lg: 1.4063rem; - --pgn-font-size-base: 1.125rem; - --pgn-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --pgn-font-family-serif: serif; - --pgn-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --pgn-spacer-base: 1rem; - --pgn-spacer-0: 0; --pgn-theme-interval: 8%; - --pgn-zindex-fixed: 1030; - --pgn-zindex-sticky: 1020; - --pgn-zindex-2000: 2000; - --pgn-zindex-1800: 1800; - --pgn-zindex-1600: 1600; - --pgn-zindex-1400: 1400; - --pgn-zindex-1200: 1200; - --pgn-zindex-1000: 1000; - --pgn-zindex-800: 800; - --pgn-zindex-600: 600; - --pgn-zindex-400: 400; - --pgn-zindex-200: 200; - --pgn-zindex-0: 0; - --pgn-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15); - --pgn-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); - --pgn-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); - --pgn-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15); - --pgn-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15); - --pgn-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15); - --pgn-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15); - --pgn-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15); - --pgn-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15); - --pgn-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15); - --pgn-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15); - --pgn-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15); - --pgn-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); - --pgn-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15); - --pgn-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15); - --pgn-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15); - --pgn-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15); - --pgn-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15); - --pgn-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15); - --pgn-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15); - --pgn-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); - --pgn-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); - --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); - --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); - --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); - --pgn-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); - --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); - --pgn-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); - --pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); - --pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); - --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); - --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); - --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); - --pgn-display-line-height-mobile: 3.5rem; - --pgn-display-line-height-base: 1; - --pgn-display-size-mobile: 3.25rem; - --pgn-display-size-4: 7.5rem; - --pgn-display-size-3: 5.625rem; - --pgn-display-size-2: 4.875rem; - --pgn-display-size-1: 3.75rem; - --pgn-breakpoint-xxl: 1400px; - --pgn-breakpoint-xl: 1200px; - --pgn-breakpoint-lg: 992px; - --pgn-breakpoint-md: 768px; - --pgn-breakpoint-sm: 576px; - --pgn-breakpoint-xs: 0; - --pgn-mark-bg: #FFF243FF; - --pgn-mark-padding: .2em; - --pgn-paragraph-margin-bottom: 1rem; - --pgn-list-group-item-padding-x: 1.25rem; - --pgn-list-group-item-padding-y: .75rem; - --pgn-list-group-color: null; - --pgn-list-inline-padding: .5rem; - --pgn-link-emphasized-hover-darken-percentage: 15%; - --pgn-link-brand-inline-hover-decoration: underline; - --pgn-link-brand-inline-decoration: underline; - --pgn-link-brand-hover-decoration: underline; - --pgn-link-brand-decoration: none; - --pgn-link-muted-inline-hover-decoration: underline; - --pgn-link-muted-inline-decoration: underline; - --pgn-link-muted-hover-decoration: underline; - --pgn-link-muted-decoration: none; - --pgn-link-inline-hover-decoration: underline; - --pgn-link-inline-decoration: underline; - --pgn-link-hover-decoration: underline; - --pgn-link-decoration: none; - --pgn-input-btn-focus-width: 1px; - --pgn-input-btn-line-height-sm: 1.4286; - --pgn-input-btn-line-height-base: 1.3333; - --pgn-input-btn-font-size-lg: 1.325rem; - --pgn-input-btn-font-size-sm: .875rem; - --pgn-input-btn-font-size-base: 1.125rem; - --pgn-input-btn-font-family: inherit; - --pgn-input-btn-padding-lg-x: 1.25rem; - --pgn-input-btn-padding-lg-y: .6875rem; - --pgn-input-btn-padding-sm-x: .75rem; - --pgn-input-btn-padding-sm-y: .4375rem; - --pgn-input-btn-padding-x: 1rem; - --pgn-input-btn-padding-y: .5625rem; - --pgn-headings-line-height: 1.25; - --pgn-headings-font-family: inherit; - --pgn-headings-margin-bottom: .5rem; - --pgn-caret-spacing: .255em; - --pgn-caret-vertical-align: .255em; - --pgn-caret-width: .3em; + --pgn-other-tooltip-opacity: 1; + --pgn-other-search-field-disabled-opacity: .3; + --pgn-other-modal-opacity: .5; + --pgn-other-link-emphasized-hover-darken-percentage: 15%; + --pgn-other-form-feedback-tooltip-opacity: .9; --pgn-other-form-control-range-track-cursor: pointer; --pgn-other-form-control-cursor: auto; - --pgn-btn-transition: null; - --pgn-btn-block-spacing-y: .5rem; - --pgn-btn-disabled-opacity: .65; - --pgn-btn-focus-gap: 1px; - --pgn-btn-focus-width: 2px; - --pgn-btn-box-shadow-active: none; - --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); + --pgn-other-chip-opacity-disabled: .3; + --pgn-other-btn-disabled-opacity: .65; --pgn-transition-collapse: height .35s ease; --pgn-transition-fade: opacity .15s linear; --pgn-transition-base: all .2s ease-in-out; @@ -145,7 +19,54 @@ --pgn-transition-carousel-control: opacity .15s ease; --pgn-transition-carousel-indicator: opacity .6s ease; --pgn-transition-carousel-duration: .6s; + --pgn-transition-btn: none; --pgn-transition-badge: none; + --pgn-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-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-tooltip-zindex: 1070; --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-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15); @@ -158,7 +79,6 @@ --pgn-elevation-popover-zindex: 1060; --pgn-elevation-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); --pgn-elevation-modal-zindex: 1050; - --pgn-elevation-modal-backdrop-opacity: .5; --pgn-elevation-modal-backdrop-zindex: 1040; --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-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); @@ -173,19 +93,75 @@ --pgn-elevation-dropdown-zindex: 1000; --pgn-elevation-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175); --pgn-elevation-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25); + --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-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15); + --pgn-typography-line-height-sm: 1.5; + --pgn-typography-line-height-lg: 1.5; + --pgn-typography-line-height-base: 1.5556; + --pgn-typography-font-weight-lead: inherit; + --pgn-typography-font-weight-bolder: bolder; + --pgn-typography-font-weight-bold: 700; + --pgn-typography-font-weight-semi-bold: 500; + --pgn-typography-font-weight-normal: 400; + --pgn-typography-font-weight-light: 300; + --pgn-typography-font-weight-lighter: lighter; + --pgn-typography-font-size-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-display-mobile: 3.25rem; + --pgn-typography-display-line-height-mobile: 3.5rem; + --pgn-typography-display-line-height-base: 1; + --pgn-typography-display-4: 7.5rem; + --pgn-typography-display-3: 5.625rem; + --pgn-typography-display-2: 4.875rem; + --pgn-typography-display-1: 3.75rem; --pgn-typography-toast-font-size: .875rem; - --pgn-typography-search-field-line-height: 1.5rem; --pgn-typography-pagination-line-height: 1.5rem; --pgn-typography-pagination-font-size-sm: .875rem; --pgn-typography-nav-link-font-weight: 500; --pgn-typography-image-figure-caption-font-size: 90%; + --pgn-typography-link-decoration-brand-inline-hover: underline; + --pgn-typography-link-decoration-brand-inline-base: underline; + --pgn-typography-link-decoration-brand-hover: underline; + --pgn-typography-link-decoration-brand-base: none; + --pgn-typography-link-decoration-muted-inline-hover: underline; + --pgn-typography-link-decoration-muted-inline-base: underline; + --pgn-typography-link-decoration-muted-hover: underline; + --pgn-typography-link-decoration-muted-base: none; + --pgn-typography-link-decoration-inline-hover: underline; + --pgn-typography-link-decoration-inline-base: underline; + --pgn-typography-link-decoration-hover: underline; + --pgn-typography-link-decoration-base: none; + --pgn-typography-input-btn-line-height-sm: 1.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.25; + --pgn-typography-headings-font-family: inherit; --pgn-typography-code-font-size: 87.5%; - --pgn-typography-breadcrumb-font-size: null; + --pgn-typography-breadcrumb-font-size: inherit; --pgn-typography-badge-font-size: 75%; --pgn-typography-alert-line-height: 1.5rem; --pgn-typography-alert-font-size: .875rem; + --pgn-spacing-spacer-base: 1rem; + --pgn-spacing-spacer-0: 0; --pgn-spacing-tooltip-margin: 0; --pgn-spacing-tooltip-padding-x: .5rem; --pgn-spacing-tooltip-padding-y: .5rem; @@ -202,9 +178,7 @@ --pgn-spacing-popover-icon-margin-right: .5rem; --pgn-spacing-popover-header-padding-x: 1rem; --pgn-spacing-popover-header-padding-y: .5rem; - --pgn-spacing-pagination-margin-y: .5rem; --pgn-spacing-pagination-margin-x: .5rem; - --pgn-spacing-pagination-padding-icon: .5rem; --pgn-spacing-pagination-padding-x-lg: 1.5rem; --pgn-spacing-pagination-padding-x-sm: .6rem; --pgn-spacing-pagination-padding-x-base: 1rem; @@ -222,6 +196,20 @@ --pgn-spacing-modal-inner-padding-bottom: .7rem; --pgn-spacing-modal-inner-padding-base: 1.5rem; --pgn-spacing-image-thumbnail-padding: .25rem; + --pgn-spacing-mark-padding: .2em; + --pgn-spacing-paragraph-margin-bottom: 1rem; + --pgn-spacing-list-group-item-padding-x: 1.25rem; + --pgn-spacing-list-group-item-padding-y: .75rem; + --pgn-spacing-list-inline-padding: .5rem; + --pgn-spacing-input-btn-padding-lg-x: 1.25rem; + --pgn-spacing-input-btn-padding-lg-y: .6875rem; + --pgn-spacing-input-btn-padding-sm-x: .75rem; + --pgn-spacing-input-btn-padding-sm-y: .4375rem; + --pgn-spacing-input-btn-padding-x: 1rem; + --pgn-spacing-input-btn-padding-y: .5625rem; + --pgn-spacing-headings-margin-bottom: .5rem; + --pgn-spacing-caret-vertical-align: .255em; + --pgn-spacing-caret-base: .255em; --pgn-spacing-form-control-select-icon-padding: .5625rem; --pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem; --pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem; @@ -280,6 +268,8 @@ --pgn-spacing-card-margin-group: 12px; --pgn-spacing-card-spacer-y: .75rem; --pgn-spacing-card-spacer-x: 1.25rem; + --pgn-spacing-btn-focus-gap: 1px; + --pgn-spacing-btn-block-spacing-y: .5rem; --pgn-spacing-bubble-expandable-padding-x: .25rem; --pgn-spacing-bubble-expandable-padding-y: 0; --pgn-spacing-breadcrumb-margin-left: .5rem; @@ -301,6 +291,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: 0; --pgn-size-tooltip-arrow-width: .8rem; --pgn-size-tooltip-arrow-height: .4rem; --pgn-size-tooltip-max-width: 200px; @@ -316,7 +312,6 @@ --pgn-size-spinner-base-width: 2rem; --pgn-size-search-field-border-radius: 0; --pgn-size-search-field-border-width-focus: .3125rem; - --pgn-size-search-field-border-width-interaction: .125rem; --pgn-size-search-field-border-width-base: .0625rem; --pgn-size-progress-bar-threshold-circle: .5625rem; --pgn-size-progress-bar-border-radius: 0; @@ -341,8 +336,6 @@ --pgn-size-pagination-secondary-height-base: 2.75rem; --pgn-size-pagination-icon-height: 2.25rem; --pgn-size-pagination-icon-width: 2.25rem; - --pgn-size-pagination-icon-sm: 1rem; - --pgn-size-pagination-icon-base: 1.375rem; --pgn-size-navbar-nav-scroll-max-height: 75vh; --pgn-size-nav-tabs-border-radius: 0; --pgn-size-nav-tabs-border-width: 2px; @@ -357,6 +350,8 @@ --pgn-size-icon-md: 1.5rem; --pgn-size-icon-sm: 1.25rem; --pgn-size-icon-inline: .8em; + --pgn-size-input-btn-focus-width: 1px; + --pgn-size-caret-width: .3em; --pgn-size-form-border-radius-width: .125rem; --pgn-size-form-border-radius-check-focus: .0625rem; --pgn-size-form-autosuggest-border-width: .125rem; @@ -401,7 +396,10 @@ --pgn-size-card-image-horizontal-width-max: 240px; --pgn-size-card-border-radius-logo: .25rem; --pgn-size-card-border-radius-image: .3125rem; + --pgn-size-btn-focus-width: 2px; --pgn-size-breadcrumb-border-width-focus: .0625rem; + --pgn-size-breadcrumb-border-axis-y-focus: .5rem; + --pgn-size-breadcrumb-border-axis-x-focus: .25rem; --pgn-size-breadcrumb-border-radius-focus: .125rem; --pgn-size-badge-border-radius-pill: 10rem; --pgn-size-badge-border-radius-base: .25rem; @@ -418,10 +416,10 @@ --pgn-size-annotation-max-width: 18.75rem; --pgn-size-annotation-arrow-border-width: .5rem; --pgn-size-alert-border-width: 0; - --pgn-size-border-radius-sm: .25rem; - --pgn-size-border-radius-lg: .425rem; - --pgn-size-border-radius-base: .375rem; - --pgn-size-border-width: 0.063rem; + --pgn-size-border-radius-sm: 4px; + --pgn-size-border-radius-lg: 7px; + --pgn-size-border-radius-base: 6px; + --pgn-size-border-width: 1px; --pgn-color-dark-base: #273F2FFF; --pgn-color-light-base: #E1DDDBFF; --pgn-color-brand-base: #9D0054FF; @@ -444,9 +442,7 @@ --pgn-color-blue: #23419FFF; --pgn-color-black: #000000FF; --pgn-color-white: #FFFFFFFF; - --pgn-color-tooltip-opacity: #000000FF; --pgn-color-toast-base: #000000FF; - --pgn-color-search-field-disabled-opacity: #000000FF; --pgn-color-progress-bar-bg: #00000000; --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000; --pgn-color-popover-border: #00000033; @@ -454,11 +450,11 @@ --pgn-color-menu-border-active: #00000000; --pgn-color-menu-border-base: #00000000; --pgn-color-icon-button-bg: #00000000; - --pgn-color-form-feedback-tooltip-opacity: #000000FF; + --pgn-color-mark-bg: #FFF243FF; + --pgn-color-list-group-base: #000000FF; --pgn-color-form-control-select-bg-size: #000000FF; --pgn-color-form-control-label-base: #000000FF; --pgn-color-code-base: #E83E8CFF; - --pgn-color-chip-opacity-disabled: #000000FF; --pgn-color-carousel-control-opacity-hover: #000000FF; --pgn-color-carousel-control-opacity-base: #000000FF; --pgn-color-card-base: #000000FF; @@ -488,117 +484,102 @@ --pgn-color-btn-border-tertiary: #00000000; --pgn-color-btn-bg-inverse-tertiary: #00000000; --pgn-color-btn-bg-tertiary: #00000000; - --pgn-font-weight-base: var(--pgn-font-weight-normal); - --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25); - --pgn-font-size-mobile-h6: var(--pgn-font-size-h6); - --pgn-font-size-mobile-h5: var(--pgn-font-size-h5); - --pgn-font-size-mobile-h4: var(--pgn-font-size-h4); - --pgn-font-size-mobile-h3: var(--pgn-font-size-h3); - --pgn-font-size-mobile-h2: var(--pgn-font-size-h2); - --pgn-font-family-base: var(--pgn-font-family-sans-serif); - --pgn-spacer-5-5: calc(var(--pgn-spacer-base) * 4rem); - --pgn-spacer-4-5: calc(var(--pgn-spacer-base) * 2rem); - --pgn-spacer-3-5: calc(var(--pgn-spacer-base) * 1.25rem); - --pgn-spacer-2-5: calc(var(--pgn-spacer-base) * .75rem); - --pgn-spacer-1-5: calc(var(--pgn-spacer-base) * .375rem); - --pgn-spacer-6: calc(var(--pgn-spacer-base) * 5rem); - --pgn-spacer-5: calc(var(--pgn-spacer-base) * 3rem); - --pgn-spacer-4: calc(var(--pgn-spacer-base) * 1.5rem); - --pgn-spacer-3: var(--pgn-spacer-base); - --pgn-spacer-2: calc(var(--pgn-spacer-base) * .5rem); - --pgn-spacer-1: calc(var(--pgn-spacer-base) * .25rem); - --pgn-display-weight-4: var(--pgn-font-weight-bold); - --pgn-display-weight-3: var(--pgn-font-weight-bold); - --pgn-display-weight-2: var(--pgn-font-weight-bold); - --pgn-display-weight-1: var(--pgn-font-weight-bold); - --pgn-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25); - --pgn-blockquote-small-font-size: var(--pgn-font-size-small-base); - --pgn-list-group-action-active-bg: var(--pgn-color-gray-200); - --pgn-list-group-action-color-base: var(--pgn-color-gray-700); - --pgn-list-group-disabled-color: var(--pgn-color-gray-600); - --pgn-list-group-border-radius: var(--pgn-size-border-radius-base); - --pgn-list-group-border-width: var(--pgn-size-border-width); - --pgn-list-group-border-color: #00000020; - --pgn-list-group-bg-hover: var(--pgn-color-gray-100); - --pgn-dt-font-weight: var(--pgn-font-weight-bold); - --pgn-input-btn-border-width: var(--pgn-size-border-width); - --pgn-input-btn-focus-box-shadow: 0 0 0 var(--pgn-input-btn-focus-width) var(--pgn-input-btn-focus-color); - --pgn-input-btn-line-height-lg: var(--pgn-line-height-lg); - --pgn-hr-border-margin-y: var(--pgn-spacer-base); - --pgn-hr-border-width: var(--pgn-size-border-width); - --pgn-hr-border-color: #0000001A; - --pgn-headings-color: var(--pgn-color-black); - --pgn-headings-font-weight: var(--pgn-font-weight-bold); - --pgn-body-color: var(--pgn-color-gray-700); - --pgn-btn-border-radius-sm: var(--pgn-size-border-radius-sm); - --pgn-btn-border-radius-lg: var(--pgn-size-border-radius-lg); - --pgn-btn-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-btn-line-height-sm: var(--pgn-input-btn-line-height-sm); - --pgn-btn-line-height-base: var(--pgn-input-btn-line-height-base); - --pgn-btn-font-weight: var(--pgn-font-weight-normal); - --pgn-btn-font-size-lg: var(--pgn-input-btn-font-size-lg); - --pgn-btn-font-size-sm: var(--pgn-input-btn-font-size-sm); - --pgn-btn-font-size-base: var(--pgn-input-btn-font-size-base); - --pgn-btn-font-family: var(--pgn-input-btn-font-family); - --pgn-btn-padding-x-sm: var(--pgn-input-btn-padding-sm-x); - --pgn-btn-padding-x-lg: var(--pgn-input-btn-padding-lg-x); - --pgn-btn-padding-x-base: var(--pgn-input-btn-padding-x); - --pgn-btn-padding-y-sm: var(--pgn-input-btn-padding-sm-y); - --pgn-btn-padding-y-lg: var(--pgn-input-btn-padding-lg-y); - --pgn-btn-padding-y-base: var(--pgn-input-btn-padding-y); + --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; --pgn-elevation-scrollable-body-box-shadow: #0000008C; + --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus); --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base); --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base); - --pgn-elevation-data-table-box-shadow: var(--pgn-box-shadow-sm); + --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm); --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white); - --pgn-typography-tooltip-font-size: var(--pgn-font-size-sm); - --pgn-typography-tabs-notification-font-size: var(--pgn-font-size-xs); - --pgn-typography-progress-bar-font-size: calc(var(--pgn-font-size-base) * .75); - --pgn-typography-popover-font-size: var(--pgn-font-size-sm); - --pgn-typography-navbar-toggler-font-size: var(--pgn-font-size-lg); - --pgn-typography-navbar-nav-link-height: calc(var(--pgn-font-size-base) * var(--pgn-line-height-base) + .5rem * 2); - --pgn-typography-navbar-brand-font-size: var(--pgn-font-size-lg); - --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-line-height-base); - --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-font-size-sm); - --pgn-typography-form-feedback-font-size: var(--pgn-font-size-small-base); - --pgn-typography-form-input-line-height-sm: var(--pgn-input-btn-line-height-sm); - --pgn-typography-form-input-line-height-base: var(--pgn-input-btn-line-height-base); - --pgn-typography-form-input-font-size-lg: var(--pgn-input-btn-font-size-lg); - --pgn-typography-form-input-font-size-sm: var(--pgn-input-btn-font-size-sm); - --pgn-typography-form-input-font-size-base: var(--pgn-input-btn-font-size-base); - --pgn-typography-form-input-font-family: var(--pgn-input-btn-font-family); - --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-font-size-small-x); - --pgn-typography-dropdown-font-size: var(--pgn-font-size-base); - --pgn-typography-code-kbd-nested-font-weight: var(--pgn-font-weight-bold); + --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); + --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25); + --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6); + --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5); + --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4); + --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3); + --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2); + --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); + --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold); + --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold); + --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold); + --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold); + --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs); + --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75); + --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg); + --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2); + --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg); + --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25); + --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base); + --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold); + --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg); + --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold); + --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base); + --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base); + --pgn-typography-form-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-size-lg: var(--pgn-typography-input-btn-font-size-lg); + --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); + --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base); + --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family); + --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-small-x); + --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base); + --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold); --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size); - --pgn-typography-close-button-font-weight: var(--pgn-font-weight-bold); - --pgn-typography-close-button-font-size: calc(var(--pgn-font-size-base) * 1.5); - --pgn-typography-footer-text-font-size: var(--pgn-font-size-small-x); - --pgn-typography-badge-font-weight: var(--pgn-font-weight-bold); - --pgn-typography-annotation-line-height: var(--pgn-line-height-sm); - --pgn-typography-annotation-font-size: var(--pgn-font-size-sm); - --pgn-typography-alert-font-weight-link: var(--pgn-font-weight-normal); + --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-sm: var(--pgn-typography-input-btn-line-height-sm); + --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base); + --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal); + --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg); + --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); + --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base); + --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family); + --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold); + --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm); + --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); + --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4rem); + --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2rem); + --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25rem); + --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75rem); + --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375rem); + --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5rem); + --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3rem); + --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5rem); + --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); + --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5rem); + --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25rem); --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x); --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y); - --pgn-spacing-navbar-padding-x-base: var(--pgn-spacer-base); - --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacer-base) / 2); - --pgn-spacing-nav-divider-margin-y: calc(var(--pgn-spacer-base) / 2); + --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base); + --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2); + --pgn-spacing-nav-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2); --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem; --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem; --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); - --pgn-spacing-form-input-padding-x-lg: var(--pgn-input-btn-padding-lg-x); - --pgn-spacing-form-input-padding-x-sm: var(--pgn-input-btn-padding-sm-x); - --pgn-spacing-form-input-padding-x-base: var(--pgn-input-btn-padding-x); - --pgn-spacing-form-input-padding-y-lg: var(--pgn-input-btn-padding-lg-y); - --pgn-spacing-form-input-padding-y-sm: var(--pgn-input-btn-padding-sm-y); - --pgn-spacing-form-input-padding-y-base: var(--pgn-input-btn-padding-y); - --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacer-base) / 2); + --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x); + --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x); + --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x); + --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y); + --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y); + --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y); + --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2); --pgn-spacing-dropdown-padding-header: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-item); --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x); --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y); --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y); --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group); --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group); + --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-size-tooltip-border-radius: var(--pgn-size-border-radius-base); --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width); --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width); @@ -614,7 +595,12 @@ --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg); --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-line-height-base) + .1em); + --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) + .1em); + --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-list-group-border-width: var(--pgn-size-border-width); + --pgn-size-input-btn-border-width: var(--pgn-size-border-width); + --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base); + --pgn-size-hr-border-width: var(--pgn-size-border-width); --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base); --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width); --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width); @@ -633,8 +619,11 @@ --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max); --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base); --pgn-size-card-border-width: var(--pgn-size-border-width); + --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm); + --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg); + --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base); --pgn-size-breadcrumb-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-badge-focus-width: var(--pgn-input-btn-focus-width); + --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width); --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); --pgn-color-dark-900: #1B2C21FF; --pgn-color-dark-800: #1D2F23FF; @@ -697,7 +686,7 @@ --pgn-color-product-tour-checkpoint-box-shadow: #0000004D; --pgn-color-product-tour-checkpoint-body: var(--pgn-color-gray-700); --pgn-color-popover-arrow-outer: #0000000D; - --pgn-color-popover-header-border-bottom-dark: #808080FF; + --pgn-color-popover-header-border-bottom-dark: #F2F2F2FF; --pgn-color-popover-header-bg-dark: #808080FF; --pgn-color-popover-header-bg: var(--pgn-color-white); --pgn-color-pagination-focus-text: var(--pgn-color-black); @@ -730,6 +719,14 @@ --pgn-color-icon-button-brand: var(--pgn-color-brand-base); --pgn-color-icon-button-primary: var(--pgn-color-primary-base); --pgn-color-icon-button-accent: var(--pgn-color-white); + --pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200); + --pgn-color-list-group-action-base: var(--pgn-color-gray-700); + --pgn-color-list-group-disabled-base: var(--pgn-color-gray-600); + --pgn-color-list-group-border: #00000020; + --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100); + --pgn-color-hr-border: #0000001A; + --pgn-color-headings-base: var(--pgn-color-black); + --pgn-color-body-base: var(--pgn-color-gray-700); --pgn-color-form-control-range-track-bg: var(--pgn-color-gray-300); --pgn-color-form-control-select-bg-disabled: var(--pgn-color-gray-100); --pgn-color-form-control-indicator-border: var(--pgn-color-gray-700); @@ -840,32 +837,20 @@ --pgn-color-theme-hover-gray: var(--pgn-color-gray-700); --pgn-color-theme-focus-gray: var(--pgn-color-gray-300); --pgn-color-theme-border-gray: var(--pgn-color-gray-200); - --pgn-color-theme-background-gray: var(--pgn-color-gray-100); + --pgn-color-theme-bg-gray: var(--pgn-color-gray-100); --pgn-color-border: var(--pgn-color-gray-200); --pgn-color-active: var(--pgn-color-white); --pgn-color-text-50-white: #FFFFFF80; --pgn-color-text-50-black: #00000080; - --pgn-color-background-base: var(--pgn-color-white); + --pgn-color-bg-base: var(--pgn-color-white); --pgn-border-color-nav-tabs-link-border-active: transparent transparent var(--pgn-color-primary-500); - --pgn-text-muted: var(--pgn-color-gray-500); - --pgn-list-group-action-active-color: var(--pgn-body-color); - --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base); - --pgn-list-group-active-color-base: var(--pgn-color-active); - --pgn-list-group-bg-base: var(--pgn-color-background-base); - --pgn-link-brand-inline-color: var(--pgn-color-brand-500); - --pgn-link-brand-color: var(--pgn-color-brand-500); - --pgn-link-muted-inline-color: var(--pgn-color-primary-500); - --pgn-link-muted-color: var(--pgn-color-primary-500); - --pgn-body-bg: var(--pgn-color-background-base); --pgn-content-navbar-toggler-light-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2300000080' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --pgn-content-navbar-toggler-dark-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23FFFFFF80' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --pgn-content-carousel-control-bg-next-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"); --pgn-content-carousel-control-bg-prev-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"); - --pgn-btn-border-width: var(--pgn-input-btn-border-width); - --pgn-btn-line-height-lg: var(--pgn-input-btn-line-height-lg); - --pgn-elevation-pagination-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow); - --pgn-elevation-form-control-select-border-focus: var(--pgn-input-btn-focus-box-shadow); - --pgn-elevation-form-input-focus: var(--pgn-input-btn-focus-box-shadow); + --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow); + --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow); + --pgn-elevation-form-input-focus: var(--pgn-elevation-input-btn-focus-box-shadow); --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); @@ -873,8 +858,9 @@ --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-input-btn-line-height-lg); - --pgn-typography-form-input-font-weight: var(--pgn-font-weight-base); + --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); + --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base); + --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2); --pgn-spacing-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); @@ -884,18 +870,19 @@ --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-alert-actions-gap: var(--pgn-spacer-3); + --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3); --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2); - --pgn-size-navbar-toggler-border-radius: var(--pgn-btn-border-radius-base); - --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-line-height-base)); + --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base); + --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base)); --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base); - --pgn-size-form-input-width-border: var(--pgn-input-btn-border-width); + --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width); --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-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-input-btn-padding-sm-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-btn-border-width: var(--pgn-size-input-btn-border-width); --pgn-color-danger-900: #892029FF; --pgn-color-danger-800: #92222CFF; --pgn-color-danger-700: #9C242EFF; @@ -950,11 +937,11 @@ --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-500); --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-500); --pgn-color-product-tour-checkpoint-bg: var(--pgn-color-light-300); - --pgn-color-popover-body: var(--pgn-body-color); - --pgn-color-popover-header-text: var(--pgn-headings-color); - --pgn-color-popover-bg: var(--pgn-color-background-base); + --pgn-color-popover-body: var(--pgn-color-body-base); + --pgn-color-popover-header-text: var(--pgn-color-headings-base); + --pgn-color-popover-bg: var(--pgn-color-bg-base); --pgn-color-pagination-focus-base: var(--pgn-color-primary-500); - --pgn-color-pagination-bg-base: var(--pgn-color-background-base); + --pgn-color-pagination-bg-base: var(--pgn-color-bg-base); --pgn-color-pagination-text-active: var(--pgn-color-active); --pgn-color-navbar-light-brand-hover: var(--pgn-color-navbar-light-active); --pgn-color-navbar-light-brand-text: var(--pgn-color-navbar-light-active); @@ -963,12 +950,22 @@ --pgn-color-nav-tabs-link-active-text: var(--pgn-color-primary-500); --pgn-color-nav-tabs-link-hover-bg: var(--pgn-color-light-400); --pgn-color-nav-tabs-border: var(--pgn-color-light-400); - --pgn-color-modal-content-bg: var(--pgn-color-background-base); + --pgn-color-modal-content-bg: var(--pgn-color-bg-base); --pgn-color-image-figure-caption: var(--pgn-color-gray-500); --pgn-color-icon-button-danger: var(--pgn-color-danger-base); --pgn-color-icon-button-warning: var(--pgn-color-warning-base); --pgn-color-icon-button-success: var(--pgn-color-success-base); --pgn-color-icon-button-secondary: var(--pgn-color-secondary-base); + --pgn-color-text-muted: var(--pgn-color-gray-500); + --pgn-color-list-group-action-active-base: var(--pgn-color-body-base); + --pgn-color-list-group-action-hover: var(--pgn-color-list-group-action-base); + --pgn-color-list-group-active-base: var(--pgn-color-active); + --pgn-color-list-group-bg-base: var(--pgn-color-bg-base); + --pgn-color-link-brand-inline-base: var(--pgn-color-brand-500); + --pgn-color-link-brand-base: var(--pgn-color-brand-500); + --pgn-color-link-muted-inline-base: var(--pgn-color-primary-500); + --pgn-color-link-muted-base: var(--pgn-color-primary-500); + --pgn-color-body-bg: var(--pgn-color-bg-base); --pgn-color-form-feedback-invalid: var(--pgn-color-danger-base); --pgn-color-form-feedback-valid: var(--pgn-color-success-base); --pgn-color-form-control-file-button-bg: var(--pgn-color-form-input-group-addon-bg); @@ -983,23 +980,23 @@ --pgn-color-form-control-indicator-bg-disabled: var(--pgn-color-form-input-bg-disabled); --pgn-color-form-input-focus-base: var(--pgn-color-form-input-base); --pgn-color-form-input-group-addon-base: var(--pgn-color-form-input-base); - --pgn-color-form-input-bg-base: var(--pgn-color-background-base); + --pgn-color-form-input-bg-base: var(--pgn-color-bg-base); --pgn-color-form-input-border: var(--pgn-color-gray-500); - --pgn-color-form-input-plaintext: var(--pgn-body-color); + --pgn-color-form-input-plaintext: var(--pgn-color-body-base); --pgn-color-form-input-placeholder: var(--pgn-color-gray-500); --pgn-color-dropzone-border-active: var(--pgn-color-primary-500); --pgn-color-dropzone-border-base: var(--pgn-color-gray-500); --pgn-color-dropzone-restriction-msg: var(--pgn-color-gray-500); --pgn-color-dropdown-link-active-base: var(--pgn-color-active); --pgn-color-dropdown-link-hover-bg: var(--pgn-color-light-300); - --pgn-color-dropdown-bg: var(--pgn-color-background-base); + --pgn-color-dropdown-bg: var(--pgn-color-bg-base); --pgn-color-dropdown-header: var(--pgn-color-gray-500); - --pgn-color-dropdown-text: var(--pgn-body-color); - --pgn-color-data-table-bg-base: var(--pgn-color-background-base); + --pgn-color-dropdown-text: var(--pgn-color-body-base); + --pgn-color-data-table-bg-base: var(--pgn-color-bg-base); --pgn-color-chip-bg-dark: var(--pgn-color-dark-200); --pgn-color-chip-bg-light: var(--pgn-color-light-500); --pgn-color-card-divider-bg: var(--pgn-color-light-400); - --pgn-color-card-bg: var(--pgn-color-background-base); + --pgn-color-card-bg: var(--pgn-color-bg-base); --pgn-color-btn-active-bg-inverse-tertiary: var(--pgn-color-btn-hover-bg-inverse-tertiary); --pgn-color-btn-active-bg-tertiary: var(--pgn-color-light-500); --pgn-color-btn-active-text-inverse-primary: #051627FF; @@ -1106,29 +1103,18 @@ --pgn-color-theme-border-light: var(--pgn-color-light-200); --pgn-color-theme-border-brand: var(--pgn-color-brand-200); --pgn-color-theme-border-primary: var(--pgn-color-primary-200); - --pgn-color-theme-background-dark: var(--pgn-color-dark-100); - --pgn-color-theme-background-light: var(--pgn-color-light-100); - --pgn-color-theme-background-brand: var(--pgn-color-brand-100); - --pgn-color-theme-background-primary: var(--pgn-color-primary-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-brand: var(--pgn-color-brand-100); + --pgn-color-theme-bg-primary: var(--pgn-color-primary-100); --pgn-color-input-focus: var(--pgn-color-primary-500); --pgn-color-disabled: var(--pgn-color-gray-500); - --pgn-color-background-active: var(--pgn-color-primary-500); + --pgn-color-bg-active: var(--pgn-color-primary-500); --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-border); - --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); - --pgn-list-group-active-bg: var(--pgn-color-background-active); - --pgn-link-brand-inline-hover-color: #51002BFF; - --pgn-link-brand-inline-decoration-color: #9D00544D; - --pgn-link-brand-hover-color: #51002BFF; - --pgn-link-muted-inline-hover-color: #020911FF; - --pgn-link-muted-inline-decoration-color: #0A30554D; - --pgn-link-muted-hover-color: #020911FF; - --pgn-link-inline-color: var(--pgn-color-info-500); - --pgn-input-btn-focus-color: var(--pgn-color-input-focus); --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,'); --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e"); - --pgn-btn-disabled-link-color: var(--pgn-color-disabled); --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus); - --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-body-bg), var(--pgn-size-form-input-width-focus); + --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus); --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight); --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight); --pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)); @@ -1141,7 +1127,7 @@ --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm); --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base); --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2); - --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border)); + --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-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg); --pgn-color-popover-danger-icon: var(--pgn-color-warning-500); --pgn-color-popover-danger-bg: var(--pgn-color-danger-100); @@ -1150,21 +1136,30 @@ --pgn-color-popover-success-icon: var(--pgn-color-success-500); --pgn-color-popover-success-bg: var(--pgn-color-success-100); --pgn-color-popover-arrow-base: var(--pgn-color-popover-bg); - --pgn-color-pagination-bg-active: var(--pgn-color-background-active); + --pgn-color-pagination-bg-active: var(--pgn-color-bg-active); --pgn-color-pagination-text-disabled: var(--pgn-color-disabled); --pgn-color-navbar-dark-brand-hover: var(--pgn-color-navbar-dark-active); --pgn-color-navbar-dark-brand-text: var(--pgn-color-navbar-dark-active); - --pgn-color-nav-pills-link-active-bg: var(--pgn-color-background-active); - --pgn-color-nav-tabs-link-active-bg: var(--pgn-body-bg); + --pgn-color-nav-pills-link-active-bg: var(--pgn-color-bg-active); + --pgn-color-nav-tabs-link-active-bg: var(--pgn-color-body-bg); --pgn-color-menu-bg-active: var(--pgn-color-btn-active-bg-tertiary); - --pgn-color-image-thumbnail-bg: var(--pgn-body-bg); + --pgn-color-image-thumbnail-bg: var(--pgn-color-body-bg); + --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base); + --pgn-color-list-group-active-bg: var(--pgn-color-bg-active); + --pgn-color-link-brand-inline-hover-base: #51002BFF; + --pgn-color-link-brand-inline-decoration: #9D00544D; + --pgn-color-link-brand-hover: #51002BFF; + --pgn-color-link-muted-inline-hover-base: #020911FF; + --pgn-color-link-muted-inline-decoration: #0A30554D; + --pgn-color-link-muted-hover: #020911FF; + --pgn-color-link-inline-base: var(--pgn-color-info-500); + --pgn-color-link-base: var(--pgn-color-info-500); --pgn-color-form-feedback-checked-invalid: #D64D59FF; --pgn-color-form-feedback-checked-valid: #1FAD6FFF; --pgn-color-form-feedback-tooltip-box-shadow-focus-invalid: #C32D3A40; --pgn-color-form-feedback-tooltip-box-shadow-focus-valid: #17825340; --pgn-color-form-feedback-tooltip-bg-invalid: #C32D3AE6; --pgn-color-form-feedback-tooltip-bg-valid: #178253E6; - --pgn-color-form-feedback-tooltip-invalid: #FFFFFFFF; --pgn-color-form-feedback-tooltip-valid: #FFFFFFFF; --pgn-color-form-feedback-icon-invalid: var(--pgn-color-form-feedback-invalid); --pgn-color-form-feedback-icon-valid: var(--pgn-color-form-feedback-valid); @@ -1173,16 +1168,16 @@ --pgn-color-form-control-file-bg-base: var(--pgn-color-form-input-bg-base); --pgn-color-form-control-range-thumb-bg-active: #000000FF; --pgn-color-form-control-range-thumb-bg-disabled: var(--pgn-color-disabled); - --pgn-color-form-control-range-thumb-bg-base: var(--pgn-color-background-active); + --pgn-color-form-control-range-thumb-bg-base: var(--pgn-color-bg-active); --pgn-color-form-control-select-border-base: var(--pgn-color-form-input-border); --pgn-color-form-control-select-bg-base: var(--pgn-color-form-input-bg-base); --pgn-color-form-control-select-disabled: var(--pgn-color-disabled); - --pgn-color-form-control-checkbox-indicator-indeterminate-bg: var(--pgn-color-background-active); + --pgn-color-form-control-checkbox-indicator-indeterminate-bg: var(--pgn-color-bg-active); --pgn-color-form-control-label-floating-text: #FFFFFF1A; --pgn-color-form-control-label-disabled: var(--pgn-color-disabled); - --pgn-color-form-control-indicator-active-bg: var(--pgn-color-background-active); - --pgn-color-form-control-indicator-checked-bg-base: var(--pgn-color-background-active); - --pgn-color-form-control-indicator-checked-base: var(--pgn-color-background-active); + --pgn-color-form-control-indicator-active-bg: var(--pgn-color-bg-active); + --pgn-color-form-control-indicator-checked-bg-base: var(--pgn-color-bg-active); + --pgn-color-form-control-indicator-checked-base: var(--pgn-color-bg-active); --pgn-color-form-control-indicator-bg-base: var(--pgn-color-form-input-bg-base); --pgn-color-form-input-focus-bg: var(--pgn-color-form-input-bg-base); --pgn-color-form-input-focus-border: var(--pgn-color-input-focus); @@ -1192,7 +1187,8 @@ --pgn-color-dropzone-border-hover: var(--pgn-color-info-300); --pgn-color-dropzone-error-wrapper: var(--pgn-color-danger-500); --pgn-color-dropdown-link-disabled: var(--pgn-color-disabled); - --pgn-color-dropdown-link-active-bg: var(--pgn-color-background-active); + --pgn-color-dropdown-link-active-bg: var(--pgn-color-bg-active); + --pgn-color-btn-disabled-link: var(--pgn-color-disabled); --pgn-color-btn-focus-border-tertiary: var(--pgn-color-theme-focus-primary); --pgn-color-btn-focus-border-outline-primary: var(--pgn-color-theme-focus-primary); --pgn-color-btn-focus-border-primary: var(--pgn-color-theme-focus-primary); @@ -1210,17 +1206,17 @@ --pgn-color-btn-active-border-dark: var(--pgn-color-theme-active-dark); --pgn-color-btn-active-border-outline-brand: var(--pgn-color-theme-active-brand); --pgn-color-btn-active-border-brand: var(--pgn-color-theme-active-brand); - --pgn-color-btn-active-bg-inverse-outline-primary: var(--pgn-color-theme-background-primary); - --pgn-color-btn-active-bg-outline-primary: var(--pgn-color-theme-background-primary); + --pgn-color-btn-active-bg-inverse-outline-primary: var(--pgn-color-theme-bg-primary); + --pgn-color-btn-active-bg-outline-primary: var(--pgn-color-theme-bg-primary); --pgn-color-btn-active-bg-primary: var(--pgn-color-theme-active-primary); - --pgn-color-btn-active-bg-inverse-outline-light: var(--pgn-color-theme-background-light); - --pgn-color-btn-active-bg-outline-light: var(--pgn-color-theme-background-light); + --pgn-color-btn-active-bg-inverse-outline-light: var(--pgn-color-theme-bg-light); + --pgn-color-btn-active-bg-outline-light: var(--pgn-color-theme-bg-light); --pgn-color-btn-active-bg-light: var(--pgn-color-theme-active-light); - --pgn-color-btn-active-bg-inverse-outline-dark: var(--pgn-color-theme-background-dark); - --pgn-color-btn-active-bg-outline-dark: var(--pgn-color-theme-background-dark); + --pgn-color-btn-active-bg-inverse-outline-dark: var(--pgn-color-theme-bg-dark); + --pgn-color-btn-active-bg-outline-dark: var(--pgn-color-theme-bg-dark); --pgn-color-btn-active-bg-dark: var(--pgn-color-theme-active-dark); - --pgn-color-btn-active-bg-inverse-outline-brand: var(--pgn-color-theme-background-brand); - --pgn-color-btn-active-bg-outline-brand: var(--pgn-color-theme-background-brand); + --pgn-color-btn-active-bg-inverse-outline-brand: var(--pgn-color-theme-bg-brand); + --pgn-color-btn-active-bg-outline-brand: var(--pgn-color-theme-bg-brand); --pgn-color-btn-active-bg-brand: var(--pgn-color-theme-active-brand); --pgn-color-btn-active-text-inverse-warning: #CCAE00FF; --pgn-color-btn-active-text-inverse-success: #0F5737FF; @@ -1322,27 +1318,27 @@ --pgn-color-theme-border-info: var(--pgn-color-info-200); --pgn-color-theme-border-success: var(--pgn-color-success-200); --pgn-color-theme-border-secondary: var(--pgn-color-secondary-200); - --pgn-color-theme-background-danger: var(--pgn-color-danger-100); - --pgn-color-theme-background-warning: var(--pgn-color-warning-100); - --pgn-color-theme-background-info: var(--pgn-color-info-100); - --pgn-color-theme-background-success: var(--pgn-color-success-100); - --pgn-color-theme-background-secondary: var(--pgn-color-secondary-100); - --pgn-color-link: var(--pgn-color-info-500); - --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); - --pgn-link-brand-inline-hover-decoration-color: var(--pgn-link-brand-inline-hover-color); - --pgn-link-muted-inline-hover-decoration-color: var(--pgn-link-muted-inline-hover-color); - --pgn-link-inline-hover-color: #003C5EFF; - --pgn-link-inline-decoration-color: #006DAA4D; - --pgn-link-hover-color: #003C5EFF; - --pgn-link-color: var(--pgn-color-link); + --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-secondary: var(--pgn-color-secondary-100); + --pgn-color-input-btn-focus: var(--pgn-color-input-focus); --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23C32D3AFF' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23C32D3AFF' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23178253FF' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); + --pgn-other-content-form-control-select-bg: var(--pgn-other-content-form-control-select-indicator-icon) no-repeat right var(--pgn-spacing-form-input-padding-y-base) center / var(--pgn-color-form-control-select-bg-base); --pgn-other-content-form-control-switch-indicator-icon-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e"); --pgn-other-content-form-control-radio-indicator-icon-checked: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e"); --pgn-other-content-form-control-checkbox-indicator-icon-checked: url("data:image/svg+xml,"); --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg); --pgn-color-pagination-border-active: var(--pgn-color-pagination-bg-active); - --pgn-color-pagination-text-base: var(--pgn-color-link); + --pgn-color-pagination-text-base: var(--pgn-color-link-base); + --pgn-color-list-group-active-border: var(--pgn-color-list-group-active-bg); + --pgn-color-link-brand-inline-hover-decoration: var(--pgn-color-link-brand-inline-hover-base); + --pgn-color-link-muted-inline-hover-decoration: var(--pgn-color-link-muted-inline-hover-base); + --pgn-color-link-inline-hover-base: #003C5EFF; + --pgn-color-link-inline-decoration: #006DAA4D; + --pgn-color-link-hover: #003C5EFF; --pgn-color-form-control-file-border-focus: var(--pgn-color-form-input-focus-border); --pgn-color-form-control-select-border-focus: var(--pgn-color-form-input-focus-border); --pgn-color-form-control-checkbox-indicator-indeterminate-border: var(--pgn-color-form-control-checkbox-indicator-indeterminate-bg); @@ -1369,20 +1365,20 @@ --pgn-color-btn-active-border-info: var(--pgn-color-theme-active-info); --pgn-color-btn-active-border-outline-danger: var(--pgn-color-theme-active-danger); --pgn-color-btn-active-border-danger: var(--pgn-color-theme-active-danger); - --pgn-color-btn-active-bg-inverse-outline-warning: var(--pgn-color-theme-background-warning); - --pgn-color-btn-active-bg-outline-warning: var(--pgn-color-theme-background-warning); + --pgn-color-btn-active-bg-inverse-outline-warning: var(--pgn-color-theme-bg-warning); + --pgn-color-btn-active-bg-outline-warning: var(--pgn-color-theme-bg-warning); --pgn-color-btn-active-bg-warning: var(--pgn-color-theme-active-warning); - --pgn-color-btn-active-bg-inverse-outline-success: var(--pgn-color-theme-background-success); - --pgn-color-btn-active-bg-outline-success: var(--pgn-color-theme-background-success); + --pgn-color-btn-active-bg-inverse-outline-success: var(--pgn-color-theme-bg-success); + --pgn-color-btn-active-bg-outline-success: var(--pgn-color-theme-bg-success); --pgn-color-btn-active-bg-success: var(--pgn-color-theme-active-success); - --pgn-color-btn-active-bg-inverse-outline-secondary: var(--pgn-color-theme-background-secondary); - --pgn-color-btn-active-bg-outline-secondary: var(--pgn-color-theme-background-secondary); + --pgn-color-btn-active-bg-inverse-outline-secondary: var(--pgn-color-theme-bg-secondary); + --pgn-color-btn-active-bg-outline-secondary: var(--pgn-color-theme-bg-secondary); --pgn-color-btn-active-bg-secondary: var(--pgn-color-theme-active-secondary); - --pgn-color-btn-active-bg-inverse-outline-info: var(--pgn-color-theme-background-info); - --pgn-color-btn-active-bg-outline-info: var(--pgn-color-theme-background-info); + --pgn-color-btn-active-bg-inverse-outline-info: var(--pgn-color-theme-bg-info); + --pgn-color-btn-active-bg-outline-info: var(--pgn-color-theme-bg-info); --pgn-color-btn-active-bg-info: var(--pgn-color-theme-active-info); - --pgn-color-btn-active-bg-inverse-outline-danger: var(--pgn-color-theme-background-danger); - --pgn-color-btn-active-bg-outline-danger: var(--pgn-color-theme-background-danger); + --pgn-color-btn-active-bg-inverse-outline-danger: var(--pgn-color-theme-bg-danger); + --pgn-color-btn-active-bg-outline-danger: var(--pgn-color-theme-bg-danger); --pgn-color-btn-active-bg-danger: var(--pgn-color-theme-active-danger); --pgn-color-btn-active-text-inverse-outline-primary: #454545FF; --pgn-color-btn-active-text-outline-primary: #454545FF; @@ -1429,17 +1425,17 @@ --pgn-color-alert-border-danger: var(--pgn-color-theme-border-danger); --pgn-color-alert-border-info: var(--pgn-color-theme-border-info); --pgn-color-alert-border-success: var(--pgn-color-theme-border-success); - --pgn-color-alert-bg-warning: var(--pgn-color-theme-background-warning); - --pgn-color-alert-bg-danger: var(--pgn-color-theme-background-danger); - --pgn-color-alert-bg-info: var(--pgn-color-theme-background-info); - --pgn-color-alert-bg-success: var(--pgn-color-theme-background-success); + --pgn-color-alert-bg-warning: var(--pgn-color-theme-bg-warning); + --pgn-color-alert-bg-danger: var(--pgn-color-theme-bg-danger); + --pgn-color-alert-bg-info: var(--pgn-color-theme-bg-info); + --pgn-color-alert-bg-success: var(--pgn-color-theme-bg-success); --pgn-color-alert-icon-warning: var(--pgn-color-theme-default-warning); --pgn-color-alert-icon-danger: var(--pgn-color-theme-default-danger); --pgn-color-alert-icon-info: var(--pgn-color-theme-default-info); --pgn-color-alert-icon-success: var(--pgn-color-theme-default-success); - --pgn-link-inline-hover-decoration-color: var(--pgn-link-inline-hover-color); --pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml,"); - --pgn-color-pagination-text-hover: var(--pgn-link-hover-color); + --pgn-color-pagination-text-hover: var(--pgn-color-link-hover); + --pgn-color-link-inline-hover-decoration: var(--pgn-color-link-inline-hover-base); --pgn-color-btn-active-text-inverse-outline-warning: #454545FF; --pgn-color-btn-active-text-outline-warning: #454545FF; --pgn-color-btn-active-text-warning: #FFFFFFFF; diff --git a/src/Badge/Badge.scss b/src/Badge/Badge.scss index 557a3ef032..2a18461937 100644 --- a/src/Badge/Badge.scss +++ b/src/Badge/Badge.scss @@ -13,9 +13,9 @@ text-align: center; white-space: nowrap; vertical-align: baseline; + transition: $badge-transition; @include border-radius($badge-border-radius); - @include transition($badge-transition); @at-root a#{&} { &:hover, diff --git a/src/Breadcrumb/_variables.scss b/src/Breadcrumb/_variables.scss index e69dc62d52..4e5044d910 100644 --- a/src/Breadcrumb/_variables.scss +++ b/src/Breadcrumb/_variables.scss @@ -9,8 +9,8 @@ $breadcrumb-item-padding: var(--pgn-spacing-breadcrumb-padding-item) !default; $breadcrumb-margin-bottom: var(--pgn-spacing-breadcrumb-margin-bottom) !default; $breadcrumb-margin-left: var(--pgn-spacing-breadcrumb-margin-left) !default; -$breadcrumb-border-focus-axis-x: var(--pgn-breadcrumb-border-focus-axis-x) !default; -$breadcrumb-border-focus-axis-y: var(--pgn-breadcrumb-border-focus-axis-y) !default; +$breadcrumb-border-focus-axis-x: var(--pgn-size-breadcrumb-border-axis-x-focus) !default; +$breadcrumb-border-focus-axis-y: var(--pgn-size-breadcrumb-border-axis-y-focus) !default; $breadcrumb-border-focus-width: var(--pgn-size-breadcrumb-border-width-focus) !default; diff --git a/src/Button/Button.scss b/src/Button/Button.scss index bca84801c7..77c16f048b 100644 --- a/src/Button/Button.scss +++ b/src/Button/Button.scss @@ -25,10 +25,9 @@ border: $btn-border-width solid var(--pgn-btn-border-color, transparent); color: var(--pgn-btn-color, #{$body-color}); background-color: var(--pgn-btn-bg, transparent); + transition: $btn-transition; - @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, - $btn-line-height, $btn-border-radius); - @include transition($btn-transition); + @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); &:hover { color: var(--pgn-btn-hover-color, #{$body-color}); diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss index dc1bb417b5..344b7dc827 100644 --- a/src/Button/_variables.scss +++ b/src/Button/_variables.scss @@ -1,38 +1,38 @@ -$btn-padding-y: var(--pgn-btn-padding-y-base) !default; -$btn-padding-x: var(--pgn-btn-padding-x-base) !default; -$btn-font-family: var(--pgn-btn-font-family) !default; -$btn-font-size: var(--pgn-btn-font-size-base) !default; -$btn-line-height: var(--pgn-btn-line-height-base) !default; +$btn-padding-y: var(--pgn-spacing-btn-padding-y-base) !default; +$btn-padding-x: var(--pgn-spacing-btn-padding-x-base) !default; +$btn-font-family: var(--pgn-typography-btn-font-family) !default; +$btn-font-size: var(--pgn-typography-btn-font-size-base) !default; +$btn-line-height: var(--pgn-typography-btn-line-height-base) !default; -$btn-padding-y-sm: var(--pgn-btn-padding-y-sm) !default; -$btn-padding-x-sm: var(--pgn-btn-padding-x-sm) !default; -$btn-font-size-sm: var(--pgn-btn-font-size-sm) !default; -$btn-line-height-sm: var(--pgn-btn-line-height-sm) !default; +$btn-padding-y-sm: var(--pgn-spacing-btn-padding-y-sm) !default; +$btn-padding-x-sm: var(--pgn-spacing-btn-padding-x-sm) !default; +$btn-font-size-sm: var(--pgn-typography-btn-font-size-sm) !default; +$btn-line-height-sm: var(--pgn-typography-btn-line-height-sm) !default; -$btn-padding-y-lg: var(--pgn-btn-padding-y-lg) !default; -$btn-padding-x-lg: var(--pgn-btn-padding-x-lg) !default; -$btn-font-size-lg: var(--pgn-btn-font-size-lg) !default; -$btn-line-height-lg: var(--pgn-btn-line-height-lg) !default; +$btn-padding-y-lg: var(--pgn-spacing-btn-padding-y-lg) !default; +$btn-padding-x-lg: var(--pgn-spacing-btn-padding-x-lg) !default; +$btn-font-size-lg: var(--pgn-typography-btn-font-size-lg) !default; +$btn-line-height-lg: var(--pgn-typography-btn-line-height-lg) !default; -$btn-border-width: var(--pgn-btn-border-width) !default; +$btn-border-width: var(--pgn-size-btn-border-width) !default; -$btn-font-weight: var(--pgn-btn-font-weight) !default; -$btn-box-shadow: var(--pgn-btn-box-shadow-base) !default; -$btn-focus-width: var(--pgn-btn-focus-width) !default; -$btn-focus-gap: var(--pgn-btn-focus-gap) !default; -$btn-disabled-opacity: var(--pgn-btn-disabled-opacity) !default; -$btn-active-box-shadow: var(--pgn-btn-box-shadow-active) !default; +$btn-font-weight: var(--pgn-typography-btn-font-weight) !default; +$btn-box-shadow: var(--pgn-elevation-btn-box-shadow-base) !default; +$btn-focus-width: var(--pgn-size-btn-focus-width) !default; +$btn-focus-gap: var(--pgn-spacing-btn-focus-gap) !default; +$btn-disabled-opacity: var(--pgn-other-btn-disabled-opacity) !default; +$btn-active-box-shadow: var(--pgn-elevation-btn-box-shadow-active) !default; -$btn-link-disabled-color: var(--pgn-btn-disabled-link-color) !default; +$btn-link-disabled-color: var(--pgn-color-btn-disabled-link) !default; -$btn-block-spacing-y: var(--pgn-btn-block-spacing-y) !default; +$btn-block-spacing-y: var(--pgn-spacing-btn-block-spacing-y) !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: var(--pgn-btn-border-radius-base) !default; -$btn-border-radius-lg: var(--pgn-btn-border-radius-lg) !default; -$btn-border-radius-sm: var(--pgn-btn-border-radius-sm) !default; +$btn-border-radius: var(--pgn-size-btn-border-radius-base) !default; +$btn-border-radius-lg: var(--pgn-size-btn-border-radius-lg) !default; +$btn-border-radius-sm: var(--pgn-size-btn-border-radius-sm) !default; -$btn-transition: var(--pgn-btn-transition) !default; +$btn-transition: var(--pgn-transition-btn) !default; // PRIMARY BUTTON VARIABLES $btn-primary-bg: var(--pgn-color-btn-bg-primary) !default; @@ -417,7 +417,7 @@ $btn-inverse-tertiary-hover-border-color: var(--pgn-color-btn-hover-border-inver $btn-inverse-tertiary-active-color: var(--pgn-color-btn-active-text-inverse-tertiary) !default; $btn-inverse-tertiary-active-bg: var(--pgn-color-btn-active-bg-inverse-tertiary) !default; $btn-inverse-tertiary-active-border-color: var(--pgn-color-btn-active-border-inverse-tertiary) !default; -$btn-inverse-tertiary-focus-border-color: var(--pgn-color-btn-focus-border-secondary) !default; +$btn-inverse-tertiary-focus-border-color: var(--pgn-color-btn-focus-border-inverse-tertiary) !default; $btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default; $btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default; diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss index fcfe7e55a4..2d5cdb5a4d 100644 --- a/src/Card/_variables.scss +++ b/src/Card/_variables.scss @@ -13,6 +13,7 @@ $card-height: var(--pgn-card-height-base) !default; $card-bg-dark: $primary-500 !default; $card-bg-muted: $light-200 !default; +// TODO: Need to deleted this variable after refactoring Card component // stylelint-disable-next-line max-line-length $card-inner-border-radius: calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) !default; $card-color: var(--pgn-color-card-base) !default; diff --git a/src/Card/card-bootstrap.scss b/src/Card/card-bootstrap.scss index b3e75162a7..eb2cdf5aae 100644 --- a/src/Card/card-bootstrap.scss +++ b/src/Card/card-bootstrap.scss @@ -38,6 +38,8 @@ } } +// TODO: This selector is not used in Paragon. +// It is necessary to delete it and the existing design token (`$card-color`). .card-body { flex: 1 1 auto; min-height: 1px; diff --git a/src/Carousel/_variables.scss b/src/Carousel/_variables.scss index e581216fde..7b7ee22c14 100644 --- a/src/Carousel/_variables.scss +++ b/src/Carousel/_variables.scss @@ -1,3 +1,4 @@ +$carousel-control-color: var(--pgn-color-carousel-control-base) !default; $carousel-control-width: var(--pgn-size-carousel-control-width-base) !default; $carousel-control-opacity: var(--pgn-color-carousel-control-opacity-base) !default; $carousel-control-hover-opacity: var(--pgn-color-carousel-control-opacity-hover) !default; @@ -18,4 +19,4 @@ $carousel-control-prev-icon-bg: var(--pgn-content-carousel-control-bg-prev-icon) $carousel-control-next-icon-bg: var(--pgn-content-carousel-control-bg-next-icon) !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) -$carousel-transition: transform var(--pgn-transition-carousel-duration) ease-in-out !default; +$carousel-transition: var(--pgn-transition-carousel-base) !default; diff --git a/src/Carousel/carousel-bootstrap.scss b/src/Carousel/carousel-bootstrap.scss index 1cfb8f0828..98352c3ed3 100644 --- a/src/Carousel/carousel-bootstrap.scss +++ b/src/Carousel/carousel-bootstrap.scss @@ -21,8 +21,7 @@ width: 100%; margin-right: -100%; backface-visibility: hidden; - - @include transition($carousel-transition); + transition: $carousel-transition; } .carousel-item.active, @@ -60,8 +59,7 @@ .active.carousel-item-right { z-index: 0; opacity: 0; - - @include transition(opacity 0s var(--pgn-carousel-transition-base)); + transition: opacity 0s $carousel-transition; } } @@ -78,13 +76,12 @@ justify-content: center; width: $carousel-control-width; padding: 0; - color: var(--pgn-carousel-control-color); + color: $carousel-control-color; text-align: center; background: none; border: 0; opacity: $carousel-control-opacity; - - @include transition($carousel-control-transition); + transition: $carousel-control-transition; @include hover-focus() { color: var(--pgn-carousel-control-color); @@ -160,8 +157,7 @@ border-top: $carousel-indicator-hit-area-height solid transparent; border-bottom: $carousel-indicator-hit-area-height solid transparent; opacity: .5; - - @include transition($carousel-indicator-transition); + transition: $carousel-indicator-transition; } .active { diff --git a/src/Chip/_variables.scss b/src/Chip/_variables.scss index e05211b097..47250ad5d9 100644 --- a/src/Chip/_variables.scss +++ b/src/Chip/_variables.scss @@ -4,7 +4,7 @@ $chip-padding-to-icon: var(--pgn-spacing-chip-padding-to-icon) !default; $chip-icon-padding: var(--pgn-spacing-chip-padding-icon) !default; $chip-margin: var(--pgn-spacing-chip-margin) !default; $chip-border-radius: var(--pgn-size-chip-border-radius) !default; -$chip-disable-opacity: var(--pgn-color-chip-opacity-disabled) !default; +$chip-disable-opacity: var(--pgn-other-chip-opacity-disabled) !default; $chip-icon-size: var(--pgn-size-chip-icon) !default; $chip-light-bg: var(--pgn-color-chip-bg-light) !default; diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss index 8d86d34d2d..33713d234e 100644 --- a/src/Form/_bootstrap-custom-forms.scss +++ b/src/Form/_bootstrap-custom-forms.scss @@ -203,8 +203,7 @@ background-color: $custom-control-indicator-border-color; // stylelint-disable-next-line property-disallowed-list border-radius: $custom-switch-indicator-border-radius; - - @include transition(transform .15s ease-in-out, $custom-forms-transition); + transition: transform .15s ease-in-out, $custom-forms-transition; } } @@ -429,11 +428,11 @@ margin-top: calc((#{$custom-range-track-height} - #{$custom-range-thumb-height}) * .5); // Webkit specific border: $custom-range-thumb-border; appearance: none; + transition: $custom-forms-transition; @include gradient-bg($custom-range-thumb-bg); @include border-radius($custom-range-thumb-border-radius); @include box-shadow($custom-range-thumb-box-shadow); - @include transition($custom-forms-transition); &:active { @include gradient-bg($custom-range-thumb-active-bg); @@ -457,11 +456,11 @@ height: $custom-range-thumb-height; border: $custom-range-thumb-border; appearance: none; + transition: $custom-forms-transition; @include gradient-bg($custom-range-thumb-bg); @include border-radius($custom-range-thumb-border-radius); @include box-shadow($custom-range-thumb-box-shadow); - @include transition($custom-forms-transition); &:active { @include gradient-bg($custom-range-thumb-active-bg); @@ -488,11 +487,11 @@ margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. border: $custom-range-thumb-border; appearance: none; + transition: $custom-forms-transition; @include gradient-bg($custom-range-thumb-bg); @include border-radius($custom-range-thumb-border-radius); @include box-shadow($custom-range-thumb-box-shadow); - @include transition($custom-forms-transition); &:active { @include gradient-bg($custom-range-thumb-active-bg); @@ -550,5 +549,5 @@ .custom-control-label::before, .custom-file-label, .custom-select { - @include transition($custom-forms-transition); + transition: $custom-forms-transition; } diff --git a/src/Form/_bootstrap-forms.scss b/src/Form/_bootstrap-forms.scss index 0db6dcc0cf..1281d91101 100644 --- a/src/Form/_bootstrap-forms.scss +++ b/src/Form/_bootstrap-forms.scss @@ -20,11 +20,11 @@ background-color: $input-bg; background-clip: padding-box; border: $input-border-width solid $input-border-color; + transition: $input-transition; // Note: This has no effect on `s in CSS. @include border-radius($input-border-radius, 0); @include box-shadow($input-box-shadow); - @include transition($input-transition); // Unstyle the caret on `