diff --git a/package-lock.json b/package-lock.json
index 2d8d92c0ad..007bb06483 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4469,27 +4469,6 @@
"node": ">=6"
}
},
- "node_modules/@fortawesome/free-solid-svg-icons": {
- "version": "6.4.2",
- "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
- "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
- "hasInstallScript": true,
- "dependencies": {
- "@fortawesome/fontawesome-common-types": "6.4.2"
- },
- "engines": {
- "node": ">=6"
- }
- },
- "node_modules/@fortawesome/free-solid-svg-icons/node_modules/@fortawesome/fontawesome-common-types": {
- "version": "6.4.2",
- "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
- "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
- "hasInstallScript": true,
- "engines": {
- "node": ">=6"
- }
- },
"node_modules/@fortawesome/react-fontawesome": {
"version": "0.1.19",
"license": "MIT",
diff --git a/src/Nav/index.scss b/src/Nav/index.scss
index e27c16daa8..8da6ff3e9c 100644
--- a/src/Nav/index.scss
+++ b/src/Nav/index.scss
@@ -54,7 +54,7 @@
.nav-item.show .nav-link {
color: var(--pgn-color-nav-pills-base-link-active-text);
background-color: var(--pgn-color-nav-pills-base-link-active-bg);
- border-color: var(--pgn-color-nav-pills-base-link-active-bg);
+ border-color: var(--pgn-color-nav-pills-base-link-active-border);
&:focus {
@include nav-tabs-link-focus(var(--pgn-border-color-nav-tabs-link-border-focus));
@@ -104,9 +104,9 @@
background-color: var(--pgn-color-white);
&:hover {
- // background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-focus-hover);
+ background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-focus-hover);
color: var(--pgn-color-nav-pills-inverse-link-text-active-focus);
- // border-color: var(--pgn-color-nav-pills-inverse-link-border-focus-hover);
+ border-color: var(--pgn-color-nav-pills-inverse-link-border-focus-hover);
}
}
}
@@ -188,7 +188,6 @@
&.disabled {
color: var(--pgn-color-nav-link-text-disabled);
background-color: var(--pgn-color-nav-tabs-base-text-disabled);
- border-color: transparent;
}
}
diff --git a/src/Tabs/index.scss b/src/Tabs/index.scss
index fd53447b1b..9870c5a2d8 100644
--- a/src/Tabs/index.scss
+++ b/src/Tabs/index.scss
@@ -80,6 +80,14 @@
color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover);
background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover);
}
+
+ &:focus {
+ @include nav-tabs-link-focus(
+ var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus),
+ var(--pgn-size-nav-tabs-border-radius),
+ var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance)
+ );
+ }
}
}
diff --git a/styles/css/core/index.css b/styles/css/core/index.css
index f059963488..4a993a982b 100644
--- a/styles/css/core/index.css
+++ b/styles/css/core/index.css
@@ -1,3 +1,2 @@
-@import "~react-loading-skeleton/dist/skeleton.css";
@import "custom-media-breakpoints.css";
@import "variables.css";
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index 90dbe01f1b..17e9502fbd 100644
--- a/styles/css/core/variables.css
+++ b/styles/css/core/variables.css
@@ -6,6 +6,10 @@
:root {
--pgn-theme-interval: 8%;
+ --pgn-other-form-control-custom-file-content: Browse;
+ --pgn-other-form-control-custom-file-lang: en;
+ --pgn-other-form-control-range-track-cursor: pointer;
+ --pgn-other-form-control-cursor: auto;
--pgn-elevation-zindex-fixed: 1030;
--pgn-elevation-zindex-sticky: 1020;
--pgn-elevation-zindex-2000: 2000;
@@ -22,29 +26,25 @@
--pgn-elevation-tooltip-zindex: 1070;
--pgn-elevation-sheet-zindex-main: 1032;
--pgn-elevation-sheet-zindex-backdrop: 1031;
- --pgn-elevation-progress-bar-box-shadow: none;
--pgn-elevation-product-tour-checkpoint-zindex: 1060;
--pgn-elevation-popover-zindex: 1060;
--pgn-elevation-modal-zindex: 1050;
--pgn-elevation-modal-backdrop-zindex: 1040;
--pgn-elevation-dropdown-zindex: 1000;
- --pgn-other-form-control-custom-file-content: Browse;
- --pgn-other-form-control-custom-file-lang: en;
- --pgn-other-form-control-range-track-cursor: pointer;
- --pgn-other-form-control-cursor: auto;
--pgn-transition-collapse-width: width .35s ease;
--pgn-transition-collapse-height: height .35s ease;
--pgn-transition-fade: opacity .15s linear;
--pgn-transition-base: all .2s ease-in-out;
--pgn-transition-progress-bar-bar-transition: width .6s ease;
--pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite;
+ --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+ --pgn-transition-form-input: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
--pgn-transition-carousel-control: opacity .15s ease;
--pgn-transition-carousel-indicator: opacity .6s ease;
--pgn-transition-carousel-duration: .6s;
- --pgn-transition-badge: none;
- --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
- --pgn-transition-form-input: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
--pgn-transition-btn: none;
+ --pgn-transition-badge: none;
+ --pgn-typography-line-height-micro: .938rem;
--pgn-typography-line-height-sm: 1.5;
--pgn-typography-line-height-lg: 1.5;
--pgn-typography-line-height-base: 1.5556;
@@ -89,12 +89,6 @@
--pgn-typography-menu-select-btn-link-text-decoration-thickness: .125rem;
--pgn-typography-menu-select-btn-link-text-decoration-line: underline;
--pgn-typography-image-figure-caption-font-size: 90%;
- --pgn-typography-dropdown-item-text-decoration: none;
- --pgn-typography-code-font-size: 87.5%;
- --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-typography-link-decoration-brand-inline-hover: underline;
--pgn-typography-link-decoration-brand-inline-base: underline;
--pgn-typography-link-decoration-brand-hover: underline;
@@ -115,6 +109,12 @@
--pgn-typography-input-btn-font-family: inherit;
--pgn-typography-headings-line-height: 1.25;
--pgn-typography-headings-font-family: inherit;
+ --pgn-typography-dropdown-item-text-decoration: none;
+ --pgn-typography-code-font-size: 87.5%;
+ --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-grid-gutter-width: 24px;
--pgn-spacing-table-cell-padding-sm: .3rem;
--pgn-spacing-table-cell-padding-base: 75rem;
@@ -128,6 +128,7 @@
--pgn-spacing-toast-container-gutter-lg: 1.25rem;
--pgn-spacing-toast-padding-y: .25rem;
--pgn-spacing-toast-padding-x: .75rem;
+ --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px;
--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem;
--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem;
--pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem;
@@ -156,7 +157,7 @@
--pgn-spacing-navbar-toggler-padding-x: .75rem;
--pgn-spacing-navbar-toggler-padding-y: .25rem;
--pgn-spacing-navbar-padding-x-nav-link: .5rem;
- --pgn-spacing-nav-link-distance-to-border: .313rem;
+ --pgn-spacing-nav-link-distance-to-border: 4px;
--pgn-spacing-nav-link-padding-x: 1rem;
--pgn-spacing-nav-link-padding-y: .5rem;
--pgn-spacing-modal-dialog-margin: 1.5rem;
@@ -166,6 +167,34 @@
--pgn-spacing-modal-inner-padding-base: 1.5rem;
--pgn-spacing-menu-item-icon-margin-left: .25em;
--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;
+ --pgn-spacing-form-control-select-indicator-padding: 1rem;
+ --pgn-spacing-form-control-spacer-x: 1rem;
+ --pgn-spacing-form-control-gutter: .5rem;
+ --pgn-spacing-form-group-margin-bottom: 1rem;
+ --pgn-spacing-form-check-position-axis: .375rem;
+ --pgn-spacing-form-check-inline-margin-x: .75rem;
+ --pgn-spacing-form-text-margin-top: .25rem;
+ --pgn-spacing-form-input-check-margin-y: .3rem;
+ --pgn-spacing-form-input-check-margin-x-inline: .3125rem;
+ --pgn-spacing-form-input-check-margin-x-base: .25rem;
+ --pgn-spacing-form-input-check-gutter: 1.25rem;
--pgn-spacing-dropzone-border-error: 2px;
--pgn-spacing-dropzone-border-active: 2px;
--pgn-spacing-dropzone-border-focus: 2px;
@@ -179,7 +208,7 @@
--pgn-spacing-dropdown-padding-x-base: 0;
--pgn-spacing-dropdown-spacer: .125rem;
--pgn-spacing-data-table-footer-position: center;
- --pgn-spacing-data-table-padding-cell: .75rem;
+ --pgn-spacing-data-table-padding-cell: .5rem .75rem;
--pgn-spacing-data-table-padding-small: .5rem;
--pgn-spacing-data-table-padding-y: .75rem;
--pgn-spacing-data-table-padding-x: .75rem;
@@ -211,6 +240,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;
@@ -232,36 +263,6 @@
--pgn-spacing-alert-padding-y: 1.5rem;
--pgn-spacing-action-row-gap-y: .5rem;
--pgn-spacing-action-row-gap-x: .5rem;
- --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;
- --pgn-spacing-form-control-select-indicator-padding: 1rem;
- --pgn-spacing-form-control-spacer-x: 1rem;
- --pgn-spacing-form-control-gutter: .5rem;
- --pgn-spacing-form-group-margin-bottom: 1rem;
- --pgn-spacing-form-check-position-axis: .375rem;
- --pgn-spacing-form-check-inline-margin-x: .75rem;
- --pgn-spacing-form-text-margin-top: .25rem;
- --pgn-spacing-form-input-check-margin-y: .3rem;
- --pgn-spacing-form-input-check-margin-x-inline: .3125rem;
- --pgn-spacing-form-input-check-margin-x-base: .25rem;
- --pgn-spacing-form-input-check-gutter: 1.25rem;
- --pgn-spacing-btn-focus-gap: 1px;
- --pgn-spacing-btn-block-spacing-y: .5rem;
--pgn-size-breakpoint-xxl: 1400px;
--pgn-size-breakpoint-xl: 1200px;
--pgn-size-breakpoint-lg: 992px;
@@ -332,6 +333,28 @@
--pgn-size-icon-sm: 1.25rem;
--pgn-size-icon-xs: 1rem;
--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;
+ --pgn-size-form-autosuggest-spinner-width: 1.25rem;
+ --pgn-size-form-autosuggest-icon-width: 2.4rem;
+ --pgn-size-form-grid-gutter-width: 0.625rem;
+ --pgn-size-form-control-border-radio-indicator-radius: 50%;
+ --pgn-size-form-control-border-checkbox-indicator-radius: 0;
+ --pgn-size-form-control-icon-width: 2rem;
+ --pgn-size-form-control-range-thumb-border-radius: 1rem;
+ --pgn-size-form-control-range-thumb-border-base: 0;
+ --pgn-size-form-control-range-thumb-width: 1rem;
+ --pgn-size-form-control-range-track-border-radius: 1rem;
+ --pgn-size-form-control-range-track-height: .5rem;
+ --pgn-size-form-control-range-track-width: 100%;
+ --pgn-size-form-control-indicator-border-width: 0.125rem;
+ --pgn-size-form-control-indicator-bg: 100%;
+ --pgn-size-form-control-indicator-base: 1.25rem;
+ --pgn-size-form-input-width-focus: 0.063rem;
+ --pgn-size-form-input-width-hover: 0.063rem;
--pgn-size-dropdown-min-width: 18rem;
--pgn-size-data-table-layout-sidebar-width: 12rem;
--pgn-size-data-table-dropdown-pagination-min-width: 6rem;
@@ -348,19 +371,19 @@
--pgn-size-chip-icon: 1.25rem;
--pgn-size-chip-border-radius: .25rem;
--pgn-size-carousel-caption-width: 70%;
- --pgn-size-carousel-indicator-height-area-hit: 3px;
+ --pgn-size-carousel-indicator-height-area-hit: 10px;
--pgn-size-carousel-indicator-height-base: 3px;
--pgn-size-carousel-indicator-width: 30px;
--pgn-size-carousel-control-width-icon: 20px;
--pgn-size-carousel-control-width-base: 15%;
--pgn-size-card-logo-height: 4.125rem;
--pgn-size-card-logo-width: 7.25rem;
- --pgn-size-card-image-border-radius: .3125rem;
--pgn-size-card-image-vertical-max-height: 140px;
--pgn-size-card-image-horizontal-width-max: 240px;
--pgn-size-card-focus-border-radius: 5px;
--pgn-size-card-focus-border-width: 2px;
--pgn-size-card-border-radius-logo: .25rem;
+ --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;
@@ -380,29 +403,7 @@
--pgn-size-annotation-max-width: 18.75rem;
--pgn-size-annotation-arrow-border-width: .5rem;
--pgn-size-alert-border-width: 0;
- --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;
- --pgn-size-form-autosuggest-spinner-width: 1.25rem;
- --pgn-size-form-autosuggest-icon-width: 2.4rem;
- --pgn-size-form-grid-gutter-width: 0.625rem;
- --pgn-size-form-control-border-radio-indicator-radius: 50%;
- --pgn-size-form-control-border-checkbox-indicator-radius: 0;
- --pgn-size-form-control-icon-width: 2rem;
- --pgn-size-form-control-range-thumb-border-radius: 1rem;
- --pgn-size-form-control-range-thumb-border-base: 0;
- --pgn-size-form-control-range-thumb-width: 1rem;
- --pgn-size-form-control-range-track-border-radius: 1rem;
- --pgn-size-form-control-range-track-height: .5rem;
- --pgn-size-form-control-range-track-width: 100%;
- --pgn-size-form-control-indicator-border-width: 0.125rem;
- --pgn-size-form-control-indicator-bg: 100%;
- --pgn-size-form-control-indicator-base: 1.25rem;
- --pgn-size-form-input-width-focus: 0.063rem;
- --pgn-size-form-input-width-hover: 0.063rem;
- --pgn-size-btn-focus-width: 2px;
+ --pgn-size-rounded-pill: 50rem;
--pgn-size-border-radius-sm: 4px;
--pgn-size-border-radius-lg: 7px;
--pgn-size-border-radius-base: 6px;
@@ -427,17 +428,6 @@
--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-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-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-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-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);
@@ -452,6 +442,13 @@
--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-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);
@@ -459,6 +456,10 @@
--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) * 4);
--pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2);
--pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25);
@@ -482,13 +483,6 @@
--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-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left);
- --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-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top);
--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);
@@ -496,6 +490,13 @@
--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-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
--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);
@@ -521,14 +522,6 @@
--pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base);
--pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width);
--pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em);
- --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base);
- --pgn-size-dropdown-border-width: var(--pgn-size-border-width);
- --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-breadcrumb-border-radius-base: var(--pgn-size-border-radius-base);
- --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width);
- --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base);
--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);
@@ -547,9 +540,17 @@
--pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm);
--pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg);
--pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base);
+ --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base);
+ --pgn-size-dropdown-border-width: var(--pgn-size-border-width);
+ --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-size-input-btn-focus-width);
+ --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base);
--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);
@@ -563,9 +564,6 @@
--pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2);
--pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base);
--pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base);
- --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3);
- --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3);
- --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3);
--pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base);
--pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base);
--pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg);
@@ -574,11 +572,13 @@
--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-card-margin-grid-bottom: var(--pgn-spacing-spacer-3);
+ --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3);
--pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width));
+ --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-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-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
--pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base);
--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));
@@ -586,6 +586,8 @@
--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-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-card-image-border-radius: var(--pgn-size-card-border-radius-base);
--pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
--pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
--pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index 44303067cd..41268ea085 100644
--- a/styles/css/themes/light/variables.css
+++ b/styles/css/themes/light/variables.css
@@ -37,16 +37,17 @@
--pgn-color-overflow-scroll-opacity-mask-transparent: #00000066;
--pgn-color-nav-tabs-inverse-link-bg-active-hover: #00000000;
--pgn-color-nav-tabs-base-link-active-bg: #00000000;
+ --pgn-color-nav-tabs-base-bg-hover: #00000000;
--pgn-color-nav-link-border: #00000000;
--pgn-color-menu-item-bg: #00000000;
--pgn-color-icon-button-text-primary-inverse-active-hover: #000000FF;
--pgn-color-icon-button-bg-base: #00000000;
- --pgn-color-code-base: #E83E8CFF;
- --pgn-color-card-base: inherit;
--pgn-color-mark-bg: #FFF243FF;
--pgn-color-list-group-base: inherit;
--pgn-color-form-control-select-bg-size: #000000FF;
--pgn-color-form-control-label-base: inherit;
+ --pgn-color-code-base: #E83E8CFF;
+ --pgn-color-card-base: inherit;
--pgn-color-btn-disabled-border-inverse-warning: #00000000;
--pgn-color-btn-disabled-border-inverse-outline-success: inherit;
--pgn-color-btn-disabled-border-inverse-success: #00000000;
@@ -180,6 +181,15 @@
--pgn-color-btn-bg-outline-danger: inherit;
--pgn-color-btn-bg-inverse-outline-brand: #00000000;
--pgn-color-btn-bg-outline-brand: inherit;
+ --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-chip-opacity-disabled: .3;
+ --pgn-other-carousel-control-opacity-hover: .9;
+ --pgn-other-carousel-control-opacity-base: .5;
+ --pgn-other-btn-disabled-opacity: .65;
+ --pgn-other-form-feedback-tooltip-opacity: .9;
--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);
@@ -216,6 +226,7 @@
--pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15);
--pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
--pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
+ --pgn-elevation-progress-bar-box-shadow: none;
--pgn-elevation-image-thumbnail-box-shadow: none;
--pgn-elevation-icon-button-box-shadow-black-inverse-active: none;
--pgn-elevation-icon-button-box-shadow-black-active: none;
@@ -235,9 +246,6 @@
--pgn-elevation-icon-button-box-shadow-secondary-active: none;
--pgn-elevation-icon-button-box-shadow-primary-inverse-active: none;
--pgn-elevation-icon-button-box-shadow-primary-active: none;
- --pgn-elevation-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25);
- --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-elevation-form-control-select-border-base: none;
--pgn-elevation-form-control-range-thumb-base: none;
--pgn-elevation-form-control-range-track: none;
@@ -246,23 +254,16 @@
--pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1);
--pgn-elevation-form-control-indicator-checked-base: none;
--pgn-elevation-form-input-focus: none;
- --pgn-elevation-form-input-base: inset 0 1px 1px rgba(0, 0, 0, .075);
+ --pgn-elevation-form-input-base: none;
+ --pgn-elevation-code-kbd-box-shadow: none;
--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-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-progress-bar-box-shadow: none;
--pgn-elevation-popover-box-shadow: none;
--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-dropdown-box-shadow: none;
- --pgn-other-tooltip-opacity: 1;
- --pgn-other-search-field-disabled-opacity: .3;
- --pgn-other-modal-opacity: .5;
- --pgn-other-chip-opacity-disabled: .3;
- --pgn-other-carousel-control-opacity-hover: .9;
- --pgn-other-carousel-control-opacity-base: .5;
- --pgn-other-link-emphasized-hover-darken-percentage: 15%;
- --pgn-other-btn-disabled-opacity: .65;
- --pgn-other-form-feedback-tooltip-opacity: .9;
--pgn-color-action-default-accent-b: #FFE755FF;
--pgn-color-action-default-accent-a: #0095C6FF;
--pgn-color-action-default-dark-base: #142018FF;
@@ -342,6 +343,8 @@
--pgn-color-progress-bar-bar-bg-base: var(--pgn-color-accent-a);
--pgn-color-progress-bar-bar-base: var(--pgn-color-white);
--pgn-color-product-tour-checkpoint-box-shadow: #0000004D;
+ --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-base);
+ --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-base);
--pgn-color-product-tour-checkpoint-body: var(--pgn-color-gray-700);
--pgn-color-popover-arrow-outer: #0000000D;
--pgn-color-popover-header-border-bottom-dark: #F2F2F2FF;
@@ -373,8 +376,14 @@
--pgn-color-nav-light: #00000080;
--pgn-color-nav-dark: #FFFFFF80;
--pgn-color-nav-divider: var(--pgn-color-gray-100);
+ --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-primary-base);
--pgn-color-nav-pills-inverse-link-text-base: var(--pgn-color-white);
+ --pgn-color-nav-pills-base-link-active-border: var(--pgn-color-white);
+ --pgn-color-nav-tabs-inverse-dropdown-border: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover);
--pgn-color-nav-tabs-inverse-link-text-base: var(--pgn-color-white);
+ --pgn-color-nav-tabs-base-link-disabled-border: var(--pgn-color-nav-link-border);
+ --pgn-color-nav-tabs-base-border-focus: var(--pgn-color-nav-tabs-base-bg-hover);
+ --pgn-color-nav-tabs-base-text-disabled: var(--pgn-color-nav-tabs-base-bg-hover);
--pgn-color-nav-link-text-disabled: var(--pgn-color-gray-300);
--pgn-color-nav-link-text-base: var(--pgn-color-gray-700);
--pgn-color-modal-backdrop-bg: var(--pgn-color-black);
@@ -442,7 +451,22 @@
--pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base);
--pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base);
--pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base);
- --pgn-color-dropdown-link-hover-base: var(--pgn-color-gray-900);
+ --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-checked-bg-disabled: #0A305580;
+ --pgn-color-form-control-indicator-border: var(--pgn-color-gray-700);
+ --pgn-color-form-input-group-addon-bg: var(--pgn-color-gray-100);
+ --pgn-color-form-input-bg-disabled: var(--pgn-color-gray-100);
+ --pgn-color-form-input-base: var(--pgn-color-gray-700);
+ --pgn-color-dropdown-link-hover-base: #000000FF;
--pgn-color-dropdown-link-base: var(--pgn-color-gray-900);
--pgn-color-dropdown-divider-bg: var(--pgn-color-gray-100);
--pgn-color-dropdown-border: #00000026;
@@ -459,43 +483,6 @@
--pgn-color-carousel-control-base: var(--pgn-color-white);
--pgn-color-card-border-focus-base: #00000080;
--pgn-color-card-border-base: #00000020;
- --pgn-color-bubble-bg-primary: var(--pgn-color-primary-base);
- --pgn-color-bubble-text-primary: var(--pgn-color-white);
- --pgn-color-bubble-text-error: var(--pgn-color-white);
- --pgn-color-bubble-text-warning: var(--pgn-color-white);
- --pgn-color-bubble-text-success: var(--pgn-color-white);
- --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white);
- --pgn-color-breadcrumb-divider: var(--pgn-color-gray-600);
- --pgn-color-breadcrumb-bg: var(--pgn-color-gray-200);
- --pgn-color-badge-bg-dark: var(--pgn-color-dark-base);
- --pgn-color-badge-bg-light: var(--pgn-color-light-base);
- --pgn-color-badge-bg-primary: var(--pgn-color-primary-base);
- --pgn-color-badge-text-dark: #FFFFFFFF;
- --pgn-color-badge-text-light: #454545FF;
- --pgn-color-badge-text-primary: #FFFFFFFF;
- --pgn-color-annotation-bg-dark: var(--pgn-color-dark-base);
- --pgn-color-annotation-bg-light: var(--pgn-color-white);
- --pgn-color-annotation-bg-warning: var(--pgn-color-accent-b);
- --pgn-color-annotation-text-dark: var(--pgn-color-white);
- --pgn-color-annotation-text-error: var(--pgn-color-white);
- --pgn-color-annotation-text-warning: var(--pgn-color-black);
- --pgn-color-annotation-text-success: var(--pgn-color-white);
- --pgn-color-alert-content: var(--pgn-color-gray-700);
- --pgn-color-alert-title: var(--pgn-color-black);
- --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);
- --pgn-color-form-input-group-addon-bg: var(--pgn-color-gray-100);
- --pgn-color-form-input-bg-disabled: var(--pgn-color-gray-100);
- --pgn-color-form-input-base: var(--pgn-color-gray-700);
--pgn-color-btn-disabled-border-inverse-tertiary: var(--pgn-color-btn-border-inverse-tertiary);
--pgn-color-btn-disabled-border-tertiary: var(--pgn-color-btn-border-tertiary);
--pgn-color-btn-disabled-border-inverse-secondary: var(--pgn-color-btn-border-inverse-secondary);
@@ -569,6 +556,28 @@
--pgn-color-btn-text-inverse-outline-brand: var(--pgn-color-white);
--pgn-color-btn-text-inverse-brand: var(--pgn-color-brand-base);
--pgn-color-btn-text-outline-brand: var(--pgn-color-brand-base);
+ --pgn-color-bubble-bg-primary: var(--pgn-color-primary-base);
+ --pgn-color-bubble-text-primary: var(--pgn-color-white);
+ --pgn-color-bubble-text-error: var(--pgn-color-white);
+ --pgn-color-bubble-text-warning: var(--pgn-color-white);
+ --pgn-color-bubble-text-success: var(--pgn-color-white);
+ --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white);
+ --pgn-color-breadcrumb-bg: var(--pgn-color-gray-200);
+ --pgn-color-badge-bg-dark: var(--pgn-color-dark-base);
+ --pgn-color-badge-bg-light: var(--pgn-color-light-base);
+ --pgn-color-badge-bg-primary: var(--pgn-color-primary-base);
+ --pgn-color-badge-text-dark: #FFFFFFFF;
+ --pgn-color-badge-text-light: #454545FF;
+ --pgn-color-badge-text-primary: #FFFFFFFF;
+ --pgn-color-annotation-bg-dark: var(--pgn-color-dark-base);
+ --pgn-color-annotation-bg-light: var(--pgn-color-white);
+ --pgn-color-annotation-bg-warning: var(--pgn-color-accent-b);
+ --pgn-color-annotation-text-dark: var(--pgn-color-white);
+ --pgn-color-annotation-text-error: var(--pgn-color-white);
+ --pgn-color-annotation-text-warning: var(--pgn-color-black);
+ --pgn-color-annotation-text-success: var(--pgn-color-white);
+ --pgn-color-alert-content: var(--pgn-color-gray-700);
+ --pgn-color-alert-title: var(--pgn-color-black);
--pgn-color-theme-active-gray: var(--pgn-color-gray-900);
--pgn-color-theme-hover-gray: var(--pgn-color-gray-700);
--pgn-color-theme-focus-gray: var(--pgn-color-gray-300);
@@ -599,12 +608,12 @@
--pgn-elevation-icon-button-box-shadow-secondary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-secondary-base);
--pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
--pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base);
- --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-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-focus: var(--pgn-elevation-form-input-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-elevation-box-shadow-sm);
+ --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white);
--pgn-border-color-nav-tabs-link-border-active: var(--pgn-color-primary-500);
--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");
@@ -698,6 +707,7 @@
--pgn-color-secondary-200: #D1D1D1FF;
--pgn-color-secondary-100: #F4F4F4FF;
--pgn-color-tooltip-arrow-base: var(--pgn-color-tooltip-bg-base);
+ --pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover: var(--pgn-color-primary-300);
--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus: var(--pgn-color-primary-500);
@@ -711,8 +721,6 @@
--pgn-color-search-field-border-base: var(--pgn-color-gray-500);
--pgn-color-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500);
--pgn-color-progress-bar-border: var(--pgn-color-gray-500);
- --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-color-body-base);
--pgn-color-popover-header-text: var(--pgn-color-headings-base);
@@ -728,7 +736,7 @@
--pgn-color-nav-pills-inverse-tab-content-color: var(--pgn-color-nav-pills-inverse-link-text-base);
--pgn-color-nav-pills-inverse-link-bg-active-focus-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
--pgn-color-nav-pills-inverse-link-bg-active: var(--pgn-color-nav-pills-inverse-link-text-base);
- --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-nav-pills-inverse-link-text-base);
+ --pgn-color-nav-pills-inverse-link-border-focus-hover: var(--pgn-color-nav-pills-inverse-link-border-active-focus);
--pgn-color-nav-pills-inverse-link-border-active: var(--pgn-color-nav-pills-inverse-link-text-base);
--pgn-color-nav-pills-inverse-link-border-base: var(--pgn-color-dark-300);
--pgn-color-nav-pills-inverse-link-text-active-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
@@ -742,7 +750,7 @@
--pgn-color-nav-tabs-inverse-link-border-bottom: var(--pgn-color-dark-300);
--pgn-color-nav-tabs-base-link-active-text: var(--pgn-color-primary-500);
--pgn-color-nav-tabs-base-link-hover-bg: var(--pgn-color-light-400);
- --pgn-color-nav-tabs-base-border: var(--pgn-color-light-400);
+ --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400);
--pgn-color-modal-content-bg: var(--pgn-color-bg-base);
--pgn-color-menu-select-btn-link-color: var(--pgn-color-primary-500);
--pgn-color-menu-item-hover-color: var(--pgn-color-btn-text-tertiary);
@@ -886,51 +894,6 @@
--pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base);
--pgn-color-icon-button-bg-primary-inverse-hover: var(--pgn-color-icon-button-accent);
--pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-text-primary-base);
- --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-bg-base);
- --pgn-color-dropdown-header: var(--pgn-color-gray-500);
- --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-muted: var(--pgn-color-light-200);
- --pgn-color-card-bg-dark: var(--pgn-color-primary-500);
- --pgn-color-card-bg-base: var(--pgn-color-bg-base);
- --pgn-color-bubble-bg-error: var(--pgn-color-danger-base);
- --pgn-color-bubble-bg-warning: var(--pgn-color-warning-base);
- --pgn-color-bubble-bg-success: var(--pgn-color-success-base);
- --pgn-color-breadcrumb-inverse-spacer: var(--pgn-color-light-700);
- --pgn-color-breadcrumb-inverse-active: var(--pgn-color-light-500);
- --pgn-color-breadcrumb-active: var(--pgn-color-gray-500);
- --pgn-color-breadcrumb-base: var(--pgn-color-primary-500);
- --pgn-color-badge-focus-box-shadow-dark: #273F2F0D;
- --pgn-color-badge-focus-box-shadow-light: #E1DDDB0D;
- --pgn-color-badge-focus-box-shadow-primary: #0A30550D;
- --pgn-color-badge-focus-bg-dark: #142018FF;
- --pgn-color-badge-focus-bg-light: #CAC3BFFF;
- --pgn-color-badge-focus-bg-primary: #051627FF;
- --pgn-color-badge-focus-dark: var(--pgn-color-badge-text-dark);
- --pgn-color-badge-focus-light: var(--pgn-color-badge-text-light);
- --pgn-color-badge-focus-primary: var(--pgn-color-badge-text-primary);
- --pgn-color-badge-bg-info: var(--pgn-color-info-base);
- --pgn-color-badge-bg-danger: var(--pgn-color-danger-base);
- --pgn-color-badge-bg-warning: var(--pgn-color-warning-base);
- --pgn-color-badge-bg-success: var(--pgn-color-success-base);
- --pgn-color-badge-bg-secondary: var(--pgn-color-secondary-base);
- --pgn-color-badge-text-info: #FFFFFFFF;
- --pgn-color-badge-text-warning: #454545FF;
- --pgn-color-badge-text-danger: #FFFFFFFF;
- --pgn-color-badge-text-success: #FFFFFFFF;
- --pgn-color-badge-text-secondary: #FFFFFFFF;
- --pgn-color-avatar-border: var(--pgn-color-light-300);
- --pgn-color-annotation-bg-error: var(--pgn-color-danger-base);
- --pgn-color-annotation-bg-success: var(--pgn-color-success-base);
- --pgn-color-annotation-text-light: var(--pgn-color-primary-500);
--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);
@@ -950,8 +913,6 @@
--pgn-color-form-control-select-base: var(--pgn-color-form-input-base);
--pgn-color-form-control-switch-indicator-checked-bg: var(--pgn-color-success-base);
--pgn-color-form-control-indicator-active-base: var(--pgn-color-active);
- --pgn-color-form-control-indicator-checked-border-base: var(--pgn-color-primary-500);
- --pgn-color-form-control-indicator-checked-bg-disabled: #0A305580;
--pgn-color-form-control-indicator-checked-invalid: var(--pgn-color-danger-base);
--pgn-color-form-control-indicator-checked-valid: var(--pgn-color-success-base);
--pgn-color-form-control-indicator-bg-disabled: var(--pgn-color-form-input-bg-disabled);
@@ -961,6 +922,21 @@
--pgn-color-form-input-border: var(--pgn-color-gray-500);
--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-bg-base);
+ --pgn-color-dropdown-header: var(--pgn-color-gray-500);
+ --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-muted: var(--pgn-color-light-200);
+ --pgn-color-card-bg-dark: var(--pgn-color-primary-500);
+ --pgn-color-card-bg-base: var(--pgn-color-bg-base);
--pgn-color-btn-disabled-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning);
--pgn-color-btn-disabled-border-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary);
--pgn-color-btn-disabled-border-outline-secondary: var(--pgn-color-secondary-base);
@@ -1093,6 +1069,36 @@
--pgn-color-btn-text-inverse-danger: var(--pgn-color-danger-base);
--pgn-color-btn-text-outline-danger: var(--pgn-color-danger-base);
--pgn-color-btn-text-brand: #FFFFFFFF;
+ --pgn-color-bubble-bg-error: var(--pgn-color-danger-base);
+ --pgn-color-bubble-bg-warning: var(--pgn-color-warning-base);
+ --pgn-color-bubble-bg-success: var(--pgn-color-success-base);
+ --pgn-color-breadcrumb-inverse-spacer: var(--pgn-color-light-700);
+ --pgn-color-breadcrumb-inverse-active: var(--pgn-color-light-500);
+ --pgn-color-breadcrumb-active: var(--pgn-color-gray-500);
+ --pgn-color-breadcrumb-base: var(--pgn-color-primary-500);
+ --pgn-color-badge-focus-box-shadow-dark: #273F2F0D;
+ --pgn-color-badge-focus-box-shadow-light: #E1DDDB0D;
+ --pgn-color-badge-focus-box-shadow-primary: #0A30550D;
+ --pgn-color-badge-focus-bg-dark: #142018FF;
+ --pgn-color-badge-focus-bg-light: #CAC3BFFF;
+ --pgn-color-badge-focus-bg-primary: #051627FF;
+ --pgn-color-badge-focus-dark: var(--pgn-color-badge-text-dark);
+ --pgn-color-badge-focus-light: var(--pgn-color-badge-text-light);
+ --pgn-color-badge-focus-primary: var(--pgn-color-badge-text-primary);
+ --pgn-color-badge-bg-info: var(--pgn-color-info-base);
+ --pgn-color-badge-bg-danger: var(--pgn-color-danger-base);
+ --pgn-color-badge-bg-warning: var(--pgn-color-warning-base);
+ --pgn-color-badge-bg-success: var(--pgn-color-success-base);
+ --pgn-color-badge-bg-secondary: var(--pgn-color-secondary-base);
+ --pgn-color-badge-text-info: #FFFFFFFF;
+ --pgn-color-badge-text-warning: #454545FF;
+ --pgn-color-badge-text-danger: #FFFFFFFF;
+ --pgn-color-badge-text-success: #FFFFFFFF;
+ --pgn-color-badge-text-secondary: #FFFFFFFF;
+ --pgn-color-avatar-border: var(--pgn-color-light-300);
+ --pgn-color-annotation-bg-error: var(--pgn-color-danger-base);
+ --pgn-color-annotation-bg-success: var(--pgn-color-success-base);
+ --pgn-color-annotation-text-light: var(--pgn-color-primary-500);
--pgn-color-theme-active-dark: var(--pgn-color-dark-900);
--pgn-color-theme-active-light: var(--pgn-color-light-900);
--pgn-color-theme-active-brand: var(--pgn-color-brand-900);
@@ -1125,7 +1131,7 @@
--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-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
- --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border);
+ --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base);
--pgn-color-action-default-danger-900: #60161DFF;
--pgn-color-action-default-danger-800: #691820FF;
--pgn-color-action-default-danger-700: #731A22FF;
@@ -1177,7 +1183,7 @@
--pgn-color-tab-more-link-dropdown-toggle-btn-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus);
--pgn-color-stepper-header-step-description-error: var(--pgn-color-stepper-header-step-bubble-error);
--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-icon: var(--pgn-color-danger-500);
--pgn-color-popover-danger-bg: var(--pgn-color-danger-100);
--pgn-color-popover-warning-icon: var(--pgn-color-warning-500);
--pgn-color-popover-warning-bg: var(--pgn-color-warning-100);
@@ -1193,7 +1199,7 @@
--pgn-color-nav-pills-inverse-link-bg-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
--pgn-color-nav-pills-inverse-link-border-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
--pgn-color-nav-pills-inverse-link-text-active-focus: var(--pgn-color-nav-pills-inverse-link-text-active);
- --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border);
+ --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border-base);
--pgn-color-nav-pills-base-link-active-bg: var(--pgn-color-bg-active);
--pgn-color-nav-tabs-inverse-link-bg-hover: var(--pgn-color-nav-tabs-inverse-link-border-bottom);
--pgn-color-menu-item-focus-bg: var(--pgn-color-btn-active-bg-tertiary);
@@ -1219,27 +1225,6 @@
--pgn-color-icon-button-bg-success-active-hover: var(--pgn-color-icon-button-bg-success-active-base);
--pgn-color-icon-button-bg-secondary-active-focus: var(--pgn-color-icon-button-bg-secondary-active-base);
--pgn-color-icon-button-bg-secondary-active-hover: var(--pgn-color-icon-button-bg-secondary-active-base);
- --pgn-color-dropzone-border-error: var(--pgn-color-danger-300);
- --pgn-color-dropzone-border-focus: var(--pgn-color-info-300);
- --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-bg-active);
- --pgn-color-badge-focus-box-shadow-info: #006DAA0D;
- --pgn-color-badge-focus-box-shadow-warning: #FFD9000D;
- --pgn-color-badge-focus-box-shadow-danger: #C32D3A0D;
- --pgn-color-badge-focus-box-shadow-success: #1782530D;
- --pgn-color-badge-focus-box-shadow-secondary: #4545450D;
- --pgn-color-badge-focus-bg-info: #004C77FF;
- --pgn-color-badge-focus-bg-warning: #CCAE00FF;
- --pgn-color-badge-focus-bg-danger: #9A232EFF;
- --pgn-color-badge-focus-bg-success: #0F5737FF;
- --pgn-color-badge-focus-bg-secondary: #2B2B2BFF;
- --pgn-color-badge-focus-info: var(--pgn-color-badge-text-info);
- --pgn-color-badge-focus-danger: var(--pgn-color-badge-text-danger);
- --pgn-color-badge-focus-warning: var(--pgn-color-badge-text-warning);
- --pgn-color-badge-focus-success: var(--pgn-color-badge-text-success);
- --pgn-color-badge-focus-secondary: var(--pgn-color-badge-text-secondary);
--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;
@@ -1278,6 +1263,13 @@
--pgn-color-form-input-focus-bg: var(--pgn-color-form-input-bg-base);
--pgn-color-form-input-focus-border: var(--pgn-color-input-focus);
--pgn-color-form-input-group-addon-border: var(--pgn-color-form-input-border);
+ --pgn-color-dropzone-border-error: var(--pgn-color-danger-300);
+ --pgn-color-dropzone-border-focus: var(--pgn-color-info-300);
+ --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-bg-active);
+ --pgn-color-card-border-focus-dark: var(--pgn-color-theme-focus-primary);
--pgn-color-btn-disabled-link: var(--pgn-color-disabled);
--pgn-color-btn-disabled-border-outline-warning: var(--pgn-color-btn-border-outline-warning);
--pgn-color-btn-disabled-border-outline-success: var(--pgn-color-btn-border-outline-success);
@@ -1424,6 +1416,21 @@
--pgn-color-btn-text-secondary: #FFFFFFFF;
--pgn-color-btn-text-info: #FFFFFFFF;
--pgn-color-btn-text-danger: #FFFFFFFF;
+ --pgn-color-badge-focus-box-shadow-info: #006DAA0D;
+ --pgn-color-badge-focus-box-shadow-warning: #FFD9000D;
+ --pgn-color-badge-focus-box-shadow-danger: #C32D3A0D;
+ --pgn-color-badge-focus-box-shadow-success: #1782530D;
+ --pgn-color-badge-focus-box-shadow-secondary: #4545450D;
+ --pgn-color-badge-focus-bg-info: #004C77FF;
+ --pgn-color-badge-focus-bg-warning: #CCAE00FF;
+ --pgn-color-badge-focus-bg-danger: #9A232EFF;
+ --pgn-color-badge-focus-bg-success: #0F5737FF;
+ --pgn-color-badge-focus-bg-secondary: #2B2B2BFF;
+ --pgn-color-badge-focus-info: var(--pgn-color-badge-text-info);
+ --pgn-color-badge-focus-danger: var(--pgn-color-badge-text-danger);
+ --pgn-color-badge-focus-warning: var(--pgn-color-badge-text-warning);
+ --pgn-color-badge-focus-success: var(--pgn-color-badge-text-success);
+ --pgn-color-badge-focus-secondary: var(--pgn-color-badge-text-secondary);
--pgn-color-theme-active-danger: var(--pgn-color-danger-900);
--pgn-color-theme-active-warning: var(--pgn-color-warning-900);
--pgn-color-theme-active-info: var(--pgn-color-info-900);
@@ -1456,27 +1463,16 @@
--pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100);
--pgn-color-table-caption: var(--pgn-color-text-muted);
--pgn-color-input-btn-focus: var(--pgn-color-input-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-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-other-content-form-control-radio-indicator-icon-checked-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C32D3AFF'/%3e%3c/svg%3e");
--pgn-other-content-form-control-radio-indicator-icon-checked-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23178253FF'/%3e%3c/svg%3e");
--pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,");
--pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,");
+ --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus);
--pgn-color-pagination-border-active: var(--pgn-color-pagination-bg-active);
--pgn-color-pagination-text-base: var(--pgn-color-link-base);
- --pgn-color-alert-border-warning: var(--pgn-color-theme-border-warning);
- --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-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-color-nav-tabs-inverse-link-bg-active: var(--pgn-color-nav-tabs-inverse-link-bg-hover);
--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);
@@ -1489,6 +1485,7 @@
--pgn-color-form-control-checkbox-indicator-indeterminate-base: var(--pgn-color-form-control-indicator-checked-base);
--pgn-color-form-control-indicator-active-border: var(--pgn-color-form-control-indicator-active-bg);
--pgn-color-form-control-indicator-checked-border-focus: var(--pgn-color-form-input-focus-border);
+ --pgn-color-form-control-indicator-checked-border-base: var(--pgn-color-form-control-indicator-checked-base);
--pgn-color-btn-disabled-border-warning: var(--pgn-color-btn-border-warning);
--pgn-color-btn-disabled-border-success: var(--pgn-color-btn-border-success);
--pgn-color-btn-disabled-border-outline-primary: var(--pgn-color-btn-hover-text-outline-primary);
@@ -1593,6 +1590,18 @@
--pgn-color-btn-hover-text-inverse-outline-danger: var(--pgn-color-theme-hover-danger);
--pgn-color-btn-hover-text-outline-danger: var(--pgn-color-theme-hover-danger);
--pgn-color-btn-hover-text-brand: #FFFFFFFF;
+ --pgn-color-alert-border-warning: var(--pgn-color-theme-border-warning);
+ --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-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-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);
diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json
index 4e384abea9..ebf7bae926 100644
--- a/tokens/src/core/components/Card.json
+++ b/tokens/src/core/components/Card.json
@@ -67,7 +67,7 @@
"vertical": {
"max-height": { "value": "140px", "type": "dimension", "source": "$card-image-vertical-max-height" }
},
- "border-radius": { "value": ".3125rem", "type": "dimension", "source": "$card-image-border-radius" }
+ "border-radius": { "value": "{size.card.border.radius.base}", "type": "dimension", "source": "$card-image-border-radius" }
},
"logo": {
"width": { "value": "7.25rem", "type": "dimension", "source": "$card-logo-width" },
diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json
index 9e4e528837..26343bc957 100644
--- a/tokens/src/core/components/Carousel.json
+++ b/tokens/src/core/components/Carousel.json
@@ -11,7 +11,7 @@
"width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" },
"height": {
"base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" },
- "area-hit": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
+ "area-hit": { "value": "10px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
}
},
"caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" }
@@ -27,7 +27,7 @@
"base": {
"value": "transform {transition.carousel.duration} ease-in-out",
"type": "transition",
- "source": "$carousel-transition-duration"
+ "source": "$carousel-transition"
},
"duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" },
"indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" },
diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json
index 6e66c1edd7..b6371f8d2c 100644
--- a/tokens/src/core/components/DataTable.json
+++ b/tokens/src/core/components/DataTable.json
@@ -19,7 +19,7 @@
"x": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-x" },
"y": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-y" },
"small": { "value": ".5rem", "type": "dimension", "source": "$data-table-padding-small" },
- "cell": { "value": ".75rem", "type": "dimension", "source": "$data-table-cell-padding" }
+ "cell": { "value": ".5rem .75rem", "type": "dimension", "source": "$data-table-cell-padding" }
},
"footer-position": { "value": "center", "type": "position", "source": "$data-table-footer-position" }
}
diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json
index e711b384b5..d6a9244578 100644
--- a/tokens/src/core/components/Nav.json
+++ b/tokens/src/core/components/Nav.json
@@ -45,7 +45,7 @@
"y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" },
"x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" }
},
- "distance-to-border": { "value": ".313rem", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" }
+ "distance-to-border": { "value": "4px", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" }
},
"divider": {
"margin-y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$nav-divider-margin-y" }
diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json
index 299edaae47..82a0626871 100644
--- a/tokens/src/core/components/ProgressBar.json
+++ b/tokens/src/core/components/ProgressBar.json
@@ -19,11 +19,6 @@
"threshold-circle": { "value": ".5625rem", "type": "dimension", "source": "$progress-threshold-circle" }
}
},
- "elevation": {
- "progress-bar": {
- "box-shadow": { "value": "none", "type": "shadow", "source": "$progress-box-shadow" }
- }
- },
"spacing": {
"progress-bar": {
"hint": {
diff --git a/tokens/src/core/components/Tab.json b/tokens/src/core/components/Tab.json
index ae4ffe14a0..4413acf5da 100644
--- a/tokens/src/core/components/Tab.json
+++ b/tokens/src/core/components/Tab.json
@@ -11,7 +11,8 @@
},
"inverse-tabs-link-dropdown-toggle": {
"padding-x": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x" },
- "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" }
+ "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" },
+ "distance": { "value": "5px", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-distance" }
}
}
}
diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json
index eb64650215..e49229d148 100644
--- a/tokens/src/themes/light/components/Breadcrumb.json
+++ b/tokens/src/themes/light/components/Breadcrumb.json
@@ -3,7 +3,6 @@
"breadcrumb": {
"bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" },
"base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" },
- "divider": { "value": "{color.gray.600}", "type": "color", "source": "$breadcrumb-divider-color" },
"active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" },
"inverse": {
"base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" },
diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json
index 088debae77..bf2f03a253 100644
--- a/tokens/src/themes/light/components/Dropdown.json
+++ b/tokens/src/themes/light/components/Dropdown.json
@@ -17,7 +17,12 @@
"link": {
"base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" },
"hover": {
- "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-hover-color" },
+ "base": {
+ "value": "{color.gray.900}",
+ "type": "color",
+ "source": "$dropdown-link-hover-color",
+ "modify": [{ "type": "darken", "amount": 0.5 }]
+ },
"bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" }
},
"active": {
diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json
index 65372f87bc..9568b4d677 100644
--- a/tokens/src/themes/light/components/Form/color.json
+++ b/tokens/src/themes/light/components/Form/color.json
@@ -49,7 +49,7 @@
"value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-bg"
},
"disabled": {
- "value": "{color.primary.500}",
+ "value": "{color.primary.base}",
"type": "color",
"source": "$custom-control-indicator-checked-disabled-bg",
"modify": [{ "type": "alpha", "amount": 0.5 }]
@@ -57,7 +57,7 @@
},
"border": {
"base": {
- "value": "{color.primary.500}",
+ "value": "{color.form.control.indicator.checked.base}",
"type": "color",
"source": "$custom-control-indicator-checked-border-color"
},
diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json
index baf3d19c4b..074eae400c 100644
--- a/tokens/src/themes/light/components/Nav.json
+++ b/tokens/src/themes/light/components/Nav.json
@@ -9,7 +9,7 @@
"source": "$nav-tabs-link-active-border-color"
},
"hover": {
- "value": "transparent transparent {color.nav.tabs.base.border}",
+ "value": "transparent transparent {color.nav.tabs.base.border.base}",
"type": "color",
"source": "$nav-tabs-link-hover-border-color"
},
@@ -33,7 +33,16 @@
},
"tabs": {
"base": {
- "border": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" },
+ "text": {
+ "disabled": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-disabled-bg" }
+ },
+ "bg": {
+ "hover": { "value": "transparent", "type": "color", "source": "$nav-tabs-hover-bg" }
+ },
+ "border": {
+ "base": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" },
+ "focus": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-focus-border-color" }
+ },
"link": {
"hover": {
"bg": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-link-hover-bg" }
@@ -41,6 +50,9 @@
"active": {
"text": { "value": "{color.primary.500}", "type": "color", "source": "$nav-tabs-link-active-color" },
"bg": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-active-bg" }
+ },
+ "disabled": {
+ "border": { "value": "{color.nav.link.border}", "type": "color", "source": "$nav-tabs-link-disabled-border-color" }
}
}
},
@@ -64,6 +76,9 @@
}
},
"tab-content-color": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-tab-content-color" }
+ },
+ "dropdown": {
+ "border": { "value": "{color.nav.tabs.inverse.link.bg.active-hover}", "type": "color", "source": "$nav-inverse-tabs-dropdown-border-color" }
}
}
},
@@ -72,9 +87,10 @@
"link": {
"active": {
"text": { "value": "{color.active}", "type": "color", "source": "$nav-pills-link-active-color" },
- "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" }
+ "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" },
+ "border": { "value": "{color.white}", "type": "color", "source": "$nav-pills-link-active-border-color" }
},
- "border": { "value": "{color.nav.tabs.base.border}", "type": "color", "source": "$nav-pills-link-border-color" }
+ "border": { "value": "{color.nav.tabs.base.border.base}", "type": "color", "source": "$nav-pills-link-border-color" }
}
},
"inverse": {
@@ -104,9 +120,14 @@
"source": "$nav-inverse-pills-link-active-hover-border-color"
},
"active-focus": {
- "value": "{color.nav.pills.inverse.link.text.base}",
+ "value": "{color.primary.base}",
"type": "color",
"source": "$nav-inverse-pills-link-active-focus-border-color"
+ },
+ "focus-hover": {
+ "value": "{color.nav.pills.inverse.link.border.active-focus}",
+ "type": "color",
+ "source": "$nav-inverse-pills-link-active-focus-hover-border-color"
}
},
"bg": {
diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json
index 013ce92c0b..3ba213c768 100644
--- a/tokens/src/themes/light/components/Popover.json
+++ b/tokens/src/themes/light/components/Popover.json
@@ -39,7 +39,7 @@
},
"danger": {
"bg": { "value": "{color.danger.100}", "type": "color", "source": "$popover-danger-bg" },
- "icon": { "value": "{color.warning.500}", "type": "color", "source": "$popover-danger-icon-color" }
+ "icon": { "value": "{color.danger.500}", "type": "color", "source": "$popover-danger-icon-color" }
}
}
},
diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json
index 0c0181ab60..4814f474f5 100644
--- a/tokens/src/themes/light/components/ProductTour.json
+++ b/tokens/src/themes/light/components/ProductTour.json
@@ -4,8 +4,8 @@
"checkpoint": {
"bg": { "value": "{color.light.300}", "type": "color", "source": "$checkpoint-background-color" },
"body": { "value": "{color.gray.700}", "type": "color", "source": "$checkpoint-body-color" },
- "border": { "value": "{color.brand.500}", "type": "color", "source": "$checkpoint-border-color" },
- "breadcrumb": { "value": "{color.primary.500}", "type": "color", "source": "$checkpoint-breadcrumb-color" },
+ "border": { "value": "{color.brand.base}", "type": "color", "source": "$checkpoint-border-color" },
+ "breadcrumb": { "value": "{color.primary.base}", "type": "color", "source": "$checkpoint-breadcrumb-color" },
"box-shadow": {
"value": "{color.black}",
"type": "color",
diff --git a/tokens/src/themes/light/components/Tab.json b/tokens/src/themes/light/components/Tab.json
index 5f3f1bbf4f..b8647e01c7 100644
--- a/tokens/src/themes/light/components/Tab.json
+++ b/tokens/src/themes/light/components/Tab.json
@@ -48,8 +48,15 @@
"type": "color",
"source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg"
}
+ },
+ "border": {
+ "focus": {
+ "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}",
+ "type": "color",
+ "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color"
+ }
}
}
}
}
-}
\ No newline at end of file
+}