From d38e1e9e2150342070da9a5c78ec0ab0407d7c9d Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Fri, 30 Sep 2022 14:46:16 +0300 Subject: [PATCH] [BD-46] DRAFT: replace of variables SCSS to CSS (#1633) * feat: replace SCSS variables to CSS Co-authored-by: vzadorozhnii --- scss/core/tokens.css | 75 ++++-- src/ActionRow/_ActionRow.scss | 4 +- src/Alert/Alert.scss | 28 +- src/Alert/_variables.scss | 6 +- src/Annotation/Annotation.scss | 50 ++-- src/Annotation/_variables.scss | 14 +- src/Avatar/Avatar.scss | 36 +-- src/Avatar/_variables.scss | 2 +- src/AvatarButton/AvatarButton.scss | 6 +- src/Badge/Badge.scss | 2 +- src/Badge/_variables.scss | 4 +- src/Badge/badge-bootstrap.scss | 43 +++ src/Breadcrumb/Breadcrumb.scss | 28 +- src/Breadcrumb/_variables.scss | 16 +- src/Bubble/Bubble.scss | 6 +- src/Bubble/_variables.scss | 8 +- src/Button/Button.scss | 135 +++++----- src/Button/_variables.scss | 57 ++-- src/Button/button-bootstrap.scss | 126 +++++++++ src/Card/Card.scss | 124 ++++----- src/Card/_variables.scss | 18 +- src/Card/card-bootstrap.scss | 254 ++++++++++++++++++ src/Carousel/Carousel.scss | 2 +- src/Carousel/_variables.scss | 4 +- src/Carousel/carousel-bootstrap.scss | 181 +++++++++++++ src/CloseButton/CloseButton.scss | 2 +- src/CloseButton/_variables.scss | 8 +- src/CloseButton/close-button-bootstrap.scss | 32 +++ src/Code/Code.scss | 2 +- src/Code/_variables.scss | 6 +- src/Code/code-bootstrap.scss | 56 ++++ src/Collapsible/Collapsible.scss | 22 +- src/DataTable/DataTable.scss | 60 ++--- src/DataTable/_variables.scss | 6 +- src/Dropdown/_variables.scss | 20 +- src/Dropzone/Dropzone.scss | 20 +- src/Dropzone/_variables.scss | 16 +- src/Fieldset/Fieldset.scss | 2 +- src/Form/_Form.scss | 222 +++++++-------- src/Form/_FormText.scss | 16 +- src/Form/_mixins.scss | 4 +- src/Form/_variables.scss | 102 +++---- src/Icon/Icon.scss | 16 +- src/IconButton/IconButton.scss | 20 +- src/IconButton/_variables.scss | 18 +- src/Image/_variables.scss | 8 +- src/Menu/Menu.scss | 50 ++-- src/Modal/Modal.scss | 16 +- src/Modal/_ModalDialog.scss | 88 +++--- src/Modal/_variables.scss | 15 +- src/Nav/Nav.scss | 58 ++-- src/Nav/_variables.scss | 22 +- src/Navbar/_variables.scss | 32 +-- src/PageBanner/PageBanner.scss | 12 +- src/Pagination/Pagination.scss | 93 ++++--- src/Pagination/_variables.scss | 26 +- src/Popover/Popover.scss | 28 +- src/Popover/_variables.scss | 24 +- src/Popover/popover-bootstrap.scss | 192 +++++++++++++ src/ProductTour/Checkpoint.scss | 70 ++--- src/ProductTour/_variables.scss | 8 +- src/ProgressBar/ProgressBar.scss | 35 +-- src/ProgressBar/_variables.scss | 14 +- src/SearchField/SearchField.scss | 28 +- src/SearchField/_variables.scss | 12 +- src/SelectableBox/SelectableBox.scss | 18 +- src/Sheet/Sheet.scss | 8 +- src/Stack/Stack.scss | 2 +- src/Stepper/Stepper.scss | 16 +- src/Sticky/Sticky.scss | 8 +- src/Table/Table.scss | 4 +- src/Table/_variables.scss | 18 +- src/Table/tables-bootstrap.scss | 168 ++++++++++++ src/Tabs/Tabs.scss | 6 +- src/Tabs/_variables.scss | 2 +- src/Toast/Toast.scss | 12 +- src/Toast/ToastContainer.scss | 16 +- src/Toast/_variables.scss | 9 +- src/Tooltip/Tooltip.scss | 14 +- src/Tooltip/_variables.scss | 14 +- src/ValidationMessage/ValidationMessage.scss | 2 +- tokens/build/_variables.scss | 75 ++++-- tokens/build/scss-to-css-components.json | 2 +- tokens/build/scss-to-css-core.json | 2 +- tokens/build/variables.css | 75 ++++-- .../source/borders-fills/border.tokens.json | 7 + tokens/source/colors/colors.tokens.json | 3 + .../colors/component/component.tokens.json | 12 +- .../ActionRow.tokens.json} | 0 .../Alert.tokens.json} | 0 .../Annotation.tokens.json} | 0 .../Avatar.tokens.json} | 0 .../AvatarButton.tokens.json} | 0 .../Badge.tokens.json} | 0 .../Breadcrumb.tokens.json} | 4 +- .../Bubble.tokens.json} | 0 .../Button.tokens.json} | 14 +- .../Card.tokens.json} | 2 +- .../Carousel.tokens.json} | 0 .../Chip.tokens.json} | 0 .../CloseButton.tokens.json} | 0 .../source/components/Code/Code.tokens.json | 39 +++ .../Collapsible.tokens.json} | 0 .../Container.tokens.json} | 0 .../DataTable.tokens.json} | 0 .../Dropdown.tokens.json} | 0 .../Dropzone.tokens.json} | 0 .../Form.tokens.json} | 0 .../Icon.tokens.json} | 0 .../IconButton.tokens.json} | 0 .../Image.tokens.json} | 0 .../Menu.tokens.json} | 0 .../Modal.tokens.json} | 7 +- .../nav.tokens.json => Nav/Nav.tokens.json} | 0 .../Navbar.tokens.json} | 0 .../Pagination.tokens.json} | 0 .../Popover.tokens.json} | 0 .../ProductTour.tokens.json} | 0 .../ProgressBar.tokens.json} | 0 .../SearchField.tokens.json} | 0 .../SelectableBox.tokens.json} | 0 .../Spinner.tokens.json} | 0 .../Stack.tokens.json} | 0 .../Sticky.tokens.json} | 0 .../Table.tokens.json} | 5 + .../Tabs.tokens.json} | 0 .../Toast.tokens.json} | 0 .../Tooltip.tokens.json} | 0 .../source/components/code/code.tokens.json | 43 --- tokens/source/core/core.tokens.json | 30 ++- .../box-shadow/box-shadow.tokens.json | 6 +- .../layout/list-group/list-group.tokens.json | 51 ++++ tokens/source/layout/table/table.tokens.json | 19 -- tokens/source/links/links.tokens.json | 7 + .../source/typography/font/font.tokens.json | 10 +- tokens/source/www/zindex/zindex.tokens.json | 8 + www/src/components/Header.scss | 2 +- www/src/scss/_variables.scss | 8 +- 138 files changed, 2361 insertions(+), 1097 deletions(-) create mode 100644 src/Badge/badge-bootstrap.scss create mode 100644 src/Button/button-bootstrap.scss create mode 100644 src/Card/card-bootstrap.scss create mode 100644 src/Carousel/carousel-bootstrap.scss create mode 100644 src/CloseButton/close-button-bootstrap.scss create mode 100644 src/Code/code-bootstrap.scss create mode 100644 src/Popover/popover-bootstrap.scss create mode 100644 src/Table/tables-bootstrap.scss rename tokens/source/components/{action-row/action-row.tokens.json => ActionRow/ActionRow.tokens.json} (100%) rename tokens/source/components/{alert/alert.tokens.json => Alert/Alert.tokens.json} (100%) rename tokens/source/components/{annotation/annotation.tokens.json => Annotation/Annotation.tokens.json} (100%) rename tokens/source/components/{avatar/avatar.tokens.json => Avatar/Avatar.tokens.json} (100%) rename tokens/source/components/{avatar-button/avatar-button.tokens.json => AvatarButton/AvatarButton.tokens.json} (100%) rename tokens/source/components/{badge/badge.tokens.json => Badge/Badge.tokens.json} (100%) rename tokens/source/components/{breadcrumb/breadcrumb.tokens.json => Breadcrumb/Breadcrumb.tokens.json} (89%) rename tokens/source/components/{bubble/bubble.tokens.json => Bubble/Bubble.tokens.json} (100%) rename tokens/source/components/{button/button.tokens.json => Button/Button.tokens.json} (89%) rename tokens/source/components/{card/card.tokens.json => Card/Card.tokens.json} (97%) rename tokens/source/components/{carousel/carousel.tokens.json => Carousel/Carousel.tokens.json} (100%) rename tokens/source/components/{chip/chip.tokens.json => Chip/Chip.tokens.json} (100%) rename tokens/source/components/{close-button/close-button.tokens.json => CloseButton/CloseButton.tokens.json} (100%) create mode 100644 tokens/source/components/Code/Code.tokens.json rename tokens/source/components/{collapsible/collapsible.tokens.json => Collapsible/Collapsible.tokens.json} (100%) rename tokens/source/components/{container/container.tokens.json => Container/Container.tokens.json} (100%) rename tokens/source/components/{data-table/data-table.tokens.json => DataTable/DataTable.tokens.json} (100%) rename tokens/source/components/{dropdown/dropdown.tokens.json => Dropdown/Dropdown.tokens.json} (100%) rename tokens/source/components/{dropzone/dropzone.tokens.json => Dropzone/Dropzone.tokens.json} (100%) rename tokens/source/components/{form/form.tokens.json => Form/Form.tokens.json} (100%) rename tokens/source/components/{icon/icon.tokens.json => Icon/Icon.tokens.json} (100%) rename tokens/source/components/{icon-button/icon-button.tokens.json => IconButton/IconButton.tokens.json} (100%) rename tokens/source/components/{image/image.tokens.json => Image/Image.tokens.json} (100%) rename tokens/source/components/{menu/menu.tokens.json => Menu/Menu.tokens.json} (100%) rename tokens/source/components/{modal/modal.tokens.json => Modal/Modal.tokens.json} (92%) rename tokens/source/components/{nav/nav.tokens.json => Nav/Nav.tokens.json} (100%) rename tokens/source/components/{navbar/navbar.tokens.json => Navbar/Navbar.tokens.json} (100%) rename tokens/source/components/{pagination/pagination.tokens.json => Pagination/Pagination.tokens.json} (100%) rename tokens/source/components/{popover/popover.tokens.json => Popover/Popover.tokens.json} (100%) rename tokens/source/components/{product-tour/product-tour.tokens.json => ProductTour/ProductTour.tokens.json} (100%) rename tokens/source/components/{progress-bar/progress-bar.tokens.json => ProgressBar/ProgressBar.tokens.json} (100%) rename tokens/source/components/{search-field/search-field.tokens.json => SearchField/SearchField.tokens.json} (100%) rename tokens/source/components/{selectable-box/selectable-box.tokens.json => SelectableBox/SelectableBox.tokens.json} (100%) rename tokens/source/components/{spinner/spinner.tokens.json => Spinner/Spinner.tokens.json} (100%) rename tokens/source/components/{stack/stack.tokens.json => Stack/Stack.tokens.json} (100%) rename tokens/source/components/{sticky/sticky.tokens.json => Sticky/Sticky.tokens.json} (100%) rename tokens/source/components/{table/table.tokens.json => Table/Table.tokens.json} (94%) rename tokens/source/components/{tabs/tabs.tokens.json => Tabs/Tabs.tokens.json} (100%) rename tokens/source/components/{toast/toast.tokens.json => Toast/Toast.tokens.json} (100%) rename tokens/source/components/{tooltip/tooltip.tokens.json => Tooltip/Tooltip.tokens.json} (100%) delete mode 100644 tokens/source/components/code/code.tokens.json create mode 100644 tokens/source/layout/list-group/list-group.tokens.json delete mode 100644 tokens/source/layout/table/table.tokens.json create mode 100644 tokens/source/www/zindex/zindex.tokens.json diff --git a/scss/core/tokens.css b/scss/core/tokens.css index 474dbec35b..80cfaab7c9 100644 --- a/scss/core/tokens.css +++ b/scss/core/tokens.css @@ -1,4 +1,8 @@ :root { + --pgn-www-zindex-modal: 2503; + --pgn-www-zindex-sheet-backdrop: 2501; + --pgn-www-zindex-sheet: 2502; + --pgn-www-zindex-header: 2500; --pgn-paragraph-margin-bottom: 1rem; --pgn-line-height-sm: 1.5; --pgn-line-height-lg: 1.5; @@ -6,6 +10,7 @@ --pgn-headings-line-height: 1.25; --pgn-headings-font-family: null; --pgn-headings-margin-bottom: .5rem; + --pgn-font-weight-lead: null; --pgn-font-weight-bolder: bolder; --pgn-font-weight-bold: 700; --pgn-font-weight-semi-bold: 500; @@ -41,6 +46,7 @@ --pgn-transition-collapse: height .35s ease; --pgn-transition-fade: opacity .15s linear; --pgn-transition-base: all .2s ease-in-out; + --pgn-link-emphasized-hover-darken-percentage: 15%; --pgn-link-brand-inline-hover-decoration-color: #003C5E; --pgn-link-brand-inline-hover-decoration: underline; --pgn-link-brand-inline-hover-color: #003C5E; @@ -90,6 +96,9 @@ --pgn-size-base-75: 75rem; --pgn-size-base-50: 50rem; --pgn-size-base-25: 25rem; + --pgn-list-group-item-padding-x: 1.25rem; + --pgn-list-group-item-padding-y: .75rem; + --pgn-list-group-color: null; --pgn-grid-row-columns: 6; --pgn-grid-gutter-width: 24px; --pgn-grid-columns: 12; @@ -124,18 +133,24 @@ --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); + --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); + --pgn-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); --pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-core-list-inline-padding: .5rem; + --pgn-core-mark-bg: #FFF243; + --pgn-core-mark-padding: .2em; --pgn-core-input-btn-focus-width: 1px; --pgn-core-input-btn-line-height-sm: 1.4286; --pgn-core-input-btn-line-height-base: 1.3333; --pgn-core-input-btn-font-size-lg: 1.325rem; --pgn-core-input-btn-font-size-sm: .875rem; --pgn-core-input-btn-font-size-base: 1.125rem; - --pgn-core-input-btn-font-family: null; + --pgn-core-input-btn-font-family: inherit; --pgn-core-input-btn-padding-lg-x: 1.25rem; --pgn-core-input-btn-padding-lg-y: .6875rem; --pgn-core-input-btn-padding-sm-x: .75rem; @@ -279,20 +294,21 @@ --pgn-modal-footer-padding-y: 1.5rem; --pgn-modal-footer-padding-x: 1rem; --pgn-modal-footer-margin-between: .5rem; - --pgn-modal-inner-padding: 1.5rem; + --pgn-modal-inner-padding-bottom: .7rem; + --pgn-modal-inner-padding-base: 1.5rem; --pgn-menu-border-hover: transparent; --pgn-menu-border-active: transparent; --pgn-menu-border-base: transparent; --pgn-image-figure-caption-font-size: 90%; --pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); --pgn-image-thumbnail-padding: .25rem; + --pgn-icon-button-bg: transparent; + --pgn-icon-button-diameter-sm: 2.25rem; + --pgn-icon-button-diameter-md: 2.75rem; --pgn-icon-lg: 1.75rem; --pgn-icon-md: 1.5rem; --pgn-icon-sm: 1.25rem; --pgn-icon-inline: .8em; - --pgn-icon-button-bg: transparent; - --pgn-icon-button-diameter-sm: 2.25rem; - --pgn-icon-button-diameter-md: 2.75rem; --pgn-form-select-icon-padding: .5625rem; --pgn-form-control-icon-width: 32px; --pgn-form-feedback-tooltip-opacity: .9; @@ -413,12 +429,14 @@ --pgn-card-cap-color: null; --pgn-card-cap-bg: rgba(0, 0, 0, .03); --pgn-card-border-color-focus: rgba(0, 0, 0, .5); + --pgn-card-border-color-base: rgba(0, 0, 0, .125); --pgn-card-border-radius-logo: .25rem; --pgn-card-border-radius-image: .3125rem; --pgn-card-spacer-y: .75rem; --pgn-card-spacer-x: 1.25rem; --pgn-btn-transition: null; --pgn-btn-block-spacing-y: .5rem; + --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1); --pgn-btn-tertiary-inverse-bg-base: transparent; --pgn-btn-tertiary-bg-base: transparent; --pgn-btn-disabled-opacity: .65; @@ -444,6 +462,9 @@ --pgn-badge-padding-x-pill: .6em; --pgn-badge-padding-x-base: .5rem; --pgn-badge-font-size: 75%; + --pgn-avatar-button-padding-left-lg: .25em; + --pgn-avatar-button-padding-left-sm: .25em; + --pgn-avatar-button-padding-left-base: .25em; --pgn-avatar-size-huge: 18.75rem; --pgn-avatar-size-xxl: 11.5rem; --pgn-avatar-size-xl: 6rem; @@ -452,9 +473,6 @@ --pgn-avatar-size-xs: 1.5rem; --pgn-avatar-size-base: 3rem; --pgn-avatar-border-radius: 100%; - --pgn-avatar-button-padding-left-lg: .25em; - --pgn-avatar-button-padding-left-sm: .25em; - --pgn-avatar-button-padding-left-base: .25em; --pgn-annotation-arrow-border-width: .5rem; --pgn-annotation-arrow-side-margin: .25rem; --pgn-annotation-max-width: 18.75rem; @@ -560,6 +578,7 @@ --pgn-color-gray-300: #ADADAD; --pgn-color-gray-200: #CCCCCC; --pgn-color-gray-100: #EBEBEB; + --pgn-color-theme-interval: 8%; --pgn-color-accent-b: #FFEE88; --pgn-color-accent-a: #00BBF9; --pgn-color-teal: #006DAA; @@ -579,6 +598,7 @@ --pgn-headings-color: var(--pgn-color-black); --pgn-headings-font-weight: var(--pgn-font-weight-bold); --pgn-font-weight-base: var(--pgn-font-weight-normal); + --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25); --pgn-font-size-mobile-h6: var(--pgn-font-size-h6); --pgn-font-size-mobile-h5: var(--pgn-font-size-h5); --pgn-font-size-mobile-h4: var(--pgn-font-size-h4); @@ -589,9 +609,17 @@ --pgn-display-weight-3: var(--pgn-font-weight-bold); --pgn-display-weight-2: var(--pgn-font-weight-bold); --pgn-display-weight-1: var(--pgn-font-weight-bold); - --pgn-box-shadow-lg: 0 .25rem .5rem rgba(var(--pgn-color-black), .3); - --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(var(--pgn-color-black), .2); - --pgn-box-shadow-base: 0 .125rem .25rem rgba(var(--pgn-color-black), .3); + --pgn-list-group-action-active-bg: var(--pgn-color-gray-200); + --pgn-list-group-action-color-base: var(--pgn-color-gray-700); + --pgn-list-group-disabled-color: var(--pgn-color-gray-600); + --pgn-list-group-border-radius: var(--pgn-border-radius-base); + --pgn-list-group-border-width: var(--pgn-border-width); + --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125); + --pgn-list-group-bg-hover: var(--pgn-color-gray-100); + --pgn-list-group-bg-base: var(--pgn-color-white); + --pgn-core-dt-font-weight: var(--pgn-font-weight-bold); + --pgn-core-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25); + --pgn-core-blockquote-small-font-size: var(--pgn-font-size-small-base); --pgn-core-input-btn-border-width: var(--pgn-border-width); --pgn-core-input-btn-focus-box-shadow: 0 0 0 var(--pgn-core-input-btn-focus-width) var(--pgn-core-input-btn-focus-color); --pgn-core-input-btn-line-height-lg: var(--pgn-line-height-lg); @@ -670,7 +698,7 @@ --pgn-modal-content-border-radius: var(--pgn-border-radius-lg); --pgn-modal-content-bg: var(--pgn-color-white); --pgn-modal-title-line-height: var(--pgn-line-height-base); - --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-y) var(--pgn-modal-footer-padding-x); + --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y); --pgn-menu-background-base: var(--pgn-btn-tertiary-bg-base); --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base); --pgn-image-thumbnail-border-color: var(--pgn-color-gray-200); @@ -729,6 +757,7 @@ --pgn-dropdown-bg: var(--pgn-color-white); --pgn-dropdown-font-size: var(--pgn-font-size-base); --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item); + --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); --pgn-data-table-border: 1px solid var(--pgn-color-gray-200); --pgn-data-table-background-color: var(--pgn-color-white); --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x); @@ -755,10 +784,9 @@ --pgn-card-margin-deck: var(--pgn-card-margin-group); --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max); --pgn-card-bg: var(--pgn-color-white); - --pgn-card-border-color-base: rgba(var(--pgn-color-black), .125); --pgn-card-border-radius-base: var(--pgn-border-radius-base); --pgn-card-border-width: var(--pgn-border-width); - --pgn-btn-tertiary-inverse-bg-hover: rgba(var(--pgn-color-white), .1); + --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); --pgn-btn-tertiary-inverse-color: var(--pgn-color-white); --pgn-btn-tertiary-color: var(--pgn-color-gray-700); --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(var(--pgn-color-white), .15), 0 1px 1px rgba(var(--pgn-color-black), .075); @@ -772,12 +800,14 @@ --pgn-btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm); --pgn-btn-font-size-base: var(--pgn-core-input-btn-font-size-base); --pgn-btn-font-family: var(--pgn-core-input-btn-font-family); + --pgn-btn-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x); --pgn-btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); --pgn-btn-padding-x-base: var(--pgn-core-input-btn-padding-x); - --pgn-btn-padding-y-sm-x: var(--pgn-core-input-btn-padding-sm-x); - --pgn-btn-padding-y-sm-y: var(--pgn-core-input-btn-padding-sm-y); + --pgn-btn-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y); --pgn-btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); --pgn-btn-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-breadcrumb-inverse-color: var(--pgn-color-white); + --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700); --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600); --pgn-breadcrumb-bg: var(--pgn-color-gray-200); --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base); @@ -803,16 +833,22 @@ --pgn-color-gray-500: var(--pgn-color-gray-base); --pgn-body-color: var(--pgn-color-gray-700); --pgn-body-bg: var(--pgn-color-white); + --pgn-border-hr-margin-y: var(--pgn-core-spacer); + --pgn-border-hr-width: var(--pgn-border-width); + --pgn-border-hr-color: rgba(var(--pgn-color-black), .1); --pgn-border-color: var(--pgn-color-gray-200); --pgn-link-brand-inline-color: var(--pgn-color-brand-500); --pgn-link-brand-color: var(--pgn-color-brand-500); --pgn-link-muted-inline-color: var(--pgn-color-primary-500); --pgn-link-muted-color: var(--pgn-color-primary-500); + --pgn-list-group-action-active-color: var(--pgn-body-color); + --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base); + --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); + --pgn-list-group-active-color-base: var(--pgn-component-active-color); --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base); --pgn-table-dark-color-border: var(--pgn-table-dark-bg-base); --pgn-table-dark-color-hover: var(--pgn-table-dark-color-base); --pgn-table-border-color: var(--pgn-border-color); - --pgn-table-color-border: var(--pgn-border-color); --pgn-table-color-base: var(--pgn-body-color); --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); --pgn-search-field-border-color-base: var(--pgn-color-gray-500); @@ -895,8 +931,6 @@ --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width)); --pgn-dropdown-color-header: var(--pgn-color-gray-500); --pgn-dropdown-color-base: var(--pgn-body-color); - --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); - --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); @@ -914,9 +948,9 @@ --pgn-color-secondary-500: var(--pgn-color-secondary-base); --pgn-link-inline-color: var(--pgn-color-info-500); --pgn-link-color: var(--pgn-color-info-500); + --pgn-list-group-active-bg: var(--pgn-component-active-bg); --pgn-core-input-btn-focus-color: var(--pgn-component-active-bg); --pgn-table-caption-color: var(--pgn-text-muted); - --pgn-table-color-caption: var(--pgn-text-muted); --pgn-table-color-hover: var(--pgn-table-color-base); --pgn-popover-danger-icon-color: var(--pgn-color-warning-500); --pgn-popover-warning-icon-color: var(--pgn-color-warning-500); @@ -952,6 +986,7 @@ --pgn-form-input-focus-color-border: var(--pgn-component-active-bg); --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2); --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500); + --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active); --pgn-pagination-color-base: var(--pgn-link-color); --pgn-form-feedback-icon-color-invalid: var(--pgn-form-feedback-color-invalid); diff --git a/src/ActionRow/_ActionRow.scss b/src/ActionRow/_ActionRow.scss index d562aa6567..1d73f2e4b2 100644 --- a/src/ActionRow/_ActionRow.scss +++ b/src/ActionRow/_ActionRow.scss @@ -11,7 +11,7 @@ } & > * + * { - margin-inline-start: $action-row-gap-x; + margin-inline-start: var(--pgn-action-row-gap-x); } } @@ -27,7 +27,7 @@ } & > * + * { - margin-bottom: $action-row-gap-y; + margin-bottom: var(--pgn-action-row-gap-y); } } diff --git a/src/Alert/Alert.scss b/src/Alert/Alert.scss index c17ad75a07..e393f582db 100644 --- a/src/Alert/Alert.scss +++ b/src/Alert/Alert.scss @@ -12,11 +12,11 @@ .alert { position: relative; - padding: $alert-padding-y $alert-padding-x; - margin-bottom: $alert-margin-bottom; - border: $alert-border-width solid transparent; + padding: var(--pgn-alert-padding-y) var(--pgn-alert-padding-x); + margin-bottom: var(--pgn-alert-margin-bottom); + border: var(--pgn-alert-border-width) solid transparent; - @include border-radius($alert-border-radius); + @include border-radius(var(--pgn-alert-border-radius)); @include pgn-box-shadow(1, "down"); .alert-message-content > :last-child { @@ -25,7 +25,7 @@ .alert-icon { float: left; - margin-inline-end: $alert-icon-space; + margin-inline-end: var(--pgn-alert-icon-space); width: 1.5rem; height: 1.5rem; flex-shrink: 0; @@ -34,17 +34,17 @@ // Headings for larger alerts .alert-heading { - // Specified to prevent conflicts of changing $headings-color - color: $alert-title-color; + // Specified to prevent conflicts of changing var(--pgn-headings-color) + color: var(--pgn-alert-color-title); display: flex; } // added to align content and icon .alert-content { display: flex; - font-size: $alert-font-size; - line-height: $alert-line-height; - color: $alert-content-color; + font-size: var(--pgn-alert-font-size); + line-height: var(--pgn-alert-line-height); + color: var(--pgn-alert-color-content); text-align: start; div { @@ -54,7 +54,7 @@ // Provide class for links that match alerts .alert-link { - font-weight: $alert-link-font-weight; + font-weight: var(--pgn-alert-font-weight-link); text-decoration: underline; &:hover { @@ -66,16 +66,16 @@ // // Expand the right padding and account for the close button's positioning. -// Baking in $close-font-size: $font-size-base * 1.5 !default; to avoid any dependency +// Baking in $close-font-size: var(--pgn-font-size-base) * 1.5 !default; to avoid any dependency .alert-dismissible { - padding-right: ($font-size-base * 1.5) + $alert-padding-x * 2; + padding-right: calc((var(--pgn-font-size-base) * 1.5) + var(--pgn-alert-padding-x) * 2); // Adjust close link position .close { position: absolute; top: 0; right: 0; - padding: $alert-padding-y $alert-padding-x; + padding: var(--pgn-alert-padding-y) var(--pgn-alert-padding-x); color: inherit; } } diff --git a/src/Alert/_variables.scss b/src/Alert/_variables.scss index 493a06fece..f6e4a8de54 100644 --- a/src/Alert/_variables.scss +++ b/src/Alert/_variables.scss @@ -5,8 +5,8 @@ $alert-padding-y: 1.5rem !default; $alert-padding-x: 1.5rem !default; $alert-margin-bottom: 1rem !default; -$alert-border-radius: $border-radius !default; -$alert-link-font-weight: $font-weight-normal !default; +$alert-border-radius: var(--pgn-border-radius-base) !default; +$alert-link-font-weight: var(--pgn-font-weight-normal) !default; $alert-border-width: 0 !default; $alert-title-color: #000000 !default; $alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default; @@ -19,6 +19,6 @@ $alert-icon-space: .8rem !default; $alert-font-size: .875rem !default; $alert-line-height: 1.5rem !default; -$alert-content-color: $gray-700 !default; +$alert-content-color: var(--pgn-color-gray-700) !default; $alert-actions-gap: map-get($spacers, 3); diff --git a/src/Annotation/Annotation.scss b/src/Annotation/Annotation.scss index 3e6c9bc3f5..b1680ed204 100644 --- a/src/Annotation/Annotation.scss +++ b/src/Annotation/Annotation.scss @@ -9,41 +9,41 @@ @if $triangle-direction == top { border-bottom-color: $triangle-color; - border-width: 0 $annotation-arrow-border-width $annotation-arrow-border-width; + border-width: 0 var(--pgn-annotation-arrow-border-width) var(--pgn-annotation-arrow-border-width); right: 0; left: 0; - top: calc(#{$annotation-arrow-border-width} * -1); + top: calc(#{var(--pgn-annotation-arrow-border-width)} * -1); margin: 0 auto; } @else if $triangle-direction == right { border-left-color: $triangle-color; border-width: - $annotation-arrow-border-width 0 $annotation-arrow-border-width - $annotation-arrow-border-width; + var(--pgn-annotation-arrow-border-width) 0 var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-border-width); top: 0; bottom: 0; - right: calc(#{$annotation-arrow-border-width} * -1); + right: calc(#{var(--pgn-annotation-arrow-border-width)} * -1); margin: auto 0; } @else if $triangle-direction == bottom { border-top-color: $triangle-color; - border-width: $annotation-arrow-border-width $annotation-arrow-border-width 0; + border-width: var(--pgn-annotation-arrow-border-width) var(--pgn-annotation-arrow-border-width) 0; right: 0; left: 0; - bottom: calc(#{$annotation-arrow-border-width} * -1); + bottom: calc(#{var(--pgn-annotation-arrow-border-width)} * -1); margin: 0 auto; } @else if $triangle-direction == left { border-right-color: $triangle-color; border-width: - $annotation-arrow-border-width $annotation-arrow-border-width - $annotation-arrow-border-width 0; + var(--pgn-annotation-arrow-border-width) var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-border-width) 0; top: 0; bottom: 0; - left: calc(#{$annotation-arrow-border-width} * -1); + left: calc(#{var(--pgn-annotation-arrow-border-width)} * -1); margin: auto 0; } @@ -53,15 +53,15 @@ } .pgn__annotation { - padding: $annotation-padding; - border-radius: $annotation-border-radius; - max-width: $annotation-max-width; - filter: $annotation-box-shadow; + padding: var(--pgn-annotation-padding); + border-radius: var(--pgn-annotation-border-radius); + max-width: var(--pgn-annotation-max-width); + filter: var(--pgn-annotation-box-shadow); word-wrap: break-word; position: relative; display: inline-block; - font-size: $annotation-font-size; - line-height: $annotation-line-height; + font-size: var(--pgn-annotation-font-size); + line-height: var(--pgn-annotation-line-height); text-align: center; } @@ -74,17 +74,17 @@ $arrow-directions: top, right, bottom, left; color: map-get($colors, "color"); // set additional margin to arrow side of the Annotation - margin-#{$direction}: $annotation-arrow-border-width + $annotation-arrow-side-margin; + margin-#{$direction}: calc(var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-side-margin)); [dir="rtl"] & { @if $direction == left { margin-left: 0; - margin-right: $annotation-arrow-border-width + $annotation-arrow-side-margin; + margin-right: calc(var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-side-margin)); } @else if $direction == right { margin-right: 0; - margin-left: $annotation-arrow-border-width + $annotation-arrow-side-margin; + margin-left: calc(var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-side-margin)); } } @@ -94,19 +94,19 @@ $arrow-directions: top, right, bottom, left; [dir="rtl"] & { @if $direction == left { left: initial; - right: calc(#{$annotation-arrow-border-width} * -1); + right: calc(#{var(--pgn-annotation-arrow-border-width)} * -1); border-width: - $annotation-arrow-border-width 0 $annotation-arrow-border-width - $annotation-arrow-border-width; + var(--pgn-annotation-arrow-border-width) 0 var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-border-width); border-left-color: map-get($colors, "background-color"); } @else if $direction == right { right: initial; - left: calc(#{$annotation-arrow-border-width} * -1); + left: calc(#{var(--pgn-annotation-arrow-border-width)} * -1); border-width: - $annotation-arrow-border-width $annotation-arrow-border-width - $annotation-arrow-border-width 0; + var(--pgn-annotation-arrow-border-width) var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-border-width) 0; border-right-color: map-get($colors, "background-color"); } } diff --git a/src/Annotation/_variables.scss b/src/Annotation/_variables.scss index dfe1de4e58..097ef8b5fe 100644 --- a/src/Annotation/_variables.scss +++ b/src/Annotation/_variables.scss @@ -3,15 +3,15 @@ $annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default; $annotation-border-radius: .25rem !default; $annotation-max-width: 18.75rem !default; -$annotation-font-size: $font-size-sm !default; -$annotation-line-height: $line-height-sm !default; +$annotation-font-size: var(--pgn-font-size-sm) !default; +$annotation-line-height: var(--pgn-line-height-sm) !default; $annotation-variants: ( - "success": ( "background-color": $success, "color": $white ), - "warning": ( "background-color": $accent-b, "color": $black ), - "error": ( "background-color": $danger, "color": $white ), - "light": ( "background-color": $white, "color": $primary-500 ), - "dark": ( "background-color": $dark, "color": $white ), + "success": ( "background-color": var(--pgn-color-success-base), "color": var(--pgn-color-white) ), + "warning": ( "background-color": var(--pgn-color-accent-b), "color": var(--pgn-color-black) ), + "error": ( "background-color": var(--pgn-color-danger-base), "color": var(--pgn-color-white) ), + "light": ( "background-color": var(--pgn-color-white), "color": var(--pgn-color-primary-500) ), + "dark": ( "background-color": var(--pgn-color-dark-base), "color": var(--pgn-color-white) ), ) !default; $annotation-arrow-side-margin: .25rem !default; diff --git a/src/Avatar/Avatar.scss b/src/Avatar/Avatar.scss index 9386a97960..8fb8f888cb 100644 --- a/src/Avatar/Avatar.scss +++ b/src/Avatar/Avatar.scss @@ -1,46 +1,46 @@ @import "variables"; .pgn__avatar { - border-radius: $avatar-border-radius; - border: $avatar-border; + border-radius: var(--pgn-avatar-border-radius); + border: var(--pgn-avatar-border-base); display: inline-block; - height: $avatar-size; + height: var(--pgn-avatar-size-base); overflow: hidden; - width: $avatar-size; + width: var(--pgn-avatar-size-base); object-fit: cover; &.pgn__avatar-xs { - height: $avatar-size-xs; - width: $avatar-size-xs; + height: var(--pgn-avatar-size-xs); + width: var(--pgn-avatar-size-xs); } &.pgn__avatar-sm { - height: $avatar-size-sm; - width: $avatar-size-sm; + height: var(--pgn-avatar-size-sm); + width: var(--pgn-avatar-size-sm); } &.pgn__avatar-md { - height: $avatar-size; - width: $avatar-size; + height: var(--pgn-avatar-size-base); + width: var(--pgn-avatar-size-base); } &.pgn__avatar-lg { - height: $avatar-size-lg; - width: $avatar-size-lg; + height: var(--pgn-avatar-size-lg); + width: var(--pgn-avatar-size-lg); } &.pgn__avatar-xl { - height: $avatar-size-xl; - width: $avatar-size-xl; + height: var(--pgn-avatar-size-xl); + width: var(--pgn-avatar-size-xl); } &.pgn__avatar-xxl { - height: $avatar-size-xxl; - width: $avatar-size-xxl; + height: var(--pgn-avatar-size-xxl); + width: var(--pgn-avatar-size-xxl); } &.pgn__avatar-huge { - height: $avatar-size-huge; - width: $avatar-size-huge; + height: var(--pgn-avatar-size-huge); + width: var(--pgn-avatar-size-huge); } } diff --git a/src/Avatar/_variables.scss b/src/Avatar/_variables.scss index 1d38482cab..127b6d7672 100644 --- a/src/Avatar/_variables.scss +++ b/src/Avatar/_variables.scss @@ -1,5 +1,5 @@ $avatar-border-radius: 100% !default; -$avatar-border: solid 1px $light-300 !default; +$avatar-border: solid 1px var(--pgn-color-light-300) !default; $avatar-size-xs: 1.5rem !default; $avatar-size-sm: 2.25rem !default; diff --git a/src/AvatarButton/AvatarButton.scss b/src/AvatarButton/AvatarButton.scss index ed06038d0a..b9237f16bb 100644 --- a/src/AvatarButton/AvatarButton.scss +++ b/src/AvatarButton/AvatarButton.scss @@ -1,14 +1,14 @@ @import "variables"; .btn.pgn__avatar-button-avatar { - padding-left: $avatar-button-padding-left; + padding-left: var(--pgn-avatar-button-padding-left-base); &.pgn__avatar-button-avatar-sm { - padding-left: $avatar-button-padding-left-sm; + padding-left: var(--pgn-avatar-button-padding-left-sm); } &.pgn__avatar-button-avatar-lg { - padding-left: $avatar-button-padding-left-lg; + padding-left: var(--pgn-avatar-button-padding-left-lg); } .pgn__avatar { diff --git a/src/Badge/Badge.scss b/src/Badge/Badge.scss index c019627d0e..7f352e8457 100644 --- a/src/Badge/Badge.scss +++ b/src/Badge/Badge.scss @@ -1,2 +1,2 @@ @import "variables"; -@import "~bootstrap/scss/badge"; +@import "badge-bootstrap"; diff --git a/src/Badge/_variables.scss b/src/Badge/_variables.scss index 6067ea7d8a..fde26f880a 100644 --- a/src/Badge/_variables.scss +++ b/src/Badge/_variables.scss @@ -1,13 +1,13 @@ // Badges $badge-font-size: 75% !default; -$badge-font-weight: $font-weight-bold !default; +$badge-font-weight: var(--pgn-font-weight-bold) !default; $badge-padding-y: .125rem !default; $badge-padding-x: .5rem !default; $badge-border-radius: .25rem !default; $badge-transition: none !default; -$badge-focus-width: $input-btn-focus-width !default; +$badge-focus-width: var(--pgn-core-input-btn-focus-width) !default; $badge-pill-padding-x: .6em !default; diff --git a/src/Badge/badge-bootstrap.scss b/src/Badge/badge-bootstrap.scss new file mode 100644 index 0000000000..7efc2bae71 --- /dev/null +++ b/src/Badge/badge-bootstrap.scss @@ -0,0 +1,43 @@ +.badge { + display: inline-block; + padding: var(--pgn-badge-padding-y) var(--pgn-badge-padding-x-base); + + @include font-size($badge-font-size); + + font-weight: var(--pgn-badge-font-weight); + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + + @include border-radius(var(--pgn-badge-border-radius-base)); + @include transition(var(--pgn-badge-transition)); + + @at-root a#{&} { + @include hover-focus() { + text-decoration: none; + } + } + + &:empty { + display: none; + } +} + +.btn .badge { + position: relative; + top: -1px; +} + +.badge-pill { + padding-right: var(--pgn-badge-padding-x-pill); + padding-left: var(--pgn-badge-padding-x-pill); + + @include border-radius(var(--pgn-badge-border-radius-pill)); +} + +@each $color, $value in $theme-colors { + .badge-#{$color} { + @include badge-variant($value); + } +} diff --git a/src/Breadcrumb/Breadcrumb.scss b/src/Breadcrumb/Breadcrumb.scss index 80d1230c23..757fe82d44 100644 --- a/src/Breadcrumb/Breadcrumb.scss +++ b/src/Breadcrumb/Breadcrumb.scss @@ -4,11 +4,11 @@ .pgn__breadcrumb { .list-inline-item { &.active { - color: $breadcrumb-active-color; + color: var(--pgn-breadcrumb-color-active); } a.link-muted { - color: $breadcrumb-color; + color: var(--pgn-breadcrumb-color-base); &:focus { position: relative; @@ -20,18 +20,18 @@ &:focus::before { content: ""; position: absolute; - top: calc(#{$breadcrumb-border-focus-axis-y} * -1); - right: calc(#{$breadcrumb-border-focus-axis-x} * -1); - bottom: calc(#{$breadcrumb-border-focus-axis-y} * -1); - left: calc(#{$breadcrumb-border-focus-axis-x} * -1); - border: $breadcrumb-border-focus-width solid $breadcrumb-color; - border-radius: $breadcrumb-focus-border-radius; + top: calc(#{var(--pgn-breadcrumb-border-focus-axis-y)} * -1); + right: calc(#{var(--pgn-breadcrumb-border-focus-axis-x)} * -1); + bottom: calc(#{var(--pgn-breadcrumb-border-focus-axis-y)} * -1); + left: calc(#{var(--pgn-breadcrumb-border-focus-axis-x)} * -1); + border: var(--pgn-breadcrumb-border-focus-width) solid var(--pgn-breadcrumb-color-base); + border-radius: var(--pgn-breadcrumb-border-radius-focus); } } [dir="rtl"] & { margin-right: 0; - margin-left: $breadcrumb-margin-left; + margin-left: var(--pgn-breadcrumb-margin-left); } .pgn__icon { @@ -44,21 +44,21 @@ &-dark { .list-inline-item { &.active { - color: $breadcrumb-inverse-active; + color: var(--pgn-breadcrumb-inverse-active); } a.link-muted { - color: $breadcrumb-inverse-color; + color: var(--pgn-breadcrumb-inverse-color); &:focus::before { - border: $breadcrumb-border-focus-width solid $breadcrumb-inverse-color; + border: var(--pgn-breadcrumb-border-focus-width) solid var(--pgn-breadcrumb-inverse-color); } } } .pgn__icon, .custom-spacer { - color: $breadcrumb-inverse-spacer; + color: var(--pgn-breadcrumb-inverse-spacer); } } @@ -68,7 +68,7 @@ .list-inline-item:not(:last-child) { margin-right: 0; - margin-left: $breadcrumb-margin-left; + margin-left: var(--pgn-breadcrumb-margin-left); } .pgn__icon { diff --git a/src/Breadcrumb/_variables.scss b/src/Breadcrumb/_variables.scss index 955751b0d7..274675364b 100644 --- a/src/Breadcrumb/_variables.scss +++ b/src/Breadcrumb/_variables.scss @@ -14,14 +14,14 @@ $breadcrumb-border-focus-axis-y: .5rem !default; $breadcrumb-border-focus-width: .0625rem !default; -$breadcrumb-bg: $gray-200 !default; -$breadcrumb-divider-color: $gray-600 !default; -$breadcrumb-active-color: $gray-500 !default; -$breadcrumb-inverse-active: $light-500 !default; -$breadcrumb-inverse-spacer: $light-700 !default; -$breadcrumb-color: $primary-500 !default; -$breadcrumb-inverse-color: $white !default; +$breadcrumb-bg: var(--pgn-color-gray-200) !default; +$breadcrumb-divider-color: var(--pgn-color-gray-600) !default; +$breadcrumb-active-color: var(--pgn-color-gray-500) !default; +$breadcrumb-inverse-active: var(--pgn-color-light-500) !default; +$breadcrumb-inverse-spacer: var(--pgn-color-light-700) !default; +$breadcrumb-color: var(--pgn-color-primary-500) !default; +$breadcrumb-inverse-color: var(--pgn-color-white) !default; $breadcrumb-divider: "/" !default; -$breadcrumb-border-radius: $border-radius !default; +$breadcrumb-border-radius: var(--pgn-border-radius-base) !default; $breadcrumb-focus-border-radius: .125rem !default; diff --git a/src/Bubble/Bubble.scss b/src/Bubble/Bubble.scss index c176a95097..f1a651f198 100644 --- a/src/Bubble/Bubble.scss +++ b/src/Bubble/Bubble.scss @@ -8,7 +8,7 @@ display: inline-flex; align-items: center; justify-content: center; - font-size: $font-size-xs; + font-size: var(--pgn-font-size-xs); @each $name, $colors in $bubble-variants { &.pgn__bubble-#{$name} { @@ -19,10 +19,10 @@ &:disabled, &.disabled { - background: $gray-500; + background: var(--pgn-color-gray-500); } &.expandable { - padding: $bubble-expandable-padding-y $bubble-expandable-padding-x; + padding: var(--pgn-bubble-expandable-padding-y) var(--pgn-bubble-expandable-padding-x); } } diff --git a/src/Bubble/_variables.scss b/src/Bubble/_variables.scss index e09ee586c8..046c52c363 100644 --- a/src/Bubble/_variables.scss +++ b/src/Bubble/_variables.scss @@ -1,8 +1,8 @@ $bubble-variants: ( - "success": ( "background-color": $success, "color": $white ), - "warning": ( "background-color": $warning, "color": $white ), - "error": ( "background-color": $danger, "color": $white ), - "primary": ( "background-color": $primary, "color": $white ), + "success": ( "background-color": var(--pgn-color-success-base), "color": var(--pgn-color-white) ), + "warning": ( "background-color": var(--pgn-color-warning-base), "color": var(--pgn-color-white) ), + "error": ( "background-color": var(--pgn-color-danger-base), "color": var(--pgn-color-white) ), + "primary": ( "background-color": var(--pgn-color-primary-base), "color": var(--pgn-color-white) ), ) !default; $bubble-expandable-padding-x: .25rem !default; $bubble-expandable-padding-y: 0 !default; diff --git a/src/Button/Button.scss b/src/Button/Button.scss index 9d76a289dd..ee8e9d6b36 100644 --- a/src/Button/Button.scss +++ b/src/Button/Button.scss @@ -1,5 +1,5 @@ @import "variables"; -@import "~bootstrap/scss/button-group"; +@import "button-bootstrap"; @mixin button-variant( $btn-variant-bg, $btn-variant-border, $btn-variant-hover-bg: darken($btn-variant-bg, 7.5%), @@ -15,7 +15,7 @@ border-color: $btn-variant-border; - @include box-shadow($btn-box-shadow); + @include box-shadow(var(--pgn-btn-box-shadow-base)); @include hover { color: $btn-variant-hover-color; @@ -55,30 +55,31 @@ // OVERRIDE FROM BOOTSTRAP // We do this to better control active and focus states. @mixin button-outline-variant( - $btn-outline-variant-color, $btn-outline-variant-color-hover: color-yiq($btn-outline-variant-color), - $btn-outline-variant-active-bg: $btn-outline-variant-color, - $btn-outline-variant-active-border: $btn-outline-variant-color + $color-val, + $color-val-hover: color-yiq($color-val), + $color-val-active-bg: $color-val, + $btn-outline-variant-active-border: $color-val ) { - color: $btn-outline-variant-color; - border-color: $btn-outline-variant-color; + color: $color-val; + border-color: $color-val; @include hover { - color: $btn-outline-variant-color-hover; - background-color: $btn-outline-variant-active-bg; + color: $color-val-hover; + background-color: $color-val-active-bg; border-color: $btn-outline-variant-active-border; } &.disabled, &:disabled { - color: $btn-outline-variant-color; + color: $color-val; background-color: transparent; } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { - color: color-yiq($btn-outline-variant-active-bg); - background-color: $btn-outline-variant-active-bg; + color: color-yiq($color-val-active-bg); + background-color: $color-val-active-bg; border-color: $btn-outline-variant-active-border; } } @@ -142,8 +143,8 @@ $btn-size-line-height, $btn-size-border-radius) { outline: 0; box-shadow: none; - $distance: $btn-focus-width + $btn-focus-gap; - $distance-include-btn-border: $distance + $btn-border-width; + $distance: calc(var(--pgn-btn-focus-width) + var(--pgn-btn-focus-gap)); + $distance-include-btn-border: calc($distance + var(--pgn-btn-border-width)); &::before { content: ""; @@ -152,16 +153,16 @@ $btn-size-line-height, $btn-size-border-radius) { right: calc(#{$distance-include-btn-border} * -1); bottom: calc(#{$distance-include-btn-border} * -1); left: calc(#{$distance-include-btn-border} * -1); - border: solid $btn-focus-width $ring-color; + border: solid var(--pgn-btn-focus-width) $ring-color; border-radius: calc(#{$btn-border-radius} + #{$distance}); } &.btn-lg::before { - border-radius: calc(#{$btn-border-radius-lg} + #{$distance}); + border-radius: calc(#{var(--pgn-btn-border-radius-lg)} + #{$distance}); } &.btn-sm::before { - border-radius: calc(#{$btn-border-radius-sm} + #{$distance}); + border-radius: calc(#{var(--pgn-btn-border-radius-sm)} + #{$distance}); } &:active, @@ -196,28 +197,28 @@ $btn-size-line-height, $btn-size-border-radius) { display: inline-flex; align-items: center; justify-content: center; - font-family: $btn-font-family; - font-weight: $btn-font-weight; - color: $body-color; + font-family: var(--pgn-btn-font-family); + font-weight: var(--pgn-btn-font-width); + color: var(--pgn-body-color); text-align: center; vertical-align: middle; user-select: none; background-color: transparent; - border: $btn-border-width solid transparent; + border: var(--pgn-btn-border-width) solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, - $btn-line-height, $btn-border-radius); - @include transition($btn-transition); + @include button-size(var(--pgn-btn-padding-y-base), var(--pgn-btn-padding-x-base), var(--pgn-btn-font-size-base), + var(--pgn-btn-line-height-base), $btn-border-radius); + @include transition(var(--pgn-btn-transition)); @include hover { - color: $body-color; + color: var(--pgn-body-color); text-decoration: none; } // Disabled comes first so active can properly restyle &.disabled, &:disabled { - opacity: $btn-disabled-opacity; + opacity: var(--pgn-btn-disabled-opacity); } // Button Icon Sizes @@ -318,28 +319,28 @@ fieldset:disabled a.btn { $btn-inverse-active-bg, $btn-inverse-active-border, ); - @include button-focus($white); + @include button-focus(var(--pgn-color-white)); } .btn-inverse-outline-#{$color} { - $text-and-border: $white; + $text-and-border: var(--pgn-color-white); $color-hover: theme-color($color, "hover"); - $active-background: theme-color($color, "background"); - $active-border: transparent; + $active-bg-color: theme-color($color, "background"); + $active-border-color: transparent; // Defaults $color-hover: color-yiq($value) !default; - $btn-inverse-outline-active-bg: $value !default; - $btn-inverse-outline-active-border: $value !default; + $active-bg-color: $value !default; + $active-border-color: $value !default; @include button-outline-variant( $text-and-border, $color-hover, - $btn-inverse-outline-active-bg, - $btn-inverse-outline-active-border, + $active-bg-color, + $active-border-color, ); - @include button-focus($white); + @include button-focus(var(--pgn-color-white)); } } @@ -350,45 +351,45 @@ fieldset:disabled a.btn { .btn-tertiary { $button-tertiary-background: $btn-tertiary-bg; $button-tertiary-border: transparent; - $hover-background: $btn-tertiary-hover-bg; - $hover-border: transparent; - $button-tertiary-active-bg: $btn-tertiary-active-bg; + $hover-background: var(--pgn-btn-tertiary-bg-hover); + $button-tertiary-hover-border: transparent; + $button-tertiary-active-bg: var(--pgn-btn-tertiary-bg-active); $button-tertiary-active-border: transparent; @include button-variant( $button-tertiary-background, $button-tertiary-border, $hover-background, - $hover-border, + $button-tertiary-hover-border, $button-tertiary-active-bg, $button-tertiary-active-border, - $btn-tertiary-color, - $btn-tertiary-color, - $btn-tertiary-color + var(--pgn-btn-tertiary-color), + var(--pgn-btn-tertiary-color), + var(--pgn-btn-tertiary-color) ); @include button-focus(theme-color("primary", "focus")); } .btn-inverse-tertiary { - $button-inverse-tertiary-bg: $btn-inverse-tertiary-bg; + $button-inverse-tertiary-bg: $btn-tertiary-bg; $button-inverse-tertiary-border: transparent; - $hover-background: $btn-inverse-tertiary-hover-bg; - $hover-border: transparent; - $button-inverse-tertiary-active-bg: $btn-inverse-tertiary-active-bg; + $hover-background: var(--pgn-btn-tertiary-inverse-bg-hover); + $button-inverse-hover-border: transparent; + $button-inverse-tertiary-active-bg: var(--pgn-btn-tertiary-inverse-bg-active); $button-inverse-tertiary-active-border: transparent; @include button-variant( $button-inverse-tertiary-bg, $button-inverse-tertiary-border, $hover-background, - $hover-border, + $button-inverse-hover-border, $button-inverse-tertiary-active-bg, $button-inverse-tertiary-active-border, - $btn-inverse-tertiary-color, - $btn-inverse-tertiary-color, - $btn-inverse-tertiary-color + var(--pgn-btn-tertiary-inverse-color), + var(--pgn-btn-tertiary-inverse-color), + var(--pgn-btn-tertiary-inverse-color) ); - @include button-focus($white); + @include button-focus(var(--pgn-color-white)); } // @@ -397,24 +398,24 @@ fieldset:disabled a.btn { // Make a button look and behave like a link .btn-link { - font-weight: $font-weight-normal; - color: $link-color; - text-decoration: $link-decoration; + font-weight: var(--pgn-font-weight-normal); + color: var(--pgn-link-color); + text-decoration: var(--pgn-link-decoration); @include hover { - color: $link-hover-color; - text-decoration: $link-hover-decoration; + color: var(--pgn-link-hover-color); + text-decoration: var(--pgn-link-hover-decoration); } &:focus, &.focus { - text-decoration: $link-hover-decoration; + text-decoration: var(--pgn-link-hover-decoration); box-shadow: none; } &:disabled, &.disabled { - color: $btn-link-disabled-color; + color: var(--pgn-btn-disabled-link-color); pointer-events: none; } @@ -432,15 +433,15 @@ fieldset:disabled a.btn { .btn-lg { @include button-size( - $btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, - $btn-line-height-lg, $btn-border-radius-lg + var(--pgn-btn-padding-y-lg), var(--pgn-btn-padding-x-lg), var(--pgn-btn-font-size-lg), + var(--pgn-btn-line-height-lg), var(--pgn-btn-border-radius-lg) ); } .btn-sm { @include button-size( - $btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, - $btn-line-height-sm, $btn-border-radius-sm + var(--pgn-btn-padding-y-sm), var(--pgn-btn-padding-x-sm), var(--pgn-btn-font-size-sm), + var(--pgn-btn-line-height-sm), var(--pgn-btn-border-radius-sm) ); } @@ -454,12 +455,12 @@ fieldset:disabled a.btn { // Vertically space out multiple block buttons + .btn-block { - margin-top: $btn-block-spacing-y; + margin-top: var(--pgn-btn-block-spacing-y); } } .btn-inline { - line-height: calc(#{$line-height-base}em - #{2 * $btn-border-width}); + line-height: calc(#{var(--pgn-line-height-base)}em - 2 * #{var(--pgn-btn-border-width)}); font-size: inherit; vertical-align: bottom; padding: 0 .25em; @@ -482,11 +483,11 @@ input[type="button"] { [dir="rtl"] .btn-group > .btn:not(:first-child), [dir="rtl"] .btn-group > .btn-group:not(:first-child) > .btn { - border-radius: $btn-border-radius 0 0 $btn-border-radius; + border-radius: var(--pgn-btn-border-radius-base) 0 0 var(--pgn-btn-border-radius-base); } [dir="rtl"] .btn-group > .btn:first-child, [dir="rtl"] .btn-group > .btn-group:first-child > .btn { - border-top-right-radius: $btn-border-radius; - border-bottom-right-radius: $btn-border-radius; + border-top-right-radius: var(--pgn-btn-border-radius-base); + border-bottom-right-radius: var(--pgn-btn-border-radius-base); } diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss index 525a3380a2..79a6896474 100644 --- a/src/Button/_variables.scss +++ b/src/Button/_variables.scss @@ -1,34 +1,35 @@ -$btn-padding-y: $input-btn-padding-y !default; -$btn-padding-x: $input-btn-padding-x !default; -$btn-font-family: $input-btn-font-family !default; -$btn-font-size: $input-btn-font-size !default; -$btn-line-height: $input-btn-line-height !default; - -$btn-padding-y-sm: $input-btn-padding-y-sm !default; -$btn-padding-x-sm: $input-btn-padding-x-sm !default; -$btn-font-size-sm: $input-btn-font-size-sm !default; -$btn-line-height-sm: $input-btn-line-height-sm !default; - -$btn-padding-y-lg: $input-btn-padding-y-lg !default; -$btn-padding-x-lg: $input-btn-padding-x-lg !default; -$btn-font-size-lg: $input-btn-font-size-lg !default; -$btn-line-height-lg: $input-btn-line-height-lg !default; - -$btn-border-width: $input-btn-border-width !default; - -$btn-font-weight: $font-weight-normal !default; -$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; +$btn-padding-y: var(--pgn-core-input-btn-padding-y) !default; +$btn-padding-x: var(--pgn-core-input-btn-padding-x) !default; +$btn-font-family: var(--pgn-core-input-btn-font-family) !default; +$btn-font-size: var(--pgn-core-input-btn-font-size-base) !default; +$btn-line-height: var(--pgn-core-input-btn-line-height-base) !default; + +$btn-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y) !default; +$btn-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x) !default; +$btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm) !default; +$btn-line-height-sm: var(--pgn-core-input-btn-line-height-sm) !default; + +$btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y) !default; +$btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x) !default; +$btn-font-size-lg: var(--pgn-core-input-btn-font-size-lg) !default; +$btn-line-height-lg: var(--pgn-core-input-btn-line-height-lg) !default; + +$btn-border-width: var(--pgn-core-input-btn-border-width) !default; + +$btn-font-weight: var(--pgn-font-weight-normal) !default; +$btn-box-shadow: inset 0 1px 0 rgba(var(--pgn-color-white), .15), + 0 1px 1px rgba(var(--pgn-color-black), .075) !default; $btn-focus-width: 2px !default; $btn-focus-gap: 1px !default; -$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; +$btn-focus-box-shadow: var(--pgn-core-input-btn-focus-box-shadow) !default; $btn-disabled-opacity: .65 !default; $btn-active-box-shadow: none; -$btn-tertiary-color: $gray-700 !default; +$btn-tertiary-color: var(--pgn-color-gray-700) !default; $btn-tertiary-bg: transparent !default; -$btn-tertiary-hover-bg: $light-500 !default; -$btn-tertiary-active-bg: $light-500 !default; -$btn-inverse-tertiary-color: $white !default; +$btn-tertiary-hover-bg: var(--pgn-color-light-500) !default; +$btn-tertiary-active-bg: var(--pgn-color-light-500) !default; +$btn-inverse-tertiary-color: var(--pgn-color-white) !default; $btn-inverse-tertiary-bg: transparent !default; $btn-inverse-tertiary-hover-bg: rgba(255, 255, 255, .1) !default; $btn-inverse-tertiary-active-bg: rgba(255, 255, 255, .1) !default; @@ -38,8 +39,8 @@ $btn-link-disabled-color: theme-color("gray", "light-text") !default; $btn-block-spacing-y: .5rem !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius !default; -$btn-border-radius-lg: $border-radius-lg !default; -$btn-border-radius-sm: $border-radius-sm !default; +$btn-border-radius: var(--pgn-border-radius-base) !default; +$btn-border-radius-lg: var(--pgn-border-radius-lg) !default; +$btn-border-radius-sm: var(--pgn-border-radius-sm) !default; $btn-transition: null; diff --git a/src/Button/button-bootstrap.scss b/src/Button/button-bootstrap.scss new file mode 100644 index 0000000000..e77bd7d3d0 --- /dev/null +++ b/src/Button/button-bootstrap.scss @@ -0,0 +1,126 @@ +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-flex; + vertical-align: middle; + + > .btn { + position: relative; + flex: 1 1 auto; + + @include hover() { + z-index: 1; + } + + &:focus, + &:active, + &.active { + z-index: 1; + } + } +} + +.btn-toolbar { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + + .input-group { + width: auto; + } +} + +.btn-group { + > .btn:not(:first-child), + > .btn-group:not(:first-child) { + margin-left: calc(var(--pgn-btn-border-width) * -1); + } + + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > .btn { + @include border-right-radius(0); + } + + > .btn:not(:first-child), + > .btn-group:not(:first-child) > .btn { + @include border-left-radius(0); + } +} + +/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ +.btn-group-sm > .btn { @extend .btn-sm; } +/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ +.btn-group-lg > .btn { @extend .btn-lg; } + +.dropdown-toggle-split { + padding-right: calc(var(--pgn-btn-padding-x) * .75); + padding-left: calc(var(--pgn-btn-padding-x) * .75); + + &::after, + .dropup &::after, + .dropright &::after { + margin-left: 0; + } + + .dropleft &::before { + margin-right: 0; + } +} + +.btn-sm + .dropdown-toggle-split { + padding-right: calc(var(--pgn-btn-padding-x-sm) * .75); + padding-left: calc(var(--pgn-btn-padding-x-sm) * .75); +} + +.btn-lg + .dropdown-toggle-split { + padding-right: calc(var(--pgn-btn-padding-x-lg) * .75); + padding-left: calc(var(--pgn-btn-padding-x-lg) * .75); +} + +.btn-group.show .dropdown-toggle { + @include box-shadow(var(--pgn-btn-box-shadow-active)); + + &.btn-link { + @include box-shadow(none); + } +} + +.btn-group-vertical { + flex-direction: column; + align-items: flex-start; + justify-content: center; + + > .btn, + > .btn-group { + width: 100%; + } + + > .btn:not(:first-child), + > .btn-group:not(:first-child) { + margin-top: calc(var(--pgn-btn-border-width) * -1); + } + + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > .btn { + @include border-bottom-radius(0); + } + + > .btn:not(:first-child), + > .btn-group:not(:first-child) > .btn { + @include border-top-radius(0); + } +} + +.btn-group-toggle { + > .btn, + > .btn-group > .btn { + margin-bottom: 0; + + input[type="radio"], + input[type="checkbox"] { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; + } + } +} diff --git a/src/Card/Card.scss b/src/Card/Card.scss index 6c5c74189a..910dde7c97 100644 --- a/src/Card/Card.scss +++ b/src/Card/Card.scss @@ -1,31 +1,31 @@ @import "variables"; -@import "~bootstrap/scss/card"; +@import "card-bootstrap"; .pgn__card, .pgn__card-body { width: 100%; &.is-muted { - background-color: $light-200; + background-color: var(--pgn-color-light-200); } } a .pgn__card { - color: $gray-700; + color: var(--pgn-color-gray-700); display: inline-block; margin-right: 100%; } .pgn__card-grid { .row > div[class*="col-"] { - margin-bottom: $card-grid-margin; + margin-bottom: var(--pgn-card-margin-grid); display: flex; flex: 1 0 auto; } } .pgn__card-header { - padding: 0 $card-spacer-x; + padding: 0 var(--pgn-card-spacer-x); display: flex; justify-content: space-between; @@ -39,8 +39,8 @@ a .pgn__card { } %header-title { - color: $black; - font-weight: $font-weight-bold; + color: var(--pgn-color-black); + font-weight: var(--pgn-font-weight-bold); text-align: start; } @@ -51,15 +51,15 @@ a .pgn__card { } .pgn__card-header-title-sm { - font-size: $h4-font-size; + font-size: var(--pgn-font-size-h4); } .pgn__card-header-title-md { - font-size: $h3-font-size; + font-size: var(--pgn-font-size-h3); } %header-subtitle { - color: $gray-700; + color: var(--pgn-color-gray-700); margin-top: map_get($spacers, 1); } @@ -70,16 +70,16 @@ a .pgn__card { } .pgn__card-header-subtitle-sm { - font-size: $h5-font-size; + font-size: var(--pgn-font-size-h5); } .pgn__card-header-subtitle-md { - font-size: $h4-font-size; + font-size: var(--pgn-font-size-h4); } .pgn__card-header-actions { - margin-top: $spacer; - margin-inline-start: $spacer; + margin-top: var(--pgn-core-spacer); + margin-inline-start: var(--pgn-core-spacer); flex-shrink: 0; } @@ -93,30 +93,30 @@ a .pgn__card { } .pgn__card-divider { - border-top: 1px solid $card-divider-bg; + border-top: 1px solid var(--pgn-card-divider-bg); height: 0; } .pgn__card-section { - padding: $card-spacer-x; + padding: var(--pgn-card-spacer-x); flex-grow: 1; text-align: start; &.is-muted { - background-color: $light-200; + background-color: var(--pgn-color-light-200); } .pgn__card-section-title { - color: $black; - font-weight: $font-weight-bold; - font-size: $h5-font-size; - margin-bottom: $card-spacer-y; + color: var(--pgn-color-black); + font-weight: var(--pgn-font-weight-bold); + font-size: var(--pgn-font-size-h5); + margin-bottom: var(--pgn-card-spacer-y); } .pgn__card-section-actions { display: flex; justify-content: flex-end; - margin-top: $card-spacer-y; + margin-top: var(--pgn-card-spacer-y); } dd { @@ -135,7 +135,7 @@ a .pgn__card { .pgn__card-footer { width: 100%; - padding: $card-spacer-x; + padding: var(--pgn-card-spacer-x); display: flex; align-items: center; justify-content: center; @@ -145,7 +145,7 @@ a .pgn__card { padding-top: 0; & > * + * { - margin-inline-start: $card-footer-actions-gap; + margin-inline-start: var(--pgn-card-footer-action-gap); } } @@ -156,11 +156,11 @@ a .pgn__card { &.vertical-stacked { flex-direction: column-reverse; - padding-top: $card-spacer-x - $card-footer-actions-gap; + padding-top: var(--pgn-card-spacer-x) - var(--pgn-card-footer-action-gap); & > * { width: 100%; - margin-top: $card-footer-actions-gap; + margin-top: var(--pgn-card-footer-action-gap); } } @@ -168,24 +168,24 @@ a .pgn__card { flex-wrap: wrap; & > :not(:last-child) { - margin-inline-end: $card-footer-actions-gap; + margin-inline-end: var(--pgn-card-footer-action-gap); } } &.horizontal-stacked { flex-direction: column-reverse; - padding-top: $card-spacer-x - $card-footer-actions-gap; + padding-top: var(--pgn-card-spacer-x) - var(--pgn-card-footer-action-gap); & > * { - margin-top: $card-footer-actions-gap; + margin-top: var(--pgn-card-footer-action-gap); } } } .pgn__card-footer-text { - color: $gray-700; + color: var(--pgn-color-gray-700); order: 1; - font-size: $card-footer-text-font-size; + font-size: var(--pgn-card-footer-text-font-size); &.vertical { margin-inline-end: auto; @@ -197,13 +197,13 @@ a .pgn__card { } &.horizontal { - margin-top: $card-spacer-x; + margin-top: var(--pgn-card-spacer-x); width: 100%; text-align: center; } &.horizontal-stacked { - margin-top: $card-spacer-x; + margin-top: var(--pgn-card-spacer-x); width: 100%; text-align: center; order: -1; @@ -214,14 +214,14 @@ a .pgn__card { position: relative; &.horizontal { - max-width: $card-image-horizontal-max-width; - min-width: $card-image-horizontal-min-width; + max-width: var(--pgn-card-image-horizontal-width-max); + min-width: var(--pgn-card-image-horizontal-width-min); overflow: hidden; .pgn__card-image-cap { height: 100%; - border-top-left-radius: $card-image-border-radius; - border-bottom-left-radius: $card-image-border-radius; + border-top-left-radius: var(--pgn-card-border-radius-image); + border-bottom-left-radius: var(--pgn-card-border-radius-image); border-top-right-radius: 0; max-width: inherit; width: auto; @@ -229,20 +229,20 @@ a .pgn__card { } .pgn__card-logo-cap { - inset-inline-start: $card-logo-left-offset-horizontal; - bottom: $card-logo-bottom-offset-horizontal; + inset-inline-start: var(--pgn-card-logo-left-offset-horizontal); + bottom: var(--pgn-card-logo-bottom-offset-horizontal); } } &.vertical { - max-height: $card-image-vertical-max-height; + max-height: var(--pgn-card-image-vertical-height-max); } .pgn__card-image-cap-loader { .react-loading-skeleton { - margin-bottom: calc(#{$loading-skeleton-spacer} * -1); + margin-bottom: calc(#{var(--pgn-card-loading-skeleton-spacer)} * -1); position: relative; - top: calc(#{$loading-skeleton-spacer} * -1); + top: calc(#{var(--pgn-card-loading-skeleton-spacer)} * -1); height: 100%; } } @@ -252,21 +252,21 @@ a .pgn__card { object-fit: cover; max-height: inherit; width: 100%; - border-top-left-radius: $card-image-border-radius; - border-top-right-radius: $card-image-border-radius; + border-top-left-radius: var(--pgn-card-border-radius-image); + border-top-right-radius: var(--pgn-card-border-radius-image); } .pgn__card-logo-cap { position: absolute; - inset-inline-start: $card-logo-left-offset; - bottom: #{calc(#{$card-logo-bottom-offset} * -1)}; - width: $card-logo-width; - height: $card-logo-height; - border-radius: $card-logo-border-radius; - box-shadow: $level-1-box-shadow; + inset-inline-start: var(--pgn-card-logo-left-offset-base); + bottom: #{calc(#{var(--pgn-card-logo-bottom-offset-base)} * -1)}; + width: var(--pgn-card-logo-width); + height: var(--pgn-card-logo-height); + border-radius: var(--pgn-card-border-radius-logo); + box-shadow: var(--pgn-box-shadow-level-1); z-index: 1; padding: map_get($spacers, 2); - background-color: $white; + background-color: var(--pgn-color-white); } .pgn__card { @@ -281,9 +281,9 @@ a .pgn__card { &:focus, &.focus { - box-shadow: $level-1-box-shadow; + box-shadow: var(--pgn-box-shadow-level-1); outline: none; - border-color: $card-border-focus-color; + border-color: var(--pgn-card-border-color-focus); } } @@ -296,7 +296,7 @@ a .pgn__card { box-shadow: none; margin-bottom: 0; display: flex; - font-size: $font-size-sm; + font-size: var(--pgn-font-size-sm); line-height: 1.5rem; text-align: start; position: relative; @@ -311,10 +311,10 @@ a .pgn__card { } .pgn__card-status__heading { - font-size: $h4-font-size; - color: $black; + font-size: var(--pgn-font-size-h4); + color: var(--pgn-color-black); display: flex; - font-weight: $font-weight-bold; + font-weight: var(--pgn-font-weight-bold); line-height: 1.5rem; margin-bottom: .5rem; } @@ -340,13 +340,13 @@ a .pgn__card { } &.pgn__card-status__primary { - color: $white; - background-color: $primary-500; - border-color: $primary-500; - box-shadow: 0 0 0 1px $primary-500; + color: var(--pgn-color-white); + background-color: var(--pgn-color-primary-500); + border-color: var(--pgn-color-primary-500); + box-shadow: 0 0 0 1px var(--pgn-color-primary-500); .pgn__icon { - color: $white; + color: var(--pgn-color-white); } } } diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss index 20ed7f7a8b..4a99ef5374 100644 --- a/src/Card/_variables.scss +++ b/src/Card/_variables.scss @@ -2,20 +2,20 @@ $card-spacer-y: .75rem !default; $card-spacer-x: 1.25rem !default; -$card-border-width: $border-width !default; -$card-border-radius: $border-radius !default; -$card-border-color: rgba($black, .125) !default; -$card-border-focus-color: rgba($black, .5) !default; +$card-border-width: var(--pgn-border-width) !default; +$card-border-radius: var(--pgn-border-radius-base) !default; +$card-border-color: rgba(var(--pgn-color-black), .125) !default; +$card-border-focus-color: rgba(var(--pgn-color-black), .5) !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; -$card-cap-bg: rgba($black, .03) !default; +$card-cap-bg: rgba(var(--pgn-color-black), .03) !default; $card-cap-color: null !default; $card-height: null !default; $card-color: null !default; -$card-bg: $white !default; +$card-bg: var(--pgn-color-white) !default; $card-img-overlay-padding: 1.25rem !default; -$card-group-margin: calc($grid-gutter-width / 2) !default; +$card-group-margin: calc(var(--pgn-grid-gutter-width) / 2) !default; $card-deck-margin: $card-group-margin !default; $card-grid-margin: $card-group-margin !default; @@ -23,7 +23,7 @@ $card-columns-count: 3 !default; $card-columns-gap: 1.25rem !default; $card-columns-margin: $card-spacer-y !default; -$card-divider-bg: $light-400 !default; +$card-divider-bg: var(--pgn-color-light-400) !default; $card-divider-margin-y: $card-spacer-y !default; $card-footer-actions-gap: .5rem !default; @@ -39,7 +39,7 @@ $card-logo-height: 4.125rem !default; $card-image-border-radius: .3125rem !default; $card-logo-border-radius: .25rem !default; -$card-footer-text-font-size: $x-small-font-size; +$card-footer-text-font-size: var(--pgn-font-size-small-x); $card-image-horizontal-max-width: 240px; $card-image-horizontal-min-width: $card-image-horizontal-max-width; diff --git a/src/Card/card-bootstrap.scss b/src/Card/card-bootstrap.scss new file mode 100644 index 0000000000..312355e7fd --- /dev/null +++ b/src/Card/card-bootstrap.scss @@ -0,0 +1,254 @@ +.card { + display: flex; + flex-direction: column; + min-width: 0; + height: var(--pgn-card-height-base); + word-wrap: break-word; + background-color: var(--pgn-card-bg); + background-clip: border-box; + border: var(--pgn-card-border-width) solid var(--pgn-card-border-color-base); + position: relative; + + @include border-radius(var(--pgn-card-border-radius-base)); + + > hr { + margin-right: 0; + margin-left: 0; + } + + > .list-group { + border-top: inherit; + border-bottom: inherit; + + &:first-child { + border-top-width: 0; + + @include border-top-radius($card-inner-border-radius); + } + + &:last-child { + border-bottom-width: 0; + + @include border-bottom-radius($card-inner-border-radius); + } + } + + > .card-header + .list-group, + > .list-group + .card-footer { + border-top: 0; + } +} + +.card-body { + flex: 1 1 auto; + min-height: 1px; + padding: var(--pgn-card-spacer-x); + color: var(--pgn-card-color); +} + +.card-title { + margin-bottom: var(--pgn-card-spacer-y); +} + +.card-subtitle { + margin-top: calc(var(--pgn-card-spacer-y) * -.5); + margin-bottom: 0; +} + +.card-text:last-child { + margin-bottom: 0; +} + +.card-link { + @include hover() { + text-decoration: none; + } + + + .card-link { + margin-left: var(--pgn-card-spacer-x); + } +} + +// Optional textual caps +.card-header { + padding: var(--pgn-card-spacer-y) var(--pgn-card-spacer-x); + margin-bottom: 0; // Removes the default margin-bottom of + color: var(--pgn-card-cap-color); + background-color: var(--pgn-card-cap-bg); + border-bottom: var(--pgn-card-border-width) solid var(--pgn-card-border-color-base); + + &:first-child { + @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); + } +} + +.card-footer { + padding: var(--pgn-card-spacer-y) var(--pgn-card-spacer-x); + color: var(--pgn-card-cap-color); + background-color: var(--pgn-card-cap-bg); + border-top: var(--pgn-card-border-width) solid var(--pgn-card-border-color-base); + + &:last-child { + @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius); + } +} + +// Header navs +.card-header-tabs { + margin-right: calc(var(--pgn-card-spacer-x) * -.5); + margin-bottom: calc(var(--pgn-card-spacer-y) * -1); + margin-left: calc(var(--pgn-card-spacer-x) * -.5); + border-bottom: 0; +} + +.card-header-pills { + margin-right: calc(var(--pgn-card-spacer-x) * -.5); + margin-left: calc(var(--pgn-card-spacer-x) * .5); +} + +// Card image +.card-img-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: var(--pgn-card-image-overlay-padding); + + @include border-radius($card-inner-border-radius); +} + +.card-img, +.card-img-top, +.card-img-bottom { + flex-shrink: 0; + width: 100%; +} + +.card-img, +.card-img-top { + @include border-top-radius($card-inner-border-radius); +} + +.card-img, +.card-img-bottom { + @include border-bottom-radius($card-inner-border-radius); +} + +// Card deck +.card-deck { + .card { + margin-bottom: var(--pgn-card-margin-deck); + } + + @include media-breakpoint-up(sm) { + display: flex; + flex-flow: row wrap; + margin-right: calc(var(--pgn-card-margin-deck) * -1); + margin-left: calc(var(--pgn-card-margin-deck) * -1); + + .card { + flex: 1 0 0%; + margin-right: var(--pgn-card-margin-deck); + margin-bottom: 0; // Override the default + margin-left: var(--pgn-card-margin-deck); + } + } +} + +// Card groups +.card-group { + > .card { + margin-bottom: var(--pgn-card-margin-group); + } + + @include media-breakpoint-up(sm) { + display: flex; + flex-flow: row wrap; + + > .card { + flex: 1 0 0%; + margin-bottom: 0; + + + .card { + margin-left: 0; + border-left: 0; + } + + // Handle rounded corners + @if $enable-rounded { + &:not(:last-child) { + @include border-right-radius(0); + + .card-img-top, + .card-header { + border-top-right-radius: 0; + } + + .card-img-bottom, + .card-footer { + border-bottom-right-radius: 0; + } + } + + &:not(:first-child) { + @include border-left-radius(0); + + .card-img-top, + .card-header { + border-top-left-radius: 0; + } + + .card-img-bottom, + .card-footer { + border-bottom-left-radius: 0; + } + } + } + } + } +} + +// Columns +.card-columns { + .card { + margin-bottom: var(--pgn-card-columns-margin); + } + + @include media-breakpoint-up(sm) { + column-count: var(--pgn-card-columns-count); + column-gap: var(--pgn-card-columns-gap); + orphans: 1; + widows: 1; + + .card { + display: inline-block; + width: 100%; + } + } +} + +// Accordion +.accordion { + overflow-anchor: none; + + > .card { + overflow: hidden; + + &:not(:last-of-type) { + border-bottom: 0; + + @include border-bottom-radius(0); + } + + &:not(:first-of-type) { + @include border-top-radius(0); + } + + > .card-header { + @include border-radius(0); + + margin-bottom: calc(var(--pgn-card-border-width) * -1); + } + } +} diff --git a/src/Carousel/Carousel.scss b/src/Carousel/Carousel.scss index f2aad61197..060291e5eb 100644 --- a/src/Carousel/Carousel.scss +++ b/src/Carousel/Carousel.scss @@ -1,2 +1,2 @@ @import "variables"; -@import "~bootstrap/scss/carousel"; +@import "carousel-bootstrap"; diff --git a/src/Carousel/_variables.scss b/src/Carousel/_variables.scss index 6ee4508d9a..f9dfac2002 100644 --- a/src/Carousel/_variables.scss +++ b/src/Carousel/_variables.scss @@ -10,11 +10,11 @@ $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-hit-area-height: 10px !default; $carousel-indicator-spacer: 3px !default; -$carousel-indicator-active-bg: $white !default; +$carousel-indicator-active-bg: var(--pgn-color-white) !default; $carousel-indicator-transition: opacity .6s ease !default; $carousel-caption-width: 70% !default; -$carousel-caption-color: $white !default; +$carousel-caption-color: var(--pgn-color-white) !default; $carousel-control-icon-width: 20px !default; diff --git a/src/Carousel/carousel-bootstrap.scss b/src/Carousel/carousel-bootstrap.scss new file mode 100644 index 0000000000..3fead9d04c --- /dev/null +++ b/src/Carousel/carousel-bootstrap.scss @@ -0,0 +1,181 @@ +.carousel { + position: relative; +} + +.carousel.pointer-event { + touch-action: pan-y; +} + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; + + @include clearfix(); +} + +.carousel-item { + position: relative; + display: none; + float: left; + width: 100%; + margin-right: -100%; + backface-visibility: hidden; + + @include transition($carousel-transition); +} + +.carousel-item.active, +.carousel-item-next, +.carousel-item-prev { + display: block; +} + +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { + transform: translateX(100%); +} + +.carousel-item-prev:not(.carousel-item-right), +.active.carousel-item-left { + transform: translateX(-100%); +} + +// Alternate transitions +.carousel-fade { + .carousel-item { + opacity: 0; + transition-property: opacity; + transform: none; + } + + .carousel-item.active, + .carousel-item-next.carousel-item-left, + .carousel-item-prev.carousel-item-right { + z-index: 1; + opacity: 1; + } + + .active.carousel-item-left, + .active.carousel-item-right { + z-index: 0; + opacity: 0; + + @include transition(opacity 0s var(--pgn-carousel-transition-base)); + } +} + + +// Left/right controls for nav +.carousel-control-prev, +.carousel-control-next { + position: absolute; + top: 0; + bottom: 0; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + width: var(--pgn-carousel-control-width-base); + padding: 0; + color: var(--pgn-carousel-control-color); + text-align: center; + background: none; + border: 0; + opacity: var(--pgn-carousel-control-opacity-base); + + @include transition(var(--pgn-carousel-control-transition)); + + @include hover-focus() { + color: var(--pgn-carousel-control-color); + text-decoration: none; + outline: 0; + opacity: var(--pgn-carousel-control-opacity-hover); + } +} + +.carousel-control-prev { + left: 0; + + @if $enable-gradients { + background-image: linear-gradient(90deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001)); + } +} + +.carousel-control-next { + right: 0; + + @if $enable-gradients { + background-image: linear-gradient(270deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001)); + } +} + +// Icons for within +.carousel-control-prev-icon, +.carousel-control-next-icon { + display: inline-block; + width: var(--pgn-carousel-control-width-icon); + height: var(--pgn-carousel-control-width-icon); + background: 50% / 100% 100% no-repeat; +} + +.carousel-control-prev-icon { + background-image: escape-svg($carousel-control-prev-icon-bg); +} + +.carousel-control-next-icon { + background-image: escape-svg($carousel-control-next-icon-bg); +} + +// Optional indicator pips +// +// Add an ordered list with the following class and add a list item for each +// slide your carousel holds. +.carousel-indicators { + position: absolute; + right: 0; + bottom: 0; + left: 0; + z-index: 15; + display: flex; + justify-content: center; + padding-left: 0; + margin-right: var(--pgn-carousel-control-width-base); + margin-left: var(--pgn-carousel-control-width-base); + list-style: none; + + li { + box-sizing: content-box; + flex: 0 1 auto; + width: var(--pgn-carousel-indicator-width); + height: var(--pgn-carousel-indicator-height-base); + margin-right: var(--pgn-carousel-indicator-spacer); + margin-left: var(--pgn-carousel-indicator-spacer); + text-indent: -999px; + cursor: pointer; + background-color: var(--pgn-carousel-indicator-active-bg); + background-clip: padding-box; + border-top: var(--pgn-carousel-indicator-height-area-hit) solid transparent; + border-bottom: var(--pgn-carousel-indicator-height-area-hit) solid transparent; + opacity: .5; + + @include transition(var(--pgn-carousel-indicator-transition)); + } + + .active { + opacity: 1; + } +} + +// Optional captions +.carousel-caption { + position: absolute; + right: calc((calc(100% - var(--pgn-carousel-caption-width))) * .5); + bottom: 20px; + left: calc((calc(100% - var(--pgn-carousel-caption-width))) * .5); + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: var(--pgn-carousel-caption-color); + text-align: center; +} diff --git a/src/CloseButton/CloseButton.scss b/src/CloseButton/CloseButton.scss index a84e20236e..e13cdb3822 100644 --- a/src/CloseButton/CloseButton.scss +++ b/src/CloseButton/CloseButton.scss @@ -1,2 +1,2 @@ @import "variables"; -@import "~bootstrap/scss/close"; +@import "close-button-bootstrap"; diff --git a/src/CloseButton/_variables.scss b/src/CloseButton/_variables.scss index 3ce0a0d790..683fb9dbdc 100644 --- a/src/CloseButton/_variables.scss +++ b/src/CloseButton/_variables.scss @@ -1,6 +1,6 @@ // Close -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; +$close-font-size: calc(var(--pgn-font-size-base) * 1.5) !default; +$close-font-weight: var(--pgn-font-weight-bold) !default; +$close-color: var(--pgn-color-black) !default; +$close-text-shadow: 0 1px 0 var(--pgn-color-white) !default; diff --git a/src/CloseButton/close-button-bootstrap.scss b/src/CloseButton/close-button-bootstrap.scss new file mode 100644 index 0000000000..e96dfaecf6 --- /dev/null +++ b/src/CloseButton/close-button-bootstrap.scss @@ -0,0 +1,32 @@ +.close { + float: right; + + @include font-size(var(--pgn-close-button-font-size)); + + font-weight: var(--pgn-close-button-font-weight); + line-height: 1; + color: var(--pgn-close-button-color); + text-shadow: var(--pgn-close-button-text-shadow); + opacity: .5; + + @include hover() { + color: var(--pgn-close-button-color); + text-decoration: none; + } + + &:not(:disabled):not(.disabled) { + @include hover-focus() { + opacity: .75; + } + } +} + +button.close { + padding: 0; + background-color: transparent; + border: 0; +} + +a.close.disabled { + pointer-events: none; +} diff --git a/src/Code/Code.scss b/src/Code/Code.scss index 62147a3ba5..f92537e5e8 100644 --- a/src/Code/Code.scss +++ b/src/Code/Code.scss @@ -1,2 +1,2 @@ @import "variables"; -@import "~bootstrap/scss/code"; +@import "code-bootstrap"; diff --git a/src/Code/_variables.scss b/src/Code/_variables.scss index f48f830f0b..9f0b60f426 100644 --- a/src/Code/_variables.scss +++ b/src/Code/_variables.scss @@ -3,14 +3,14 @@ $code-font-size: 87.5% !default; $code-color: #E83E8C !default; -$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; -$nested-kbd-font-weight: $font-weight-bold !default; +$kbd-box-shadow: inset 0 -.1rem 0 rgba(var(--pgn-color-black), .25) !default; +$nested-kbd-font-weight: var(--pgn-font-weight-bold) !default; // HTML Keyboard Input element () styles $kbd-padding-y: .2rem !default; $kbd-padding-x: .4rem !default; $kbd-font-size: $code-font-size !default; -$kbd-color: $white !default; +$kbd-color: var(--pgn-color-white) !default; $kbd-bg: theme-color("gray", "hover") !default; $pre-color: theme-color("gray", "dark-text") !default; diff --git a/src/Code/code-bootstrap.scss b/src/Code/code-bootstrap.scss new file mode 100644 index 0000000000..3f6a4173ad --- /dev/null +++ b/src/Code/code-bootstrap.scss @@ -0,0 +1,56 @@ +code { + @include font-size(var(--pgn-code-font-size)); + + color: var(--pgn-code-color); + word-wrap: break-word; + + a > & { + color: inherit; + } +} + +// User input typically entered via keyboard +kbd { + padding: var(--pgn-code-kbd-padding-y) var(--pgn-code-kbd-padding-x); + + @include font-size(var(--pgn-code-kbd-font-size)); + + color: var(--pgn-code-kbd-color); + background-color: var(--pgn-code-kbd-bg); + + @include border-radius(var(--pgn-border-radius-sm)); + @include box-shadow(var(--pgn-code-kbd-box-shadow)); + + kbd { + padding: 0; + + @include font-size(100%); + + font-weight: var(--pgn-code-kbd-nested-font-weight); + + @include box-shadow(none); + } +} + +// Blocks of code +pre { + display: block; + + @include font-size(var(--pgn-code-font-size)); + + color: var(--pgn-code-pre-color); + + // Account for some code outputs that place code tags in pre tags + code { + @include font-size(inherit); + + color: inherit; + word-break: normal; + } +} + +// Enable scrollable blocks of code +.pre-scrollable { + max-height: var(--pgn-code-pre-scrollable-max-height); + overflow-y: scroll; +} diff --git a/src/Collapsible/Collapsible.scss b/src/Collapsible/Collapsible.scss index 8af3b67ce9..cfc3db11e1 100644 --- a/src/Collapsible/Collapsible.scss +++ b/src/Collapsible/Collapsible.scss @@ -7,9 +7,9 @@ border-radius: 0; .collapsible-trigger { - padding: $collapsible-card-spacer-y $collapsible-card-spacer-x; + padding: var(--pgn-collapsible-card-spacer-y-base) var(--pgn-collapsible-card-spacer-x-base); border-radius: $card-inner-border-radius; - border-bottom: $card-border-width solid transparent; + border-bottom: var(--pgn-card-border-width) solid transparent; transition: border-color 100ms ease 150ms; cursor: pointer; display: flex; @@ -24,7 +24,7 @@ &[aria-expanded="true"] { border-radius: $card-inner-border-radius $card-inner-border-radius 0 0; - border-color: $card-border-color; + border-color: var(--pgn-card-border-color-base); transition: none; text-align: start; } @@ -34,8 +34,8 @@ // stylelint-disable-next-line @extend .card-body; - padding: $collapsible-card-spacer-y $collapsible-card-spacer-x; - padding-left: $collapsible-card-body-spacer-left; + padding: var(--pgn-collapsible-card-spacer-y-base) var(--pgn-collapsible-card-spacer-x-base); + padding-left: var(--pgn-collapsible-card-spacer-left-body); text-align: start; & > *:last-child { @@ -44,7 +44,7 @@ } .collapsible-icon { - margin-inline-start: $collapsible-card-spacer-icon; + margin-inline-start: var(--pgn-collapsible-card-spacer-icon); } } @@ -53,11 +53,11 @@ @extend .collapsible-card; .collapsible-trigger { - padding: $collapsible-card-spacer-y-lg $collapsible-card-spacer-x-lg; + padding: var(--pgn-collapsible-card-spacer-y-lg) var(--pgn-collapsible-card-spacer-x-lg); } .collapsible-body { - padding: $collapsible-card-spacer-y-lg $collapsible-card-spacer-x-lg; + padding: var(--pgn-collapsible-card-spacer-y-lg) var(--pgn-collapsible-card-spacer-x-lg); } } @@ -68,11 +68,11 @@ align-items: center; text-decoration: underline; color: theme-color("primary", "default"); - padding: $collapsible-basic-spacer-y $collapsible-basic-spacer-x; + padding: var(--pgn-collapsible-card-spacer-basic-y) var(--pgn-collapsible-card-spacer-basic-x); } .collapsible-body { - padding: $collapsible-basic-spacer-y $collapsible-basic-spacer-x; + padding: var(--pgn-collapsible-card-spacer-basic-y) var(--pgn-collapsible-card-spacer-basic-x); text-align: start; &.collapsing { @@ -81,6 +81,6 @@ } .collapsible-icon { - margin-left: $collapsible-basic-spacer-icon; + margin-left: var(--pgn-collapsible-card-spacer-basic-icon); } } diff --git a/src/DataTable/DataTable.scss b/src/DataTable/DataTable.scss index 4934f22d30..e9fcf4c56a 100644 --- a/src/DataTable/DataTable.scss +++ b/src/DataTable/DataTable.scss @@ -1,23 +1,23 @@ @import "variables"; .pgn__data-table-wrapper { - font-size: $font-size-sm; - border-radius: $border-radius; - background-color: $data-table-background-color; - box-shadow: $data-table-box-shadow; + font-size: var(--pgn-font-size-sm); + border-radius: var(--pgn-border-radius-base); + background-color: var(--pgn-data-table-background-color); + box-shadow: var(--pgn-data-table-box-shadow); &.hide-shadow { box-shadow: none; } > :first-child { - border-top-left-radius: $border-radius; - border-top-right-radius: $border-radius; + border-top-left-radius: var(--pgn-border-radius-base); + border-top-right-radius: var(--pgn-border-radius-base); } > :last-child { - border-bottom-left-radius: $border-radius; - border-bottom-right-radius: $border-radius; + border-bottom-left-radius: var(--pgn-border-radius-base); + border-bottom-right-radius: var(--pgn-border-radius-base); } } @@ -88,15 +88,15 @@ display: flex; align-items: flex-start; - @media (max-width: $max-width-xl) { + @media (max-width: var(--pgn-container-max-width-xl)) { overflow-x: scroll; } .pgn__data-table-layout-sidebar { - background-color: $data-table-background-color; - border-radius: $border-radius; - box-shadow: $data-table-box-shadow; - padding: $data-table-padding-small; + background-color: var(--pgn-data-table-background-color); + border-radius: var(--pgn-border-radius-base); + box-shadow: var(--pgn-data-table-box-shadow); + padding: var(--pgn-data-table-padding-small); margin-right: map_get($spacers, 4); flex-grow: 0; } @@ -123,23 +123,23 @@ width: 100%; &.is-striped tr:nth-child(even) { - background-color: $light-200; + background-color: var(--pgn-color-light-200); } th { - background-color: $light-300; - padding: $data-table-cell-padding; + background-color: var(--pgn-color-light-300); + padding: var(--pgn-data-table-padding-cell); text-align: start; } td { - padding: $table-cell-padding; + padding: var(--pgn-table-cell-padding-base); line-height: 24px; text-align: start; } & tr.is-selected { - background-color: $info-100 !important; + background-color: var(--pgn-color-info-100) !important; } } @@ -151,17 +151,17 @@ } .pgn__data-table-empty { - padding: $data-table-padding-x $data-table-padding-y; + padding: var(--pgn-data-table-padding-x) var(--pgn-data-table-padding-y); } .pgn__data-table-actions { display: flex; justify-content: space-between; - padding-bottom: $data-table-padding-small; + padding-bottom: var(--pgn-data-table-padding-small); } .pgn__data-table-status-bar { - padding: $data-table-padding-y $data-table-padding-x; + padding: var(--pgn-data-table-padding-y) var(--pgn-data-table-padding-x); } .pgn__data-table-filters { @@ -173,7 +173,7 @@ } .pgn__data-table-filters-dropdown-item { - padding: $data-table-padding-small 14px; + padding: var(--pgn-data-table-padding-small) 14px; min-width: 15em; } @@ -186,9 +186,9 @@ .pgn__data-table-footer { display: flex; justify-content: space-between; - padding: $data-table-padding-x $data-table-padding-y; + padding: var(--pgn-data-table-padding-x) var(--pgn-data-table-padding-y); align-items: center; - border-top: $data-table-border; + border-top: var(--pgn-data-table-border); .btn-icon .pgn__icon { [dir="rtl"] & { @@ -201,14 +201,14 @@ display: flex; .pgn__page-count { - align-self: $data-table-footer-position; + align-self: var(--pgn-data-table-footer-position); } } .pgn__data-table-pagination-dropdown { overflow-y: auto; - max-height: $data-table-pagination-dropdown-max-height; - min-width: $data-table-pagination-dropdown-min-width; + max-height: var(--pgn-data-table-pagination-dropdown-max-height); + min-width: var(--pgn-data-table-pagination-dropdown-min-width); a { text-align: center; @@ -216,7 +216,7 @@ } .pgn__checkbox-filter-label { - font-weight: $font-weight-bold; + font-weight: var(--pgn-font-weight-bold); } .pgn__checkbox-filter { @@ -251,7 +251,7 @@ } .pgn__data-table-card-view { - padding: 0 $data-table-padding-x; + padding: 0 var(--pgn-data-table-padding-x); } .pgn__data-table__action-btn { @@ -273,6 +273,6 @@ .pgn__datatable__overflow-actions-menu { background: #FFFFFF; padding: map_get($spacers, 2); - box-shadow: $level-1-box-shadow; + box-shadow: var(--pgn-box-shadow-level-1); border-radius: 4px; } diff --git a/src/DataTable/_variables.scss b/src/DataTable/_variables.scss index 50648dafa3..e401be795c 100644 --- a/src/DataTable/_variables.scss +++ b/src/DataTable/_variables.scss @@ -1,6 +1,6 @@ -$data-table-background-color: $white !default; -$data-table-border: 1px solid $gray-200 !default; -$data-table-box-shadow: $box-shadow-sm !default; +$data-table-background-color: var(--pgn-color-white) !default; +$data-table-border: 1px solid var(--pgn-color-gray-200) !default; +$data-table-box-shadow: var(--pgn-box-shadow-sm) !default; $data-table-padding-x: .75rem !default; $data-table-padding-y: .75rem !default; $data-table-padding-small: .5rem !default; diff --git a/src/Dropdown/_variables.scss b/src/Dropdown/_variables.scss index dfc4e9316f..24e768c403 100644 --- a/src/Dropdown/_variables.scss +++ b/src/Dropdown/_variables.scss @@ -6,23 +6,23 @@ $dropdown-min-width: 18rem !default; $dropdown-padding-x: 0 !default; $dropdown-padding-y: .5rem !default; $dropdown-spacer: .125rem !default; -$dropdown-font-size: $font-size-base !default; -$dropdown-color: $body-color !default; -$dropdown-bg: $white !default; +$dropdown-font-size: var(--pgn-font-size-base) !default; +$dropdown-color: var(--pgn-body-color) !default; +$dropdown-bg: var(--pgn-color-white) !default; $dropdown-border-color: rgba($black, .15) !default; -$dropdown-border-radius: $border-radius !default; -$dropdown-border-width: $border-width !default; +$dropdown-border-radius: var(--pgn-border-radius-base) !default; +$dropdown-border-width: var(--pgn-border-width) !default; $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; $dropdown-divider-bg: theme-color("gray", "background") !default; -$dropdown-divider-margin-y: calc($spacer / 2) !default; -$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; +$dropdown-divider-margin-y: calc(var(--pgn-core-spacer) / 2) !default; +$dropdown-box-shadow: 0 .5rem 1rem rgba(var(--pgn-color-black), .175) !default; $dropdown-link-color: theme-color("gray", "dark-text") !default; $dropdown-link-hover-color: darken(theme-color("gray", "dark-text"), 5%) !default; -$dropdown-link-hover-bg: $light-300 !default; +$dropdown-link-hover-bg: var(--pgn-color-light-300) !default; -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; +$dropdown-link-active-color: var(--pgn-component-active-color) !default; +$dropdown-link-active-bg: var(--pgn-component-active-bg) !default; $dropdown-link-disabled-color: theme-color("gray", "light-text") !default; diff --git a/src/Dropzone/Dropzone.scss b/src/Dropzone/Dropzone.scss index e804efeff4..7ed9ce53e9 100644 --- a/src/Dropzone/Dropzone.scss +++ b/src/Dropzone/Dropzone.scss @@ -5,31 +5,31 @@ justify-content: center; align-items: center; min-height: 200px; - padding: $dropzone-padding; - border: $dropzone-border-default; + padding: var(--pgn-dropzone-padding); + border: var(--pgn-dropzone-border-default); box-sizing: border-box; cursor: pointer; &:hover { - border: $dropzone-border-hover; + border: var(--pgn-dropzone-border-hover); } &:focus { - border: $dropzone-border-focus; + border: var(--pgn-dropzone-border-focus); } &.pgn__dropzone-validation-error { - border: $dropzone-border-error; + border: var(--pgn-dropzone-border-error); } &.pgn__dropzone-active { - border: $dropzone-border-active; + border: var(--pgn-dropzone-border-active); } } .pgn__dropzone-error-wrapper { text-align: center; - color: $dropzone-error-wrapper-color; + color: var(--pgn-dropzone-error-wrapper-color); } .pgn__dropzone-generic-alert { @@ -46,7 +46,7 @@ .pgn__dropzone__upload-icon-wrapper { height: 56px; width: 56px; - background: $light-300; + background: var(--pgn-color-light-300); border-radius: 50%; position: relative; margin-bottom: map-get($spacers, 4); @@ -62,6 +62,6 @@ } .pgn__dropzone__upload-restriction-message { - font-size: $dropzone-restriction-msg-font-size; - color: $dropzone-restriction-msg-color; + font-size: var(--pgn-dropzone-restriction-msg-font-size); + color: var(--pgn-dropzone-restriction-msg-color); } diff --git a/src/Dropzone/_variables.scss b/src/Dropzone/_variables.scss index ee7caed6a4..b2bb8b1a9a 100644 --- a/src/Dropzone/_variables.scss +++ b/src/Dropzone/_variables.scss @@ -1,9 +1,9 @@ $dropzone-padding: 1.5rem !default; -$dropzone-border-default: 1px dashed $gray-500 !default; -$dropzone-border-hover: 2px solid $info-300 !default; -$dropzone-border-focus: 2px solid $info-300 !default; -$dropzone-border-active: 2px solid $primary-500 !default; -$dropzone-border-error: 2px solid $danger-300 !default; -$dropzone-error-wrapper-color: $danger-500 !default; -$dropzone-restriction-msg-font-size: $x-small-font-size !default; -$dropzone-restriction-msg-color: $gray-500 !default; +$dropzone-border-default: 1px dashed var(--pgn-color-gray-500) !default; +$dropzone-border-hover: 2px solid var(--pgn-color-info-300) !default; +$dropzone-border-focus: 2px solid var(--pgn-color-info-300) !default; +$dropzone-border-active: 2px solid var(--pgn-color-primary-500) !default; +$dropzone-border-error: 2px solid var(--pgn-color-danger-300) !default; +$dropzone-error-wrapper-color: var(--pgn-color-danger-500) !default; +$dropzone-restriction-msg-font-size: var(--pgn-font-size-small-x) !default; +$dropzone-restriction-msg-color: var(--pgn-color-gray-500) !default; diff --git a/src/Fieldset/Fieldset.scss b/src/Fieldset/Fieldset.scss index 5e039319ad..1b8ce84463 100644 --- a/src/Fieldset/Fieldset.scss +++ b/src/Fieldset/Fieldset.scss @@ -1,5 +1,5 @@ .paragon-fieldset { - margin-bottom: $spacer * 1.5; + margin-bottom: calc(var(--pgn-core-spacer) * 1.5); .form-control { height: auto; diff --git a/src/Form/_Form.scss b/src/Form/_Form.scss index 2ec5576aab..6685888b1d 100644 --- a/src/Form/_Form.scss +++ b/src/Form/_Form.scss @@ -14,15 +14,15 @@ $select-icon-padding: .5625rem !default; .form-control.is-invalid.is-invalid-nodanger { @include form-control-focus(true); - border-color: $input-border-color; + border-color: var(--pgn-form-input-border-color); } .form-control:hover { - border: solid $input-hover-width $dark-700; + border: solid var(--pgn-form-input-width-hover) var(--pgn-color-dark-700); } .pgn__form-group { - margin-bottom: $form-group-margin-bottom; + margin-bottom: var(--pgn-form-group-margin-bottom); text-align: start; .form-check { @@ -47,52 +47,52 @@ $select-icon-padding: .5625rem !default; align-items: flex-start; @media (min-width: map-get($grid-breakpoints, "sm")) { - margin-inline-end: $custom-control-gutter; + margin-inline-end: var(--pgn-form-custom-control-gutter); } &.has-prepended-node { .form-control { - padding-inline-start: calc(#{$input-padding-x} + #{$form-control-icon-width}); + padding-inline-start: calc(#{var(--pgn-form-input-padding-x-base)} + #{var(--pgn-form-control-icon-width)}); [dir="rtl"] & { - background-position: left $select-icon-padding center; + background-position: left var(--pgn-form-select-icon-padding) center; } } .form-control-lg { - padding-inline-start: calc(#{$input-padding-x-lg} + #{$form-control-icon-width}); + padding-inline-start: calc(#{var(--pgn-form-input-padding-x-lg)} + #{var(--pgn-form-control-icon-width)}); } .form-control-sm { - padding-inline-start: calc(#{$input-padding-x-sm} + #{$form-control-icon-width}); + padding-inline-start: calc(#{var(--pgn-form-input-padding-x-sm)} + #{var(--pgn-form-control-icon-width)}); } } &.has-appended-node { .form-control { - padding-inline-end: calc(#{$input-padding-x} + #{$form-control-icon-width}); + padding-inline-end: calc(#{var(--pgn-form-input-padding-x-base)} + #{var(--pgn-form-control-icon-width)}); } .form-control-lg { - padding-inline-end: calc(#{$input-padding-x-lg} + #{$form-control-icon-width}); + padding-inline-end: calc(#{var(--pgn-form-input-padding-x-lg)} + #{var(--pgn-form-control-icon-width)}); } .form-control-sm { - padding-inline-end: calc(#{$input-padding-x-sm} + #{$form-control-icon-width}); + padding-inline-end: calc(#{var(--pgn-form-input-padding-x-sm)} + #{var(--pgn-form-control-icon-width)}); } } - font-size: $input-font-size; - line-height: $input-line-height; + font-size: var(--pgn-form-input-font-size-base); + line-height: var(--pgn-form-input-line-height-base); &.pgn__form-control-decorator-group-sm { - font-size: $input-font-size-sm; - line-height: $input-line-height-sm; + font-size: var(--pgn-form-input-font-size-sm); + line-height: var(--pgn-form-input-line-height-sm); } &.pgn__form-control-decorator-group-lg { - font-size: $input-font-size-lg; - line-height: $input-line-height-lg; + font-size: var(--pgn-form-input-font-size-lg); + line-height: var(--pgn-form-input-line-height-lg); } } @@ -106,8 +106,8 @@ $select-icon-padding: .5625rem !default; pointer-events: initial; } - height: $input-height; - min-width: $input-height; + height: var(--pgn-form-input-height-base); + min-width: var(--pgn-form-input-height-base); line-height: inherit; display: flex; justify-content: center; @@ -116,58 +116,58 @@ $select-icon-padding: .5625rem !default; &.pgn__form-control-decorator-leading { inset-inline-start: 0; - padding-inline-start: $input-padding-x; - padding-inline-end: calc($input-padding-x / 2); + padding-inline-start: var(--pgn-form-input-padding-x-base); + padding-inline-end: calc(var(--pgn-form-input-padding-x-base) / 2); } &.pgn__form-control-decorator-trailing { inset-inline-end: 0; - padding-inline-start: calc($input-padding-x / 2); - padding-inline-end: calc(#{$input-padding-y-sm} - #{2 * $input-border-width}); + padding-inline-start: calc(var(--pgn-form-input-padding-x-base) / 2); + padding-inline-end: calc(#{var(--pgn-form-input-padding-y-sm)} - (2 * var(--pgn-form-input-border-width))); } .pgn__form-control-decorator-group-lg & { - height: $input-height-lg; - min-width: $input-height-lg; + height: var(--pgn-form-input-height-lg); + min-width: var(--pgn-form-input-height-lg); &.pgn__form-control-decorator-leading { - padding-left: $input-padding-x-lg; - padding-right: calc($input-padding-x-lg / 2); + padding-left: var(--pgn-form-input-padding-x-lg); + padding-right: calc(var(--pgn-form-input-padding-x-lg) / 2); } &.pgn__form-control-decorator-trailing { - padding-left: calc($input-padding-x-lg / 2); - padding-right: calc(#{$input-padding-y} - #{2 * $input-border-width}); + padding-left: calc(var(--pgn-form-input-padding-x-lg) / 2); + padding-right: calc(#{var(--pgn-form-input-padding-y-base)} - (2 * var(--pgn-form-input-border-width))); } } .pgn__form-control-decorator-group-sm & { - height: $input-height-sm; - min-width: $input-height-lg; + height: var(--pgn-form-input-height-sm); + min-width: var(--pgn-form-input-height-lg); &.pgn__form-control-decorator-leading { - padding-left: $input-padding-x-sm; - padding-right: calc($input-padding-x-sm / 2); + padding-left: var(--pgn-form-input-padding-x-sm); + padding-right: calc(var(--pgn-form-input-padding-x-sm) / 2); } &.pgn__form-control-decorator-trailing { - padding-left: calc($input-padding-x-sm / 2); - padding-right: calc(#{$input-padding-y-sm} - #{2 * $input-border-width}); + padding-left: calc(var(--pgn-form-input-padding-x-sm) / 2); + padding-right: calc(var(--pgn-form-input-padding-y-sm) - (2 * var(--pgn-form-input-border-width))); } } .btn-icon { - color: $gray-500 !important; + color: var(--pgn-color-gray-500) !important; &:hover { - background-color: $gray-500 !important; - color: $white !important; + background-color: var(--pgn-color-gray-500) !important; + color: var(--pgn-color-white) !important; } &:focus { - background-color: $white !important; - color: $gray-500 !important; - box-shadow: inset 0 0 0 2px $gray-500 !important; + background-color: var(--pgn-color-white) !important; + color: var(--pgn-color-gray-500) !important; + box-shadow: inset 0 0 0 2px var(--pgn-color-gray-500) !important; } } } @@ -176,7 +176,7 @@ $select-icon-padding: .5625rem !default; .pgn__form-control-floating-label { position: absolute; - inset-inline-start: $input-border-width; + inset-inline-start: var(--pgn-form-input-border-width); inset-inline-end: 0; display: flex; width: 100%; @@ -198,7 +198,7 @@ $select-icon-padding: .5625rem !default; // Prevent background-color from being output as "transparent" // Firefox doesn't handle the first animation well from transparent to // a color. Adding an alpha channel smooths it out. - background-color: rgba($input-bg, .01); + background-color: rgba(var(--pgn-form-input-bg-base), .01); white-space: nowrap; max-width: 75vw; display: block; @@ -212,39 +212,39 @@ $select-icon-padding: .5625rem !default; .has-leading-element & { .pgn__form-control-floating-label-text { - transform: translateX(#{$form-control-icon-width}); + transform: translateX(#{var(--pgn-form-control-icon-width)}); [dir="rtl"] & { - transform: translateX(-#{$form-control-icon-width}); + transform: translateX(-#{var(--pgn-form-control-icon-width)}); } } } @include form-control-floating-label-initial( - $input-padding-x, - $input-padding-y, - $input-line-height, - $input-font-size, - $input-border-width + var(--pgn-form-input-padding-x-base), + var(--pgn-form-input-padding-y-base), + var(--pgn-form-input-line-height-base), + var(--pgn-form-input-font-size-base), + var(--pgn-form-input-border-width) ); .pgn__form-control-decorator-group-lg & { @include form-control-floating-label-initial( - $input-padding-x-lg, - $input-padding-y-lg, - $input-line-height-lg, - $input-font-size-lg, - $input-border-width + var(--pgn-form-input-padding-x-lg), + var(--pgn-form-input-padding-y-lg), + var(--pgn-form-input-line-height-lg), + var(--pgn-form-input-font-size-lg), + var(--pgn-form-input-border-width) ); } .pgn__form-control-decorator-group-sm & { @include form-control-floating-label-initial( - $input-padding-x-sm, - $input-padding-y-sm, - $input-line-height-sm, - $input-font-size-sm, - $input-border-width + var(--pgn-form-input-padding-x-sm), + var(--pgn-form-input-padding-y-sm), + var(--pgn-form-input-line-height-sm), + var(--pgn-form-input-font-size-sm), + var(--pgn-form-input-border-width) ); } @@ -252,35 +252,35 @@ $select-icon-padding: .5625rem !default; // select.form-control ~ &, .form-control.has-value ~ & { .pgn__form-control-floating-label-text { - background-color: $input-bg; + background-color: var(--pgn-form-input-bg-base); } @include form-control-floating-label-float( - $input-padding-x, - $input-padding-y, - $input-line-height, - $input-font-size, - $input-border-width + var(--pgn-form-input-padding-x-base), + var(--pgn-form-input-padding-y-base), + var(--pgn-form-input-line-height-base), + var(--pgn-form-input-font-size-base), + var(--pgn-form-input-border-width) ); } .float-label.pgn__form-control-decorator-group-lg & { @include form-control-floating-label-float( - $input-padding-x-lg, - $input-padding-y-lg, - $input-line-height-lg, - $input-font-size-lg, - $input-border-width + var(--pgn-form-input-padding-x-lg), + var(--pgn-form-input-padding-y-lg), + var(--pgn-form-input-line-height-lg), + var(--pgn-form-input-font-size-lg), + var(--pgn-form-input-border-width) ); } .float-label.pgn__form-control-decorator-group-sm & { @include form-control-floating-label-float( - $input-padding-x-sm, - $input-padding-y-sm, - $input-line-height-sm, - $input-font-size-sm, - $input-border-width + var(--pgn-form-input-padding-x-sm), + var(--pgn-form-input-padding-y-sm), + var(--pgn-form-input-line-height-sm), + var(--pgn-form-input-font-size-sm), + var(--pgn-form-input-border-width) ); } } @@ -319,22 +319,22 @@ $select-icon-padding: .5625rem !default; } select.form-control { - padding-inline-end: 2rem + $select-icon-padding; + padding-inline-end: calc(#{var(--pgn-form-select-icon-padding)} + 2rem); background-image: $custom-select-indicator; - background-position: right $select-icon-padding center; + background-position: right var(--pgn-form-select-icon-padding) center; background-repeat: no-repeat; background-size: 24px 24px; appearance: none; [dir="rtl"] & { - background-position: left $select-icon-padding center; + background-position: left var(--pgn-form-select-icon-padding) center; } } // Regular Form Label .pgn__form-label { - font-size: $input-font-size; + font-size: var(--pgn-form-input-font-size-base); display: inline-block; margin-bottom: .5rem; @@ -348,11 +348,11 @@ select.form-control { } &.pgn__form-label-lg { - font-size: $input-font-size-lg; + font-size: var(--pgn-form-input-font-size-lg); } &.pgn__form-label-sm { - font-size: $input-font-size-sm; + font-size: var(--pgn-form-input-font-size-sm); } } @@ -362,14 +362,14 @@ select.form-control { .pgn__form-radio-input, .pgn__form-switch-input { appearance: none; - height: $custom-control-indicator-size; - width: $custom-control-indicator-size; - background-color: $custom-control-indicator-bg; + height: var(--pgn-form-custom-control-indicator-size); + width: var(--pgn-form-custom-control-indicator-size); + background-color: var(--pgn-form-custom-control-indicator-bg-base); border: - solid $custom-control-indicator-border-width - $custom-control-indicator-border-color; - border-radius: $custom-checkbox-indicator-border-radius; - margin-inline-end: $custom-control-gutter; + solid var(--pgn-form-custom-control-indicator-border-width) + var(--pgn-form-custom-control-indicator-border-color); + border-radius: var(--pgn-form-custom-checkbox-indicator-border-radius); + margin-inline-end: var(--pgn-form-custom-control-gutter); background-position: center; &:not(:disabled) { @@ -377,7 +377,7 @@ select.form-control { } &:not(:disabled):hover { - box-shadow: $custom-control-indicator-focus-box-shadow; + box-shadow: var(--pgn-form-custom-control-indicator-checked-box-shadow-focus); } &:disabled { @@ -385,7 +385,7 @@ select.form-control { } &:checked { - border-color: $custom-control-indicator-checked-border-color; + border-color: var(--pgn-form-custom-control-indicator-checked-border-color-base); } } @@ -406,24 +406,24 @@ select.form-control { outline: none; box-shadow: none; text-decoration: none; - border-color: $input-focus-border-color; + border-color: var(--pgn-form-input-focus-color-border); } &:focus::before { content: ""; position: absolute; - top: calc(#{$form-check-position-axis} * -1); - right: calc(#{$form-check-position-axis} * -1); - bottom: calc(#{$form-check-position-axis} * -1); - left: calc(#{$form-check-position-axis} * -1); - border: $form-check-border-width solid $input-focus-border-color; - border-radius: $form-check-focus-border-radius; + top: calc(#{var(--pgn-form-check-position-axis)} * -1); + right: calc(#{var(--pgn-form-check-position-axis)} * -1); + bottom: calc(#{var(--pgn-form-check-position-axis)} * -1); + left: calc(#{var(--pgn-form-check-position-axis)} * -1); + border: var(--pgn-form-check-border-width) solid var(--pgn-form-input-focus-color-border); + border-radius: var(--pgn-form-check-border-radius-focus); } } .pgn__form-switch-input { - width: $custom-switch-width; - border-radius: $custom-switch-indicator-border-radius; + width: var(--pgn-form-custom-switch-width); + border-radius: var(--pgn-form-custom-switch-indicator-border-radius); background-image: escape-svg($custom-switch-indicator-icon-off); background-position: left center; background-repeat: no-repeat; @@ -442,23 +442,23 @@ select.form-control { } .pgn__form-switch-helper-text { - color: $gray-500; - font-size: $font-size-xs; + color: var(--pgn-color-gray-500); + font-size: var(--pgn-font-size-xs); margin-top: .25rem; } .pgn__form-radio-input { - border-radius: $custom-radio-indicator-border-radius; + border-radius: var(--pgn-form-custom-radio-indicator-border-radius); &:checked { background-image: escape-svg($custom-radio-indicator-icon-checked); } &:focus { - border-color: $black; + border-color: var(--pgn-color-black); &::before { - border-radius: $custom-radio-indicator-border-radius; + border-radius: var(--pgn-form-custom-radio-indicator-border-radius); } } } @@ -472,7 +472,7 @@ select.form-control { display: flex; align-items: center; margin-bottom: 0; - line-height: $custom-control-indicator-size; + line-height: var(--pgn-form-custom-control-indicator-size); } input:disabled ~ * { @@ -480,17 +480,17 @@ select.form-control { } &.pgn__form-control-invalid input { - border-color: $form-feedback-invalid-color; + border-color: var(--pgn-form-feedback-color-invalid); } &.pgn__form-control-valid input { - border-color: $form-feedback-valid-color; + border-color: var(--pgn-form-feedback-color-valid); } &.pgn__form-control-label-left { .pgn__form-label { order: 1; - margin-inline-end: $custom-control-gutter; + margin-inline-end: var(--pgn-form-custom-control-gutter); } input { @@ -508,7 +508,7 @@ select.form-control { .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { [dir="rtl"] & { - border-radius: 0 $input-border-radius $input-border-radius 0; + border-radius: 0 var(--pgn-form-input-border-radius-base) var(--pgn-form-input-border-radius-base) 0; } } @@ -519,7 +519,7 @@ select.form-control { .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { [dir="rtl"] & { - border-radius: $input-border-radius 0 0 $input-border-radius; + border-radius: var(--pgn-form-input-border-radius-base) 0 0 var(--pgn-form-input-border-radius-base); } } diff --git a/src/Form/_FormText.scss b/src/Form/_FormText.scss index 77a5aa7c97..74492ce621 100644 --- a/src/Form/_FormText.scss +++ b/src/Form/_FormText.scss @@ -1,5 +1,5 @@ .pgn__form-text { - font-size: $small-font-size; + font-size: var(--pgn-font-size-small-base); align-items: center; .pgn__icon { @@ -21,35 +21,35 @@ } .pgn__form-text-default { - color: $text-muted; + color: var(--pgn-text-muted); } .pgn__form-text-valid { - color: $form-feedback-valid-color; + color: var(--pgn-form-feedback-color-valid); } .pgn__form-text-invalid { - color: $form-feedback-invalid-color; + color: var(--pgn-form-feedback-color-invalid); } .pgn__form-text-warning { - color: $gray-900; + color: var(--pgn-color-gray-900); } .pgn__form-text-criteria-empty { .pgn__icon { - color: $text-muted; + color: var(--pgn-text-muted); } } .pgn__form-text-criteria-valid { .pgn__icon { - color: $form-feedback-valid-color; + color: var(--pgn-form-feedback-color-valid); } } .pgn__form-text-criteria-invalid { .pgn__icon { - color: $form-feedback-invalid-color; + color: var(--pgn-form-feedback-color-invalid); } } diff --git a/src/Form/_mixins.scss b/src/Form/_mixins.scss index a186e6d6c6..97e8d0cfea 100644 --- a/src/Form/_mixins.scss +++ b/src/Form/_mixins.scss @@ -25,6 +25,8 @@ $half-leading: calc(($line-height - .8) / 2); $percent-height-minus-no-bottom-leading: calc((($line-height - $half-leading) / $line-height) * 100%); - transform: translateY(-$padding-y) scale(.75) translateY(-$percent-height-minus-no-bottom-leading); + transform: + translateY(calc($padding-y * -1)) scale(.75) + translateY(calc($percent-height-minus-no-bottom-leading * -1)); } } diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss index 8f8b6a01b9..400e0f2d44 100644 --- a/src/Form/_variables.scss +++ b/src/Form/_variables.scss @@ -1,55 +1,55 @@ -$input-padding-y: $input-btn-padding-y !default; -$input-padding-x: $input-btn-padding-x !default; -$input-font-family: $input-btn-font-family !default; -$input-font-size: $input-btn-font-size !default; -$input-font-weight: $font-weight-base !default; -$input-line-height: $input-btn-line-height !default; - -$input-padding-y-sm: $input-btn-padding-y-sm !default; -$input-padding-x-sm: $input-btn-padding-x-sm !default; -$input-font-size-sm: $input-btn-font-size-sm !default; -$input-line-height-sm: $input-btn-line-height-sm !default; - -$input-padding-y-lg: $input-btn-padding-y-lg !default; -$input-padding-x-lg: $input-btn-padding-x-lg !default; -$input-font-size-lg: $input-btn-font-size-lg !default; -$input-line-height-lg: $input-btn-line-height-lg !default; - -$input-bg: $white !default; +$input-padding-y: var(--pgn-core-input-btn-padding-y) !default; +$input-padding-x: var(--pgn-core-input-btn-padding-x) !default; +$input-font-family: var(--pgn-core-input-btn-font-family) !default; +$input-font-size: var(--pgn-core-input-btn-font-size-base) !default; +$input-font-weight: var(--pgn-font-weight-base) !default; +$input-line-height: var(--pgn-core-input-btn-line-height-base) !default; + +$input-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y) !default; +$input-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x) !default; +$input-font-size-sm: var(--pgn-core-input-btn-font-size-sm) !default; +$input-line-height-sm: var(--pgn-core-input-btn-line-height-sm) !default; + +$input-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y) !default; +$input-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x) !default; +$input-font-size-lg: var(--pgn-core-input-btn-font-size-lg) !default; +$input-line-height-lg: var(--pgn-core-input-btn-line-height-lg) !default; + +$input-bg: var(--pgn-color-white) !default; $input-disabled-bg: theme-color("gray", "background") !default; $input-color: theme-color("gray", "text") !default; -$input-border-color: $gray-500 !default; -$input-border-width: $input-btn-border-width !default; -$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default; +$input-border-color: var(--pgn-color-gray-500) !default; +$input-border-width: var(--pgn-core-input-btn-border-width) !default; +$input-box-shadow: inset 0 1px 1px rgba(var(--pgn-color-black), .075) !default; -$input-border-radius: $border-radius !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; +$input-border-radius: var(--pgn-border-radius-base) !default; +$input-border-radius-lg: var(--pgn-border-radius-lg) !default; +$input-border-radius-sm: var(--pgn-border-radius-sm) !default; $input-focus-bg: $input-bg !default; -$input-focus-border-color: $component-active-bg !default; +$input-focus-border-color: var(--pgn-component-active-bg) !default; $input-focus-color: $input-color !default; $input-focus-width: 1px !default; -$input-focus-box-shadow: $input-btn-focus-box-shadow !default; +$input-focus-box-shadow: var(--pgn-core-input-btn-focus-box-shadow) !default; $input-placeholder-color: theme-color("gray", "light-text") !default; -$input-plaintext-color: $body-color !default; +$input-plaintext-color: var(--pgn-body-color) !default; -$input-height-border: $input-border-width * 2 !default; +$input-height-border: calc($input-border-width * 2) !default; -$input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default; -$input-height-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default; -$input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{calc($input-padding-y / 2)}) !default; +$input-height-inner: calc($input-line-height * 1em + $input-padding-y * 2) !default; +$input-height-inner-half: calc($input-line-height * .5em + $input-padding-y) !default; +$input-height-inner-quarter: calc($input-line-height * .25em + calc($input-padding-y / 2)) !default; $input-height: calc( - #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border} + ($input-line-height * 1em) + ($input-padding-y * 2) + ($input-height-border) ) !default; $input-height-sm: calc( - #{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border} + ($input-line-height-sm * 1em) + (var(--pgn-core-input-btn-padding-sm-y) * 2) + $input-height-border ) !default; $input-height-lg: calc( - #{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border} + ($input-line-height-lg * 1em) + (var(--pgn-core-input-btn-padding-lg-y) * 2) + ($input-height-border) ) !default; $input-hover-width: 1px !default; @@ -87,7 +87,7 @@ $custom-control-indicator-bg: $input-bg !default; $custom-control-indicator-bg-size: 100% !default; $custom-control-indicator-box-shadow: $input-box-shadow !default; -$custom-control-indicator-border-color: $gray-700 !default; +$custom-control-indicator-border-color: var(--pgn-color-gray-700) !default; $custom-control-indicator-border-width: 2px !default; $custom-control-label-color: null !default; @@ -95,8 +95,8 @@ $custom-control-indicator-disabled-bg: $input-disabled-bg !default; $custom-control-label-disabled-color: theme-color("gray", "light-text") !default; $custom-control-indicator-checked-color: $component-active-bg !default; -$custom-control-indicator-checked-bg: $component-active-bg !default; -$custom-control-indicator-checked-disabled-bg: rgba($primary, .5) !default; +$custom-control-indicator-checked-bg: var(--pgn-component-active-bg) !default; +$custom-control-indicator-checked-disabled-bg: rgba(var(--pgn-color-primary-base), .5) !default; $custom-control-indicator-checked-box-shadow: none !default; $custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default; @@ -104,13 +104,13 @@ $custom-control-indicator-focus-box-shadow: 0 0 0 4px rgba(0, 0, 0, .1) !def $custom-control-indicator-focus-border-color: $input-focus-border-color !default; $custom-control-indicator-active-color: $component-active-color !default; -$custom-control-indicator-active-bg: $component-active-bg !default; +$custom-control-indicator-active-bg: var(--pgn-component-active-bg) !default; $custom-control-indicator-active-box-shadow: none !default; $custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default; $custom-checkbox-indicator-border-radius: 0 !default; $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; +$custom-checkbox-indicator-indeterminate-bg: var(--pgn-component-active-bg) !default; $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; $custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; $custom-checkbox-indicator-indeterminate-box-shadow: none !default; @@ -152,7 +152,7 @@ $custom-select-background: $custom-select-indicator no-repeat right $input-padding-y center / $custom-select-bg-size !default; $custom-select-feedback-icon-padding-right: calc( - (1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding} + (1em + (2 * $custom-select-padding-y)) * 3 / 4 + ($custom-select-padding-x + $custom-select-indicator-padding) ) !default; $custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default; @@ -160,12 +160,12 @@ $custom-select-feedback-icon-size: $input-height-inner-half $input-heig $custom-select-border-width: $input-border-width !default; $custom-select-border-color: $input-border-color !default; -$custom-select-border-radius: $border-radius !default; -$custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default; +$custom-select-border-radius: var(--pgn-border-radius-base) !default; +$custom-select-box-shadow: inset 0 1px 2px rgba(var(--pgn-color-black), .075) !default; $custom-select-focus-border-color: $input-focus-border-color !default; $custom-select-focus-width: $input-focus-width !default; -$custom-select-focus-box-shadow: $input-btn-focus-box-shadow !default; +$custom-select-focus-box-shadow: var(--pgn-core-input-btn-focus-box-shadow) !default; $custom-select-padding-y-sm: $input-padding-y-sm !default; $custom-select-padding-x-sm: $input-padding-x-sm !default; @@ -182,15 +182,15 @@ $custom-range-track-height: .5rem !default; $custom-range-track-cursor: pointer !default; $custom-range-track-bg: theme-color("gray", "graphic") !default; $custom-range-track-border-radius: 1rem !default; -$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; +$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba(var(--pgn-color-black), .1) !default; $custom-range-thumb-width: 1rem !default; $custom-range-thumb-height: $custom-range-thumb-width !default; -$custom-range-thumb-bg: $component-active-bg !default; +$custom-range-thumb-bg: var(--pgn-component-active-bg) !default; $custom-range-thumb-border: 0 !default; $custom-range-thumb-border-radius: 1rem !default; -$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; -$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default; +$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba(var(--pgn-color-black), .1) !default; +$custom-range-thumb-focus-box-shadow: 0 0 0 1px var(--pgn-body-bg), $input-focus-box-shadow !default; $custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge $custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; $custom-range-thumb-disabled-bg: theme-color("gray", "default") !default; @@ -221,7 +221,7 @@ $custom-file-text: ( // Form validation $form-feedback-margin-top: $form-text-margin-top !default; -$form-feedback-font-size: $small-font-size !default; +$form-feedback-font-size: var(--pgn-font-size-small-base) !default; $form-feedback-valid-color: theme-color("success") !default; $form-feedback-invalid-color: theme-color("danger") !default; @@ -249,10 +249,10 @@ $form-validation-states: map-merge( // Form tooltips must come after regular tooltips $form-feedback-tooltip-padding-y: .25rem !default; $form-feedback-tooltip-padding-x: .5rem !default; -$form-feedback-tooltip-font-size: $font-size-sm !default; -$form-feedback-tooltip-line-height: $line-height-base !default; +$form-feedback-tooltip-font-size: var(--pgn-font-size-sm) !default; +$form-feedback-tooltip-line-height: var(--pgn-line-height-base) !default; $form-feedback-tooltip-opacity: .9 !default; -$form-feedback-tooltip-border-radius: $border-radius !default; +$form-feedback-tooltip-border-radius: var(--pgn-border-radius-base) !default; $form-autosuggest-icon-width: 2.4rem; $form-autosuggest-icon-height: $form-autosuggest-icon-width; diff --git a/src/Icon/Icon.scss b/src/Icon/Icon.scss index beb47b5d4e..c0a30afc0e 100644 --- a/src/Icon/Icon.scss +++ b/src/Icon/Icon.scss @@ -8,23 +8,23 @@ flex-shrink: 0; &.pgn__icon__inline { - width: $icon-inline; - height: $icon-inline; + width: var(--pgn-icon-inline); + height: var(--pgn-icon-inline); } &.pgn__icon__sm { - width: $icon-sm; - height: $icon-sm; + width: var(--pgn-icon-sm); + height: var(--pgn-icon-sm); } &.pgn__icon__md { - width: $icon-md; - height: $icon-md; + width: var(--pgn-icon-md); + height: var(--pgn-icon-md); } &.pgn__icon__lg { - width: $icon-lg; - height: $icon-lg; + width: var(--pgn-icon-lg); + height: var(--pgn-icon-lg); } } diff --git a/src/IconButton/IconButton.scss b/src/IconButton/IconButton.scss index d6e920c97c..64faa77c53 100644 --- a/src/IconButton/IconButton.scss +++ b/src/IconButton/IconButton.scss @@ -27,21 +27,21 @@ } @else { - background-color: $btn-icon-bg; + background-color: var(--pgn-icon-button-bg); color: $icon-color; &.focus, &:focus { outline: 2px transparent; - background-color: $btn-icon-bg; + background-color: var(--pgn-icon-button-bg); color: $icon-color; - box-shadow: inset 0 0 0 $btn-focus-width $icon-color; + box-shadow: inset 0 0 0 var(--pgn-btn-focus-width) $icon-color; } } } .btn-icon { - @include btn-icon-size($btn-icon-diameter-md); + @include btn-icon-size(var(--pgn-icon-button-diameter-md)); border-radius: 50%; padding: 0; @@ -50,7 +50,7 @@ border: none; &.btn-icon-sm { - @include btn-icon-size($btn-icon-diameter-sm); + @include btn-icon-size(var(--pgn-icon-button-diameter-sm)); } &.btn-icon-inline { @@ -84,25 +84,25 @@ &.disabled, &:disabled { - opacity: $btn-disabled-opacity; + opacity: var(--pgn-btn-disabled-opacity); pointer-events: none; } @each $name, $color in $icon-button-colors { &.btn-icon-#{$name} { - @include btn-icon-variant($color, $btn-icon-accent-color); + @include btn-icon-variant($color, var(--pgn-icon-button-accent-color)); } &.btn-icon-inverse-#{$name} { - @include btn-icon-variant($btn-icon-accent-color, $color); + @include btn-icon-variant(var(--pgn-icon-button-accent-color), $color); } &.btn-icon-#{$name}-active { - @include btn-icon-variant($color, $btn-icon-accent-color, true); + @include btn-icon-variant($color, var(--pgn-icon-button-accent-color), true); } &.btn-icon-inverse-#{$name}-active { - @include btn-icon-variant($btn-icon-accent-color, $color, true); + @include btn-icon-variant(var(--pgn-icon-button-accent-color), $color, true); } } } diff --git a/src/IconButton/_variables.scss b/src/IconButton/_variables.scss index 60c47e012c..b2b26f95f6 100644 --- a/src/IconButton/_variables.scss +++ b/src/IconButton/_variables.scss @@ -1,13 +1,13 @@ $icon-button-colors: ( - "primary": $primary, - "secondary": $secondary, - "brand": $brand, - "success": $success, - "warning": $warning, - "danger": $danger, - "light": $light, - "dark": $dark, - "black": $black, + "primary": var(--pgn-color-primary-base), + "secondary": var(--pgn-color-secondary-base), + "brand": var(--pgn-color-brand-base), + "success": var(--pgn-color-success-base), + "warning": var(--pgn-color-warning-base), + "danger": var(--pgn-color-danger-base), + "light": var(--pgn-color-light-base), + "dark": var(--pgn-color-dark-base), + "black": var(--pgn-color-black), ) !default; $btn-icon-diameter-md: 2.75rem !default; $btn-icon-diameter-sm: 2.25rem !default; diff --git a/src/Image/_variables.scss b/src/Image/_variables.scss index 9de7935300..2e2f000537 100644 --- a/src/Image/_variables.scss +++ b/src/Image/_variables.scss @@ -1,11 +1,11 @@ // Image thumbnails $thumbnail-padding: .25rem !default; -$thumbnail-bg: $body-bg !default; -$thumbnail-border-width: $border-width !default; +$thumbnail-bg: var(--pgn-body-bg) !default; +$thumbnail-border-width: var(--pgn-border-width) !default; $thumbnail-border-color: theme-color("gray", "border") !default; -$thumbnail-border-radius: $border-radius !default; -$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default; +$thumbnail-border-radius: var(--pgn-border-radius-base) !default; +$thumbnail-box-shadow: 0 1px 2px rgba(var(--pgn-color-black), .075) !default; // Figures diff --git a/src/Menu/Menu.scss b/src/Menu/Menu.scss index 3b6ac0f8f7..ed43829b14 100644 --- a/src/Menu/Menu.scss +++ b/src/Menu/Menu.scss @@ -10,16 +10,16 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - font-family: $btn-font-family; - font-weight: $btn-font-weight; - color: $body-color; + font-family: var(--pgn-btn-font-family); + font-weight: var(--pgn-btn-font-width); + color: var(--pgn-body-color); text-align: center; vertical-align: middle; user-select: none; background-color: transparent; - border: $btn-border-width solid transparent; - padding: $btn-padding-y $btn-padding-x; - font-size: $btn-font-size; + border: var(--pgn-btn-border-width) solid transparent; + padding: var(--pgn-btn-padding-y-base) var(--pgn-btn-padding-x-base); + font-size: var(--pgn-btn-font-size-base); height: 48px; border-radius: 0; @@ -29,31 +29,31 @@ @include hover { text-decoration: none; - color: $btn-tertiary-color; - border-color: $hover-border; - background: $btn-tertiary-hover-bg; + color: var(--pgn-btn-tertiary-color); + border-color: var(--pgn-menu-border-hover); + background: var(--pgn-btn-tertiary-bg-hover); } // Disabled comes first so active can properly restyle &.disabled, &:disabled { - opacity: $btn-disabled-opacity; + opacity: var(--pgn-btn-disabled-opacity); } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { - color: $btn-tertiary-color; - background-color: $active-background; - border-color: $active-border; + color: var(--pgn-btn-tertiary-color); + background-color: var(--pgn-menu-background-active); + border-color: var(--pgn-menu-border-active); } &.focus, &:focus { - font-weight: $font-weight-bolder; - color: $btn-tertiary-color; - background-color: $active-background; - border-color: $active-border; + font-weight: var(--pgn-font-weight-bolder); + color: var(--pgn-btn-tertiary-color); + background-color: var(--pgn-menu-background-active); + border-color: var(--pgn-menu-border-active); } .btn-icon-before { @@ -79,14 +79,14 @@ .pgn__menu { border-radius: .25em; - box-shadow: $box-shadow; - background-color: $white; + box-shadow: var(--pgn-box-shadow-base); + background-color: var(--pgn-color-white); overflow: auto; max-height: 264px; } .pgn__menu-select-popup { - color: $btn-tertiary-bg; + color: var(--pgn-btn-tertiary-bg-base); position: relative; } @@ -95,14 +95,14 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - background: $white; + background: var(--pgn-color-white); box-sizing: border-box; - color: $dark; + color: var(--pgn-color-dark-base); @include hover { - color: $white; - background: $primary; - border: 1px solid $white; + color: var(--pgn-color-white); + background: var(--pgn-color-primary-base); + border: 1px solid var(--pgn-color-white); box-sizing: border-box; } } diff --git a/src/Modal/Modal.scss b/src/Modal/Modal.scss index 6d8aae5209..38e0b41018 100644 --- a/src/Modal/Modal.scss +++ b/src/Modal/Modal.scss @@ -13,15 +13,15 @@ position: fixed; top: 0; width: 100vw; - z-index: $zindex-modal; + z-index: var(--pgn-www-zindex-modal); -webkit-overflow-scrolling: touch; } .pgn__modal-backdrop { - background: $modal-backdrop-bg; + background: var(--pgn-modal-backdrop-bg); bottom: 0; left: 0; - opacity: $modal-backdrop-opacity; + opacity: var(--pgn-modal-backdrop-opacity); position: fixed; right: 0; top: 0; @@ -86,15 +86,15 @@ .modal-dialog { height: 100%; margin: auto; - padding: calc($spacer / 2); + padding: calc(var(--pgn-core-spacer) / 2); @media (min-width: map-get($grid-breakpoints, "sm")) { - padding: $spacer; + padding: var(--pgn-core-spacer); } } .modal-content { - max-height: calc(100vh - (#{$spacer} * 2)); + max-height: calc(100vh - (#{var(--pgn-core-spacer)} * 2)); &:focus { outline: 1px dotted; @@ -164,8 +164,8 @@ .pgn__modal-popup__arrow::after, .pgn__modal-popup__arrow-top-start::after, .pgn__modal-popup__arrow-top::after { - bottom: $border-width; - border-top-color: $white; + bottom: var(--pgn-border-width); + border-top-color: var(--pgn-color-white); } [data-popper-placement^="right"] .pgn__modal-popup__arrow-auto, diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss index 57bae8234c..57910e6e9a 100644 --- a/src/Modal/_ModalDialog.scss +++ b/src/Modal/_ModalDialog.scss @@ -1,49 +1,49 @@ .pgn__modal { - background: $modal-content-bg; + background: var(--pgn-modal-content-bg); border-radius: $modal-content-inner-border-radius; display: flex; flex-direction: column; - margin: 0 $modal-dialog-margin; + margin: 0 var(--pgn-modal-dialog-margin-base); max-height: 80vh; - max-width: $modal-md; + max-width: var(--pgn-modal-md); overflow: auto; width: 100vw; - box-shadow: $modal-content-box-shadow-sm-up; - border: solid $modal-content-border-width $modal-content-border-color; + box-shadow: var(--pgn-modal-content-box-shadow-sm-up); + border: solid var(--pgn-modal-content-border-width) var(--pgn-modal-content-border-color); position: relative; &:not(.pgn__modal-fullscreen) > *:first-child { - border-top-left-radius: $modal-content-border-radius; - border-top-right-radius: $modal-content-border-radius; + border-top-left-radius: var(--pgn-modal-content-border-radius); + border-top-right-radius: var(--pgn-modal-content-border-radius); } &:not(.pgn__modal-fullscreen) > *:last-child { - border-bottom-left-radius: $modal-content-border-radius; - border-bottom-right-radius: $modal-content-border-radius; + border-bottom-left-radius: var(--pgn-modal-content-border-radius); + border-bottom-right-radius: var(--pgn-modal-content-border-radius); } &.pgn__modal-scroll-fullscreen { max-height: none; - margin: $modal-dialog-margin; + margin: var(--pgn-modal-dialog-margin-base); } } // Sizes .pgn__modal-sm { - max-width: $modal-sm; + max-width: var(--pgn-modal-sm); } .pgn__modal-lg { - max-width: $modal-lg; + max-width: var(--pgn-modal-lg); } .pgn__modal-md { - max-width: $modal-md; + max-width: var(--pgn-modal-md); } .pgn__modal-xl { - max-width: $modal-xl; + max-width: var(--pgn-modal-xl); } .pgn__modal-fullscreen { @@ -53,8 +53,8 @@ max-width: none; .pgn__modal-footer { - border-top: solid 1px $light; - padding-top: $modal-footer-padding-y; + border-top: solid 1px var(--pgn-color-light-base); + padding-top: var(--pgn-modal-footer-padding-y); } } @@ -72,8 +72,8 @@ .pgn__modal-close-container { position: absolute; z-index: 10; - top: $modal-header-padding-y; - inset-inline-end: $modal-header-padding-y; + top: var(--pgn-modal-header-padding-y); + inset-inline-end: var(--pgn-modal-header-padding-y); } .pgn__modal-header { @@ -82,8 +82,8 @@ justify-content: center; position: sticky; top: 0; - padding: $modal-header-padding; - background-color: $modal-content-bg; + padding: var(--pgn-modal-header-padding-base); + background-color: var(--pgn-modal-content-bg); transition: box-shadow 150ms ease; min-height: 2rem; // height of the icon close button box-sizing: content-box; @@ -96,14 +96,14 @@ } .pgn__modal-title { - font-size: $h3-font-size; + font-size: var(--pgn-font-size-h3); margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn text-align: start; } } .pgn__modal-hero { - padding: $modal-header-padding; + padding: var(--pgn-modal-header-padding-base); position: relative; display: flex; align-items: center; @@ -129,7 +129,9 @@ .pgn__modal-body { flex-grow: 1; - padding: $modal-inner-padding $modal-inner-padding calc(#{$modal-inner-padding} / 2); + padding: + var(--pgn-modal-inner-padding-base) + var(--pgn-modal-inner-padding-base) calc(#{var(--pgn-modal-inner-padding-base)} / 2); overflow: auto; position: relative; @@ -140,10 +142,10 @@ display: block; height: 20px; position: sticky; - top: calc($modal-inner-padding * -1); - margin-top: calc($modal-inner-padding * -1); - margin-left: calc($modal-inner-padding * -1); - margin-right: calc($modal-inner-padding * -1); + top: calc(var(--pgn-modal-inner-padding-base) * -1); + margin-top: calc(var(--pgn-modal-inner-padding-base) * -1); + margin-left: calc(var(--pgn-modal-inner-padding-base) * -1); + margin-right: calc(var(--pgn-modal-inner-padding-base) * -1); opacity: .5; z-index: 2; } @@ -161,10 +163,10 @@ display: block; height: 20px; position: sticky; - bottom: calc(#{$modal-inner-padding} / 2 * -1); + bottom: calc(#{var(--pgn-modal-inner-padding-base)} / 2 * -1); margin-bottom: calc($modal-inner-padding-bottom * -1); - margin-left: calc($modal-inner-padding * -1); - margin-right: calc($modal-inner-padding * -1); + margin-left: calc(var(--pgn-modal-inner-padding-base) * -1); + margin-right: calc(var(--pgn-modal-inner-padding-base) * -1); opacity: .5; } @@ -222,10 +224,10 @@ bottom: 0; display: flex; justify-content: flex-end; - background-color: $modal-content-bg; + background-color: var(--pgn-modal-content-bg); transition: box-shadow 150ms ease; - padding: $modal-footer-padding; - padding-top: calc(#{$modal-inner-padding} / 2); + padding: var(--pgn-modal-footer-padding-base); + padding-top: calc(#{var(--pgn-modal-inner-padding-base)} / 2); } // Color Variants @@ -234,14 +236,14 @@ // Default style modals don't have a background on the header which // ends up looking spaced too far away from the body content. .pgn__modal-header { - padding-bottom: calc(#{$modal-inner-padding} / 2); + padding-bottom: calc(#{var(--pgn-modal-inner-padding-base)} / 2); } .pgn__modal-body { - padding: calc(#{$modal-inner-padding} / 2) $modal-inner-padding; + padding: calc(#{var(--pgn-modal-inner-padding-base)} / 2) var(--pgn-modal-inner-padding-base); &::before { - top: calc(#{$modal-inner-padding} / 2 * -1); + top: calc(#{var(--pgn-modal-inner-padding-base)} / 2 * -1); } } } @@ -249,8 +251,8 @@ .pgn__modal-dark { .pgn__modal-header, .pgn__modal-hero { - background-color: $dark; - color: $white; + background-color: var(--pgn-color-dark-base); + color: var(--pgn-color-white); * { color: inherit; @@ -258,20 +260,20 @@ } .pgn__modal-header { - border-bottom: solid 1px $light; + border-bottom: solid 1px var(--pgn-color-light-base); } } .pgn__modal-warning .pgn__modal-header { - background-color: $warning-100; + background-color: var(--pgn-color-warning-100); } .pgn__modal-danger .pgn__modal-header { - background-color: $danger-100; + background-color: var(--pgn-color-danger-100); } .pgn__modal-success .pgn__modal-header { - background-color: $success-100; + background-color: var(--pgn-color-success-100); } // Modal types @@ -284,6 +286,6 @@ } .pgn__modal-title { - font-size: $h4-font-size; + font-size: var(--pgn-font-size-h4); } } diff --git a/src/Modal/_variables.scss b/src/Modal/_variables.scss index f84739bfd0..2f73c56d1e 100644 --- a/src/Modal/_variables.scss +++ b/src/Modal/_variables.scss @@ -10,20 +10,21 @@ $modal-footer-margin-between: .5rem !default; $modal-dialog-margin: 1.5rem !default; $modal-dialog-margin-y-sm-up: 1.75rem !default; -$modal-title-line-height: $line-height-base !default; +$modal-title-line-height: var(--pgn-line-height-base) !default; $modal-content-color: null !default; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, .2) !default; +$modal-content-bg: var(--pgn-color-white) !default; +$modal-content-border-color: rgba(var(--pgn-color-black), .2) !default; $modal-content-border-width: 0 !default; $modal-content-border-radius: $border-radius-lg !default; $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default; -$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; -$modal-content-box-shadow-sm-up: 0 10px 20px rgba($black, .15), 0 8px 20px rgba($black, .15) !default; +$modal-content-box-shadow-xs: 0 .25rem .5rem rgba(var(--pgn-color-black), .5) !default; +$modal-content-box-shadow-sm-up: 0 10px 20px rgba(var(--pgn-color-black), .15), + 0 8px 20px rgba(var(--pgn-color-black), .15) !default; -$modal-backdrop-bg: $black !default; +$modal-backdrop-bg: var(--pgn-color-black) !default; $modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $border-color !default; +$modal-header-border-color: var(--pgn-border-color) !default; $modal-footer-border-color: $modal-header-border-color !default; $modal-header-border-width: $modal-content-border-width !default; $modal-footer-border-width: $modal-header-border-width !default; diff --git a/src/Nav/Nav.scss b/src/Nav/Nav.scss index a90f6ce3b0..42395ea75f 100644 --- a/src/Nav/Nav.scss +++ b/src/Nav/Nav.scss @@ -15,19 +15,19 @@ .nav-link { display: block; - padding: $nav-link-padding-y $nav-link-padding-x; - text-decoration: if($link-decoration == none, null, none); - color: $nav-link-color; - font-weight: $nav-link-font-weight; + padding: var(--pgn-nav-link-padding-y) var(--pgn-nav-link-padding-x); + text-decoration: if(var(--pgn-link-decoration) == none, null, none); + color: var(--pgn-nav-link-color-base); + font-weight: var(--pgn-nav-link-font-weight); @include hover-focus { text-decoration: none; - color: $nav-link-color; + color: var(--pgn-nav-link-color-base); } // Disabled state lightens text &.disabled { - color: $nav-link-disabled-color; + color: var(--pgn-nav-link-color-disabled); pointer-events: none; cursor: default; } @@ -38,24 +38,24 @@ // .nav-tabs { - border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; + border-bottom: var(--pgn-nav-tabs-border-width) solid var(--pgn-nav-tabs-border-color); .nav-link { - margin-bottom: calc($nav-tabs-border-width * -1); - border-top: $nav-tabs-border-width solid transparent; - border-bottom: $nav-tabs-border-width solid transparent; + margin-bottom: calc(var(--pgn-nav-tabs-border-width) * -1); + border-top: var(--pgn-nav-tabs-border-width) solid transparent; + border-bottom: var(--pgn-nav-tabs-border-width) solid transparent; border-left: none; border-right: none; - @include border-top-radius($nav-tabs-border-radius); + @include border-top-radius(var(--pgn-nav-tabs-border-radius)); @include hover-focus { - border-color: $nav-tabs-link-hover-border-color; - background-color: $nav-tabs-link-hover-bg; + border-color: var(--pgn-nav-tabs-link-hover-border-color); + background-color: var(--pgn-nav-tabs-link-hover-bg); } &.disabled { - color: $nav-link-disabled-color; + color: var(--pgn-nav-link-color-disabled); background-color: transparent; border-color: transparent; } @@ -63,14 +63,14 @@ .nav-link.active, .nav-item.show .nav-link { - color: $nav-tabs-link-active-color; - background-color: $nav-tabs-link-active-bg; - border-color: $nav-tabs-link-active-border-color; + color: var(--pgn-nav-tabs-link-active-color-base); + background-color: var(--pgn-nav-tabs-link-active-bg); + border-color: var(--pgn-nav-tabs-link-active-color-border); } .dropdown-menu { // Make dropdown border overlap tab border - margin-top: calc($nav-tabs-border-width * -1); + margin-top: calc(var(--pgn-nav-tabs-border-width) * -1); // Remove the top rounded corners here since there is a hard edge above the menu @include border-top-radius(0); @@ -83,13 +83,13 @@ .nav-pills { .nav-link { - @include border-radius($nav-pills-border-radius); + @include border-radius(var(--pgn-nav-pills-border-radius)); } .nav-link.active, .show > .nav-link { - color: $nav-pills-link-active-color; - background-color: $nav-pills-link-active-bg; + color: var(--pgn-nav-pills-link-link-active-color); + background-color: var(--pgn-nav-pills-link-link-active-bg); } } @@ -99,13 +99,13 @@ .nav-button-group { .nav-link { - border: solid 1px $nav-tabs-border-color; + border: solid 1px var(--pgn-nav-tabs-border-color); &:first-child { - @include border-left-radius($nav-pills-border-radius); + @include border-left-radius(var(--pgn-nav-pills-border-radius)); [dir="rtl"] & { - @include border-right-radius($nav-pills-border-radius); + @include border-right-radius(var(--pgn-nav-pills-border-radius)); border-top-left-radius: 0; border-bottom-left-radius: 0; @@ -114,10 +114,10 @@ } &:last-child { - @include border-right-radius($nav-pills-border-radius); + @include border-right-radius(var(--pgn-nav-pills-border-radius)); [dir="rtl"] & { - @include border-left-radius($nav-pills-border-radius); + @include border-left-radius(var(--pgn-nav-pills-border-radius)); border-top-right-radius: 0; border-bottom-right-radius: 0; @@ -125,7 +125,7 @@ } &:hover { - background: $nav-tabs-link-hover-bg; + background: var(--pgn-nav-tabs-link-hover-bg); } & + .nav-link { @@ -135,8 +135,8 @@ .nav-link.active, .show > .nav-link { - color: $nav-pills-link-active-color; - background-color: $nav-pills-link-active-bg; + color: var(--pgn-nav-pills-link-link-active-color); + background-color: var(--pgn-nav-pills-link-link-active-bg); border-color: transparent; } } diff --git a/src/Nav/_variables.scss b/src/Nav/_variables.scss index 668909b664..6445804108 100644 --- a/src/Nav/_variables.scss +++ b/src/Nav/_variables.scss @@ -2,22 +2,22 @@ $nav-link-padding-y: .5rem !default; $nav-link-padding-x: 1rem !default; -$nav-link-color: $gray-700 !default; -$nav-link-disabled-color: $gray-300 !default; +$nav-link-color: var(--pgn-color-gray-700) !default; +$nav-link-disabled-color: var(--pgn-color-gray-300) !default; $nav-link-font-weight: 500 !default; -$nav-tabs-border-color: $light-400 !default; +$nav-tabs-border-color: var(--pgn-color-light-400) !default; $nav-tabs-border-width: 2px !default; $nav-tabs-border-radius: 0 !default; $nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-color !default; -$nav-tabs-link-hover-bg: $light-400 !default; -$nav-tabs-link-active-color: $primary-500 !default; -$nav-tabs-link-active-bg: $body-bg !default; -$nav-tabs-link-active-border-color: transparent transparent $primary-500 !default; +$nav-tabs-link-hover-bg: var(--pgn-color-light-400) !default; +$nav-tabs-link-active-color: var(--pgn-color-primary-500) !default; +$nav-tabs-link-active-bg: var(--pgn-body-bg) !default; +$nav-tabs-link-active-border-color: transparent transparent var(--pgn-color-primary-500) !default; -$nav-pills-border-radius: $border-radius !default; -$nav-pills-link-active-color: $component-active-color !default; -$nav-pills-link-active-bg: $component-active-bg !default; +$nav-pills-border-radius: var(--pgn-border-radius-base) !default; +$nav-pills-link-active-color: var(--pgn-component-active-color) !default; +$nav-pills-link-active-bg: var(--pgn-component-active-bg) !default; $nav-divider-color: theme-color("gray", "background") !default; -$nav-divider-margin-y: calc($spacer / 2) !default; +$nav-divider-margin-y: calc(var(--pgn-core-spacer) / 2) !default; diff --git a/src/Navbar/_variables.scss b/src/Navbar/_variables.scss index ad0fd8830a..9af95b0228 100644 --- a/src/Navbar/_variables.scss +++ b/src/Navbar/_variables.scss @@ -1,38 +1,38 @@ // Navbar -$navbar-padding-y: calc($spacer / 2) !default; -$navbar-padding-x: $spacer !default; +$navbar-padding-y: calc(var(--pgn-core-spacer) / 2) !default; +$navbar-padding-x: var(--pgn-core-spacer) !default; $navbar-nav-link-padding-x: .5rem !default; -$navbar-brand-font-size: $font-size-lg !default; +$navbar-brand-font-size: var(--pgn-font-size-lg) !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link // The default for $nav-link-padding-y is .5rem. Copied here for modularization -$nav-link-height: $font-size-base * $line-height-base + .5rem * 2 !default; -$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; +$nav-link-height: calc(var(--pgn-font-size-base) * var(--pgn-line-height-base) + .5rem * 2) !default; +$navbar-brand-height: calc($navbar-brand-font-size * var(--pgn-line-height-base)) !default; $navbar-brand-padding-y: calc(($nav-link-height - $navbar-brand-height) / 2) !default; $navbar-toggler-padding-y: .25rem !default; $navbar-toggler-padding-x: .75rem !default; -$navbar-toggler-font-size: $font-size-lg !default; +$navbar-toggler-font-size: var(--pgn-font-size-lg) !default; $navbar-toggler-border-radius: $btn-border-radius !default; $navbar-nav-scroll-max-height: 75vh !default; -$navbar-dark-color: rgba($white, .5) !default; -$navbar-dark-hover-color: rgba($white, .75) !default; -$navbar-dark-active-color: $white !default; -$navbar-dark-disabled-color: rgba($white, .25) !default; +$navbar-dark-color: rgba(var(--pgn-color-white), .5) !default; +$navbar-dark-hover-color: rgba(var(--pgn-color-white), .75) !default; +$navbar-dark-active-color: var(--pgn-color-white) !default; +$navbar-dark-disabled-color: rgba(var(--pgn-color-white), .25) !default; $navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; -$navbar-dark-toggler-border-color: rgba($white, .1) !default; +$navbar-dark-toggler-border-color: rgba(var(--pgn-color-white), .1) !default; -$navbar-light-color: rgba($black, .5) !default; -$navbar-light-hover-color: rgba($black, .7) !default; -$navbar-light-active-color: rgba($black, .9) !default; -$navbar-light-disabled-color: rgba($black, .3) !default; +$navbar-light-color: rgba(var(--pgn-color-black), .5) !default; +$navbar-light-hover-color: rgba(var(--pgn-color-black), .7) !default; +$navbar-light-active-color: rgba(var(--pgn-color-black), .9) !default; +$navbar-light-disabled-color: rgba(var(--pgn-color-black), .3) !default; $navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; -$navbar-light-toggler-border-color: rgba($black, .1) !default; +$navbar-light-toggler-border-color: rgba(var(--pgn-color-black), .1) !default; $navbar-light-brand-color: $navbar-light-active-color !default; $navbar-light-brand-hover-color: $navbar-light-active-color !default; diff --git a/src/PageBanner/PageBanner.scss b/src/PageBanner/PageBanner.scss index 229dbda334..645a786a70 100644 --- a/src/PageBanner/PageBanner.scss +++ b/src/PageBanner/PageBanner.scss @@ -4,28 +4,28 @@ min-height: 36px; display: flex; flex-wrap: nowrap; - font-size: $x-small-font-size; + font-size: var(--pgn-font-size-small-x); @include media-breakpoint-up(md) { - font-size: $small-font-size; + font-size: var(--pgn-font-size-small-base); } } // stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__dark { - background-color: $dark-500; + background-color: var(--pgn-color-dark-500); color: white; } // stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__light { - background-color: $light-400; + background-color: var(--pgn-color-light-400); color: black; } // stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__accentA { - background-color: $accent-a; + background-color: var(--pgn-color-accent-a); color: black; } // stylelint-disable-next-line selector-class-pattern @@ -36,7 +36,7 @@ // stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__warning { - background-color: $warning-100; + background-color: var(--pgn-color-warning-100); color: black; } diff --git a/src/Pagination/Pagination.scss b/src/Pagination/Pagination.scss index d1f634d917..46d5c8421c 100644 --- a/src/Pagination/Pagination.scss +++ b/src/Pagination/Pagination.scss @@ -31,11 +31,11 @@ .page-link { &.previous .pgn__icon { margin-inline-start: 0; - margin-inline-end: $pagination-margin-x; + margin-inline-end: var(--pgn-pagination-margin-x); } &.next .pgn__icon { - margin-inline-start: $pagination-margin-x; + margin-inline-start: var(--pgn-pagination-margin-x); margin-inline-end: 0; } } @@ -43,13 +43,13 @@ .page-item { &:first-child .page-link { [dir="rtl"] & { - border-radius: 0 $pagination-border-radius-lg $pagination-border-radius-lg 0; + border-radius: 0 var(--pgn-pagination-border-radius-lg) var(--pgn-pagination-border-radius-lg) 0; } } &:last-child .page-link { [dir="rtl"] & { - border-radius: $pagination-border-radius-lg 0 0 $pagination-border-radius-lg; + border-radius: var(--pgn-pagination-border-radius-lg) 0 0 var(--pgn-pagination-border-radius-lg); } } } @@ -59,8 +59,8 @@ border: none; &.btn-primary:not(:disabled):not(.disabled):focus { - background-color: $pagination-bg; - color: $pagination-focus-color-text; + background-color: var(--pgn-pagination-bg-base); + color: var(--pgn-pagination-focus-color-text); } &:focus { @@ -68,9 +68,14 @@ } &.btn-primary:focus::before { - border: $pagination-focus-border-width solid $pagination-focus-color; + border: var(--pgn-pagination-focus-border-width) solid var(--pgn-pagination-focus-color-base); - @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); + @include button-size( + var(--pgn-btn-padding-y-base), + var(--pgn-btn-padding-x-base), + var(--pgn-btn-font-size-base), + var(--pgn-btn-line-height-base), + var(--pgn-btn-border-radius-base)); } div { @@ -92,25 +97,25 @@ .page-item { > .btn { transition: none; - line-height: $pagination-line-height; + line-height: var(--pgn-pagination-line-height); } &.active .page-link.btn-primary:not(:disabled):not(.disabled):focus { - background-color: $pagination-focus-color; - color: $pagination-bg; + background-color: var(--pgn-pagination-focus-color-base); + color: var(--pgn-pagination-bg-base); } } .pagination-small { .page-link { - font-size: $pagination-font-size-sm; - line-height: $pagination-line-height; + font-size: var(--pgn-pagination-font-size-sm); + line-height: var(--pgn-pagination-line-height); padding: .375rem .78rem; &.previous, &.next { - padding: 0 $pagination-padding-y; - line-height: $pagination-secondary-height-sm; + padding: 0 var(--pgn-pagination-padding-y-base); + line-height: var(--pgn-pagination-secondary-height-sm); div { display: flex; @@ -124,7 +129,7 @@ &.previous, &.next { padding: 0; - width: $pagination-icon-width; + width: var(--pgn-pagination-icon-width); } } } @@ -133,15 +138,15 @@ .pagination-secondary { button.next, button.previous { - height: $pagination-secondary-height; - padding: 0 $pagination-padding-y; + height: var(--pgn-pagination-secondary-height-base); + padding: 0 var(--pgn-pagination-padding-y-base); } &.pagination-small { button.next, button.previous { - height: $pagination-secondary-height-sm; - line-height: $pagination-line-height; + height: var(--pgn-pagination-secondary-height-sm); + line-height: var(--pgn-pagination-line-height); } } @@ -157,7 +162,7 @@ .pagination-inverse { %dark-styles { background-color: transparent; - color: $white; + color: var(--pgn-color-white); } .pgn__dark-styles { @@ -170,8 +175,8 @@ } &.active button.page-link { - background-color: $pagination-bg; - color: $pagination-color; + background-color: var(--pgn-pagination-bg-base); + color: var(--pgn-pagination-color-base); } button.page-link { @@ -183,7 +188,7 @@ } &:not(.active):focus { - box-shadow: $level-1-box-shadow; + box-shadow: var(--pgn-box-shadow-level-1); } } @@ -196,10 +201,10 @@ .dropdown { .btn-tertiary { - color: $pagination-color-inverse; + color: var(--pgn-pagination-color-inverse); &::after { - border-top: $pagination-toggle-border solid $pagination-color-inverse; + border-top: var(--pgn-pagination-toggle-border-base) solid var(--pgn-pagination-color-inverse); } &:active, @@ -208,7 +213,7 @@ } &:not(:disabled):not(.disabled):active { - color: $pagination-color-inverse; + color: var(--pgn-pagination-color-inverse); } } } @@ -220,8 +225,8 @@ .pgn__reduced-pagination-dropdown { overflow-y: auto; - max-height: $pagination-reduced-dropdown-max-height; - min-width: $pagination-reduced-dropdown-min-width; + max-height: var(--pgn-reduced-dropdown-height-max); + min-width: var(--pgn-reduced-dropdown-width-min); a { text-align: center; @@ -232,9 +237,9 @@ .dropdown-toggle::after { width: 0; height: 0; - border-left: $pagination-toggle-border solid transparent; - border-right: $pagination-toggle-border solid transparent; - border-top: $pagination-toggle-border solid $gray-700; + border-left: var(--pgn-pagination-toggle-border-base) solid transparent; + border-right: var(--pgn-pagination-toggle-border-base) solid transparent; + border-top: var(--pgn-pagination-toggle-border-base) solid var(--pgn-color-gray-700); transform: rotate(0); inset-inline-start: .5rem; top: 0; @@ -243,25 +248,25 @@ button.next, button.previous { - height: $pagination-secondary-height; - padding: 0 $pagination-padding-y; + height: var(--pgn-pagination-secondary-height-base); + padding: 0 var(--pgn-pagination-padding-y-base); } &.pagination-small { .btn.dropdown-toggle { - font-size: $pagination-font-size-sm; + font-size: var(--pgn-pagination-font-size-sm); &::after { - border-left-width: $pagination-toggle-border-sm; - border-right-width: $pagination-toggle-border-sm; - border-top-width: $pagination-toggle-border-sm; + border-left-width: var(--pgn-pagination-toggle-border-sm); + border-right-width: var(--pgn-pagination-toggle-border-sm); + border-top-width: var(--pgn-pagination-toggle-border-sm); } } button.previous, button.next { - line-height: $pagination-icon-height; - height: $pagination-icon-height; + line-height: var(--pgn-pagination-icon-height); + height: var(--pgn-pagination-icon-height); } } @@ -281,15 +286,15 @@ button.next, button.previous { - padding: $pagination-padding-y; - height: $pagination-secondary-height; + padding: var(--pgn-pagination-padding-y-base); + height: var(--pgn-pagination-secondary-height-base); } &.pagination-small { button.next, button.previous { - padding: 0 $pagination-padding-y; - height: $pagination-secondary-height-sm; + padding: 0 var(--pgn-pagination-padding-y-base); + height: var(--pgn-pagination-secondary-height-sm); } } diff --git a/src/Pagination/_variables.scss b/src/Pagination/_variables.scss index 1fc4c09c41..5e69041cf4 100644 --- a/src/Pagination/_variables.scss +++ b/src/Pagination/_variables.scss @@ -21,32 +21,32 @@ $pagination-toggle-border-sm: .25rem !default; $pagination-secondary-height: 2.75rem !default; $pagination-secondary-height-sm: 2.25rem !default; -$pagination-color: $link-color !default; -$pagination-color-inverse: $white !default; -$pagination-bg: $white !default; -$pagination-border-width: $border-width !default; +$pagination-color: var(--pgn-link-color) !default; +$pagination-color-inverse: var(--pgn-color-white) !default; +$pagination-bg: var(--pgn-color-white) !default; +$pagination-border-width: var(--pgn-border-width) !default; $pagination-border-color: theme-color("gray", "border") !default; -$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; +$pagination-focus-box-shadow: var(--pgn-core-input-btn-focus-box-shadow) !default; $pagination-focus-outline: 0 !default; $pagination-focus-border-width: .125rem !default; -$pagination-focus-color: $primary-500 !default; -$pagination-focus-color-text: $black !default; +$pagination-focus-color: var(--pgn-color-primary-500) !default; +$pagination-focus-color-text: var(--pgn-color-black) !default; -$pagination-hover-color: $link-hover-color !default; +$pagination-hover-color: var(--pgn-link-hover-color) !default; $pagination-hover-bg: theme-color("gray", "background") !default; $pagination-hover-border-color: theme-color("gray", "border") !default; -$pagination-active-color: $component-active-color !default; -$pagination-active-bg: $component-active-bg !default; +$pagination-active-color: var(--pgn-component-active-color) !default; +$pagination-active-bg: var(--pgn-component-active-bg) !default; $pagination-active-border-color: $pagination-active-bg !default; $pagination-disabled-color: theme-color("gray", "light-text") !default; -$pagination-disabled-bg: $white !default; +$pagination-disabled-bg: var(--pgn-color-white) !default; $pagination-disabled-border-color: theme-color("gray", "disabled-border") !default; -$pagination-border-radius-sm: $border-radius-sm !default; -$pagination-border-radius-lg: $border-radius-lg !default; +$pagination-border-radius-sm: var(--pgn-border-radius-sm) !default; +$pagination-border-radius-lg: var(--pgn-border-radius-lg) !default; $pagination-reduced-dropdown-max-height: 60vh !default; $pagination-reduced-dropdown-min-width: 6rem !default; diff --git a/src/Popover/Popover.scss b/src/Popover/Popover.scss index 5da744d740..462cd66576 100644 --- a/src/Popover/Popover.scss +++ b/src/Popover/Popover.scss @@ -2,53 +2,53 @@ @import "~bootstrap/scss/popover"; .popover { - filter: $popover-box-shadow; + filter: var(--pgn-popover-box-shadow); .popover-header { display: flex; align-items: center; - font-size: $h5-font-size; + font-size: var(--pgn-font-size-h5); } .pgn__icon { - margin-inline-end: $popover-icon-margin-right; - height: $popover-icon-height; - width: $popover-icon-width; + margin-inline-end: var(--pgn-popover-icon-margin-right); + height: var(--pgn-popover-icon-height); + width: var(--pgn-popover-icon-width); } } .popover-success { - background: $popover-success-bg; + background: var(--pgn-popover-success-bg); .popover-header { - background: $popover-success-bg; + background: var(--pgn-popover-success-bg); } .pgn__icon { - color: $popover-success-icon-color; + color: var(--pgn-popover-success-icon-color); } } .popover-warning { - background: $popover-warning-bg; + background: var(--pgn-popover-warning-bg); .popover-header { - background: $popover-warning-bg; + background: var(--pgn-popover-warning-bg); } .pgn__icon { - color: $popover-warning-icon-color; + color: var(--pgn-popover-warning-icon-color); } } .popover-danger { - background: $popover-danger-bg; + background: var(--pgn-popover-danger-bg); .popover-header { - background: $popover-danger-bg; + background: var(--pgn-popover-danger-bg); } .pgn__icon { - color: $popover-danger-icon-color; + color: var(--pgn-popover-danger-icon-color); } } diff --git a/src/Popover/_variables.scss b/src/Popover/_variables.scss index 869f00f212..411e090192 100644 --- a/src/Popover/_variables.scss +++ b/src/Popover/_variables.scss @@ -1,11 +1,11 @@ // Popovers -$popover-font-size: $font-size-sm !default; -$popover-bg: $white !default; +$popover-font-size: var(--pgn-font-size-sm) !default; +$popover-bg: var(--pgn-color-white) !default; $popover-max-width: 480px !default; -$popover-border-width: $border-width !default; +$popover-border-width: var(--pgn-border-width) !default; $popover-border-color: rgba($black, .2) !default; -$popover-border-radius: $border-radius-sm !default; +$popover-border-radius: var(--pgn-border-radius-sm) !default; $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; $popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default; @@ -14,11 +14,11 @@ $popover-icon-height: 1rem; $popover-icon-width: 1rem; $popover-header-bg: $white !default; -$popover-header-color: $headings-color !default; +$popover-header-color: var(--pgn-headings-color) !default; $popover-header-padding-y: .5rem !default; $popover-header-padding-x: 1rem !default; -$popover-body-color: $body-color !default; +$popover-body-color: var(--pgn-body-color) !default; $popover-body-padding-y: $popover-header-padding-y !default; $popover-body-padding-x: $popover-header-padding-x !default; @@ -28,9 +28,9 @@ $popover-arrow-color: $popover-bg !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; -$popover-success-bg: $success-100 !default; -$popover-success-icon-color: $success-500 !default; -$popover-warning-bg: $warning-100 !default; -$popover-warning-icon-color: $warning-500 !default; -$popover-danger-bg: $danger-100 !default; -$popover-danger-icon-color: $danger-500 !default; +$popover-success-bg: var(--pgn-color-success-100) !default; +$popover-success-icon-color: var(--pgn-color-success-500) !default; +$popover-warning-bg: var(--pgn-color-warning-100) !default; +$popover-warning-icon-color: var(--pgn-color-warning-500) !default; +$popover-danger-bg: var(--pgn-color-danger-100) !default; +$popover-danger-icon-color: var(--pgn-color-danger-500) !default; diff --git a/src/Popover/popover-bootstrap.scss b/src/Popover/popover-bootstrap.scss new file mode 100644 index 0000000000..10c2205f00 --- /dev/null +++ b/src/Popover/popover-bootstrap.scss @@ -0,0 +1,192 @@ +.popover { + position: absolute; + top: 0; + left: 0; + z-index: var(--pgn-zindex-popover); + display: block; + max-width: var(--pgn-popover-max-width); + + @include reset-text(); + @include font-size(var(--pgn-popover-font-size)); + + word-wrap: break-word; + background-color: var(--pgn-popover-bg); + background-clip: padding-box; + border: var(--pgn-popover-border-border) solid var(--pgn-popover-border-color); + + @include border-radius(var(--pgn-popover-border-radius)); + @include box-shadow(var(--pgn-popover-box-shadow)); + + .arrow { + position: absolute; + display: block; + width: var(--pgn-popover-arrow-width); + height: var(--pgn-popover-arrow-height); + margin: 0 var(--pgn-popover-border-radius); + + &::before, + &::after { + position: absolute; + display: block; + content: ""; + border-color: transparent; + border-style: solid; + } + } +} + +.bs-popover-top { + margin-bottom: var(--pgn-popover-arrow-height); + + > .arrow { + bottom: subtract(calc(var(--pgn-popover-arrow-height) * -1), var(--pgn-popover-border-border)); + + &::before { + bottom: 0; + border-width: var(--pgn-popover-arrow-height) (var(--pgn-popover-arrow-width) * .5) 0; + border-top-color: $popover-arrow-outer-color; + } + + &::after { + bottom: var(--pgn-popover-border-border); + border-width: var(--pgn-popover-arrow-height) (var(--pgn-popover-arrow-width) * .5) 0; + border-top-color: var(--pgn-popover-arrow-color); + } + } +} + +.bs-popover-right { + margin-left: var(--pgn-popover-arrow-height); + + > .arrow { + left: subtract(calc(var(--pgn-popover-arrow-height) * -1), var(--pgn-popover-border-border)); + width: var(--pgn-popover-arrow-height); + height: var(--pgn-popover-arrow-width); + margin: var(--pgn-popover-border-radius) 0; + + &::before { + left: 0; + border-width: + ( + var(--pgn-popover-arrow-width) * .5) var(--pgn-popover-arrow-height) (var(--pgn-popover-arrow-width) * .5) 0; + border-right-color: $popover-arrow-outer-color; + } + + &::after { + left: var(--pgn-popover-border-border); + border-width: + ( + var(--pgn-popover-arrow-width) * .5) var(--pgn-popover-arrow-height) (var(--pgn-popover-arrow-width) * .5) 0; + border-right-color: var(--pgn-popover-arrow-color); + } + } +} + +.bs-popover-bottom { + margin-top: var(--pgn-popover-arrow-height); + + > .arrow { + top: subtract(calc(var(--pgn-popover-arrow-height) * -1), var(--pgn-popover-border-border)); + + &::before { + top: 0; + border-width: + 0 ( + var(--pgn-popover-arrow-width) * .5) var(--pgn-popover-arrow-height) (var(--pgn-popover-arrow-width) * .5); + border-bottom-color: $popover-arrow-outer-color; + } + + &::after { + top: var(--pgn-popover-border-border); + border-width: + 0 ( + var(--pgn-popover-arrow-width) * .5) var(--pgn-popover-arrow-height) (var(--pgn-popover-arrow-width) * .5); + border-bottom-color: var(--pgn-popover-arrow-color); + } + } + + // This will remove the popover-header's border just below the arrow + .popover-header::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: var(--pgn-popover-arrow-width); + margin-left: calc(var(--pgn-popover-arrow-width) * -.5); + content: ""; + border-bottom: var(--pgn-popover-border-border) solid var(--pgn-popover-header-bg); + } +} + +.bs-popover-left { + margin-right: var(--pgn-popover-arrow-height); + + > .arrow { + right: subtract(calc(var(--pgn-popover-arrow-height) * -1), var(--pgn-popover-border-border)); + width: var(--pgn-popover-arrow-height); + height: var(--pgn-popover-arrow-width); + margin: var(--pgn-popover-border-radius) 0; + + &::before { + right: 0; + border-width: + ( + var(--pgn-popover-arrow-width) * .5) 0 (var(--pgn-popover-arrow-width) * .5) var(--pgn-popover-arrow-height); + border-left-color: $popover-arrow-outer-color; + } + + &::after { + right: var(--pgn-popover-border-border); + border-width: + ( + var(--pgn-popover-arrow-width) * .5) 0 (var(--pgn-popover-arrow-width) * .5) var(--pgn-popover-arrow-height); + border-left-color: var(--pgn-popover-arrow-color); + } + } +} + +.bs-popover-auto { + &[x-placement^="top"] { + /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ + @extend .bs-popover-top; + } + + &[x-placement^="right"] { + /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ + @extend .bs-popover-right; + } + + &[x-placement^="bottom"] { + /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ + @extend .bs-popover-bottom; + } + + &[x-placement^="left"] { + /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ + @extend .bs-popover-left; + } +} + + +// Offset the popover to account for the popover arrow +.popover-header { + padding: var(--pgn-popover-header-padding-y) var(--pgn-popover-header-padding-x); + margin-bottom: 0; + + @include font-size(var(--pgn-font-size-base)); + + color: var(--pgn-popover-header-color); + background-color: var(--pgn-popover-header-bg); + border-bottom: var(--pgn-popover-border-border) solid darken(var(--pgn-popover-header-bg), 5%); + + @include border-top-radius($popover-inner-border-radius); + + &:empty { + display: none; + } +} + +.popover-body { + padding: var(--pgn-popover-body-padding-y) var(--pgn-popover-body-padding-x); + color: var(--pgn-popover-body-color); +} diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss index 7c4d370c19..38784ec8cc 100644 --- a/src/ProductTour/Checkpoint.scss +++ b/src/ProductTour/Checkpoint.scss @@ -1,18 +1,20 @@ @import "variables"; -$checkpoint-arrow-top-color: solid $checkpoint-arrow-width $checkpoint-border-color; -$checkpoint-arrow-default-color: solid $checkpoint-arrow-width $checkpoint-background-color; -$checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; +$checkpoint-arrow-top-color: solid var(--pgn-product-tour-checkpoint-width-arrow) + var(--pgn-product-tour-checkpoint-color-border); +$checkpoint-arrow-default-color: solid var(--pgn-product-tour-checkpoint-width-arrow) + var(--pgn-product-tour-checkpoint-color-background); +$checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arrow) transparent; .pgn__checkpoint { position: absolute; - background: $checkpoint-background-color; - border-top: $checkpoint-border-width solid $checkpoint-border-color; - border-radius: $border-radius; + background: var(--pgn-product-tour-checkpoint-color-background); + border-top: var(--pgn-product-tour-checkpoint-width-border) solid var(--pgn-product-tour-checkpoint-color-border); + border-radius: var(--pgn-border-radius-base); padding: map_get($spacers, 4); box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3); - z-index: $checkpoint-z-index; - max-width: $checkpoint-max-width; + z-index: var(--pgn-product-tour-checkpoint-zindex); + max-width: var(--pgn-product-tour-checkpoint-width-max); @media (max-width: map-get($grid-breakpoints, "md")) { min-width: 90%; @@ -52,11 +54,11 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; border-radius: 50%; &.pgn__checkpoint-breadcrumb_active { - background: $checkpoint-breadcrumb-color; + background: var(--pgn-product-tour-checkpoint-color-breadcrumb); } &.pgn__checkpoint-breadcrumb_inactive { - border: 1px solid $checkpoint-breadcrumb-color; + border: 1px solid var(--pgn-product-tour-checkpoint-color-breadcrumb); background: transparent; } @@ -80,7 +82,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; } .pgn__checkpoint-body { - color: $checkpoint-body-color; + color: var(--pgn-product-tour-checkpoint-color-body); margin-bottom: map_get($spacers, 3\.5); text-align: start; } @@ -92,25 +94,25 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; } #pgn__checkpoint-title { - font-size: $h3-font-size; + font-size: var(--pgn-font-size-h3); margin-inline-end: map_get($spacers, 2\.5); margin-bottom: 0; } } .pgn__checkpoint[data-popper-placement^="top"] > #pgn__checkpoint-arrow { - left: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement + left: calc(var(--pgn-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement bottom: 1px; [dir="rtl"] & { - left: $checkpoint-arrow-width !important; + left: var(--pgn-product-tour-checkpoint-width-arrow) !important; } &::after { - border-bottom: $checkpoint-arrow-transparent; - border-top: $checkpoint-arrow-default-color; - border-left: $checkpoint-arrow-transparent; - border-right: $checkpoint-arrow-transparent; + border-bottom: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-top: var(--pgn-product-tour-checkpoint-arrow-color-default); + border-left: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-right: var(--pgn-product-tour-checkpoint-arrow-transparent); filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1)); -webkit-filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1)); } @@ -118,39 +120,39 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; .pgn__checkpoint[data-popper-placement^="bottom"] > #pgn__checkpoint-arrow { top: -36px; - left: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement + left: calc(var(--pgn-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement &::after { - border-bottom: $checkpoint-arrow-top-color; - border-top: $checkpoint-arrow-transparent; - border-left: $checkpoint-arrow-transparent; - border-right: $checkpoint-arrow-transparent; + border-bottom: var(--pgn-product-tour-checkpoint-arrow-color-top); + border-top: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-left: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-right: var(--pgn-product-tour-checkpoint-arrow-transparent); } } .pgn__checkpoint[data-popper-placement^="left"] > #pgn__checkpoint-arrow { - top: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement + top: calc(var(--pgn-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement right: 1px; &::after { - border-bottom: $checkpoint-arrow-transparent; - border-top: $checkpoint-arrow-transparent; - border-left: $checkpoint-arrow-default-color; - border-right: $checkpoint-arrow-transparent; + border-bottom: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-top: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-left: var(--pgn-product-tour-checkpoint-arrow-color-default); + border-right: var(--pgn-product-tour-checkpoint-arrow-transparent); filter: drop-shadow(3px 1px 2px rgba(0, 0, 0, .1)); } } .pgn__checkpoint[data-popper-placement^="right"] > #pgn__checkpoint-arrow { - top: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement + top: calc(var(--pgn-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement left: 1px; &::after { - left: -2 * $checkpoint-arrow-width; - border-bottom: $checkpoint-arrow-transparent; - border-top: $checkpoint-arrow-transparent; - border-left: $checkpoint-arrow-transparent; - border-right: $checkpoint-arrow-default-color; + left: calc(-2 * var(--pgn-product-tour-checkpoint-width-arrow)); + border-bottom: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-top: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-left: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-right: var(--pgn-product-tour-checkpoint-arrow-color-default); filter: drop-shadow(-3px 1px 2px rgba(0, 0, 0, .1)); } } diff --git a/src/ProductTour/_variables.scss b/src/ProductTour/_variables.scss index 73635c8120..543e3dfdd3 100644 --- a/src/ProductTour/_variables.scss +++ b/src/ProductTour/_variables.scss @@ -1,13 +1,13 @@ // Checkpoints -$checkpoint-background-color: $light-300 !default; +$checkpoint-background-color: var(--pgn-color-light-300) !default; -$checkpoint-body-color: $gray-700; +$checkpoint-body-color: var(--pgn-color-gray-700); -$checkpoint-border-color: $brand !default; +$checkpoint-border-color: var(--pgn-color-brand-base) !default; $checkpoint-border-width: 8px !default; -$checkpoint-breadcrumb-color: $primary !default; +$checkpoint-breadcrumb-color: var(--pgn-color-primary-base) !default; $checkpoint-arrow-width: 15px !default; $checkpoint-max-width: 480px !default; diff --git a/src/ProgressBar/ProgressBar.scss b/src/ProgressBar/ProgressBar.scss index 5b3532d62f..4ab59b44a1 100644 --- a/src/ProgressBar/ProgressBar.scss +++ b/src/ProgressBar/ProgressBar.scss @@ -2,11 +2,11 @@ @import "~bootstrap/scss/progress"; .progress { - border: $progress-bar-border-width solid $progress-bar-border-color; + border: var(--pgn-progress-bar-border-width) solid var(--pgn-progress-bar-border-color); } .progress-bar { - background-color: $progress-bar-bg; + background-color: var(--pgn-progress-bar-bar-bg-base); } .pgn__progress-annotated { @@ -16,12 +16,12 @@ .progress { overflow: visible; - background-color: $light-300; - height: $annotated-progress-height; + background-color: var(--pgn-color-light-300); + height: var(--pgn-progress-bar-height-annotated); border: none; .progress-bar { - background-color: $annotated-progress-bar-bg; + background-color: var(--pgn-progress-bar-bar-bg-annotated); overflow: visible; position: relative; } @@ -30,17 +30,17 @@ .pgn__progress-tick--black::after { content: ""; position: absolute; - height: $annotated-progress-height; + height: var(--pgn-progress-bar-height-annotated); width: 1px; right: 0; } .pgn__progress-tick--white::after { - background: $light-300; + background: var(--pgn-color-light-300); } .pgn__progress-tick--black::after { - background: $primary-500; + background: var(--pgn-color-primary-500); } @each $name, $color in $progress-colors { @@ -52,11 +52,12 @@ display: block; background: $color; position: absolute; - top: -(calc($progress-threshold-circle / 2) - calc($annotated-progress-height / 2)); - right: -(calc($progress-threshold-circle / 2)); - width: $progress-threshold-circle; - height: $progress-threshold-circle; - border-radius: calc($progress-threshold-circle / 2); + /* stylelint-disable max-line-length */ + top: calc(var(--pgn-progress-bar-threshold-circle) / 2 - var(--pgn-progress-bar-height-annotated) / 2); + right: calc(var(--pgn-progress-bar-threshold-circle) / -2); + width: var(--pgn-progress-bar-threshold-circle); + height: var(--pgn-progress-bar-threshold-circle); + border-radius: calc(var(--pgn-progress-bar-threshold-circle) / 2); z-index: 1; } } @@ -67,9 +68,9 @@ .progress::after { position: absolute; content: ""; - height: $annotated-progress-height; + height: var(--pgn-progress-bar-height-annotated); width: 1px; - background: $primary-500; + background: var(--pgn-color-primary-500); } .progress::after { @@ -83,7 +84,7 @@ .pgn__progress-hint { box-sizing: border-box; - padding: 0 $progress-hint-annotation-gap; - font-size: $small-font-size; + padding: 0 var(--pgn-progress-bar-hint-annotation-gap); + font-size: var(--pgn-font-size-small-base); } } diff --git a/src/ProgressBar/_variables.scss b/src/ProgressBar/_variables.scss index cd0d49b4e9..86348f7531 100644 --- a/src/ProgressBar/_variables.scss +++ b/src/ProgressBar/_variables.scss @@ -2,22 +2,22 @@ $progress-height: 1rem !default; $annotated-progress-height: .3125rem !default; -$progress-font-size: $font-size-base * .75 !default; +$progress-font-size: calc(var(--pgn-font-size-base) * .75) !default; $progress-bg: transparent !default; $progress-border-radius: 0 !default; $progress-box-shadow: none !default; -$progress-bar-color: $white !default; +$progress-bar-color: var(--pgn-color-white) !default; $progress-bar-bg: theme-color("accent-a") !default; $annotated-progress-bar-bg: theme-color("dark") !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width .6s ease !default; $progress-bar-border-width: 1px !default; -$progress-bar-border-color: $gray-500 !default; +$progress-bar-border-color: var(--pgn-color-gray-500) !default; $progress-threshold-circle: .5625rem !default; $progress-hint-annotation-gap: .5rem !default; $progress-colors: ( - "dark": $primary-500, - "success": $success-500, - "error": $danger-500, - "warning": $accent-b, + "dark": var(--pgn-color-primary-500), + "success": var(--pgn-color-success-500), + "error": var(--pgn-color-danger-500), + "warning": var(--pgn-color-accent-b), ) !default; diff --git a/src/SearchField/SearchField.scss b/src/SearchField/SearchField.scss index e07d39aa64..2e48dcbeaa 100644 --- a/src/SearchField/SearchField.scss +++ b/src/SearchField/SearchField.scss @@ -1,17 +1,17 @@ @import "variables"; .pgn__searchfield { - transition: $input-transition; - border: $search-border-width solid $search-border-color; + transition: var(--pgn-form-input-transition); + border: var(--pgn-search-field-border-width-base) solid var(--pgn-search-field-border-color-base); .btn:focus-visible { outline: none; position: relative; - transition: $input-transition; + transition: var(--pgn-form-input-transition); &::after { content: ""; - border: $search-border-focus-width double $search-border-focus-color; + border: var(--pgn-search-field-border-width-focus) double var(--pgn-search-field-border-color-focus); position: absolute; width: 100%; height: 100%; @@ -20,7 +20,7 @@ &.disabled, &:disabled { - opacity: $search-disabled-opacity; + opacity: var(--pgn-search-field-disabled-opacity); pointer-events: none; } @@ -29,26 +29,26 @@ &::after { content: ""; - border: $search-border-focus-width double $search-border-focus-color; + border: var(--pgn-search-field-border-width-focus) double var(--pgn-search-field-border-color-focus); position: absolute; width: 100%; height: 100%; } .pgn__searchfield_wrapper { - box-shadow: 0 0 0 $search-border-width $search-border-color-interaction; + box-shadow: 0 0 0 var(--pgn-search-field-border-width-base) var(--pgn-search-field-border-color-interaction); } } &:hover, &:active { - border-color: $search-border-color-interaction; + border-color: var(--pgn-search-field-border-color-interaction); } .form-control { border: none; - border-radius: $search-border-radius; - height: $input-height-search; + border-radius: var(--pgn-search-field-border-radius); + height: var(--pgn-search-field-input-height-search); &:focus { box-shadow: none; @@ -100,7 +100,7 @@ &::after { content: ""; - border: $search-border-focus-width double $search-border-focus-color; + border: var(--pgn-search-field-border-width-focus) double var(--pgn-search-field-border-color-focus); position: absolute; width: 100%; height: 100%; @@ -121,16 +121,16 @@ display: flex; align-items: center; width: 100%; - border: $search-border-width solid $search-border-color; + border: var(--pgn-search-field-border-width-base) solid var(--pgn-search-field-border-color-base); &:hover, &:active { - border-color: $search-border-color-interaction; + border-color: var(--pgn-search-field-border-color-interaction); } } } .pgn__searchfield__button.btn[type="submit"] { border-radius: 0; - margin-inline-start: $search-button-margin; + margin-inline-start: var(--pgn-search-field-button-margin); } diff --git a/src/SearchField/_variables.scss b/src/SearchField/_variables.scss index ebbdad6ae5..67948ad3c1 100644 --- a/src/SearchField/_variables.scss +++ b/src/SearchField/_variables.scss @@ -1,15 +1,15 @@ $search-btn-variants: ( - "light": $primary-500, - "dark": $brand-500, + "light": var(--pgn-color-primary-500), + "dark": var(--pgn-color-brand-500), ); $search-border-radius: 0 !default; $search-line-height: 1.5rem !default; -$search-border-color: $gray-500 !default; -$search-border-color-interaction: $black !default; +$search-border-color: var(--pgn-color-gray-500) !default; +$search-border-color-interaction: var(--pgn-color-black) !default; $search-border-width: .0625rem !default; $search-border-width-interaction: .125rem !default; $search-disabled-opacity: .3 !default; $search-button-margin: .5rem !default; -$input-height-search: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default; -$search-border-focus-color: $black !default; +$input-height-search: calc(($input-line-height * 1em) + ($input-padding-y * 2)) !default; +$search-border-focus-color: var(--pgn-color-black) !default; $search-border-focus-width: .3125rem !default; diff --git a/src/SelectableBox/SelectableBox.scss b/src/SelectableBox/SelectableBox.scss index 2b3cac4ac3..aef50cafce 100644 --- a/src/SelectableBox/SelectableBox.scss +++ b/src/SelectableBox/SelectableBox.scss @@ -3,7 +3,7 @@ .pgn__selectable_box-set { display: grid; grid-auto-rows: 1fr; - grid-gap: $selectable-box-space; + grid-gap: var(--pgn-selectable-box-box-space); @for $i from $min-cols-number through $max-cols-number { &.pgn__selectable_box-set--#{$i} { @@ -19,20 +19,20 @@ .pgn__selectable_box { position: relative; height: 100%; - padding: $selectable-box-padding; - box-shadow: $level-1-box-shadow; - border-radius: $selectable-box-border-radius; + padding: var(--pgn-selectable-box-padding); + box-shadow: var(--pgn-box-shadow-level-1); + border-radius: var(--pgn-selectable-box-border-radius); text-align: start; &:focus-visible { - outline: 1px solid $primary-700; + outline: 1px solid var(--pgn-color-primary-700); } .pgn__form-radio, .pgn__form-checkbox { position: absolute; - top: $selectable-box-padding; - inset-inline-end: $selectable-box-padding; + top: var(--pgn-selectable-box-padding); + inset-inline-end: var(--pgn-selectable-box-padding); input { margin-inline-end: 0; @@ -45,9 +45,9 @@ } .pgn__selectable_box-active { - outline: 2px solid $primary-500; + outline: 2px solid var(--pgn-color-primary-500); } .pgn__selectable_box-invalid { - outline: 2px solid $danger-300; + outline: 2px solid var(--pgn-color-danger-300); } diff --git a/src/Sheet/Sheet.scss b/src/Sheet/Sheet.scss index e5f5754440..4d2b3d9c8e 100644 --- a/src/Sheet/Sheet.scss +++ b/src/Sheet/Sheet.scss @@ -10,7 +10,7 @@ display: none; } - z-index: $zindex-sheet-backdrop; + z-index: var(--pgn-www-zindex-sheet-backdrop); } %component-left { @@ -35,11 +35,11 @@ position: fixed; padding: 1.25rem; background-color: white; - z-index: $zindex-sheet; + z-index: var(--pgn-www-zindex-sheet); &.pgn__sheet__dark { - background-color: $dark-500; - color: $light-300; + background-color: var(--pgn-color-dark-500); + color: var(--pgn-color-light-300); } &.bottom { diff --git a/src/Stack/Stack.scss b/src/Stack/Stack.scss index 52ed5b134d..fd38c3a0a0 100644 --- a/src/Stack/Stack.scss +++ b/src/Stack/Stack.scss @@ -4,7 +4,7 @@ .pgn__hstack { display: flex; align-self: stretch; - gap: $stack-gap; + gap: var(--pgn-stack-gap); @each $level, $space in $spacers { &.pgn__stack-gap--#{$level} { diff --git a/src/Stepper/Stepper.scss b/src/Stepper/Stepper.scss index 720684b4df..a5d754add7 100644 --- a/src/Stepper/Stepper.scss +++ b/src/Stepper/Stepper.scss @@ -12,7 +12,7 @@ display: flex; justify-content: center; align-items: center; - background: $white; + background: var(--pgn-color-white); padding: .75rem 1rem; min-height: 5.13rem; } @@ -20,7 +20,7 @@ .pgn__stepper-header-step { display: flex; align-items: center; - color: $primary; + color: var(--pgn-color-primary-base); flex-shrink: 1; min-width: 0; @@ -41,25 +41,25 @@ } .pgn__stepper-header-step-description { - font-size: $x-small-font-size; + font-size: var(--pgn-font-size-small-x); } &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step { - color: $gray-500; + color: var(--pgn-color-gray-500); } &.pgn__stepper-header-step-has-error { .pgn__bubble { background: transparent; - box-shadow: inset 0 0 0 3px $danger; + box-shadow: inset 0 0 0 3px var(--pgn-color-danger-base); * { - color: $danger; + color: var(--pgn-color-danger-base); } } .pgn__stepper-header-step-description { - color: $danger; + color: var(--pgn-color-danger-base); } } } @@ -67,7 +67,7 @@ .pgn__stepper-header-line { display: block; height: 1px; - background: $light; + background: var(--pgn-color-light-base); flex-basis: 80px; margin: 0 .5rem; } diff --git a/src/Sticky/Sticky.scss b/src/Sticky/Sticky.scss index c4029a9323..b7a6fb9f83 100644 --- a/src/Sticky/Sticky.scss +++ b/src/Sticky/Sticky.scss @@ -7,7 +7,7 @@ &.pgn__sticky-top { align-self: self-start; - top: $sticky-offset; + top: var(--pgn-sticky-offset); @each $level, $offset in $spacers { &.pgn__sticky-offset--#{$level} { @@ -16,13 +16,13 @@ } &.pgn__sticky-shadow { - box-shadow: $sticky-shadow-bottom; + box-shadow: var(--pgn-sticky-shadow-bottom); } } &.pgn__sticky-bottom { align-self: self-end; - bottom: $sticky-offset; + bottom: var(--pgn-sticky-offset); @each $level, $offset in $spacers { &.pgn__sticky-offset--#{$level} { @@ -31,7 +31,7 @@ } &.pgn__sticky-shadow { - box-shadow: $sticky-shadow-top; + box-shadow: var(--pgn-sticky-shadow-top); } } } diff --git a/src/Table/Table.scss b/src/Table/Table.scss index 9ae065437f..6a638fd46b 100644 --- a/src/Table/Table.scss +++ b/src/Table/Table.scss @@ -1,9 +1,9 @@ @import "variables"; -@import "~bootstrap/scss/tables"; +@import "tables-bootstrap"; .btn-header { padding: 0; - font-weight: $font-weight-bold; + font-weight: var(--pgn-font-weight-bold); } .table th, diff --git a/src/Table/_variables.scss b/src/Table/_variables.scss index a494d0a47a..a3b755f44d 100644 --- a/src/Table/_variables.scss +++ b/src/Table/_variables.scss @@ -5,30 +5,30 @@ $table-cell-padding: .75rem !default; $table-cell-padding-sm: .3rem !default; -$table-color: $body-color !default; +$table-color: var(--pgn-body-color) !default; $table-bg: null !default; -$table-accent-bg: rgba($black, .05) !default; +$table-accent-bg: rgba(var(--pgn-color-black), .05) !default; $table-hover-color: $table-color !default; $table-hover-bg: rgba($black, .075) !default; $table-active-bg: $table-hover-bg !default; -$table-border-width: $border-width !default; -$table-border-color: $border-color !default; +$table-border-width: var(--pgn-border-width) !default; +$table-border-color: var(--pgn-border-color) !default; $table-head-bg: theme-color("gray", "background") !default; $table-head-color: theme-color("gray", "text") !default; -$table-dark-color: $white !default; +$table-dark-color: var(--pgn-color-white) !default; $table-dark-bg: theme-color("gray", "hover") !default; -$table-dark-accent-bg: rgba($white, .05) !default; +$table-dark-accent-bg: rgba(var(--pgn-color-white), .05) !default; $table-dark-hover-color: $table-dark-color !default; -$table-dark-hover-bg: rgba($white, .075) !default; +$table-dark-hover-bg: rgba(var(--pgn-color-white), .075) !default; $table-dark-border-color: lighten($table-dark-bg, 7.5%) !default; -$table-dark-color: $white !default; +$table-dark-color: var(--pgn-color-white) !default; $table-striped-order: odd !default; -$table-caption-color: $text-muted !default; +$table-caption-color: var(--pgn-text-muted) !default; $table-bg-level: -9 !default; $table-border-level: -6 !default; diff --git a/src/Table/tables-bootstrap.scss b/src/Table/tables-bootstrap.scss new file mode 100644 index 0000000000..89844bf41f --- /dev/null +++ b/src/Table/tables-bootstrap.scss @@ -0,0 +1,168 @@ +.table { + width: 100%; + margin-bottom: var(--pgn-core-spacer); + color: var(--pgn-table-color-base); + background-color: var(--pgn-table-bg-base); + + th, + td { + padding: var(--pgn-table-cell-padding-base); + vertical-align: top; + border-top: var(--pgn-table-border-width) solid var(--pgn-table-color-border); + } + + thead th { + vertical-align: bottom; + border-bottom: calc(2 * var(--pgn-table-border-width)) solid var(--pgn-table-color-border); + } + + tbody + tbody { + border-top: calc(2 * var(--pgn-table-border-width)) solid var(--pgn-table-color-border); + } + + .thead-dark { + th { + color: var(--pgn-table-dark-color-base); + background-color: var(--pgn-table-dark-bg-base); + border-color: var(--pgn-table-dark-color-border); + } + } + + .thead-light { + th { + color: var(--pgn-table-color-head); + background-color: var(--pgn-table-bg-head); + border-color: var(--pgn-table-color-border); + } + } +} + +// Condensed table w/ half padding +.table-sm { + th, + td { + padding: var(--pgn-table-cell-padding-sm); + } +} + +// Border versions +// +// Add or remove borders all around the table and between all the columns. +.table-bordered { + border: var(--pgn-table-border-width) solid var(--pgn-table-color-border); + + th, + td { + border: var(--pgn-table-border-width) solid var(--pgn-table-color-border); + } + + thead { + th, + td { + border-bottom-width: calc(2 * var(--pgn-table-border-width)); + } + } +} + +.table-borderless { + th, + td, + thead th, + tbody + tbody { + border: 0; + } +} + +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) +.table-striped { + tbody tr:nth-of-type(#{var(--pgn-table-striped-order)}) { + background-color: var(--pgn-table-bg-accent); + } +} + +// Hover effect +// +// Placed here since it has to come after the potential zebra striping +.table-hover { + tbody tr { + @include hover() { + color: var(--pgn-table-color-hover); + background-color: var(--pgn-table-bg-hover); + } + } +} + + +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. +@each $color, $value in $theme-colors { + @include table-row-variant( + $color, + theme-color-level($color, $table-bg-level), + theme-color-level($color, $table-border-level)); +} + +@include table-row-variant(active, $table-active-bg); + + +// Dark styles +// +// Same table markup, but inverted color scheme: dark background and light text. +.table-dark { + color: var(--pgn-table-dark-color-base); + background-color: var(--pgn-table-dark-bg-base); + + th, + td, + thead th { + border-color: var(--pgn-table-dark-color-border); + } + + &.table-bordered { + border: 0; + } + + &.table-striped { + tbody tr:nth-of-type(#{var(--pgn-table-striped-order)}) { + background-color: var(--pgn-table-dark-bg-accent); + } + } + + &.table-hover { + tbody tr { + @include hover() { + color: var(--pgn-table-dark-color-hover); + background-color: var(--pgn-table-dark-bg-hover); + } + } + } +} + + +// Responsive tables +// +// Generate series of `.table-responsive-*` classes for configuring the screen +// size of where your table will overflow. +.table-responsive { + @each $breakpoint in map-keys($grid-breakpoints) { + $next: breakpoint-next($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($next, $grid-breakpoints); + + &#{$infix} { + @include media-breakpoint-down($breakpoint) { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + + > .table-bordered { + border: 0; + } + } + } + } +} diff --git a/src/Tabs/Tabs.scss b/src/Tabs/Tabs.scss index 48214e7d0b..4ea9c1a25c 100644 --- a/src/Tabs/Tabs.scss +++ b/src/Tabs/Tabs.scss @@ -11,9 +11,9 @@ position: absolute; top: 0; right: 0; - min-height: $tab-notification-height; - min-width: $tab-notification-width; - font-size: $tab-notification-font-size; + min-height: var(--pgn-tabs-notification-height); + min-width: var(--pgn-tabs-notification-width); + font-size: var(--pgn-tabs-notification-font-size); } } diff --git a/src/Tabs/_variables.scss b/src/Tabs/_variables.scss index 1aa61d194a..9d58323477 100644 --- a/src/Tabs/_variables.scss +++ b/src/Tabs/_variables.scss @@ -1,3 +1,3 @@ $tab-notification-height: 1rem !default; $tab-notification-width: 1rem !default; -$tab-notification-font-size: $font-size-xs !default; +$tab-notification-font-size: var(--pgn-font-size-xs) !default; diff --git a/src/Toast/Toast.scss b/src/Toast/Toast.scss index 58658f0e9c..8336935d75 100644 --- a/src/Toast/Toast.scss +++ b/src/Toast/Toast.scss @@ -2,12 +2,12 @@ @import "~bootstrap/scss/toasts"; .toast { - background-color: $toast-background-color; - box-shadow: $toast-box-shadow; + background-color: var(--pgn-toast-color-background); + box-shadow: var(--pgn-toast-box-shadow); margin: 0; padding: 1rem; position: relative; - border-radius: $toast-border-radius; + border-radius: var(--pgn-toast-border-radius); z-index: 2; &.show { @@ -32,7 +32,7 @@ padding: 0; p { - font-size: $small-font-size; + font-size: var(--pgn-font-size-small-base); margin: 0; padding-right: .75rem; } @@ -47,7 +47,7 @@ } @media only screen and (min-width: 768px) { - min-width: $toast-max-width; - max-width: $toast-max-width; + min-width: var(--pgn-toast-max-width); + max-width: var(--pgn-toast-max-width); } } diff --git a/src/Toast/ToastContainer.scss b/src/Toast/ToastContainer.scss index b29ba0e5dc..4d652d1b1f 100644 --- a/src/Toast/ToastContainer.scss +++ b/src/Toast/ToastContainer.scss @@ -1,24 +1,24 @@ @import "variables"; .toast-container { - bottom: $toast-container-gutter-lg; - left: $toast-container-gutter-lg; + bottom: var(--pgn-toast-container-gutter-lg); + left: var(--pgn-toast-container-gutter-lg); position: fixed; z-index: 2; [dir="rtl"] & { - right: $toast-container-gutter-lg; + right: var(--pgn-toast-container-gutter-lg); left: 0; } @media only screen and (max-width: 768px) { - bottom: $toast-container-gutter-sm; - right: $toast-container-gutter-sm; - left: $toast-container-gutter-sm; + bottom: var(--pgn-toast-container-gutter-sm); + right: var(--pgn-toast-container-gutter-sm); + left: var(--pgn-toast-container-gutter-sm); [dir="rtl"] & { - left: $toast-container-gutter-sm; - right: $toast-container-gutter-sm; + left: var(--pgn-toast-container-gutter-sm); + right: var(--pgn-toast-container-gutter-sm); } } } diff --git a/src/Toast/_variables.scss b/src/Toast/_variables.scss index 34168aaa62..c167f328f5 100644 --- a/src/Toast/_variables.scss +++ b/src/Toast/_variables.scss @@ -5,14 +5,15 @@ $toast-padding-x: .75rem !default; $toast-padding-y: .25rem !default; $toast-font-size: .875rem !default; $toast-color: null !default; -$toast-background-color: $gray-700 !default; +$toast-background-color: var(--pgn-color-gray-700) !default; $toast-border-width: 1px !default; $toast-border-color: rgba(0, 0, 0, .1) !default; $toast-border-radius: .25rem !default; -$toast-box-shadow: 0 1.25rem 2.5rem rgba($black, .15), 0 .5rem 3rem rgba($black, .15) !default; +$toast-box-shadow: 0 1.25rem 2.5rem rgba(var(--pgn-color-black), .15), + 0 .5rem 3rem rgba(var(--pgn-color-black), .15) !default; -$toast-header-color: $white !default; -$toast-header-background-color: $gray-700 !default; +$toast-header-color: var(--pgn-color-white) !default; +$toast-header-background-color: var(--pgn-color-gray-700) !default; $toast-header-border-color: rgba(0, 0, 0, .5) !default; $toast-container-gutter-lg: 1.25rem !default; diff --git a/src/Tooltip/Tooltip.scss b/src/Tooltip/Tooltip.scss index 20ce7a4350..bc73eebf8b 100644 --- a/src/Tooltip/Tooltip.scss +++ b/src/Tooltip/Tooltip.scss @@ -2,36 +2,36 @@ @import "~bootstrap/scss/tooltip"; .tooltip { - filter: $tooltip-box-shadow; + filter: var(--pgn-tooltip-box-shadow); } .tooltip-light { .tooltip-inner { - color: $tooltip-color-light; - background-color: $tooltip-bg-light; + color: var(--pgn-tooltip-color-light); + background-color: var(--pgn-tooltip-bg-light); } &.bs-tooltip-top .arrow { &::before { - border-top-color: $tooltip-arrow-color-light; + border-top-color: var(--pgn-tooltip-arrow-color-light); } } &.bs-tooltip-right .arrow { &::before { - border-right-color: $tooltip-arrow-color-light; + border-right-color: var(--pgn-tooltip-arrow-color-light); } } &.bs-tooltip-bottom .arrow { &::before { - border-bottom-color: $tooltip-arrow-color-light; + border-bottom-color: var(--pgn-tooltip-arrow-color-light); } } &.bs-tooltip-left .arrow { &::before { - border-left-color: $tooltip-arrow-color-light; + border-left-color: var(--pgn-tooltip-arrow-color-light); } } } diff --git a/src/Tooltip/_variables.scss b/src/Tooltip/_variables.scss index cd74cfe212..002a34705f 100644 --- a/src/Tooltip/_variables.scss +++ b/src/Tooltip/_variables.scss @@ -1,10 +1,10 @@ // Tooltips -$tooltip-font-size: $font-size-sm !default; +$tooltip-font-size: var(--pgn-font-size-sm) !default; $tooltip-max-width: 200px !default; -$tooltip-color: $white !default; -$tooltip-bg: $black !default; -$tooltip-border-radius: $border-radius !default; +$tooltip-color: var(--pgn-color-white) !default; +$tooltip-bg: var(--pgn-color-black) !default; +$tooltip-border-radius: var(--pgn-border-radius-base) !default; $tooltip-opacity: 1 !default; $tooltip-padding-y: .5rem !default; $tooltip-padding-x: .5rem !default; @@ -16,6 +16,6 @@ $tooltip-arrow-width: .8rem !default; $tooltip-arrow-height: .4rem !default; $tooltip-arrow-color: $tooltip-bg !default; -$tooltip-color-light: $black !default; -$tooltip-bg-light: $white !default; -$tooltip-arrow-color-light: $white !default; +$tooltip-color-light: var(--pgn-color-black) !default; +$tooltip-bg-light: var(--pgn-color-white) !default; +$tooltip-arrow-color-light: var(--pgn-color-white) !default; diff --git a/src/ValidationMessage/ValidationMessage.scss b/src/ValidationMessage/ValidationMessage.scss index 2ca69ff4dc..5c71067148 100644 --- a/src/ValidationMessage/ValidationMessage.scss +++ b/src/ValidationMessage/ValidationMessage.scss @@ -1,5 +1,5 @@ .form-control.is-invalid ~ .invalid-feedback-nodanger { - color: $body-color; + color: var(--pgn-body-color); } .fa-icon-spacing { diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss index 1c152549eb..931fa58fbb 100644 --- a/tokens/build/_variables.scss +++ b/tokens/build/_variables.scss @@ -1,3 +1,7 @@ +$pgn-www-zindex-modal: 2503 !default; +$pgn-www-zindex-sheet-backdrop: 2501 !default; +$pgn-www-zindex-sheet: 2502 !default; +$pgn-www-zindex-header: 2500 !default; $pgn-paragraph-margin-bottom: 1rem !default; $pgn-line-height-sm: 1.5 !default; $pgn-line-height-lg: 1.5 !default; @@ -5,6 +9,7 @@ $pgn-line-height-base: 1.5556 !default; $pgn-headings-line-height: 1.25 !default; $pgn-headings-font-family: null !default; $pgn-headings-margin-bottom: .5rem !default; +$pgn-font-weight-lead: null !default; $pgn-font-weight-bolder: bolder !default; $pgn-font-weight-bold: 700 !default; $pgn-font-weight-semi-bold: 500 !default; @@ -40,6 +45,7 @@ $pgn-display-size-1: 3.75rem !default; $pgn-transition-collapse: height .35s ease !default; $pgn-transition-fade: opacity .15s linear !default; $pgn-transition-base: all .2s ease-in-out !default; +$pgn-link-emphasized-hover-darken-percentage: 15% !default; $pgn-link-brand-inline-hover-decoration-color: #003C5E !default; $pgn-link-brand-inline-hover-decoration: underline !default; $pgn-link-brand-inline-hover-color: #003C5E !default; @@ -89,6 +95,9 @@ $pgn-size-base-100: 100rem !default; $pgn-size-base-75: 75rem !default; $pgn-size-base-50: 50rem !default; $pgn-size-base-25: 25rem !default; +$pgn-list-group-item-padding-x: 1.25rem !default; +$pgn-list-group-item-padding-y: .75rem !default; +$pgn-list-group-color: null !default; $pgn-grid-row-columns: 6 !default; $pgn-grid-gutter-width: 24px !default; $pgn-grid-columns: 12 !default; @@ -123,18 +132,24 @@ $pgn-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rg $pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3) !default; +$pgn-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2) !default; +$pgn-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3) !default; $pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default; +$pgn-core-list-inline-padding: .5rem !default; +$pgn-core-mark-bg: #FFF243 !default; +$pgn-core-mark-padding: .2em !default; $pgn-core-input-btn-focus-width: 1px !default; $pgn-core-input-btn-line-height-sm: 1.4286 !default; $pgn-core-input-btn-line-height-base: 1.3333 !default; $pgn-core-input-btn-font-size-lg: 1.325rem !default; $pgn-core-input-btn-font-size-sm: .875rem !default; $pgn-core-input-btn-font-size-base: 1.125rem !default; -$pgn-core-input-btn-font-family: null !default; +$pgn-core-input-btn-font-family: inherit !default; $pgn-core-input-btn-padding-lg-x: 1.25rem !default; $pgn-core-input-btn-padding-lg-y: .6875rem !default; $pgn-core-input-btn-padding-sm-x: .75rem !default; @@ -278,20 +293,21 @@ $pgn-modal-dialog-margin-base: 1.5rem !default; $pgn-modal-footer-padding-y: 1.5rem !default; $pgn-modal-footer-padding-x: 1rem !default; $pgn-modal-footer-margin-between: .5rem !default; -$pgn-modal-inner-padding: 1.5rem !default; +$pgn-modal-inner-padding-bottom: .7rem !default; +$pgn-modal-inner-padding-base: 1.5rem !default; $pgn-menu-border-hover: transparent !default; $pgn-menu-border-active: transparent !default; $pgn-menu-border-base: transparent !default; $pgn-image-figure-caption-font-size: 90% !default; $pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075) !default; $pgn-image-thumbnail-padding: .25rem !default; +$pgn-icon-button-bg: transparent !default; +$pgn-icon-button-diameter-sm: 2.25rem !default; +$pgn-icon-button-diameter-md: 2.75rem !default; $pgn-icon-lg: 1.75rem !default; $pgn-icon-md: 1.5rem !default; $pgn-icon-sm: 1.25rem !default; $pgn-icon-inline: .8em !default; -$pgn-icon-button-bg: transparent !default; -$pgn-icon-button-diameter-sm: 2.25rem !default; -$pgn-icon-button-diameter-md: 2.75rem !default; $pgn-form-select-icon-padding: .5625rem !default; $pgn-form-control-icon-width: 32px !default; $pgn-form-feedback-tooltip-opacity: .9 !default; @@ -412,12 +428,14 @@ $pgn-card-height-base: null !default; $pgn-card-cap-color: null !default; $pgn-card-cap-bg: rgba(0, 0, 0, .03) !default; $pgn-card-border-color-focus: rgba(0, 0, 0, .5) !default; +$pgn-card-border-color-base: rgba(0, 0, 0, .125) !default; $pgn-card-border-radius-logo: .25rem !default; $pgn-card-border-radius-image: .3125rem !default; $pgn-card-spacer-y: .75rem !default; $pgn-card-spacer-x: 1.25rem !default; $pgn-btn-transition: null !default; $pgn-btn-block-spacing-y: .5rem !default; +$pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1) !default; $pgn-btn-tertiary-inverse-bg-base: transparent !default; $pgn-btn-tertiary-bg-base: transparent !default; $pgn-btn-disabled-opacity: .65 !default; @@ -443,6 +461,9 @@ $pgn-badge-padding-y: .125rem !default; $pgn-badge-padding-x-pill: .6em !default; $pgn-badge-padding-x-base: .5rem !default; $pgn-badge-font-size: 75% !default; +$pgn-avatar-button-padding-left-lg: .25em !default; +$pgn-avatar-button-padding-left-sm: .25em !default; +$pgn-avatar-button-padding-left-base: .25em !default; $pgn-avatar-size-huge: 18.75rem !default; $pgn-avatar-size-xxl: 11.5rem !default; $pgn-avatar-size-xl: 6rem !default; @@ -451,9 +472,6 @@ $pgn-avatar-size-sm: 2.25rem !default; $pgn-avatar-size-xs: 1.5rem !default; $pgn-avatar-size-base: 3rem !default; $pgn-avatar-border-radius: 100% !default; -$pgn-avatar-button-padding-left-lg: .25em !default; -$pgn-avatar-button-padding-left-sm: .25em !default; -$pgn-avatar-button-padding-left-base: .25em !default; $pgn-annotation-arrow-border-width: .5rem !default; $pgn-annotation-arrow-side-margin: .25rem !default; $pgn-annotation-max-width: 18.75rem !default; @@ -559,6 +577,7 @@ $pgn-color-gray-400: #8F8F8F !default; $pgn-color-gray-300: #ADADAD !default; $pgn-color-gray-200: #CCCCCC !default; $pgn-color-gray-100: #EBEBEB !default; +$pgn-color-theme-interval: 8% !default; $pgn-color-accent-b: #FFEE88 !default; $pgn-color-accent-a: #00BBF9 !default; $pgn-color-teal: #006DAA !default; @@ -578,6 +597,7 @@ $pgn-border-width: 1px !default; $pgn-headings-color: $pgn-color-black !default; $pgn-headings-font-weight: $pgn-font-weight-bold !default; $pgn-font-weight-base: $pgn-font-weight-normal !default; +$pgn-font-size-lead: calc($pgn-font-size-base * 1.25) !default; $pgn-font-size-mobile-h6: $pgn-font-size-h6 !default; $pgn-font-size-mobile-h5: $pgn-font-size-h5 !default; $pgn-font-size-mobile-h4: $pgn-font-size-h4 !default; @@ -588,9 +608,17 @@ $pgn-display-weight-4: $pgn-font-weight-bold !default; $pgn-display-weight-3: $pgn-font-weight-bold !default; $pgn-display-weight-2: $pgn-font-weight-bold !default; $pgn-display-weight-1: $pgn-font-weight-bold !default; -$pgn-box-shadow-lg: 0 .25rem .5rem rgba($pgn-color-black, .3) !default; -$pgn-box-shadow-sm: 0 .0625rem .125rem rgba($pgn-color-black, .2) !default; -$pgn-box-shadow-base: 0 .125rem .25rem rgba($pgn-color-black, .3) !default; +$pgn-list-group-action-active-bg: $pgn-color-gray-200 !default; +$pgn-list-group-action-color-base: $pgn-color-gray-700 !default; +$pgn-list-group-disabled-color: $pgn-color-gray-600 !default; +$pgn-list-group-border-radius: $pgn-border-radius-base !default; +$pgn-list-group-border-width: $pgn-border-width !default; +$pgn-list-group-border-color: rgba($pgn-color-black, .125) !default; +$pgn-list-group-bg-hover: $pgn-color-gray-100 !default; +$pgn-list-group-bg-base: $pgn-color-white !default; +$pgn-core-dt-font-weight: $pgn-font-weight-bold !default; +$pgn-core-blockquote-font-size: calc($pgn-font-size-base * 1.25) !default; +$pgn-core-blockquote-small-font-size: $pgn-font-size-small-base !default; $pgn-core-input-btn-border-width: $pgn-border-width !default; $pgn-core-input-btn-focus-box-shadow: 0 0 0 $pgn-core-input-btn-focus-width $pgn-core-input-btn-focus-color !default; $pgn-core-input-btn-line-height-lg: $pgn-line-height-lg !default; @@ -669,7 +697,7 @@ $pgn-modal-backdrop-bg: $pgn-color-black !default; $pgn-modal-content-border-radius: $pgn-border-radius-lg !default; $pgn-modal-content-bg: $pgn-color-white !default; $pgn-modal-title-line-height: $pgn-line-height-base !default; -$pgn-modal-footer-padding-base: $pgn-modal-footer-padding-y $pgn-modal-footer-padding-x !default; +$pgn-modal-footer-padding-base: $pgn-modal-footer-padding-x $pgn-modal-footer-padding-y !default; $pgn-menu-background-base: $pgn-btn-tertiary-bg-base !default; $pgn-image-thumbnail-border-radius: $pgn-border-radius-base !default; $pgn-image-thumbnail-border-color: $pgn-color-gray-200 !default; @@ -728,6 +756,7 @@ $pgn-dropdown-border-width: $pgn-border-width !default; $pgn-dropdown-bg: $pgn-color-white !default; $pgn-dropdown-font-size: $pgn-font-size-base !default; $pgn-dropdown-padding-header: $pgn-dropdown-padding-y-base $pgn-dropdown-padding-x-item !default; +$pgn-data-table-box-shadow: $pgn-box-shadow-sm !default; $pgn-data-table-border: 1px solid $pgn-color-gray-200 !default; $pgn-data-table-background-color: $pgn-color-white !default; $pgn-collapsible-card-spacer-x-lg: $pgn-card-spacer-x !default; @@ -754,10 +783,9 @@ $pgn-card-margin-grid: $pgn-card-margin-group !default; $pgn-card-margin-deck: $pgn-card-margin-group !default; $pgn-card-image-horizontal-width-min: $pgn-card-image-horizontal-width-max !default; $pgn-card-bg: $pgn-color-white !default; -$pgn-card-border-color-base: rgba($pgn-color-black, .125) !default; $pgn-card-border-radius-base: $pgn-border-radius-base !default; $pgn-card-border-width: $pgn-border-width !default; -$pgn-btn-tertiary-inverse-bg-hover: rgba($pgn-color-white, .1) !default; +$pgn-btn-tertiary-inverse-bg-active: $pgn-btn-tertiary-inverse-bg-hover !default; $pgn-btn-tertiary-inverse-color: $pgn-color-white !default; $pgn-btn-tertiary-color: $pgn-color-gray-700 !default; $pgn-btn-box-shadow-base: inset 0 1px 0 rgba($pgn-color-white, .15), 0 1px 1px rgba($pgn-color-black, .075) !default; @@ -771,12 +799,14 @@ $pgn-btn-font-size-lg: $pgn-core-input-btn-font-size-lg !default; $pgn-btn-font-size-sm: $pgn-core-input-btn-font-size-sm !default; $pgn-btn-font-size-base: $pgn-core-input-btn-font-size-base !default; $pgn-btn-font-family: $pgn-core-input-btn-font-family !default; +$pgn-btn-padding-x-sm: $pgn-core-input-btn-padding-sm-x !default; $pgn-btn-padding-x-lg: $pgn-core-input-btn-padding-lg-x !default; $pgn-btn-padding-x-base: $pgn-core-input-btn-padding-x !default; -$pgn-btn-padding-y-sm-x: $pgn-core-input-btn-padding-sm-x !default; -$pgn-btn-padding-y-sm-y: $pgn-core-input-btn-padding-sm-y !default; +$pgn-btn-padding-y-sm: $pgn-core-input-btn-padding-sm-y !default; $pgn-btn-padding-y-lg: $pgn-core-input-btn-padding-lg-y !default; $pgn-btn-padding-y-base: $pgn-core-input-btn-padding-y !default; +$pgn-breadcrumb-inverse-color: $pgn-color-white !default; +$pgn-breadcrumb-inverse-spacer: $pgn-color-light-700 !default; $pgn-breadcrumb-color-divider: $pgn-color-gray-600 !default; $pgn-breadcrumb-bg: $pgn-color-gray-200 !default; $pgn-breadcrumb-border-radius-base: $pgn-border-radius-base !default; @@ -802,16 +832,22 @@ $pgn-color-primary-500: $pgn-color-primary-base !default; $pgn-color-gray-500: $pgn-color-gray-base !default; $pgn-body-color: $pgn-color-gray-700 !default; $pgn-body-bg: $pgn-color-white !default; +$pgn-border-hr-margin-y: $pgn-core-spacer !default; +$pgn-border-hr-width: $pgn-border-width !default; +$pgn-border-hr-color: rgba($pgn-color-black, .1) !default; $pgn-border-color: $pgn-color-gray-200 !default; $pgn-link-brand-inline-color: $pgn-color-brand-500 !default; $pgn-link-brand-color: $pgn-color-brand-500 !default; $pgn-link-muted-inline-color: $pgn-color-primary-500 !default; $pgn-link-muted-color: $pgn-color-primary-500 !default; +$pgn-list-group-action-active-color: $pgn-body-color !default; +$pgn-list-group-action-color-hover: $pgn-list-group-action-color-base !default; +$pgn-list-group-disabled-bg: $pgn-list-group-bg-base !default; +$pgn-list-group-active-color-base: $pgn-component-active-color !default; $pgn-tooltip-arrow-color-base: $pgn-tooltip-bg-base !default; $pgn-table-dark-color-border: $pgn-table-dark-bg-base !default; $pgn-table-dark-color-hover: $pgn-table-dark-color-base !default; $pgn-table-border-color: $pgn-border-color !default; -$pgn-table-color-border: $pgn-border-color !default; $pgn-table-color-base: $pgn-body-color !default; $pgn-search-field-input-height-search: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2) !default; $pgn-search-field-border-color-base: $pgn-color-gray-500 !default; @@ -894,8 +930,6 @@ $pgn-dropdown-link-active-color: $pgn-component-active-color !default; $pgn-dropdown-border-radius-inner: calc($pgn-dropdown-border-radius-base - $pgn-dropdown-border-width) !default; $pgn-dropdown-color-header: $pgn-color-gray-500 !default; $pgn-dropdown-color-base: $pgn-body-color !default; -$pgn-data-table-box-shadow: $pgn-box-shadow-sm !default; -$pgn-btn-tertiary-inverse-bg-active: $pgn-btn-tertiary-inverse-bg-hover !default; $pgn-btn-tertiary-bg-active: $pgn-color-light-500 !default; $pgn-btn-tertiary-bg-hover: $pgn-color-light-500 !default; $pgn-btn-disabled-link-color: $pgn-color-gray-500 !default; @@ -913,9 +947,9 @@ $pgn-color-success-500: $pgn-color-success-base !default; $pgn-color-secondary-500: $pgn-color-secondary-base !default; $pgn-link-inline-color: $pgn-color-info-500 !default; $pgn-link-color: $pgn-color-info-500 !default; +$pgn-list-group-active-bg: $pgn-component-active-bg !default; $pgn-core-input-btn-focus-color: $pgn-component-active-bg !default; $pgn-table-caption-color: $pgn-text-muted !default; -$pgn-table-color-caption: $pgn-text-muted !default; $pgn-table-color-hover: $pgn-table-color-base !default; $pgn-popover-danger-icon-color: $pgn-color-warning-500 !default; $pgn-popover-warning-icon-color: $pgn-color-warning-500 !default; @@ -951,6 +985,7 @@ $pgn-form-input-height-lg: calc($pgn-form-input-line-height-lg * 1em + $pgn-core $pgn-form-input-focus-color-border: $pgn-component-active-bg !default; $pgn-form-input-border-height: calc($pgn-form-input-border-width * 2) !default; $pgn-dropzone-error-wrapper-color: $pgn-color-danger-500 !default; +$pgn-list-group-active-color-border: $pgn-list-group-active-bg !default; $pgn-pagination-border-color-active: $pgn-pagination-bg-active !default; $pgn-pagination-color-base: $pgn-link-color !default; $pgn-form-feedback-icon-color-invalid: $pgn-form-feedback-color-invalid !default; diff --git a/tokens/build/scss-to-css-components.json b/tokens/build/scss-to-css-components.json index 4ccf126be4..303b3a35bd 100644 --- a/tokens/build/scss-to-css-components.json +++ b/tokens/build/scss-to-css-components.json @@ -1 +1 @@ -{"$alert-padding-y":"--pgn-alert-padding-y","$alert-padding-x":"--pgn-alert-padding-x","$alert-margin-bottom":"--pgn-alert-margin-bottom","$alert-border-radius":"--pgn-alert-border-radius","$alert-border-width":"--pgn-alert-border-width","$alert-link-font-weight":"--pgn-alert-font-weight-link","$alert-font-size":"--pgn-alert-font-size","$alert-title-color":"--pgn-alert-color-title","$alert-content-color":"--pgn-alert-color-content","$alert-box-shadow":"--pgn-alert-box-shadow","$alert-bg-level":"--pgn-alert-level-bg","$alert-border-level":"--pgn-alert-level-border","$alert-color-level":"--pgn-alert-level-color","$alert-icon-space":"--pgn-alert-icon-space","$alert-line-height":"--pgn-alert-line-height","$avatar-border":"--pgn-avatar-border-base","$avatar-border-radius":"--pgn-avatar-border-radius","$avatar-size":"--pgn-avatar-size-base","$avatar-size-xs":"--pgn-avatar-size-xs","$avatar-size-sm":"--pgn-avatar-size-sm","$avatar-size-lg":"--pgn-avatar-size-lg","$avatar-size-xl":"--pgn-avatar-size-xl","$avatar-size-xxl":"--pgn-avatar-size-xxl","$avatar-size-huge":"--pgn-avatar-size-huge","$avatar-button-padding-left":"--pgn-avatar-button-padding-left-base","$avatar-button-padding-left-sm":"--pgn-avatar-button-padding-left-sm","$avatar-button-padding-left-lg":"--pgn-avatar-button-padding-left-lg","$btn-padding-y":"--pgn-btn-padding-y-base","$btn-padding-y-lg":"--pgn-btn-padding-y-lg","$btn-padding-x":"--pgn-btn-padding-x-base","$btn-padding-x-lg":"--pgn-btn-padding-x-lg","$input-btn-padding-y-sm":"--pgn-btn-padding-sm-y","$input-btn-padding-x-sm":"--pgn-btn-padding-sm-x","$btn-font-family":"--pgn-btn-font-family","$btn-font-size":"--pgn-btn-font-size-base","$btn-font-size-sm":"--pgn-btn-font-size-sm","$btn-font-size-lg":"--pgn-btn-font-size-lg","$btn-font-weight":"--pgn-btn-font-width","$btn-line-height":"--pgn-btn-line-height-base","$btn-line-height-sm":"--pgn-btn-line-height-sm","$btn-line-height-lg":"--pgn-btn-line-height-lg","$btn-border-width":"--pgn-btn-border-width","$btn-border-radius":"--pgn-btn-border-radius-base","$btn-border-radius-lg":"--pgn-btn-border-radius-lg","$btn-border-radius-sm":"--pgn-btn-border-radius-sm","$btn-box-shadow":"--pgn-btn-box-shadow-base","$btn-active-box-shadow":"--pgn-btn-box-shadow-active","$btn-focus-width":"--pgn-btn-focus-width","$btn-focus-gap":"--pgn-btn-focus-gap","$btn-disabled-opacity":"--pgn-btn-disabled-opacity","$btn-link-disabled-color":"--pgn-btn-disabled-link-color","$btn-tertiary-color":"--pgn-btn-tertiary-color","$btn-tertiary-bg":"--pgn-btn-tertiary-bg-base","$btn-tertiary-hover-bg":"--pgn-btn-tertiary-bg-hover","$btn-tertiary-active-bg":"--pgn-btn-tertiary-bg-active","$btn-inverse-tertiary-color":"--pgn-btn-tertiary-inverse-color","$btn-inverse-tertiary-bg":"--pgn-btn-tertiary-inverse-bg-base","$btn-inverse-tertiary-hover-bg":"--pgn-btn-tertiary-inverse-bg-hover","$btn-inverse-tertiary-active-bg":"--pgn-btn-tertiary-inverse-bg-active","$btn-block-spacing-y":"--pgn-btn-block-spacing-y","$btn-transition":"--pgn-btn-transition","$spinner-width":"--pgn-spinner-width","$spinner-height":"--pgn-spinner-height","$spinner-border-width":"--pgn-spinner-border-width","$spinner-width-sm":"--pgn-spinner-sm-width","$spinner-height-sm":"--pgn-spinner-sm-height","$spinner-border-width-sm":"--pgn-spinner-sm-border-width"} \ No newline at end of file +{"$action-row-gap-x":"--pgn-action-row-gap-x","$action-row-gap-y":"--pgn-action-row-gap-y","$alert-padding-y":"--pgn-alert-padding-y","$alert-padding-x":"--pgn-alert-padding-x","$alert-margin-bottom":"--pgn-alert-margin-bottom","$alert-border-radius":"--pgn-alert-border-radius","$alert-border-width":"--pgn-alert-border-width","$alert-link-font-weight":"--pgn-alert-font-weight-link","$alert-font-size":"--pgn-alert-font-size","$alert-title-color":"--pgn-alert-color-title","$alert-content-color":"--pgn-alert-color-content","$alert-box-shadow":"--pgn-alert-box-shadow","$alert-bg-level":"--pgn-alert-level-bg","$alert-border-level":"--pgn-alert-level-border","$alert-color-level":"--pgn-alert-level-color","$alert-icon-space":"--pgn-alert-icon-space","$alert-line-height":"--pgn-alert-line-height","$annotation-padding":"--pgn-annotation-padding","$annotation-box-shadow":"--pgn-annotation-box-shadow","$annotation-border-radius":"--pgn-annotation-border-radius","$annotation-max-width":"--pgn-annotation-max-width","$annotation-font-size":"--pgn-annotation-font-size","$annotation-line-height":"--pgn-annotation-line-height","$annotation-arrow-side-margin":"--pgn-annotation-arrow-side-margin","$annotation-arrow-border-width":"--pgn-annotation-arrow-border-width","$avatar-border":"--pgn-avatar-border-base","$avatar-border-radius":"--pgn-avatar-border-radius","$avatar-size":"--pgn-avatar-size-base","$avatar-size-xs":"--pgn-avatar-size-xs","$avatar-size-sm":"--pgn-avatar-size-sm","$avatar-size-lg":"--pgn-avatar-size-lg","$avatar-size-xl":"--pgn-avatar-size-xl","$avatar-size-xxl":"--pgn-avatar-size-xxl","$avatar-size-huge":"--pgn-avatar-size-huge","$avatar-button-padding-left":"--pgn-avatar-button-padding-left-base","$avatar-button-padding-left-sm":"--pgn-avatar-button-padding-left-sm","$avatar-button-padding-left-lg":"--pgn-avatar-button-padding-left-lg","$badge-font-size":"--pgn-badge-font-size","$badge-font-weight":"--pgn-badge-font-weight","$badge-padding-x":"--pgn-badge-padding-x-base","$badge-pill-padding-x":"--pgn-badge-padding-x-pill","$badge-padding-y":"--pgn-badge-padding-y","$badge-border-radius":"--pgn-badge-border-radius-base","$badge-pill-border-radius":"--pgn-badge-border-radius-pill","$badge-transition":"--pgn-badge-transition","$badge-focus-width":"--pgn-badge-focus-width","$breadcrumb-font-size":"--pgn-breadcrumb-font-size","$breadcrumb-padding-y":"--pgn-breadcrumb-padding-y","$breadcrumb-padding-x":"--pgn-breadcrumb-padding-x","$breadcrumb-item-padding":"--pgn-breadcrumb-padding-item","$breadcrumb-margin-bottom":"--pgn-breadcrumb-margin-bottom","$breadcrumb-margin-left":"--pgn-breadcrumb-margin-left","$breadcrumb-border-focus-axis-y":"--pgn-breadcrumb-border-focus-axis-y","$breadcrumb-border-focus-axis-x":"--pgn-breadcrumb-border-focus-axis-x","$breadcrumb-border-focus-width":"--pgn-breadcrumb-border-focus-width","$breadcrumb-border-radius":"--pgn-breadcrumb-border-radius-base","$breadcrumb-focus-border-radius":"--pgn-breadcrumb-border-radius-focus","$breadcrumb-bg":"--pgn-breadcrumb-bg","$breadcrumb-color":"--pgn-breadcrumb-color-base","$breadcrumb-divider-color":"--pgn-breadcrumb-color-divider","$breadcrumb-active-color":"--pgn-breadcrumb-color-active","$breadcrumb-inverse-active":"--pgn-breadcrumb-inverse-active","$breadcrumb-inverse-spacer":"--pgn-breadcrumb-inverse-spacer","$breadcrumb-inverse-color":"--pgn-breadcrumb-inverse-color","$bubble-expandable-padding-y":"--pgn-bubble-expandable-padding-y","$bubble-expandable-padding-x":"--pgn-bubble-expandable-padding-x","$btn-padding-y":"--pgn-btn-padding-y-base","$btn-padding-y-lg":"--pgn-btn-padding-y-lg","$btn-padding-y-sm":"--pgn-btn-padding-y-sm","$btn-padding-x":"--pgn-btn-padding-x-base","$btn-padding-x-lg":"--pgn-btn-padding-x-lg","$btn-padding-x-sm":"--pgn-btn-padding-x-sm","$btn-font-family":"--pgn-btn-font-family","$btn-font-size":"--pgn-btn-font-size-base","$btn-font-size-sm":"--pgn-btn-font-size-sm","$btn-font-size-lg":"--pgn-btn-font-size-lg","$btn-font-weight":"--pgn-btn-font-width","$btn-line-height":"--pgn-btn-line-height-base","$btn-line-height-sm":"--pgn-btn-line-height-sm","$btn-line-height-lg":"--pgn-btn-line-height-lg","$btn-border-width":"--pgn-btn-border-width","$btn-border-radius":"--pgn-btn-border-radius-base","$btn-border-radius-lg":"--pgn-btn-border-radius-lg","$btn-border-radius-sm":"--pgn-btn-border-radius-sm","$btn-box-shadow":"--pgn-btn-box-shadow-base","$btn-active-box-shadow":"--pgn-btn-box-shadow-active","$btn-focus-width":"--pgn-btn-focus-width","$btn-focus-gap":"--pgn-btn-focus-gap","$btn-disabled-opacity":"--pgn-btn-disabled-opacity","$btn-link-disabled-color":"--pgn-btn-disabled-link-color","$btn-tertiary-color":"--pgn-btn-tertiary-color","$btn-tertiary-bg":"--pgn-btn-tertiary-bg-base","$btn-tertiary-hover-bg":"--pgn-btn-tertiary-bg-hover","$btn-tertiary-active-bg":"--pgn-btn-tertiary-bg-active","$btn-inverse-tertiary-color":"--pgn-btn-tertiary-inverse-color","$btn-inverse-tertiary-bg":"--pgn-btn-tertiary-inverse-bg-base","$btn-inverse-tertiary-hover-bg":"--pgn-btn-tertiary-inverse-bg-hover","$btn-inverse-tertiary-active-bg":"--pgn-btn-tertiary-inverse-bg-active","$btn-block-spacing-y":"--pgn-btn-block-spacing-y","$btn-transition":"--pgn-btn-transition","$card-spacer-x":"--pgn-card-spacer-x","$card-spacer-y":"--pgn-card-spacer-y","$card-border-width":"--pgn-card-border-width","$card-border-radius":"--pgn-card-border-radius-base","$card-image-border-radius":"--pgn-card-border-radius-image","$card-logo-border-radius":"--pgn-card-border-radius-logo","$card-border-color":"--pgn-card-border-color-base","$card-border-focus-color":"--pgn-card-border-color-focus","$card-cap-bg":"--pgn-card-cap-bg","$card-cap-color":"--pgn-card-cap-color","$card-height":"--pgn-card-height-base","$card-color":"--pgn-card-color","$card-bg":"--pgn-card-bg","$card-img-overlay-padding":"--pgn-card-image-overlay-padding","$card-image-horizontal-max-width":"--pgn-card-image-horizontal-width-max","$card-image-horizontal-min-width":"--pgn-card-image-horizontal-width-min","$card-image-vertical-max-height":"--pgn-card-image-vertical-height-max","$card-group-margin":"--pgn-card-margin-group","$card-deck-margin":"--pgn-card-margin-deck","$card-grid-margin":"--pgn-card-margin-grid","$card-columns-count":"--pgn-card-columns-count","$card-columns-gap":"--pgn-card-columns-gap","$card-columns-margin":"--pgn-card-columns-margin","$card-divider-bg":"--pgn-card-divider-bg","$card-divider-margin-y":"--pgn-card-divider-margin-y","$card-footer-actions-gap":"--pgn-card-footer-action-gap","$card-footer-text-font-size":"--pgn-card-footer-text-font-size","$card-logo-left-offset":"--pgn-card-logo-left-offset-base","$card-logo-left-offset-horizontal":"--pgn-card-logo-left-offset-horizontal","$card-logo-bottom-offset":"--pgn-card-logo-bottom-offset-base","$card-logo-bottom-offset-horizontal":"--pgn-card-logo-bottom-offset-horizontal","$card-logo-width":"--pgn-card-logo-width","$card-logo-height":"--pgn-card-logo-height","$loading-skeleton-spacer":"--pgn-card-loading-skeleton-spacer","$carousel-control-color":"--pgn-carousel-control-color","$carousel-control-width":"--pgn-carousel-control-width-base","$carousel-control-icon-width":"--pgn-carousel-control-width-icon","$carousel-control-opacity":"--pgn-carousel-control-opacity-base","$carousel-control-hover-opacity":"--pgn-carousel-control-opacity-hover","$carousel-control-transition":"--pgn-carousel-control-transition","$carousel-indicator-width":"--pgn-carousel-indicator-width","$carousel-indicator-height":"--pgn-carousel-indicator-height-base","$carousel-indicator-hit-area-height":"--pgn-carousel-indicator-height-area-hit","$carousel-indicator-spacer":"--pgn-carousel-indicator-spacer","$carousel-indicator-active-bg":"--pgn-carousel-indicator-active-bg","$carousel-indicator-transition":"--pgn-carousel-indicator-transition","$carousel-caption-width":"--pgn-carousel-caption-width","$carousel-caption-color":"--pgn-carousel-caption-color","$carousel-transition-duration":"--pgn-carousel-transition-base","$chip-padding-y":"--pgn-chip-padding-y","$chip-padding-x":"--pgn-chip-padding-x","$chip-margin-inline":"--pgn-chip-margin-inline","$chip-border-radius":"--pgn-chip-border-radius-base","$chip-focus-border-radius":"--pgn-chip-border-radius-focus","$chip-border-width":"--pgn-chip-border-width","$chip-position-axis":"--pgn-chip-position-axis","$chip-font-size":"--pgn-chip-font-size","$chip-font-weight":"--pgn-chip-font-weight","$chip-line-height":"--pgn-chip-line-height","$close-font-size":"--pgn-close-button-font-size","$close-font-weight":"--pgn-close-button-font-weight","$close-color":"--pgn-close-button-color","$close-text-shadow":"--pgn-close-button-text-shadow","$code-font-size":"--pgn-code-font-size","$code-color":"--pgn-code-color","$kbd-font-size":"--pgn-code-kbd-font-size","$kbd-box-shadow":"--pgn-code-kbd-box-shadow","$nested-kbd-font-weight":"--pgn-code-kbd-nested-font-weight","$kbd-padding-y":"--pgn-code-kbd-padding-y","$kbd-padding-x":"--pgn-code-kbd-padding-x","$kbd-color":"--pgn-code-kbd-color","$kbd-bg":"--pgn-code-kbd-bg","$pre-color":"--pgn-code-pre-color","$pre-scrollable-max-height":"--pgn-code-pre-scrollable-max-height","$collapsible-card-spacer-y":"--pgn-collapsible-card-spacer-y-base","$collapsible-card-spacer-y-lg":"--pgn-collapsible-card-spacer-y-lg","$collapsible-card-spacer-x":"--pgn-collapsible-card-spacer-x-base","$collapsible-card-spacer-x-lg":"--pgn-collapsible-card-spacer-x-lg","$collapsible-card-body-spacer-left":"--pgn-collapsible-card-spacer-left-body","$collapsible-card-spacer-icon":"--pgn-collapsible-card-spacer-icon","$collapsible-basic-spacer-y":"--pgn-collapsible-card-spacer-basic-y","$collapsible-basic-spacer-x":"--pgn-collapsible-card-spacer-basic-x","$collapsible-basic-spacer-icon":"--pgn-collapsible-card-spacer-basic-icon","$max-width-xs":"--pgn-container-max-width-xs","$max-width-sm":"--pgn-container-max-width-sm","$max-width-md":"--pgn-container-max-width-md","$max-width-lg":"--pgn-container-max-width-lg","$max-width-xl":"--pgn-container-max-width-xl","$data-table-background-color":"--pgn-data-table-background-color","$data-table-border":"--pgn-data-table-border","$data-table-box-shadow":"--pgn-data-table-box-shadow","$data-table-padding-x":"--pgn-data-table-padding-x","$data-table-padding-y":"--pgn-data-table-padding-y","$data-table-padding-small":"--pgn-data-table-padding-small","$data-table-cell-padding":"--pgn-data-table-padding-cell","$data-table-footer-position":"--pgn-data-table-footer-position","$data-table-pagination-dropdown-max-height":"--pgn-data-table-pagination-dropdown-max-height","$data-table-pagination-dropdown-min-width":"--pgn-data-table-pagination-dropdown-min-width","$dropdown-min-width":"--pgn-dropdown-min-width","$dropdown-padding-x":"--pgn-dropdown-padding-x-base","$dropdown-item-padding-x":"--pgn-dropdown-padding-x-item","$dropdown-padding-y":"--pgn-dropdown-padding-y-base","$dropdown-item-padding-y":"--pgn-dropdown-padding-y-item","$dropdown-header-padding":"--pgn-dropdown-padding-header","$dropdown-spacer":"--pgn-dropdown-spacer","$dropdown-font-size":"--pgn-dropdown-font-size","$dropdown-color":"--pgn-dropdown-color-base","$dropdown-header-color":"--pgn-dropdown-color-header","$dropdown-bg":"--pgn-dropdown-bg","$dropdown-border-color":"--pgn-dropdown-border-color","$dropdown-border-width":"--pgn-dropdown-border-width","$dropdown-border-radius":"--pgn-dropdown-border-radius-base","$dropdown-inner-border-radius":"--pgn-dropdown-border-radius-inner","$dropdown-divider-bg":"--pgn-dropdown-divider-bg","$dropdown-divider-margin-y":"--pgn-dropdown-divider-margin-y","$dropdown-box-shadow":"--pgn-dropdown-box-shadow","$dropdown-link-color":"--pgn-dropdown-link-color","$dropdown-link-hover-color":"--pgn-dropdown-link-hover-color","$dropdown-link-hover-bg":"--pgn-dropdown-link-hover-bg","$dropdown-link-active-color":"--pgn-dropdown-link-active-color","$dropdown-link-active-bg":"--pgn-dropdown-link-active-bg","$dropdown-link-disabled-color":"--pgn-dropdown-link-disabled-color","$dropzone-padding":"--pgn-dropzone-padding","$dropzone-border-default":"--pgn-dropzone-border-default","$dropzone-border-hover":"--pgn-dropzone-border-hover","$dropzone-border-focus":"--pgn-dropzone-border-focus","$dropzone-border-active":"--pgn-dropzone-border-active","$dropzone-border-error":"--pgn-dropzone-border-error","$dropzone-error-wrapper-color":"--pgn-dropzone-error-wrapper-color","$dropzone-restriction-msg-font-size":"--pgn-dropzone-restriction-msg-font-size","$dropzone-restriction-msg-color":"--pgn-dropzone-restriction-msg-color","$input-padding-y":"--pgn-form-input-padding-y-base","$input-padding-y-sm":"--pgn-form-input-padding-y-sm","$input-padding-y-lg":"--pgn-form-input-padding-y-lg","$input-padding-x":"--pgn-form-input-padding-x-base","$input-padding-x-sm":"--pgn-form-input-padding-x-sm","$input-padding-x-lg":"--pgn-form-input-padding-x-lg","$input-font-family":"--pgn-form-input-font-family","$input-font-size":"--pgn-form-input-font-size-base","$input-font-size-sm":"--pgn-form-input-font-size-sm","$input-font-size-lg":"--pgn-form-input-font-size-lg","$input-font-weight":"--pgn-form-input-font-weight","$input-line-height":"--pgn-form-input-line-height-base","$input-line-height-sm":"--pgn-form-input-line-height-sm","$input-line-height-lg":"--pgn-form-input-line-height-lg","$input-bg":"--pgn-form-input-bg-base","$input-disabled-bg":"--pgn-form-input-bg-disabled","$input-color":"--pgn-form-input-color-base","$input-placeholder-color":"--pgn-form-input-color-plaintext","$input-border-color":"--pgn-form-input-border-color","$input-border-width":"--pgn-form-input-border-width","$input-height-border":"--pgn-form-input-border-height","$input-border-radius":"--pgn-form-input-border-radius-base","$input-border-radius-lg":"--pgn-form-input-border-radius-lg","$input-border-radius-sm":"--pgn-form-input-border-radius-sm","$input-box-shadow":"--pgn-form-input-box-shadow-base","$input-focus-box-shadow":"--pgn-form-input-box-shadow-focus","$input-focus-bg":"--pgn-form-input-focus-bg","$input-focus-color":"--pgn-form-input-focus-color-base","$input-focus-border-color":"--pgn-form-input-focus-color-border","$input-focus-width":"--pgn-form-input-focus-width","$input-height":"--pgn-form-input-height-base","$input-height-sm":"--pgn-form-input-height-sm","$input-height-lg":"--pgn-form-input-height-lg","$input-height-inner":"--pgn-form-input-height-inner-base","$input-height-inner-half":"--pgn-form-input-height-inner-half","$input-height-inner-quarter":"--pgn-form-input-height-inner-quarter","$input-hover-width":"--pgn-form-input-width-hover","$input-transition":"--pgn-form-input-transition","$form-check-input-gutter":"--pgn-form-input-check-gutter","$form-check-input-margin-x":"--pgn-form-input-check-margin-x-base","$form-check-inline-input-margin-x":"--pgn-form-input-check-margin-x-inline","$form-check-input-margin-y":"--pgn-form-input-check-margin-y","$input-group-addon-color":"--pgn-form-input-group-addon-color-base","$input-group-addon-border-color":"--pgn-form-input-group-addon-color-border","$input-group-addon-bg":"--pgn-form-input-group-addon-bg","$form-text-margin-top":"--pgn-form-text-margin-top","$form-check-inline-margin-x":"--pgn-form-check-inline-margin-x","$form-check-position-axis":"--pgn-form-check-position-axis","$form-check-focus-border-radius":"--pgn-form-check-border-radius-focus","$form-check-border-width":"--pgn-form-check-border-width","$form-grid-gutter-width":"--pgn-form-grid-gutter-width","$form-group-margin-bottom":"--pgn-form-group-margin-bottom","$custom-forms-transition":"--pgn-form-custom-transition","$custom-control-gutter":"--pgn-form-custom-control-gutter","$custom-control-spacer-x":"--pgn-form-custom-control-spacer-x","$custom-control-cursor":"--pgn-form-custom-control-cursor","$custom-control-indicator-size":"--pgn-form-custom-control-indicator-size","$custom-control-indicator-bg":"--pgn-form-custom-control-indicator-bg-base","$custom-control-indicator-bg-size":"--pgn-form-custom-control-indicator-bg-size","$custom-control-indicator-box-shadow":"--pgn-form-custom-control-indicator-box-shadow","$custom-control-indicator-border-color":"--pgn-form-custom-control-indicator-border-color","$custom-control-indicator-border-width":"--pgn-form-custom-control-indicator-border-width","$custom-control-indicator-disabled-bg":"--pgn-form-custom-control-indicator-disabled-bg","$custom-control-indicator-checked-color":"--pgn-form-custom-control-indicator-checked-color","$custom-control-indicator-checked-bg":"--pgn-form-custom-control-indicator-checked-bg-base","$custom-control-indicator-checked-disabled-bg":"--pgn-form-custom-control-indicator-checked-bg-disabled","$custom-control-indicator-checked-box-shadow":"--pgn-form-custom-control-indicator-checked-box-shadow-base","$custom-control-indicator-focus-box-shadow":"--pgn-form-custom-control-indicator-checked-box-shadow-focus","$custom-control-indicator-checked-border-color":"--pgn-form-custom-control-indicator-checked-border-color-base","$custom-control-indicator-focus-border-color":"--pgn-form-custom-control-indicator-checked-border-color-focus","$custom-control-indicator-active-color":"--pgn-form-custom-control-indicator-active-color-base","$custom-control-indicator-active-border-color":"--pgn-form-custom-control-indicator-active-color-border","$custom-control-indicator-active-bg":"--pgn-form-custom-control-indicator-active-bg","$custom-control-indicator-active-box-shadow":"--pgn-form-custom-control-indicator-active-box-shadow","$custom-control-label-color":"--pgn-form-custom-control-label-color-base","$custom-control-label-disabled-color":"--pgn-form-custom-control-label-color-disabled","$custom-checkbox-indicator-border-radius":"--pgn-form-custom-checkbox-indicator-border-radius","$custom-checkbox-indicator-indeterminate-bg":"--pgn-form-custom-checkbox-indicator-indeterminate-bg","$custom-checkbox-indicator-indeterminate-color":"--pgn-form-custom-checkbox-indicator-indeterminate-color","$custom-checkbox-indicator-indeterminate-box-shadow":"--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow","$custom-checkbox-indicator-indeterminate-border-color":"--pgn-form-custom-checkbox-indicator-indeterminate-border-color","$custom-radio-indicator-border-radius":"--pgn-form-custom-radio-indicator-border-radius","$custom-switch-width":"--pgn-form-custom-switch-width","$custom-switch-indicator-border-radius":"--pgn-form-custom-switch-indicator-border-radius","$custom-switch-indicator-size":"--pgn-form-custom-switch-indicator-size","$custom-select-padding-y":"--pgn-form-custom-select-padding-y-base","$custom-select-padding-y-sm":"--pgn-form-custom-select-padding-y-sm","$custom-select-padding-y-lg":"--pgn-form-custom-select-padding-y-lg","$custom-select-padding-x":"--pgn-form-custom-select-padding-x-base","$custom-select-padding-x-sm":"--pgn-form-custom-select-padding-x-sm","$custom-select-padding-x-lg":"--pgn-form-custom-select-padding-x-lg","$custom-select-font-family":"--pgn-form-custom-select-font-family","$custom-select-font-size":"--pgn-form-custom-select-font-size-base","$custom-select-font-size-sm":"--pgn-form-custom-select-font-size-sm","$custom-select-font-size-lg":"--pgn-form-custom-select-font-size-lg","$custom-select-height":"--pgn-form-custom-select-font-height-base","$custom-select-height-lg":"--pgn-form-custom-select-font-height-lg","$custom-select-font-weight":"--pgn-form-custom-select-font-weight","$custom-select-line-height":"--pgn-form-custom-select-line-height","$custom-select-indicator-padding":"--pgn-form-custom-select-indicator-padding","$custom-select-indicator-color":"--pgn-form-custom-select-indicator-color","$custom-select-color":"--pgn-form-custom-select-color-base","$custom-select-disabled-color":"--pgn-form-custom-select-color-disabled","$custom-select-bg":"--pgn-form-custom-select-bg-base","$custom-select-disabled-bg":"--pgn-form-custom-select-bg-disabled","$custom-select-bg-size":"--pgn-form-custom-select-bg-size","$custom-select-feedback-icon-padding-right":"--pgn-form-custom-select-feedback-icon-padding-right","$custom-select-feedback-icon-position":"--pgn-form-custom-select-feedback-icon-position","$custom-select-feedback-icon-size":"--pgn-form-custom-select-feedback-icon-size","$custom-select-border-width":"--pgn-form-custom-select-border-width-base","$custom-select-focus-width":"--pgn-form-custom-select-border-width-focus","$custom-select-border-color":"--pgn-form-custom-select-border-color-base","$custom-select-focus-border-color":"--pgn-form-custom-select-border-color-focus","$custom-select-border-radius":"--pgn-form-custom-select-border-radius","$custom-select-box-shadow":"--pgn-form-custom-select-border-box-shadow-base","$custom-select-focus-box-shadow":"--pgn-form-custom-select-border-box-shadow-focus","$custom-select-height-sm":"--pgn-form-custom-select-height-sm","$custom-range-track-width":"--pgn-form-custom-range-track-width","$custom-range-track-height":"--pgn-form-custom-range-track-height","$custom-range-track-cursor":"--pgn-form-custom-range-track-cursor","$custom-range-track-bg":"--pgn-form-custom-range-track-bg","$custom-range-track-border-radius":"--pgn-form-custom-range-track-border-radius","$custom-range-track-box-shadow":"--pgn-form-custom-range-track-box-shadow","$custom-range-thumb-width":"--pgn-form-custom-range-thumb-width","$custom-range-thumb-height":"--pgn-form-custom-range-thumb-height","$custom-range-thumb-bg":"--pgn-form-custom-range-thumb-bg-base","$custom-range-thumb-disabled-bg":"--pgn-form-custom-range-thumb-bg-disabled","$custom-range-thumb-border":"--pgn-form-custom-range-thumb-border-base","$custom-range-thumb-border-radius":"--pgn-form-custom-range-thumb-border-radius","$custom-range-thumb-box-shadow":"--pgn-form-custom-range-thumb-box-shadow-base","$custom-range-thumb-focus-box-shadow":"--pgn-form-custom-range-thumb-box-shadow-focus-base","$custom-range-thumb-focus-box-shadow-width":"--pgn-form-custom-range-thumb-box-shadow-focus-width","$custom-file-height":"--pgn-form-custom-file-height-base","$custom-file-height-inner":"--pgn-form-custom-file-height-inner","$custom-file-border-color":"--pgn-form-custom-file-border-color-base","$custom-file-focus-border-color":"--pgn-form-custom-file-border-color-focus","$custom-file-border-radius":"--pgn-form-custom-file-border-color-radius","$custom-file-border-width":"--pgn-form-custom-file-border-width","$custom-file-box-shadow":"--pgn-form-custom-file-box-shadow-base","$custom-file-focus-box-shadow":"--pgn-form-custom-file-box-shadow-focus","$custom-file-bg":"--pgn-form-custom-file-bg-base","$custom-file-disabled-bg":"--pgn-form-custom-file-bg-disabled","$custom-file-padding-y":"--pgn-form-custom-file-padding-y","$custom-file-padding-x":"--pgn-form-custom-file-padding-x","$custom-file-line-height":"--pgn-form-custom-file-line-height","$custom-file-font-family":"--pgn-form-custom-file-font-family","$custom-file-font-weight":"--pgn-form-custom-file-font-weight","$custom-file-color":"--pgn-form-custom-file-color","$custom-file-button-color":"--pgn-form-custom-file-button-color","$custom-file-button-bg":"--pgn-form-custom-file-button-bg","$form-feedback-margin-top":"--pgn-form-feedback-margin-top","$form-feedback-font-size":"--pgn-form-feedback-font-size","$form-feedback-valid-color":"--pgn-form-feedback-color-valid","$form-feedback-invalid-color":"--pgn-form-feedback-color-invalid","$form-feedback-icon-valid-color":"--pgn-form-feedback-icon-color-valid","$form-feedback-icon-invalid":"--pgn-form-feedback-icon-color-invalid","$form-feedback-tooltip-padding-y":"--pgn-form-feedback-tooltip-padding-y","$form-feedback-tooltip-padding-x":"--pgn-form-feedback-tooltip-padding-x","$form-feedback-tooltip-font-size":"--pgn-form-feedback-tooltip-font-size","$form-feedback-tooltip-line-height":"--pgn-form-feedback-tooltip-line-height","$form-feedback-tooltip-opacity":"--pgn-form-feedback-tooltip-opacity","$form-feedback-tooltip-border-radius":"--pgn-form-feedback-tooltip-border-radius","$form-control-icon-width":"--pgn-form-control-icon-width","$select-icon-padding":"--pgn-form-select-icon-padding","$icon-inline":"--pgn-icon-inline","$icon-sm":"--pgn-icon-sm","$icon-md":"--pgn-icon-md","$icon-lg":"--pgn-icon-lg","$btn-icon-diameter-md":"--pgn-icon-button-diameter-md","$btn-icon-diameter-sm":"--pgn-icon-button-diameter-sm","$btn-icon-diameter-inline":"--pgn-icon-button-diameter-inline","$btn-icon-bg":"--pgn-icon-button-bg","$btn-icon-accent-color":"--pgn-icon-button-accent-color","$thumbnail-padding":"--pgn-image-thumbnail-padding","$thumbnail-bg":"--pgn-image-thumbnail-bg","$thumbnail-border-width":"--pgn-image-thumbnail-border-width","$thumbnail-border-color":"--pgn-image-thumbnail-border-color","$thumbnail-border-radius":"--pgn-image-thumbnail-border-radius","$thumbnail-box-shadow":"--pgn-image-thumbnail-box-shadow","$figure-caption-font-size":"--pgn-image-figure-caption-font-size","$figure-caption-color":"--pgn-image-figure-caption-color","$background":"--pgn-menu-background-base","$active-background":"--pgn-menu-background-active","$border":"--pgn-menu-border-base","$active-border":"--pgn-menu-border-active","$hover-border":"--pgn-menu-border-hover","$modal-inner-padding":"--pgn-modal-inner-padding-base","$modal-inner-padding-bottom":"--pgn-modal-inner-padding-bottom","$modal-footer-margin-between":"--pgn-modal-footer-margin-between","$modal-footer-border-color":"--pgn-modal-footer-border-color","$modal-footer-border-width":"--pgn-modal-footer-border-width","$modal-footer-padding":"--pgn-modal-footer-padding-base","$modal-footer-padding-x":"--pgn-modal-footer-padding-x","$modal-footer-padding-y":"--pgn-modal-footer-padding-y","$modal-dialog-margin":"--pgn-modal-dialog-margin-base","$modal-dialog-margin-y-sm-up":"--pgn-modal-dialog-margin-y-sm-up","$modal-title-line-height":"--pgn-modal-title-line-height","$modal-content-color":"--pgn-modal-content-color","$modal-content-bg":"--pgn-modal-content-bg","$modal-content-border-color":"--pgn-modal-content-border-color","$modal-content-border-width":"--pgn-modal-content-border-width","$modal-content-border-radius":"--pgn-modal-content-border-radius","$modal-content-box-shadow-xs":"--pgn-modal-content-box-shadow-xs","$modal-content-box-shadow-sm-up":"--pgn-modal-content-box-shadow-sm-up","$modal-backdrop-bg":"--pgn-modal-backdrop-bg","$modal-backdrop-opacity":"--pgn-modal-backdrop-opacity","$modal-header-border-color":"--pgn-modal-header-border-color","$modal-header-border-width":"--pgn-modal-header-border-width","$modal-header-padding":"--pgn-modal-header-padding-base","$modal-header-padding-y":"--pgn-modal-header-padding-y","$modal-header-padding-x":"--pgn-modal-header-padding-x","$modal-xl":"--pgn-modal-xl","$modal-lg":"--pgn-modal-lg","$modal-md":"--pgn-modal-md","$modal-sm":"--pgn-modal-sm","$modal-transition":"--pgn-modal-transform-base","$modal-fade-transform":"--pgn-modal-transform-fade","$modal-show-transform":"--pgn-modal-transform-show","$modal-scale-transform":"--pgn-modal-transform-scale","$nav-link-padding-y":"--pgn-nav-link-padding-y","$nav-link-padding-x":"--pgn-nav-link-padding-x","$nav-link-color":"--pgn-nav-link-color-base","$nav-link-disabled-color":"--pgn-nav-link-color-disabled","$nav-link-font-weight":"--pgn-nav-link-font-weight","$nav-tabs-border-color":"--pgn-nav-tabs-border-color","$nav-tabs-border-width":"--pgn-nav-tabs-border-width","$nav-tabs-border-radius":"--pgn-nav-tabs-border-radius","$nav-tabs-link-hover-border-color":"--pgn-nav-tabs-link-hover-border-color","$nav-tabs-link-hover-bg":"--pgn-nav-tabs-link-hover-bg","$nav-tabs-link-active-color":"--pgn-nav-tabs-link-active-color-base","$nav-tabs-link-active-border-color":"--pgn-nav-tabs-link-active-color-border","$nav-tabs-link-active-bg":"--pgn-nav-tabs-link-active-bg","$nav-pills-border-radius":"--pgn-nav-pills-border-radius","$nav-pills-link-active-color":"--pgn-nav-pills-link-link-active-color","$nav-pills-link-active-bg":"--pgn-nav-pills-link-link-active-bg","$nav-divider-color":"--pgn-nav-divider-color","$nav-divider-margin-y":"--pgn-nav-divider-margin-y","$navbar-padding-y":"--pgn-navbar-padding-y","$navbar-padding-x":"--pgn-navbar-padding-x-base","$navbar-nav-link-padding-x":"--pgn-navbar-padding-x-nav-link","$nav-link-height":"--pgn-navbar-nav-link-height","$navbar-nav-scroll-max-height":"--pgn-navbar-nav-scroll-max-height","$navbar-brand-font-size":"--pgn-navbar-brand-font-size","$navbar-brand-height":"--pgn-navbar-brand-height","$navbar-brand-padding-y":"--pgn-navbar-brand-padding-y","$navbar-toggler-padding-y":"--pgn-navbar-toggler-padding-y","$navbar-toggler-padding-x":"--pgn-navbar-toggler-padding-x","$navbar-toggler-font-size":"--pgn-navbar-toggler-font-size","$navbar-toggler-border-radius":"--pgn-navbar-toggler-border-radius","$navbar-dark-color":"--pgn-navbar-dark-color-base","$navbar-dark-hover-color":"--pgn-navbar-dark-color-hover","$navbar-dark-active-color":"--pgn-navbar-dark-color-active","$navbar-dark-disabled-color":"--pgn-navbar-dark-color-disabled","$navbar-dark-toggler-border-color":"--pgn-navbar-dark-toggler-border-color","$navbar-dark-brand-color":"--pgn-navbar-dark-brand-color-base","$navbar-dark-brand-hover-color":"--pgn-navbar-dark-brand-color-hover","$navbar-light-color":"--pgn-navbar-light-color-base","$navbar-light-hover-color":"--pgn-navbar-light-color-hover","$navbar-light-active-color":"--pgn-navbar-light-color-active","$navbar-light-disabled-color":"--pgn-navbar-light-color-disabled","$navbar-light-toggler-border-color":"--pgn-navbar-light-toggler-border-color","$navbar-light-brand-color":"--pgn-navbar-light-brand-color-base","$navbar-light-brand-hover-color":"--pgn-navbar-light-brand-color-hover","$pagination-padding-y":"--pgn-pagination-padding-y-base","$pagination-padding-y-sm":"--pgn-pagination-padding-y-sm","$pagination-padding-y-lg":"--pgn-pagination-padding-y-lg","$pagination-padding-x":"--pgn-pagination-padding-x-base","$pagination-padding-x-sm":"--pgn-pagination-padding-x-sm","$pagination-padding-x-lg":"--pgn-pagination-padding-x-lg","$pagination-padding-icon":"--pgn-pagination-padding-icon","$pagination-margin-x":"--pgn-pagination-margin-x","$pagination-margin-y":"--pgn-pagination-margin-y","$pagination-line-height":"--pgn-pagination-line-height","$pagination-font-size-sm":"--pgn-pagination-font-size-sm","$pagination-icon-size":"--pgn-pagination-icon-size-base","$pagination-icon-size-sm":"--pgn-pagination-icon-size-sm","$pagination-icon-width":"--pgn-pagination-icon-width","$pagination-icon-height":"--pgn-pagination-icon-height","$pagination-toggle-border":"--pgn-pagination-toggle-border-base","$pagination-toggle-border-sm":"--pgn-pagination-toggle-border-sm","$pagination-secondary-height":"--pgn-pagination-secondary-height-base","$pagination-secondary-height-sm":"--pgn-pagination-secondary-height-sm","$pagination-color":"--pgn-pagination-color-base","$pagination-color-inverse":"--pgn-pagination-color-inverse","$pagination-hover-color":"--pgn-pagination-color-hover","$pagination-active-color":"--pgn-pagination-color-active","$pagination-disabled-color":"--pgn-pagination-color-disabled","$pagination-bg":"--pgn-pagination-bg-base","$pagination-hover-bg":"--pgn-pagination-bg-hover","$pagination-active-bg":"--pgn-pagination-bg-active","$pagination-disabled-bg":"--pgn-pagination-bg-disabled","$pagination-border-width":"--pgn-pagination-border-width","$pagination-border-color":"--pgn-pagination-border-color-base","$pagination-hover-border-color":"--pgn-pagination-border-color-hover","$pagination-active-border-color":"--pgn-pagination-border-color-active","$pagination-disabled-border-color":"--pgn-pagination-border-color-disabled","$pagination-border-radius-sm":"--pgn-pagination-border-radius-sm","$pagination-border-radius-lg":"--pgn-pagination-border-radius-lg","$pagination-focus-box-shadow":"--pgn-pagination-focus-box-shadow","$pagination-focus-outline":"--pgn-pagination-focus-box-outline","$pagination-focus-border-width":"--pgn-pagination-focus-border-width","$pagination-focus-color":"--pgn-pagination-focus-color-base","$pagination-focus-color-text":"--pgn-pagination-focus-color-text","$pagination-reduced-dropdown-max-height":"--pgn-reduced-dropdown-height-max","$pagination-reduced-dropdown-min-width":"--pgn-reduced-dropdown-width-min","$popover-font-size":"--pgn-popover-font-size","$popover-bg":"--pgn-popover-bg","$popover-max-width":"--pgn-popover-max-width","$popover-border-color":"--pgn-popover-border-color","$popover-border-radius":"--pgn-popover-border-radius","$popover-border-width":"--pgn-popover-border-border","$popover-box-shadow":"--pgn-popover-box-shadow","$popover-header-bg":"--pgn-popover-header-bg","$popover-header-color":"--pgn-popover-header-color","$popover-header-padding-y":"--pgn-popover-header-padding-y","$popover-header-padding-x":"--pgn-popover-header-padding-x","$popover-body-color":"--pgn-popover-body-color","$popover-body-padding-y":"--pgn-popover-body-padding-y","$popover-body-padding-x":"--pgn-popover-body-padding-x","$popover-icon-margin-right":"--pgn-popover-icon-margin-right","$popover-icon-height":"--pgn-popover-icon-height","$popover-icon-width":"--pgn-popover-icon-width","$popover-arrow-width":"--pgn-popover-arrow-width","$popover-arrow-height":"--pgn-popover-arrow-height","$popover-arrow-color":"--pgn-popover-arrow-color","$popover-success-bg":"--pgn-popover-success-bg","$popover-success-icon-color":"--pgn-popover-success-icon-color","$popover-warning-bg":"--pgn-popover-warning-bg","$popover-warning-icon-color":"--pgn-popover-warning-icon-color","$popover-danger-bg":"--pgn-popover-danger-bg","$popover-danger-icon-color":"--pgn-popover-danger-icon-color","$checkpoint-background-color":"--pgn-product-tour-checkpoint-color-background","$checkpoint-body-color":"--pgn-product-tour-checkpoint-color-body","$checkpoint-border-color":"--pgn-product-tour-checkpoint-color-border","$checkpoint-breadcrumb-color":"--pgn-product-tour-checkpoint-color-breadcrumb","$checkpoint-border-width":"--pgn-product-tour-checkpoint-width-border","$checkpoint-arrow-width":"--pgn-product-tour-checkpoint-width-arrow","$checkpoint-max-width":"--pgn-product-tour-checkpoint-width-max","$checkpoint-arrow-top-color":"--pgn-product-tour-checkpoint-arrow-color-top","$checkpoint-arrow-default-color":"--pgn-product-tour-checkpoint-arrow-color-default","$checkpoint-arrow-transparent":"--pgn-product-tour-checkpoint-arrow-transparent","$checkpoint-z-index":"--pgn-product-tour-checkpoint-zindex","$progress-height":"--pgn-progress-bar-height-base","$annotated-progress-height":"--pgn-progress-bar-height-annotated","$progress-font-size":"--pgn-progress-bar-font-size","$progress-bg":"--pgn-progress-bar-bg","$progress-border-radius":"--pgn-progress-bar-border-radius","$progress-bar-border-width":"--pgn-progress-bar-border-width","$progress-bar-border-color":"--pgn-progress-bar-border-color","$progress-box-shadow":"--pgn-progress-bar-box-shadow","$progress-bar-color":"--pgn-progress-bar-bar-color","$progress-bar-bg":"--pgn-progress-bar-bar-bg-base","$annotated-progress-bar-bg":"--pgn-progress-bar-bar-bg-annotated","$progress-bar-animation-timing":"--pgn-progress-bar-bar-animation-timing","$progress-bar-transition":"--pgn-progress-bar-bar-transition","$progress-threshold-circle":"--pgn-progress-bar-threshold-circle","$progress-hint-annotation-gap":"--pgn-progress-bar-hint-annotation-gap","$search-border-radius":"--pgn-search-field-border-radius","$search-border-color":"--pgn-search-field-border-color-base","$search-border-color-interaction":"--pgn-search-field-border-color-interaction","$search-border-focus-color":"--pgn-search-field-border-color-focus","$search-border-width":"--pgn-search-field-border-width-base","$search-border-width-interaction":"--pgn-search-field-border-width-interaction","$search-border-focus-width":"--pgn-search-field-border-width-focus","$search-line-height":"--pgn-search-field-line-height","$search-disabled-opacity":"--pgn-search-field-disabled-opacity","$search-button-margin":"--pgn-search-field-button-margin","$input-height-search":"--pgn-search-field-input-height-search","$selectable-box-padding":"--pgn-selectable-box-padding","$selectable-box-border-radius":"--pgn-selectable-box-border-radius","$selectable-box-space":"--pgn-selectable-box-box-space","$min-cols-number":"--pgn-selectable-box-cols-number-min","$max-cols-number":"--pgn-selectable-box-cols-number-max","$spinner-width":"--pgn-spinner-width","$spinner-height":"--pgn-spinner-height","$spinner-border-width":"--pgn-spinner-border-width","$spinner-width-sm":"--pgn-spinner-sm-width","$spinner-height-sm":"--pgn-spinner-sm-height","$spinner-border-width-sm":"--pgn-spinner-sm-border-width","$stack-gap":"--pgn-stack-gap","$sticky-offset":"--pgn-sticky-offset","$sticky-shadow-top":"--pgn-sticky-shadow-top","$sticky-shadow-bottom":"--pgn-sticky-shadow-bottom","$table-cell-padding":"--pgn-table-cell-padding-base","$table-cell-padding-sm":"--pgn-table-cell-padding-sm","$table-color":"--pgn-table-color-base","$table-hover-color":"--pgn-table-color-hover","$table-head-color":"--pgn-table-color-head","$table-bg":"--pgn-table-bg-base","$table-accent-bg":"--pgn-table-bg-accent","$table-hover-bg":"--pgn-table-bg-hover","$table-active-bg":"--pgn-table-bg-active","$table-head-bg":"--pgn-table-bg-head","$table-border-width":"--pgn-table-border-width","$table-border-color":"--pgn-table-border-color","$table-dark-color":"--pgn-table-dark-color-base","$table-dark-hover-color":"--pgn-table-dark-color-hover","$table-dark-border-color":"--pgn-table-dark-color-border","$table-dark-bg":"--pgn-table-dark-bg-base","$table-dark-accent-bg":"--pgn-table-dark-bg-accent","$table-dark-hover-bg":"--pgn-table-dark-bg-hover","$table-striped-order":"--pgn-table-striped-order","$table-caption-color":"--pgn-table-caption-color","$table-bg-level":"--pgn-table-level-bg","$table-border-level":"--pgn-table-level-border","$table-th-font-weight":"--pgn-table-th-font-weight","$tab-notification-height":"--pgn-tabs-notification-height","$tab-notification-width":"--pgn-tabs-notification-width","$tab-notification-font-size":"--pgn-tabs-notification-font-size","$toast-max-width":"--pgn-toast-max-width","$toast-padding-x":"--pgn-toast-padding-x","$toast-padding-y":"--pgn-toast-padding-y","$toast-font-size":"--pgn-toast-font-size","$toast-color":"--pgn-toast-color-base","$toast-background-color":"--pgn-toast-color-background","$toast-border-width":"--pgn-toast-border-width","$toast-border-color":"--pgn-toast-border-color","$toast-border-radius":"--pgn-toast-border-radius","$toast-box-shadow":"--pgn-toast-box-shadow","$toast-header-color":"--pgn-toast-header-color-base","$toast-header-background-color":"--pgn-toast-header-color-background","$toast-header-border-color":"--pgn-toast-header-color-border","$toast-container-gutter-lg":"--pgn-toast-container-gutter-lg","$toast-container-gutter-sm":"--pgn-toast-container-gutter-sm","$tooltip-font-size":"--pgn-tooltip-font-size","$tooltip-max-width":"--pgn-tooltip-max-width","$tooltip-color":"--pgn-tooltip-color-base","$tooltip-color-light":"--pgn-tooltip-color-light","$tooltip-bg":"--pgn-tooltip-bg-base","$tooltip-bg-light":"--pgn-tooltip-bg-light","$tooltip-border-radius":"--pgn-tooltip-border-radius","$tooltip-opacity":"--pgn-tooltip-opacity","$tooltip-padding-y":"--pgn-tooltip-padding-y","$tooltip-padding-x":"--pgn-tooltip-padding-x","$tooltip-margin":"--pgn-tooltip-margin","$tooltip-box-shadow":"--pgn-tooltip-box-shadow","$tooltip-arrow-width":"--pgn-tooltip-arrow-width","$tooltip-arrow-height":"--pgn-tooltip-arrow-height","$tooltip-arrow-color":"--pgn-tooltip-arrow-color-base","$tooltip-arrow-color-light":"--pgn-tooltip-arrow-color-light"} \ No newline at end of file diff --git a/tokens/build/scss-to-css-core.json b/tokens/build/scss-to-css-core.json index 79ff5364dc..6640f39936 100644 --- a/tokens/build/scss-to-css-core.json +++ b/tokens/build/scss-to-css-core.json @@ -1 +1 @@ -{"$border-width":"--pgn-border-width","$border-color":"--pgn-border-color","$border-radius":"--pgn-border-radius-base","$border-radius-lg":"--pgn-border-radius-lg","$border-radius-sm":"--pgn-border-radius-sm","$caret-width":"--pgn-caret-width","$caret-vertical-align":"--pgn-caret-vertical-align","$caret-spacing":"--pgn-caret-spacing","$body-bg":"--pgn-body-bg","$body-color":"--pgn-body-color","$white":"--pgn-color-white","$black":"--pgn-color-black","$blue":"--pgn-color-blue","$red":"--pgn-color-red","$green":"--pgn-color-green","$yellow":"--pgn-color-yellow","$teal":"--pgn-color-teal","$accent-a":"--pgn-color-accent-a","$accent-b":"--pgn-color-accent-b","$gray-100":"--pgn-color-gray-100","$gray-200":"--pgn-color-gray-200","$gray-300":"--pgn-color-gray-300","$gray-400":"--pgn-color-gray-400","$gray-500":"--pgn-color-gray-500","$gray-600":"--pgn-color-gray-600","$gray-700":"--pgn-color-gray-700","$gray-800":"--pgn-color-gray-800","$gray-900":"--pgn-color-gray-900","$primary-100":"--pgn-color-primary-100","$primary-200":"--pgn-color-primary-200","$primary-300":"--pgn-color-primary-300","$primary-400":"--pgn-color-primary-400","$primary-500":"--pgn-color-primary-500","$primary-600":"--pgn-color-primary-600","$primary-700":"--pgn-color-primary-700","$primary-800":"--pgn-color-primary-800","$primary-900":"--pgn-color-primary-900","$secondary-100":"--pgn-color-secondary-100","$secondary-200":"--pgn-color-secondary-200","$secondary-300":"--pgn-color-secondary-300","$secondary-400":"--pgn-color-secondary-400","$secondary-500":"--pgn-color-secondary-500","$secondary-600":"--pgn-color-secondary-600","$secondary-700":"--pgn-color-secondary-700","$secondary-800":"--pgn-color-secondary-800","$secondary-900":"--pgn-color-secondary-900","$brand-100":"--pgn-color-brand-100","$brand-200":"--pgn-color-brand-200","$brand-300":"--pgn-color-brand-300","$brand-400":"--pgn-color-brand-400","$brand-500":"--pgn-color-brand-500","$brand-600":"--pgn-color-brand-600","$brand-700":"--pgn-color-brand-700","$brand-800":"--pgn-color-brand-800","$brand-900":"--pgn-color-brand-900","$success-100":"--pgn-color-success-100","$success-200":"--pgn-color-success-200","$success-300":"--pgn-color-success-300","$success-400":"--pgn-color-success-400","$success-500":"--pgn-color-success-500","$success-600":"--pgn-color-success-600","$success-700":"--pgn-color-success-700","$success-800":"--pgn-color-success-800","$success-900":"--pgn-color-success-900","$info-100":"--pgn-color-info-100","$info-200":"--pgn-color-info-200","$info-300":"--pgn-color-info-300","$info-400":"--pgn-color-info-400","$info-500":"--pgn-color-info-500","$info-600":"--pgn-color-info-600","$info-700":"--pgn-color-info-700","$info-800":"--pgn-color-info-800","$info-900":"--pgn-color-info-900","$warning-100":"--pgn-color-warning-100","$warning-200":"--pgn-color-warning-200","$warning-300":"--pgn-color-warning-300","$warning-400":"--pgn-color-warning-400","$warning-500":"--pgn-color-warning-500","$warning-600":"--pgn-color-warning-600","$warning-700":"--pgn-color-warning-700","$warning-800":"--pgn-color-warning-800","$warning-900":"--pgn-color-warning-900","$danger-100":"--pgn-color-danger-100","$danger-200":"--pgn-color-danger-200","$danger-300":"--pgn-color-danger-300","$danger-400":"--pgn-color-danger-400","$danger-500":"--pgn-color-danger-500","$danger-600":"--pgn-color-danger-600","$danger-700":"--pgn-color-danger-700","$danger-800":"--pgn-color-danger-800","$danger-900":"--pgn-color-danger-900","$light-100":"--pgn-color-light-100","$light-200":"--pgn-color-light-200","$light-300":"--pgn-color-light-300","$light-400":"--pgn-color-light-400","$light-500":"--pgn-color-light-500","$light-600":"--pgn-color-light-600","$light-700":"--pgn-color-light-700","$light-800":"--pgn-color-light-800","$light-900":"--pgn-color-light-900","$dark-100":"--pgn-color-dark-100","$dark-200":"--pgn-color-dark-200","$dark-300":"--pgn-color-dark-300","$dark-400":"--pgn-color-dark-400","$dark-500":"--pgn-color-dark-500","$dark-600":"--pgn-color-dark-600","$dark-700":"--pgn-color-dark-700","$dark-800":"--pgn-color-dark-800","$dark-900":"--pgn-color-dark-900","$text-muted":"--pgn-text-muted","$input-btn-padding-y":"--pgn-core-input-btn-padding-y","$input-btn-padding-x":"--pgn-core-input-btn-padding-x","$input-btn-padding-y-sm":"--pgn-core-input-btn-padding-sm-y","$input-btn-padding-x-sm":"--pgn-core-input-btn-padding-sm-x","$input-btn-padding-y-lg":"--pgn-core-input-btn-padding-lg-y","$input-btn-padding-x-lg":"--pgn-core-input-btn-padding-lg-x","$input-btn-font-family":"--pgn-core-input-btn-font-family","$input-btn-font-size":"--pgn-core-input-btn-font-size-base","$input-btn-font-size-sm":"--pgn-core-input-btn-font-size-sm","$input-btn-font-size-lg":"--pgn-core-input-btn-font-size-lg","$input-btn-line-height":"--pgn-core-input-btn-line-height-base","$input-btn-line-height-sm":"--pgn-core-input-btn-line-height-sm","$input-btn-line-height-lg":"--pgn-core-input-btn-line-height-lg","$input-btn-focus-width":"--pgn-core-input-btn-focus-width","$input-btn-border-width":"--pgn-core-input-btn-border-width","$box-shadow-down-1":"--pgn-box-shadow-down-1","$box-shadow-down-2":"--pgn-box-shadow-down-2","$box-shadow-down-3":"--pgn-box-shadow-down-3","$box-shadow-down-4":"--pgn-box-shadow-down-4","$box-shadow-down-5":"--pgn-box-shadow-down-5","$box-shadow-left-1":"--pgn-box-shadow-left-1","$box-shadow-left-2":"--pgn-box-shadow-left-2","$box-shadow-left-3":"--pgn-box-shadow-left-3","$box-shadow-left-4":"--pgn-box-shadow-left-4","$box-shadow-left-5":"--pgn-box-shadow-left-5","$box-shadow-up-1":"--pgn-box-shadow-up-1","$box-shadow-up-2":"--pgn-box-shadow-up-2","$box-shadow-up-3":"--pgn-box-shadow-up-3","$box-shadow-up-4":"--pgn-box-shadow-up-4","$box-shadow-up-5":"--pgn-box-shadow-up-5","$box-shadow-right-1":"--pgn-box-shadow-right-1","$box-shadow-right-2":"--pgn-box-shadow-right-2","$box-shadow-right-3":"--pgn-box-shadow-right-3","$box-shadow-right-4":"--pgn-box-shadow-right-4","$box-shadow-right-5":"--pgn-box-shadow-right-5","$box-shadow-centered-1":"--pgn-box-shadow-centered-1","$box-shadow-centered-2":"--pgn-box-shadow-centered-2","$box-shadow-centered-3":"--pgn-box-shadow-centered-3","$box-shadow-centered-4":"--pgn-box-shadow-centered-4","$box-shadow-centered-5":"--pgn-box-shadow-centered-5","$grid-columns":"--pgn-grid-columns","$grid-gutter-width":"--pgn-grid-gutter-width","$grid-row-columns":"--pgn-grid-row-columns","$table-cell-padding":"--pgn-table-cell-padding-base","$table-cell-padding-sm":"--pgn-table-cell-padding-sm","$table-caption-color":"--pgn-table-color-caption","$table-border-color":"--pgn-table-color-border","$table-th-font-weight":"--pgn-table-th-font-weight","$zindex-dropdown":"--pgn-zindex-dropdown","$zindex-sticky":"--pgn-zindex-sticky","$zindex-fixed":"--pgn-zindex-fixed","$zindex-sheet-backdrop":"--pgn-zindex-sheet-backdrop","$zindex-sheet":"--pgn-zindex-sheet","$zindex-modal-backdrop":"--pgn-zindex-modal-backdrop","$zindex-modal":"--pgn-zindex-modal","$zindex-popover":"--pgn-zindex-popover","$zindex-tooltip":"--pgn-zindex-tooltip","$link-color":"--pgn-link-color","$link-decoration":"--pgn-link-decoration","$link-hover-color":"--pgn-link-hover-color","$link-hover-decoration":"--pgn-link-hover-decoration","$inline-link-color":"--pgn-link-brand-inline-color","$inline-link-decoration":"--pgn-link-brand-inline-decoration","$inline-link-decoration-color":"--pgn-link-brand-inline-decoration-color","$inline-link-hover-color":"--pgn-link-brand-inline-hover-color","$inline-link-hover-decoration":"--pgn-link-brand-inline-hover-decoration","$inline-link-hover-decoration-color":"--pgn-link-brand-inline-hover-decoration-color","$muted-link-color":"--pgn-link-muted-color","$muted-link-decoration":"--pgn-link-muted-decoration","$muted-link-hover-color":"--pgn-link-muted-hover-color","$muted-link-hover-decoration":"--pgn-link-muted-hover-decoration","$muted-inline-link-color":"--pgn-link-muted-inline-color","$muted-inline-link-decoration":"--pgn-link-muted-inline-decoration","$muted-inline-link-decoration-color":"--pgn-link-muted-inline-decoration-color","$muted-inline-link-hover-color":"--pgn-link-muted-inline-hover-color","$muted-inline-link-hover-decoration":"--pgn-link-muted-inline-hover-decoration","$muted-inline-link-hover-decoration-color":"--pgn-link-muted-inline-hover-decoration-color","$brand-link-color":"--pgn-link-brand-color","$brand-link-decoration":"--pgn-link-brand-decoration","$brand-link-hover-color":"--pgn-link-brand-hover-color","$brand-link-hover-decoration":"--pgn-link-brand-hover-decoration","$transition-base":"--pgn-transition-base","$transition-fade":"--pgn-transition-fade","$transition-collapse":"--pgn-transition-collapse","$display1-size":"--pgn-display-size-1","$display2-size":"--pgn-display-size-2","$display3-size":"--pgn-display-size-3","$display4-size":"--pgn-display-size-4","$display-mobile-size":"--pgn-display-size-mobile","$display1-weight":"--pgn-display-weight-1","$display2-weight":"--pgn-display-weight-2","$display3-weight":"--pgn-display-weight-3","$display4-weight":"--pgn-display-weight-4","$display-line-height":"--pgn-display-line-height-base","$display-mobile-line-height":"--pgn-display-line-height-mobile","$font-family-sans-serif":"--pgn-font-family-sans-serif","$font-family-serif":"--pgn-font-family-serif","$font-family-monospace":"--pgn-font-family-monospace","$font-family-base":"--pgn-font-family-base","$font-size-base":"--pgn-font-size-base","$font-size-lg":"--pgn-font-size-lg","$font-size-sm":"--pgn-font-size-sm","$font-size-xs":"--pgn-font-size-xs","$h1-font-size":"--pgn-font-size-h1","$h2-font-size":"--pgn-font-size-h2","$h3-font-size":"--pgn-font-size-h3","$h4-font-size":"--pgn-font-size-h4","$h5-font-size":"--pgn-font-size-h5","$h6-font-size":"--pgn-font-size-h6","$h1-mobile-font-size":"--pgn-font-size-mobile-h1","$h2-mobile-font-size":"--pgn-font-size-mobile-h2","$h3-mobile-font-size":"--pgn-font-size-mobile-h3","$h4-mobile-font-size":"--pgn-font-size-mobile-h4","$h5-mobile-font-size":"--pgn-font-size-mobile-h5","$h6-mobile-font-size":"--pgn-font-size-mobile-h6","$font-weight-lighter":"--pgn-font-weight-lighter","$font-weight-light":"--pgn-font-weight-light","$font-weight-normal":"--pgn-font-weight-normal","$font-weight-semi-bold":"--pgn-font-weight-semi-bold","$font-weight-bold":"--pgn-font-weight-bold","$font-weight-bolder":"--pgn-font-weight-bolder","$font-weight-base":"--pgn-font-weight-base","$headings-margin-bottom":"--pgn-headings-margin-bottom","$headings-font-family":"--pgn-headings-font-family","$headings-font-weight":"--pgn-headings-font-weight","$headings-line-height":"--pgn-headings-line-height","$headings-color":"--pgn-headings-color","$line-height-base":"--pgn-line-height-base","$line-height-lg":"--pgn-line-height-lg","$line-height-sm":"--pgn-line-height-sm","$paragraph-margin-bottom":"--pgn-paragraph-margin-bottom"} \ No newline at end of file +{"$border-width":"--pgn-border-width","$border-color":"--pgn-border-color","$border-radius":"--pgn-border-radius-base","$border-radius-lg":"--pgn-border-radius-lg","$border-radius-sm":"--pgn-border-radius-sm","$hr-border-color":"--pgn-border-hr-color","$hr-border-width":"--pgn-border-hr-width","$hr-margin-y":"--pgn-border-hr-margin-y","$caret-width":"--pgn-caret-width","$caret-vertical-align":"--pgn-caret-vertical-align","$caret-spacing":"--pgn-caret-spacing","$body-bg":"--pgn-body-bg","$body-color":"--pgn-body-color","$white":"--pgn-color-white","$black":"--pgn-color-black","$blue":"--pgn-color-blue","$red":"--pgn-color-red","$green":"--pgn-color-green","$yellow":"--pgn-color-yellow","$teal":"--pgn-color-teal","$accent-a":"--pgn-color-accent-a","$accent-b":"--pgn-color-accent-b","$theme-color-interval":"--pgn-color-theme-interval","$gray-100":"--pgn-color-gray-100","$gray-200":"--pgn-color-gray-200","$gray-300":"--pgn-color-gray-300","$gray-400":"--pgn-color-gray-400","$gray-500":"--pgn-color-gray-500","$gray-600":"--pgn-color-gray-600","$gray-700":"--pgn-color-gray-700","$gray-800":"--pgn-color-gray-800","$gray-900":"--pgn-color-gray-900","$gray":"--pgn-color-gray-base","$primary-100":"--pgn-color-primary-100","$primary-200":"--pgn-color-primary-200","$primary-300":"--pgn-color-primary-300","$primary-400":"--pgn-color-primary-400","$primary-500":"--pgn-color-primary-500","$primary-600":"--pgn-color-primary-600","$primary-700":"--pgn-color-primary-700","$primary-800":"--pgn-color-primary-800","$primary-900":"--pgn-color-primary-900","$primary":"--pgn-color-primary-base","$secondary-100":"--pgn-color-secondary-100","$secondary-200":"--pgn-color-secondary-200","$secondary-300":"--pgn-color-secondary-300","$secondary-400":"--pgn-color-secondary-400","$secondary-500":"--pgn-color-secondary-500","$secondary-600":"--pgn-color-secondary-600","$secondary-700":"--pgn-color-secondary-700","$secondary-800":"--pgn-color-secondary-800","$secondary-900":"--pgn-color-secondary-900","$secondary":"--pgn-color-secondary-base","$brand-100":"--pgn-color-brand-100","$brand-200":"--pgn-color-brand-200","$brand-300":"--pgn-color-brand-300","$brand-400":"--pgn-color-brand-400","$brand-500":"--pgn-color-brand-500","$brand-600":"--pgn-color-brand-600","$brand-700":"--pgn-color-brand-700","$brand-800":"--pgn-color-brand-800","$brand-900":"--pgn-color-brand-900","$brand":"--pgn-color-brand-base","$success-100":"--pgn-color-success-100","$success-200":"--pgn-color-success-200","$success-300":"--pgn-color-success-300","$success-400":"--pgn-color-success-400","$success-500":"--pgn-color-success-500","$success-600":"--pgn-color-success-600","$success-700":"--pgn-color-success-700","$success-800":"--pgn-color-success-800","$success-900":"--pgn-color-success-900","$success":"--pgn-color-success-base","$info-100":"--pgn-color-info-100","$info-200":"--pgn-color-info-200","$info-300":"--pgn-color-info-300","$info-400":"--pgn-color-info-400","$info-500":"--pgn-color-info-500","$info-600":"--pgn-color-info-600","$info-700":"--pgn-color-info-700","$info-800":"--pgn-color-info-800","$info-900":"--pgn-color-info-900","$info":"--pgn-color-info-base","$warning-100":"--pgn-color-warning-100","$warning-200":"--pgn-color-warning-200","$warning-300":"--pgn-color-warning-300","$warning-400":"--pgn-color-warning-400","$warning-500":"--pgn-color-warning-500","$warning-600":"--pgn-color-warning-600","$warning-700":"--pgn-color-warning-700","$warning-800":"--pgn-color-warning-800","$warning-900":"--pgn-color-warning-900","$warning":"--pgn-color-warning-base","$danger-100":"--pgn-color-danger-100","$danger-200":"--pgn-color-danger-200","$danger-300":"--pgn-color-danger-300","$danger-400":"--pgn-color-danger-400","$danger-500":"--pgn-color-danger-500","$danger-600":"--pgn-color-danger-600","$danger-700":"--pgn-color-danger-700","$danger-800":"--pgn-color-danger-800","$danger-900":"--pgn-color-danger-900","$danger":"--pgn-color-danger-base","$light-100":"--pgn-color-light-100","$light-200":"--pgn-color-light-200","$light-300":"--pgn-color-light-300","$light-400":"--pgn-color-light-400","$light-500":"--pgn-color-light-500","$light-600":"--pgn-color-light-600","$light-700":"--pgn-color-light-700","$light-800":"--pgn-color-light-800","$light-900":"--pgn-color-light-900","$light":"--pgn-color-light-base","$dark-100":"--pgn-color-dark-100","$dark-200":"--pgn-color-dark-200","$dark-300":"--pgn-color-dark-300","$dark-400":"--pgn-color-dark-400","$dark-500":"--pgn-color-dark-500","$dark-600":"--pgn-color-dark-600","$dark-700":"--pgn-color-dark-700","$dark-800":"--pgn-color-dark-800","$dark-900":"--pgn-color-dark-900","$dark":"--pgn-color-dark-base","$component-active-color":"--pgn-component-active-color","$component-active-bg":"--pgn-component-active-bg","$text-muted":"--pgn-text-muted","$spacer":"--pgn-core-spacer","$input-btn-padding-y":"--pgn-core-input-btn-padding-y","$input-btn-padding-x":"--pgn-core-input-btn-padding-x","$input-btn-padding-y-sm":"--pgn-core-input-btn-padding-sm-y","$input-btn-padding-x-sm":"--pgn-core-input-btn-padding-sm-x","$input-btn-padding-y-lg":"--pgn-core-input-btn-padding-lg-y","$input-btn-padding-x-lg":"--pgn-core-input-btn-padding-lg-x","$input-btn-font-family":"--pgn-core-input-btn-font-family","$input-btn-font-size":"--pgn-core-input-btn-font-size-base","$input-btn-font-size-sm":"--pgn-core-input-btn-font-size-sm","$input-btn-font-size-lg":"--pgn-core-input-btn-font-size-lg","$input-btn-line-height":"--pgn-core-input-btn-line-height-base","$input-btn-line-height-sm":"--pgn-core-input-btn-line-height-sm","$input-btn-line-height-lg":"--pgn-core-input-btn-line-height-lg","$input-btn-focus-width":"--pgn-core-input-btn-focus-width","$input-btn-focus-color":"--pgn-core-input-btn-focus-color","$input-btn-focus-box-shadow":"--pgn-core-input-btn-focus-box-shadow","$input-btn-border-width":"--pgn-core-input-btn-border-width","$blockquote-small-font-size":"--pgn-core-blockquote-small-font-size","$blockquote-font-size":"--pgn-core-blockquote-font-size","$mark-padding":"--pgn-core-mark-padding","$mark-bg":"--pgn-core-mark-bg","$dt-font-weight":"--pgn-core-dt-font-weight","$list-inline-padding":"--pgn-core-list-inline-padding","$level-1-box-shadow":"--pgn-box-shadow-level-1","$level-2-box-shadow":"--pgn-box-shadow-level-2","$level-3-box-shadow":"--pgn-box-shadow-level-3","$level-4-box-shadow":"--pgn-box-shadow-level-4","$level-5-box-shadow":"--pgn-box-shadow-level-5","$box-shadow":"--pgn-box-shadow-base","$box-shadow-sm":"--pgn-box-shadow-sm","$box-shadow-lg":"--pgn-box-shadow-lg","$box-shadow-down-1":"--pgn-box-shadow-down-1","$box-shadow-down-2":"--pgn-box-shadow-down-2","$box-shadow-down-3":"--pgn-box-shadow-down-3","$box-shadow-down-4":"--pgn-box-shadow-down-4","$box-shadow-down-5":"--pgn-box-shadow-down-5","$box-shadow-left-1":"--pgn-box-shadow-left-1","$box-shadow-left-2":"--pgn-box-shadow-left-2","$box-shadow-left-3":"--pgn-box-shadow-left-3","$box-shadow-left-4":"--pgn-box-shadow-left-4","$box-shadow-left-5":"--pgn-box-shadow-left-5","$box-shadow-up-1":"--pgn-box-shadow-up-1","$box-shadow-up-2":"--pgn-box-shadow-up-2","$box-shadow-up-3":"--pgn-box-shadow-up-3","$box-shadow-up-4":"--pgn-box-shadow-up-4","$box-shadow-up-5":"--pgn-box-shadow-up-5","$box-shadow-right-1":"--pgn-box-shadow-right-1","$box-shadow-right-2":"--pgn-box-shadow-right-2","$box-shadow-right-3":"--pgn-box-shadow-right-3","$box-shadow-right-4":"--pgn-box-shadow-right-4","$box-shadow-right-5":"--pgn-box-shadow-right-5","$box-shadow-centered-1":"--pgn-box-shadow-centered-1","$box-shadow-centered-2":"--pgn-box-shadow-centered-2","$box-shadow-centered-3":"--pgn-box-shadow-centered-3","$box-shadow-centered-4":"--pgn-box-shadow-centered-4","$box-shadow-centered-5":"--pgn-box-shadow-centered-5","$grid-columns":"--pgn-grid-columns","$grid-gutter-width":"--pgn-grid-gutter-width","$grid-row-columns":"--pgn-grid-row-columns","$list-group-color":"--pgn-list-group-color","$list-group-bg":"--pgn-list-group-bg-base","$list-group-hover-bg":"--pgn-list-group-bg-hover","$list-group-border-color":"--pgn-list-group-border-color","$list-group-border-width":"--pgn-list-group-border-width","$list-group-border-radius":"--pgn-list-group-border-radius","$list-group-item-padding-y":"--pgn-list-group-item-padding-y","$list-group-item-padding-x":"--pgn-list-group-item-padding-x","$list-group-active-color":"--pgn-list-group-active-color-base","$list-group-active-border-color":"--pgn-list-group-active-color-border","$list-group-active-bg":"--pgn-list-group-active-bg","$list-group-disabled-color":"--pgn-list-group-disabled-color","$list-group-disabled-bg":"--pgn-list-group-disabled-bg","$list-group-action-color":"--pgn-list-group-action-color-base","$list-group-action-hover-color":"--pgn-list-group-action-color-hover","$list-group-action-active-color":"--pgn-list-group-action-active-color","$list-group-action-active-bg":"--pgn-list-group-action-active-bg","$zindex-dropdown":"--pgn-zindex-dropdown","$zindex-sticky":"--pgn-zindex-sticky","$zindex-fixed":"--pgn-zindex-fixed","$zindex-sheet-backdrop":"--pgn-zindex-sheet-backdrop","$zindex-sheet":"--pgn-zindex-sheet","$zindex-modal-backdrop":"--pgn-zindex-modal-backdrop","$zindex-modal":"--pgn-zindex-modal","$zindex-popover":"--pgn-zindex-popover","$zindex-tooltip":"--pgn-zindex-tooltip","$link-color":"--pgn-link-color","$link-decoration":"--pgn-link-decoration","$link-hover-color":"--pgn-link-hover-color","$link-hover-decoration":"--pgn-link-hover-decoration","$inline-link-color":"--pgn-link-brand-inline-color","$inline-link-decoration":"--pgn-link-brand-inline-decoration","$inline-link-decoration-color":"--pgn-link-brand-inline-decoration-color","$inline-link-hover-color":"--pgn-link-brand-inline-hover-color","$inline-link-hover-decoration":"--pgn-link-brand-inline-hover-decoration","$inline-link-hover-decoration-color":"--pgn-link-brand-inline-hover-decoration-color","$muted-link-color":"--pgn-link-muted-color","$muted-link-decoration":"--pgn-link-muted-decoration","$muted-link-hover-color":"--pgn-link-muted-hover-color","$muted-link-hover-decoration":"--pgn-link-muted-hover-decoration","$muted-inline-link-color":"--pgn-link-muted-inline-color","$muted-inline-link-decoration":"--pgn-link-muted-inline-decoration","$muted-inline-link-decoration-color":"--pgn-link-muted-inline-decoration-color","$muted-inline-link-hover-color":"--pgn-link-muted-inline-hover-color","$muted-inline-link-hover-decoration":"--pgn-link-muted-inline-hover-decoration","$muted-inline-link-hover-decoration-color":"--pgn-link-muted-inline-hover-decoration-color","$brand-link-color":"--pgn-link-brand-color","$brand-link-decoration":"--pgn-link-brand-decoration","$brand-link-hover-color":"--pgn-link-brand-hover-color","$brand-link-hover-decoration":"--pgn-link-brand-hover-decoration","$emphasized-link-hover-darken-percentage":"--pgn-link-emphasized-hover-darken-percentage","$transition-base":"--pgn-transition-base","$transition-fade":"--pgn-transition-fade","$transition-collapse":"--pgn-transition-collapse","$display1-size":"--pgn-display-size-1","$display2-size":"--pgn-display-size-2","$display3-size":"--pgn-display-size-3","$display4-size":"--pgn-display-size-4","$display-mobile-size":"--pgn-display-size-mobile","$display1-weight":"--pgn-display-weight-1","$display2-weight":"--pgn-display-weight-2","$display3-weight":"--pgn-display-weight-3","$display4-weight":"--pgn-display-weight-4","$display-line-height":"--pgn-display-line-height-base","$display-mobile-line-height":"--pgn-display-line-height-mobile","$font-family-base":"--pgn-font-family-base","$font-family-sans-serif":"--pgn-font-family-sans-serif","$font-family-serif":"--pgn-font-family-serif","$font-family-monospace":"--pgn-font-family-monospace","$font-size-base":"--pgn-font-size-base","$font-size-lg":"--pgn-font-size-lg","$font-size-sm":"--pgn-font-size-sm","$font-size-xs":"--pgn-font-size-xs","$small-font-size":"--pgn-font-size-small-base","$x-small-font-size":"--pgn-font-size-small-x","$h1-font-size":"--pgn-font-size-h1","$h2-font-size":"--pgn-font-size-h2","$h3-font-size":"--pgn-font-size-h3","$h4-font-size":"--pgn-font-size-h4","$h5-font-size":"--pgn-font-size-h5","$h6-font-size":"--pgn-font-size-h6","$h1-mobile-font-size":"--pgn-font-size-mobile-h1","$h2-mobile-font-size":"--pgn-font-size-mobile-h2","$h3-mobile-font-size":"--pgn-font-size-mobile-h3","$h4-mobile-font-size":"--pgn-font-size-mobile-h4","$h5-mobile-font-size":"--pgn-font-size-mobile-h5","$h6-mobile-font-size":"--pgn-font-size-mobile-h6","$lead-font-size":"--pgn-font-size-lead","$font-weight-lighter":"--pgn-font-weight-lighter","$font-weight-light":"--pgn-font-weight-light","$font-weight-normal":"--pgn-font-weight-normal","$font-weight-semi-bold":"--pgn-font-weight-semi-bold","$font-weight-bold":"--pgn-font-weight-bold","$font-weight-bolder":"--pgn-font-weight-bolder","$font-weight-base":"--pgn-font-weight-base","$lead-font-weight":"--pgn-font-weight-lead","$headings-margin-bottom":"--pgn-headings-margin-bottom","$headings-font-family":"--pgn-headings-font-family","$headings-font-weight":"--pgn-headings-font-weight","$headings-line-height":"--pgn-headings-line-height","$headings-color":"--pgn-headings-color","$line-height-base":"--pgn-line-height-base","$line-height-lg":"--pgn-line-height-lg","$line-height-sm":"--pgn-line-height-sm","$paragraph-margin-bottom":"--pgn-paragraph-margin-bottom","$pgn-www-zindex-header":"--pgn-www-zindex-header","$pgn-www-zindex-sheet":"--pgn-www-zindex-sheet","$pgn-www-zindex-sheet-backdrop":"--pgn-www-zindex-sheet-backdrop","$pgn-www-zindex-modal":"--pgn-www-zindex-modal"} \ No newline at end of file diff --git a/tokens/build/variables.css b/tokens/build/variables.css index 474dbec35b..80cfaab7c9 100644 --- a/tokens/build/variables.css +++ b/tokens/build/variables.css @@ -1,4 +1,8 @@ :root { + --pgn-www-zindex-modal: 2503; + --pgn-www-zindex-sheet-backdrop: 2501; + --pgn-www-zindex-sheet: 2502; + --pgn-www-zindex-header: 2500; --pgn-paragraph-margin-bottom: 1rem; --pgn-line-height-sm: 1.5; --pgn-line-height-lg: 1.5; @@ -6,6 +10,7 @@ --pgn-headings-line-height: 1.25; --pgn-headings-font-family: null; --pgn-headings-margin-bottom: .5rem; + --pgn-font-weight-lead: null; --pgn-font-weight-bolder: bolder; --pgn-font-weight-bold: 700; --pgn-font-weight-semi-bold: 500; @@ -41,6 +46,7 @@ --pgn-transition-collapse: height .35s ease; --pgn-transition-fade: opacity .15s linear; --pgn-transition-base: all .2s ease-in-out; + --pgn-link-emphasized-hover-darken-percentage: 15%; --pgn-link-brand-inline-hover-decoration-color: #003C5E; --pgn-link-brand-inline-hover-decoration: underline; --pgn-link-brand-inline-hover-color: #003C5E; @@ -90,6 +96,9 @@ --pgn-size-base-75: 75rem; --pgn-size-base-50: 50rem; --pgn-size-base-25: 25rem; + --pgn-list-group-item-padding-x: 1.25rem; + --pgn-list-group-item-padding-y: .75rem; + --pgn-list-group-color: null; --pgn-grid-row-columns: 6; --pgn-grid-gutter-width: 24px; --pgn-grid-columns: 12; @@ -124,18 +133,24 @@ --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); + --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); + --pgn-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); --pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-core-list-inline-padding: .5rem; + --pgn-core-mark-bg: #FFF243; + --pgn-core-mark-padding: .2em; --pgn-core-input-btn-focus-width: 1px; --pgn-core-input-btn-line-height-sm: 1.4286; --pgn-core-input-btn-line-height-base: 1.3333; --pgn-core-input-btn-font-size-lg: 1.325rem; --pgn-core-input-btn-font-size-sm: .875rem; --pgn-core-input-btn-font-size-base: 1.125rem; - --pgn-core-input-btn-font-family: null; + --pgn-core-input-btn-font-family: inherit; --pgn-core-input-btn-padding-lg-x: 1.25rem; --pgn-core-input-btn-padding-lg-y: .6875rem; --pgn-core-input-btn-padding-sm-x: .75rem; @@ -279,20 +294,21 @@ --pgn-modal-footer-padding-y: 1.5rem; --pgn-modal-footer-padding-x: 1rem; --pgn-modal-footer-margin-between: .5rem; - --pgn-modal-inner-padding: 1.5rem; + --pgn-modal-inner-padding-bottom: .7rem; + --pgn-modal-inner-padding-base: 1.5rem; --pgn-menu-border-hover: transparent; --pgn-menu-border-active: transparent; --pgn-menu-border-base: transparent; --pgn-image-figure-caption-font-size: 90%; --pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); --pgn-image-thumbnail-padding: .25rem; + --pgn-icon-button-bg: transparent; + --pgn-icon-button-diameter-sm: 2.25rem; + --pgn-icon-button-diameter-md: 2.75rem; --pgn-icon-lg: 1.75rem; --pgn-icon-md: 1.5rem; --pgn-icon-sm: 1.25rem; --pgn-icon-inline: .8em; - --pgn-icon-button-bg: transparent; - --pgn-icon-button-diameter-sm: 2.25rem; - --pgn-icon-button-diameter-md: 2.75rem; --pgn-form-select-icon-padding: .5625rem; --pgn-form-control-icon-width: 32px; --pgn-form-feedback-tooltip-opacity: .9; @@ -413,12 +429,14 @@ --pgn-card-cap-color: null; --pgn-card-cap-bg: rgba(0, 0, 0, .03); --pgn-card-border-color-focus: rgba(0, 0, 0, .5); + --pgn-card-border-color-base: rgba(0, 0, 0, .125); --pgn-card-border-radius-logo: .25rem; --pgn-card-border-radius-image: .3125rem; --pgn-card-spacer-y: .75rem; --pgn-card-spacer-x: 1.25rem; --pgn-btn-transition: null; --pgn-btn-block-spacing-y: .5rem; + --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1); --pgn-btn-tertiary-inverse-bg-base: transparent; --pgn-btn-tertiary-bg-base: transparent; --pgn-btn-disabled-opacity: .65; @@ -444,6 +462,9 @@ --pgn-badge-padding-x-pill: .6em; --pgn-badge-padding-x-base: .5rem; --pgn-badge-font-size: 75%; + --pgn-avatar-button-padding-left-lg: .25em; + --pgn-avatar-button-padding-left-sm: .25em; + --pgn-avatar-button-padding-left-base: .25em; --pgn-avatar-size-huge: 18.75rem; --pgn-avatar-size-xxl: 11.5rem; --pgn-avatar-size-xl: 6rem; @@ -452,9 +473,6 @@ --pgn-avatar-size-xs: 1.5rem; --pgn-avatar-size-base: 3rem; --pgn-avatar-border-radius: 100%; - --pgn-avatar-button-padding-left-lg: .25em; - --pgn-avatar-button-padding-left-sm: .25em; - --pgn-avatar-button-padding-left-base: .25em; --pgn-annotation-arrow-border-width: .5rem; --pgn-annotation-arrow-side-margin: .25rem; --pgn-annotation-max-width: 18.75rem; @@ -560,6 +578,7 @@ --pgn-color-gray-300: #ADADAD; --pgn-color-gray-200: #CCCCCC; --pgn-color-gray-100: #EBEBEB; + --pgn-color-theme-interval: 8%; --pgn-color-accent-b: #FFEE88; --pgn-color-accent-a: #00BBF9; --pgn-color-teal: #006DAA; @@ -579,6 +598,7 @@ --pgn-headings-color: var(--pgn-color-black); --pgn-headings-font-weight: var(--pgn-font-weight-bold); --pgn-font-weight-base: var(--pgn-font-weight-normal); + --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25); --pgn-font-size-mobile-h6: var(--pgn-font-size-h6); --pgn-font-size-mobile-h5: var(--pgn-font-size-h5); --pgn-font-size-mobile-h4: var(--pgn-font-size-h4); @@ -589,9 +609,17 @@ --pgn-display-weight-3: var(--pgn-font-weight-bold); --pgn-display-weight-2: var(--pgn-font-weight-bold); --pgn-display-weight-1: var(--pgn-font-weight-bold); - --pgn-box-shadow-lg: 0 .25rem .5rem rgba(var(--pgn-color-black), .3); - --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(var(--pgn-color-black), .2); - --pgn-box-shadow-base: 0 .125rem .25rem rgba(var(--pgn-color-black), .3); + --pgn-list-group-action-active-bg: var(--pgn-color-gray-200); + --pgn-list-group-action-color-base: var(--pgn-color-gray-700); + --pgn-list-group-disabled-color: var(--pgn-color-gray-600); + --pgn-list-group-border-radius: var(--pgn-border-radius-base); + --pgn-list-group-border-width: var(--pgn-border-width); + --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125); + --pgn-list-group-bg-hover: var(--pgn-color-gray-100); + --pgn-list-group-bg-base: var(--pgn-color-white); + --pgn-core-dt-font-weight: var(--pgn-font-weight-bold); + --pgn-core-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25); + --pgn-core-blockquote-small-font-size: var(--pgn-font-size-small-base); --pgn-core-input-btn-border-width: var(--pgn-border-width); --pgn-core-input-btn-focus-box-shadow: 0 0 0 var(--pgn-core-input-btn-focus-width) var(--pgn-core-input-btn-focus-color); --pgn-core-input-btn-line-height-lg: var(--pgn-line-height-lg); @@ -670,7 +698,7 @@ --pgn-modal-content-border-radius: var(--pgn-border-radius-lg); --pgn-modal-content-bg: var(--pgn-color-white); --pgn-modal-title-line-height: var(--pgn-line-height-base); - --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-y) var(--pgn-modal-footer-padding-x); + --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y); --pgn-menu-background-base: var(--pgn-btn-tertiary-bg-base); --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base); --pgn-image-thumbnail-border-color: var(--pgn-color-gray-200); @@ -729,6 +757,7 @@ --pgn-dropdown-bg: var(--pgn-color-white); --pgn-dropdown-font-size: var(--pgn-font-size-base); --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item); + --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); --pgn-data-table-border: 1px solid var(--pgn-color-gray-200); --pgn-data-table-background-color: var(--pgn-color-white); --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x); @@ -755,10 +784,9 @@ --pgn-card-margin-deck: var(--pgn-card-margin-group); --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max); --pgn-card-bg: var(--pgn-color-white); - --pgn-card-border-color-base: rgba(var(--pgn-color-black), .125); --pgn-card-border-radius-base: var(--pgn-border-radius-base); --pgn-card-border-width: var(--pgn-border-width); - --pgn-btn-tertiary-inverse-bg-hover: rgba(var(--pgn-color-white), .1); + --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); --pgn-btn-tertiary-inverse-color: var(--pgn-color-white); --pgn-btn-tertiary-color: var(--pgn-color-gray-700); --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(var(--pgn-color-white), .15), 0 1px 1px rgba(var(--pgn-color-black), .075); @@ -772,12 +800,14 @@ --pgn-btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm); --pgn-btn-font-size-base: var(--pgn-core-input-btn-font-size-base); --pgn-btn-font-family: var(--pgn-core-input-btn-font-family); + --pgn-btn-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x); --pgn-btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); --pgn-btn-padding-x-base: var(--pgn-core-input-btn-padding-x); - --pgn-btn-padding-y-sm-x: var(--pgn-core-input-btn-padding-sm-x); - --pgn-btn-padding-y-sm-y: var(--pgn-core-input-btn-padding-sm-y); + --pgn-btn-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y); --pgn-btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); --pgn-btn-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-breadcrumb-inverse-color: var(--pgn-color-white); + --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700); --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600); --pgn-breadcrumb-bg: var(--pgn-color-gray-200); --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base); @@ -803,16 +833,22 @@ --pgn-color-gray-500: var(--pgn-color-gray-base); --pgn-body-color: var(--pgn-color-gray-700); --pgn-body-bg: var(--pgn-color-white); + --pgn-border-hr-margin-y: var(--pgn-core-spacer); + --pgn-border-hr-width: var(--pgn-border-width); + --pgn-border-hr-color: rgba(var(--pgn-color-black), .1); --pgn-border-color: var(--pgn-color-gray-200); --pgn-link-brand-inline-color: var(--pgn-color-brand-500); --pgn-link-brand-color: var(--pgn-color-brand-500); --pgn-link-muted-inline-color: var(--pgn-color-primary-500); --pgn-link-muted-color: var(--pgn-color-primary-500); + --pgn-list-group-action-active-color: var(--pgn-body-color); + --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base); + --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); + --pgn-list-group-active-color-base: var(--pgn-component-active-color); --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base); --pgn-table-dark-color-border: var(--pgn-table-dark-bg-base); --pgn-table-dark-color-hover: var(--pgn-table-dark-color-base); --pgn-table-border-color: var(--pgn-border-color); - --pgn-table-color-border: var(--pgn-border-color); --pgn-table-color-base: var(--pgn-body-color); --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); --pgn-search-field-border-color-base: var(--pgn-color-gray-500); @@ -895,8 +931,6 @@ --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width)); --pgn-dropdown-color-header: var(--pgn-color-gray-500); --pgn-dropdown-color-base: var(--pgn-body-color); - --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); - --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); @@ -914,9 +948,9 @@ --pgn-color-secondary-500: var(--pgn-color-secondary-base); --pgn-link-inline-color: var(--pgn-color-info-500); --pgn-link-color: var(--pgn-color-info-500); + --pgn-list-group-active-bg: var(--pgn-component-active-bg); --pgn-core-input-btn-focus-color: var(--pgn-component-active-bg); --pgn-table-caption-color: var(--pgn-text-muted); - --pgn-table-color-caption: var(--pgn-text-muted); --pgn-table-color-hover: var(--pgn-table-color-base); --pgn-popover-danger-icon-color: var(--pgn-color-warning-500); --pgn-popover-warning-icon-color: var(--pgn-color-warning-500); @@ -952,6 +986,7 @@ --pgn-form-input-focus-color-border: var(--pgn-component-active-bg); --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2); --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500); + --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active); --pgn-pagination-color-base: var(--pgn-link-color); --pgn-form-feedback-icon-color-invalid: var(--pgn-form-feedback-color-invalid); diff --git a/tokens/source/borders-fills/border.tokens.json b/tokens/source/borders-fills/border.tokens.json index 153e7c3959..be7a20d040 100644 --- a/tokens/source/borders-fills/border.tokens.json +++ b/tokens/source/borders-fills/border.tokens.json @@ -6,6 +6,13 @@ "base": { "value": ".375rem", "themeable": true, "source": "$border-radius" }, "lg": { "value": ".425rem", "themeable": true, "source": "$border-radius-lg" }, "sm": { "value": ".25rem", "themeable": true, "source": "$border-radius-sm" } + }, + "hr": { + "color": { "value": "rgba({color.black.value}, .1)", "themeable": true, "source": "$hr-border-color" }, + "width": { "value": "{border.width.value}", "themeable": true, "source": "$hr-border-width" }, + "margin": { + "y": { "value": "{core.spacer.value}", "themeable": true, "source": "$hr-margin-y" } + } } } } diff --git a/tokens/source/colors/colors.tokens.json b/tokens/source/colors/colors.tokens.json index d24d6299a1..c2263a4fb7 100644 --- a/tokens/source/colors/colors.tokens.json +++ b/tokens/source/colors/colors.tokens.json @@ -11,6 +11,9 @@ "a": { "value": "#00BBF9", "themeable": true, "source": "$accent-a" }, "b": { "value": "#FFEE88", "themeable": true, "source": "$accent-b" } }, + "theme": { + "interval": { "value": "8%", "themeable": true, "source": "$theme-color-interval" } + }, "gray": { "base": { "value": "#707070", "themeable": true, "source": "$gray" }, "100": { "value": "#EBEBEB", "themeable": true, "source": "$gray-100" }, diff --git a/tokens/source/colors/component/component.tokens.json b/tokens/source/colors/component/component.tokens.json index a110908f47..42bc8ce720 100644 --- a/tokens/source/colors/component/component.tokens.json +++ b/tokens/source/colors/component/component.tokens.json @@ -1,8 +1,8 @@ { - "component": { - "active": { - "color": { "value": "{color.white.value}", "themeable": true, "source": "$component-active-color" }, - "bg": { "value": "{color.primary.500.value}", "themeable": true, "source": "$component-active-bg" } - } + "component": { + "active": { + "color": { "value": "{color.white.value}", "themeable": true, "source": "$component-active-color" }, + "bg": { "value": "{color.primary.500.value}", "themeable": true, "source": "$component-active-bg" } } -} \ No newline at end of file + } +} diff --git a/tokens/source/components/action-row/action-row.tokens.json b/tokens/source/components/ActionRow/ActionRow.tokens.json similarity index 100% rename from tokens/source/components/action-row/action-row.tokens.json rename to tokens/source/components/ActionRow/ActionRow.tokens.json diff --git a/tokens/source/components/alert/alert.tokens.json b/tokens/source/components/Alert/Alert.tokens.json similarity index 100% rename from tokens/source/components/alert/alert.tokens.json rename to tokens/source/components/Alert/Alert.tokens.json diff --git a/tokens/source/components/annotation/annotation.tokens.json b/tokens/source/components/Annotation/Annotation.tokens.json similarity index 100% rename from tokens/source/components/annotation/annotation.tokens.json rename to tokens/source/components/Annotation/Annotation.tokens.json diff --git a/tokens/source/components/avatar/avatar.tokens.json b/tokens/source/components/Avatar/Avatar.tokens.json similarity index 100% rename from tokens/source/components/avatar/avatar.tokens.json rename to tokens/source/components/Avatar/Avatar.tokens.json diff --git a/tokens/source/components/avatar-button/avatar-button.tokens.json b/tokens/source/components/AvatarButton/AvatarButton.tokens.json similarity index 100% rename from tokens/source/components/avatar-button/avatar-button.tokens.json rename to tokens/source/components/AvatarButton/AvatarButton.tokens.json diff --git a/tokens/source/components/badge/badge.tokens.json b/tokens/source/components/Badge/Badge.tokens.json similarity index 100% rename from tokens/source/components/badge/badge.tokens.json rename to tokens/source/components/Badge/Badge.tokens.json diff --git a/tokens/source/components/breadcrumb/breadcrumb.tokens.json b/tokens/source/components/Breadcrumb/Breadcrumb.tokens.json similarity index 89% rename from tokens/source/components/breadcrumb/breadcrumb.tokens.json rename to tokens/source/components/Breadcrumb/Breadcrumb.tokens.json index e1f7707d9c..99356c306b 100644 --- a/tokens/source/components/breadcrumb/breadcrumb.tokens.json +++ b/tokens/source/components/Breadcrumb/Breadcrumb.tokens.json @@ -33,8 +33,8 @@ }, "inverse": { "active": { "value": "{color.light.500.value}", "themeable": true, "source": "$breadcrumb-inverse-active" }, - "spacer": { "valued": "{color.light.700.value}", "themeable": true, "source": "$breadcrumb-inverse-spacer" }, - "color": { "valued": "{color.white.value}", "themeable": true, "source": "$breadcrumb-inverse-color" } + "spacer": { "value": "{color.light.700.value}", "themeable": true, "source": "$breadcrumb-inverse-spacer" }, + "color": { "value": "{color.white.value}", "themeable": true, "source": "$breadcrumb-inverse-color" } } } } diff --git a/tokens/source/components/bubble/bubble.tokens.json b/tokens/source/components/Bubble/Bubble.tokens.json similarity index 100% rename from tokens/source/components/bubble/bubble.tokens.json rename to tokens/source/components/Bubble/Bubble.tokens.json diff --git a/tokens/source/components/button/button.tokens.json b/tokens/source/components/Button/Button.tokens.json similarity index 89% rename from tokens/source/components/button/button.tokens.json rename to tokens/source/components/Button/Button.tokens.json index 1476ecce3a..b2ac8790bd 100644 --- a/tokens/source/components/button/button.tokens.json +++ b/tokens/source/components/Button/Button.tokens.json @@ -4,14 +4,12 @@ "y": { "base": { "value": "{core.input.btn.padding.y.value}", "themeable": true, "source": "$btn-padding-y" }, "lg": { "value": "{core.input.btn.padding.lg.y.value}", "themeable": true, "source": "$btn-padding-y-lg" }, - "sm": { - "y": { "value": "{core.input.btn.padding.sm.y.value}", "themeable": true, "source": "$btn-padding-y-sm" }, - "x": { "value": "{core.input.btn.padding.sm.x.value}", "themeable": true, "source": "$btn-padding-x-sm" } - } + "sm": { "value": "{core.input.btn.padding.sm.y.value}", "themeable": true, "source": "$btn-padding-y-sm" } }, "x": { "base": { "value": "{core.input.btn.padding.x.value}", "themeable": true, "source": "$btn-padding-x" }, - "lg": { "value": "{core.input.btn.padding.lg.x.value}", "themeable": true, "source": "$btn-padding-x-lg" } + "lg": { "value": "{core.input.btn.padding.lg.x.value}", "themeable": true, "source": "$btn-padding-x-lg" }, + "sm": { "value": "{core.input.btn.padding.sm.x.value}", "themeable": true, "source": "$btn-padding-x-sm" } } }, "font": { @@ -40,7 +38,9 @@ }, "box-shadow": { "base": { - "value": "inset 0 1px 0 rgba({color.white.value}, .15), 0 1px 1px rgba({color.black.value}, .075)", "themeable": true, "source": "$btn-box-shadow" + "value": "inset 0 1px 0 rgba({color.white.value}, .15), 0 1px 1px rgba({color.black.value}, .075)", + "themeable": true, + "source": "$btn-box-shadow" }, "active": { "value": "none", "themeable": true, "source": "$btn-active-box-shadow" } }, @@ -66,7 +66,7 @@ "bg": { "base": { "value": "transparent", "themeable": true, "source": "$btn-inverse-tertiary-bg" }, "hover": { - "value": "rgba({color.white.value}, .1)", + "value": "rgba(255, 255, 255, .1)", "themeable": true, "source": "$btn-inverse-tertiary-hover-bg" }, diff --git a/tokens/source/components/card/card.tokens.json b/tokens/source/components/Card/Card.tokens.json similarity index 97% rename from tokens/source/components/card/card.tokens.json rename to tokens/source/components/Card/Card.tokens.json index 09860769fb..e7a2d59123 100644 --- a/tokens/source/components/card/card.tokens.json +++ b/tokens/source/components/Card/Card.tokens.json @@ -12,7 +12,7 @@ "logo": { "value": ".25rem", "themeable": true, "source": "$card-logo-border-radius" } }, "color": { - "base": { "value": "rgba({color.black.value}, .125)", "themeable": true, "source": "$card-border-color" }, + "base": { "value": "rgba(0, 0, 0, .125)", "themeable": true, "source": "$card-border-color" }, "focus": { "value": "rgba(0, 0, 0, .5)", "themeable": true, "source": "$card-border-focus-color" } } }, diff --git a/tokens/source/components/carousel/carousel.tokens.json b/tokens/source/components/Carousel/Carousel.tokens.json similarity index 100% rename from tokens/source/components/carousel/carousel.tokens.json rename to tokens/source/components/Carousel/Carousel.tokens.json diff --git a/tokens/source/components/chip/chip.tokens.json b/tokens/source/components/Chip/Chip.tokens.json similarity index 100% rename from tokens/source/components/chip/chip.tokens.json rename to tokens/source/components/Chip/Chip.tokens.json diff --git a/tokens/source/components/close-button/close-button.tokens.json b/tokens/source/components/CloseButton/CloseButton.tokens.json similarity index 100% rename from tokens/source/components/close-button/close-button.tokens.json rename to tokens/source/components/CloseButton/CloseButton.tokens.json diff --git a/tokens/source/components/Code/Code.tokens.json b/tokens/source/components/Code/Code.tokens.json new file mode 100644 index 0000000000..376929693c --- /dev/null +++ b/tokens/source/components/Code/Code.tokens.json @@ -0,0 +1,39 @@ +{ + "code": { + "font": { + "size": { "value": "87.5%", "themeable": true, "source": "$code-font-size" } + }, + "color": { "value": "#E83E8C", "themeable": true, "source": "$code-color" }, + "kbd": { + "font": { + "size": { "value": "{code.font.size.value}", "themeable": true, "source": "$kbd-font-size" } + }, + "box": { + "shadow": { + "value": "inset 0 -.1rem 0 rgba({color.black.value}, .25)", + "themeable": true, + "source": "$kbd-box-shadow" + } + }, + "nested": { + "font": { + "weight": { "value": "{font.weight.bold.value}", "themeable": true, "source": "$nested-kbd-font-weight" } + } + }, + "padding": { + "y": { "value": ".2rem", "themeable": true, "source": "$kbd-padding-y" }, + "x": { "value": ".4rem", "themeable": true, "source": "$kbd-padding-x" } + }, + "color": { "value": "{color.white.value}", "themeable": true, "source": "$kbd-color" }, + "bg": { "value": "{color.gray.700.value}", "themeable": true, "source": "$kbd-bg" } + }, + "pre": { + "color": { "value": "{color.gray.900.value}", "themeable": true, "source": "$pre-color" }, + "scrollable": { + "max": { + "height": { "value": "340px", "themeable": true, "source": "$pre-scrollable-max-height" } + } + } + } + } +} diff --git a/tokens/source/components/collapsible/collapsible.tokens.json b/tokens/source/components/Collapsible/Collapsible.tokens.json similarity index 100% rename from tokens/source/components/collapsible/collapsible.tokens.json rename to tokens/source/components/Collapsible/Collapsible.tokens.json diff --git a/tokens/source/components/container/container.tokens.json b/tokens/source/components/Container/Container.tokens.json similarity index 100% rename from tokens/source/components/container/container.tokens.json rename to tokens/source/components/Container/Container.tokens.json diff --git a/tokens/source/components/data-table/data-table.tokens.json b/tokens/source/components/DataTable/DataTable.tokens.json similarity index 100% rename from tokens/source/components/data-table/data-table.tokens.json rename to tokens/source/components/DataTable/DataTable.tokens.json diff --git a/tokens/source/components/dropdown/dropdown.tokens.json b/tokens/source/components/Dropdown/Dropdown.tokens.json similarity index 100% rename from tokens/source/components/dropdown/dropdown.tokens.json rename to tokens/source/components/Dropdown/Dropdown.tokens.json diff --git a/tokens/source/components/dropzone/dropzone.tokens.json b/tokens/source/components/Dropzone/Dropzone.tokens.json similarity index 100% rename from tokens/source/components/dropzone/dropzone.tokens.json rename to tokens/source/components/Dropzone/Dropzone.tokens.json diff --git a/tokens/source/components/form/form.tokens.json b/tokens/source/components/Form/Form.tokens.json similarity index 100% rename from tokens/source/components/form/form.tokens.json rename to tokens/source/components/Form/Form.tokens.json diff --git a/tokens/source/components/icon/icon.tokens.json b/tokens/source/components/Icon/Icon.tokens.json similarity index 100% rename from tokens/source/components/icon/icon.tokens.json rename to tokens/source/components/Icon/Icon.tokens.json diff --git a/tokens/source/components/icon-button/icon-button.tokens.json b/tokens/source/components/IconButton/IconButton.tokens.json similarity index 100% rename from tokens/source/components/icon-button/icon-button.tokens.json rename to tokens/source/components/IconButton/IconButton.tokens.json diff --git a/tokens/source/components/image/image.tokens.json b/tokens/source/components/Image/Image.tokens.json similarity index 100% rename from tokens/source/components/image/image.tokens.json rename to tokens/source/components/Image/Image.tokens.json diff --git a/tokens/source/components/menu/menu.tokens.json b/tokens/source/components/Menu/Menu.tokens.json similarity index 100% rename from tokens/source/components/menu/menu.tokens.json rename to tokens/source/components/Menu/Menu.tokens.json diff --git a/tokens/source/components/modal/modal.tokens.json b/tokens/source/components/Modal/Modal.tokens.json similarity index 92% rename from tokens/source/components/modal/modal.tokens.json rename to tokens/source/components/Modal/Modal.tokens.json index db1c394753..a936345a35 100644 --- a/tokens/source/components/modal/modal.tokens.json +++ b/tokens/source/components/Modal/Modal.tokens.json @@ -1,7 +1,10 @@ { "modal": { "inner": { - "padding": { "value": "1.5rem", "themeable": true, "source": "$modal-inner-padding" } + "padding": { + "base": { "value": "1.5rem", "themeable": true, "source": "$modal-inner-padding" }, + "bottom": { "value": ".7rem", "themeable": true, "source": "$modal-inner-padding-bottom" } + } }, "footer": { "margin": { @@ -17,7 +20,7 @@ }, "padding": { "base": { - "value": "{modal.footer.padding.y.value} {modal.footer.padding.x.value}", + "value": "{modal.footer.padding.x.value} {modal.footer.padding.y.value}", "themeable": true, "source": "$modal-footer-padding" }, diff --git a/tokens/source/components/nav/nav.tokens.json b/tokens/source/components/Nav/Nav.tokens.json similarity index 100% rename from tokens/source/components/nav/nav.tokens.json rename to tokens/source/components/Nav/Nav.tokens.json diff --git a/tokens/source/components/navbar/navbar.tokens.json b/tokens/source/components/Navbar/Navbar.tokens.json similarity index 100% rename from tokens/source/components/navbar/navbar.tokens.json rename to tokens/source/components/Navbar/Navbar.tokens.json diff --git a/tokens/source/components/pagination/pagination.tokens.json b/tokens/source/components/Pagination/Pagination.tokens.json similarity index 100% rename from tokens/source/components/pagination/pagination.tokens.json rename to tokens/source/components/Pagination/Pagination.tokens.json diff --git a/tokens/source/components/popover/popover.tokens.json b/tokens/source/components/Popover/Popover.tokens.json similarity index 100% rename from tokens/source/components/popover/popover.tokens.json rename to tokens/source/components/Popover/Popover.tokens.json diff --git a/tokens/source/components/product-tour/product-tour.tokens.json b/tokens/source/components/ProductTour/ProductTour.tokens.json similarity index 100% rename from tokens/source/components/product-tour/product-tour.tokens.json rename to tokens/source/components/ProductTour/ProductTour.tokens.json diff --git a/tokens/source/components/progress-bar/progress-bar.tokens.json b/tokens/source/components/ProgressBar/ProgressBar.tokens.json similarity index 100% rename from tokens/source/components/progress-bar/progress-bar.tokens.json rename to tokens/source/components/ProgressBar/ProgressBar.tokens.json diff --git a/tokens/source/components/search-field/search-field.tokens.json b/tokens/source/components/SearchField/SearchField.tokens.json similarity index 100% rename from tokens/source/components/search-field/search-field.tokens.json rename to tokens/source/components/SearchField/SearchField.tokens.json diff --git a/tokens/source/components/selectable-box/selectable-box.tokens.json b/tokens/source/components/SelectableBox/SelectableBox.tokens.json similarity index 100% rename from tokens/source/components/selectable-box/selectable-box.tokens.json rename to tokens/source/components/SelectableBox/SelectableBox.tokens.json diff --git a/tokens/source/components/spinner/spinner.tokens.json b/tokens/source/components/Spinner/Spinner.tokens.json similarity index 100% rename from tokens/source/components/spinner/spinner.tokens.json rename to tokens/source/components/Spinner/Spinner.tokens.json diff --git a/tokens/source/components/stack/stack.tokens.json b/tokens/source/components/Stack/Stack.tokens.json similarity index 100% rename from tokens/source/components/stack/stack.tokens.json rename to tokens/source/components/Stack/Stack.tokens.json diff --git a/tokens/source/components/sticky/sticky.tokens.json b/tokens/source/components/Sticky/Sticky.tokens.json similarity index 100% rename from tokens/source/components/sticky/sticky.tokens.json rename to tokens/source/components/Sticky/Sticky.tokens.json diff --git a/tokens/source/components/table/table.tokens.json b/tokens/source/components/Table/Table.tokens.json similarity index 94% rename from tokens/source/components/table/table.tokens.json rename to tokens/source/components/Table/Table.tokens.json index 77c06a37aa..6d2bcc692b 100644 --- a/tokens/source/components/table/table.tokens.json +++ b/tokens/source/components/Table/Table.tokens.json @@ -43,6 +43,11 @@ "level": { "bg": { "value": "-9", "themeable": true, "source": "$table-bg-level" }, "border": { "value": "-6", "themeable": true, "source": "$table-border-level" } + }, + "th": { + "font": { + "weight": { "value": "null", "themeable": true, "source": "$table-th-font-weight" } + } } } } diff --git a/tokens/source/components/tabs/tabs.tokens.json b/tokens/source/components/Tabs/Tabs.tokens.json similarity index 100% rename from tokens/source/components/tabs/tabs.tokens.json rename to tokens/source/components/Tabs/Tabs.tokens.json diff --git a/tokens/source/components/toast/toast.tokens.json b/tokens/source/components/Toast/Toast.tokens.json similarity index 100% rename from tokens/source/components/toast/toast.tokens.json rename to tokens/source/components/Toast/Toast.tokens.json diff --git a/tokens/source/components/tooltip/tooltip.tokens.json b/tokens/source/components/Tooltip/Tooltip.tokens.json similarity index 100% rename from tokens/source/components/tooltip/tooltip.tokens.json rename to tokens/source/components/Tooltip/Tooltip.tokens.json diff --git a/tokens/source/components/code/code.tokens.json b/tokens/source/components/code/code.tokens.json deleted file mode 100644 index 28db8ef831..0000000000 --- a/tokens/source/components/code/code.tokens.json +++ /dev/null @@ -1,43 +0,0 @@ -{ - "code": { - "font": { - "size": { "value": "87.5%", "themeable": true, "source": "$code-font-size" } - }, - "color": { "value": "#E83E8C", "themeable": true, "source": "$code-color" }, - "kbd": { - "font": { - "size": { "value": "{code.font.size.value}", "themeable": true, "source": "$kbd-font-size" } - }, - "box": { - "shadow": { - "value": "inset 0 -.1rem 0 rgba({color.black.value}, .25)", - "themeable": true, - "source": "$kbd-box-shadow" - } - }, - "nested": { - "font": { - "weight": { - "value": "{font.weight.bold.value}", - "themeable": true, - "source": "$nested-kbd-font-weight" - } - } - }, - "padding": { - "y": { "value": ".2rem", "themeable": true, "source": "$kbd-padding-y" }, - "x": { "value": ".4rem", "themeable": true, "source": "$kbd-padding-x" } - }, - "color": { "value": "{color.white.value}", "themeable": true, "source": "$kbd-color" }, - "bg": { "value": "{color.gray.700.value}", "themeable": true, "source": "$kbd-bg" } - }, - "pre": { - "color": { "value": "{color.gray.900.value}", "themeable": true, "source": "$pre-color" }, - "scrollable": { - "max": { - "height": { "value": "340px", "themeable": true, "source": "$pre-scrollable-max-height" } - } - } - } - } -} diff --git a/tokens/source/core/core.tokens.json b/tokens/source/core/core.tokens.json index c87f5cc8c1..171f43bb0f 100644 --- a/tokens/source/core/core.tokens.json +++ b/tokens/source/core/core.tokens.json @@ -16,7 +16,7 @@ } }, "font": { - "family": { "value": "null", "themeable": true, "source": "$input-btn-font-family" }, + "family": { "value": "inherit", "themeable": true, "source": "$input-btn-font-family" }, "size": { "base": { "value": "1.125rem", "themeable": true, "source": "$input-btn-font-size" }, "sm": { "value": ".875rem", "themeable": true, "source": "$input-btn-font-size-sm" }, @@ -45,6 +45,34 @@ "width": { "value": "{border.width.value}", "themeable": true, "source": "$input-btn-border-width" } } } + }, + "blockquote": { + "small": { + "font": { + "size": { + "value": "{font.size.small.base.value}", "themeable": true, "source": "$blockquote-small-font-size" + } + } + }, + "font": { + "size": { + "value": "calc({font.size.base.value} * 1.25)", "themeable": true, "source": "$blockquote-font-size" + } + } + }, + "mark": { + "padding": { "value": ".2em", "themeable": true, "source": "$mark-padding" }, + "bg": { "value": "#FFF243", "themeable": true, "source": "$mark-bg" } + }, + "dt": { + "font": { + "weight": { "value": "{font.weight.bold.value}", "themeable": true, "source": "$dt-font-weight" } + } + }, + "list": { + "inline": { + "padding": { "value": ".5rem", "themeable": true, "source": "$list-inline-padding" } + } } } } diff --git a/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json b/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json index 4261242f14..236f2f665e 100644 --- a/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json +++ b/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json @@ -27,9 +27,9 @@ "source": "$level-5-box-shadow" } }, - "base": { "value": "0 .125rem .25rem rgba({color.black.value}, .3)", "themeable": true, "source": "$box-shadow" }, - "sm": { "value": "0 .0625rem .125rem rgba({color.black.value}, .2)", "themeable": true, "source": "$box-shadow-sm" }, - "lg": { "value": "0 .25rem .5rem rgba({color.black.value}, .3)", "themeable": true, "source": "$box-shadow-lg" }, + "base": { "value": "0 .125rem .25rem rgba(0, 0, 0, .3)", "themeable": true, "source": "$box-shadow" }, + "sm": { "value": "0 .0625rem .125rem rgba(0, 0, 0, .2)", "themeable": true, "source": "$box-shadow-sm" }, + "lg": { "value": "0 .25rem .5rem rgba(0, 0, 0, .3)", "themeable": true, "source": "$box-shadow-lg" }, "down": { "1": { "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)", diff --git a/tokens/source/layout/list-group/list-group.tokens.json b/tokens/source/layout/list-group/list-group.tokens.json new file mode 100644 index 0000000000..1b140af3f6 --- /dev/null +++ b/tokens/source/layout/list-group/list-group.tokens.json @@ -0,0 +1,51 @@ +{ + "list-group": { + "color": { "value": "null", "themeable": true, "source": "$list-group-color" }, + "bg": { + "base": { "value": "{color.white.value}", "themeable": true, "source": "$list-group-bg" }, + "hover": { "value": "{color.gray.100.value}", "themeable": true, "source": "$list-group-hover-bg" } + }, + "border": { + "color": { "value": "rgba({color.black.value}, .125)", "themeable": true, "source": "$list-group-border-color" }, + "width": { "value": "{border.width.value}", "themeable": true, "source": "$list-group-border-width" }, + "radius": { "value": "{border.radius.base.value}", "themeable": true, "source": "$list-group-border-radius" } + }, + "item": { + "padding": { + "y": { "value": ".75rem", "themeable": true, "source": "$list-group-item-padding-y" }, + "x": { "value": "1.25rem", "themeable": true, "source": "$list-group-item-padding-x" } + } + }, + "active": { + "color": { + "base": { + "value": "{component.active.color.value}", "themeable": true, "source": "$list-group-active-color" + }, + "border": { + "value": "{list-group.active.bg.value}", + "themeable": true, + "source": "$list-group-active-border-color" + } + }, + "bg": { "value": "{component.active.bg.value}", "themeable": true, "source": "$list-group-active-bg" } + }, + "disabled": { + "color": { "value": "{color.gray.600.value}", "themeable": true, "source": "$list-group-disabled-color" }, + "bg": { "value": "{list-group.bg.base.value}", "themeable": true, "source": "$list-group-disabled-bg" } + }, + "action": { + "color": { + "base": { "value": "{color.gray.700.value}", "themeable": true, "source": "$list-group-action-color" }, + "hover": { + "value": "{list-group.action.color.base.value}", + "themeable": true, + "source": "$list-group-action-hover-color" + } + }, + "active": { + "color": { "value": "{body.color.value}", "themeable": true, "source": "$list-group-action-active-color" }, + "bg": { "value": "{color.gray.200.value}", "themeable": true, "source": "$list-group-action-active-bg" } + } + } + } +} diff --git a/tokens/source/layout/table/table.tokens.json b/tokens/source/layout/table/table.tokens.json deleted file mode 100644 index 0e2b75d562..0000000000 --- a/tokens/source/layout/table/table.tokens.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "table": { - "cell": { - "padding": { - "base": { "value": ".75rem", "themeable": true, "source": "$table-cell-padding" }, - "sm": { "value": ".3rem", "themeable": true, "source": "$table-cell-padding-sm" } - } - }, - "color": { - "caption": { "value": "{text.muted.value}", "themeable": true, "source": "$table-caption-color" }, - "border": { "value": "{border.color.value}", "themeable": true, "source": "$table-border-color" } - }, - "th": { - "font": { - "weight": { "value": "null", "themeable": true, "source": "$table-th-font-weight" } - } - } - } -} diff --git a/tokens/source/links/links.tokens.json b/tokens/source/links/links.tokens.json index 9aa3474e8c..91f196734c 100644 --- a/tokens/source/links/links.tokens.json +++ b/tokens/source/links/links.tokens.json @@ -63,6 +63,13 @@ "decoration-color": { "value": "#003C5E", "themeable": true, "source": "$inline-link-hover-decoration-color" } } } + }, + "emphasized": { + "hover": { + "darken": { + "percentage": { "value": "15%", "themeable": true, "source": "$emphasized-link-hover-darken-percentage" } + } + } } } } diff --git a/tokens/source/typography/font/font.tokens.json b/tokens/source/typography/font/font.tokens.json index f207f2f126..124f53fdcb 100644 --- a/tokens/source/typography/font/font.tokens.json +++ b/tokens/source/typography/font/font.tokens.json @@ -1,6 +1,7 @@ { "font": { "family": { + "base": { "value": "{font.family.sans.serif.value}", "themeable": true, "source": "$font-family-base" }, "sans": { "serif": { "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\",\n Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", @@ -13,8 +14,7 @@ "value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace", "themeable": true, "source": "$font-family-monospace" - }, - "base": { "value": "{font.family.sans.serif.value}", "themeable": true, "source": "$font-family-base" } + } }, "size": { "base": { "value": "1.125rem", "themeable": true, "source": "$font-size-base" }, @@ -38,7 +38,8 @@ "h4": { "value": "{font.size.h4.value}", "themeable": true, "source": "$h4-mobile-font-size" }, "h5": { "value": "{font.size.h5.value}", "themeable": true, "source": "$h5-mobile-font-size" }, "h6": { "value": "{font.size.h6.value}", "themeable": true, "source": "$h6-mobile-font-size" } - } + }, + "lead": { "value": "calc({font.size.base.value} * 1.25)", "themeable": true, "source": "$lead-font-size" } }, "weight": { "lighter": { "value": "lighter", "themeable": true, "source": "$font-weight-lighter" }, @@ -49,7 +50,8 @@ }, "bold": { "value": "700", "themeable": true, "source": "$font-weight-bold" }, "bolder": { "value": "bolder", "themeable": true, "source": "$font-weight-bolder" }, - "base": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$font-weight-base" } + "base": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$font-weight-base" }, + "lead": { "value": "null", "themeable": true, "source": "$lead-font-weight" } } } } diff --git a/tokens/source/www/zindex/zindex.tokens.json b/tokens/source/www/zindex/zindex.tokens.json new file mode 100644 index 0000000000..0416ae83df --- /dev/null +++ b/tokens/source/www/zindex/zindex.tokens.json @@ -0,0 +1,8 @@ +{ + "www-zindex": { + "header": { "value": "2500", "themeable": true, "source": "$pgn-www-zindex-header" }, + "sheet": { "value": "2502", "themeable": true, "source": "$pgn-www-zindex-sheet" }, + "sheet-backdrop": { "value": "2501", "themeable": true, "source": "$pgn-www-zindex-sheet-backdrop" }, + "modal": { "value": "2503", "themeable": true, "source": "$pgn-www-zindex-modal" } + } +} diff --git a/www/src/components/Header.scss b/www/src/components/Header.scss index a4ff80fbfc..a4bbd18fde 100644 --- a/www/src/components/Header.scss +++ b/www/src/components/Header.scss @@ -1,3 +1,3 @@ .pgn-doc-header { - z-index: $zindex-header; + z-index: $pgn-www-zindex-header; } diff --git a/www/src/scss/_variables.scss b/www/src/scss/_variables.scss index 70e92c2f39..23ed88ad39 100644 --- a/www/src/scss/_variables.scss +++ b/www/src/scss/_variables.scss @@ -1,4 +1,4 @@ -$zindex-header: 2500; -$zindex-sheet-backdrop: 2501; -$zindex-sheet: 2502; -$zindex-modal: 2503; +$pgn-www-zindex-header: 2500; +$pgn-www-zindex-sheet-backdrop: 2501; +$pgn-www-zindex-sheet: 2502; +$pgn-www-zindex-modal: 2503;