From 27af4e328158817c83c8da4b44cd2996b97d1664 Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Fri, 5 May 2023 18:24:40 +0300 Subject: [PATCH] feat: remove SCSS variable usages in components (#2137) * feat: removed SCSS variable usages in components and other custom styles * feat: removed SCSS variable files in components * refactor: code refactoring * refactor: deleted old logic to search SCSS variables * refactor: refactoring variables and Anotation component * feat: added CSS hooks plus tokens for IconButton * refactor: refacoring IconButton component * refactor: some refactoring * feat: update replace-scss-vars script to handle interpolation expressions * feat: remove SCSS variables in docs site and start using custom media queries --------- Co-authored-by: Viktor Rusakov --- package-lock.json | 22 +- src/ActionRow/_ActionRow.scss | 6 +- src/ActionRow/_variables.scss | 2 - src/Alert/Alert.scss | 58 +- src/Alert/_variables.scss | 36 - src/Annotation/Annotation.scss | 238 +-- src/Annotation/_mixins.scss | 104 ++ src/Annotation/_variables.scss | 32 - src/Avatar/Avatar.scss | 38 +- src/Avatar/_variables.scss | 11 - src/AvatarButton/AvatarButton.scss | 8 +- src/AvatarButton/_variables.scss | 3 - src/Badge/Badge.scss | 104 +- src/Badge/_variables.scss | 64 - src/Breadcrumb/Breadcrumb.scss | 30 +- src/Breadcrumb/_variables.scss | 27 - src/Bubble/Bubble.scss | 24 +- src/Bubble/_variables.scss | 14 - src/Button/Button.scss | 1331 +++++++++-------- src/Button/_mixins.scss | 4 +- src/Button/_variables.scss | 706 --------- src/Button/button-group.scss | 20 +- src/Card/Card.scss | 153 +- src/Card/_variables.scss | 56 - src/Card/card-bootstrap.scss | 38 +- src/Carousel/Carousel.scss | 170 ++- src/Carousel/_variables.scss | 22 - src/Carousel/carousel-bootstrap.scss | 179 --- src/Chip/Chip.scss | 56 +- src/Chip/_variables.scss | 14 - src/CloseButton/CloseButton.scss | 33 +- src/CloseButton/_variables.scss | 6 - src/Code/Code.scss | 49 +- src/Code/_variables.scss | 17 - src/Collapsible/Collapsible.scss | 30 +- src/Collapsible/_variables.scss | 12 - src/ColorPicker/ColorPicker.scss | 14 +- src/Container/_variables.scss | 5 - src/DataTable/DataTable.scss | 68 +- src/DataTable/_variables.scss | 13 - src/Dropdown/Dropdown.scss | 21 +- src/Dropdown/_variables.scss | 33 - src/Dropdown/dropdown-bootstrap.scss | 181 +++ src/Dropzone/Dropzone.scss | 22 +- src/Dropzone/_variables.scss | 14 - src/Form/_Form.scss | 300 ++-- src/Form/_FormText.scss | 16 +- src/Form/_bootstrap-custom-forms.scss | 355 ++--- src/Form/_bootstrap-forms.scss | 141 +- src/Form/_input-group.scss | 188 +++ src/Form/_mixins.scss | 60 +- src/Form/_variables.scss | 275 ---- src/Icon/Icon.scss | 22 +- src/Icon/_variables.scss | 7 - src/IconButton/IconButton.scss | 442 +++++- src/IconButton/_variables.scss | 29 - src/Image/Image.scss | 18 +- src/Image/_variables.scss | 13 - src/Menu/Menu.scss | 52 +- src/Menu/_variables.scss | 4 - src/Modal/Modal.scss | 11 +- src/Modal/_ModalDialog.scss | 98 +- src/Modal/_variables.scss | 33 - src/Nav/Nav.scss | 60 +- src/Nav/_variables.scss | 23 - src/Navbar/Navbar.scss | 278 +++- src/Navbar/_variables.scss | 40 - src/OverflowScroll/OverflowScroll.scss | 1 - src/OverflowScroll/_variables.scss | 5 - .../useOverflowScrollElementAttributes.js | 6 +- src/PageBanner/PageBanner.scss | 36 +- src/Pagination/Pagination.scss | 100 +- src/Pagination/_variables.scss | 48 - src/Pagination/pagination-bootstrap.scss | 83 + src/Popover/Popover.scss | 60 +- src/Popover/_variables.scss | 38 - src/Popover/popover-bootstrap.scss | 128 +- src/ProductTour/Checkpoint.scss | 102 +- src/ProductTour/_variables.scss | 22 - src/ProgressBar/ProgressBar.scss | 59 +- src/ProgressBar/_mixins.scss | 17 + src/ProgressBar/_variables.scss | 23 - src/ProgressBar/bootstrap-progress.scss | 49 + src/Scrollable/Scrollable.scss | 6 +- src/Scrollable/_variables.scss | 1 - src/SearchField/SearchField.scss | 38 +- src/SearchField/_variables.scss | 12 - src/SelectableBox/SelectableBox.scss | 22 +- src/SelectableBox/_variables.scss | 3 - src/Sheet/Sheet.scss | 22 +- src/Sheet/_variables.scss | 2 - src/Spinner/Spinner.scss | 59 +- src/Spinner/_variables.scss | 9 - src/Stack/Stack.scss | 4 +- src/Stack/_variables.scss | 1 - src/Stepper/Stepper.scss | 16 +- src/Sticky/Sticky.scss | 10 +- src/Sticky/_variables.scss | 3 - src/Tabs/Tabs.scss | 8 +- src/Tabs/_variables.scss | 3 - src/Toast/Toast.scss | 19 +- src/Toast/ToastContainer.scss | 20 +- src/Toast/_variables.scss | 19 - src/Toast/bootstrap-toast.scss | 46 + src/Tooltip/Tooltip.scss | 78 +- src/Tooltip/_variables.scss | 20 - src/ValidationMessage/ValidationMessage.scss | 2 +- src/index.scss | 1 - styles/css/core/custom-media-breakpoints.css | 19 +- styles/css/core/variables.css | 13 +- styles/css/themes/light/utility-classes.css | 2 +- styles/css/themes/light/variables.css | 279 +++- tokens/src/core/components/DataTable.json | 3 +- tokens/src/core/components/Dropdown.json | 9 +- tokens/src/core/components/Form/other.json | 6 +- tokens/src/core/components/IconButton.json | 2 +- tokens/src/core/components/Nav.json | 3 +- .../src/themes/light/components/Carousel.json | 16 +- .../themes/light/components/IconButton.json | 452 +++++- .../light/components/OverflowScroll.json | 9 + .../themes/light/components/PageBanner.json | 24 + tokens/style-dictionary.js | 11 +- tokens/utils.js | 25 +- www/build-themes.js | 8 +- www/gatsby-node.js | 28 +- www/package.json | 5 +- .../components/ComponentVariablesTable.tsx | 50 +- www/src/components/Header.scss | 33 +- www/src/components/IconsTable.scss | 14 +- www/src/components/Menu.scss | 71 +- www/src/components/Search/Search.scss | 125 +- www/src/components/Settings.scss | 8 +- www/src/components/Toc.scss | 6 +- www/src/components/_CodeBlock.scss | 24 +- www/src/components/_doc-elements.scss | 48 +- .../exampleComponents/ExamplePropsForm.scss | 6 +- www/src/scss/edxorg-theme.scss | 6 +- www/src/templates/component-page-template.tsx | 27 +- www/theme-utils.js | 138 -- 139 files changed, 4800 insertions(+), 4424 deletions(-) delete mode 100644 src/ActionRow/_variables.scss delete mode 100644 src/Alert/_variables.scss create mode 100644 src/Annotation/_mixins.scss delete mode 100644 src/Annotation/_variables.scss delete mode 100644 src/Avatar/_variables.scss delete mode 100644 src/AvatarButton/_variables.scss delete mode 100644 src/Badge/_variables.scss delete mode 100644 src/Breadcrumb/_variables.scss delete mode 100644 src/Bubble/_variables.scss delete mode 100644 src/Button/_variables.scss delete mode 100644 src/Card/_variables.scss delete mode 100644 src/Carousel/_variables.scss delete mode 100644 src/Carousel/carousel-bootstrap.scss delete mode 100644 src/Chip/_variables.scss delete mode 100644 src/CloseButton/_variables.scss delete mode 100644 src/Code/_variables.scss delete mode 100644 src/Collapsible/_variables.scss delete mode 100644 src/Container/_variables.scss delete mode 100644 src/DataTable/_variables.scss delete mode 100644 src/Dropdown/_variables.scss create mode 100644 src/Dropdown/dropdown-bootstrap.scss delete mode 100644 src/Dropzone/_variables.scss create mode 100644 src/Form/_input-group.scss delete mode 100644 src/Icon/_variables.scss delete mode 100644 src/IconButton/_variables.scss delete mode 100644 src/Image/_variables.scss delete mode 100644 src/Menu/_variables.scss delete mode 100644 src/Modal/_variables.scss delete mode 100644 src/Nav/_variables.scss delete mode 100644 src/Navbar/_variables.scss delete mode 100644 src/OverflowScroll/OverflowScroll.scss delete mode 100644 src/OverflowScroll/_variables.scss delete mode 100644 src/Pagination/_variables.scss create mode 100644 src/Pagination/pagination-bootstrap.scss delete mode 100644 src/Popover/_variables.scss delete mode 100644 src/ProductTour/_variables.scss create mode 100644 src/ProgressBar/_mixins.scss delete mode 100644 src/ProgressBar/_variables.scss create mode 100644 src/ProgressBar/bootstrap-progress.scss delete mode 100644 src/Scrollable/_variables.scss delete mode 100644 src/SearchField/_variables.scss delete mode 100644 src/SelectableBox/_variables.scss delete mode 100644 src/Sheet/_variables.scss delete mode 100644 src/Spinner/_variables.scss delete mode 100644 src/Stack/_variables.scss delete mode 100644 src/Sticky/_variables.scss delete mode 100644 src/Tabs/_variables.scss delete mode 100644 src/Toast/_variables.scss create mode 100644 src/Toast/bootstrap-toast.scss delete mode 100644 src/Tooltip/_variables.scss create mode 100644 tokens/src/themes/light/components/OverflowScroll.json create mode 100644 tokens/src/themes/light/components/PageBanner.json delete mode 100644 www/theme-utils.js diff --git a/package-lock.json b/package-lock.json index 4fc1dcb190..1c7ad1c519 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@edx/paragon", - "version": "21.0.0-alpha.22", + "version": "20.18.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@edx/paragon", - "version": "21.0.0-alpha.22", + "version": "20.18.1", "license": "Apache-2.0", "workspaces": [ "example", @@ -2464,11 +2464,6 @@ } } }, - "node_modules/@edx/brand-edx.org": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@edx/brand-edx.org/-/brand-edx.org-2.1.1.tgz", - "integrity": "sha512-5W9aqss8NTGYUWuBDbxSGs4l6ysSv7ExPFFtNXVFten+Osh5gnGQ+KcvRbkEQhcqFuYNz3QUD72C9Q1axCs/MQ==" - }, "node_modules/@edx/brand-openedx": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@edx/brand-openedx/-/brand-openedx-1.2.0.tgz", @@ -44334,7 +44329,6 @@ "license": "MIT", "dependencies": { "@docsearch/react": "^3.1.0", - "@edx/brand-edx.org": "^2.0.6", "@edx/brand-openedx": "^1.1.0", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@mdx-js/mdx": "^1.6.22", @@ -44375,7 +44369,9 @@ "@types/react-helmet": "^6.1.6", "css": "^3.0.0", "eslint": "8.18.0", - "eslint-import-resolver-webpack": "^0.13.2" + "eslint-import-resolver-webpack": "^0.13.2", + "postcss": "^8.4.21", + "postcss-custom-media": "^9.1.2" } } }, @@ -45943,11 +45939,6 @@ "algoliasearch": "^4.0.0" } }, - "@edx/brand-edx.org": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@edx/brand-edx.org/-/brand-edx.org-2.1.1.tgz", - "integrity": "sha512-5W9aqss8NTGYUWuBDbxSGs4l6ysSv7ExPFFtNXVFten+Osh5gnGQ+KcvRbkEQhcqFuYNz3QUD72C9Q1axCs/MQ==" - }, "@edx/brand-openedx": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@edx/brand-openedx/-/brand-openedx-1.2.0.tgz", @@ -70138,7 +70129,6 @@ "version": "file:www", "requires": { "@docsearch/react": "^3.1.0", - "@edx/brand-edx.org": "^2.0.6", "@edx/brand-openedx": "^1.1.0", "@edx/eslint-config": "^3.1.0", "@fortawesome/free-solid-svg-icons": "^6.1.1", @@ -70165,6 +70155,8 @@ "gatsby-source-filesystem": "^4.17.0", "gatsby-transformer-react-docgen": "^7.17.0", "lodash.debounce": "^4.0.8", + "postcss": "^8.4.21", + "postcss-custom-media": "^9.1.2", "prism-react-renderer": "^1.3.3", "prop-types": "^15.8.1", "react": "^17.0.2", diff --git a/src/ActionRow/_ActionRow.scss b/src/ActionRow/_ActionRow.scss index d562aa6567..341c335ac8 100644 --- a/src/ActionRow/_ActionRow.scss +++ b/src/ActionRow/_ActionRow.scss @@ -1,5 +1,3 @@ -@import "variables"; - .pgn__action-row { display: flex; flex-grow: 1; @@ -11,7 +9,7 @@ } & > * + * { - margin-inline-start: $action-row-gap-x; + margin-inline-start: var(--pgn-spacing-action-row-gap-x); } } @@ -27,7 +25,7 @@ } & > * + * { - margin-bottom: $action-row-gap-y; + margin-bottom: var(--pgn-spacing-action-row-gap-y); } } diff --git a/src/ActionRow/_variables.scss b/src/ActionRow/_variables.scss deleted file mode 100644 index b7600f13e6..0000000000 --- a/src/ActionRow/_variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -$action-row-gap-x: var(--pgn-spacing-action-row-gap-x) !default; -$action-row-gap-y: var(--pgn-spacing-action-row-gap-y) !default; diff --git a/src/Alert/Alert.scss b/src/Alert/Alert.scss index 747dae77f8..7ead686381 100644 --- a/src/Alert/Alert.scss +++ b/src/Alert/Alert.scss @@ -1,5 +1,3 @@ -@import "variables"; - // // Override Bootstrap's alert definition. // We do this to get more control over colors @@ -12,13 +10,13 @@ .alert { position: relative; - padding: $alert-padding-y $alert-padding-x; - margin-bottom: $alert-margin-bottom; - border: $alert-border-width solid var(--pgn-alert-border-color, transparent); + padding: var(--pgn-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x); + margin-bottom: var(--pgn-spacing-alert-margin-bottom); + border: var(--pgn-size-alert-border-width) solid var(--pgn-alert-border-color, transparent); color: inherit; background-color: var(--pgn-alert-bg, transparent); - @include border-radius($alert-border-radius); + @include border-radius(var(--pgn-size-alert-border-radius)); @include pgn-box-shadow(1, "down"); .alert-message-content > :last-child { @@ -28,7 +26,7 @@ .alert-icon { color: var(--pgn-alert-icon-color, inherit); float: left; - margin-inline-end: $alert-icon-space; + margin-inline-end: var(--pgn-spacing-alert-icon-space); width: 1.5rem; height: 1.5rem; flex-shrink: 0; @@ -37,17 +35,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-color-headings-base) + color: var(--pgn-color-alert-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-typography-alert-font-size); + line-height: var(--pgn-typography-alert-line-height); + color: var(--pgn-color-alert-content); text-align: start; div { @@ -57,7 +55,7 @@ // Provide class for links that match alerts .alert-link { - font-weight: $alert-link-font-weight; + font-weight: var(--pgn-typography-alert-font-weight-link); text-decoration: underline; &:hover { @@ -69,16 +67,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-typography-font-size-base) * 1.5 !default; to avoid any dependency .alert-dismissible { - padding-right: calc((#{$font-size-base} * 1.5) + (#{$alert-padding-x} * 2)); + padding-right: calc((var(--pgn-typography-font-size-base) * 1.5) + (var(--pgn-spacing-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-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x); color: inherit; } } @@ -88,38 +86,38 @@ align-items: center; .pgn__alert-actions { - margin-inline-start: $alert-actions-gap; + margin-inline-start: var(--pgn-spacing-alert-actions-gap); } } .pgn__alert-message-wrapper-stacked { .pgn__alert-actions { - margin-top: $alert-actions-gap; + margin-top: var(--pgn-spacing-alert-actions-gap); } } // Alternate styles .alert-success { - --pgn-alert-bg: #{$alert-success-bg}; - --pgn-alert-border-color: #{$alert-success-border-color}; - --pgn-alert-icon-color: #{$alert-success-icon-color}; + --pgn-alert-bg: var(--pgn-color-alert-bg-success); + --pgn-alert-border-color: var(--pgn-color-alert-border-success); + --pgn-alert-icon-color: var(--pgn-color-alert-icon-success); } .alert-info { - --pgn-alert-bg: #{$alert-info-bg}; - --pgn-alert-border-color: #{$alert-info-border-color}; - --pgn-alert-icon-color: #{$alert-info-icon-color}; + --pgn-alert-bg: var(--pgn-color-alert-bg-info); + --pgn-alert-border-color: var(--pgn-color-alert-border-info); + --pgn-alert-icon-color: var(--pgn-color-alert-icon-info); } .alert-danger { - --pgn-alert-bg: #{$alert-danger-bg}; - --pgn-alert-border-color: #{$alert-danger-border-color}; - --pgn-alert-icon-color: #{$alert-danger-icon-color}; + --pgn-alert-bg: var(--pgn-color-alert-bg-danger); + --pgn-alert-border-color: var(--pgn-color-alert-border-danger); + --pgn-alert-icon-color: var(--pgn-color-alert-icon-danger); } .alert-warning { - --pgn-alert-bg: #{$alert-warning-bg}; - --pgn-alert-border-color: #{$alert-warning-border-color}; - --pgn-alert-icon-color: #{$alert-warning-icon-color}; + --pgn-alert-bg: var(--pgn-color-alert-bg-warning); + --pgn-alert-border-color: var(--pgn-color-alert-border-warning); + --pgn-alert-icon-color: var(--pgn-color-alert-icon-warning); } diff --git a/src/Alert/_variables.scss b/src/Alert/_variables.scss deleted file mode 100644 index 07af4da07a..0000000000 --- a/src/Alert/_variables.scss +++ /dev/null @@ -1,36 +0,0 @@ -// Alerts -// -// Define alert colors, border radius, and padding. - -$alert-padding-y: var(--pgn-spacing-alert-padding-y) !default; -$alert-padding-x: var(--pgn-spacing-alert-padding-x) !default; -$alert-margin-bottom: var(--pgn-spacing-alert-margin-bottom) !default; -$alert-border-radius: var(--pgn-size-alert-border-radius) !default; -$alert-link-font-weight: var(--pgn-typography-alert-font-weight-link) !default; -$alert-border-width: var(--pgn-size-alert-border-width) !default; -$alert-title-color: var(--pgn-color-alert-title) !default; -$alert-box-shadow: var(--pgn-elevation-alert-box-shadow) !default; - -$alert-icon-space: var(--pgn-spacing-alert-icon-space) !default; - -$alert-font-size: var(--pgn-typography-alert-font-size) !default; -$alert-line-height: var(--pgn-typography-alert-line-height) !default; -$alert-content-color: var(--pgn-color-alert-content) !default; - -$alert-actions-gap: var(--pgn-spacing-alert-actions-gap) !default; - -$alert-success-border-color: var(--pgn-color-alert-border-success) !default; -$alert-success-bg: var(--pgn-color-alert-bg-success) !default; -$alert-success-icon-color: var(--pgn-color-alert-icon-success) !default; - -$alert-info-border-color: var(--pgn-color-alert-border-info) !default; -$alert-info-bg: var(--pgn-color-alert-bg-info) !default; -$alert-info-icon-color: var(--pgn-color-alert-icon-info) !default; - -$alert-danger-border-color: var(--pgn-color-alert-border-danger) !default; -$alert-danger-bg: var(--pgn-color-alert-bg-danger) !default; -$alert-danger-icon-color: var(--pgn-color-alert-icon-danger) !default; - -$alert-warning-border-color: var(--pgn-color-alert-border-warning) !default; -$alert-warning-bg: var(--pgn-color-alert-bg-warning) !default; -$alert-warning-icon-color: var(--pgn-color-alert-icon-warning) !default; diff --git a/src/Annotation/Annotation.scss b/src/Annotation/Annotation.scss index d8257efe15..cef45ee6e5 100644 --- a/src/Annotation/Annotation.scss +++ b/src/Annotation/Annotation.scss @@ -1,116 +1,140 @@ -@import "variables"; - -@mixin triangle($triangle-color, $triangle-direction) { - content: ""; - height: 0; - width: 0; - position: absolute; - border: solid transparent; - - @if $triangle-direction == top { - border-bottom-color: $triangle-color; - border-width: 0 $annotation-arrow-border-width $annotation-arrow-border-width; - right: 0; - left: 0; - top: calc(#{$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; - top: 0; - bottom: 0; - right: calc(#{$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; - right: 0; - left: 0; - bottom: calc(#{$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; - top: 0; - bottom: 0; - left: calc(#{$annotation-arrow-border-width} * -1); - margin: auto 0; - } - - @else { - @error "Unknown direction #{$triangle-direction}."; - } -} +@import "mixins"; .pgn__annotation { - padding: $annotation-padding; - border-radius: $annotation-border-radius; - max-width: $annotation-max-width; - filter: $annotation-box-shadow; + padding: var(--pgn-spacing-annotation-padding); + border-radius: var(--pgn-size-annotation-border-radius); + max-width: var(--pgn-size-annotation-max-width); + filter: var(--pgn-elevation-annotation-box-shadow); word-wrap: break-word; position: relative; display: inline-block; - font-size: $annotation-font-size; - line-height: $annotation-line-height; + font-size: var(--pgn-typography-annotation-font-size); + line-height: var(--pgn-typography-annotation-line-height); text-align: center; } -$arrow-directions: top, right, bottom, left; - -@each $name, $colors in $annotation-variants { - @each $direction in $arrow-directions { - .pgn__annotation-#{$name}-#{$direction} { - background-color: map-get($colors, "background-color"); - color: map-get($colors, "color"); - - // set additional margin to arrow side of the Annotation - margin-#{$direction}: calc(#{$annotation-arrow-border-width} + #{$annotation-arrow-side-margin}); - - [dir="rtl"] & { - @if $direction == left { - margin-left: 0; - margin-right: calc(#{$annotation-arrow-border-width} + #{$annotation-arrow-side-margin}); - } - - @else if $direction == right { - margin-right: 0; - margin-left: calc(#{$annotation-arrow-border-width} + #{$annotation-arrow-side-margin}); - } - } - - &::after { - @include triangle(map-get($colors, "background-color"), $direction); - - [dir="rtl"] & { - @if $direction == left { - left: initial; - right: calc(#{$annotation-arrow-border-width} * -1); - border-width: - $annotation-arrow-border-width 0 $annotation-arrow-border-width - $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); - border-width: - $annotation-arrow-border-width $annotation-arrow-border-width - $annotation-arrow-border-width 0; - border-right-color: map-get($colors, "background-color"); - } - } - } - } - } +// SUCCESS +.pgn__annotation-success-top { + @include annotation-variant( + var(--pgn-color-annotation-bg-success), + var(--pgn-color-annotation-text-success), "top" + ); +} + +.pgn__annotation-success-bottom { + @include annotation-variant( + var(--pgn-color-annotation-bg-success), + var(--pgn-color-annotation-text-success), "bottom"); +} + +.pgn__annotation-success-right { + @include annotation-variant( + var(--pgn-color-annotation-bg-success), + var(--pgn-color-annotation-text-success), "right"); +} + +.pgn__annotation-success-left { + @include annotation-variant( + var(--pgn-color-annotation-bg-success), + var(--pgn-color-annotation-text-success), "left"); +} + +// WARNING +.pgn__annotation-warning-top { + @include annotation-variant( + var(--pgn-color-annotation-bg-warning), + var(--pgn-color-annotation-text-warning), "top"); +} + +.pgn__annotation-warning-bottom { + @include annotation-variant( + var(--pgn-color-annotation-bg-warning), + var(--pgn-color-annotation-text-warning), "bottom"); +} + +.pgn__annotation-warning-right { + @include annotation-variant( + var(--pgn-color-annotation-bg-warning), + var(--pgn-color-annotation-text-warning), "right"); +} + +.pgn__annotation-warning-left { + @include annotation-variant( + var(--pgn-color-annotation-bg-warning), + var(--pgn-color-annotation-text-warning), "left"); +} + +// ERROR +.pgn__annotation-error-top { + @include annotation-variant( + var(--pgn-color-annotation-bg-error), + var(--pgn-color-annotation-text-error), "top"); +} + +.pgn__annotation-error-bottom { + @include annotation-variant( + var(--pgn-color-annotation-bg-error), + var(--pgn-color-annotation-text-error), "bottom"); +} + +.pgn__annotation-error-right { + @include annotation-variant( + var(--pgn-color-annotation-bg-error), + var(--pgn-color-annotation-text-error), "right"); +} + +.pgn__annotation-error-left { + @include annotation-variant( + var(--pgn-color-annotation-bg-error), + var(--pgn-color-annotation-text-error), "left"); +} + +// DARK +.pgn__annotation-dark-top { + @include annotation-variant( + var(--pgn-color-annotation-bg-dark), + var(--pgn-color-annotation-text-dark), "top"); +} + +.pgn__annotation-dark-bottom { + @include annotation-variant( + var(--pgn-color-annotation-bg-dark), + var(--pgn-color-annotation-text-dark), "bottom"); +} + +.pgn__annotation-dark-right { + @include annotation-variant( + var(--pgn-color-annotation-bg-dark), + var(--pgn-color-annotation-text-dark), "right"); +} + +.pgn__annotation-dark-left { + @include annotation-variant( + var(--pgn-color-annotation-bg-dark), + var(--pgn-color-annotation-text-dark), "left"); +} + +// LIGHT +.pgn__annotation-light-top { + @include annotation-variant( + var(--pgn-color-annotation-bg-light), + var(--pgn-color-annotation-text-light), "top"); +} + +.pgn__annotation-light-bottom { + @include annotation-variant( + var(--pgn-color-annotation-bg-light), + var(--pgn-color-annotation-text-light), "bottom"); +} + +.pgn__annotation-light-right { + @include annotation-variant( + var(--pgn-color-annotation-bg-light), + var(--pgn-color-annotation-text-light), "right"); +} + +.pgn__annotation-light-left { + @include annotation-variant( + var(--pgn-color-annotation-bg-light), + var(--pgn-color-annotation-text-light), "left"); } diff --git a/src/Annotation/_mixins.scss b/src/Annotation/_mixins.scss new file mode 100644 index 0000000000..7675227a51 --- /dev/null +++ b/src/Annotation/_mixins.scss @@ -0,0 +1,104 @@ +@mixin annotation-triangle($triangle-color, $triangle-direction) { + content: ""; + height: 0; + width: 0; + position: absolute; + border: solid transparent; + + @if $triangle-direction == top { + border-bottom-color: $triangle-color; + border-width: 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width); + right: 0; + left: 0; + top: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: 0 auto; + } + + @else if $triangle-direction == right { + border-left-color: $triangle-color; + border-width: + var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width); + top: 0; + bottom: 0; + right: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: auto 0; + } + + @else if $triangle-direction == bottom { + border-top-color: $triangle-color; + border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0; + right: 0; + left: 0; + bottom: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: 0 auto; + } + + @else if $triangle-direction == left { + border-right-color: $triangle-color; + border-width: + var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width) 0; + top: 0; + bottom: 0; + left: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + margin: auto 0; + } + + @else { + @error "Unknown direction #{$triangle-direction}."; + } +} + +@mixin annotation-variant($bg-color, $text-color, $direction) { + background-color: $bg-color; + color: $text-color; + + // set additional margin to arrow side of the Annotation + margin-#{$direction}: + calc( + var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin) + ); + + [dir="rtl"] & { + @if $direction == left { + margin-left: 0; + margin-right: + calc( + var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin) + ); + } + + @else if $direction == right { + margin-right: 0; + margin-left: + calc( + var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin) + ); + } + } + + &::after { + @include annotation-triangle($bg-color, $direction); + + [dir="rtl"] & { + @if $direction == left { + left: initial; + right: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + border-width: + var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width); + border-left-color: $bg-color; + } + + @else if $direction == right { + right: initial; + left: calc(var(--pgn-size-annotation-arrow-border-width) * -1); + border-width: + var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width) 0; + border-right-color: $bg-color; + } + } + } +} diff --git a/src/Annotation/_variables.scss b/src/Annotation/_variables.scss deleted file mode 100644 index 1486c0f497..0000000000 --- a/src/Annotation/_variables.scss +++ /dev/null @@ -1,32 +0,0 @@ -$annotation-padding: var(--pgn-spacing-annotation-padding) !default; -$annotation-box-shadow: var(--pgn-elevation-annotation-box-shadow) !default; -$annotation-border-radius: var(--pgn-size-annotation-border-radius) !default; -$annotation-max-width: var(--pgn-size-annotation-max-width) !default; -$annotation-font-size: var(--pgn-typography-annotation-font-size) !default; -$annotation-line-height: var(--pgn-typography-annotation-line-height) !default; - -$annotation-success-color: var(--pgn-color-annotation-text-success) !default; -$annotation-success-bg: var(--pgn-color-annotation-bg-success) !default; - -$annotation-warning-color: var(--pgn-color-annotation-text-warning) !default; -$annotation-warning-bg: var(--pgn-color-annotation-bg-warning) !default; - -$annotation-error-color: var(--pgn-color-annotation-text-error) !default; -$annotation-error-bg: var(--pgn-color-annotation-bg-error) !default; - -$annotation-light-color: var(--pgn-color-annotation-text-light) !default; -$annotation-light-bg: var(--pgn-color-annotation-bg-light) !default; - -$annotation-dark-color: var(--pgn-color-annotation-text-dark) !default; -$annotation-dark-bg: var(--pgn-color-annotation-bg-dark) !default; - -$annotation-variants: ( - "success": ( "background-color": $annotation-success-bg, "color": $annotation-success-color ), - "warning": ( "background-color": $annotation-warning-bg, "color": $annotation-warning-color ), - "error": ( "background-color": $annotation-error-bg, "color": $annotation-error-color ), - "light": ( "background-color": $annotation-light-bg, "color": $annotation-light-color ), - "dark": ( "background-color": $annotation-dark-bg, "color": $annotation-dark-color ), -) !default; - -$annotation-arrow-side-margin: var(--pgn-spacing-annotation-arrow-side-margin) !default; -$annotation-arrow-border-width: var(--pgn-size-annotation-arrow-border-width) !default; diff --git a/src/Avatar/Avatar.scss b/src/Avatar/Avatar.scss index 151e533c5f..658e7877d7 100644 --- a/src/Avatar/Avatar.scss +++ b/src/Avatar/Avatar.scss @@ -1,46 +1,44 @@ -@import "variables"; - .pgn__avatar { - border-radius: $avatar-border-radius; - border: solid $avatar-border $avatar-color-border; + border-radius: var(--pgn-size-avatar-border-radius); + border: solid var(--pgn-size-avatar-border-base) var(--pgn-color-avatar-border); display: inline-block; - height: $avatar-size; + height: var(--pgn-size-avatar-base); overflow: hidden; - width: $avatar-size; + width: var(--pgn-size-avatar-base); object-fit: cover; &.pgn__avatar-xs { - height: $avatar-size-xs; - width: $avatar-size-xs; + height: var(--pgn-size-avatar-xs); + width: var(--pgn-size-avatar-xs); } &.pgn__avatar-sm { - height: $avatar-size-sm; - width: $avatar-size-sm; + height: var(--pgn-size-avatar-sm); + width: var(--pgn-size-avatar-sm); } &.pgn__avatar-md { - height: $avatar-size; - width: $avatar-size; + height: var(--pgn-size-avatar-base); + width: var(--pgn-size-avatar-base); } &.pgn__avatar-lg { - height: $avatar-size-lg; - width: $avatar-size-lg; + height: var(--pgn-size-avatar-lg); + width: var(--pgn-size-avatar-lg); } &.pgn__avatar-xl { - height: $avatar-size-xl; - width: $avatar-size-xl; + height: var(--pgn-size-avatar-xl); + width: var(--pgn-size-avatar-xl); } &.pgn__avatar-xxl { - height: $avatar-size-xxl; - width: $avatar-size-xxl; + height: var(--pgn-size-avatar-xxl); + width: var(--pgn-size-avatar-xxl); } &.pgn__avatar-huge { - height: $avatar-size-huge; - width: $avatar-size-huge; + height: var(--pgn-size-avatar-huge); + width: var(--pgn-size-avatar-huge); } } diff --git a/src/Avatar/_variables.scss b/src/Avatar/_variables.scss deleted file mode 100644 index 66256a2fbc..0000000000 --- a/src/Avatar/_variables.scss +++ /dev/null @@ -1,11 +0,0 @@ -$avatar-border-radius: var(--pgn-size-avatar-border-radius) !default; -$avatar-border: var(--pgn-size-avatar-border-base) !default; -$avatar-color-border: var(--pgn-color-avatar-border) !default; - -$avatar-size-xs: var(--pgn-size-avatar-xs) !default; -$avatar-size-sm: var(--pgn-size-avatar-sm) !default; -$avatar-size: var(--pgn-size-avatar-base) !default; -$avatar-size-lg: var(--pgn-size-avatar-lg) !default; -$avatar-size-xl: var(--pgn-size-avatar-xl) !default; -$avatar-size-xxl: var(--pgn-size-avatar-xxl) !default; -$avatar-size-huge: var(--pgn-size-avatar-huge) !default; diff --git a/src/AvatarButton/AvatarButton.scss b/src/AvatarButton/AvatarButton.scss index ed06038d0a..1bc59902c1 100644 --- a/src/AvatarButton/AvatarButton.scss +++ b/src/AvatarButton/AvatarButton.scss @@ -1,14 +1,12 @@ -@import "variables"; - .btn.pgn__avatar-button-avatar { - padding-left: $avatar-button-padding-left; + padding-left: var(--pgn-spacing-avatar-button-padding-left-base); &.pgn__avatar-button-avatar-sm { - padding-left: $avatar-button-padding-left-sm; + padding-left: var(--pgn-spacing-avatar-button-padding-left-sm); } &.pgn__avatar-button-avatar-lg { - padding-left: $avatar-button-padding-left-lg; + padding-left: var(--pgn-spacing-avatar-button-padding-left-lg); } .pgn__avatar { diff --git a/src/AvatarButton/_variables.scss b/src/AvatarButton/_variables.scss deleted file mode 100644 index 3b4f0fa1b1..0000000000 --- a/src/AvatarButton/_variables.scss +++ /dev/null @@ -1,3 +0,0 @@ -$avatar-button-padding-left: var(--pgn-spacing-avatar-button-padding-left-base) !default; -$avatar-button-padding-left-sm: var(--pgn-spacing-avatar-button-padding-left-sm) !default; -$avatar-button-padding-left-lg: var(--pgn-spacing-avatar-button-padding-left-lg) !default; diff --git a/src/Badge/Badge.scss b/src/Badge/Badge.scss index 2a18461937..13a9df9bcb 100644 --- a/src/Badge/Badge.scss +++ b/src/Badge/Badge.scss @@ -1,34 +1,32 @@ -@import "variables"; - .badge { display: inline-block; - padding: $badge-padding-y $badge-padding-x; + padding: var(--pgn-spacing-badge-padding-y) var(--pgn-spacing-badge-padding-x-base); color: var(--pgn-badge-color, inherit); - background-color: var(--pgn-badge-bg-color, transparent); + background-color: var(--pgn-badge-bg, transparent); - @include font-size($badge-font-size); + @include font-size(var(--pgn-typography-badge-font-size)); - font-weight: $badge-font-weight; + font-weight: var(--pgn-typography-badge-font-weight); line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; - transition: $badge-transition; + transition: var(--pgn-transition-badge); - @include border-radius($badge-border-radius); + @include border-radius(var(--pgn-size-badge-border-radius-base)); @at-root a#{&} { &:hover, &:focus { text-decoration: none; color: var(--pgn-badge-focus-color, inherit); - background-color: var(--pgn-badge-focus-bg-color, transparent); + background-color: var(--pgn-badge-focus-bg, transparent); } &:focus, &.focus { outline: 0; - box-shadow: 0 0 0 $badge-focus-width var(--pgn-badge-focus-box-shadow-color, rgba(0, 0, 0, .15)); + box-shadow: 0 0 0 var(--pgn-size-badge-focus-width) var(--pgn-badge-focus-box-shadow, rgba(0, 0, 0, .15)); } } @@ -43,72 +41,72 @@ } .badge-pill { - padding-right: $badge-pill-padding-x; - padding-left: $badge-pill-padding-x; + padding-right: var(--pgn-spacing-badge-padding-x-pill); + padding-left: var(--pgn-spacing-badge-padding-x-pill); - @include border-radius($badge-pill-border-radius); + @include border-radius(var(--pgn-size-badge-border-radius-pill)); } .badge-primary { - --pgn-badge-color: #{$badge-primary-color}; - --pgn-badge-bg-color: #{$badge-primary-bg}; - --pgn-badge-focus-color: #{$badge-primary-focus-color}; - --pgn-badge-focus-bg-color: #{$badge-primary-focus-bg}; - --pgn-badge-focus-box-shadow-color: #{$badge-primary-focus-box-shadow-color}; + --pgn-badge-color: var(--pgn-color-badge-text-primary); + --pgn-badge-bg: var(--pgn-color-badge-bg-primary); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-primary); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-primary); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-primary); } .badge-secondary { - --pgn-badge-color: #{$badge-secondary-color}; - --pgn-badge-bg-color: #{$badge-secondary-bg}; - --pgn-badge-focus-color: #{$badge-secondary-focus-color}; - --pgn-badge-focus-bg-color: #{$badge-secondary-focus-bg}; - --pgn-badge-focus-box-shadow-color: #{$badge-secondary-focus-box-shadow-color}; + --pgn-badge-color: var(--pgn-color-badge-text-secondary); + --pgn-badge-bg: var(--pgn-color-badge-bg-secondary); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-secondary); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-secondary); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-secondary); } .badge-success { - --pgn-badge-color: #{$badge-success-color}; - --pgn-badge-bg-color: #{$badge-success-bg}; - --pgn-badge-focus-color: #{$badge-success-focus-color}; - --pgn-badge-focus-bg-color: #{$badge-success-focus-bg}; - --pgn-badge-focus-box-shadow-color: #{$badge-success-focus-box-shadow-color}; + --pgn-badge-color: var(--pgn-color-badge-text-success); + --pgn-badge-bg: var(--pgn-color-badge-bg-success); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-success); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-success); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-success); } .badge-danger { - --pgn-badge-color: #{$badge-danger-color}; - --pgn-badge-bg-color: #{$badge-danger-bg}; - --pgn-badge-focus-color: #{$badge-danger-focus-color}; - --pgn-badge-focus-bg-color: #{$badge-danger-focus-bg}; - --pgn-badge-focus-box-shadow-color: #{$badge-danger-focus-box-shadow-color}; + --pgn-badge-color: var(--pgn-color-badge-text-danger); + --pgn-badge-bg: var(--pgn-color-badge-bg-danger); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-danger); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-danger); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-danger); } .badge-warning { - --pgn-badge-color: #{$badge-warning-color}; - --pgn-badge-bg-color: #{$badge-warning-bg}; - --pgn-badge-focus-color: #{$badge-warning-focus-color}; - --pgn-badge-focus-bg-color: #{$badge-warning-focus-bg}; - --pgn-badge-focus-box-shadow-color: #{$badge-warning-focus-box-shadow-color}; + --pgn-badge-color: var(--pgn-color-badge-text-warning); + --pgn-badge-bg: var(--pgn-color-badge-bg-warning); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-warning); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-warning); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-warning); } .badge-info { - --pgn-badge-color: #{$badge-info-color}; - --pgn-badge-bg-color: #{$badge-info-bg}; - --pgn-badge-focus-color: #{$badge-info-focus-color}; - --pgn-badge-focus-bg-color: #{$badge-info-focus-bg}; - --pgn-badge-focus-box-shadow-color: #{$badge-info-focus-box-shadow-color}; + --pgn-badge-color: var(--pgn-color-badge-text-info); + --pgn-badge-bg: var(--pgn-color-badge-bg-info); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-info); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-info); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-info); } .badge-light { - --pgn-badge-color: #{$badge-light-color}; - --pgn-badge-bg-color: #{$badge-light-bg}; - --pgn-badge-focus-color: #{$badge-light-focus-color}; - --pgn-badge-focus-bg-color: #{$badge-light-focus-bg}; - --pgn-badge-focus-box-shadow-color: #{$badge-light-focus-box-shadow-color}; + --pgn-badge-color: var(--pgn-color-badge-text-light); + --pgn-badge-bg: var(--pgn-color-badge-bg-light); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-light); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-light); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-light); } .badge-dark { - --pgn-badge-color: #{$badge-dark-color}; - --pgn-badge-bg-color: #{$badge-dark-bg}; - --pgn-badge-focus-color: #{$badge-dark-focus-color}; - --pgn-badge-focus-bg-color: #{$badge-dark-focus-bg}; - --pgn-badge-focus-box-shadow-color: #{$badge-dark-focus-box-shadow-color}; + --pgn-badge-color: var(--pgn-color-badge-text-dark); + --pgn-badge-bg: var(--pgn-color-badge-bg-dark); + --pgn-badge-focus-color: var(--pgn-color-badge-focus-dark); + --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-dark); + --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-dark); } diff --git a/src/Badge/_variables.scss b/src/Badge/_variables.scss deleted file mode 100644 index 676ce0e64a..0000000000 --- a/src/Badge/_variables.scss +++ /dev/null @@ -1,64 +0,0 @@ -// Badges - -$badge-font-size: var(--pgn-typography-badge-font-size) !default; -$badge-font-weight: var(--pgn-typography-badge-font-weight) !default; -$badge-padding-y: var(--pgn-spacing-badge-padding-y) !default; -$badge-padding-x: var(--pgn-spacing-badge-padding-x-base) !default; -$badge-border-radius: var(--pgn-size-badge-border-radius-base) !default; - -$badge-transition: var(--pgn-transition-badge) !default; -$badge-focus-width: var(--pgn-size-badge-focus-width) !default; - -$badge-pill-padding-x: var(--pgn-spacing-badge-padding-x-pill) !default; - -// Use a higher than normal value to ensure completely rounded edges when -// customizing padding or font-size on labels. -$badge-pill-border-radius: var(--pgn-size-badge-border-radius-pill) !default; - -$badge-primary-color: var(--pgn-color-badge-text-primary) !default; -$badge-primary-bg: var(--pgn-color-badge-bg-primary) !default; -$badge-primary-focus-color: var(--pgn-color-badge-focus-primary) !default; -$badge-primary-focus-bg: var(--pgn-color-badge-focus-bg-primary) !default; -$badge-primary-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-primary) !default; - -$badge-secondary-color: var(--pgn-color-badge-text-secondary) !default; -$badge-secondary-bg: var(--pgn-color-badge-bg-secondary) !default; -$badge-secondary-focus-color: var(--pgn-color-badge-focus-secondary) !default; -$badge-secondary-focus-bg: var(--pgn-color-badge-focus-bg-secondary) !default; -$badge-secondary-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-secondary) !default; - -$badge-success-color: var(--pgn-color-badge-text-success) !default; -$badge-success-bg: var(--pgn-color-badge-bg-success) !default; -$badge-success-focus-color: var(--pgn-color-badge-focus-success) !default; -$badge-success-focus-bg: var(--pgn-color-badge-focus-bg-success) !default; -$badge-success-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-success) !default; - -$badge-danger-color: var(--pgn-color-badge-text-danger) !default; -$badge-danger-bg: var(--pgn-color-badge-bg-danger) !default; -$badge-danger-focus-color: var(--pgn-color-badge-focus-danger) !default; -$badge-danger-focus-bg: var(--pgn-color-badge-focus-bg-danger) !default; -$badge-danger-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-danger) !default; - -$badge-warning-color: var(--pgn-color-badge-text-warning) !default; -$badge-warning-bg: var(--pgn-color-badge-bg-warning) !default; -$badge-warning-focus-color: var(--pgn-color-badge-focus-warning) !default; -$badge-warning-focus-bg: var(--pgn-color-badge-focus-bg-warning) !default; -$badge-warning-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-warning) !default; - -$badge-info-color: var(--pgn-color-badge-text-info) !default; -$badge-info-bg: var(--pgn-color-badge-bg-info) !default; -$badge-info-focus-color: var(--pgn-color-badge-focus-info) !default; -$badge-info-focus-bg: var(--pgn-color-badge-focus-bg-info) !default; -$badge-info-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-info) !default; - -$badge-light-color: var(--pgn-color-badge-text-light) !default; -$badge-light-bg: var(--pgn-color-badge-bg-light) !default; -$badge-light-focus-color: var(--pgn-color-badge-focus-light) !default; -$badge-light-focus-bg: var(--pgn-color-badge-focus-bg-light) !default; -$badge-light-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-light) !default; - -$badge-dark-color: var(--pgn-color-badge-text-dark) !default; -$badge-dark-bg: var(--pgn-color-badge-bg-dark) !default; -$badge-dark-focus-color: var(--pgn-color-badge-focus-dark) !default; -$badge-dark-focus-bg: var(--pgn-color-badge-focus-bg-dark) !default; -$badge-dark-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-dark) !default; diff --git a/src/Breadcrumb/Breadcrumb.scss b/src/Breadcrumb/Breadcrumb.scss index 7a301d4d7d..b93fdf4977 100644 --- a/src/Breadcrumb/Breadcrumb.scss +++ b/src/Breadcrumb/Breadcrumb.scss @@ -1,13 +1,11 @@ -@import "variables"; - .pgn__breadcrumb { .list-inline-item { &.active { - color: $breadcrumb-active-color; + color: var(--pgn-color-breadcrumb-active); } a.link-muted { - color: $breadcrumb-color; + color: var(--pgn-color-breadcrumb-base); &:focus { position: relative; @@ -19,18 +17,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-size-breadcrumb-border-axis-y-focus) * -1); + right: calc(var(--pgn-size-breadcrumb-border-axis-x-focus) * -1); + bottom: calc(var(--pgn-size-breadcrumb-border-axis-y-focus) * -1); + left: calc(var(--pgn-size-breadcrumb-border-axis-x-focus) * -1); + border: var(--pgn-size-breadcrumb-border-width-focus) solid var(--pgn-color-breadcrumb-base); + border-radius: var(--pgn-size-breadcrumb-border-radius-focus); } } [dir="rtl"] & { margin-right: 0; - margin-left: $breadcrumb-margin-left; + margin-left: var(--pgn-spacing-breadcrumb-margin-left); } .pgn__icon { @@ -43,21 +41,21 @@ &-dark { .list-inline-item { &.active { - color: $breadcrumb-inverse-active; + color: var(--pgn-color-breadcrumb-inverse-active); } a.link-muted { - color: $breadcrumb-inverse-color; + color: var(--pgn-color-breadcrumb-inverse-base); &:focus::before { - border: $breadcrumb-border-focus-width solid $breadcrumb-inverse-color; + border: var(--pgn-size-breadcrumb-border-width-focus) solid var(--pgn-color-breadcrumb-inverse-base); } } } .pgn__icon, .custom-spacer { - color: $breadcrumb-inverse-spacer; + color: var(--pgn-color-breadcrumb-inverse-spacer); } } @@ -71,7 +69,7 @@ .list-inline-item:not(:last-child) { margin-right: 0; - margin-left: $breadcrumb-margin-left; + margin-left: var(--pgn-spacing-breadcrumb-margin-left); } .pgn__icon { diff --git a/src/Breadcrumb/_variables.scss b/src/Breadcrumb/_variables.scss deleted file mode 100644 index 4e5044d910..0000000000 --- a/src/Breadcrumb/_variables.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Breadcrumbs - -$breadcrumb-font-size: var(--pgn-typography-breadcrumb-font-size) !default; - -$breadcrumb-padding-y: var(--pgn-spacing-breadcrumb-padding-y) !default; -$breadcrumb-padding-x: var(--pgn-spacing-breadcrumb-padding-x) !default; -$breadcrumb-item-padding: var(--pgn-spacing-breadcrumb-padding-item) !default; - -$breadcrumb-margin-bottom: var(--pgn-spacing-breadcrumb-margin-bottom) !default; -$breadcrumb-margin-left: var(--pgn-spacing-breadcrumb-margin-left) !default; - -$breadcrumb-border-focus-axis-x: var(--pgn-size-breadcrumb-border-axis-x-focus) !default; -$breadcrumb-border-focus-axis-y: var(--pgn-size-breadcrumb-border-axis-y-focus) !default; - -$breadcrumb-border-focus-width: var(--pgn-size-breadcrumb-border-width-focus) !default; - -$breadcrumb-bg: var(--pgn-color-breadcrumb-bg) !default; -$breadcrumb-divider-color: var(--pgn-color-breadcrumb-divider) !default; -$breadcrumb-active-color: var(--pgn-color-breadcrumb-active) !default; -$breadcrumb-inverse-active: var(--pgn-color-breadcrumb-inverse-active) !default; -$breadcrumb-inverse-spacer: var(--pgn-color-breadcrumb-inverse-spacer) !default; -$breadcrumb-color: var(--pgn-color-breadcrumb-base) !default; -$breadcrumb-inverse-color: var(--pgn-color-breadcrumb-inverse-base) !default; -$breadcrumb-divider: "/" !default; - -$breadcrumb-border-radius: var(--pgn-size-breadcrumb-border-radius-base) !default; -$breadcrumb-focus-border-radius: var(--pgn-size-breadcrumb-border-radius-focus) !default; diff --git a/src/Bubble/Bubble.scss b/src/Bubble/Bubble.scss index 72444be640..e462bd727c 100644 --- a/src/Bubble/Bubble.scss +++ b/src/Bubble/Bubble.scss @@ -1,5 +1,3 @@ -@import "variables"; - .pgn__bubble { line-height: normal; min-height: 1.5rem; @@ -8,36 +6,36 @@ display: inline-flex; align-items: center; justify-content: center; - font-size: $font-size-xs; + font-size: var(--pgn-typography-font-size-xs); color: var(--pgn-bubble-color, inherit); background-color: var(--pgn-bubble-bg, transparent); &:disabled, &.disabled { - background: $gray-500; + background: var(--pgn-color-gray-500); } &.expandable { - padding: $bubble-expandable-padding-y $bubble-expandable-padding-x; + padding: var(--pgn-spacing-bubble-expandable-padding-y) var(--pgn-spacing-bubble-expandable-padding-x); } } .pgn__bubble-primary { - --pgn-bubble-color: #{$bubble-primary-color}; - --pgn-bubble-bg: #{$bubble-primary-bg}; + --pgn-bubble-color: var(--pgn-color-bubble-text-primary); + --pgn-bubble-bg: var(--pgn-color-bubble-bg-primary); } .pgn__bubble-success { - --pgn-bubble-color: #{$bubble-success-color}; - --pgn-bubble-bg: #{$bubble-success-bg}; + --pgn-bubble-color: var(--pgn-color-bubble-text-success); + --pgn-bubble-bg: var(--pgn-color-bubble-bg-success); } .pgn__bubble-warning { - --pgn-bubble-color: #{$bubble-warning-color}; - --pgn-bubble-bg: #{$bubble-warning-bg}; + --pgn-bubble-color: var(--pgn-color-bubble-text-warning); + --pgn-bubble-bg: var(--pgn-color-bubble-bg-warning); } .pgn__bubble-error { - --pgn-bubble-color: #{$bubble-error-color}; - --pgn-bubble-bg: #{$bubble-error-bg}; + --pgn-bubble-color: var(--pgn-color-bubble-text-error); + --pgn-bubble-bg: var(--pgn-color-bubble-bg-error); } diff --git a/src/Bubble/_variables.scss b/src/Bubble/_variables.scss deleted file mode 100644 index 8b56611cc1..0000000000 --- a/src/Bubble/_variables.scss +++ /dev/null @@ -1,14 +0,0 @@ -$bubble-success-color: var(--pgn-color-bubble-text-success) !default; -$bubble-success-bg: var(--pgn-color-bubble-bg-success) !default; - -$bubble-warning-color: var(--pgn-color-bubble-text-warning) !default; -$bubble-warning-bg: var(--pgn-color-bubble-bg-warning) !default; - -$bubble-error-color: var(--pgn-color-bubble-text-error) !default; -$bubble-error-bg: var(--pgn-color-bubble-bg-error) !default; - -$bubble-primary-color: var(--pgn-color-bubble-text-primary) !default; -$bubble-primary-bg: var(--pgn-color-bubble-bg-primary) !default; - -$bubble-expandable-padding-x: var(--pgn-spacing-bubble-expandable-padding-x) !default; -$bubble-expandable-padding-y: var(--pgn-spacing-bubble-expandable-padding-y) !default; diff --git a/src/Button/Button.scss b/src/Button/Button.scss index dbfa1bbfe6..3b460a9a83 100644 --- a/src/Button/Button.scss +++ b/src/Button/Button.scss @@ -1,4 +1,3 @@ -@import "variables"; @import "mixins"; @import "button-group"; @@ -6,17 +5,23 @@ display: inline-flex; align-items: center; justify-content: center; - font-family: $btn-font-family; - font-weight: $btn-font-weight; + font-family: var(--pgn-typography-btn-font-family); + font-weight: var(--pgn-typography-btn-font-weight); text-align: center; vertical-align: middle; user-select: none; - border: $btn-border-width solid var(--pgn-btn-border-color, transparent); - color: var(--pgn-btn-color, #{$body-color}); + border: var(--pgn-size-btn-border-width) solid var(--pgn-btn-border-color, transparent); + color: var(--pgn-btn-color, var(--pgn-color-body-base)); background-color: var(--pgn-btn-bg, transparent); - transition: $btn-transition; + transition: var(--pgn-transition-btn); - @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); + @include button-size( + var(--pgn-spacing-btn-padding-y-base), + var(--pgn-spacing-btn-padding-x-base), + var(--pgn-typography-btn-font-size-base), + var(--pgn-typography-btn-line-height-base), + var(--pgn-size-btn-border-radius-base) + ); &:not(:disabled):not(.disabled):not(.btn-link) { &.focus, @@ -26,25 +31,25 @@ box-shadow: none; background: var(--pgn-btn-focus-bg, transparent); border-color: var(--pgn-btn-focus-border-color, transparent); - color: var(--pgn-btn-focus-color, #{$body-color}); + color: var(--pgn-btn-focus-color, var(--pgn-color-body-base)); &::before { content: ""; position: absolute; - top: calc(#{$btn-focus-distance-to-border} * -1); - right: calc(#{$btn-focus-distance-to-border} * -1); - bottom: calc(#{$btn-focus-distance-to-border} * -1); - left: calc(#{$btn-focus-distance-to-border} * -1); - border: solid $btn-focus-width var(--pgn-btn-focus-outline-color, #{$body-color}); - border-radius: $btn-focus-border-radius; + top: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1); + right: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1); + bottom: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1); + left: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1); + border: solid var(--pgn-size-btn-focus-width) var(--pgn-btn-focus-outline-color, var(--pgn-color-body-base)); + border-radius: var(--pgn-size-btn-focus-border-radius); } &.btn-lg::before { - border-radius: $btn-focus-border-radius; + border-radius: var(--pgn-size-btn-focus-border-radius); } &.btn-sm::before { - border-radius: $btn-focus-border-radius; + border-radius: var(--pgn-size-btn-focus-border-radius); } &:active, @@ -63,7 +68,7 @@ } &:hover { - color: var(--pgn-btn-hover-color, #{$body-color}); + color: var(--pgn-btn-hover-color, var(--pgn-color-body-base)); background-color: var(--pgn-btn-hover-bg, transparent); border-color: var(--pgn-btn-hover-border-color, transparent); text-decoration: none; @@ -83,7 +88,7 @@ color: var(--pgn-btn-disabled-color, inherit); background-color: var(--pgn-btn-disabled-bg, inherit); border-color: var(--pgn-btn-disabled-border-color, transparent); - opacity: $btn-disabled-opacity; + opacity: var(--pgn-other-btn-disabled-opacity); } // Button Icon Sizes @@ -121,24 +126,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-typography-font-weight-normal); + color: var(--pgn-color-link-base); + text-decoration: var(--pgn-typography-link-decoration-base); &:hover { - color: $link-hover-color; - text-decoration: $link-hover-decoration; + color: var(--pgn-color-link-hover); + text-decoration: var(--pgn-typography-link-decoration-hover); } &:focus, &.focus { - text-decoration: $link-hover-decoration; + text-decoration: var(--pgn-typography-link-decoration-hover); box-shadow: none; } &:disabled, &.disabled { - color: $btn-link-disabled-color; + color: var(--pgn-color-btn-disabled-link); pointer-events: none; } } @@ -149,15 +154,21 @@ 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-spacing-btn-padding-y-lg), + var(--pgn-spacing-btn-padding-x-lg), + var(--pgn-typography-btn-font-size-lg), + var(--pgn-typography-btn-line-height-lg), + var(--pgn-size-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-spacing-btn-padding-y-sm), + var(--pgn-spacing-btn-padding-x-sm), + var(--pgn-typography-btn-font-size-sm), + var(--pgn-typography-btn-line-height-sm), + var(--pgn-size-btn-border-radius-sm) ); } @@ -171,12 +182,12 @@ fieldset:disabled a.btn { // Vertically space out multiple block buttons + .btn-block { - margin-top: $btn-block-spacing-y; + margin-top: var(--pgn-spacing-btn-block-spacing-y); } } .btn-inline { - line-height: calc(#{$line-height-base}em - 2 * #{$btn-border-width}); + line-height: calc(var(--pgn-typography-line-height-base) * 1em - 2 * var(--pgn-size-btn-border-width)); font-size: inherit; vertical-align: bottom; padding: 0 .25em; @@ -199,770 +210,770 @@ 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-size-btn-border-radius-base) 0 0 var(--pgn-size-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-size-btn-border-radius-base); + border-bottom-right-radius: var(--pgn-size-btn-border-radius-base); } // PRIMARY BUTTONS .btn-primary { - --pgn-btn-color: #{$btn-primary-color}; - --pgn-btn-bg: #{$btn-primary-bg}; - --pgn-btn-border-color: #{$btn-primary-border-color}; - --pgn-btn-hover-color: #{$btn-primary-hover-color}; - --pgn-btn-hover-bg: #{$btn-primary-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-primary-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-primary-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-primary-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-primary-disabled-border-color}; - --pgn-btn-active-color: #{$btn-primary-active-color}; - --pgn-btn-active-bg: #{$btn-primary-active-bg}; - --pgn-btn-active-border-color: #{$btn-primary-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-primary-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-primary-focus-color}; - --pgn-btn-focus-border-color: #{$btn-primary-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-primary-focus-bg}; - - box-shadow: $btn-box-shadow; + --pgn-btn-color: var(--pgn-color-btn-text-primary); + --pgn-btn-bg: var(--pgn-color-btn-bg-primary); + --pgn-btn-border-color: var(--pgn-color-btn-border-primary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-primary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-primary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-primary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-primary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-primary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-primary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-primary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-primary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-primary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-primary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-primary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-primary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-primary); + + box-shadow: var(--pgn-elevation-btn-box-shadow-base); } .btn-outline-primary { - --pgn-btn-color: #{$btn-primary-outline-color}; - --pgn-btn-bg: #{$btn-primary-outline-bg}; - --pgn-btn-border-color: #{$btn-primary-outline-border-color}; - --pgn-btn-hover-color: #{$btn-primary-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-primary-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-primary-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-primary-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-primary-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-primary-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-primary-outline-active-color}; - --pgn-btn-active-bg: #{$btn-primary-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-primary-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-primary-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-primary-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-primary-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-primary-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-outline-primary); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-primary); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-primary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-primary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-primary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-primary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-primary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-primary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-primary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-primary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-primary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-primary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-primary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-primary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-primary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-primary); } .btn-inverse-primary { - --pgn-btn-color: #{$btn-primary-inverse-color}; - --pgn-btn-bg: #{$btn-primary-inverse-bg}; - --pgn-btn-border-color: #{$btn-primary-inverse-border-color}; - --pgn-btn-hover-color: #{$btn-primary-inverse-hover-color}; - --pgn-btn-hover-bg: #{$btn-primary-inverse-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-primary-inverse-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-primary-inverse-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-primary-inverse-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-primary-inverse-disabled-border-color}; - --pgn-btn-active-color: #{$btn-primary-inverse-active-color}; - --pgn-btn-active-bg: #{$btn-primary-inverse-active-bg}; - --pgn-btn-active-border-color: #{$btn-primary-inverse-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-primary-inverse-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-primary-inverse-focus-color}; - --pgn-btn-focus-border-color: #{$btn-primary-inverse-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-primary-inverse-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-primary); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-primary); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-primary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-primary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-primary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-primary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-primary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-primary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-primary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-primary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-primary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-primary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-primary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-primary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-primary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-primary); } .btn-inverse-outline-primary { - --pgn-btn-color: #{$btn-primary-inverse-outline-color}; - --pgn-btn-bg: #{$btn-primary-inverse-outline-bg}; - --pgn-btn-border-color: #{$btn-primary-inverse-outline-border-color}; - --pgn-btn-hover-color: #{$btn-primary-inverse-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-primary-inverse-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-primary-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-primary-inverse-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-primary-inverse-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-primary-inverse-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-primary-inverse-outline-active-color}; - --pgn-btn-active-bg: #{$btn-primary-inverse-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-primary-inverse-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-primary-inverse-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-primary-inverse-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-primary-inverse-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-primary-inverse-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-primary); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-primary); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-primary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-primary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-primary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-primary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-primary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-primary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-primary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-primary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-primary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-primary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-primary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-primary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-primary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-primary); } // SECONDARY BUTTONS .btn-secondary { - --pgn-btn-color: #{$btn-secondary-color}; - --pgn-btn-bg: #{$btn-secondary-bg}; - --pgn-btn-border-color: #{$btn-secondary-border-color}; - --pgn-btn-hover-color: #{$btn-secondary-hover-color}; - --pgn-btn-hover-bg: #{$btn-secondary-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-secondary-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-secondary-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-secondary-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-secondary-disabled-border-color}; - --pgn-btn-active-color: #{$btn-secondary-active-color}; - --pgn-btn-active-bg: #{$btn-secondary-active-bg}; - --pgn-btn-active-border-color: #{$btn-secondary-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-secondary-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-secondary-focus-color}; - --pgn-btn-focus-border-color: #{$btn-secondary-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-secondary-focus-bg}; - - box-shadow: $btn-box-shadow; + --pgn-btn-color: var(--pgn-color-btn-text-secondary); + --pgn-btn-bg: var(--pgn-color-btn-bg-secondary); + --pgn-btn-border-color: var(--pgn-color-btn-border-secondary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-secondary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-secondary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-secondary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-secondary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-secondary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-secondary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-secondary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-secondary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-secondary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-secondary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-secondary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-secondary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-secondary); + + box-shadow: var(--pgn-elevation-btn-box-shadow-base); } .btn-outline-secondary { - --pgn-btn-color: #{$btn-secondary-outline-color}; - --pgn-btn-bg: #{$btn-secondary-outline-bg}; - --pgn-btn-border-color: #{$btn-secondary-outline-border-color}; - --pgn-btn-hover-color: #{$btn-secondary-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-secondary-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-secondary-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-secondary-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-secondary-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-secondary-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-secondary-outline-active-color}; - --pgn-btn-active-bg: #{$btn-secondary-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-secondary-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-secondary-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-secondary-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-secondary-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-secondary-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-outline-secondary); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-secondary); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-secondary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-secondary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-secondary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-secondary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-secondary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-secondary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-secondary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-secondary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-secondary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-secondary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-secondary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-secondary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-secondary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-secondary); } .btn-inverse-secondary { - --pgn-btn-color: #{$btn-secondary-inverse-color}; - --pgn-btn-bg: #{$btn-secondary-inverse-bg}; - --pgn-btn-border-color: #{$btn-secondary-inverse-border-color}; - --pgn-btn-hover-color: #{$btn-secondary-inverse-hover-color}; - --pgn-btn-hover-bg: #{$btn-secondary-inverse-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-secondary-inverse-hover-border-color}; - --pgn-btn-disabled-bg: #{$btn-secondary-inverse-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-secondary-inverse-disabled-border-color}; - --pgn-btn-disabled-color: #{$btn-secondary-inverse-disabled-color}; - --pgn-btn-active-color: #{$btn-secondary-inverse-active-color}; - --pgn-btn-active-bg: #{$btn-secondary-inverse-active-bg}; - --pgn-btn-active-border-color: #{$btn-secondary-inverse-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-secondary-inverse-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-secondary-inverse-focus-color}; - --pgn-btn-focus-border-color: #{$btn-secondary-inverse-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-secondary-inverse-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-secondary); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-secondary); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-secondary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-secondary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-secondary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-secondary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-secondary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-secondary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-secondary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-secondary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-secondary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-secondary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-secondary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-secondary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-secondary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-secondary); } .btn-inverse-outline-secondary { - --pgn-btn-color: #{$btn-secondary-inverse-outline-color}; - --pgn-btn-bg: #{$btn-secondary-inverse-outline-bg}; - --pgn-btn-border-color: #{$btn-secondary-inverse-outline-border-color}; - --pgn-btn-hover-color: #{$btn-secondary-inverse-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-secondary-inverse-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-secondary-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-secondary-inverse-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-secondary-inverse-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-secondary-inverse-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-secondary-inverse-outline-active-color}; - --pgn-btn-active-bg: #{$btn-secondary-inverse-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-secondary-inverse-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-secondary-inverse-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-secondary-inverse-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-secondary-inverse-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-secondary-inverse-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-secondary); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-secondary); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-secondary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-secondary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-secondary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-secondary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-secondary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-secondary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-secondary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-secondary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-secondary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-secondary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-secondary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-secondary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-secondary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-secondary); } // BRAND BUTTONS .btn-brand { - --pgn-btn-color: #{$btn-brand-color}; - --pgn-btn-bg: #{$btn-brand-bg}; - --pgn-btn-border-color: #{$btn-brand-border-color}; - --pgn-btn-hover-color: #{$btn-brand-hover-color}; - --pgn-btn-hover-bg: #{$btn-brand-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-brand-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-brand-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-brand-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-brand-disabled-border-color}; - --pgn-btn-active-color: #{$btn-brand-active-color}; - --pgn-btn-active-bg: #{$btn-brand-active-bg}; - --pgn-btn-active-border-color: #{$btn-brand-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-brand-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-brand-focus-color}; - --pgn-btn-focus-border-color: #{$btn-brand-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-brand-focus-bg}; - - box-shadow: $btn-box-shadow; + --pgn-btn-color: var(--pgn-color-btn-text-brand); + --pgn-btn-bg: var(--pgn-color-btn-bg-brand); + --pgn-btn-border-color: var(--pgn-color-btn-border-brand); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-brand); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-brand); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-brand); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-brand); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-brand); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-brand); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-brand); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-brand); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-brand); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-brand); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-brand); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-brand); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-brand); + + box-shadow: var(--pgn-elevation-btn-box-shadow-base); } .btn-outline-brand { - --pgn-btn-color: #{$btn-brand-outline-color}; - --pgn-btn-bg: #{$btn-brand-outline-bg}; - --pgn-btn-border-color: #{$btn-brand-outline-border-color}; - --pgn-btn-hover-color: #{$btn-brand-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-brand-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-brand-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-brand-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-brand-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-brand-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-brand-outline-active-color}; - --pgn-btn-active-bg: #{$btn-brand-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-brand-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-brand-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-brand-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-brand-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-brand-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-outline-brand); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-brand); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-brand); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-brand); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-brand); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-brand); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-brand); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-brand); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-brand); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-brand); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-brand); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-brand); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-brand); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-brand); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-brand); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-brand); } .btn-inverse-brand { - --pgn-btn-color: #{$btn-brand-inverse-color}; - --pgn-btn-bg: #{$btn-brand-inverse-bg}; - --pgn-btn-border-color: #{$btn-brand-inverse-border-color}; - --pgn-btn-hover-color: #{$btn-brand-inverse-hover-color}; - --pgn-btn-hover-bg: #{$btn-brand-inverse-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-brand-inverse-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-brand-inverse-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-brand-inverse-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-brand-inverse-disabled-border-color}; - --pgn-btn-active-color: #{$btn-brand-inverse-active-color}; - --pgn-btn-active-bg: #{$btn-brand-inverse-active-bg}; - --pgn-btn-active-border-color: #{$btn-brand-inverse-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-brand-inverse-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-brand-inverse-focus-color}; - --pgn-btn-focus-border-color: #{$btn-brand-inverse-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-brand-inverse-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-brand); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-brand); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-brand); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-brand); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-brand); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-brand); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-brand); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-brand); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-brand); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-brand); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-brand); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-brand); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-brand); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-brand); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-brand); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-brand); } .btn-inverse-outline-brand { - --pgn-btn-color: #{$btn-brand-inverse-outline-color}; - --pgn-btn-bg: #{$btn-brand-inverse-outline-bg}; - --pgn-btn-border-color: #{$btn-brand-inverse-outline-border-color}; - --pgn-btn-hover-color: #{$btn-brand-inverse-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-brand-inverse-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-brand-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-brand-inverse-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-brand-inverse-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-brand-inverse-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-brand-inverse-outline-active-color}; - --pgn-btn-active-bg: #{$btn-brand-inverse-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-brand-inverse-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-brand-inverse-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-brand-inverse-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-brand-inverse-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-brand-inverse-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-brand); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-brand); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-brand); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-brand); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-brand); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-brand); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-brand); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-brand); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-brand); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-brand); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-brand); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-brand); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-brand); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-brand); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-brand); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-brand); } // DANGER BUTTONS .btn-danger { - --pgn-btn-color: #{$btn-danger-color}; - --pgn-btn-bg: #{$btn-danger-bg}; - --pgn-btn-border-color: #{$btn-danger-border-color}; - --pgn-btn-hover-color: #{$btn-danger-hover-color}; - --pgn-btn-hover-bg: #{$btn-danger-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-danger-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-danger-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-danger-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-danger-disabled-border-color}; - --pgn-btn-active-color: #{$btn-danger-active-color}; - --pgn-btn-active-bg: #{$btn-danger-active-bg}; - --pgn-btn-active-border-color: #{$btn-danger-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-danger-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-danger-focus-color}; - --pgn-btn-focus-border-color: #{$btn-danger-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-danger-focus-bg}; - - box-shadow: $btn-box-shadow; + --pgn-btn-color: var(--pgn-color-btn-text-danger); + --pgn-btn-bg: var(--pgn-color-btn-bg-danger); + --pgn-btn-border-color: var(--pgn-color-btn-border-danger); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-danger); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-danger); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-danger); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-danger); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-danger); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-danger); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-danger); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-danger); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-danger); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-danger); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-danger); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-danger); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-danger); + + box-shadow: var(--pgn-elevation-btn-box-shadow-base); } .btn-outline-danger { - --pgn-btn-color: #{$btn-danger-outline-color}; - --pgn-btn-bg: #{$btn-danger-outline-bg}; - --pgn-btn-border-color: #{$btn-danger-outline-border-color}; - --pgn-btn-hover-color: #{$btn-danger-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-danger-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-danger-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-danger-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-danger-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-danger-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-danger-outline-active-color}; - --pgn-btn-active-bg: #{$btn-danger-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-danger-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-danger-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-danger-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-danger-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-danger-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-outline-danger); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-danger); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-danger); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-danger); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-danger); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-danger); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-danger); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-danger); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-danger); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-danger); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-danger); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-danger); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-danger); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-danger); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-danger); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-danger); } .btn-inverse-danger { - --pgn-btn-color: #{$btn-danger-inverse-color}; - --pgn-btn-bg: #{$btn-danger-inverse-bg}; - --pgn-btn-border-color: #{$btn-danger-inverse-border-color}; - --pgn-btn-hover-color: #{$btn-danger-inverse-hover-color}; - --pgn-btn-hover-bg: #{$btn-danger-inverse-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-danger-inverse-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-danger-inverse-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-danger-inverse-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-danger-inverse-disabled-border-color}; - --pgn-btn-active-color: #{$btn-danger-inverse-active-color}; - --pgn-btn-active-bg: #{$btn-danger-inverse-active-bg}; - --pgn-btn-active-border-color: #{$btn-danger-inverse-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-danger-inverse-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-danger-inverse-focus-color}; - --pgn-btn-focus-border-color: #{$btn-danger-inverse-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-danger-inverse-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-danger); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-danger); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-danger); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-danger); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-danger); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-danger); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-danger); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-danger); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-danger); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-danger); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-danger); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-danger); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-danger); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-danger); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-danger); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-danger); } .btn-inverse-outline-danger { - --pgn-btn-color: #{$btn-danger-inverse-outline-color}; - --pgn-btn-bg: #{$btn-danger-inverse-outline-bg}; - --pgn-btn-border-color: #{$btn-danger-inverse-outline-border-color}; - --pgn-btn-hover-color: #{$btn-danger-inverse-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-danger-inverse-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-danger-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-danger-inverse-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-danger-inverse-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-danger-inverse-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-danger-inverse-outline-active-color}; - --pgn-btn-active-bg: #{$btn-danger-inverse-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-danger-inverse-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-danger-inverse-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-danger-inverse-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-danger-inverse-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-danger-inverse-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-danger); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-danger); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-danger); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-danger); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-danger); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-danger); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-danger); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-danger); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-danger); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-danger); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-danger); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-danger); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-danger); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-danger); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-danger); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-danger); } // DARK BUTTONS .btn-dark { - --pgn-btn-color: #{$btn-dark-color}; - --pgn-btn-bg: #{$btn-dark-bg}; - --pgn-btn-border-color: #{$btn-dark-border-color}; - --pgn-btn-hover-color: #{$btn-dark-hover-color}; - --pgn-btn-hover-bg: #{$btn-dark-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-dark-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-dark-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-dark-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-dark-disabled-border-color}; - --pgn-btn-active-color: #{$btn-dark-active-color}; - --pgn-btn-active-bg: #{$btn-dark-active-bg}; - --pgn-btn-active-border-color: #{$btn-dark-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-dark-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-dark-focus-color}; - --pgn-btn-focus-border-color: #{$btn-dark-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-dark-focus-bg}; - - box-shadow: $btn-box-shadow; + --pgn-btn-color: var(--pgn-color-btn-text-dark); + --pgn-btn-bg: var(--pgn-color-btn-bg-dark); + --pgn-btn-border-color: var(--pgn-color-btn-border-dark); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-dark); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-dark); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-dark); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-dark); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-dark); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-dark); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-dark); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-dark); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-dark); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-dark); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-dark); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-dark); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-dark); + + box-shadow: var(--pgn-elevation-btn-box-shadow-base); } .btn-outline-dark { - --pgn-btn-color: #{$btn-dark-outline-color}; - --pgn-btn-bg: #{$btn-dark-outline-bg}; - --pgn-btn-border-color: #{$btn-dark-outline-border-color}; - --pgn-btn-hover-color: #{$btn-dark-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-dark-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-dark-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-dark-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-dark-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-dark-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-dark-outline-active-color}; - --pgn-btn-active-bg: #{$btn-dark-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-dark-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-dark-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-dark-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-dark-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-dark-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-outline-dark); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-dark); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-dark); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-dark); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-dark); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-dark); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-dark); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-dark); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-dark); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-dark); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-dark); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-dark); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-dark); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-dark); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-dark); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-dark); } .btn-inverse-dark { - --pgn-btn-color: #{$btn-dark-inverse-color}; - --pgn-btn-bg: #{$btn-dark-inverse-bg}; - --pgn-btn-border-color: #{$btn-dark-inverse-border-color}; - --pgn-btn-hover-color: #{$btn-dark-inverse-hover-color}; - --pgn-btn-hover-bg: #{$btn-dark-inverse-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-dark-inverse-hover-border-color}; - --pgn-btn-disabled-bg: #{$btn-dark-inverse-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-dark-inverse-disabled-border-color}; - --pgn-btn-disabled-color: #{$btn-dark-inverse-disabled-color}; - --pgn-btn-active-color: #{$btn-dark-inverse-active-color}; - --pgn-btn-active-bg: #{$btn-dark-inverse-active-bg}; - --pgn-btn-active-border-color: #{$btn-dark-inverse-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-dark-inverse-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-dark-inverse-focus-color}; - --pgn-btn-focus-border-color: #{$btn-dark-inverse-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-dark-inverse-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-dark); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-dark); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-dark); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-dark); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-dark); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-dark); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-dark); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-dark); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-dark); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-dark); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-dark); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-dark); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-dark); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-dark); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-dark); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-dark); } .btn-inverse-outline-dark { - --pgn-btn-color: #{$btn-dark-inverse-outline-color}; - --pgn-btn-bg: #{$btn-dark-inverse-outline-bg}; - --pgn-btn-border-color: #{$btn-dark-inverse-outline-border-color}; - --pgn-btn-hover-color: #{$btn-dark-inverse-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-dark-inverse-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-dark-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-dark-inverse-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-dark-inverse-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-dark-inverse-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-dark-inverse-outline-active-color}; - --pgn-btn-active-bg: #{$btn-dark-inverse-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-dark-inverse-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-dark-inverse-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-dark-inverse-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-dark-inverse-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-dark-inverse-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-dark); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-dark); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-dark); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-dark); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-dark); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-dark); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-dark); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-dark); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-dark); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-dark); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-dark); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-dark); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-border-inverse-outline-dark); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-dark); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-outline-inverse-outline-dark); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-dark); } // INFO BUTTONS .btn-info { - --pgn-btn-color: #{$btn-info-color}; - --pgn-btn-bg: #{$btn-info-bg}; - --pgn-btn-border-color: #{$btn-info-border-color}; - --pgn-btn-hover-color: #{$btn-info-hover-color}; - --pgn-btn-hover-bg: #{$btn-info-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-info-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-info-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-info-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-info-disabled-border-color}; - --pgn-btn-active-color: #{$btn-info-active-color}; - --pgn-btn-active-bg: #{$btn-info-active-bg}; - --pgn-btn-active-border-color: #{$btn-info-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-info-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-info-focus-color}; - --pgn-btn-focus-border-color: #{$btn-info-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-info-focus-bg}; - - box-shadow: $btn-box-shadow; + --pgn-btn-color: var(--pgn-color-btn-text-info); + --pgn-btn-bg: var(--pgn-color-btn-bg-info); + --pgn-btn-border-color: var(--pgn-color-btn-border-info); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-info); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-info); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-info); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-info); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-info); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-info); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-info); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-info); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-info); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-info); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-info); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-info); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-info); + + box-shadow: var(--pgn-elevation-btn-box-shadow-base); } .btn-outline-info { - --pgn-btn-color: #{$btn-info-outline-color}; - --pgn-btn-bg: #{$btn-info-outline-bg}; - --pgn-btn-border-color: #{$btn-info-outline-border-color}; - --pgn-btn-hover-color: #{$btn-info-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-info-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-info-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-info-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-info-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-info-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-info-outline-active-color}; - --pgn-btn-active-bg: #{$btn-info-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-info-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-info-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-info-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-info-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-info-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-outline-info); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-info); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-info); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-info); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-info); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-info); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-info); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-info); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-info); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-info); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-info); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-info); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-info); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-info); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-info); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-info); } .btn-inverse-info { - --pgn-btn-color: #{$btn-info-inverse-color}; - --pgn-btn-bg: #{$btn-info-inverse-bg}; - --pgn-btn-border-color: #{$btn-info-inverse-border-color}; - --pgn-btn-hover-color: #{$btn-info-inverse-hover-color}; - --pgn-btn-hover-bg: #{$btn-info-inverse-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-info-inverse-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-info-inverse-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-info-inverse-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-info-inverse-disabled-border-color}; - --pgn-btn-active-color: #{$btn-info-inverse-active-color}; - --pgn-btn-active-bg: #{$btn-info-inverse-active-bg}; - --pgn-btn-active-border-color: #{$btn-info-inverse-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-info-inverse-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-info-inverse-focus-color}; - --pgn-btn-focus-border-color: #{$btn-info-inverse-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-info-inverse-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-info); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-info); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-info); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-info); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-info); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-info); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-info); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-info); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-info); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-info); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-info); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-info); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-info); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-info); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-info); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-info); } .btn-inverse-outline-info { - --pgn-btn-color: #{$btn-info-inverse-outline-color}; - --pgn-btn-bg: #{$btn-info-inverse-outline-bg}; - --pgn-btn-border-color: #{$btn-info-inverse-outline-border-color}; - --pgn-btn-hover-color: #{$btn-info-inverse-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-info-inverse-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-info-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-info-inverse-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-info-inverse-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-info-inverse-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-info-inverse-outline-active-color}; - --pgn-btn-active-bg: #{$btn-info-inverse-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-info-inverse-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-info-inverse-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-info-inverse-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-info-inverse-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-info-inverse-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-info); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-info); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-info); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-info); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-info); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-info); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-info); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-info); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-info); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-info); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-info); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-info); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-info); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-info); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-info); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-info); } // LIGHT BUTTONS .btn-light { - --pgn-btn-color: #{$btn-light-color}; - --pgn-btn-bg: #{$btn-light-bg}; - --pgn-btn-border-color: #{$btn-light-border-color}; - --pgn-btn-hover-color: #{$btn-light-hover-color}; - --pgn-btn-hover-bg: #{$btn-light-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-light-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-light-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-light-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-light-disabled-border-color}; - --pgn-btn-active-color: #{$btn-light-active-color}; - --pgn-btn-active-bg: #{$btn-light-active-bg}; - --pgn-btn-active-border-color: #{$btn-light-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-light-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-light-focus-color}; - --pgn-btn-focus-border-color: #{$btn-light-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-light-focus-bg}; - - box-shadow: $btn-box-shadow; + --pgn-btn-color: var(--pgn-color-btn-text-light); + --pgn-btn-bg: var(--pgn-color-btn-bg-light); + --pgn-btn-border-color: var(--pgn-color-btn-border-light); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-light); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-light); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-light); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-light); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-light); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-light); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-light); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-light); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-light); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-light); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-light); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-light); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-light); + + box-shadow: var(--pgn-elevation-btn-box-shadow-base); } .btn-outline-light { - --pgn-btn-color: #{$btn-light-outline-color}; - --pgn-btn-bg: #{$btn-light-outline-bg}; - --pgn-btn-border-color: #{$btn-light-outline-border-color}; - --pgn-btn-hover-color: #{$btn-light-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-light-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-light-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-light-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-light-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-light-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-light-outline-active-color}; - --pgn-btn-active-bg: #{$btn-light-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-light-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-light-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-light-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-light-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-light-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-outline-light); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-light); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-light); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-light); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-light); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-light); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-light); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-light); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-light); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-light); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-light); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-light); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-light); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-light); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-light); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-light); } .btn-inverse-light { - --pgn-btn-color: #{$btn-light-inverse-color}; - --pgn-btn-bg: #{$btn-light-inverse-bg}; - --pgn-btn-border-color: #{$btn-light-inverse-border-color}; - --pgn-btn-hover-color: #{$btn-light-inverse-hover-color}; - --pgn-btn-hover-bg: #{$btn-light-inverse-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-light-inverse-hover-border-color}; - --pgn-btn-disabled-bg: #{$btn-light-inverse-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-light-inverse-disabled-border-color}; - --pgn-btn-disabled-color: #{$btn-light-inverse-disabled-color}; - --pgn-btn-active-color: #{$btn-light-inverse-active-color}; - --pgn-btn-active-bg: #{$btn-light-inverse-active-bg}; - --pgn-btn-active-border-color: #{$btn-light-inverse-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-light-inverse-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-light-inverse-focus-color}; - --pgn-btn-focus-border-color: #{$btn-light-inverse-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-light-inverse-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-light); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-light); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-light); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-light); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-light); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-light); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-light); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-light); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-light); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-light); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-light); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-light); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-light); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-light); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-light); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-light); } .btn-inverse-outline-light { - --pgn-btn-color: #{$btn-light-inverse-outline-color}; - --pgn-btn-bg: #{$btn-light-inverse-outline-bg}; - --pgn-btn-border-color: #{$btn-light-inverse-outline-border-color}; - --pgn-btn-hover-color: #{$btn-light-inverse-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-light-inverse-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-light-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-light-inverse-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-light-inverse-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-light-inverse-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-light-inverse-outline-active-color}; - --pgn-btn-active-bg: #{$btn-light-inverse-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-light-inverse-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-light-inverse-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-light-inverse-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-light-inverse-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-light-inverse-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-light); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-light); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-light); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-light); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-light); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-light); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-light); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-light); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-light); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-light); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-light); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-light); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-light); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-light); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-light); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-light); } // SUCCESS BUTTONS .btn-success { - --pgn-btn-color: #{$btn-success-color}; - --pgn-btn-bg: #{$btn-success-bg}; - --pgn-btn-border-color: #{$btn-success-border-color}; - --pgn-btn-hover-color: #{$btn-success-hover-color}; - --pgn-btn-hover-bg: #{$btn-success-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-success-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-success-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-success-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-success-disabled-border-color}; - --pgn-btn-active-color: #{$btn-success-active-color}; - --pgn-btn-active-bg: #{$btn-success-active-bg}; - --pgn-btn-active-border-color: #{$btn-success-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-success-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-success-focus-color}; - --pgn-btn-focus-border-color: #{$btn-success-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-success-focus-bg}; - - box-shadow: $btn-box-shadow; + --pgn-btn-color: var(--pgn-color-btn-text-success); + --pgn-btn-bg: var(--pgn-color-btn-bg-success); + --pgn-btn-border-color: var(--pgn-color-btn-border-success); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-success); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-success); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-success); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-success); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-success); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-success); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-success); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-success); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-success); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-success); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-success); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-success); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-success); + + box-shadow: var(--pgn-elevation-btn-box-shadow-base); } .btn-outline-success { - --pgn-btn-color: #{$btn-success-outline-color}; - --pgn-btn-bg: #{$btn-success-outline-bg}; - --pgn-btn-border-color: #{$btn-success-outline-border-color}; - --pgn-btn-hover-color: #{$btn-success-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-success-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-success-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-success-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-success-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-success-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-success-outline-active-color}; - --pgn-btn-active-bg: #{$btn-success-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-success-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-success-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-success-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-success-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-success-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-outline-success); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-success); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-success); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-success); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-success); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-success); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-success); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-success); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-success); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-success); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-success); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-success); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-success); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-success); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-success); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-success); } .btn-inverse-success { - --pgn-btn-color: #{$btn-success-inverse-color}; - --pgn-btn-bg: #{$btn-success-inverse-bg}; - --pgn-btn-border-color: #{$btn-success-inverse-border-color}; - --pgn-btn-hover-color: #{$btn-success-inverse-hover-color}; - --pgn-btn-hover-bg: #{$btn-success-inverse-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-success-inverse-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-success-inverse-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-success-inverse-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-success-inverse-disabled-border-color}; - --pgn-btn-active-color: #{$btn-success-inverse-active-color}; - --pgn-btn-active-bg: #{$btn-success-inverse-active-bg}; - --pgn-btn-active-border-color: #{$btn-success-inverse-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-success-inverse-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-success-inverse-focus-color}; - --pgn-btn-focus-border-color: #{$btn-success-inverse-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-success-inverse-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-success); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-success); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-success); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-success); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-success); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-success); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-success); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-success); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-success); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-success); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-success); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-success); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-success); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-success); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-success); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-success); } .btn-inverse-outline-success { - --pgn-btn-color: #{$btn-success-inverse-outline-color}; - --pgn-btn-bg: #{$btn-success-inverse-outline-bg}; - --pgn-btn-border-color: #{$btn-success-inverse-outline-border-color}; - --pgn-btn-hover-color: #{$btn-success-inverse-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-success-inverse-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-success-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-success-inverse-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-success-inverse-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-success-inverse-outline-disabled-color}; - --pgn-btn-active-color: #{$btn-success-inverse-outline-active-color}; - --pgn-btn-active-bg: #{$btn-success-inverse-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-success-inverse-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-success-inverse-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-success-inverse-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-success-inverse-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-success-inverse-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-success); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-success); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-success); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-success); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-success); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-success); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-success); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-success); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-success); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-success); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-success); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-success); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-success); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-success); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-success); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-success); } // WARNING BUTTONS .btn-warning { - --pgn-btn-color: #{$btn-warning-color}; - --pgn-btn-bg: #{$btn-warning-bg}; - --pgn-btn-border-color: #{$btn-warning-border-color}; - --pgn-btn-hover-color: #{$btn-warning-hover-color}; - --pgn-btn-hover-bg: #{$btn-warning-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-warning-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-warning-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-warning-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-warning-disabled-border-color}; - --pgn-btn-active-color: #{$btn-warning-active-color}; - --pgn-btn-active-bg: #{$btn-warning-active-bg}; - --pgn-btn-active-border-color: #{$btn-warning-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-warning-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-warning-focus-color}; - --pgn-btn-focus-border-color: #{$btn-warning-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-warning-focus-bg}; - - box-shadow: $btn-box-shadow; + --pgn-btn-color: var(--pgn-color-btn-text-warning); + --pgn-btn-bg: var(--pgn-color-btn-bg-warning); + --pgn-btn-border-color: var(--pgn-color-btn-border-warning); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-warning); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-warning); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-warning); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-warning); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-warning); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-warning); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-warning); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-warning); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-warning); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-warning); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-warning); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-warning); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-warning); + + box-shadow: var(--pgn-elevation-btn-box-shadow-base); } .btn-outline-warning { - --pgn-btn-color: #{$btn-warning-outline-color}; - --pgn-btn-bg: #{$btn-warning-outline-bg}; - --pgn-btn-border-color: #{$btn-warning-outline-border-color}; - --pgn-btn-hover-color: #{$btn-warning-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-warning-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-warning-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-warning-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-warning-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-warning-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-warning-outline-active-color}; - --pgn-btn-active-bg: #{$btn-warning-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-warning-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-warning-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-warning-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-warning-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-warning-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-outline-warning); + --pgn-btn-bg: var(--pgn-color-btn-bg-outline-warning); + --pgn-btn-border-color: var(--pgn-color-btn-border-outline-warning); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-warning); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-warning); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-warning); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-warning); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-warning); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-warning); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-warning); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-warning); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-warning); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-warning); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-warning); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-warning); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-warning); } .btn-inverse-warning { - --pgn-btn-color: #{$btn-warning-inverse-color}; - --pgn-btn-bg: #{$btn-warning-inverse-bg}; - --pgn-btn-border-color: #{$btn-warning-inverse-border-color}; - --pgn-btn-hover-color: #{$btn-warning-inverse-hover-color}; - --pgn-btn-hover-bg: #{$btn-warning-inverse-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-warning-inverse-hover-border-color}; - --pgn-btn-disabled-bg: #{$btn-warning-inverse-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-warning-inverse-disabled-border-color}; - --pgn-btn-disabled-color: #{$btn-warning-inverse-disabled-color}; - --pgn-btn-active-color: #{$btn-warning-inverse-active-color}; - --pgn-btn-active-bg: #{$btn-warning-inverse-active-bg}; - --pgn-btn-active-border-color: #{$btn-warning-inverse-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-warning-inverse-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-warning-inverse-focus-color}; - --pgn-btn-focus-border-color: #{$btn-warning-inverse-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-warning-inverse-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-warning); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-warning); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-warning); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-warning); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-warning); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-warning); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-warning); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-warning); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-warning); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-warning); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-warning); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-warning); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-warning); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-warning); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-warning); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-warning); } .btn-inverse-outline-warning { - --pgn-btn-color: #{$btn-warning-inverse-outline-color}; - --pgn-btn-bg: #{$btn-warning-inverse-outline-bg}; - --pgn-btn-border-color: #{$btn-warning-inverse-outline-border-color}; - --pgn-btn-hover-color: #{$btn-warning-inverse-outline-hover-color}; - --pgn-btn-hover-bg: #{$btn-warning-inverse-outline-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-warning-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-warning-inverse-outline-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-warning-inverse-outline-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-warning-inverse-outline-disabled-border-color}; - --pgn-btn-active-color: #{$btn-warning-inverse-outline-active-color}; - --pgn-btn-active-bg: #{$btn-warning-inverse-outline-active-bg}; - --pgn-btn-active-border-color: #{$btn-warning-inverse-outline-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-warning-inverse-outline-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-warning-inverse-outline-focus-color}; - --pgn-btn-focus-border-color: #{$btn-warning-inverse-outline-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-warning-inverse-outline-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-warning); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-warning); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-warning); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-warning); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-warning); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-warning); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-warning); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-warning); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-warning); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-warning); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-warning); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-warning); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-border-inverse-outline-warning); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-warning); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-warning); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-outline-inverse-outline-warning); } // TERTIARY BUTTONS .btn-tertiary { - --pgn-btn-color: #{$btn-tertiary-color}; - --pgn-btn-bg: #{$btn-tertiary-bg}; - --pgn-btn-border-color: #{$btn-tertiary-border-color}; - --pgn-btn-hover-color: #{$btn-tertiary-hover-color}; - --pgn-btn-hover-bg: #{$btn-tertiary-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-tertiary-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-tertiary-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-tertiary-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-tertiary-disabled-border-color}; - --pgn-btn-active-color: #{$btn-tertiary-active-color}; - --pgn-btn-active-bg: #{$btn-tertiary-active-bg}; - --pgn-btn-active-border-color: #{$btn-tertiary-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-tertiary-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-tertiary-focus-color}; - --pgn-btn-focus-border-color: #{$btn-tertiary-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-tertiary-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-tertiary); + --pgn-btn-bg: var(--pgn-color-btn-bg-tertiary); + --pgn-btn-border-color: var(--pgn-color-btn-border-tertiary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-tertiary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-tertiary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-tertiary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-tertiary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-tertiary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-tertiary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-tertiary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-tertiary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-tertiary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-tertiary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-tertiary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-tertiary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-tertiary); } .btn-inverse-tertiary { - --pgn-btn-color: #{$btn-inverse-tertiary-color}; - --pgn-btn-bg: #{$btn-inverse-tertiary-bg}; - --pgn-btn-border-color: #{$btn-inverse-tertiary-border-color}; - --pgn-btn-hover-color: #{$btn-inverse-tertiary-hover-color}; - --pgn-btn-hover-bg: #{$btn-inverse-tertiary-hover-bg}; - --pgn-btn-hover-border-color: #{$btn-inverse-tertiary-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-inverse-tertiary-disabled-color}; - --pgn-btn-disabled-bg: #{$btn-inverse-tertiary-disabled-bg}; - --pgn-btn-disabled-border-color: #{$btn-inverse-tertiary-disabled-border-color}; - --pgn-btn-active-color: #{$btn-inverse-tertiary-active-color}; - --pgn-btn-active-bg: #{$btn-inverse-tertiary-active-bg}; - --pgn-btn-active-border-color: #{$btn-inverse-tertiary-active-border-color}; - --pgn-btn-focus-outline-color: #{$btn-inverse-tertiary-focus-outline-color}; - --pgn-btn-focus-color: #{$btn-inverse-tertiary-focus-color}; - --pgn-btn-focus-border-color: #{$btn-inverse-tertiary-focus-border-color}; - --pgn-btn-focus-bg: #{$btn-inverse-tertiary-focus-bg}; + --pgn-btn-color: var(--pgn-color-btn-text-inverse-tertiary); + --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-tertiary); + --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-tertiary); + --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-tertiary); + --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-tertiary); + --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-tertiary); + --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-tertiary); + --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-tertiary); + --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-tertiary); + --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-tertiary); + --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-tertiary); + --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-tertiary); + --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-tertiary); + --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-tertiary); + --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-tertiary); + --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-tertiary); } diff --git a/src/Button/_mixins.scss b/src/Button/_mixins.scss index 04c182e669..ed20a8b062 100644 --- a/src/Button/_mixins.scss +++ b/src/Button/_mixins.scss @@ -2,7 +2,7 @@ // No changes made. We do this to keep all button related mixins together, // // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { +@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $button-border-radius) { padding: $padding-y $padding-x; @include font-size($font-size); @@ -10,5 +10,5 @@ line-height: $line-height; // Manually declare to provide an override to the browser default - @include border-radius($border-radius, 0); + @include border-radius($button-border-radius, 0); } diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss deleted file mode 100644 index 8ffb2faa12..0000000000 --- a/src/Button/_variables.scss +++ /dev/null @@ -1,706 +0,0 @@ -// stylelint-disable max-line-length - -$btn-padding-y: var(--pgn-spacing-btn-padding-y-base) !default; -$btn-padding-x: var(--pgn-spacing-btn-padding-x-base) !default; -$btn-font-family: var(--pgn-typography-btn-font-family) !default; -$btn-font-size: var(--pgn-typography-btn-font-size-base) !default; -$btn-line-height: var(--pgn-typography-btn-line-height-base) !default; - -$btn-padding-y-sm: var(--pgn-spacing-btn-padding-y-sm) !default; -$btn-padding-x-sm: var(--pgn-spacing-btn-padding-x-sm) !default; -$btn-font-size-sm: var(--pgn-typography-btn-font-size-sm) !default; -$btn-line-height-sm: var(--pgn-typography-btn-line-height-sm) !default; - -$btn-padding-y-lg: var(--pgn-spacing-btn-padding-y-lg) !default; -$btn-padding-x-lg: var(--pgn-spacing-btn-padding-x-lg) !default; -$btn-font-size-lg: var(--pgn-typography-btn-font-size-lg) !default; -$btn-line-height-lg: var(--pgn-typography-btn-line-height-lg) !default; - -$btn-border-width: var(--pgn-size-btn-border-width) !default; - -$btn-font-weight: var(--pgn-typography-btn-font-weight) !default; -$btn-box-shadow: var(--pgn-elevation-btn-box-shadow-base) !default; -$btn-focus-width: var(--pgn-size-btn-focus-width) !default; -$btn-focus-gap: var(--pgn-spacing-btn-focus-gap) !default; -$btn-disabled-opacity: var(--pgn-other-btn-disabled-opacity) !default; -$btn-active-box-shadow: var(--pgn-elevation-btn-box-shadow-active) !default; - -$btn-link-disabled-color: var(--pgn-color-btn-disabled-link) !default; - -$btn-block-spacing-y: var(--pgn-spacing-btn-block-spacing-y) !default; - -// Allows for customizing button radius independently from global border radius -$btn-border-radius: var(--pgn-size-btn-border-radius-base) !default; -$btn-border-radius-lg: var(--pgn-size-btn-border-radius-lg) !default; -$btn-border-radius-sm: var(--pgn-size-btn-border-radius-sm) !default; - -$btn-transition: var(--pgn-transition-btn) !default; - -// PRIMARY BUTTON VARIABLES -$btn-primary-bg: var(--pgn-color-btn-bg-primary) !default; -$btn-primary-color: var(--pgn-color-btn-text-primary) !default; -$btn-primary-border-color: var(--pgn-color-btn-border-primary) !default; -$btn-primary-hover-bg: var(--pgn-color-btn-hover-bg-primary) !default; -$btn-primary-hover-color: var(--pgn-color-btn-hover-text-primary) !default; -$btn-primary-hover-border-color: var(--pgn-color-btn-hover-border-primary) !default; -$btn-primary-active-bg: var(--pgn-color-btn-active-bg-primary) !default; -$btn-primary-active-color: var(--pgn-color-btn-active-text-primary) !default; -$btn-primary-active-border-color: var(--pgn-color-btn-active-border-primary) !default; -$btn-primary-focus-outline-color: var(--pgn-color-btn-focus-outline-primary) !default; -$btn-primary-focus-bg: var(--pgn-color-btn-focus-bg-primary) !default; -$btn-primary-focus-color: var(--pgn-color-btn-focus-text-primary) !default; -$btn-primary-focus-border-color: var(--pgn-color-btn-focus-border-primary) !default; -$btn-primary-disabled-color: var(--pgn-color-btn-disabled-text-primary) !default; -$btn-primary-disabled-bg: var(--pgn-color-btn-disabled-bg-primary) !default; -$btn-primary-disabled-border-color: var(--pgn-color-btn-disabled-border-primary) !default; - -$btn-primary-outline-color: var(--pgn-color-btn-text-outline-primary) !default; -$btn-primary-outline-bg: var(--pgn-color-btn-bg-outline-primary) !default; -$btn-primary-outline-border-color: var(--pgn-color-btn-border-outline-primary) !default; -$btn-primary-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-primary) !default; -$btn-primary-outline-hover-color: var(--pgn-color-btn-hover-text-outline-primary) !default; -$btn-primary-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-primary) !default; -$btn-primary-outline-active-bg: var(--pgn-color-btn-active-bg-outline-primary) !default; -$btn-primary-outline-active-color: var(--pgn-color-btn-active-text-outline-primary) !default; -$btn-primary-outline-active-border-color: var(--pgn-color-btn-active-border-outline-primary) !default; -$btn-primary-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-primary) !default; -$btn-primary-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-primary) !default; -$btn-primary-outline-focus-color: var(--pgn-color-btn-focus-text-outline-primary) !default; -$btn-primary-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-primary) !default; -$btn-primary-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-primary) !default; -$btn-primary-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-primary) !default; -$btn-primary-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-primary) !default; - -$btn-primary-inverse-color: var(--pgn-color-btn-text-inverse-primary) !default; -$btn-primary-inverse-bg: var(--pgn-color-btn-bg-inverse-primary) !default; -$btn-primary-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-primary) !default; -$btn-primary-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-primary) !default; -$btn-primary-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-primary) !default; -$btn-primary-inverse-active-color: var(--pgn-color-btn-active-text-inverse-primary) !default; -$btn-primary-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-primary) !default; -$btn-primary-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-primary) !default; -$btn-primary-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-primary) !default; -$btn-primary-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-primary) !default; -$btn-primary-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-primary) !default; -$btn-primary-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-primary) !default; -$btn-primary-inverse-border-color: var(--pgn-color-btn-border-inverse-primary) !default; -$btn-primary-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-primary) !default; -$btn-primary-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-primary) !default; -$btn-primary-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-primary) !default; - -$btn-primary-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-primary) !default; -$btn-primary-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-primary) !default; -$btn-primary-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-primary) !default; -$btn-primary-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-primary) !default; -$btn-primary-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-primary) !default; -$btn-primary-inverse-outline-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-primary) !default; -$btn-primary-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-primary) !default; -$btn-primary-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-primary) !default; -$btn-primary-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-primary) !default; -$btn-primary-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-primary) !default; -$btn-primary-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-primary) !default; -$btn-primary-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-primary) !default; -$btn-primary-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-primary) !default; -$btn-primary-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-primary) !default; -$btn-primary-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-primary) !default; -$btn-primary-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-primary) !default; - - -// SECONDARY BUTTON VARIABLES -$btn-secondary-bg: var(--pgn-color-btn-bg-secondary) !default; -$btn-secondary-color: var(--pgn-color-btn-text-secondary) !default; -$btn-secondary-border-color: var(--pgn-color-btn-border-secondary) !default; -$btn-secondary-hover-bg: var(--pgn-color-btn-hover-bg-secondary) !default; -$btn-secondary-hover-color: var(--pgn-color-btn-hover-text-secondary) !default; -$btn-secondary-hover-border-color: var(--pgn-color-btn-hover-border-secondary) !default; -$btn-secondary-active-bg: var(--pgn-color-btn-active-bg-secondary) !default; -$btn-secondary-active-color: var(--pgn-color-btn-active-text-secondary) !default; -$btn-secondary-active-border-color: var(--pgn-color-btn-active-border-secondary) !default; -$btn-secondary-focus-outline-color: var(--pgn-color-btn-focus-outline-secondary) !default; -$btn-secondary-focus-border-color: var(--pgn-color-btn-focus-border-secondary) !default; -$btn-secondary-focus-bg: var(--pgn-color-btn-focus-bg-secondary) !default; -$btn-secondary-focus-color: var(--pgn-color-btn-focus-text-secondary) !default; -$btn-secondary-disabled-color: var(--pgn-color-btn-disabled-text-secondary) !default; -$btn-secondary-disabled-bg: var(--pgn-color-btn-disabled-bg-secondary) !default; -$btn-secondary-disabled-border-color: var(--pgn-color-btn-disabled-border-secondary) !default; - -$btn-secondary-outline-color: var(--pgn-color-btn-text-outline-secondary) !default; -$btn-secondary-outline-bg: var(--pgn-color-btn-bg-outline-secondary) !default; -$btn-secondary-outline-border-color: var(--pgn-color-btn-border-outline-secondary) !default; -$btn-secondary-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-secondary) !default; -$btn-secondary-outline-hover-color: var(--pgn-color-btn-hover-text-outline-secondary) !default; -$btn-secondary-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-secondary) !default; -$btn-secondary-outline-active-bg: var(--pgn-color-btn-active-bg-outline-secondary) !default; -$btn-secondary-outline-active-color: var(--pgn-color-btn-active-text-outline-secondary) !default; -$btn-secondary-outline-active-border-color: var(--pgn-color-btn-active-border-outline-secondary) !default; -$btn-secondary-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-secondary) !default; -$btn-secondary-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-secondary) !default; -$btn-secondary-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-secondary) !default; -$btn-secondary-outline-focus-color: var(--pgn-color-btn-focus-text-outline-secondary) !default; -$btn-secondary-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-secondary) !default; -$btn-secondary-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-secondary) !default; -$btn-secondary-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-secondary) !default; - -$btn-secondary-inverse-color: var(--pgn-color-btn-text-inverse-secondary) !default; -$btn-secondary-inverse-bg: var(--pgn-color-btn-bg-inverse-secondary) !default; -$btn-secondary-inverse-border-color: var(--pgn-color-btn-border-inverse-secondary) !default; -$btn-secondary-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-secondary) !default; -$btn-secondary-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-secondary) !default; -$btn-secondary-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-secondary) !default; -$btn-secondary-inverse-active-color: var(--pgn-color-btn-active-text-inverse-secondary) !default; -$btn-secondary-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-secondary) !default; -$btn-secondary-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-secondary) !default; -$btn-secondary-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-secondary) !default; -$btn-secondary-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-secondary) !default; -$btn-secondary-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-secondary) !default; -$btn-secondary-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-secondary) !default; -$btn-secondary-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-secondary) !default; -$btn-secondary-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-secondary) !default; -$btn-secondary-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-secondary) !default; - -$btn-secondary-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-secondary) !default; - -// BRAND BUTTON VARIABLES -$btn-brand-bg: var(--pgn-color-btn-bg-brand) !default; -$btn-brand-color: var(--pgn-color-btn-text-brand) !default; -$btn-brand-border-color: var(--pgn-color-btn-border-brand) !default; -$btn-brand-hover-bg: var(--pgn-color-btn-hover-bg-brand) !default; -$btn-brand-hover-color: var(--pgn-color-btn-hover-text-brand) !default; -$btn-brand-hover-border-color: var(--pgn-color-btn-hover-border-brand) !default; -$btn-brand-active-bg: var(--pgn-color-btn-active-bg-brand) !default; -$btn-brand-active-color: var(--pgn-color-btn-active-text-brand) !default; -$btn-brand-active-border-color: var(--pgn-color-btn-active-border-brand) !default; -$btn-brand-focus-outline-color: var(--pgn-color-btn-focus-outline-brand) !default; -$btn-brand-focus-border-color: var(--pgn-color-btn-focus-border-brand) !default; -$btn-brand-focus-bg: var(--pgn-color-btn-focus-bg-brand) !default; -$btn-brand-focus-color: var(--pgn-color-btn-focus-text-brand) !default; -$btn-brand-disabled-color: var(--pgn-color-btn-disabled-text-brand) !default; -$btn-brand-disabled-bg: var(--pgn-color-btn-disabled-bg-brand) !default; -$btn-brand-disabled-border-color: var(--pgn-color-btn-disabled-border-brand) !default; - -$btn-brand-outline-color: var(--pgn-color-btn-text-outline-brand) !default; -$btn-brand-outline-bg: var(--pgn-color-btn-bg-outline-brand) !default; -$btn-brand-outline-border-color: var(--pgn-color-btn-border-outline-brand) !default; -$btn-brand-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-brand) !default; -$btn-brand-outline-hover-color: var(--pgn-color-btn-hover-text-outline-brand) !default; -$btn-brand-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-brand) !default; -$btn-brand-outline-active-bg: var(--pgn-color-btn-active-bg-outline-brand) !default; -$btn-brand-outline-active-color: var(--pgn-color-btn-active-text-outline-brand) !default; -$btn-brand-outline-active-border-color: var(--pgn-color-btn-active-border-outline-brand) !default; -$btn-brand-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-brand) !default; -$btn-brand-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-brand) !default; -$btn-brand-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-brand) !default; -$btn-brand-outline-focus-color: var(--pgn-color-btn-focus-text-outline-brand) !default; -$btn-brand-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-brand) !default; -$btn-brand-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-brand) !default; -$btn-brand-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-brand) !default; - -$btn-brand-inverse-color: var(--pgn-color-btn-text-inverse-brand) !default; -$btn-brand-inverse-bg: var(--pgn-color-btn-bg-inverse-brand) !default; -$btn-brand-inverse-border-color: var(--pgn-color-btn-border-inverse-brand) !default; -$btn-brand-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-brand) !default; -$btn-brand-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-brand) !default; -$btn-brand-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-brand) !default; -$btn-brand-inverse-active-color: var(--pgn-color-btn-active-text-inverse-brand) !default; -$btn-brand-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-brand) !default; -$btn-brand-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-brand) !default; -$btn-brand-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-brand) !default; -$btn-brand-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-brand) !default; -$btn-brand-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-brand) !default; -$btn-brand-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-brand) !default; -$btn-brand-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-brand) !default; -$btn-brand-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-brand) !default; -$btn-brand-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-brand) !default; - -$btn-brand-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-brand) !default; -$btn-brand-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-brand) !default; -$btn-brand-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-brand) !default; -$btn-brand-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-brand) !default; -$btn-brand-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-brand) !default; -$btn-brand-inverse-outline-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-brand) !default; -$btn-brand-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-brand) !default; -$btn-brand-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-brand) !default; -$btn-brand-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-brand) !default; -$btn-brand-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-brand) !default; -$btn-brand-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-brand) !default; -$btn-brand-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-brand) !default; -$btn-brand-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-brand) !default; -$btn-brand-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-brand) !default; -$btn-brand-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-brand) !default; -$btn-brand-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-brand) !default; - - -// DANGER BUTTON VARIABLES -$btn-danger-bg: var(--pgn-color-btn-bg-danger) !default; -$btn-danger-color: var(--pgn-color-btn-text-danger) !default; -$btn-danger-border-color: var(--pgn-color-btn-border-danger) !default; -$btn-danger-hover-bg: var(--pgn-color-btn-hover-bg-danger) !default; -$btn-danger-hover-color: var(--pgn-color-btn-hover-text-danger) !default; -$btn-danger-hover-border-color: var(--pgn-color-btn-hover-border-danger) !default; -$btn-danger-active-bg: var(--pgn-color-btn-active-bg-danger) !default; -$btn-danger-active-color: var(--pgn-color-btn-active-text-danger) !default; -$btn-danger-active-border-color: var(--pgn-color-btn-active-border-danger) !default; -$btn-danger-focus-outline-color: var(--pgn-color-btn-focus-outline-danger) !default; -$btn-danger-focus-border-color: var(--pgn-color-btn-focus-border-danger) !default; -$btn-danger-focus-bg: var(--pgn-color-btn-focus-bg-danger) !default; -$btn-danger-focus-color: var(--pgn-color-btn-focus-text-danger) !default; -$btn-danger-disabled-color: var(--pgn-color-btn-disabled-text-danger) !default; -$btn-danger-disabled-bg: var(--pgn-color-btn-disabled-bg-danger) !default; -$btn-danger-disabled-border-color: var(--pgn-color-btn-disabled-border-danger) !default; - -$btn-danger-outline-color: var(--pgn-color-btn-text-outline-danger) !default; -$btn-danger-outline-bg: var(--pgn-color-btn-bg-outline-danger) !default; -$btn-danger-outline-border-color: var(--pgn-color-btn-border-outline-danger) !default; -$btn-danger-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-danger) !default; -$btn-danger-outline-hover-color: var(--pgn-color-btn-hover-text-outline-danger) !default; -$btn-danger-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-danger) !default; -$btn-danger-outline-active-bg: var(--pgn-color-btn-active-bg-outline-danger) !default; -$btn-danger-outline-active-color: var(--pgn-color-btn-active-text-outline-danger) !default; -$btn-danger-outline-active-border-color: var(--pgn-color-btn-active-border-outline-danger) !default; -$btn-danger-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-danger) !default; -$btn-danger-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-danger) !default; -$btn-danger-outline-focus-color: var(--pgn-color-btn-focus-text-outline-danger) !default; -$btn-danger-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-danger) !default; -$btn-danger-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-danger) !default; -$btn-danger-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-danger) !default; -$btn-danger-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-danger) !default; - -$btn-danger-inverse-color: var(--pgn-color-btn-text-inverse-danger) !default; -$btn-danger-inverse-bg: var(--pgn-color-btn-bg-inverse-danger) !default; -$btn-danger-inverse-border-color: var(--pgn-color-btn-border-inverse-danger) !default; -$btn-danger-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-danger) !default; -$btn-danger-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-danger) !default; -$btn-danger-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-danger) !default; -$btn-danger-inverse-active-color: var(--pgn-color-btn-active-text-inverse-danger) !default; -$btn-danger-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-danger) !default; -$btn-danger-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-danger) !default; -$btn-danger-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-danger) !default; -$btn-danger-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-danger) !default; -$btn-danger-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-danger) !default; -$btn-danger-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-danger) !default; -$btn-danger-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-danger) !default; -$btn-danger-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-danger) !default; -$btn-danger-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-danger) !default; - -$btn-danger-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-danger) !default; -$btn-danger-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-danger) !default; -$btn-danger-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-danger) !default; -$btn-danger-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-danger) !default; -$btn-danger-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-danger) !default; -$btn-danger-inverse-outline-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-danger) !default; -$btn-danger-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-danger) !default; -$btn-danger-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-danger) !default; -$btn-danger-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-danger) !default; -$btn-danger-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-danger) !default; -$btn-danger-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-danger) !default; -$btn-danger-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-danger) !default; -$btn-danger-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-danger) !default; -$btn-danger-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-danger) !default; -$btn-danger-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-danger) !default; -$btn-danger-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-danger) !default; - - -// DARK BUTTON VARIABLES -$btn-dark-bg: var(--pgn-color-btn-bg-dark) !default; -$btn-dark-color: var(--pgn-color-btn-text-dark) !default; -$btn-dark-border-color: var(--pgn-color-btn-border-dark) !default; -$btn-dark-hover-bg: var(--pgn-color-btn-hover-bg-dark) !default; -$btn-dark-hover-color: var(--pgn-color-btn-hover-text-dark) !default; -$btn-dark-hover-border-color: var(--pgn-color-btn-hover-border-dark) !default; -$btn-dark-active-bg: var(--pgn-color-btn-active-bg-dark) !default; -$btn-dark-active-color: var(--pgn-color-btn-active-text-dark) !default; -$btn-dark-active-border-color: var(--pgn-color-btn-active-border-dark) !default; -$btn-dark-focus-outline-color: var(--pgn-color-btn-focus-outline-dark) !default; -$btn-dark-focus-border-color: var(--pgn-color-btn-focus-border-dark) !default; -$btn-dark-focus-bg: var(--pgn-color-btn-focus-bg-dark) !default; -$btn-dark-focus-color: var(--pgn-color-btn-focus-text-dark) !default; -$btn-dark-disabled-color: var(--pgn-color-btn-disabled-text-dark) !default; -$btn-dark-disabled-bg: var(--pgn-color-btn-disabled-bg-dark) !default; -$btn-dark-disabled-border-color: var(--pgn-color-btn-disabled-border-dark) !default; - -$btn-dark-outline-color: var(--pgn-color-btn-text-outline-dark) !default; -$btn-dark-outline-bg: var(--pgn-color-btn-bg-outline-dark) !default; -$btn-dark-outline-border-color: var(--pgn-color-btn-border-outline-dark) !default; -$btn-dark-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-dark) !default; -$btn-dark-outline-hover-color: var(--pgn-color-btn-hover-text-outline-dark) !default; -$btn-dark-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-dark) !default; -$btn-dark-outline-active-bg: var(--pgn-color-btn-active-bg-outline-dark) !default; -$btn-dark-outline-active-color: var(--pgn-color-btn-active-text-outline-dark) !default; -$btn-dark-outline-active-border-color: var(--pgn-color-btn-active-border-outline-dark) !default; -$btn-dark-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-dark) !default; -$btn-dark-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-dark) !default; -$btn-dark-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-dark) !default; -$btn-dark-outline-focus-color: var(--pgn-color-btn-focus-text-outline-dark) !default; -$btn-dark-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-dark) !default; -$btn-dark-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-dark) !default; -$btn-dark-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-dark) !default; - -$btn-dark-inverse-color: var(--pgn-color-btn-text-inverse-dark) !default; -$btn-dark-inverse-bg: var(--pgn-color-btn-bg-inverse-dark) !default; -$btn-dark-inverse-border-color: var(--pgn-color-btn-border-inverse-dark) !default; -$btn-dark-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-dark) !default; -$btn-dark-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-dark) !default; -$btn-dark-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-dark) !default; -$btn-dark-inverse-active-color: var(--pgn-color-btn-active-text-inverse-dark) !default; -$btn-dark-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-dark) !default; -$btn-dark-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-dark) !default; -$btn-dark-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-dark) !default; -$btn-dark-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-dark) !default; -$btn-dark-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-dark) !default; -$btn-dark-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-dark) !default; -$btn-dark-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-dark) !default; -$btn-dark-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-dark) !default; -$btn-dark-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-dark) !default; - -$btn-dark-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-dark) !default; -$btn-dark-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-dark) !default; -$btn-dark-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-dark) !default; -$btn-dark-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-dark) !default; -$btn-dark-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-dark) !default; -$btn-dark-inverse-outline-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-dark) !default; -$btn-dark-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-dark) !default; -$btn-dark-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-dark) !default; -$btn-dark-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-dark) !default; -$btn-dark-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-border-inverse-outline-dark) !default; -$btn-dark-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-outline-inverse-outline-dark) !default; -$btn-dark-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-dark) !default; -$btn-dark-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-dark) !default; -$btn-dark-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-dark) !default; -$btn-dark-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-dark) !default; -$btn-dark-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-dark) !default; - - -// INFO BUTTON VARIABLES -$btn-info-bg: var(--pgn-color-btn-bg-info) !default; -$btn-info-color: var(--pgn-color-btn-text-info) !default; -$btn-info-border-color: var(--pgn-color-btn-border-info) !default; -$btn-info-hover-bg: var(--pgn-color-btn-hover-bg-info) !default; -$btn-info-hover-color: var(--pgn-color-btn-hover-text-info) !default; -$btn-info-hover-border-color: var(--pgn-color-btn-hover-border-info) !default; -$btn-info-active-bg: var(--pgn-color-btn-active-bg-info) !default; -$btn-info-active-color: var(--pgn-color-btn-active-text-info) !default; -$btn-info-active-border-color: var(--pgn-color-btn-active-border-info) !default; -$btn-info-focus-outline-color: var(--pgn-color-btn-focus-outline-info) !default; -$btn-info-focus-border-color: var(--pgn-color-btn-focus-border-info) !default; -$btn-info-focus-color: var(--pgn-color-btn-focus-text-info) !default; -$btn-info-focus-bg: var(--pgn-color-btn-focus-bg-info) !default; -$btn-info-disabled-color: var(--pgn-color-btn-disabled-text-info) !default; -$btn-info-disabled-bg: var(--pgn-color-btn-disabled-bg-info) !default; -$btn-info-disabled-border-color: var(--pgn-color-btn-disabled-border-info) !default; - -$btn-info-outline-color: var(--pgn-color-btn-text-outline-info) !default; -$btn-info-outline-bg: var(--pgn-color-btn-bg-outline-info) !default; -$btn-info-outline-border-color: var(--pgn-color-btn-border-outline-info) !default; -$btn-info-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-info) !default; -$btn-info-outline-hover-color: var(--pgn-color-btn-hover-text-outline-info) !default; -$btn-info-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-info) !default; -$btn-info-outline-active-bg: var(--pgn-color-btn-active-bg-outline-info) !default; -$btn-info-outline-active-color: var(--pgn-color-btn-active-text-outline-info) !default; -$btn-info-outline-active-border-color: var(--pgn-color-btn-active-border-outline-info) !default; -$btn-info-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-info) !default; -$btn-info-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-info) !default; -$btn-info-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-info) !default; -$btn-info-outline-focus-color: var(--pgn-color-btn-focus-text-outline-info) !default; -$btn-info-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-info) !default; -$btn-info-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-info) !default; -$btn-info-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-info) !default; - -$btn-info-inverse-color: var(--pgn-color-btn-text-inverse-info) !default; -$btn-info-inverse-bg: var(--pgn-color-btn-bg-inverse-info) !default; -$btn-info-inverse-border-color: var(--pgn-color-btn-border-inverse-info) !default; -$btn-info-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-info) !default; -$btn-info-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-info) !default; -$btn-info-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-info) !default; -$btn-info-inverse-active-color: var(--pgn-color-btn-active-text-inverse-info) !default; -$btn-info-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-info) !default; -$btn-info-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-info) !default; -$btn-info-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-info) !default; -$btn-info-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-info) !default; -$btn-info-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-info) !default; -$btn-info-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-info) !default; -$btn-info-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-info) !default; -$btn-info-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-info) !default; -$btn-info-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-info) !default; - -$btn-info-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-info) !default; -$btn-info-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-info) !default; -$btn-info-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-info) !default; -$btn-info-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-info) !default; -$btn-info-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-info) !default; -$btn-info-inverse-outline-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-info) !default; -$btn-info-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-info) !default; -$btn-info-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-info) !default; -$btn-info-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-info) !default; -$btn-info-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-info) !default; -$btn-info-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-info) !default; -$btn-info-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-info) !default; -$btn-info-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-info) !default; -$btn-info-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-info) !default; -$btn-info-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-info) !default; -$btn-info-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-info) !default; - - -// LIGHT BUTTON VARIABLES -$btn-light-bg: var(--pgn-color-btn-bg-light) !default; -$btn-light-color: var(--pgn-color-btn-text-light) !default; -$btn-light-border-color: var(--pgn-color-btn-border-light) !default; -$btn-light-hover-bg: var(--pgn-color-btn-hover-bg-light) !default; -$btn-light-hover-color: var(--pgn-color-btn-hover-text-light) !default; -$btn-light-hover-border-color: var(--pgn-color-btn-hover-border-light) !default; -$btn-light-active-bg: var(--pgn-color-btn-active-bg-light) !default; -$btn-light-active-color: var(--pgn-color-btn-active-text-light) !default; -$btn-light-active-border-color: var(--pgn-color-btn-active-border-light) !default; -$btn-light-focus-outline-color: var(--pgn-color-btn-focus-outline-light) !default; -$btn-light-focus-border-color: var(--pgn-color-btn-focus-border-light) !default; -$btn-light-focus-bg: var(--pgn-color-btn-focus-bg-light) !default; -$btn-light-focus-color: var(--pgn-color-btn-focus-text-light) !default; -$btn-light-disabled-color: var(--pgn-color-btn-disabled-text-light) !default; -$btn-light-disabled-bg: var(--pgn-color-btn-disabled-bg-light) !default; -$btn-light-disabled-border-color: var(--pgn-color-btn-disabled-border-light) !default; - -$btn-light-outline-color: var(--pgn-color-btn-text-outline-light) !default; -$btn-light-outline-bg: var(--pgn-color-btn-bg-outline-light) !default; -$btn-light-outline-border-color: var(--pgn-color-btn-border-outline-light) !default; -$btn-light-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-light) !default; -$btn-light-outline-hover-color: var(--pgn-color-btn-hover-text-outline-light) !default; -$btn-light-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-light) !default; -$btn-light-outline-active-bg: var(--pgn-color-btn-active-bg-outline-light) !default; -$btn-light-outline-active-color: var(--pgn-color-btn-active-text-outline-light) !default; -$btn-light-outline-active-border-color: var(--pgn-color-btn-active-border-outline-light) !default; -$btn-light-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-light) !default; -$btn-light-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-light) !default; -$btn-light-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-light) !default; -$btn-light-outline-focus-color: var(--pgn-color-btn-focus-text-outline-light) !default; -$btn-light-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-light) !default; -$btn-light-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-light) !default; -$btn-light-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-light) !default; - -$btn-light-inverse-color: var(--pgn-color-btn-text-inverse-light) !default; -$btn-light-inverse-bg: var(--pgn-color-btn-bg-inverse-light) !default; -$btn-light-inverse-border-color: var(--pgn-color-btn-border-inverse-light) !default; -$btn-light-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-light) !default; -$btn-light-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-light) !default; -$btn-light-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-light) !default; -$btn-light-inverse-active-color: var(--pgn-color-btn-active-text-inverse-light) !default; -$btn-light-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-light) !default; -$btn-light-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-light) !default; -$btn-light-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-light) !default; -$btn-light-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-light) !default; -$btn-light-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-light) !default; -$btn-light-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-light) !default; -$btn-light-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-light) !default; -$btn-light-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-light) !default; -$btn-light-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-light) !default; - -$btn-light-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-light) !default; -$btn-light-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-light) !default; -$btn-light-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-light) !default; -$btn-light-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-light) !default; -$btn-light-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-light) !default; -$btn-light-inverse-outline-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-light) !default; -$btn-light-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-light) !default; -$btn-light-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-light) !default; -$btn-light-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-light) !default; -$btn-light-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-light) !default; -$btn-light-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-light) !default; -$btn-light-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-light) !default; -$btn-light-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-light) !default; -$btn-light-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-light) !default; -$btn-light-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-light) !default; -$btn-light-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-light) !default; - - -// SUCCESS BUTTON VARIABLES -$btn-success-bg: var(--pgn-color-btn-bg-success) !default; -$btn-success-color: var(--pgn-color-btn-text-success) !default; -$btn-success-border-color: var(--pgn-color-btn-border-success) !default; -$btn-success-hover-bg: var(--pgn-color-btn-hover-bg-success) !default; -$btn-success-hover-color: var(--pgn-color-btn-hover-text-success) !default; -$btn-success-hover-border-color: var(--pgn-color-btn-hover-border-success) !default; -$btn-success-active-bg: var(--pgn-color-btn-active-bg-success) !default; -$btn-success-active-color: var(--pgn-color-btn-active-text-success) !default; -$btn-success-active-border-color: var(--pgn-color-btn-active-border-success) !default; -$btn-success-focus-outline-color: var(--pgn-color-btn-focus-outline-success) !default; -$btn-success-focus-border-color: var(--pgn-color-btn-focus-border-success) !default; -$btn-success-focus-bg: var(--pgn-color-btn-focus-bg-success) !default; -$btn-success-focus-color: var(--pgn-color-btn-focus-text-success) !default; -$btn-success-disabled-color: var(--pgn-color-btn-disabled-text-success) !default; -$btn-success-disabled-bg: var(--pgn-color-btn-disabled-bg-success) !default; -$btn-success-disabled-border-color: var(--pgn-color-btn-disabled-border-success) !default; - -$btn-success-outline-color: var(--pgn-color-btn-text-outline-success) !default; -$btn-success-outline-bg: var(--pgn-color-btn-bg-outline-success) !default; -$btn-success-outline-border-color: var(--pgn-color-btn-border-outline-success) !default; -$btn-success-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-success) !default; -$btn-success-outline-hover-color: var(--pgn-color-btn-hover-text-outline-success) !default; -$btn-success-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-success) !default; -$btn-success-outline-active-bg: var(--pgn-color-btn-active-bg-outline-success) !default; -$btn-success-outline-active-color: var(--pgn-color-btn-active-text-outline-success) !default; -$btn-success-outline-active-border-color: var(--pgn-color-btn-active-border-outline-success) !default; -$btn-success-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-success) !default; -$btn-success-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-success) !default; -$btn-success-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-success) !default; -$btn-success-outline-focus-color: var(--pgn-color-btn-focus-text-outline-success) !default; -$btn-success-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-success) !default; -$btn-success-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-success) !default; -$btn-success-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-success) !default; - -$btn-success-inverse-color: var(--pgn-color-btn-text-inverse-success) !default; -$btn-success-inverse-bg: var(--pgn-color-btn-bg-inverse-success) !default; -$btn-success-inverse-border-color: var(--pgn-color-btn-border-inverse-success) !default; -$btn-success-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-success) !default; -$btn-success-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-success) !default; -$btn-success-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-success) !default; -$btn-success-inverse-active-color: var(--pgn-color-btn-active-text-inverse-success) !default; -$btn-success-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-success) !default; -$btn-success-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-success) !default; -$btn-success-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-success) !default; -$btn-success-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-success) !default; -$btn-success-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-success) !default; -$btn-success-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-success) !default; -$btn-success-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-success) !default; -$btn-success-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-success) !default; -$btn-success-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-success) !default; - -$btn-success-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-success) !default; -$btn-success-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-success) !default; -$btn-success-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-success) !default; -$btn-success-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-success) !default; -$btn-success-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-success) !default; -$btn-success-inverse-outline-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-success) !default; -$btn-success-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-success) !default; -$btn-success-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-success) !default; -$btn-success-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-success) !default; -$btn-success-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-success) !default; -$btn-success-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-success) !default; -$btn-success-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-success) !default; -$btn-success-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-success) !default; -$btn-success-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-success) !default; -$btn-success-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-success) !default; -$btn-success-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-success) !default; - - -// WARNING BUTTON VARIABLES -$btn-warning-bg: var(--pgn-color-btn-bg-warning) !default; -$btn-warning-color: var(--pgn-color-btn-text-warning) !default; -$btn-warning-border-color: var(--pgn-color-btn-border-warning) !default; -$btn-warning-hover-bg: var(--pgn-color-btn-hover-bg-warning) !default; -$btn-warning-hover-color: var(--pgn-color-btn-hover-text-warning) !default; -$btn-warning-hover-border-color: var(--pgn-color-btn-hover-border-warning) !default; -$btn-warning-active-bg: var(--pgn-color-btn-active-bg-warning) !default; -$btn-warning-active-color: var(--pgn-color-btn-active-text-warning) !default; -$btn-warning-active-border-color: var(--pgn-color-btn-active-border-warning) !default; -$btn-warning-focus-outline-color: var(--pgn-color-btn-focus-outline-warning) !default; -$btn-warning-focus-border-color: var(--pgn-color-btn-focus-border-warning) !default; -$btn-warning-focus-color: var(--pgn-color-btn-focus-text-warning) !default; -$btn-warning-focus-bg: var(--pgn-color-btn-focus-bg-warning) !default; -$btn-warning-disabled-color: var(--pgn-color-btn-disabled-text-warning) !default; -$btn-warning-disabled-bg: var(--pgn-color-btn-disabled-bg-warning) !default; -$btn-warning-disabled-border-color: var(--pgn-color-btn-disabled-border-warning) !default; - -$btn-warning-outline-color: var(--pgn-color-btn-text-outline-warning) !default; -$btn-warning-outline-bg: var(--pgn-color-btn-bg-outline-warning) !default; -$btn-warning-outline-border-color: var(--pgn-color-btn-border-outline-warning) !default; -$btn-warning-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-warning) !default; -$btn-warning-outline-hover-color: var(--pgn-color-btn-hover-text-outline-warning) !default; -$btn-warning-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-warning) !default; -$btn-warning-outline-active-bg: var(--pgn-color-btn-active-bg-outline-warning) !default; -$btn-warning-outline-active-color: var(--pgn-color-btn-active-text-outline-warning) !default; -$btn-warning-outline-active-border-color: var(--pgn-color-btn-active-border-outline-warning) !default; -$btn-warning-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-warning) !default; -$btn-warning-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-warning) !default; -$btn-warning-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-warning) !default; -$btn-warning-outline-focus-color: var(--pgn-color-btn-focus-text-outline-warning) !default; -$btn-warning-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-warning) !default; -$btn-warning-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-warning) !default; -$btn-warning-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-warning) !default; - -$btn-warning-inverse-color: var(--pgn-color-btn-text-inverse-warning) !default; -$btn-warning-inverse-bg: var(--pgn-color-btn-bg-inverse-warning) !default; -$btn-warning-inverse-border-color: var(--pgn-color-btn-border-inverse-warning) !default; -$btn-warning-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-warning) !default; -$btn-warning-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-warning) !default; -$btn-warning-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-warning) !default; -$btn-warning-inverse-active-color: var(--pgn-color-btn-active-text-inverse-warning) !default; -$btn-warning-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-warning) !default; -$btn-warning-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-warning) !default; -$btn-warning-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-warning) !default; -$btn-warning-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-warning) !default; -$btn-warning-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-warning) !default; -$btn-warning-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-warning) !default; -$btn-warning-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-warning) !default; -$btn-warning-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-warning) !default; -$btn-warning-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-warning) !default; - -$btn-warning-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-warning) !default; -$btn-warning-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-warning) !default; -$btn-warning-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-warning) !default; -$btn-warning-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-warning) !default; -$btn-warning-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-warning) !default; -$btn-warning-inverse-outline-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-warning) !default; -$btn-warning-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-warning) !default; -$btn-warning-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-warning) !default; -$btn-warning-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-warning) !default; -$btn-warning-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-border-inverse-outline-warning) !default; -$btn-warning-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-warning) !default; -$btn-warning-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-warning) !default; -$btn-warning-inverse-outline-focus-bg: var(--pgn-color-btn-focus-outline-inverse-outline-warning) !default; -$btn-warning-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-warning) !default; -$btn-warning-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-warning) !default; -$btn-warning-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-warning) !default; - - -// TERTIARY BUTTON -$btn-tertiary-color: var(--pgn-color-btn-text-tertiary) !default; -$btn-tertiary-bg: var(--pgn-color-btn-bg-tertiary) !default; -$btn-tertiary-border-color: var(--pgn-color-btn-border-tertiary) !default; -$btn-tertiary-hover-color: var(--pgn-color-btn-hover-text-tertiary) !default; -$btn-tertiary-hover-bg: var(--pgn-color-btn-hover-bg-tertiary) !default; -$btn-tertiary-hover-border-color: var(--pgn-color-btn-hover-border-tertiary) !default; -$btn-tertiary-active-color: var(--pgn-color-btn-active-text-tertiary) !default; -$btn-tertiary-active-bg: var(--pgn-color-btn-active-bg-tertiary) !default; -$btn-tertiary-active-border-color: var(--pgn-color-btn-active-border-tertiary) !default; -$btn-tertiary-focus-outline-color: var(--pgn-color-btn-focus-outline-tertiary) !default; -$btn-tertiary-focus-border-color: var(--pgn-color-btn-focus-border-tertiary) !default; -$btn-tertiary-focus-color: var(--pgn-color-btn-focus-text-tertiary) !default; -$btn-tertiary-focus-bg: var(--pgn-color-btn-focus-bg-tertiary) !default; -$btn-tertiary-disabled-color: var(--pgn-color-btn-disabled-text-tertiary) !default; -$btn-tertiary-disabled-bg: var(--pgn-color-btn-disabled-bg-tertiary) !default; -$btn-tertiary-disabled-border-color: var(--pgn-color-btn-disabled-border-tertiary) !default; - -$btn-inverse-tertiary-color: var(--pgn-color-btn-text-inverse-tertiary) !default; -$btn-inverse-tertiary-bg: var(--pgn-color-btn-bg-inverse-tertiary) !default; -$btn-inverse-tertiary-border-color: var(--pgn-color-btn-border-inverse-tertiary) !default; -$btn-inverse-tertiary-hover-bg: var(--pgn-color-btn-hover-bg-inverse-tertiary) !default; -$btn-inverse-tertiary-hover-color: var(--pgn-color-btn-hover-text-inverse-tertiary) !default; -$btn-inverse-tertiary-hover-border-color: var(--pgn-color-btn-hover-border-inverse-tertiary) !default; -$btn-inverse-tertiary-active-color: var(--pgn-color-btn-active-text-inverse-tertiary) !default; -$btn-inverse-tertiary-active-bg: var(--pgn-color-btn-active-bg-inverse-tertiary) !default; -$btn-inverse-tertiary-active-border-color: var(--pgn-color-btn-active-border-inverse-tertiary) !default; -$btn-inverse-tertiary-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-tertiary) !default; -$btn-inverse-tertiary-focus-border-color: var(--pgn-color-btn-focus-border-inverse-tertiary) !default; -$btn-inverse-tertiary-focus-color: var(--pgn-color-btn-focus-text-inverse-tertiary) !default; -$btn-inverse-tertiary-focus-bg: var(--pgn-color-btn-focus-bg-inverse-tertiary) !default; -$btn-inverse-tertiary-disabled-color: var(--pgn-color-btn-disabled-text-inverse-tertiary) !default; -$btn-inverse-tertiary-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-tertiary) !default; -$btn-inverse-tertiary-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-tertiary) !default; - -$btn-focus-border-gap: var(--pgn-spacing-btn-focus-border-gap) !default; -$btn-focus-distance-to-border: var(--pgn-spacing-btn-focus-distance-to-border) !default; - -$btn-focus-border-radius: var(--pgn-size-btn-focus-border-radius) !default; diff --git a/src/Button/button-group.scss b/src/Button/button-group.scss index 0f5b60e097..cfb13559c5 100644 --- a/src/Button/button-group.scss +++ b/src/Button/button-group.scss @@ -1,5 +1,3 @@ -@import "variables"; - .btn-group, .btn-group-vertical { position: relative; @@ -35,7 +33,7 @@ .btn-group { > .btn:not(:first-child), > .btn-group:not(:first-child) { - margin-left: calc(#{$btn-border-width} * -1); + margin-left: calc(var(--pgn-size-btn-border-width) * -1); } > .btn:not(:last-child):not(.dropdown-toggle), @@ -55,8 +53,8 @@ .btn-group-lg > .btn { @extend .btn-lg; } .dropdown-toggle-split { - padding-right: calc(#{$btn-padding-x} * .75); - padding-left: calc(#{$btn-padding-x} * .75); + padding-right: calc(var(--pgn-spacing-btn-padding-x-base) * .75); + padding-left: calc(var(--pgn-spacing-btn-padding-x-base) * .75); &::after, .dropup &::after, @@ -70,17 +68,17 @@ } .btn-sm + .dropdown-toggle-split { - padding-right: calc(#{$btn-padding-x-sm} * .75); - padding-left: calc(#{$btn-padding-x-sm} * .75); + padding-right: calc(var(--pgn-spacing-btn-padding-x-sm) * .75); + padding-left: calc(var(--pgn-spacing-btn-padding-x-sm) * .75); } .btn-lg + .dropdown-toggle-split { - padding-right: calc(#{$btn-padding-x-lg} * .75); - padding-left: calc(#{$btn-padding-x-lg} * .75); + padding-right: calc(var(--pgn-spacing-btn-padding-x-lg) * .75); + padding-left: calc(var(--pgn-spacing-btn-padding-x-lg) * .75); } .btn-group.show .dropdown-toggle { - @include box-shadow(#{$btn-active-box-shadow}); + @include box-shadow(var(--pgn-elevation-btn-box-shadow-active)); &.btn-link { @include box-shadow(none); @@ -99,7 +97,7 @@ > .btn:not(:first-child), > .btn-group:not(:first-child) { - margin-top: calc(#{$btn-border-width} * -1); + margin-top: calc(var(--pgn-size-btn-border-width) * -1); } > .btn:not(:last-child):not(.dropdown-toggle), diff --git a/src/Card/Card.scss b/src/Card/Card.scss index 32a8fafe43..bcd6f0a1a8 100644 --- a/src/Card/Card.scss +++ b/src/Card/Card.scss @@ -1,4 +1,3 @@ -@import "variables"; @import "card-bootstrap"; .pgn__card, @@ -7,15 +6,15 @@ border: 0; %dark-variant-content { - color: $white; + color: var(--pgn-color-white); a { - color: $white; + color: var(--pgn-color-white); } } &.pgn__card-dark { - background-color: $card-bg-dark; + background-color: var(--pgn-color-card-bg-dark); @extend %dark-variant-content; @@ -47,18 +46,18 @@ } &.pgn__card-muted { - background-color: $card-bg-muted; + background-color: var(--pgn-color-card-bg-muted); } } a .pgn__card { - color: $gray-700; + color: var(--pgn-color-gray-700); display: inline-block; } .pgn__card-grid { .row > div[class*="col-"] { - margin-bottom: $card-grid-margin-bottom; + margin-bottom: var(--pgn-spacing-card-margin-grid-bottom); } } @@ -72,7 +71,7 @@ a .pgn__card { .pgn__card-deck { position: relative; - margin-bottom: $card-deck-margin-bottom; + margin-bottom: var(--pgn-spacing-card-margin-deck-bottom); &.pgn__card-deck-has-horizontal-scroll { .pgn__card-deck-row { @@ -83,12 +82,12 @@ a .pgn__card { .pgn__card-deck-row { overflow: hidden; flex-wrap: nowrap; - padding-top: $card-focus-border-offset; - padding-bottom: $card-focus-border-offset; + padding-top: var(--pgn-spacing-card-focus-border-offset); + padding-bottom: var(--pgn-spacing-card-focus-border-offset); &:focus-visible { - outline: $card-focus-border-width solid $card-border-focus-color; - border-radius: $card-focus-border-radius; + outline: var(--pgn-size-card-focus-border-width) solid var(--pgn-color-card-border-focus-base); + border-radius: var(--pgn-size-card-focus-border-radius); } } } @@ -99,7 +98,7 @@ a .pgn__card { } .pgn__card-carousel-subtitle { - font-size: $font-size-sm; + font-size: var(--pgn-typography-font-size-sm); margin-bottom: map-get($spacers, 2); } @@ -112,7 +111,7 @@ a .pgn__card { } .pgn__card-header { - padding: 0 $card-spacer-x; + padding: 0 var(--pgn-spacing-card-spacer-x); display: flex; justify-content: space-between; @@ -126,8 +125,8 @@ a .pgn__card { } %header-title { - color: $black; - font-weight: $font-weight-bold; + color: var(--pgn-color-black); + font-weight: var(--pgn-typography-font-weight-bold); text-align: start; } @@ -138,15 +137,15 @@ a .pgn__card { } .pgn__card-header-title-sm { - font-size: $h4-font-size; + font-size: var(--pgn-typography-font-size-h4); } .pgn__card-header-title-md { - font-size: $h3-font-size; + font-size: var(--pgn-typography-font-size-h3); } %header-subtitle { - color: $gray-700; + color: var(--pgn-color-gray-700); margin-top: map_get($spacers, 1); } @@ -157,16 +156,16 @@ a .pgn__card { } .pgn__card-header-subtitle-sm { - font-size: $h5-font-size; + font-size: var(--pgn-typography-font-size-h5); } .pgn__card-header-subtitle-md { - font-size: $h4-font-size; + font-size: var(--pgn-typography-font-size-h4); } .pgn__card-header-actions { - margin-top: $spacer; - margin-inline-start: $spacer; + margin-top: var(--pgn-spacing-spacer-base); + margin-inline-start: var(--pgn-spacing-spacer-base); flex-shrink: 0; } @@ -180,30 +179,30 @@ a .pgn__card { } .pgn__card-divider { - border-top: 1px solid $card-divider-bg; + border-top: 1px solid var(--pgn-color-card-divider-bg); height: 0; } .pgn__card-section { - padding: $card-spacer-x; + padding: var(--pgn-spacing-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-typography-font-weight-bold); + font-size: var(--pgn-typography-font-size-h5); + margin-bottom: var(--pgn-spacing-card-spacer-y); } .pgn__card-section-actions { display: flex; justify-content: flex-end; - margin-top: $card-spacer-y; + margin-top: var(--pgn-spacing-card-spacer-y); } dd { @@ -222,7 +221,7 @@ a .pgn__card { .pgn__card-footer { width: 100%; - padding: $card-spacer-x; + padding: var(--pgn-spacing-card-spacer-x); display: flex; align-items: center; justify-content: center; @@ -232,7 +231,7 @@ a .pgn__card { padding-top: 0; & > * + * { - margin-inline-start: $card-footer-actions-gap; + margin-inline-start: var(--pgn-spacing-card-footer-action-gap); } } @@ -243,11 +242,11 @@ a .pgn__card { &.vertical-stacked { flex-direction: column-reverse; - padding-top: $card-spacer-x - $card-footer-actions-gap; + padding-top: var(--pgn-spacing-card-spacer-x) - var(--pgn-spacing-card-footer-action-gap); & > * { width: 100%; - margin-top: $card-footer-actions-gap; + margin-top: var(--pgn-spacing-card-footer-action-gap); } } @@ -255,24 +254,24 @@ a .pgn__card { flex-wrap: wrap; & > :not(:last-child) { - margin-inline-end: $card-footer-actions-gap; + margin-inline-end: var(--pgn-spacing-card-footer-action-gap); } } &.horizontal-stacked { flex-direction: column-reverse; - padding-top: calc(#{$card-spacer-x} - #{$card-footer-actions-gap}); + padding-top: calc(var(--pgn-spacing-card-spacer-x) - var(--pgn-spacing-card-footer-action-gap)); & > * { - margin-top: $card-footer-actions-gap; + margin-top: var(--pgn-spacing-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-typography-footer-text-font-size); &.vertical { margin-inline-end: auto; @@ -284,13 +283,13 @@ a .pgn__card { } &.horizontal { - margin-top: $card-spacer-x; + margin-top: var(--pgn-spacing-card-spacer-x); width: 100%; text-align: center; } &.horizontal-stacked { - margin-top: $card-spacer-x; + margin-top: var(--pgn-spacing-card-spacer-x); width: 100%; text-align: center; order: -1; @@ -301,14 +300,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-size-card-image-horizontal-width-max); + min-width: var(--pgn-size-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-size-card-border-radius-image); + border-bottom-left-radius: var(--pgn-size-card-border-radius-image); border-top-right-radius: 0; max-width: inherit; width: auto; @@ -316,20 +315,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-spacing-card-logo-left-offset-horizontal); + bottom: var(--pgn-spacing-card-logo-bottom-offset-horizontal); } } &.vertical { - max-height: $card-image-vertical-max-height; + max-height: var(--pgn-size-card-image-vertical-max-height); } .pgn__card-image-cap-loader { .react-loading-skeleton { - margin-bottom: calc(#{$loading-skeleton-spacer} * -1); + margin-bottom: calc(var(--pgn-spacing-card-loading-skeleton-spacer) * -1); position: relative; - top: calc(#{$loading-skeleton-spacer} * -1); + top: calc(var(--pgn-spacing-card-loading-skeleton-spacer) * -1); height: 100%; } } @@ -339,8 +338,8 @@ 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-size-card-border-radius-image); + border-top-right-radius: var(--pgn-size-card-border-radius-image); display: none; &.show { @@ -350,14 +349,14 @@ a .pgn__card { .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-spacing-card-logo-left-offset-base); + bottom: calc(var(--pgn-spacing-card-logo-bottom-offset-base) * -1); + width: var(--pgn-size-card-logo-width); + height: var(--pgn-size-card-logo-height); + border-radius: var(--pgn-size-card-border-radius-logo); + box-shadow: var(--pgn-elevation-box-shadow-level-1); padding: map_get($spacers, 2); - background-color: $white; + background-color: var(--pgn-color-white); display: none; &.show { @@ -371,16 +370,16 @@ a .pgn__card { &::before { content: ""; position: absolute; - top: calc(-1 * #{$card-focus-border-offset}); - right: calc(-1 * #{$card-focus-border-offset}); - bottom: calc(-1 * #{$card-focus-border-offset}); - left: calc(-1 * #{$card-focus-border-offset}); - border: solid $card-focus-border-width $card-border-focus-color; - border-radius: $card-focus-border-radius; + top: calc(-1 * var(--pgn-spacing-card-focus-border-offset)); + right: calc(-1 * var(--pgn-spacing-card-focus-border-offset)); + bottom: calc(-1 * var(--pgn-spacing-card-focus-border-offset)); + left: calc(-1 * var(--pgn-spacing-card-focus-border-offset)); + border: solid var(--pgn-size-card-focus-border-width) var(--pgn-color-card-border-focus-base); + border-radius: var(--pgn-size-card-focus-border-radius); } &.pgn__card-dark::before { - border: solid $card-focus-border-width $card-border-focus-color-dark; + border: solid var(--pgn-size-card-focus-border-width) var(--pgn-color-card-border-focus-dark); } } @@ -413,7 +412,7 @@ a .pgn__card { box-shadow: none; margin-bottom: 0; display: flex; - font-size: $font-size-sm; + font-size: var(--pgn-typography-font-size-sm); line-height: 1.5rem; text-align: start; position: relative; @@ -428,10 +427,10 @@ a .pgn__card { } .pgn__card-status__heading { - font-size: $h4-font-size; - color: $black; + font-size: var(--pgn-typography-font-size-h4); + color: var(--pgn-color-black); display: flex; - font-weight: $font-weight-bold; + font-weight: var(--pgn-typography-font-weight-bold); line-height: 1.5rem; margin-bottom: .5rem; } @@ -457,18 +456,18 @@ 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); } } } -@media (max-width: map-get($grid-breakpoints, "sm")) { +@media (--max-pgn-size-breakpoint-xs) { .pgn__card-footer { &.horizontal > :not(:last-child) { margin-inline-end: 0; diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss deleted file mode 100644 index 3fea13f1a5..0000000000 --- a/src/Card/_variables.scss +++ /dev/null @@ -1,56 +0,0 @@ -// Card - -$card-spacer-y: var(--pgn-spacing-card-spacer-y) !default; -$card-spacer-x: var(--pgn-spacing-card-spacer-x) !default; -$card-border-width: var(--pgn-size-card-border-width) !default; -$card-border-radius: var(--pgn-size-card-border-radius-base) !default; -$card-border-color: var(--pgn-color-card-border-base) !default; -$card-border-focus-color: var(--pgn-color-card-border-focus) !default; -$card-border-focus-color-dark: var(--pgn-color-card-border-focus-dark) !default; -$card-cap-bg: var(--pgn-card-cap-bg) !default; -$card-cap-color: var(--pgn-card-cap-color) !default; -$card-height: var(--pgn-card-height-base) !default; -$card-bg-dark: var(--pgn-color-card-bg-dark) !default; -$card-bg-muted: var(--pgn-color-card-bg-muted) !default; - -// TODO: Need to deleted this variable after refactoring Card component -// stylelint-disable-next-line max-line-length -$card-inner-border-radius: calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) !default; -$card-color: var(--pgn-color-card-base) !default; -$card-bg: var(--pgn-color-card-bg-base) !default; - -$card-group-margin: var(--pgn-spacing-card-margin-group) !default; -$card-deck-margin: var(--pgn-spacing-card-margin-deck) !default; -$card-grid-margin: var(--pgn-spacing-card-margin-grid) !default; -$card-deck-margin-bottom: var(--pgn-spacing-card-margin-deck-bottom) !default; -$card-grid-margin-bottom: var(--pgn-spacing-card-margin-grid-bottom) !default; - -$card-columns-count: var(--pgn-spacing-card-columns-count) !default; -$card-columns-gap: var(--pgn-spacing-card-columns-gap) !default; -$card-columns-margin: var(--pgn-spacing-card-columns-margin) !default; - -$card-divider-bg: var(--pgn-color-card-divider-bg) !default; - -$card-footer-actions-gap: var(--pgn-spacing-card-footer-action-gap) !default; - -$card-logo-left-offset: var(--pgn-spacing-card-logo-left-offset-base) !default; -$card-logo-bottom-offset: var(--pgn-spacing-card-logo-bottom-offset-base) !default; -$card-logo-left-offset-horizontal: var(--pgn-spacing-card-logo-left-offset-horizontal) !default; -$card-logo-bottom-offset-horizontal: var(--pgn-spacing-card-logo-bottom-offset-horizontal) !default; - -$card-logo-width: var(--pgn-size-card-logo-width) !default; -$card-logo-height: var(--pgn-size-card-logo-height) !default; - -$card-image-border-radius: var(--pgn-size-card-border-radius-image) !default; -$card-logo-border-radius: var(--pgn-size-card-border-radius-logo) !default; - -$card-footer-text-font-size: var(--pgn-typography-footer-text-font-size) !default; - -$card-image-horizontal-max-width: var(--pgn-size-card-image-horizontal-width-max) !default; -$card-image-horizontal-min-width: var(--pgn-size-card-image-horizontal-width-min) !default; -$card-image-vertical-max-height: var(--pgn-size-card-image-vertical-max-height) !default; -$loading-skeleton-spacer: var(--pgn-spacing-card-loading-skeleton-spacer) !default; - -$card-focus-border-offset: var(--pgn-spacing-card-focus-border-offset) !default; -$card-focus-border-width: var(--pgn-size-card-focus-border-width) !default; -$card-focus-border-radius: var(--pgn-size-card-focus-border-radius) !default; diff --git a/src/Card/card-bootstrap.scss b/src/Card/card-bootstrap.scss index eb2cdf5aae..9ca0e00ea8 100644 --- a/src/Card/card-bootstrap.scss +++ b/src/Card/card-bootstrap.scss @@ -3,12 +3,12 @@ flex-direction: column; min-width: 0; word-wrap: break-word; - background-color: $card-bg; + background-color: var(--pgn-color-card-bg-base); background-clip: border-box; - border: $card-border-width solid $card-border-color; + border: var(--pgn-size-card-border-width) solid var(--pgn-color-card-border-base); position: relative; - @include border-radius($card-border-radius); + @include border-radius(calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width))); > hr { margin-right: 0; @@ -22,13 +22,17 @@ &:first-child { border-top-width: 0; - @include border-top-radius($card-inner-border-radius); + @include border-top-radius( + calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)) + ); } &:last-child { border-bottom-width: 0; - @include border-bottom-radius($card-inner-border-radius); + @include border-bottom-radius( + calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)) + ); } } @@ -43,27 +47,27 @@ .card-body { flex: 1 1 auto; min-height: 1px; - padding: $card-spacer-x; - color: $card-color; + padding: var(--pgn-spacing-card-spacer-x); + color: var(--pgn-color-card-base); } // Card deck .card-deck { .card { - margin-bottom: $card-deck-margin; + margin-bottom: var(--pgn-spacing-card-margin-deck); } @include media-breakpoint-up(sm) { display: flex; flex-flow: row wrap; - margin-right: calc(#{$card-deck-margin} * -1); - margin-left: calc(#{$card-deck-margin} * -1); + margin-right: calc(var(--pgn-spacing-card-margin-deck) * -1); + margin-left: calc(var(--pgn-spacing-card-margin-deck) * -1); .card { flex: 1 0 0%; - margin-right: $card-deck-margin; + margin-right: var(--pgn-spacing-card-margin-deck); margin-bottom: 0; // Override the default - margin-left: $card-deck-margin; + margin-left: var(--pgn-spacing-card-margin-deck); } } } @@ -71,7 +75,7 @@ // Card groups .card-group { > .card { - margin-bottom: $card-group-margin; + margin-bottom: var(--pgn-spacing-card-margin-group); } @include media-breakpoint-up(sm) { @@ -124,12 +128,12 @@ // Columns .card-columns { .card { - margin-bottom: $card-columns-margin; + margin-bottom: var(--pgn-spacing-card-columns-margin); } @include media-breakpoint-up(sm) { - column-count: $card-columns-count; - column-gap: $card-columns-gap; + column-count: var(--pgn-spacing-card-columns-count); + column-gap: var(--pgn-spacing-card-columns-gap); orphans: 1; widows: 1; @@ -160,7 +164,7 @@ > .card-header { @include border-radius(0); - margin-bottom: calc(#{$card-border-width} * -1); + margin-bottom: calc(var(--pgn-size-card-border-width) * -1); } } } diff --git a/src/Carousel/Carousel.scss b/src/Carousel/Carousel.scss index 060291e5eb..a046f79f46 100644 --- a/src/Carousel/Carousel.scss +++ b/src/Carousel/Carousel.scss @@ -1,2 +1,168 @@ -@import "variables"; -@import "carousel-bootstrap"; +.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; + transition: var(--pgn-transition-carousel-base); +} + +.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%); +} + +.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; + transition: opacity 0s var(--pgn-transition-carousel-base); + } +} + +.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-size-carousel-control-width-base); + padding: 0; + color: var(--pgn-color-carousel-control-base); + text-align: center; + background: none; + border: 0; + opacity: var(--pgn-other-carousel-control-opacity-base); + transition: var(--pgn-transition-carousel-control); + + @include hover-focus() { + color: var(--pgn-carousel-control-color); + text-decoration: none; + outline: 0; + opacity: var(--pgn-other-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)); + } +} + +.carousel-control-prev-icon, +.carousel-control-next-icon { + display: inline-block; + width: var(--pgn-size-carousel-control-width-icon); + height: var(--pgn-size-carousel-control-width-icon); + background: 50% / 100% 100% no-repeat; +} + +.carousel-control-prev-icon { + background-image: var(--pgn-content-carousel-control-bg-prev-icon); +} + +.carousel-control-next-icon { + background-image: var(--pgn-content-carousel-control-bg-next-icon); +} + +.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-size-carousel-control-width-base); + margin-left: var(--pgn-size-carousel-control-width-base); + list-style: none; + + li { + box-sizing: content-box; + flex: 0 1 auto; + width: var(--pgn-size-carousel-indicator-width); + height: var(--pgn-size-carousel-indicator-height-base); + margin-right: var(--pgn-spacing-carousel-indicator-spacer); + margin-left: var(--pgn-spacing-carousel-indicator-spacer); + text-indent: -999px; + cursor: pointer; + background-color: var(--pgn-color-carousel-indicator-active-bg); + background-clip: padding-box; + border-top: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent; + border-bottom: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent; + opacity: .5; + transition: var(--pgn-transition-carousel-indicator); + } + + .active { + opacity: 1; + } +} + +.carousel-caption { + position: absolute; + right: calc((calc(100% - var(--pgn-size-carousel-caption-width))) * .5); + bottom: 20px; + left: calc((calc(100% - var(--pgn-size-carousel-caption-width))) * .5); + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: var(--pgn-color-carousel-caption); + text-align: center; +} diff --git a/src/Carousel/_variables.scss b/src/Carousel/_variables.scss deleted file mode 100644 index 7b7ee22c14..0000000000 --- a/src/Carousel/_variables.scss +++ /dev/null @@ -1,22 +0,0 @@ -$carousel-control-color: var(--pgn-color-carousel-control-base) !default; -$carousel-control-width: var(--pgn-size-carousel-control-width-base) !default; -$carousel-control-opacity: var(--pgn-color-carousel-control-opacity-base) !default; -$carousel-control-hover-opacity: var(--pgn-color-carousel-control-opacity-hover) !default; -$carousel-control-transition: var(--pgn-transition-carousel-control) !default; - -$carousel-indicator-width: var(--pgn-size-carousel-indicator-width) !default; -$carousel-indicator-height: var(--pgn-size-carousel-indicator-height-base) !default; -$carousel-indicator-hit-area-height: var(--pgn-size-carousel-indicator-height-area-hit) !default; -$carousel-indicator-spacer: var(--pgn-spacing-carousel-indicator-spacer) !default; -$carousel-indicator-active-bg: var(--pgn-color-carousel-indicator-active-bg) !default; -$carousel-indicator-transition: var(--pgn-transition-carousel-indicator) !default; - -$carousel-caption-width: var(--pgn-size-carousel-caption-width) !default; -$carousel-caption-color: var(--pgn-color-carousel-caption) !default; - -$carousel-control-icon-width: var(--pgn-size-carousel-control-width-icon) !default; -$carousel-control-prev-icon-bg: var(--pgn-content-carousel-control-bg-prev-icon) !default; -$carousel-control-next-icon-bg: var(--pgn-content-carousel-control-bg-next-icon) !default; - -// Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) -$carousel-transition: var(--pgn-transition-carousel-base) !default; diff --git a/src/Carousel/carousel-bootstrap.scss b/src/Carousel/carousel-bootstrap.scss deleted file mode 100644 index 98352c3ed3..0000000000 --- a/src/Carousel/carousel-bootstrap.scss +++ /dev/null @@ -1,179 +0,0 @@ -.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; - 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; - transition: opacity 0s $carousel-transition; - } -} - - -// 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: $carousel-control-width; - padding: 0; - color: $carousel-control-color; - text-align: center; - background: none; - border: 0; - opacity: $carousel-control-opacity; - transition: $carousel-control-transition; - - @include hover-focus() { - color: var(--pgn-carousel-control-color); - text-decoration: none; - outline: 0; - opacity: $carousel-control-hover-opacity; - } -} - -.carousel-control-prev { - left: 0; - - @if $enable-gradients { - // TODO needs a decision - background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); - } -} - -.carousel-control-next { - right: 0; - - @if $enable-gradients { - // TODO needs a decision - background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); - } -} - -// Icons for within -.carousel-control-prev-icon, -.carousel-control-next-icon { - display: inline-block; - width: $carousel-control-icon-width; - height: $carousel-control-icon-width; - 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: $carousel-control-width; - margin-left: $carousel-control-width; - list-style: none; - - li { - box-sizing: content-box; - flex: 0 1 auto; - width: $carousel-indicator-width; - height: $carousel-indicator-height; - margin-right: $carousel-indicator-spacer; - margin-left: $carousel-indicator-spacer; - text-indent: -999px; - cursor: pointer; - background-color: $carousel-indicator-active-bg; - background-clip: padding-box; - border-top: $carousel-indicator-hit-area-height solid transparent; - border-bottom: $carousel-indicator-hit-area-height solid transparent; - opacity: .5; - transition: $carousel-indicator-transition; - } - - .active { - opacity: 1; - } -} - -// Optional captions -.carousel-caption { - position: absolute; - right: calc((calc(100% - $carousel-caption-width)) * .5); - bottom: 20px; - left: calc((calc(100% - $carousel-caption-width)) * .5); - z-index: 10; - padding-top: 20px; - padding-bottom: 20px; - color: $carousel-caption-color; - text-align: center; -} diff --git a/src/Chip/Chip.scss b/src/Chip/Chip.scss index 664d6cfb72..5d2882b9af 100644 --- a/src/Chip/Chip.scss +++ b/src/Chip/Chip.scss @@ -1,15 +1,13 @@ -@import "variables"; - .pgn__chip { - background: var(--pgn-chip-bg, $light-500); - border-radius: $chip-border-radius; + background: var(--pgn-chip-bg, var(--pgn-color-light-500)); + border-radius: var(--pgn-size-chip-border-radius); display: inline-flex; - margin: $chip-margin; + margin: var(--pgn-spacing-chip-margin); box-sizing: border-box; .pgn__chip__label { - font-size: $font-size-sm; - padding: $chip-padding-y $chip-padding-x; + font-size: var(--pgn-typography-font-size-sm); + padding: var(--pgn-spacing-chip-padding-y) var(--pgn-spacing-chip-padding-x); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -17,20 +15,20 @@ cursor: default; &.p-before { - padding-left: $chip-padding-to-icon; + padding-left: var(--pgn-spacing-chip-padding-to-icon); [dir="rtl"] & { - padding-left: $chip-padding-x; - padding-right: $chip-padding-to-icon; + padding-left: var(--pgn-spacing-chip-padding-x); + padding-right: var(--pgn-spacing-chip-padding-to-icon); } } &.p-after { - padding-right: $chip-padding-to-icon; + padding-right: var(--pgn-spacing-chip-padding-to-icon); [dir="rtl"] & { - padding-right: $chip-padding-x; - padding-left: $chip-padding-to-icon; + padding-right: var(--pgn-spacing-chip-padding-x); + padding-left: var(--pgn-spacing-chip-padding-to-icon); } } } @@ -39,41 +37,41 @@ .pgn__chip__icon-after { align-items: center; display: flex; - padding-left: $chip-icon-padding; - padding-right: $chip-icon-padding; + padding-left: var(--pgn-spacing-chip-padding-icon); + padding-right: var(--pgn-spacing-chip-padding-icon); box-sizing: border-box; cursor: default; .pgn__icon { - width: $chip-icon-size; - height: $chip-icon-size; + width: var(--pgn-size-chip-icon); + height: var(--pgn-size-chip-icon); } &.active:hover, &.active:focus { cursor: pointer; - background: $black; + background: var(--pgn-color-black); * { - color: $white; - fill: $white; + color: var(--pgn-color-white); + fill: var(--pgn-color-white); } } } .pgn__chip__icon-before { - border-radius: $chip-border-radius 0 0 $chip-border-radius; + border-radius: var(--pgn-size-chip-border-radius) 0 0 var(--pgn-size-chip-border-radius); [dir="rtl"] & { - border-radius: 0 $chip-border-radius $chip-border-radius 0; + border-radius: 0 var(--pgn-size-chip-border-radius) var(--pgn-size-chip-border-radius) 0; } } .pgn__chip__icon-after { - border-radius: 0 $chip-border-radius $chip-border-radius 0; + border-radius: 0 var(--pgn-size-chip-border-radius) var(--pgn-size-chip-border-radius) 0; [dir="rtl"] & { - border-radius: $chip-border-radius 0 0 $chip-border-radius; + border-radius: var(--pgn-size-chip-border-radius) 0 0 var(--pgn-size-chip-border-radius); } } @@ -85,7 +83,7 @@ &.disabled, &:disabled { cursor: default; - opacity: $chip-disable-opacity; + opacity: var(--pgn-other-chip-opacity-disabled); pointer-events: none; &::before { @@ -95,11 +93,11 @@ } .pgn__chip-light { - --pgn-chip-color: #{$chip-light-color}; - --pgn-chip-bg: #{$chip-light-bg}; + --pgn-chip-color: var(--pgn-color-chip-text-light); + --pgn-chip-bg: var(--pgn-color-chip-bg-light); } .pgn__chip-dark { - --pgn-chip-color: #{$chip-dark-color}; - --pgn-chip-bg: #{$chip-dark-bg}; + --pgn-chip-color: var(--pgn-color-chip-text-dark); + --pgn-chip-bg: var(--pgn-color-chip-bg-dark); } diff --git a/src/Chip/_variables.scss b/src/Chip/_variables.scss deleted file mode 100644 index 47250ad5d9..0000000000 --- a/src/Chip/_variables.scss +++ /dev/null @@ -1,14 +0,0 @@ -$chip-padding-x: var(--pgn-spacing-chip-padding-x) !default; -$chip-padding-y: var(--pgn-spacing-chip-padding-y) !default; -$chip-padding-to-icon: var(--pgn-spacing-chip-padding-to-icon) !default; -$chip-icon-padding: var(--pgn-spacing-chip-padding-icon) !default; -$chip-margin: var(--pgn-spacing-chip-margin) !default; -$chip-border-radius: var(--pgn-size-chip-border-radius) !default; -$chip-disable-opacity: var(--pgn-other-chip-opacity-disabled) !default; -$chip-icon-size: var(--pgn-size-chip-icon) !default; - -$chip-light-bg: var(--pgn-color-chip-bg-light) !default; -$chip-light-color: var(--pgn-color-chip-text-light) !default; - -$chip-dark-bg: var(--pgn-color-chip-bg-dark) !default; -$chip-dark-color: var(--pgn-color-chip-text-dark) !default; diff --git a/src/CloseButton/CloseButton.scss b/src/CloseButton/CloseButton.scss index a84e20236e..cde16e1bb3 100644 --- a/src/CloseButton/CloseButton.scss +++ b/src/CloseButton/CloseButton.scss @@ -1,2 +1,31 @@ -@import "variables"; -@import "~bootstrap/scss/close"; +.close { + float: right; + font-weight: var(--pgn-typography-close-button-font-weight); + line-height: 1; + color: var(--pgn-color-close-button); + text-shadow: var(--pgn-elevation-close-button-text-shadow); + opacity: .5; + + @include font-size(var(--pgn-typography-close-button-font-size)); + + @include hover() { + color: var(--pgn-color-close-button); + 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/CloseButton/_variables.scss b/src/CloseButton/_variables.scss deleted file mode 100644 index 051f2e54fc..0000000000 --- a/src/CloseButton/_variables.scss +++ /dev/null @@ -1,6 +0,0 @@ -// Close - -$close-font-size: var(--pgn-typography-close-button-font-size) !default; -$close-font-weight: var(--pgn-typography-close-button-font-weight) !default; -$close-color: var(--pgn-color-close-button) !default; -$close-text-shadow: var(--pgn-elevation-close-button-text-shadow) !default; diff --git a/src/Code/Code.scss b/src/Code/Code.scss index 62147a3ba5..077d4f65bd 100644 --- a/src/Code/Code.scss +++ b/src/Code/Code.scss @@ -1,2 +1,47 @@ -@import "variables"; -@import "~bootstrap/scss/code"; +code { + color: var(--pgn-color-code-base); + word-wrap: break-word; + + @include font-size(var(--pgn-typography-code-font-size)); + + a > & { + color: inherit; + } +} + +kbd { + padding: var(--pgn-spacing-code-kbd-padding-y) var(--pgn-spacing-code-kbd-padding-x); + color: var(--pgn-color-code-kbd-base); + background-color: var(--pgn-color-code-kbd-bg); + + @include font-size(var(--pgn-typography-code-kbd-font-size)); + @include border-radius(var(--pgn-size-border-radius-sm)); + @include box-shadow(var(--pgn-elevation-code-kbd-box-shadow)); + + kbd { + padding: 0; + font-weight: var(--pgn-typography-code-kbd-nested-font-weight); + + @include font-size(100%); + @include box-shadow(none); + } +} + +pre { + display: block; + color: var(--pgn-color-code-pre); + + @include font-size(var(--pgn-typography-code-font-size)); + + code { + @include font-size(inherit); + + color: inherit; + word-break: normal; + } +} + +.pre-scrollable { + max-height: var(--pgn-size-code-pre-scrollable-max-height); + overflow-y: scroll; +} diff --git a/src/Code/_variables.scss b/src/Code/_variables.scss deleted file mode 100644 index a331ee65d3..0000000000 --- a/src/Code/_variables.scss +++ /dev/null @@ -1,17 +0,0 @@ -// Code - -$code-font-size: var(--pgn-typography-code-font-size) !default; -$code-color: var(--pgn-color-code-base) !default; - -$kbd-box-shadow: var(--pgn-elevation-code-kbd-box-shadow) !default; -$nested-kbd-font-weight: var(--pgn-typography-code-kbd-nested-font-weight) !default; - -// HTML Keyboard Input element () styles -$kbd-padding-y: var(--pgn-spacing-code-kbd-padding-y) !default; -$kbd-padding-x: var(--pgn-spacing-code-kbd-padding-x) !default; -$kbd-font-size: var(--pgn-typography-code-kbd-font-size) !default; -$kbd-color: var(--pgn-color-code-kbd-base) !default; -$kbd-bg: var(--pgn-color-code-kbd-bg) !default; - -$pre-color: var(--pgn-color-code-pre) !default; -$pre-scrollable-max-height: var(--pgn-size-code-pre-scrollable-max-height) !default; diff --git a/src/Collapsible/Collapsible.scss b/src/Collapsible/Collapsible.scss index 8af3b67ce9..acfb619d14 100644 --- a/src/Collapsible/Collapsible.scss +++ b/src/Collapsible/Collapsible.scss @@ -1,5 +1,3 @@ -@import "variables"; - .collapsible-card { // stylelint-disable-next-line @extend .card; @@ -7,9 +5,9 @@ border-radius: 0; .collapsible-trigger { - padding: $collapsible-card-spacer-y $collapsible-card-spacer-x; - border-radius: $card-inner-border-radius; - border-bottom: $card-border-width solid transparent; + padding: var(--pgn-spacing-collapsible-card-spacer-y-base) var(--pgn-spacing-collapsible-card-spacer-x-base); + border-radius: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); + border-bottom: var(--pgn-size-card-border-width) solid transparent; transition: border-color 100ms ease 150ms; cursor: pointer; display: flex; @@ -23,8 +21,10 @@ } &[aria-expanded="true"] { - border-radius: $card-inner-border-radius $card-inner-border-radius 0 0; - border-color: $card-border-color; + border-radius: + calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)) + calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)) 0 0; + border-color: var(--pgn-color-card-border-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-spacing-collapsible-card-spacer-y-base) var(--pgn-spacing-collapsible-card-spacer-x-base); + padding-left: var(--pgn-spacing-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-spacing-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-spacing-collapsible-card-spacer-y-lg) var(--pgn-spacing-collapsible-card-spacer-x-lg); } .collapsible-body { - padding: $collapsible-card-spacer-y-lg $collapsible-card-spacer-x-lg; + padding: var(--pgn-spacing-collapsible-card-spacer-y-lg) var(--pgn-spacing-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-spacing-collapsible-card-spacer-basic-y) var(--pgn-spacing-collapsible-card-spacer-basic-x); } .collapsible-body { - padding: $collapsible-basic-spacer-y $collapsible-basic-spacer-x; + padding: var(--pgn-spacing-collapsible-card-spacer-basic-y) var(--pgn-spacing-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-spacing-collapsible-card-spacer-basic-icon); } } diff --git a/src/Collapsible/_variables.scss b/src/Collapsible/_variables.scss deleted file mode 100644 index 492dfd259d..0000000000 --- a/src/Collapsible/_variables.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Collapsible - -$collapsible-card-spacer-y: var(--pgn-spacing-collapsible-card-spacer-y-base) !default; -$collapsible-card-spacer-x: var(--pgn-spacing-collapsible-card-spacer-x-base) !default; -$collapsible-card-spacer-y-lg: var(--pgn-spacing-collapsible-card-spacer-y-lg) !default; -$collapsible-card-spacer-x-lg: var(--pgn-spacing-collapsible-card-spacer-x-lg) !default; -$collapsible-card-body-spacer-left: var(--pgn-spacing-collapsible-card-spacer-left-body) !default; -$collapsible-card-spacer-icon: var(--pgn-spacing-collapsible-card-spacer-icon) !default; - -$collapsible-basic-spacer-y: var(--pgn-spacing-collapsible-card-spacer-basic-y) !default; -$collapsible-basic-spacer-x: var(--pgn-spacing-collapsible-card-spacer-basic-x) !default; -$collapsible-basic-spacer-icon: var(--pgn-spacing-collapsible-card-spacer-basic-icon) !default; diff --git a/src/ColorPicker/ColorPicker.scss b/src/ColorPicker/ColorPicker.scss index a9139304b1..227d6e39d6 100644 --- a/src/ColorPicker/ColorPicker.scss +++ b/src/ColorPicker/ColorPicker.scss @@ -1,7 +1,7 @@ @import "variables"; .pgn__color-picker { - box-shadow: 0 0 3px 1px $gray-300; + box-shadow: 0 0 3px 1px var(--pgn-color-gray-300); border: none; background: linear-gradient(to bottom right, @@ -15,18 +15,18 @@ ); &.pgn__color-picker-sm { - height: $picker-size-sm; - width: $picker-size-sm; + height: var(--pgn-size-color-picker-sm); + width: var(--pgn-size-color-picker-sm); } &.pgn__color-picker-md { - height: $picker-size-md; - width: $picker-size-md; + height: var(--pgn-size-color-picker-md); + width: var(--pgn-size-color-picker-md); } } .pgn__color-modal { - background: $white; + background: var(--pgn-color-white); padding-bottom: .1rem; margin-bottom: 1rem; } @@ -45,7 +45,7 @@ } .form-field { - @media (min-width: map-get($grid-breakpoints, "sm")) { + @media (--min-pgn-size-breakpoint-sm) { margin-inline-end: 0; } } diff --git a/src/Container/_variables.scss b/src/Container/_variables.scss deleted file mode 100644 index 50a32cb7ec..0000000000 --- a/src/Container/_variables.scss +++ /dev/null @@ -1,5 +0,0 @@ -$max-width-xs: var(--pgn-size-container-max-width-xs) !default; -$max-width-sm: var(--pgn-size-container-max-width-sm) !default; -$max-width-md: var(--pgn-size-container-max-width-md) !default; -$max-width-lg: var(--pgn-size-container-max-width-lg) !default; -$max-width-xl: var(--pgn-size-container-max-width-xl) !default; diff --git a/src/DataTable/DataTable.scss b/src/DataTable/DataTable.scss index 9dde027932..3fa7d14474 100644 --- a/src/DataTable/DataTable.scss +++ b/src/DataTable/DataTable.scss @@ -1,23 +1,21 @@ -@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-typography-font-size-sm); + border-radius: var(--pgn-size-border-radius-base); + background-color: var(--pgn-color-data-table-bg-base); + box-shadow: var(--pgn-elevation-data-table-box-shadow); &.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-size-border-radius-base); + border-top-right-radius: var(--pgn-size-border-radius-base); } > :last-child { - border-bottom-left-radius: $border-radius; - border-bottom-right-radius: $border-radius; + border-bottom-left-radius: var(--pgn-size-border-radius-base); + border-bottom-right-radius: var(--pgn-size-border-radius-base); } } @@ -79,7 +77,7 @@ left: 0; width: 100%; height: 100%; - background-color: $data-table-is-loading-bg; + background-color: var(--pgn-color-data-table-bg-is-loading); z-index: 1; } } @@ -88,17 +86,17 @@ display: flex; align-items: flex-start; - @media (max-width: $max-width-xl) { + @media (--max-pgn-size-breakpoint-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-color-data-table-bg-base); + border-radius: var(--pgn-size-border-radius-base); + box-shadow: var(--pgn-elevation-data-table-box-shadow); + padding: var(--pgn-spacing-data-table-padding-small); margin-right: map_get($spacers, 4); - flex: 0 0 $data-table-layout-sidebar-width; + flex: 0 0 var(--pgn-size-data-table-layout-sidebar-width); } .pgn__data-table-side-filters { @@ -123,23 +121,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-spacing-data-table-padding-cell); text-align: start; } td { - padding: $data-table-cell-padding; + padding: var(--pgn-spacing-data-table-padding-cell); line-height: 24px; text-align: start; } & tr.is-selected { - background-color: $info-100 !important; + background-color: var(--pgn-color-info-100) !important; } } @@ -151,17 +149,17 @@ } .pgn__data-table-empty { - padding: $data-table-padding-x $data-table-padding-y; + padding: var(--pgn-spacing-data-table-padding-x) var(--pgn-spacing-data-table-padding-y); } .pgn__data-table-actions { display: flex; justify-content: space-between; - padding-bottom: $data-table-padding-small; + padding-bottom: var(--pgn-spacing-data-table-padding-small); } .pgn__data-table-status-bar { - padding: $data-table-padding-y $data-table-padding-x; + padding: var(--pgn-spacing-data-table-padding-y) var(--pgn-spacing-data-table-padding-x); } .pgn__data-table-filters { @@ -173,7 +171,7 @@ } .pgn__data-table-filters-dropdown-item { - padding: $data-table-padding-small 14px; + padding: var(--pgn-spacing-data-table-padding-small) 14px; min-width: 15em; } @@ -186,9 +184,9 @@ .pgn__data-table-footer { display: flex; justify-content: space-between; - padding: $data-table-padding-x $data-table-padding-y; + padding: var(--pgn-spacing-data-table-padding-x) var(--pgn-spacing-data-table-padding-y); align-items: center; - border-top: $data-table-border solid $data-table-border-color; + border-top: var(--pgn-size-data-table-border) solid var(--pgn-color-data-table-border); .btn-icon .pgn__icon { [dir="rtl"] & { @@ -201,14 +199,14 @@ display: flex; .pgn__page-count { - align-self: $data-table-footer-position; + align-self: var(--pgn-spacing-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-size-data-table-dropdown-pagination-max-height); + min-width: var(--pgn-size-data-table-dropdown-pagination-min-width); a { text-align: center; @@ -216,7 +214,7 @@ } .pgn__checkbox-filter-label { - font-weight: $font-weight-bold; + font-weight: var(--pgn-typography-font-weight-bold); } .pgn__checkbox-filter { @@ -251,7 +249,7 @@ } .pgn__data-table-card-view { - padding: 0 $data-table-padding-x; + padding: 0 var(--pgn-spacing-data-table-padding-x); .pgn__data-table-card-view-default-skeleton-card-section { margin-top: map_get($spacers, 2); @@ -275,9 +273,9 @@ } .pgn__data-table__overflow-actions-menu { - background: $white; + background: var(--pgn-color-white); padding: map_get($spacers, 2); - box-shadow: $level-1-box-shadow; + box-shadow: var(--pgn-elevation-box-shadow-level-1); border-radius: 4px; } diff --git a/src/DataTable/_variables.scss b/src/DataTable/_variables.scss deleted file mode 100644 index 3df902600f..0000000000 --- a/src/DataTable/_variables.scss +++ /dev/null @@ -1,13 +0,0 @@ -$data-table-background-color: var(--pgn-color-data-table-bg-base) !default; -$data-table-border-color: var(--pgn-color-data-table-border) !default; -$data-table-border: var(--pgn-size-data-table-border) !default; -$data-table-box-shadow: var(--pgn-elevation-data-table-box-shadow) !default; -$data-table-padding-x: var(--pgn-spacing-data-table-padding-x) !default; -$data-table-padding-y: var(--pgn-spacing-data-table-padding-y) !default; -$data-table-padding-small: var(--pgn-spacing-data-table-padding-small) !default; -$data-table-cell-padding: var(--pgn-spacing-data-table-padding-cell) !default; -$data-table-footer-position: var(--pgn-spacing-data-table-footer-position) !default; -$data-table-pagination-dropdown-max-height: var(--pgn-size-data-table-dropdown-pagination-max-height) !default; -$data-table-pagination-dropdown-min-width: var(--pgn-size-data-table-dropdown-pagination-min-width) !default; -$data-table-is-loading-bg: var(--pgn-color-data-table-bg-is-loading) !default; -$data-table-layout-sidebar-width: var(--pgn-size-data-table-layout-sidebar-width) !default; diff --git a/src/Dropdown/Dropdown.scss b/src/Dropdown/Dropdown.scss index 7982c3a2e2..85ce36a987 100644 --- a/src/Dropdown/Dropdown.scss +++ b/src/Dropdown/Dropdown.scss @@ -1,38 +1,37 @@ -@import "variables"; -@import "~bootstrap/scss/dropdown"; +@import "dropdown-bootstrap"; .pgn__dropdown-dark { .dropdown-menu { - background-color: $dark-300; - color: $white; + background-color: var(--pgn-color-dark-300); + color: var(--pgn-color-white); .pgn__dropdown-item { - color: $white; + color: var(--pgn-color-white); font-weight: 400; &:hover { - background-color: $dark-200; + background-color: var(--pgn-color-dark-200); } &.active { - background-color: $light-300; - color: $primary-700; + background-color: var(--pgn-color-light-300); + color: var(--pgn-color-primary-700); font-weight: 700; } &:focus { - border: 2px solid $white; + border: 2px solid var(--pgn-color-white); background-color: inherit; } } .dropdown-header { - color: $light-700; + color: var(--pgn-color-light-700); } .dropdown-divider { - border-color: $dark-200; + border-color: var(--pgn-color-dark-200); } } } diff --git a/src/Dropdown/_variables.scss b/src/Dropdown/_variables.scss deleted file mode 100644 index ce24e03da5..0000000000 --- a/src/Dropdown/_variables.scss +++ /dev/null @@ -1,33 +0,0 @@ -// Dropdowns -// -// Dropdown menu container and contents. - -$dropdown-min-width: var(--pgn-size-dropdown-min-width) !default; -$dropdown-padding-x: var(--pgn-spacing-dropdown-padding-x-base) !default; -$dropdown-padding-y: var(--pgn-spacing-dropdown-padding-y-base) !default; -$dropdown-spacer: var(--pgn-spacing-dropdown-spacer) !default; -$dropdown-font-size: var(--pgn-typography-dropdown-font-size) !default; -$dropdown-color: var(--pgn-color-dropdown-text) !default; -$dropdown-bg: var(--pgn-color-dropdown-bg) !default; -$dropdown-border-color: var(--pgn-color-dropdown-border) !default; -$dropdown-border-radius: var(--pgn-size-dropdown-border-radius-base) !default; -$dropdown-border-width: var(--pgn-size-dropdown-border-width) !default; -$dropdown-inner-border-radius: var(--pgn-size-dropdown-border-radius-inner) !default; -$dropdown-divider-bg: var(--pgn-color-dropdown-divider-bg) !default; -$dropdown-divider-margin-y: var(--pgn-spacing-dropdown-divider-margin-y) !default; -$dropdown-box-shadow: var(--pgn-elevation-dropdown-box-shadow) !default; - -$dropdown-link-color: var(--pgn-color-dropdown-link-base) !default; -$dropdown-link-hover-color: var(--pgn-color-dropdown-link-hover-base) !default; -$dropdown-link-hover-bg: var(--pgn-color-dropdown-link-hover-bg) !default; - -$dropdown-link-active-color: var(--pgn-color-dropdown-link-active-base) !default; -$dropdown-link-active-bg: var(--pgn-color-dropdown-link-active-bg) !default; - -$dropdown-link-disabled-color: var(--pgn-color-dropdown-link-disabled) !default; - -$dropdown-item-padding-y: var(--pgn-spacing-dropdown-padding-y-item) !default; -$dropdown-item-padding-x: var(--pgn-spacing-dropdown-padding-x-item) !default; - -$dropdown-header-color: var(--pgn-color-dropdown-header) !default; -$dropdown-header-padding: var(--pgn-spacing-dropdown-padding-header) !default; diff --git a/src/Dropdown/dropdown-bootstrap.scss b/src/Dropdown/dropdown-bootstrap.scss new file mode 100644 index 0000000000..97f165b8c7 --- /dev/null +++ b/src/Dropdown/dropdown-bootstrap.scss @@ -0,0 +1,181 @@ +.dropup, +.dropright, +.dropdown, +.dropleft { + position: relative; +} + +.dropdown-toggle { + white-space: nowrap; + + @include caret(); +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: var(--pgn-elevation-dropdown-zindex); + display: none; + float: left; + min-width: var(--pgn-size-dropdown-min-width); + padding: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-base); + margin: var(--pgn-spacing-dropdown-spacer) 0 0; + color: var(--pgn-color-dropdown-text); + text-align: left; + list-style: none; + background-color: var(--pgn-color-dropdown-bg); + background-clip: padding-box; + border: var(--pgn-size-dropdown-border-width) solid var(--pgn-color-dropdown-border); + + @include font-size(var(--pgn-typography-dropdown-font-size)); + @include border-radius(var(--pgn-size-dropdown-border-radius-base)); + @include box-shadow(var(--pgn-elevation-dropdown-box-shadow)); + + &[x-placement^="top"], + &[x-placement^="right"], + &[x-placement^="bottom"], + &[x-placement^="left"] { + right: auto; + bottom: auto; + } +} + +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .dropdown-menu#{$infix}-left { + right: auto; + left: 0; + } + + .dropdown-menu#{$infix}-right { + right: 0; + left: auto; + } + } +} + +.dropup { + .dropdown-menu { + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: var(--pgn-spacing-dropdown-spacer); + } + + .dropdown-toggle { + @include caret(up); + } +} + +.dropright { + .dropdown-menu { + top: 0; + right: auto; + left: 100%; + margin-top: 0; + margin-left: var(--pgn-spacing-dropdown-spacer); + } + + .dropdown-toggle { + @include caret(right); + + &::after { + vertical-align: 0; + } + } +} + +.dropleft { + .dropdown-menu { + top: 0; + right: 100%; + left: auto; + margin-top: 0; + margin-right: var(--pgn-spacing-dropdown-spacer); + } + + .dropdown-toggle { + @include caret(left); + + &::before { + vertical-align: 0; + } + } +} + +.dropdown-divider { + @include nav-divider(var(--pgn-color-dropdown-divider-bg), var(--pgn-spacing-dropdown-divider-margin-y), true); +} + +.dropdown-item { + display: block; + width: 100%; + padding: var(--pgn-spacing-dropdown-padding-y-item) var(--pgn-spacing-dropdown-padding-x-item); + clear: both; + font-weight: var(--pgn-typography-font-weight-normal); + color: var(--pgn-color-dropdown-link-base); + text-align: inherit; + text-decoration: var(--pgn-typography-dropdown-item-text-decoration); + white-space: nowrap; + background-color: transparent; + border: 0; + + @if var(--pgn-spacing-dropdown-padding-y-base) == 0 { + &:first-child { + @include border-top-radius(var(--pgn-size-dropdown-border-radius-inner)); + } + + &:last-child { + @include border-bottom-radius(var(--pgn-size-dropdown-border-radius-inner)); + } + } + + @include hover-focus() { + color: var(--pgn-color-dropdown-link-hover-base); + text-decoration: none; + + @include gradient-bg(var(--pgn-color-dropdown-link-hover-bg)); + } + + &.active, + &:active { + color: var(--pgn-color-dropdown-link-active-base); + text-decoration: none; + + @include gradient-bg(var(--pgn-color-dropdown-link-active-bg)); + } + + &.disabled, + &:disabled { + color: var(--pgn-color-dropdown-link-disabled); + pointer-events: none; + background-color: transparent; + + @if $enable-gradients { + background-image: none; + } + } +} + +.dropdown-menu.show { + display: block; +} + +.dropdown-header { + display: block; + padding: var(--pgn-spacing-dropdown-padding-header); + margin-bottom: 0; + color: var(--pgn-color-dropdown-header); + white-space: nowrap; + + @include font-size(var(--pgn-typography-font-size-sm)); +} + +.dropdown-item-text { + display: block; + padding: var(--pgn-spacing-dropdown-padding-y-item) var(--pgn-spacing-dropdown-padding-x-item); + color: var(--pgn-color-dropdown-link-base); +} diff --git a/src/Dropzone/Dropzone.scss b/src/Dropzone/Dropzone.scss index 5c892fda89..b78a9ac306 100644 --- a/src/Dropzone/Dropzone.scss +++ b/src/Dropzone/Dropzone.scss @@ -1,35 +1,33 @@ -@import "variables"; - .pgn__dropzone { display: flex; justify-content: center; align-items: center; min-height: 200px; - padding: $dropzone-padding; - border: $dropzone-border-default dashed $dropzone-border-color-default; + padding: var(--pgn-spacing-dropzone-padding); + border: var(--pgn-spacing-dropzone-border-base) dashed var(--pgn-color-dropzone-border-base); box-sizing: border-box; cursor: pointer; &:hover { - border: $dropzone-border-hover solid $dropzone-border-color-hover; + border: var(--pgn-spacing-dropzone-border-hover) solid var(--pgn-color-dropzone-border-hover); } &:focus { - border: $dropzone-border-focus solid $dropzone-border-color-focus; + border: var(--pgn-spacing-dropzone-border-focus) solid var(--pgn-color-dropzone-border-focus); } &.pgn__dropzone-validation-error { - border: $dropzone-border-error solid $dropzone-border-color-error; + border: var(--pgn-spacing-dropzone-border-error) solid var(--pgn-color-dropzone-border-error); } &.pgn__dropzone-active { - border: $dropzone-border-active solid $dropzone-border-color-active; + border: var(--pgn-spacing-dropzone-border-active) solid var(--pgn-color-dropzone-border-active); } } .pgn__dropzone-error-wrapper { text-align: center; - color: $dropzone-error-wrapper-color; + color: var(--pgn-color-dropzone-error-wrapper); } .pgn__dropzone-generic-alert { @@ -46,7 +44,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 +60,6 @@ } .pgn__dropzone__upload-restriction-message { - font-size: $dropzone-restriction-msg-font-size; - color: $dropzone-restriction-msg-color; + font-size: var(--pgn-typography-dropzone-restriction-msg-font-size); + color: var(--pgn-color-dropzone-restriction-msg); } diff --git a/src/Dropzone/_variables.scss b/src/Dropzone/_variables.scss deleted file mode 100644 index 6a107a5088..0000000000 --- a/src/Dropzone/_variables.scss +++ /dev/null @@ -1,14 +0,0 @@ -$dropzone-padding: var(--pgn-spacing-dropzone-padding) !default; -$dropzone-border-default: var(--pgn-spacing-dropzone-border-base) !default; -$dropzone-border-hover: var(--pgn-spacing-dropzone-border-hover) !default; -$dropzone-border-focus: var(--pgn-spacing-dropzone-border-focus) !default; -$dropzone-border-active: var(--pgn-spacing-dropzone-border-active) !default; -$dropzone-border-error: var(--pgn-spacing-dropzone-border-error) !default; -$dropzone-error-wrapper-color: var(--pgn-color-dropzone-error-wrapper) !default; -$dropzone-restriction-msg-font-size: var(--pgn-typography-dropzone-restriction-msg-font-size) !default; -$dropzone-restriction-msg-color: var(--pgn-color-dropzone-restriction-msg) !default; -$dropzone-border-color-default: var(--pgn-color-dropzone-border-base) !default; -$dropzone-border-color-hover: var(--pgn-color-dropzone-border-hover) !default; -$dropzone-border-color-focus: var(--pgn-color-dropzone-border-focus) !default; -$dropzone-border-color-active: var(--pgn-color-dropzone-border-active) !default; -$dropzone-border-color-error: var(--pgn-color-dropzone-border-error) !default; diff --git a/src/Form/_Form.scss b/src/Form/_Form.scss index a2c10b2754..e18418075f 100644 --- a/src/Form/_Form.scss +++ b/src/Form/_Form.scss @@ -1,6 +1,6 @@ @import "variables"; @import "bootstrap-forms"; -@import "~bootstrap/scss/input-group"; +@import "input-group"; @import "bootstrap-custom-forms"; @import "mixins"; @import "FormText"; @@ -11,15 +11,15 @@ .form-control.is-invalid.is-invalid-nodanger { @include form-control-focus(true); - border-color: $input-border-color; + border-color: var(--pgn-color-form-input-border); } .form-control:hover { - border: solid $input-hover-width $dark-700; + border: solid var(--pgn-size-form-input-width-hover) var(--pgn-color-dark-700); } .pgn__form-group { - margin-bottom: $form-group-margin-bottom; + margin-bottom: var(--pgn-spacing-form-group-margin-bottom); text-align: start; .form-check { @@ -43,53 +43,71 @@ flex-grow: 1; align-items: flex-start; - @media (min-width: map-get($grid-breakpoints, "sm")) { - margin-inline-end: $custom-control-gutter; + @media (--min-pgn-size-breakpoint-sm) { + margin-inline-end: var(--pgn-spacing-form-control-gutter); } &.has-prepended-node { .form-control { - padding-inline-start: calc(#{$input-padding-x} + #{$form-control-icon-width}); + padding-inline-start: + calc( + var(--pgn-spacing-form-input-padding-x-base) + var(--pgn-size-form-control-icon-width) + ); [dir="rtl"] & { - background-position: left $select-icon-padding center; + background-position: left var(--pgn-spacing-form-control-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-spacing-form-input-padding-x-lg) + var(--pgn-size-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-spacing-form-input-padding-x-sm) + var(--pgn-size-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-spacing-form-input-padding-x-base) + var(--pgn-size-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-spacing-form-input-padding-x-lg) + var(--pgn-size-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-spacing-form-input-padding-x-sm) + var(--pgn-size-form-control-icon-width) + ); } } - font-size: $input-font-size; - line-height: $input-line-height; + font-size: var(--pgn-typography-form-input-font-size-base); + line-height: var(--pgn-typography-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-typography-form-input-font-size-sm); + line-height: var(--pgn-typography-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-typography-form-input-font-size-lg); + line-height: var(--pgn-typography-form-input-line-height-lg); } } @@ -103,8 +121,8 @@ pointer-events: initial; } - height: $input-height; - min-width: $input-height; + height: var(--pgn-size-form-input-height-base); + min-width: var(--pgn-size-form-input-height-base); line-height: inherit; display: flex; justify-content: center; @@ -113,58 +131,64 @@ &.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-spacing-form-input-padding-x-base); + padding-inline-end: calc(var(--pgn-spacing-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} - calc(2 * #{$input-border-width})); + padding-inline-start: calc(var(--pgn-spacing-form-input-padding-x-base) / 2); + padding-inline-end: + calc( + var(--pgn-spacing-form-input-padding-y-sm) - calc(2 * var(--pgn-size-form-input-width-border)) + ); } .pgn__form-control-decorator-group-lg & { - height: $input-height-lg; - min-width: $input-height-lg; + height: var(--pgn-size-form-input-height-lg); + min-width: var(--pgn-size-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-spacing-form-input-padding-x-lg); + padding-right: calc(var(--pgn-spacing-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-spacing-form-input-padding-x-lg) / 2); + padding-right: + calc( + var(--pgn-spacing-form-input-padding-y-base) - (2 * var(--pgn-size-form-input-width-border)) + ); } } .pgn__form-control-decorator-group-sm & { - height: $input-height-sm; - min-width: $input-height-lg; + height: var(--pgn-size-form-input-height-sm); + min-width: var(--pgn-size-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-spacing-form-input-padding-x-sm); + padding-right: calc(var(--pgn-spacing-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-spacing-form-input-padding-x-sm) / 2); + padding-right: calc(var(--pgn-spacing-form-input-padding-y-sm) - (2 * var(--pgn-size-form-input-width-border))); } } .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; } } } @@ -173,7 +197,7 @@ .pgn__form-control-floating-label { position: absolute; - inset-inline-start: $input-border-width; + inset-inline-start: var(--pgn-size-form-input-width-border); inset-inline-end: 0; display: flex; width: 100%; @@ -195,7 +219,7 @@ // 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: $form-control-floating-label-text-bg; + background-color: var(--pgn-color-form-control-label-floating-text); white-space: nowrap; max-width: 75vw; display: block; @@ -209,39 +233,39 @@ .has-leading-element & { .pgn__form-control-floating-label-text { - transform: translateX(#{$form-control-icon-width}); + transform: translateX(var(--pgn-size-form-control-icon-width)); [dir="rtl"] & { - transform: translateX(calc(-1 * #{$form-control-icon-width})); + transform: translateX(calc(-1 * var(--pgn-size-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-spacing-form-input-padding-x-base), + var(--pgn-spacing-form-input-padding-y-base), + var(--pgn-typography-form-input-line-height-base), + var(--pgn-typography-form-input-font-size-base), + var(--pgn-size-form-input-width-border) ); .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-spacing-form-input-padding-x-lg), + var(--pgn-spacing-form-input-padding-y-lg), + var(--pgn-typography-form-input-line-height-lg), + var(--pgn-typography-form-input-font-size-lg), + var(--pgn-size-form-input-width-border) ); } .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-spacing-form-input-padding-x-sm), + var(--pgn-spacing-form-input-padding-y-sm), + var(--pgn-typography-form-input-line-height-sm), + var(--pgn-typography-form-input-font-size-sm), + var(--pgn-size-form-input-width-border) ); } @@ -249,35 +273,35 @@ // select.form-control ~ &, .form-control.has-value ~ & { .pgn__form-control-floating-label-text { - background-color: $input-bg; + background-color: var(--pgn-color-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-spacing-form-input-padding-x-base), + var(--pgn-spacing-form-input-padding-y-base), + var(--pgn-typography-form-input-line-height-base), + var(--pgn-typography-form-input-font-size-base), + var(--pgn-size-form-input-width-border) ); } .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-spacing-form-input-padding-x-lg), + var(--pgn-spacing-form-input-padding-y-lg), + var(--pgn-typography-form-input-line-height-lg), + var(--pgn-typography-form-input-font-size-lg), + var(--pgn-size-form-input-width-border) ); } .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-spacing-form-input-padding-x-sm), + var(--pgn-spacing-form-input-padding-y-sm), + var(--pgn-typography-form-input-line-height-sm), + var(--pgn-typography-form-input-font-size-sm), + var(--pgn-size-form-input-width-border) ); } } @@ -316,22 +340,22 @@ } select.form-control { - padding-inline-end: calc(#{$select-icon-padding} + 2rem); - background-image: $custom-select-indicator; - background-position: right $select-icon-padding center; + padding-inline-end: calc(var(--pgn-spacing-form-control-select-icon-padding) + 2rem); + background-image: var(--pgn-other-content-form-control-select-indicator-icon); + background-position: right var(--pgn-spacing-form-control-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-spacing-form-control-select-icon-padding) center; } } // Regular Form Label .pgn__form-label { - font-size: $input-font-size; + font-size: var(--pgn-typography-form-input-font-size-base); display: inline-block; margin-bottom: .5rem; @@ -345,11 +369,11 @@ select.form-control { } &.pgn__form-label-lg { - font-size: $input-font-size-lg; + font-size: var(--pgn-typography-form-input-font-size-lg); } &.pgn__form-label-sm { - font-size: $input-font-size-sm; + font-size: var(--pgn-typography-form-input-font-size-sm); } } @@ -359,14 +383,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-size-form-control-indicator-base); + width: var(--pgn-size-form-control-indicator-base); + background-color: var(--pgn-color-form-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-size-form-control-indicator-border-width) + var(--pgn-color-form-control-indicator-border); + border-radius: var(--pgn-size-form-control-border-checkbox-indicator-radius) radius; + margin-inline-end: var(--pgn-spacing-form-control-gutter); background-position: center; &:not(:disabled) { @@ -374,7 +398,7 @@ select.form-control { } &:not(:disabled):hover { - box-shadow: $custom-control-indicator-focus-box-shadow; + box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus); } &:disabled { @@ -382,17 +406,17 @@ select.form-control { } &:checked { - border-color: $custom-control-indicator-checked-border-color; + border-color: var(--pgn-color-form-control-indicator-checked-border-base); } } .pgn__form-checkbox-input { &:checked { - background-image: escape-svg($custom-checkbox-indicator-icon-checked); + background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-base); } &:indeterminate { - background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate); + background-image: var(--pgn-other-content-form-control-checkbox-indicator-indeterminate-icon); } } @@ -403,59 +427,59 @@ select.form-control { outline: none; box-shadow: none; text-decoration: none; - border-color: $input-focus-border-color; + border-color: var(--pgn-color-form-input-focus-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-spacing-form-check-position-axis) * -1); + right: calc(var(--pgn-spacing-form-check-position-axis) * -1); + bottom: calc(var(--pgn-spacing-form-check-position-axis) * -1); + left: calc(var(--pgn-spacing-form-check-position-axis) * -1); + border: var(--pgn-size-form-border-radius-width) solid var(--pgn-color-form-input-focus-border); + border-radius: var(--pgn-size-form-border-radius-check-focus); } } .pgn__form-switch-input { - width: $custom-switch-width; - border-radius: $custom-switch-indicator-border-radius; - background-image: escape-svg($custom-switch-indicator-icon-off); + width: var(--pgn-size-form-control-switch-width); + border-radius: var(--pgn-size-form-control-switch-indicator-border-radius); + background-image: var(--pgn-other-content-form-control-switch-indicator-icon-off); background-position: left center; background-repeat: no-repeat; transition: background 150ms ease; &:checked { background-position: right center; - background-color: $custom-switch-indicator-checked-bg; - background-image: escape-svg($custom-switch-indicator-icon-on); + background-color: var(--pgn-color-form-control-switch-indicator-checked-bg); + background-image: var(--pgn-other-content-form-control-switch-indicator-icon-on); } &:indeterminate { background-position: center; - background-image: escape-svg($custom-switch-indicator-icon-off); + background-image: var(--pgn-other-content-form-control-switch-indicator-icon-off); } } .pgn__form-switch-helper-text { - color: $gray-500; - font-size: $font-size-xs; + color: var(--pgn-color-gray-500); + font-size: var(--pgn-typography-font-size-xs); margin-top: .25rem; } .pgn__form-radio-input { - border-radius: $custom-radio-indicator-border-radius; + border-radius: var(--pgn-size-form-control-border-radio-indicator-radius); &:checked { - background-image: escape-svg($custom-radio-indicator-icon-checked); + background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-base); } &:focus { - border-color: $black; + border-color: var(--pgn-color-black); &::before { - border-radius: $custom-radio-indicator-border-radius; + border-radius: var(--pgn-size-form-control-border-radio-indicator-radius); } } } @@ -469,7 +493,7 @@ select.form-control { display: flex; align-items: center; margin-bottom: 0; - line-height: $custom-control-indicator-size; + line-height: var(--pgn-size-form-control-indicator-base); } input:disabled ~ * { @@ -477,17 +501,17 @@ select.form-control { } &.pgn__form-control-invalid input { - border-color: $form-feedback-invalid-color; + border-color: var(--pgn-color-form-feedback-invalid); } &.pgn__form-control-valid input { - border-color: $form-feedback-valid-color; + border-color: var(--pgn-color-form-feedback-valid); } &.pgn__form-control-label-left { .pgn__form-label { order: 1; - margin-inline-end: $custom-control-gutter; + margin-inline-end: var(--pgn-spacing-form-control-gutter); } input { @@ -499,13 +523,13 @@ select.form-control { .pgn__form-checkbox { &.pgn__form-control-invalid input { &:checked { - background-image: escape-svg($custom-checkbox-indicator-icon-invalid-checked); + background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid); } } &.pgn__form-control-valid input { &:checked { - background-image: escape-svg($custom-checkbox-indicator-icon-valid-checked); + background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-valid); } } } @@ -513,13 +537,13 @@ select.form-control { .pgn__form-radio { &.pgn__form-control-invalid input { &:checked { - background-image: escape-svg($custom-radio-indicator-icon-invalid-checked); + background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-invalid); } } &.pgn__form-control-valid input { &:checked { - background-image: escape-svg($custom-radio-indicator-icon-valid-checked); + background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-valid); } } } @@ -533,7 +557,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-size-form-input-radius-border-base) var(--pgn-size-form-input-radius-border-base) 0; } } @@ -544,7 +568,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-size-form-input-radius-border-base) 0 0 var(--pgn-size-form-input-radius-border-base); } } @@ -553,11 +577,11 @@ select.form-control { .pgn__form-control-decorator .btn-icon { &:hover { - fill: $white; + fill: var(--pgn-color-white); } &:focus { - fill: $gray-500; + fill: var(--pgn-color-gray-500); } } @@ -566,24 +590,24 @@ select.form-control { } .pgn__icon.btn-icon__icon { - height: $form-autosuggest-icon-height; - width: $form-autosuggest-icon-width; + height: var(--pgn-size-form-autosuggest-icon-height); + width: var(--pgn-size-form-autosuggest-icon-width); } .pgn__form-autosuggest__dropdown { @include pgn-box-shadow(1, "centered"); - @media (min-width: map-get($grid-breakpoints, "sm")) { - margin-inline-end: $custom-control-gutter; + @media (--min-pgn-size-breakpoint-sm) { + margin-inline-end: var(--pgn-spacing-form-control-gutter); } - border-radius: $border-radius-sm; + border-radius: var(--pgn-size-border-radius-sm); max-height: 15rem; overflow-y: scroll; position: absolute; - background-color: $white; + background-color: var(--pgn-color-white); width: calc(100% - .5rem); - z-index: $zindex-dropdown; + z-index: var(--pgn-elevation-dropdown-zindex); top: 3.125rem; .dropdown-item { @@ -595,7 +619,7 @@ select.form-control { text-overflow: ellipsis; &:active { - color: $white; + color: var(--pgn-color-white); } } @@ -604,9 +628,9 @@ select.form-control { text-align: center; .spinner-border { - width: $form-autosuggest-spinner-width; - height: $form-autosuggest-spinner-height; - border: $form-autosuggest-border-width solid $black; + width: var(--pgn-size-form-autosuggest-spinner-width); + height: var(--pgn-size-form-autosuggest-spinner-height); + border: var(--pgn-size-form-autosuggest-border-width) solid var(--pgn-color-black); border-right-color: transparent; } } diff --git a/src/Form/_FormText.scss b/src/Form/_FormText.scss index 0c367ef4ba..3f19d55ab5 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-typography-font-size-small-base); display: flex; align-items: center; @@ -22,35 +22,35 @@ } .pgn__form-text-default { - color: $text-muted; + color: var(--pgn-color-text-muted); } .pgn__form-text-valid { - color: $form-feedback-valid-color; + color: var(--pgn-color-form-feedback-valid); } .pgn__form-text-invalid { - color: $form-feedback-invalid-color; + color: var(--pgn-color-form-feedback-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-color-text-muted); } } .pgn__form-text-criteria-valid { .pgn__icon { - color: $form-feedback-valid-color; + color: var(--pgn-color-form-feedback-valid); } } .pgn__form-text-criteria-invalid { .pgn__icon { - color: $form-feedback-invalid-color; + color: var(--pgn-color-form-feedback-invalid); } } diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss index 33713d234e..f1b7fb04b2 100644 --- a/src/Form/_bootstrap-custom-forms.scss +++ b/src/Form/_bootstrap-custom-forms.scss @@ -11,63 +11,64 @@ position: relative; z-index: 1; display: block; - min-height: calc(#{$font-size-base} * #{$line-height-base}); - padding-left: calc(#{$custom-control-gutter} + #{$custom-control-indicator-size}); + min-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base)); + padding-left: calc(var(--pgn-spacing-form-control-gutter) + var(--pgn-size-form-control-indicator-base)); print-color-adjust: exact; // Keep themed appearance for print } .custom-control-inline { display: inline-flex; - margin-right: $custom-control-spacer-x; + margin-right: var(--pgn-spacing-form-control-spacer-x); } .custom-control-input { position: absolute; left: 0; z-index: -1; // Put the input behind the label so it doesn't overlay text - width: $custom-control-indicator-size; - height: calc((#{$font-size-base} * #{$line-height-base} + #{$custom-control-indicator-size}) * .5); + width: var(--pgn-size-form-control-indicator-base); + // stylelint-disable-next-line max-line-length + height: calc((var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + var(--pgn-size-form-control-indicator-base)) * .5); opacity: 0; &:checked ~ .custom-control-label::before { - color: $custom-control-indicator-checked-color; - border-color: $custom-control-indicator-checked-border-color; + color: var(--pgn-color-form-control-indicator-checked-base); + border-color: var(--pgn-color-form-control-indicator-checked-border-base); - @include gradient-bg($custom-control-indicator-checked-bg); - @include box-shadow($custom-control-indicator-checked-box-shadow); + @include gradient-bg(var(--pgn-color-form-control-indicator-checked-bg-base)); + @include box-shadow(var(--pgn-elevation-form-control-indicator-checked-base)); } &:focus ~ .custom-control-label::before { // the mixin is not used here to make sure there is feedback @if $enable-shadows { - box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow; + box-shadow: var(--pgn-elevation-form-input-base), var(--pgn-elevation-form-control-indicator-checked-focus); } @else { - box-shadow: $custom-control-indicator-focus-box-shadow; + box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus); } } &:focus:not(:checked) ~ .custom-control-label::before { - border-color: $custom-control-indicator-focus-border-color; + border-color: var(--pgn-color-form-control-indicator-checked-border-focus); } &:not(:disabled):active ~ .custom-control-label::before { - color: $custom-control-indicator-active-color; - background-color: $custom-control-indicator-active-bg; - border-color: $custom-control-indicator-active-border-color; + color: var(--pgn-color-form-control-indicator-active-base); + background-color: var(--pgn-color-form-control-indicator-active-bg); + border-color: var(--pgn-color-form-control-indicator-active-border); - @include box-shadow($custom-control-indicator-active-box-shadow); + @include box-shadow(var(--pgn-elevation-form-control-indicator-active)); } // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 &[disabled], &:disabled { ~ .custom-control-label { - color: $custom-control-label-disabled-color; + color: var(--pgn-color-form-control-label-disabled); &::before { - background-color: $custom-control-indicator-disabled-bg; + background-color: var(--pgn-color-form-control-indicator-bg-disabled); } } } @@ -80,36 +81,38 @@ .custom-control-label { position: relative; margin-bottom: 0; - color: $custom-control-label-color; + color: var(--pgn-color-form-control-label-base); vertical-align: top; - cursor: $custom-control-cursor; + cursor: var(--pgn-other-form-control-cursor); // Background-color and (when enabled) gradient &::before { content: ""; position: absolute; - top: calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5); - left: -($custom-control-gutter + $custom-control-indicator-size); + // stylelint-disable-next-line max-line-length + top: calc((var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) - var(--pgn-size-form-control-indicator-base)) * .5); + left: -(var(--pgn-spacing-form-control-gutter) + var(--pgn-size-form-control-indicator-base)); display: block; - width: $custom-control-indicator-size; - height: $custom-control-indicator-size; + width: var(--pgn-size-form-control-indicator-base); + height: var(--pgn-size-form-control-indicator-base); pointer-events: none; - background-color: $custom-control-indicator-bg; - border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color; + background-color: var(--pgn-color-form-control-indicator-bg-base); + border: var(--pgn-size-form-control-indicator-border-width) solid var(--pgn-color-form-control-indicator-border); - @include box-shadow($custom-control-indicator-box-shadow); + @include box-shadow(var(--pgn-elevation-form-control-indicator-base)); } // Foreground (icon) &::after { content: ""; position: absolute; - top: calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5); - left: -($custom-control-gutter + $custom-control-indicator-size); + // stylelint-disable-next-line max-line-length + top: calc((var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) - var(--pgn-size-form-control-indicator-base)) * .5); + left: calc((var(--pgn-spacing-form-control-gutter) + var(--pgn-size-form-control-indicator-base)) * -1); display: block; - width: $custom-control-indicator-size; - height: $custom-control-indicator-size; - background: 50% / #{$custom-control-indicator-bg-size} no-repeat; + width: var(--pgn-size-form-control-indicator-base); + height: var(--pgn-size-form-control-indicator-base); + background: 50% / var(--pgn-size-form-control-indicator-bg) no-repeat; } } @@ -120,35 +123,35 @@ .custom-checkbox { .custom-control-label::before { - @include border-radius($custom-checkbox-indicator-border-radius); + @include border-radius(var(--pgn-size-form-control-border-checkbox-indicator-radius)); } .custom-control-input:checked ~ .custom-control-label { &::after { - background-image: escape-svg($custom-checkbox-indicator-icon-checked); + background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-base); } } .custom-control-input:indeterminate ~ .custom-control-label { &::before { - border-color: $custom-checkbox-indicator-indeterminate-border-color; + border-color: var(--pgn-color-form-control-checkbox-indicator-indeterminate-border); - @include gradient-bg($custom-checkbox-indicator-indeterminate-bg); - @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); + @include gradient-bg(var(--pgn-color-form-control-checkbox-indicator-indeterminate-bg)); + @include box-shadow(var(--pgn-elevation-form-control-checkbox-indicator-indeterminate)); } &::after { - background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate); + background-image: var(--pgn-other-content-form-control-checkbox-indicator-indeterminate-icon); } } .custom-control-input:disabled { &:checked ~ .custom-control-label::before { - @include gradient-bg($custom-control-indicator-checked-disabled-bg); + @include gradient-bg(var(--pgn-color-form-control-indicator-checked-bg-disabled)); } &:indeterminate ~ .custom-control-label::before { - @include gradient-bg($custom-control-indicator-checked-disabled-bg); + @include gradient-bg(var(--pgn-color-form-control-indicator-checked-bg-disabled)); } } } @@ -160,18 +163,18 @@ .custom-radio { .custom-control-label::before { // stylelint-disable-next-line property-disallowed-list - border-radius: $custom-radio-indicator-border-radius; + border-radius: var(--pgn-size-form-control-border-radio-indicator-radius); } .custom-control-input:checked ~ .custom-control-label { &::after { - background-image: escape-svg($custom-radio-indicator-icon-checked); + background-image: var(--pgn-other-content-form-control-radio-indicator-icon-checked-base); } } .custom-control-input:disabled { &:checked ~ .custom-control-label::before { - @include gradient-bg($custom-control-indicator-checked-disabled-bg); + @include gradient-bg(var(--pgn-color-form-control-indicator-checked-bg-disabled)); } } } @@ -182,41 +185,42 @@ // Tweak a few things for switches .custom-switch { - padding-left: calc(#{$custom-switch-width} + #{$custom-control-gutter}); + padding-left: calc(var(--pgn-size-form-control-switch-width) + var(--pgn-spacing-form-control-gutter)); .custom-control-label { &::before { - left: calc(-1 * (#{$custom-switch-width} + #{$custom-control-gutter})); - width: $custom-switch-width; + left: calc(-1 * (var(--pgn-size-form-control-switch-width) + var(--pgn-spacing-form-control-gutter))); + width: var(--pgn-size-form-control-switch-width); pointer-events: all; // stylelint-disable-next-line property-disallowed-list - border-radius: $custom-switch-indicator-border-radius; + border-radius: var(--pgn-size-form-control-switch-indicator-border-radius); } &::after { // stylelint-disable-next-line max-line-length - top: calc(calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5) + calc(#{$custom-control-indicator-border-width} * 2)); + top: calc(calc((var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) - var(--pgn-size-form-control-indicator-base)) * .5) + calc(var(--pgn-size-form-control-indicator-border-width) * 2)); // stylelint-disable-next-line max-line-length - left: calc(calc(-1 * (#{$custom-switch-width} + #{$custom-control-gutter})) + calc(#{$custom-control-indicator-border-width} * 2)); - width: $custom-switch-indicator-size; - height: $custom-switch-indicator-size; - background-color: $custom-control-indicator-border-color; + left: calc(calc(-1 * (var(--pgn-size-form-control-switch-width) + var(--pgn-spacing-form-control-gutter))) + calc(var(--pgn-size-form-control-indicator-border-width) * 2)); + width: var(--pgn-size-form-control-switch-indicator-base); + height: var(--pgn-size-form-control-switch-indicator-base); + background-color: var(--pgn-color-form-control-indicator-border); // stylelint-disable-next-line property-disallowed-list - border-radius: $custom-switch-indicator-border-radius; - transition: transform .15s ease-in-out, $custom-forms-transition; + border-radius: var(--pgn-size-form-control-switch-indicator-border-radius); + transition: transform .15s ease-in-out, var(--pgn-transition-form-control); } } .custom-control-input:checked ~ .custom-control-label { &::after { - background-color: $custom-control-indicator-bg; - transform: translateX(calc(#{$custom-switch-width} - #{$custom-control-indicator-size})); + background-color: var(--pgn-color-form-control-indicator-bg-base); + // stylelint-disable-next-line max-line-length + transform: translateX(calc(var(--pgn-size-form-control-switch-width) - var(--pgn-size-form-control-indicator-base))); } } .custom-control-input:disabled { &:checked ~ .custom-control-label::before { - @include gradient-bg($custom-control-indicator-checked-disabled-bg); + @include gradient-bg(var(--pgn-color-form-control-indicator-checked-bg-disabled)); } } } @@ -231,33 +235,40 @@ .custom-select { display: inline-block; width: 100%; - height: $custom-select-height; + height: var(--pgn-size-form-control-select-height-base); // stylelint-disable-next-line max-line-length - padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; - font-family: $custom-select-font-family; - font-weight: $custom-select-font-weight; - line-height: $custom-select-line-height; - color: $custom-select-color; + padding: + var(--pgn-spacing-form-control-select-padding-y-base) + (var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)) + var(--pgn-spacing-form-control-select-padding-y-base) + var(--pgn-spacing-form-control-select-padding-x-base); + font-family: var(--pgn-typography-form-control-select-font-family); + font-weight: var(--pgn-typography-form-control-select-font-weight); + line-height: var(--pgn-typography-form-control-select-line-height); + color: var(--pgn-color-form-control-select-base); vertical-align: middle; - background: $custom-select-bg $custom-select-background; - border: $custom-select-border-width solid $custom-select-border-color; + background: var(--pgn-color-form-control-select-bg-base) var(--pgn-other-content-form-control-select-bg); + border: var(--pgn-size-form-control-select-border-width-base) solid var(--pgn-color-form-control-select-border-base); appearance: none; - @include font-size($custom-select-font-size); - @include border-radius($custom-select-border-radius,0); - @include box-shadow($custom-select-box-shadow); + @include font-size(var(--pgn-typography-form-control-select-font-size-base)); + @include border-radius(var(--pgn-size-form-control-select-border-radius),0); + @include box-shadow(var(--pgn-elevation-form-control-select-border-base)); &:focus { - border-color: $custom-select-focus-border-color; + border-color: var(--pgn-color-form-control-select-border-focus); outline: 0; @if $enable-shadows { - @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow); + @include box-shadow( + var(--pgn-elevation-form-control-select-border-base), + var(--pgn-elevation-form-control-select-border-focus) + ); } @else { // Avoid using mixin so we can pass custom focus shadow properly - box-shadow: $custom-select-focus-box-shadow; + box-shadow: var(--pgn-elevation-form-control-select-border-focus); } &::-ms-value { @@ -266,21 +277,21 @@ // the selected option text when the (still closed) s in some browsers, due to the limited stylability of ``s in IE10+. &::-ms-expand { @@ -37,7 +37,7 @@ // Placeholder &::placeholder { - color: $input-placeholder-color; + color: var(--pgn-color-form-input-placeholder); // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526. opacity: 1; } @@ -49,7 +49,7 @@ // don't honor that edge case; we style them as disabled anyway. &:disabled, &[readonly] { - background-color: $input-disabled-bg; + background-color: var(--pgn-color-form-input-bg-disabled); // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. opacity: 1; } @@ -68,7 +68,7 @@ select.form-control { // Remove select outline from select box in FF &:-moz-focusring { color: transparent; - text-shadow: 0 0 0 $input-color; + text-shadow: 0 0 0 var(--pgn-color-form-input-base); } &:focus::-ms-value { @@ -77,8 +77,8 @@ select.form-control { // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to // match the appearance of the native widget. // See https://github.com/twbs/bootstrap/issues/19398. - color: $input-color; - background-color: $input-bg; + color: var(--pgn-color-form-input-base); + background-color: var(--pgn-color-form-input-bg-base); } } @@ -97,31 +97,31 @@ select.form-control { // For use with horizontal and inline forms, when you need the label (or legend) // text to align with the form controls. .col-form-label { - padding-top: calc(#{$input-padding-y} + #{$input-border-width}); - padding-bottom: calc(#{$input-padding-y} + #{$input-border-width}); + padding-top: calc(var(--pgn-spacing-form-input-padding-y-base) + var(--pgn-size-form-input-width-border)); + padding-bottom: calc(var(--pgn-spacing-form-input-padding-y-base) + var(--pgn-size-form-input-width-border)); margin-bottom: 0; // Override the `