From 55c47d565ad9a67b3f77d0377ad5b09c63954d17 Mon Sep 17 00:00:00 2001 From: Peter Kulko Date: Mon, 9 Sep 2024 23:28:29 +0300 Subject: [PATCH] refactor: corrected expanded tokens --- lib/build-tokens.js | 4 +- src/Annotation/index.scss | 14 +- src/Card/index.scss | 10 +- src/Carousel/index.scss | 12 +- src/CloseButton/index.scss | 6 +- src/DataTable/index.scss | 22 +- src/Dropzone/index.scss | 32 +- src/Form/_bootstrap-custom-forms.scss | 21 +- src/Form/_index.scss | 7 +- src/Form/_mixins.scss | 7 +- src/IconButton/index.scss | 144 ++++- src/Menu/index.scss | 6 +- src/Modal/_ModalDialog.scss | 10 +- src/Pagination/pagination-bootstrap.scss | 7 +- src/SelectableBox/index.scss | 10 +- src/Sticky/index.scss | 10 +- src/Toast/bootstrap-toast.scss | 10 +- src/Toast/index.scss | 10 +- src/Tooltip/index.scss | 14 +- styles/css/core/variables.css | 5 +- styles/css/themes/light/variables.css | 544 ++++++++++++++--- styles/scss/core/_variables.scss | 572 ++++++++++++++++-- .../themes/light/components/Annotation.json | 6 +- .../src/themes/light/components/Dropzone.json | 8 +- .../themes/light/components/IconButton.json | 36 +- .../src/themes/light/components/Tooltip.json | 6 +- tokens/utils.js | 56 -- www/src/components/_doc-elements.scss | 10 +- www/src/components/header/Header.scss | 10 +- 29 files changed, 1343 insertions(+), 266 deletions(-) diff --git a/lib/build-tokens.js b/lib/build-tokens.js index 93870a0519..60875a44bc 100755 --- a/lib/build-tokens.js +++ b/lib/build-tokens.js @@ -4,7 +4,7 @@ const { initializeStyleDictionary, colorTransform, } = require('../tokens/style-dictionary'); -const { createIndexCssFile, constructExpandedToken } = require('../tokens/utils'); +const { createIndexCssFile } = require('../tokens/utils'); /** * Builds tokens for CSS styles from JSON source files. @@ -53,7 +53,7 @@ async function buildTokensCommand(commandArgs) { path.resolve(__dirname, '../tokens/src/core/**/*.json'), path.resolve(__dirname, '../tokens/src/core/**/*.toml'), ], - expand: (token) => constructExpandedToken(token), + expand: true, source: tokensSource ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`] : [], diff --git a/src/Annotation/index.scss b/src/Annotation/index.scss index a06f5629a1..3523ed2925 100644 --- a/src/Annotation/index.scss +++ b/src/Annotation/index.scss @@ -4,7 +4,19 @@ padding: var(--pgn-spacing-annotation-padding); border-radius: var(--pgn-size-annotation-border-radius); max-width: var(--pgn-size-annotation-max-width); - filter: var(--pgn-elevation-annotation-box-shadow); + filter: + drop-shadow( + var(--pgn-elevation-annotation-box-shadow-1-offset-x) + var(--pgn-elevation-annotation-box-shadow-1-offset-y) + var(--pgn-elevation-annotation-box-shadow-1-blur) + var(--pgn-elevation-annotation-box-shadow-1-color) + ), + drop-shadow( + var(--pgn-elevation-annotation-box-shadow-2-offset-x) + var(--pgn-elevation-annotation-box-shadow-2-offset-y) + var(--pgn-elevation-annotation-box-shadow-2-blur) + var(--pgn-elevation-annotation-box-shadow-2-color) + ); word-wrap: break-word; position: relative; display: inline-block; diff --git a/src/Card/index.scss b/src/Card/index.scss index 383726a8cf..11a2607f5b 100644 --- a/src/Card/index.scss +++ b/src/Card/index.scss @@ -353,7 +353,15 @@ a.pgn__card { width: var(--pgn-size-card-logo-width); height: var(--pgn-size-card-logo-height); border-radius: var(--pgn-size-card-border-radius-logo); - box-shadow: var(--pgn-elevation-box-shadow-level-1); + box-shadow: + var(--pgn-elevation-box-shadow-level-1-1-offset-y) + var(--pgn-elevation-box-shadow-level-1-1-offset-x) + var(--pgn-elevation-box-shadow-level-1-1-blur) + var(--pgn-elevation-box-shadow-level-1-1-color), + var(--pgn-elevation-box-shadow-level-1-2-offset-y) + var(--pgn-elevation-box-shadow-level-1-2-offset-x) + var(--pgn-elevation-box-shadow-level-1-2-blur) + var(--pgn-elevation-box-shadow-level-1-2-color); padding: map_get($spacers, 2); background-color: var(--pgn-color-white); display: none; diff --git a/src/Carousel/index.scss b/src/Carousel/index.scss index a046f79f46..f477c7fb0a 100644 --- a/src/Carousel/index.scss +++ b/src/Carousel/index.scss @@ -21,7 +21,11 @@ width: 100%; margin-right: -100%; backface-visibility: hidden; - transition: var(--pgn-transition-carousel-base); + transition: + var(--pgn-transition-carousel-base-property) + var(--pgn-transition-carousel-base-duration) + var(--pgn-transition-carousel-base-timing-function) + var(--pgn-transition-carousel-base-delay); } .carousel-item.active, @@ -58,7 +62,11 @@ .active.carousel-item-right { z-index: 0; opacity: 0; - transition: opacity 0s var(--pgn-transition-carousel-base); + transition: + opacity 0s var(--pgn-transition-carousel-base-property) + var(--pgn-transition-carousel-base-duration) + var(--pgn-transition-carousel-base-timing-function) + var(--pgn-transition-carousel-base-delay); } } diff --git a/src/CloseButton/index.scss b/src/CloseButton/index.scss index cde16e1bb3..a74b5eded6 100644 --- a/src/CloseButton/index.scss +++ b/src/CloseButton/index.scss @@ -3,7 +3,11 @@ font-weight: var(--pgn-typography-close-button-font-weight); line-height: 1; color: var(--pgn-color-close-button); - text-shadow: var(--pgn-elevation-close-button-text-shadow); + text-shadow: + var(--pgn-elevation-close-button-text-shadow-offset-x) + var(--pgn-elevation-close-button-text-shadow-offset-y) + var(--pgn-elevation-close-button-text-shadow-blur) + var(--pgn-elevation-close-button-text-shadow-color); opacity: .5; @include font-size(var(--pgn-typography-close-button-font-size)); diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss index 62e8e01a3d..e1cb447157 100644 --- a/src/DataTable/index.scss +++ b/src/DataTable/index.scss @@ -2,7 +2,11 @@ font-size: var(--pgn-typography-font-size-sm); border-radius: var(--pgn-size-border-radius-base); background-color: var(--pgn-color-data-table-bg-base); - box-shadow: var(--pgn-elevation-data-table-box-shadow); + box-shadow: + var(--pgn-elevation-data-table-box-shadow-offset-x) + var(--pgn-elevation-data-table-box-shadow-offset-y) + var(--pgn-elevation-data-table-box-shadow-blur) + var(--pgn-elevation-data-table-box-shadow-color); &.hide-shadow { box-shadow: none; @@ -93,7 +97,11 @@ .pgn__data-table-layout-sidebar { background-color: var(--pgn-color-data-table-bg-base); border-radius: var(--pgn-size-border-radius-base); - box-shadow: var(--pgn-elevation-data-table-box-shadow); + box-shadow: + var(--pgn-elevation-data-table-box-shadow-offset-x) + var(--pgn-elevation-data-table-box-shadow-offset-y) + var(--pgn-elevation-data-table-box-shadow-blur) + var(--pgn-elevation-data-table-box-shadow-color); padding: var(--pgn-spacing-data-table-padding-small); margin-right: var(--pgn-spacing-spacer-4); flex: 0 0 var(--pgn-size-data-table-layout-sidebar-width); @@ -286,7 +294,15 @@ .pgn__data-table__overflow-actions-menu { background: var(--pgn-color-white); padding: var(--pgn-spacing-spacer-2); - box-shadow: var(--pgn-elevation-box-shadow-level-1); + box-shadow: + var(--pgn-elevation-box-shadow-level-1-1-offset-y) + var(--pgn-elevation-box-shadow-level-1-1-offset-x) + var(--pgn-elevation-box-shadow-level-1-1-blur) + var(--pgn-elevation-box-shadow-level-1-1-color), + var(--pgn-elevation-box-shadow-level-1-2-offset-y) + var(--pgn-elevation-box-shadow-level-1-2-offset-x) + var(--pgn-elevation-box-shadow-level-1-2-blur) + var(--pgn-elevation-box-shadow-level-1-2-color); border-radius: 4px; } diff --git a/src/Dropzone/index.scss b/src/Dropzone/index.scss index c1c4ae871c..d5c73e4098 100644 --- a/src/Dropzone/index.scss +++ b/src/Dropzone/index.scss @@ -16,19 +16,43 @@ } &:hover { - box-shadow: var(--pgn-elevation-dropzone-hover); + box-shadow: + var(--pgn-elevation-dropzone-hover-inset) + var(--pgn-elevation-dropzone-hover-offset-x) + var(--pgn-elevation-dropzone-hover-offset-y) + var(--pgn-elevation-dropzone-hover-blur) + var(--pgn-elevation-dropzone-hover-spread) + var(--pgn-elevation-dropzone-hover-color); } &:focus { - box-shadow: var(--pgn-elevation-dropzone-focus); + box-shadow: + var(--pgn-elevation-dropzone-focus-inset) + var(--pgn-elevation-dropzone-focus-offset-x) + var(--pgn-elevation-dropzone-focus-offset-y) + var(--pgn-elevation-dropzone-focus-blur) + var(--pgn-elevation-dropzone-focus-spread) + var(--pgn-elevation-dropzone-focus-color); } &.pgn__dropzone-validation-error { - box-shadow: var(--pgn-elevation-dropzone-error); + box-shadow: + var(--pgn-elevation-dropzone-error-inset) + var(--pgn-elevation-dropzone-error-offset-x) + var(--pgn-elevation-dropzone-error-offset-y) + var(--pgn-elevation-dropzone-error-blur) + var(--pgn-elevation-dropzone-error-spread) + var(--pgn-elevation-dropzone-error-color); } &.pgn__dropzone-active { - box-shadow: var(--pgn-elevation-dropzone-active); + box-shadow: + var(--pgn-elevation-dropzone-active-inset) + var(--pgn-elevation-dropzone-active-offset-x) + var(--pgn-elevation-dropzone-active-offset-y) + var(--pgn-elevation-dropzone-active-blur) + var(--pgn-elevation-dropzone-active-spread) + var(--pgn-elevation-dropzone-active-color); } } diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss index b462f84da0..25249e5c59 100644 --- a/src/Form/_bootstrap-custom-forms.scss +++ b/src/Form/_bootstrap-custom-forms.scss @@ -39,7 +39,12 @@ } &:focus ~ .custom-control-label::before { - box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus); + box-shadow: + var(--pgn-elevation-form-control-indicator-checked-focus-offset-x) + var(--pgn-elevation-form-control-indicator-checked-focus-offset-y) + var(--pgn-elevation-form-control-indicator-checked-focus-blur) + var(--pgn-elevation-form-control-indicator-checked-focus-spread) + var(--pgn-elevation-form-control-indicator-checked-focus-color); } &:focus:not(:checked) ~ .custom-control-label::before { @@ -249,7 +254,12 @@ &:focus { border-color: var(--pgn-color-form-control-select-border-focus); outline: 0; - box-shadow: var(--pgn-elevation-form-control-select-border-focus); + box-shadow: + var(--pgn-elevation-form-control-select-border-focus-offset-x) + var(--pgn-elevation-form-control-select-border-focus-offset-y) + var(--pgn-elevation-form-control-select-border-focus-blur) + var(--pgn-elevation-form-control-select-border-focus-spread) + var(--pgn-elevation-form-control-select-border-focus-color); &::-ms-value { // For visual consistency with other platforms/browsers, @@ -328,7 +338,12 @@ &:focus ~ .custom-file-label { border-color: var(--pgn-color-form-control-file-border-focus); - box-shadow: var(--pgn-elevation-form-control-file-focus); + box-shadow: + var(--pgn-elevation-form-control-file-focus-offset-x) + var(--pgn-elevation-form-control-file-focus-offset-y) + var(--pgn-elevation-form-control-file-focus-blur) + var(--pgn-elevation-form-control-file-focus-spread) + var(--pgn-elevation-form-control-file-focus-color); } // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 diff --git a/src/Form/_index.scss b/src/Form/_index.scss index ccf3f58818..8f81e670b9 100644 --- a/src/Form/_index.scss +++ b/src/Form/_index.scss @@ -411,7 +411,12 @@ select.form-control { } &:not(:disabled):hover { - box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus); + box-shadow: + var(--pgn-elevation-form-control-indicator-checked-focus-offset-x) + var(--pgn-elevation-form-control-indicator-checked-focus-offset-y) + var(--pgn-elevation-form-control-indicator-checked-focus-blur) + var(--pgn-elevation-form-control-indicator-checked-focus-spread) + var(--pgn-elevation-form-control-indicator-checked-focus-color); } &:disabled { diff --git a/src/Form/_mixins.scss b/src/Form/_mixins.scss index 6493a51fa9..6641ff90e7 100644 --- a/src/Form/_mixins.scss +++ b/src/Form/_mixins.scss @@ -50,7 +50,12 @@ background-color: var(--pgn-color-form-input-focus-bg); border-color: var(--pgn-color-form-input-focus-border); outline: 0; - box-shadow: var(--pgn-elevation-form-input-focus); + box-shadow: + var(--pgn-elevation-form-input-focus-offset-x) + var(--pgn-elevation-form-input-focus-offset-y) + var(--pgn-elevation-form-input-focus-blur) + var(--pgn-elevation-form-input-focus-spread) + var(--pgn-elevation-form-input-focus-color); } @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning); diff --git a/src/IconButton/index.scss b/src/IconButton/index.scss index d1454db5d9..86c61fc98e 100644 --- a/src/IconButton/index.scss +++ b/src/IconButton/index.scss @@ -74,7 +74,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-primary-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-primary-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-primary-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-primary-base); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-primary-base-inset) + var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-primary-base-blur) + var(--pgn-elevation-icon-button-box-shadow-primary-base-spread) + var(--pgn-elevation-icon-button-box-shadow-primary-base-color); } &.btn-icon-inverse-primary { @@ -84,7 +90,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-primary-inverse-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-primary-inverse-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-primary-inverse); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-color); } &.btn-icon-primary-active { @@ -115,7 +127,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-secondary-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-secondary-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-secondary-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-secondary-base); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-secondary-base-inset) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-blur) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-spread) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-color); } &.btn-icon-inverse-secondary { @@ -125,7 +143,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-secondary-inverse-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-secondary-inverse-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-secondary-inverse); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-color); } &.btn-icon-secondary-active { @@ -156,7 +180,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-brand-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-brand-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-brand-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-brand-base); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-brand-base-inset) + var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-brand-base-blur) + var(--pgn-elevation-icon-button-box-shadow-brand-base-spread) + var(--pgn-elevation-icon-button-box-shadow-brand-base-color); } &.btn-icon-inverse-brand { @@ -166,7 +196,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-brand-inverse-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-brand-inverse-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-brand-inverse); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-color); } &.btn-icon-brand-active { @@ -197,7 +233,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-success-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-success-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-success-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-success-base); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-success-base-inset) + var(--pgn-elevation-icon-button-box-shadow-success-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-success-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-success-base-blur) + var(--pgn-elevation-icon-button-box-shadow-success-base-spread) + var(--pgn-elevation-icon-button-box-shadow-success-base-color); } &.btn-icon-inverse-success { @@ -207,7 +249,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-success-inverse-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-success-inverse-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-success-inverse-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-success-inverse); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-success-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-color); } &.btn-icon-success-active { @@ -238,7 +286,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-warning-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-warning-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-warning-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-warning-base); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-warning-base-inset) + var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-warning-base-blur) + var(--pgn-elevation-icon-button-box-shadow-warning-base-spread) + var(--pgn-elevation-icon-button-box-shadow-warning-base-color); } &.btn-icon-inverse-warning { @@ -248,7 +302,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-warning-inverse-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-warning-inverse-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-warning-inverse); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-color); } &.btn-icon-warning-active { @@ -279,7 +339,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-danger-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-danger-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-danger-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-danger-base); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-danger-base-inset) + var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-danger-base-blur) + var(--pgn-elevation-icon-button-box-shadow-danger-base-spread) + var(--pgn-elevation-icon-button-box-shadow-danger-base-color); } &.btn-icon-inverse-danger { @@ -289,7 +355,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-danger-inverse-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-danger-inverse-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-danger-inverse); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-color); } &.btn-icon-danger-active { @@ -320,7 +392,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-light-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-light-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-light-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-light-base); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-light-base-inset) + var(--pgn-elevation-icon-button-box-shadow-light-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-light-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-light-base-blur) + var(--pgn-elevation-icon-button-box-shadow-light-base-spread) + var(--pgn-elevation-icon-button-box-shadow-light-base-color); } &.btn-icon-inverse-light { @@ -330,7 +408,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-light-inverse-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-light-inverse-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-light-inverse-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-light-inverse); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-light-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-color); } &.btn-icon-light-active { @@ -361,7 +445,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-dark-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-dark-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-dark-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-dark-base); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-dark-base-inset) + var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-dark-base-blur) + var(--pgn-elevation-icon-button-box-shadow-dark-base-spread) + var(--pgn-elevation-icon-button-box-shadow-dark-base-color); } &.btn-icon-inverse-dark { @@ -371,7 +461,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-dark-inverse-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-dark-inverse-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-dark-inverse); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-dark-inverse) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-color); } &.btn-icon-dark-active { @@ -402,7 +498,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-black-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-black-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-black-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-black-base); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-black-base-inset) + var(--pgn-elevation-icon-button-box-shadow-black-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-black-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-black-base-blur) + var(--pgn-elevation-icon-button-box-shadow-black-base-spread) + var(--pgn-elevation-icon-button-box-shadow-black-base-color); } &.btn-icon-inverse-black { @@ -412,7 +514,13 @@ --btn-icon-color: var(--pgn-color-icon-button-text-black-inverse-base); --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-black-inverse-focus); --btn-icon-focus-color: var(--pgn-color-icon-button-text-black-inverse-focus); - --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-black-inverse); + --btn-icon-box-shadow: + var(--pgn-elevation-icon-button-box-shadow-black-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-color); } &.btn-icon-black-active { diff --git a/src/Menu/index.scss b/src/Menu/index.scss index fddd792f10..60f7c609a2 100644 --- a/src/Menu/index.scss +++ b/src/Menu/index.scss @@ -1,6 +1,10 @@ .pgn__menu { border-radius: var(--pgn-size-menu-base-border-radius); - box-shadow: var(--pgn-elevation-menu-box-shadow); + box-shadow: + var(--pgn-elevation-menu-box-shadow-offset-x) + var(--pgn-elevation-menu-box-shadow-offset-y) + var(--pgn-elevation-menu-box-shadow-blur) + var(--pgn-elevation-menu-box-shadow-color); background-color: var(--pgn-color-menu-bg); overflow: auto; max-height: var(--pgn-size-menu-base-max-height); diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss index a49be42af7..ba68c4bab1 100644 --- a/src/Modal/_ModalDialog.scss +++ b/src/Modal/_ModalDialog.scss @@ -8,7 +8,15 @@ max-width: var(--pgn-size-modal-md); overflow: auto; width: 100vw; - box-shadow: var(--pgn-elevation-modal-content-box-shadow-sm-up); + box-shadow: + var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x) + var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y) + var(--pgn-elevation-modal-content-box-shadow-sm-up-1-blur) + var(--pgn-elevation-modal-content-box-shadow-sm-up-1-color), + var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x) + var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y) + var(--pgn-elevation-modal-content-box-shadow-sm-up-2-blur) + var(--pgn-elevation-modal-content-box-shadow-sm-up-2-color); border: solid var(--pgn-size-modal-content-border-width) var(--pgn-color-modal-content-border); position: relative; diff --git a/src/Pagination/pagination-bootstrap.scss b/src/Pagination/pagination-bootstrap.scss index 505732b90d..07d87a3383 100644 --- a/src/Pagination/pagination-bootstrap.scss +++ b/src/Pagination/pagination-bootstrap.scss @@ -27,7 +27,12 @@ &:focus { z-index: 3; outline: var(--pgn-size-pagination-focus-outline); - box-shadow: var(--pgn-elevation-pagination-focus-box-shadow); + box-shadow: + var(--pgn-elevation-pagination-focus-box-shadow-offset-x) + var(--pgn-elevation-pagination-focus-box-shadow-offset-y) + var(--pgn-elevation-pagination-focus-box-shadow-blur) + var(--pgn-elevation-pagination-focus-box-shadow-spread) + var(--pgn-elevation-pagination-focus-box-shadow-color); } } diff --git a/src/SelectableBox/index.scss b/src/SelectableBox/index.scss index 5fad5a2146..38f9c8819f 100644 --- a/src/SelectableBox/index.scss +++ b/src/SelectableBox/index.scss @@ -18,7 +18,15 @@ position: relative; height: 100%; padding: var(--pgn-spacing-selectable-box-padding); - box-shadow: var(--pgn-elevation-box-shadow-level-1); + box-shadow: + var(--pgn-elevation-box-shadow-level-1-1-offset-y) + var(--pgn-elevation-box-shadow-level-1-1-offset-x) + var(--pgn-elevation-box-shadow-level-1-1-blur) + var(--pgn-elevation-box-shadow-level-1-1-color), + var(--pgn-elevation-box-shadow-level-1-2-offset-y) + var(--pgn-elevation-box-shadow-level-1-2-offset-x) + var(--pgn-elevation-box-shadow-level-1-2-blur) + var(--pgn-elevation-box-shadow-level-1-2-color); border-radius: var(--pgn-spacing-selectable-box-border-radius); text-align: start; background: var(--pgn-color-white); diff --git a/src/Sticky/index.scss b/src/Sticky/index.scss index 54b78b0b02..facd262633 100644 --- a/src/Sticky/index.scss +++ b/src/Sticky/index.scss @@ -14,7 +14,15 @@ } &.pgn__sticky-shadow { - box-shadow: var(--pgn-elevation-sticky-shadow-bottom); + box-shadow: + var(--pgn-elevation-sticky-shadow-bottom-1-offset-x) + var(--pgn-elevation-sticky-shadow-bottom-1-offset-y) + var(--pgn-elevation-sticky-shadow-bottom-1-blur) + var(--pgn-elevation-sticky-shadow-bottom-1-color), + var(--pgn-elevation-sticky-shadow-bottom-2-offset-x) + var(--pgn-elevation-sticky-shadow-bottom-2-offset-y) + var(--pgn-elevation-sticky-shadow-bottom-2-blur) + var(--pgn-elevation-sticky-shadow-bottom-2-color); } } diff --git a/src/Toast/bootstrap-toast.scss b/src/Toast/bootstrap-toast.scss index 9d1f8f3775..8052c0e3b1 100644 --- a/src/Toast/bootstrap-toast.scss +++ b/src/Toast/bootstrap-toast.scss @@ -5,7 +5,15 @@ background-color: var(--pgn-color-toast-bg); background-clip: padding-box; border: var(--pgn-size-toast-border-width) solid var(--pgn-color-toast-border); - box-shadow: var(--pgn-elevation-toast-box-shadow); + box-shadow: + var(--pgn-elevation-toast-box-shadow-1-offset-x) + var(--pgn-elevation-toast-box-shadow-1-offset-y) + var(--pgn-elevation-toast-box-shadow-1-blur) + var(--pgn-elevation-toast-box-shadow-1-color), + var(--pgn-elevation-toast-box-shadow-2-offset-x) + var(--pgn-elevation-toast-box-shadow-2-offset-y) + var(--pgn-elevation-toast-box-shadow-2-blur) + var(--pgn-elevation-toast-box-shadow-2-color); opacity: 0; @include font-size(var(--pgn-typography-toast-font-size)); diff --git a/src/Toast/index.scss b/src/Toast/index.scss index 866e049709..859ce5910d 100644 --- a/src/Toast/index.scss +++ b/src/Toast/index.scss @@ -2,7 +2,15 @@ .toast { background-color: var(--pgn-color-toast-bg); - box-shadow: var(--pgn-elevation-toast-box-shadow); + box-shadow: + var(--pgn-elevation-toast-box-shadow-1-offset-x) + var(--pgn-elevation-toast-box-shadow-1-offset-y) + var(--pgn-elevation-toast-box-shadow-1-blur) + var(--pgn-elevation-toast-box-shadow-1-color), + var(--pgn-elevation-toast-box-shadow-2-offset-x) + var(--pgn-elevation-toast-box-shadow-2-offset-y) + var(--pgn-elevation-toast-box-shadow-2-blur) + var(--pgn-elevation-toast-box-shadow-2-color); margin: 0; padding: 1rem; position: relative; diff --git a/src/Tooltip/index.scss b/src/Tooltip/index.scss index 722dd95328..fb6acc35fc 100644 --- a/src/Tooltip/index.scss +++ b/src/Tooltip/index.scss @@ -11,7 +11,19 @@ // Allow breaking very long words so they don't overflow the tooltip's bounds word-wrap: break-word; opacity: 0; - filter: var(--pgn-elevation-tooltip-box-shadow); + filter: + drop-shadow( + var(--pgn-elevation-tooltip-box-shadow-1-offset-x) + var(--pgn-elevation-tooltip-box-shadow-1-offset-y) + var(--pgn-elevation-tooltip-box-shadow-1-blur) + var(--pgn-elevation-tooltip-box-shadow-1-color) + ), + drop-shadow( + var(--pgn-elevation-tooltip-box-shadow-2-offset-x) + var(--pgn-elevation-tooltip-box-shadow-2-offset-y) + var(--pgn-elevation-tooltip-box-shadow-2-blur) + var(--pgn-elevation-tooltip-box-shadow-2-color) + ); &.show { opacity: var(--pgn-other-tooltip-opacity); diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index 1829556721..90dab499bf 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -41,7 +41,10 @@ --pgn-transition-carousel-control: opacity .15s ease; --pgn-transition-carousel-indicator: opacity .6s ease; --pgn-transition-carousel-duration: .6s; - --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out 0ms; + --pgn-transition-carousel-base-timing-function: ease-in-out; + --pgn-transition-carousel-base-delay: 0ms; + --pgn-transition-carousel-base-duration: var(--pgn-transition-carousel-duration); + --pgn-transition-carousel-base-property: transform; --pgn-transition-btn: none; --pgn-transition-badge: none; --pgn-typography-print-page-size: a3; diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 6f76213489..3098f75b41 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -1534,110 +1534,514 @@ --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); /* Centered box shadow of level 5. */ - --pgn-elevation-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); /* Centered box shadow of level 4. */ - --pgn-elevation-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); /* Centered box shadow of level 3. */ - --pgn-elevation-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15); /* Centered box shadow of level 2. */ - --pgn-elevation-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15); /* Centered box shadow of level 1. */ - --pgn-elevation-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15); /* Right box shadow of level 5. */ - --pgn-elevation-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15); /* Right box shadow of level 4. */ - --pgn-elevation-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15); /* Right box shadow of level 3. */ - --pgn-elevation-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15); /* Right box shadow of level 2. */ - --pgn-elevation-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15); /* Right box shadow of level 1. */ - --pgn-elevation-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15); /* Basic box shadow of level 5. */ - --pgn-elevation-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15); /* Top box shadow of level 4. */ - --pgn-elevation-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); /* Top box shadow of level 3. */ - --pgn-elevation-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15); /* Top box shadow of level 2. */ - --pgn-elevation-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15); /* Top box shadow of level 1. */ - --pgn-elevation-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15); /* Left box shadow of level 5. */ - --pgn-elevation-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15); /* Left box shadow of level 4. */ - --pgn-elevation-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15); /* Left box shadow of level 3. */ - --pgn-elevation-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15); /* Left box shadow of level 2. */ - --pgn-elevation-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15); /* Left box shadow of level 1. */ - --pgn-elevation-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 5. */ - --pgn-elevation-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 4. */ - --pgn-elevation-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 3. */ - --pgn-elevation-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 2. */ - --pgn-elevation-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 1. */ - --pgn-elevation-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); /* Large box shadow. */ - --pgn-elevation-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); /* Small box shadow. */ - --pgn-elevation-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); /* Default box shadow. */ - --pgn-elevation-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); /* Basic box shadow of level 5. */ - --pgn-elevation-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); /* Basic box shadow of level 4. */ - --pgn-elevation-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); /* Basic box shadow of level 3. */ - --pgn-elevation-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); /* Basic box shadow of level 2. */ - --pgn-elevation-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); /* Basic box shadow of level 1. */ - --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus); - --pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15); - --pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); - --pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); + --pgn-elevation-box-shadow-centered-5-2-blur: 3rem; /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-2-offset-y: 0; /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-2-offset-x: 0; /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-1-blur: 2.5rem; /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-1-offset-y: 0; /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-1-offset-x: 0; /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-4-2-blur: 1.25rem; /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-2-offset-y: 0; /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-2-offset-x: 0; /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-1-blur: 1.25rem; /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-1-offset-y: 0; /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-1-offset-x: 0; /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-3-2-blur: 1rem; /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-2-offset-y: 0; /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-2-offset-x: 0; /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-1-blur: .625rem; /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-1-offset-y: 0; /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-1-offset-x: 0; /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-2-2-blur: .5rem; /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-2-offset-y: 0; /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-2-offset-x: 0; /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-1-blur: .25rem; /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-1-offset-y: 0; /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-1-offset-x: 0; /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-1-2-blur: .25rem; /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-2-offset-y: 0; /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-2-offset-x: 0; /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-1-blur: .125rem; /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-1-offset-y: 0; /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-1-offset-x: 0; /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-right-5-2-blur: 3rem; /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-2-offset-y: 0; /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-2-offset-x: .5rem; /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-1-blur: 2.5rem; /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-1-offset-y: 0; /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-1-offset-x: 1.25rem; /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-4-2-blur: 1.25rem; /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-2-offset-y: 0; /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-2-offset-x: .5rem; /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-1-blur: 1.25rem; /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-1-offset-y: 0; /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-1-offset-x: .625rem; /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-3-2-blur: .625rem; /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-2-offset-y: 0; /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-2-offset-x: .25rem; /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-1-blur: 1rem; /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-1-offset-y: 0; /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-1-offset-x: .5rem; /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-2-2-blur: .5rem; /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-2-offset-y: 0; /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-2-offset-x: .125rem; /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-1-blur: .25rem; /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-1-offset-y: 0; /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-1-offset-x: .125rem; /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-1-2-blur: .25rem; /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-2-offset-y: 0; /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-2-offset-x: .0625rem; /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-1-blur: .125rem; /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-1-offset-y: 0; /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-1-offset-x: .0625rem; /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-up-5-2-blur: 3rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-2-offset-y: -.5rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-2-offset-x: 0; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-1-blur: 2.5rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-1-offset-y: -1.25rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-1-offset-x: 0; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-4-2-blur: 1.25rem; /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-2-offset-y: -.5rem; /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-2-offset-x: 0; /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-1-blur: 1.25rem; /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-1-offset-y: -.625rem; /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-1-offset-x: 0; /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-3-2-blur: .625rem; /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-2-offset-y: -.25rem; /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-2-offset-x: 0; /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-1-blur: 1rem; /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-1-offset-y: -.5rem; /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-1-offset-x: 0; /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-2-2-blur: .5rem; /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-2-offset-y: -.125rem; /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-2-offset-x: 0; /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-1-blur: .25rem; /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-1-offset-y: -.125rem; /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-1-offset-x: 0; /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-1-2-blur: .25rem; /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-2-offset-y: -.0625rem; /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-2-offset-x: 0; /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-1-blur: .125rem; /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-1-offset-y: -.0625rem; /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-1-offset-x: 0; /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-left-5-2-blur: 3rem; /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-2-offset-y: 0; /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-2-offset-x: -.5rem; /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-1-blur: 2.5rem; /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-1-offset-y: 0; /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-1-offset-x: -1.25rem; /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-4-2-blur: 1.25rem; /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-2-offset-y: 0; /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-2-offset-x: -.5rem; /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-1-blur: 1.25rem; /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-1-offset-y: 0; /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-1-offset-x: -.625rem; /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-3-2-blur: .625rem; /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-2-offset-y: 0; /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-2-offset-x: -.25rem; /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-1-blur: 1rem; /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-1-offset-y: 0; /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-1-offset-x: -.5rem; /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-2-2-blur: .5rem; /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-2-offset-y: 0; /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-2-offset-x: -.125rem; /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-1-blur: .25rem; /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-1-offset-y: 0; /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-1-offset-x: -.125rem; /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-1-2-blur: .25rem; /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-2-offset-y: 0; /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-2-offset-x: -.0625rem; /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-1-blur: .125rem; /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-1-offset-y: 0; /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-1-offset-x: -.0625rem; /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-down-5-2-blur: 2.5rem; /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-2-offset-y: .5rem; /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-2-offset-x: 0; /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-1-blur: 2.5rem; /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-1-offset-y: 1.25px; /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-1-offset-x: 0; /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-4-2-blur: 1.25rem; /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-2-offset-y: .5rem; /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-2-offset-x: 0; /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-1-blur: 1.25rem; /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-1-offset-y: .625rem; /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-1-offset-x: 0; /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-3-2-blur: .625rem; /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-2-offset-y: .25rem; /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-2-offset-x: 0; /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-1-blur: 1rem; /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-1-offset-y: .5rem; /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-1-offset-x: 0; /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-2-2-blur: .5rem; /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-2-offset-y: .125rem; /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-2-offset-x: 0; /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-1-blur: .25rem; /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-1-offset-y: .125rem; /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-1-offset-x: 0; /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-1-2-blur: .25rem; /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-2-offset-y: .0625rem; /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-2-offset-x: 0; /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-1-blur: .125rem; /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-1-offset-y: .0625rem; /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-1-offset-x: 0; /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-lg-blur: .5rem; /* Large box shadow. */ + --pgn-elevation-box-shadow-lg-offset-y: .25rem; /* Large box shadow. */ + --pgn-elevation-box-shadow-lg-offset-x: 0; /* Large box shadow. */ + --pgn-elevation-box-shadow-lg-color: rgba(0, 0, 0, 0.3); /* Large box shadow. */ + --pgn-elevation-box-shadow-sm-blur: .125rem; /* Small box shadow. */ + --pgn-elevation-box-shadow-sm-offset-y: .0625rem; /* Small box shadow. */ + --pgn-elevation-box-shadow-sm-offset-x: 0; /* Small box shadow. */ + --pgn-elevation-box-shadow-sm-color: rgba(0, 0, 0, 0.2); /* Small box shadow. */ + --pgn-elevation-box-shadow-base-blur: .25rem; /* Default box shadow. */ + --pgn-elevation-box-shadow-base-offset-y: .125rem; /* Default box shadow. */ + --pgn-elevation-box-shadow-base-offset-x: 0; /* Default box shadow. */ + --pgn-elevation-box-shadow-base-color: rgba(0, 0, 0, 0.3); /* Default box shadow. */ + --pgn-elevation-box-shadow-level-5-2-blur: 2.5rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-2-offset-y: .5rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-2-offset-x: 0; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-1-blur: 2.5rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-1-offset-y: 1.25px; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-1-offset-x: 0; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-4-2-blur: 1.25rem; /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-2-offset-y: .5rem; /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-2-offset-x: 0; /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-1-blur: 1.25rem; /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-1-offset-y: .625rem; /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-1-offset-x: 0; /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-3-2-blur: 1rem; /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-2-offset-y: 0; /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-2-offset-x: 0; /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-1-blur: .625rem; /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-1-offset-y: 0; /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-1-offset-x: 0; /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-2-2-blur: .5rem; /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-2-offset-y: .125rem; /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-2-offset-x: 0; /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-1-blur: .25rem; /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-1-offset-y: .125rem; /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-1-offset-x: 0; /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-1-2-blur: .25rem; /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-2-offset-y: .0625rem; /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-2-offset-x: 0; /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-1-blur: .125rem; /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-1-offset-y: .0625rem; /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-1-offset-x: 0; /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 1. */ + --pgn-elevation-input-btn-focus-box-shadow-blur: 0; + --pgn-elevation-input-btn-focus-box-shadow-offset-y: 0; + --pgn-elevation-input-btn-focus-box-shadow-offset-x: 0; + --pgn-elevation-input-btn-focus-box-shadow-spread: var(--pgn-size-input-btn-focus-width); + --pgn-elevation-input-btn-focus-box-shadow-color: var(--pgn-color-input-btn-focus); + --pgn-elevation-toast-box-shadow-2-blur: 3rem; + --pgn-elevation-toast-box-shadow-2-offset-y: .5rem; + --pgn-elevation-toast-box-shadow-2-offset-x: 0; + --pgn-elevation-toast-box-shadow-2-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-toast-box-shadow-1-blur: 2.5rem; + --pgn-elevation-toast-box-shadow-1-offset-y: 1.25rem; + --pgn-elevation-toast-box-shadow-1-offset-x: 0; + --pgn-elevation-toast-box-shadow-1-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-sticky-shadow-bottom-2-blur: .625rem; + --pgn-elevation-sticky-shadow-bottom-2-offset-y: .25rem; + --pgn-elevation-sticky-shadow-bottom-2-offset-x: 0; + --pgn-elevation-sticky-shadow-bottom-2-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-sticky-shadow-bottom-1-blur: 1rem; + --pgn-elevation-sticky-shadow-bottom-1-offset-y: .5rem; + --pgn-elevation-sticky-shadow-bottom-1-offset-x: 0; + --pgn-elevation-sticky-shadow-bottom-1-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-sticky-shadow-top-2-blur: .625rem; + --pgn-elevation-sticky-shadow-top-2-offset-y: -.25rem; + --pgn-elevation-sticky-shadow-top-2-offset-x: 0; + --pgn-elevation-sticky-shadow-top-2-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-sticky-shadow-top-1-blur: 1rem; + --pgn-elevation-sticky-shadow-top-1-offset-y: -.5rem; + --pgn-elevation-sticky-shadow-top-1-offset-x: 0; + --pgn-elevation-sticky-shadow-top-1-color: rgba(0, 0, 0, 0.15); --pgn-elevation-scrollable-body-box-shadow: #0000008C; --pgn-elevation-progress-bar-box-shadow: none; - --pgn-elevation-pagination-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus); - --pgn-elevation-menu-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .3); + --pgn-elevation-pagination-focus-box-shadow-blur: 0; + --pgn-elevation-pagination-focus-box-shadow-offset-y: 0; + --pgn-elevation-pagination-focus-box-shadow-offset-x: 0; + --pgn-elevation-pagination-focus-box-shadow-spread: var(--pgn-size-input-btn-focus-width); + --pgn-elevation-pagination-focus-box-shadow-color: var(--pgn-color-input-btn-focus); + --pgn-elevation-menu-box-shadow-blur: .25rem; + --pgn-elevation-menu-box-shadow-offset-y: .125rem; + --pgn-elevation-menu-box-shadow-offset-x: 0; + --pgn-elevation-menu-box-shadow-color: rgba(0, 0, 0, 0.3); --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; - --pgn-elevation-icon-button-box-shadow-black-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-black-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-black-base); + --pgn-elevation-icon-button-box-shadow-black-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-black-inverse-blur: 0; + --pgn-elevation-icon-button-box-shadow-black-inverse-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-black-inverse-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-black-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-black-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-black-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-black-base-blur: 0; + --pgn-elevation-icon-button-box-shadow-black-base-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-black-base-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-black-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-black-base-color: var(--pgn-color-icon-button-text-black-base); --pgn-elevation-icon-button-box-shadow-dark-inverse-active: none; --pgn-elevation-icon-button-box-shadow-dark-active: none; - --pgn-elevation-icon-button-box-shadow-dark-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-dark-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-dark-base); + --pgn-elevation-icon-button-box-shadow-dark-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-dark-inverse-blur: 0; + --pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-dark-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-dark-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-dark-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-dark-base-blur: 0; + --pgn-elevation-icon-button-box-shadow-dark-base-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-dark-base-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-dark-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-dark-base-color: var(--pgn-color-icon-button-text-dark-base); --pgn-elevation-icon-button-box-shadow-light-inverse-active: none; --pgn-elevation-icon-button-box-shadow-light-active: none; - --pgn-elevation-icon-button-box-shadow-light-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-light-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-light-base); + --pgn-elevation-icon-button-box-shadow-light-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-light-inverse-blur: 0; + --pgn-elevation-icon-button-box-shadow-light-inverse-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-light-inverse-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-light-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-light-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-light-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-light-base-blur: 0; + --pgn-elevation-icon-button-box-shadow-light-base-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-light-base-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-light-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-light-base-color: var(--pgn-color-icon-button-text-light-base); --pgn-elevation-icon-button-box-shadow-danger-inverse-active: none; --pgn-elevation-icon-button-box-shadow-danger-active: none; - --pgn-elevation-icon-button-box-shadow-danger-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-danger-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-danger-base); + --pgn-elevation-icon-button-box-shadow-danger-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-danger-inverse-blur: 0; + --pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-danger-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-danger-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-danger-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-danger-base-blur: 0; + --pgn-elevation-icon-button-box-shadow-danger-base-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-danger-base-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-danger-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-danger-base-color: var(--pgn-color-icon-button-text-danger-base); --pgn-elevation-icon-button-box-shadow-warning-inverse-active: none; --pgn-elevation-icon-button-box-shadow-warning-active: none; - --pgn-elevation-icon-button-box-shadow-warning-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-warning-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-warning-base); + --pgn-elevation-icon-button-box-shadow-warning-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-warning-inverse-blur: 0; + --pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-warning-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-warning-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-warning-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-warning-base-blur: 0; + --pgn-elevation-icon-button-box-shadow-warning-base-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-warning-base-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-warning-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-warning-base-color: var(--pgn-color-icon-button-text-warning-base); --pgn-elevation-icon-button-box-shadow-success-inverse-active: none; --pgn-elevation-icon-button-box-shadow-success-active: none; - --pgn-elevation-icon-button-box-shadow-success-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-success-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-success-base); + --pgn-elevation-icon-button-box-shadow-success-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-success-inverse-blur: 0; + --pgn-elevation-icon-button-box-shadow-success-inverse-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-success-inverse-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-success-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-success-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-success-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-success-base-blur: 0; + --pgn-elevation-icon-button-box-shadow-success-base-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-success-base-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-success-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-success-base-color: var(--pgn-color-icon-button-text-success-base); --pgn-elevation-icon-button-box-shadow-brand-inverse-active: none; --pgn-elevation-icon-button-box-shadow-brand-active: none; - --pgn-elevation-icon-button-box-shadow-brand-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-brand-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-brand-base); + --pgn-elevation-icon-button-box-shadow-brand-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-brand-inverse-blur: 0; + --pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-brand-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-brand-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-brand-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-brand-base-blur: 0; + --pgn-elevation-icon-button-box-shadow-brand-base-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-brand-base-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-brand-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-brand-base-color: var(--pgn-color-icon-button-text-brand-base); --pgn-elevation-icon-button-box-shadow-secondary-inverse-active: none; --pgn-elevation-icon-button-box-shadow-secondary-active: none; - --pgn-elevation-icon-button-box-shadow-secondary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --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-secondary-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-blur: 0; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-secondary-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-secondary-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-secondary-base-blur: 0; + --pgn-elevation-icon-button-box-shadow-secondary-base-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-secondary-base-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-secondary-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-secondary-base-color: var(--pgn-color-icon-button-text-secondary-base); --pgn-elevation-icon-button-box-shadow-primary-inverse-active: none; --pgn-elevation-icon-button-box-shadow-primary-active: none; - --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-form-control-select-border-focus: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus); + --pgn-elevation-icon-button-box-shadow-primary-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-primary-inverse-blur: 0; + --pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-primary-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-primary-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-primary-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-primary-base-blur: 0; + --pgn-elevation-icon-button-box-shadow-primary-base-offset-y: 0; + --pgn-elevation-icon-button-box-shadow-primary-base-offset-x: 0; + --pgn-elevation-icon-button-box-shadow-primary-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-primary-base-color: var(--pgn-color-icon-button-text-primary-base); + --pgn-elevation-form-control-select-border-focus-blur: 0; + --pgn-elevation-form-control-select-border-focus-offset-y: 0; + --pgn-elevation-form-control-select-border-focus-offset-x: 0; + --pgn-elevation-form-control-select-border-focus-spread: var(--pgn-size-input-btn-focus-width); + --pgn-elevation-form-control-select-border-focus-color: var(--pgn-color-input-btn-focus); --pgn-elevation-form-control-select-border-base: none; - --pgn-elevation-form-control-file-focus: 0 0 0 1px var(--pgn-color-primary-500); + --pgn-elevation-form-control-file-focus-blur: 0; + --pgn-elevation-form-control-file-focus-offset-y: 0; + --pgn-elevation-form-control-file-focus-offset-x: 0; + --pgn-elevation-form-control-file-focus-spread: 1px; + --pgn-elevation-form-control-file-focus-color: var(--pgn-color-primary-500); --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base); --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus); --pgn-elevation-form-control-range-thumb-base: none; --pgn-elevation-form-control-range-track: none; --pgn-elevation-form-control-checkbox-indicator-indeterminate: none; --pgn-elevation-form-control-indicator-active: none; - --pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1); + --pgn-elevation-form-control-indicator-checked-focus-blur: 0; + --pgn-elevation-form-control-indicator-checked-focus-offset-y: 0; + --pgn-elevation-form-control-indicator-checked-focus-offset-x: 0; + --pgn-elevation-form-control-indicator-checked-focus-spread: 4px; + --pgn-elevation-form-control-indicator-checked-focus-color: rgba(0, 0, 0, 0.1); --pgn-elevation-form-control-indicator-checked-base: none; --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base); - --pgn-elevation-form-input-focus: 0 0 0 1px var(--pgn-color-primary-500); + --pgn-elevation-form-input-focus-blur: 0; + --pgn-elevation-form-input-focus-offset-y: 0; + --pgn-elevation-form-input-focus-offset-x: 0; + --pgn-elevation-form-input-focus-spread: 1px; + --pgn-elevation-form-input-focus-color: var(--pgn-color-primary-500); --pgn-elevation-form-input-base: none; - --pgn-elevation-dropzone-error: inset 0 0 0 2px var(--pgn-color-danger-300); - --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500); - --pgn-elevation-dropzone-focus: inset 0 0 0 2px var(--pgn-color-info-300); - --pgn-elevation-dropzone-hover: inset 0 0 0 2px var(--pgn-color-info-300); - --pgn-elevation-data-table-box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .2); + --pgn-elevation-dropzone-error-inset: inset; + --pgn-elevation-dropzone-error-blur: 0; + --pgn-elevation-dropzone-error-offset-y: 0; + --pgn-elevation-dropzone-error-offset-x: 0; + --pgn-elevation-dropzone-error-spread: 2px; + --pgn-elevation-dropzone-error-color: var(--pgn-color-danger-300); + --pgn-elevation-dropzone-active-inset: inset; + --pgn-elevation-dropzone-active-blur: 0; + --pgn-elevation-dropzone-active-offset-y: 0; + --pgn-elevation-dropzone-active-offset-x: 0; + --pgn-elevation-dropzone-active-spread: 2px; + --pgn-elevation-dropzone-active-color: var(--pgn-color-primary-500); + --pgn-elevation-dropzone-focus-inset: inset; + --pgn-elevation-dropzone-focus-blur: 0; + --pgn-elevation-dropzone-focus-offset-y: 0; + --pgn-elevation-dropzone-focus-offset-x: 0; + --pgn-elevation-dropzone-focus-spread: 2px; + --pgn-elevation-dropzone-focus-color: var(--pgn-color-info-300); + --pgn-elevation-dropzone-hover-inset: inset; + --pgn-elevation-dropzone-hover-blur: 0; + --pgn-elevation-dropzone-hover-offset-y: 0; + --pgn-elevation-dropzone-hover-offset-x: 0; + --pgn-elevation-dropzone-hover-spread: 2px; + --pgn-elevation-dropzone-hover-color: var(--pgn-color-info-300); + --pgn-elevation-data-table-box-shadow-blur: .125rem; + --pgn-elevation-data-table-box-shadow-offset-y: .0625rem; + --pgn-elevation-data-table-box-shadow-offset-x: 0; + --pgn-elevation-data-table-box-shadow-color: rgba(0, 0, 0, 0.2); --pgn-elevation-code-kbd-box-shadow: none; - --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white); + --pgn-elevation-close-button-text-shadow-blur: 0; + --pgn-elevation-close-button-text-shadow-offset-y: 1px; + --pgn-elevation-close-button-text-shadow-offset-x: 0; + --pgn-elevation-close-button-text-shadow-color: var(--pgn-color-white); --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-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-annotation-box-shadow-2-blur: 8px; + --pgn-elevation-annotation-box-shadow-2-offset-y: 2px; + --pgn-elevation-annotation-box-shadow-2-offset-x: 0; + --pgn-elevation-annotation-box-shadow-2-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-annotation-box-shadow-1-blur: 4px; + --pgn-elevation-annotation-box-shadow-1-offset-y: 2px; + --pgn-elevation-annotation-box-shadow-1-offset-x: 0; + --pgn-elevation-annotation-box-shadow-1-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-tooltip-box-shadow-2-blur: 8px; + --pgn-elevation-tooltip-box-shadow-2-offset-y: 2px; + --pgn-elevation-tooltip-box-shadow-2-offset-x: 0; + --pgn-elevation-tooltip-box-shadow-2-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-tooltip-box-shadow-1-blur: 4px; + --pgn-elevation-tooltip-box-shadow-1-offset-y: 2px; + --pgn-elevation-tooltip-box-shadow-1-offset-x: 0; + --pgn-elevation-tooltip-box-shadow-1-color: rgba(0, 0, 0, 0.15); --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-modal-content-box-shadow-sm-up-2-blur: 20px; + --pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y: 8px; + --pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x: 0; + --pgn-elevation-modal-content-box-shadow-sm-up-2-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-modal-content-box-shadow-sm-up-1-blur: 20px; + --pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y: 10px; + --pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x: 0; + --pgn-elevation-modal-content-box-shadow-sm-up-1-color: rgba(0, 0, 0, 0.15); --pgn-elevation-dropdown-box-shadow: none; } diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss index e5723b6a73..77ab73348b 100644 --- a/styles/scss/core/_variables.scss +++ b/styles/scss/core/_variables.scss @@ -1,3 +1,4 @@ +/* stylelint-disable no-eol-whitespace */ // Variables // // Variables should follow the `$component-state-property-size` formula for @@ -467,62 +468,343 @@ $border-radius-sm: var(--pgn-size-border-radius-sm) !default; $rounded-pill: var(--pgn-size-rounded-pill) !default; -$level-1-box-shadow: var(--pgn-elevation-box-shadow-level-1) !default; -$level-2-box-shadow: var(--pgn-elevation-box-shadow-level-2) !default; -$level-3-box-shadow: var(--pgn-elevation-box-shadow-level-3) !default; -$level-4-box-shadow: var(--pgn-elevation-box-shadow-level-4) !default; -$level-5-box-shadow: var(--pgn-elevation-box-shadow-level-5) !default; - -$box-shadow-down-1: var(--pgn-elevation-box-shadow-down-1) !default; -$box-shadow-down-2: var(--pgn-elevation-box-shadow-down-2) !default; -$box-shadow-down-3: var(--pgn-elevation-box-shadow-down-3) !default; -$box-shadow-down-4: var(--pgn-elevation-box-shadow-down-4) !default; -$box-shadow-down-5: var(--pgn-elevation-box-shadow-down-5) !default; - -$box-shadow-left-1: var(--pgn-elevation-box-shadow-left-1) !default; -$box-shadow-left-2: var(--pgn-elevation-box-shadow-left-2) !default; -$box-shadow-left-3: var(--pgn-elevation-box-shadow-left-3) !default; -$box-shadow-left-4: var(--pgn-elevation-box-shadow-left-4) !default; -$box-shadow-left-5: var(--pgn-elevation-box-shadow-left-5) !default; - -$box-shadow-up-1: var(--pgn-elevation-box-shadow-up-1) !default; -$box-shadow-up-2: var(--pgn-elevation-box-shadow-up-2) !default; -$box-shadow-up-3: var(--pgn-elevation-box-shadow-up-3) !default; -$box-shadow-up-4: var(--pgn-elevation-box-shadow-up-4) !default; -$box-shadow-up-5: var(--pgn-elevation-box-shadow-up-5) !default; - -$box-shadow-right-1: var(--pgn-elevation-box-shadow-right-1) !default; -$box-shadow-right-2: var(--pgn-elevation-box-shadow-right-2) !default; -$box-shadow-right-3: var(--pgn-elevation-box-shadow-right-3) !default; -$box-shadow-right-4: var(--pgn-elevation-box-shadow-right-4) !default; -$box-shadow-right-5: var(--pgn-elevation-box-shadow-right-5) !default; - -$box-shadow-centered-1: var(--pgn-elevation-box-shadow-centered-1) !default; -$box-shadow-centered-2: var(--pgn-elevation-box-shadow-centered-2) !default; -$box-shadow-centered-3: var(--pgn-elevation-box-shadow-centered-3) !default; -$box-shadow-centered-4: var(--pgn-elevation-box-shadow-centered-4) !default; -$box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5) !default; +$level-1-box-shadow: + var(--pgn-elevation-box-shadow-level-1-1-offset-y) + var(--pgn-elevation-box-shadow-level-1-1-offset-x) + var(--pgn-elevation-box-shadow-level-1-1-blur) + var(--pgn-elevation-box-shadow-level-1-1-color), + var(--pgn-elevation-box-shadow-level-1-2-offset-y) + var(--pgn-elevation-box-shadow-level-1-2-offset-x) + var(--pgn-elevation-box-shadow-level-1-2-blur) + var(--pgn-elevation-box-shadow-level-1-2-color) !default; + +$level-2-box-shadow: + var(--pgn-elevation-box-shadow-level-2-1-offset-y) + var(--pgn-elevation-box-shadow-level-2-1-offset-x) + var(--pgn-elevation-box-shadow-level-2-1-blur) + var(--pgn-elevation-box-shadow-level-2-1-color), + var(--pgn-elevation-box-shadow-level-2-2-offset-y) + var(--pgn-elevation-box-shadow-level-2-2-offset-x) + var(--pgn-elevation-box-shadow-level-2-2-blur) + var(--pgn-elevation-box-shadow-level-2-2-color) !default; +$level-3-box-shadow: + var(--pgn-elevation-box-shadow-level-3-1-offset-y) + var(--pgn-elevation-box-shadow-level-3-1-offset-x) + var(--pgn-elevation-box-shadow-level-3-1-blur) + var(--pgn-elevation-box-shadow-level-3-1-color), + var(--pgn-elevation-box-shadow-level-3-2-offset-y) + var(--pgn-elevation-box-shadow-level-3-2-offset-x) + var(--pgn-elevation-box-shadow-level-3-2-blur) + var(--pgn-elevation-box-shadow-level-3-2-color) !default; +$level-4-box-shadow: + var(--pgn-elevation-box-shadow-level-4-1-offset-y) + var(--pgn-elevation-box-shadow-level-4-1-offset-x) + var(--pgn-elevation-box-shadow-level-4-1-blur) + var(--pgn-elevation-box-shadow-level-4-1-color), + var(--pgn-elevation-box-shadow-level-4-2-offset-y) + var(--pgn-elevation-box-shadow-level-4-2-offset-x) + var(--pgn-elevation-box-shadow-level-4-2-blur) + var(--pgn-elevation-box-shadow-level-4-2-color) !default; +$level-5-box-shadow: + var(--pgn-elevation-box-shadow-level-5-1-offset-y) + var(--pgn-elevation-box-shadow-level-5-1-offset-x) + var(--pgn-elevation-box-shadow-level-5-1-blur) + var(--pgn-elevation-box-shadow-level-5-1-color), + var(--pgn-elevation-box-shadow-level-5-2-offset-y) + var(--pgn-elevation-box-shadow-level-5-2-offset-x) + var(--pgn-elevation-box-shadow-level-5-2-blur) + var(--pgn-elevation-box-shadow-level-5-2-color) !default; + +$box-shadow-down-1: + var(--pgn-elevation-box-shadow-down-1-1-offset-y) + var(--pgn-elevation-box-shadow-down-1-1-offset-x) + var(--pgn-elevation-box-shadow-down-1-1-blur) + var(--pgn-elevation-box-shadow-down-1-1-color), + var(--pgn-elevation-box-shadow-down-1-2-offset-y) + var(--pgn-elevation-box-shadow-down-1-2-offset-x) + var(--pgn-elevation-box-shadow-down-1-2-blur) + var(--pgn-elevation-box-shadow-down-1-2-color) !default; +$box-shadow-down-2: + var(--pgn-elevation-box-shadow-down-2-1-offset-y) + var(--pgn-elevation-box-shadow-down-2-1-offset-x) + var(--pgn-elevation-box-shadow-down-2-1-blur) + var(--pgn-elevation-box-shadow-down-2-1-color), + var(--pgn-elevation-box-shadow-down-2-2-offset-y) + var(--pgn-elevation-box-shadow-down-2-2-offset-x) + var(--pgn-elevation-box-shadow-down-2-2-blur) + var(--pgn-elevation-box-shadow-down-2-2-color) !default; +$box-shadow-down-3: + var(--pgn-elevation-box-shadow-down-3-1-offset-y) + var(--pgn-elevation-box-shadow-down-3-1-offset-x) + var(--pgn-elevation-box-shadow-down-3-1-blur) + var(--pgn-elevation-box-shadow-down-3-1-color), + var(--pgn-elevation-box-shadow-down-3-2-offset-y) + var(--pgn-elevation-box-shadow-down-3-2-offset-x) + var(--pgn-elevation-box-shadow-down-3-2-blur) + var(--pgn-elevation-box-shadow-down-3-2-color) !default; +$box-shadow-down-4: + var(--pgn-elevation-box-shadow-down-4-1-offset-y) + var(--pgn-elevation-box-shadow-down-4-1-offset-x) + var(--pgn-elevation-box-shadow-down-4-1-blur) + var(--pgn-elevation-box-shadow-down-4-1-color), + var(--pgn-elevation-box-shadow-down-4-2-offset-y) + var(--pgn-elevation-box-shadow-down-4-2-offset-x) + var(--pgn-elevation-box-shadow-down-4-2-blur) + var(--pgn-elevation-box-shadow-down-4-2-color) !default; +$box-shadow-down-5: + var(--pgn-elevation-box-shadow-down-5-1-offset-y) + var(--pgn-elevation-box-shadow-down-5-1-offset-x) + var(--pgn-elevation-box-shadow-down-5-1-blur) + var(--pgn-elevation-box-shadow-down-5-1-color), + var(--pgn-elevation-box-shadow-down-5-2-offset-y) + var(--pgn-elevation-box-shadow-down-5-2-offset-x) + var(--pgn-elevation-box-shadow-down-5-2-blur) + var(--pgn-elevation-box-shadow-down-5-2-color) !default; + +$box-shadow-left-1: + var(--pgn-elevation-box-shadow-left-1-1-offset-y) + var(--pgn-elevation-box-shadow-left-1-1-offset-x) + var(--pgn-elevation-box-shadow-left-1-1-blur) + var(--pgn-elevation-box-shadow-left-1-1-color), + var(--pgn-elevation-box-shadow-left-1-2-offset-y) + var(--pgn-elevation-box-shadow-left-1-2-offset-x) + var(--pgn-elevation-box-shadow-left-1-2-blur) + var(--pgn-elevation-box-shadow-left-1-2-color) !default; +$box-shadow-left-2: + var(--pgn-elevation-box-shadow-left-2-1-offset-y) + var(--pgn-elevation-box-shadow-left-2-1-offset-x) + var(--pgn-elevation-box-shadow-left-2-1-blur) + var(--pgn-elevation-box-shadow-left-2-1-color), + var(--pgn-elevation-box-shadow-left-2-2-offset-y) + var(--pgn-elevation-box-shadow-left-2-2-offset-x) + var(--pgn-elevation-box-shadow-left-2-2-blur) + var(--pgn-elevation-box-shadow-left-2-2-color) !default; +$box-shadow-left-3: + var(--pgn-elevation-box-shadow-left-3-1-offset-y) + var(--pgn-elevation-box-shadow-left-3-1-offset-x) + var(--pgn-elevation-box-shadow-left-3-1-blur) + var(--pgn-elevation-box-shadow-left-3-1-color), + var(--pgn-elevation-box-shadow-left-3-2-offset-y) + var(--pgn-elevation-box-shadow-left-3-2-offset-x) + var(--pgn-elevation-box-shadow-left-3-2-blur) + var(--pgn-elevation-box-shadow-left-3-2-color) !default; +$box-shadow-left-4: + var(--pgn-elevation-box-shadow-left-4-1-offset-y) + var(--pgn-elevation-box-shadow-left-4-1-offset-x) + var(--pgn-elevation-box-shadow-left-4-1-blur) + var(--pgn-elevation-box-shadow-left-4-1-color), + var(--pgn-elevation-box-shadow-left-4-2-offset-y) + var(--pgn-elevation-box-shadow-left-4-2-offset-x) + var(--pgn-elevation-box-shadow-left-4-2-blur) + var(--pgn-elevation-box-shadow-left-4-2-color) !default; +$box-shadow-left-5: + var(--pgn-elevation-box-shadow-left-1-1-offset-y) + var(--pgn-elevation-box-shadow-left-1-1-offset-x) + var(--pgn-elevation-box-shadow-left-1-1-blur) + var(--pgn-elevation-box-shadow-left-1-1-color), + var(--pgn-elevation-box-shadow-left-1-2-offset-y) + var(--pgn-elevation-box-shadow-left-1-2-offset-x) + var(--pgn-elevation-box-shadow-left-1-2-blur) + var(--pgn-elevation-box-shadow-left-1-2-color) !default; + +$box-shadow-up-1: + var(--pgn-elevation-box-shadow-up-1-1-offset-y) + var(--pgn-elevation-box-shadow-up-1-1-offset-x) + var(--pgn-elevation-box-shadow-up-1-1-blur) + var(--pgn-elevation-box-shadow-up-1-1-color), + var(--pgn-elevation-box-shadow-up-1-2-offset-y) + var(--pgn-elevation-box-shadow-up-1-2-offset-x) + var(--pgn-elevation-box-shadow-up-1-2-blur) + var(--pgn-elevation-box-shadow-up-1-2-color) !default; +$box-shadow-up-2: + var(--pgn-elevation-box-shadow-up-2-1-offset-y) + var(--pgn-elevation-box-shadow-up-2-1-offset-x) + var(--pgn-elevation-box-shadow-up-2-1-blur) + var(--pgn-elevation-box-shadow-up-2-1-color), + var(--pgn-elevation-box-shadow-up-2-2-offset-y) + var(--pgn-elevation-box-shadow-up-2-2-offset-x) + var(--pgn-elevation-box-shadow-up-2-2-blur) + var(--pgn-elevation-box-shadow-up-2-2-color) !default; +$box-shadow-up-3: + var(--pgn-elevation-box-shadow-up-3-1-offset-y) + var(--pgn-elevation-box-shadow-up-3-1-offset-x) + var(--pgn-elevation-box-shadow-up-3-1-blur) + var(--pgn-elevation-box-shadow-up-3-1-color), + var(--pgn-elevation-box-shadow-up-3-2-offset-y) + var(--pgn-elevation-box-shadow-up-3-2-offset-x) + var(--pgn-elevation-box-shadow-up-3-2-blur) + var(--pgn-elevation-box-shadow-up-3-2-color) !default; +$box-shadow-up-4: + var(--pgn-elevation-box-shadow-up-4-1-offset-y) + var(--pgn-elevation-box-shadow-up-4-1-offset-x) + var(--pgn-elevation-box-shadow-up-4-1-blur) + var(--pgn-elevation-box-shadow-up-4-1-color), + var(--pgn-elevation-box-shadow-up-4-2-offset-y) + var(--pgn-elevation-box-shadow-up-4-2-offset-x) + var(--pgn-elevation-box-shadow-up-4-2-blur) + var(--pgn-elevation-box-shadow-up-4-2-color) !default; +$box-shadow-up-5: + var(--pgn-elevation-box-shadow-up-5-1-offset-y) + var(--pgn-elevation-box-shadow-up-5-1-offset-x) + var(--pgn-elevation-box-shadow-up-5-1-blur) + var(--pgn-elevation-box-shadow-up-5-1-color), + var(--pgn-elevation-box-shadow-up-5-2-offset-y) + var(--pgn-elevation-box-shadow-up-5-2-offset-x) + var(--pgn-elevation-box-shadow-up-5-2-blur) + var(--pgn-elevation-box-shadow-up-5-2-color) !default; + +$box-shadow-right-1: + var(--pgn-elevation-box-shadow-right-1-1-offset-y) + var(--pgn-elevation-box-shadow-right-1-1-offset-x) + var(--pgn-elevation-box-shadow-right-1-1-blur) + var(--pgn-elevation-box-shadow-right-1-1-color), + var(--pgn-elevation-box-shadow-right-1-2-offset-y) + var(--pgn-elevation-box-shadow-right-1-2-offset-x) + var(--pgn-elevation-box-shadow-right-1-2-blur) + var(--pgn-elevation-box-shadow-right-1-2-color) !default; +$box-shadow-right-2: + var(--pgn-elevation-box-shadow-right-2-1-offset-y) + var(--pgn-elevation-box-shadow-right-2-1-offset-x) + var(--pgn-elevation-box-shadow-right-2-1-blur) + var(--pgn-elevation-box-shadow-right-2-1-color), + var(--pgn-elevation-box-shadow-right-2-2-offset-y) + var(--pgn-elevation-box-shadow-right-2-2-offset-x) + var(--pgn-elevation-box-shadow-right-2-2-blur) + var(--pgn-elevation-box-shadow-right-2-2-color) !default; +$box-shadow-right-3: + var(--pgn-elevation-box-shadow-right-3-1-offset-y) + var(--pgn-elevation-box-shadow-right-3-1-offset-x) + var(--pgn-elevation-box-shadow-right-3-1-blur) + var(--pgn-elevation-box-shadow-right-3-1-color), + var(--pgn-elevation-box-shadow-right-3-2-offset-y) + var(--pgn-elevation-box-shadow-right-3-2-offset-x) + var(--pgn-elevation-box-shadow-right-3-2-blur) + var(--pgn-elevation-box-shadow-right-3-2-color) !default; +$box-shadow-right-4: + var(--pgn-elevation-box-shadow-right-4-1-offset-y) + var(--pgn-elevation-box-shadow-right-4-1-offset-x) + var(--pgn-elevation-box-shadow-right-4-1-blur) + var(--pgn-elevation-box-shadow-right-4-1-color), + var(--pgn-elevation-box-shadow-right-4-2-offset-y) + var(--pgn-elevation-box-shadow-right-4-2-offset-x) + var(--pgn-elevation-box-shadow-right-4-2-blur) + var(--pgn-elevation-box-shadow-right-4-2-color) !default; +$box-shadow-right-5: + var(--pgn-elevation-box-shadow-right-5-1-offset-y) + var(--pgn-elevation-box-shadow-right-5-1-offset-x) + var(--pgn-elevation-box-shadow-right-5-1-blur) + var(--pgn-elevation-box-shadow-right-5-1-color), + var(--pgn-elevation-box-shadow-right-5-2-offset-y) + var(--pgn-elevation-box-shadow-right-5-2-offset-x) + var(--pgn-elevation-box-shadow-right-5-2-blur) + var(--pgn-elevation-box-shadow-right-5-2-color) !default; + +$box-shadow-centered-1: + var(--pgn-elevation-box-shadow-centered-1-1-offset-y) + var(--pgn-elevation-box-shadow-centered-1-1-offset-x) + var(--pgn-elevation-box-shadow-centered-1-1-blur) + var(--pgn-elevation-box-shadow-centered-1-1-color), + var(--pgn-elevation-box-shadow-centered-1-2-offset-y) + var(--pgn-elevation-box-shadow-centered-1-2-offset-x) + var(--pgn-elevation-box-shadow-centered-1-2-blur) + var(--pgn-elevation-box-shadow-centered-1-2-color) !default; +$box-shadow-centered-2: + var(--pgn-elevation-box-shadow-centered-2-1-offset-y) + var(--pgn-elevation-box-shadow-centered-2-1-offset-x) + var(--pgn-elevation-box-shadow-centered-2-1-blur) + var(--pgn-elevation-box-shadow-centered-2-1-color), + var(--pgn-elevation-box-shadow-centered-2-2-offset-y) + var(--pgn-elevation-box-shadow-centered-2-2-offset-x) + var(--pgn-elevation-box-shadow-centered-2-2-blur) + var(--pgn-elevation-box-shadow-centered-2-2-color) !default; +$box-shadow-centered-3: + var(--pgn-elevation-box-shadow-centered-3-1-offset-y) + var(--pgn-elevation-box-shadow-centered-3-1-offset-x) + var(--pgn-elevation-box-shadow-centered-3-1-blur) + var(--pgn-elevation-box-shadow-centered-3-1-color), + var(--pgn-elevation-box-shadow-centered-3-2-offset-y) + var(--pgn-elevation-box-shadow-centered-3-2-offset-x) + var(--pgn-elevation-box-shadow-centered-3-2-blur) + var(--pgn-elevation-box-shadow-centered-3-2-color) !default; +$box-shadow-centered-4: + var(--pgn-elevation-box-shadow-centered-4-1-offset-y) + var(--pgn-elevation-box-shadow-centered-4-1-offset-x) + var(--pgn-elevation-box-shadow-centered-4-1-blur) + var(--pgn-elevation-box-shadow-centered-4-1-color), + var(--pgn-elevation-box-shadow-centered-4-2-offset-y) + var(--pgn-elevation-box-shadow-centered-4-2-offset-x) + var(--pgn-elevation-box-shadow-centered-4-2-blur) + var(--pgn-elevation-box-shadow-centered-4-2-color) !default; +$box-shadow-centered-5: + var(--pgn-elevation-box-shadow-centered-5-1-offset-y) + var(--pgn-elevation-box-shadow-centered-5-1-offset-x) + var(--pgn-elevation-box-shadow-centered-5-1-blur) + var(--pgn-elevation-box-shadow-centered-5-1-color), + var(--pgn-elevation-box-shadow-centered-5-2-offset-y) + var(--pgn-elevation-box-shadow-centered-5-2-offset-x) + var(--pgn-elevation-box-shadow-centered-5-2-blur) + var(--pgn-elevation-box-shadow-centered-5-2-color) !default; @mixin pgn-box-shadow($level, $side) { @if $side == "down" { @if $level == 1 { - box-shadow: var(--pgn-elevation-box-shadow-down-1); + box-shadow: + var(--pgn-elevation-box-shadow-down-1-1-offset-y) + var(--pgn-elevation-box-shadow-down-1-1-offset-x) + var(--pgn-elevation-box-shadow-down-1-1-blur) + var(--pgn-elevation-box-shadow-down-1-1-color), + var(--pgn-elevation-box-shadow-down-1-2-offset-y) + var(--pgn-elevation-box-shadow-down-1-2-offset-x) + var(--pgn-elevation-box-shadow-down-1-2-blur) + var(--pgn-elevation-box-shadow-down-1-2-color); } @else if $level == 2 { - box-shadow: var(--pgn-elevation-box-shadow-down-2); + box-shadow: + var(--pgn-elevation-box-shadow-down-2-1-offset-y) + var(--pgn-elevation-box-shadow-down-2-1-offset-x) + var(--pgn-elevation-box-shadow-down-2-1-blur) + var(--pgn-elevation-box-shadow-down-2-1-color), + var(--pgn-elevation-box-shadow-down-2-2-offset-y) + var(--pgn-elevation-box-shadow-down-2-2-offset-x) + var(--pgn-elevation-box-shadow-down-2-2-blur) + var(--pgn-elevation-box-shadow-down-2-2-color); } @else if $level == 3 { - box-shadow: var(--pgn-elevation-box-shadow-down-3); + box-shadow: + var(--pgn-elevation-box-shadow-down-3-1-offset-y) + var(--pgn-elevation-box-shadow-down-3-1-offset-x) + var(--pgn-elevation-box-shadow-down-3-1-blur) + var(--pgn-elevation-box-shadow-down-3-1-color), + var(--pgn-elevation-box-shadow-down-3-2-offset-y) + var(--pgn-elevation-box-shadow-down-3-2-offset-x) + var(--pgn-elevation-box-shadow-down-3-2-blur) + var(--pgn-elevation-box-shadow-down-3-2-color); } @else if $level == 4 { - box-shadow: var(--pgn-elevation-box-shadow-down-4); + box-shadow: + var(--pgn-elevation-box-shadow-down-4-1-offset-y) + var(--pgn-elevation-box-shadow-down-4-1-offset-x) + var(--pgn-elevation-box-shadow-down-4-1-blur) + var(--pgn-elevation-box-shadow-down-4-1-color), + var(--pgn-elevation-box-shadow-down-4-2-offset-y) + var(--pgn-elevation-box-shadow-down-4-2-offset-x) + var(--pgn-elevation-box-shadow-down-4-2-blur) + var(--pgn-elevation-box-shadow-down-4-2-color); } @else if $level == 5 { - box-shadow: var(--pgn-elevation-box-shadow-down-5); + box-shadow: + var(--pgn-elevation-box-shadow-down-5-1-offset-y) + var(--pgn-elevation-box-shadow-down-5-1-offset-x) + var(--pgn-elevation-box-shadow-down-5-1-blur) + var(--pgn-elevation-box-shadow-down-5-1-color), + var(--pgn-elevation-box-shadow-down-5-2-offset-y) + var(--pgn-elevation-box-shadow-down-5-2-offset-x) + var(--pgn-elevation-box-shadow-down-5-2-blur) + var(--pgn-elevation-box-shadow-down-5-2-color); } @else { @@ -532,23 +814,63 @@ $box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5) !default; @if $side == "left" { @if $level == 1 { - box-shadow: var(--pgn-elevation-box-shadow-left-1); + box-shadow: + var(--pgn-elevation-box-shadow-left-1-1-offset-y) + var(--pgn-elevation-box-shadow-left-1-1-offset-x) + var(--pgn-elevation-box-shadow-left-1-1-blur) + var(--pgn-elevation-box-shadow-left-1-1-color), + var(--pgn-elevation-box-shadow-left-1-2-offset-y) + var(--pgn-elevation-box-shadow-left-1-2-offset-x) + var(--pgn-elevation-box-shadow-left-1-2-blur) + var(--pgn-elevation-box-shadow-left-1-2-color); } @else if $level == 2 { - box-shadow: var(--pgn-elevation-box-shadow-left-2); + box-shadow: + var(--pgn-elevation-box-shadow-left-2-1-offset-y) + var(--pgn-elevation-box-shadow-left-2-1-offset-x) + var(--pgn-elevation-box-shadow-left-2-1-blur) + var(--pgn-elevation-box-shadow-left-2-1-color), + var(--pgn-elevation-box-shadow-left-2-2-offset-y) + var(--pgn-elevation-box-shadow-left-2-2-offset-x) + var(--pgn-elevation-box-shadow-left-2-2-blur) + var(--pgn-elevation-box-shadow-left-2-2-color); } @else if $level == 3 { - box-shadow: var(--pgn-elevation-box-shadow-left-3); + box-shadow: + var(--pgn-elevation-box-shadow-left-3-1-offset-y) + var(--pgn-elevation-box-shadow-left-3-1-offset-x) + var(--pgn-elevation-box-shadow-left-3-1-blur) + var(--pgn-elevation-box-shadow-left-3-1-color), + var(--pgn-elevation-box-shadow-left-3-2-offset-y) + var(--pgn-elevation-box-shadow-left-3-2-offset-x) + var(--pgn-elevation-box-shadow-left-3-2-blur) + var(--pgn-elevation-box-shadow-left-3-2-color); } @else if $level == 4 { - box-shadow: var(--pgn-elevation-box-shadow-left-4); + box-shadow: + var(--pgn-elevation-box-shadow-left-4-1-offset-y) + var(--pgn-elevation-box-shadow-left-4-1-offset-x) + var(--pgn-elevation-box-shadow-left-4-1-blur) + var(--pgn-elevation-box-shadow-left-4-1-color), + var(--pgn-elevation-box-shadow-left-4-2-offset-y) + var(--pgn-elevation-box-shadow-left-4-2-offset-x) + var(--pgn-elevation-box-shadow-left-4-2-blur) + var(--pgn-elevation-box-shadow-left-4-2-color); } @else if $level == 5 { - box-shadow: var(--pgn-elevation-box-shadow-left-5); + box-shadow: + var(--pgn-elevation-box-shadow-left-5-1-offset-y) + var(--pgn-elevation-box-shadow-left-5-1-offset-x) + var(--pgn-elevation-box-shadow-left-5-1-blur) + var(--pgn-elevation-box-shadow-left-5-1-color), + var(--pgn-elevation-box-shadow-left-5-2-offset-y) + var(--pgn-elevation-box-shadow-left-5-2-offset-x) + var(--pgn-elevation-box-shadow-left-5-2-blur) + var(--pgn-elevation-box-shadow-left-5-2-color); } @else { @@ -558,23 +880,63 @@ $box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5) !default; @if $side == "up" { @if $level == 1 { - box-shadow: var(--pgn-elevation-box-shadow-up-1); + box-shadow: + var(--pgn-elevation-box-shadow-up-1-1-offset-y) + var(--pgn-elevation-box-shadow-up-1-1-offset-x) + var(--pgn-elevation-box-shadow-up-1-1-blur) + var(--pgn-elevation-box-shadow-up-1-1-color), + var(--pgn-elevation-box-shadow-up-1-2-offset-y) + var(--pgn-elevation-box-shadow-up-1-2-offset-x) + var(--pgn-elevation-box-shadow-up-1-2-blur) + var(--pgn-elevation-box-shadow-up-1-2-color); } @else if $level == 2 { - box-shadow: var(--pgn-elevation-box-shadow-up-2); + box-shadow: + var(--pgn-elevation-box-shadow-up-2-1-offset-y) + var(--pgn-elevation-box-shadow-up-2-1-offset-x) + var(--pgn-elevation-box-shadow-up-2-1-blur) + var(--pgn-elevation-box-shadow-up-2-1-color), + var(--pgn-elevation-box-shadow-up-2-2-offset-y) + var(--pgn-elevation-box-shadow-up-2-2-offset-x) + var(--pgn-elevation-box-shadow-up-2-2-blur) + var(--pgn-elevation-box-shadow-up-2-2-color); } @else if $level == 3 { - box-shadow: var(--pgn-elevation-box-shadow-up-3); + box-shadow: + var(--pgn-elevation-box-shadow-up-3-1-offset-y) + var(--pgn-elevation-box-shadow-up-3-1-offset-x) + var(--pgn-elevation-box-shadow-up-3-1-blur) + var(--pgn-elevation-box-shadow-up-3-1-color), + var(--pgn-elevation-box-shadow-up-3-2-offset-y) + var(--pgn-elevation-box-shadow-up-3-2-offset-x) + var(--pgn-elevation-box-shadow-up-3-2-blur) + var(--pgn-elevation-box-shadow-up-3-2-color); } @else if $level == 4 { - box-shadow: var(--pgn-elevation-box-shadow-up-4); + box-shadow: + var(--pgn-elevation-box-shadow-up-4-1-offset-y) + var(--pgn-elevation-box-shadow-up-4-1-offset-x) + var(--pgn-elevation-box-shadow-up-4-1-blur) + var(--pgn-elevation-box-shadow-up-4-1-color), + var(--pgn-elevation-box-shadow-up-4-2-offset-y) + var(--pgn-elevation-box-shadow-up-4-2-offset-x) + var(--pgn-elevation-box-shadow-up-4-2-blur) + var(--pgn-elevation-box-shadow-up-4-2-color); } @else if $level == 5 { - box-shadow: var(--pgn-elevation-box-shadow-up-5); + box-shadow: + var(--pgn-elevation-box-shadow-up-5-1-offset-y) + var(--pgn-elevation-box-shadow-up-5-1-offset-x) + var(--pgn-elevation-box-shadow-up-5-1-blur) + var(--pgn-elevation-box-shadow-up-5-1-color), + var(--pgn-elevation-box-shadow-up-5-2-offset-y) + var(--pgn-elevation-box-shadow-up-5-2-offset-x) + var(--pgn-elevation-box-shadow-up-5-2-blur) + var(--pgn-elevation-box-shadow-up-5-2-color); } @else { @@ -584,23 +946,63 @@ $box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5) !default; @if $side == "right" { @if $level == 1 { - box-shadow: var(--pgn-elevation-box-shadow-right-1); + box-shadow: + var(--pgn-elevation-box-shadow-right-1-1-offset-y) + var(--pgn-elevation-box-shadow-right-1-1-offset-x) + var(--pgn-elevation-box-shadow-right-1-1-blur) + var(--pgn-elevation-box-shadow-right-1-1-color), + var(--pgn-elevation-box-shadow-right-1-2-offset-y) + var(--pgn-elevation-box-shadow-right-1-2-offset-x) + var(--pgn-elevation-box-shadow-right-1-2-blur) + var(--pgn-elevation-box-shadow-right-1-2-color); } @else if $level == 2 { - box-shadow: var(--pgn-elevation-box-shadow-right-2); + box-shadow: + var(--pgn-elevation-box-shadow-right-2-1-offset-y) + var(--pgn-elevation-box-shadow-right-2-1-offset-x) + var(--pgn-elevation-box-shadow-right-2-1-blur) + var(--pgn-elevation-box-shadow-right-2-1-color), + var(--pgn-elevation-box-shadow-right-2-2-offset-y) + var(--pgn-elevation-box-shadow-right-2-2-offset-x) + var(--pgn-elevation-box-shadow-right-2-2-blur) + var(--pgn-elevation-box-shadow-right-2-2-color); } @else if $level == 3 { - box-shadow: var(--pgn-elevation-box-shadow-right-3); + box-shadow: + var(--pgn-elevation-box-shadow-right-3-1-offset-y) + var(--pgn-elevation-box-shadow-right-3-1-offset-x) + var(--pgn-elevation-box-shadow-right-3-1-blur) + var(--pgn-elevation-box-shadow-right-3-1-color), + var(--pgn-elevation-box-shadow-right-3-2-offset-y) + var(--pgn-elevation-box-shadow-right-3-2-offset-x) + var(--pgn-elevation-box-shadow-right-3-2-blur) + var(--pgn-elevation-box-shadow-right-3-2-color); } @else if $level == 4 { - box-shadow: var(--pgn-elevation-box-shadow-right-4); + box-shadow: + var(--pgn-elevation-box-shadow-right-4-1-offset-y) + var(--pgn-elevation-box-shadow-right-4-1-offset-x) + var(--pgn-elevation-box-shadow-right-4-1-blur) + var(--pgn-elevation-box-shadow-right-4-1-color), + var(--pgn-elevation-box-shadow-right-4-2-offset-y) + var(--pgn-elevation-box-shadow-right-4-2-offset-x) + var(--pgn-elevation-box-shadow-right-4-2-blur) + var(--pgn-elevation-box-shadow-right-4-2-color); } @else if $level == 5 { - box-shadow: var(--pgn-elevation-box-shadow-right-5); + box-shadow: + var(--pgn-elevation-box-shadow-right-5-1-offset-y) + var(--pgn-elevation-box-shadow-right-5-1-offset-x) + var(--pgn-elevation-box-shadow-right-5-1-blur) + var(--pgn-elevation-box-shadow-right-5-1-color), + var(--pgn-elevation-box-shadow-right-5-2-offset-y) + var(--pgn-elevation-box-shadow-right-5-2-offset-x) + var(--pgn-elevation-box-shadow-right-5-2-blur) + var(--pgn-elevation-box-shadow-right-5-2-color); } @else { @@ -610,23 +1012,63 @@ $box-shadow-centered-5: var(--pgn-elevation-box-shadow-centered-5) !default; @if $side == "centered" { @if $level == 1 { - box-shadow: var(--pgn-elevation-box-shadow-centered-1); + box-shadow: + var(--pgn-elevation-box-shadow-centered-1-1-offset-y) + var(--pgn-elevation-box-shadow-centered-1-1-offset-x) + var(--pgn-elevation-box-shadow-centered-1-1-blur) + var(--pgn-elevation-box-shadow-centered-1-1-color), + var(--pgn-elevation-box-shadow-centered-1-2-offset-y) + var(--pgn-elevation-box-shadow-centered-1-2-offset-x) + var(--pgn-elevation-box-shadow-centered-1-2-blur) + var(--pgn-elevation-box-shadow-centered-1-2-color); } @else if $level == 2 { - box-shadow: var(--pgn-elevation-box-shadow-centered-2); + box-shadow: + var(--pgn-elevation-box-shadow-centered-2-1-offset-y) + var(--pgn-elevation-box-shadow-centered-2-1-offset-x) + var(--pgn-elevation-box-shadow-centered-2-1-blur) + var(--pgn-elevation-box-shadow-centered-2-1-color), + var(--pgn-elevation-box-shadow-centered-2-2-offset-y) + var(--pgn-elevation-box-shadow-centered-2-2-offset-x) + var(--pgn-elevation-box-shadow-centered-2-2-blur) + var(--pgn-elevation-box-shadow-centered-2-2-color); } @else if $level == 3 { - box-shadow: var(--pgn-elevation-box-shadow-centered-3); + box-shadow: + var(--pgn-elevation-box-shadow-centered-3-1-offset-y) + var(--pgn-elevation-box-shadow-centered-3-1-offset-x) + var(--pgn-elevation-box-shadow-centered-3-1-blur) + var(--pgn-elevation-box-shadow-centered-3-1-color), + var(--pgn-elevation-box-shadow-centered-3-2-offset-y) + var(--pgn-elevation-box-shadow-centered-3-2-offset-x) + var(--pgn-elevation-box-shadow-centered-3-2-blur) + var(--pgn-elevation-box-shadow-centered-3-2-color); } @else if $level == 4 { - box-shadow: var(--pgn-elevation-box-shadow-centered-4); + box-shadow: + var(--pgn-elevation-box-shadow-centered-4-1-offset-y) + var(--pgn-elevation-box-shadow-centered-4-1-offset-x) + var(--pgn-elevation-box-shadow-centered-4-1-blur) + var(--pgn-elevation-box-shadow-centered-4-1-color), + var(--pgn-elevation-box-shadow-centered-4-2-offset-y) + var(--pgn-elevation-box-shadow-centered-4-2-offset-x) + var(--pgn-elevation-box-shadow-centered-4-2-blur) + var(--pgn-elevation-box-shadow-centered-4-2-color); } @else if $level == 5 { - box-shadow: var(--pgn-elevation-box-shadow-centered-5); + box-shadow: + var(--pgn-elevation-box-shadow-centered-5-1-offset-y) + var(--pgn-elevation-box-shadow-centered-5-1-offset-x) + var(--pgn-elevation-box-shadow-centered-5-1-blur) + var(--pgn-elevation-box-shadow-centered-5-1-color), + var(--pgn-elevation-box-shadow-centered-5-2-offset-y) + var(--pgn-elevation-box-shadow-centered-5-2-offset-x) + var(--pgn-elevation-box-shadow-centered-5-2-blur) + var(--pgn-elevation-box-shadow-centered-5-2-color); } @else { @@ -728,7 +1170,8 @@ $display2-size: var(--pgn-typography-font-size-display-2) !default; $display3-size: var(--pgn-typography-font-size-display-3) !default; $display4-size: var(--pgn-typography-font-size-display-4) !default; -$display-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default; // deprecated in favor of $display1-mobile-size +// deprecated in favor of $display1-mobile-size +$display-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default; $display1-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default; $display2-mobile-size: var(--pgn-typography-font-size-display-mobile-2) !default; $display3-mobile-size: var(--pgn-typography-font-size-display-mobile-3) !default; @@ -806,7 +1249,12 @@ $input-btn-line-height: var(--pgn-typography-input-btn-line-height-base) !defaul $input-btn-focus-width: var(--pgn-size-input-btn-focus-width) !default; $input-btn-focus-color: var(--pgn-color-input-btn-focus) !default; -$input-btn-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow) !default; +$input-btn-focus-box-shadow: + var(--pgn-elevation-input-btn-focus-box-shadow-offset-x) + var(--pgn-elevation-input-btn-focus-box-shadow-offset-y) + var(--pgn-elevation-input-btn-focus-box-shadow-spread) + var(--pgn-elevation-input-btn-focus-box-shadow-color) + var(--pgn-elevation-input-btn-focus-box-shadow-blur) !default; $input-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y) !default; $input-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x) !default; diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json index 0234a53246..2bad75960e 100644 --- a/tokens/src/themes/light/components/Annotation.json +++ b/tokens/src/themes/light/components/Annotation.json @@ -9,15 +9,13 @@ "color": "rgba(0, 0, 0, .15)", "offsetX": "0", "offsetY": "2px", - "blur": "4px", - "dropShadow": true + "blur": "4px" }, { "color": "rgba(0, 0, 0, .15)", "offsetX": "0", "offsetY": "2px", - "blur": "8px", - "dropShadow": true + "blur": "8px" } ] } diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json index 97307c6614..4641968f7c 100644 --- a/tokens/src/themes/light/components/Dropzone.json +++ b/tokens/src/themes/light/components/Dropzone.json @@ -20,7 +20,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "focus": { @@ -31,7 +31,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "active": { @@ -42,7 +42,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "error": { @@ -53,7 +53,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } } } diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json index b13ff1a676..d2e1b47e0b 100644 --- a/tokens/src/themes/light/components/IconButton.json +++ b/tokens/src/themes/light/components/IconButton.json @@ -389,7 +389,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "inverse": { @@ -399,7 +399,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "active": { "$value": "none" }, @@ -413,7 +413,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "inverse": { @@ -423,7 +423,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "active": { "$value": "none" }, @@ -437,7 +437,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "inverse": { @@ -447,7 +447,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "active": { "$value": "none" }, @@ -461,7 +461,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "inverse": { @@ -471,7 +471,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "active": { "$value": "none" }, @@ -485,7 +485,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "inverse": { @@ -495,7 +495,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "active": { "$value": "none" }, @@ -509,7 +509,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "inverse": { @@ -519,7 +519,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "active": { "$value": "none" }, @@ -533,7 +533,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "inverse": { @@ -543,7 +543,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "active": { "$value": "none" }, @@ -557,7 +557,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "inverse": { @@ -567,7 +567,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "active": { "$value": "none" }, @@ -581,7 +581,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "inverse": { @@ -591,7 +591,7 @@ "offsetX": "0", "offsetY": "0", "blur": "0", - "inset": true + "inset": "inset" } }, "active": { "$value": "none" }, diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json index 47ad4a748d..7336e557a3 100644 --- a/tokens/src/themes/light/components/Tooltip.json +++ b/tokens/src/themes/light/components/Tooltip.json @@ -24,15 +24,13 @@ "color": "rgba(0, 0, 0, .15)", "offsetX": "0", "offsetY": "2px", - "blur": "4px", - "dropShadow": true + "blur": "4px" }, { "color": "rgba(0, 0, 0, .15)", "offsetX": "0", "offsetY": "2px", - "blur": "8px", - "dropShadow": true + "blur": "8px" } ] } diff --git a/tokens/utils.js b/tokens/utils.js index 00d31a45bb..5fb09c77ea 100644 --- a/tokens/utils.js +++ b/tokens/utils.js @@ -237,66 +237,10 @@ function composeBreakpointName(breakpointName, format) { return `@custom-media --${breakpointName.replace(/breakpoint/g, `breakpoint-${format}-width`)}`; } -/** - * Constructs and modifies the `$value` of a token based on specific properties. - * - * @param {Object} token - The token object that contains the `$value` to be expanded. - * @param {string|Object|Array} token.$value - The value of the token, which can be a string, - * an object, or an array of objects. - * - * @returns {void} - This function modifies the `$value` property of the `token` object in place. - * - * @example - * // Given a token with a shadow array: - * const token = { - * $value: [ - * { dropShadow: true, offsetX: '5px', offsetY: '5px', blur: '10px', color: '#000' }, - * { inset: true, offsetX: '10px', offsetY: '10px', blur: '20px', spread: '5px', color: '#333' } - * ] - * }; - * - * constructExpandedToken(token); - * // Result: token.$value = 'drop-shadow(5px 5px 10px #000) inset 10px 10px 20px 5px #333' - */ -function constructExpandedToken(token) { - const value = token.$value; - - const createFinalValue = (val, properties) => properties - .map((prop) => (val[prop] !== undefined ? val[prop] : '')) - .filter(Boolean) - .join(' '); - - if (value) { - if (Array.isArray(value)) { - const shadows = value - .filter((val) => val.dropShadow) - .map((val) => `drop-shadow(${createFinalValue(val, ['offsetX', 'offsetY', 'blur', 'color'])})`) - .join(' '); - - if (shadows) { - token.$value = shadows; - } else { - value.forEach((val) => { - if (val.inset) { - token.$value = `inset ${createFinalValue(val, ['offsetX', 'offsetY', 'blur', 'spread', 'color'])}`; - } - }); - } - } else if (value.inset) { - token.$value = `inset ${createFinalValue(value, ['offsetX', 'offsetY', 'blur', 'spread', 'color'])}`; - } else if (value.property) { - token.$value = createFinalValue(value, ['property', 'duration', 'timingFunction', 'delay']); - } else if (value.dropShadow) { - token.$value = `drop-shadow(${createFinalValue(value, ['offsetX', 'offsetY', 'blur', 'color'])})`; - } - } -} - module.exports = { createIndexCssFile, getFilesWithExtension, getSCSStoCSSMap, transformInPath, composeBreakpointName, - constructExpandedToken, }; diff --git a/www/src/components/_doc-elements.scss b/www/src/components/_doc-elements.scss index decd92b57e..9224aaf800 100644 --- a/www/src/components/_doc-elements.scss +++ b/www/src/components/_doc-elements.scss @@ -279,7 +279,15 @@ height: auto; &:focus { - box-shadow: var(--pgn-elevation-box-shadow-level-4); + box-shadow: + var(--pgn-elevation-box-shadow-level-4-1-offset-y) + var(--pgn-elevation-box-shadow-level-4-1-offset-x) + var(--pgn-elevation-box-shadow-level-4-1-blur) + var(--pgn-elevation-box-shadow-level-4-1-color), + var(--pgn-elevation-box-shadow-level-4-2-offset-y) + var(--pgn-elevation-box-shadow-level-4-2-offset-x) + var(--pgn-elevation-box-shadow-level-4-2-blur) + var(--pgn-elevation-box-shadow-level-4-2-color); border-radius: var(--pgn-size-border-radius-base); } diff --git a/www/src/components/header/Header.scss b/www/src/components/header/Header.scss index ddd9dad3f2..9fd733ce36 100644 --- a/www/src/components/header/Header.scss +++ b/www/src/components/header/Header.scss @@ -42,7 +42,15 @@ background-color: var(--pgn-color-white); width: 28rem; left: -3rem; - box-shadow: var(--pgn-elevation-box-shadow-down-2); + box-shadow: + var(--pgn-elevation-box-shadow-down-2-1-offset-y) + var(--pgn-elevation-box-shadow-down-2-1-offset-x) + var(--pgn-elevation-box-shadow-down-2-1-blur) + var(--pgn-elevation-box-shadow-down-2-1-color), + var(--pgn-elevation-box-shadow-down-2-2-offset-y) + var(--pgn-elevation-box-shadow-down-2-2-offset-x) + var(--pgn-elevation-box-shadow-down-2-2-blur) + var(--pgn-elevation-box-shadow-down-2-2-color); .pgn-doc__menu-items { max-height: 28rem;