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 +}