From c6d4a18c9667fa4a3d4739a8bade234ca1b6d949 Mon Sep 17 00:00:00 2001 From: Viktor Rusakov <52399399+viktorrusakov@users.noreply.github.com> Date: Fri, 18 Nov 2022 17:21:05 +0200 Subject: [PATCH] feat: alpha release of design tokens (#1770) --- .eslintignore | 2 + .gitignore | 1 + .releaserc | 7 +- .stylelintrc.json | 5 +- README.md | 18 + .../0018-design-tokens-style-dictionary.rst | 19 + scss/core/_variables.scss | 20 +- scss/core/core.scss | 1 + scss/core/tokens.css | 980 ++++++++++++++++++ src/ActionRow/_variables.scss | 4 +- src/Alert/Alert.scss | 2 +- src/Alert/_variables.scss | 32 +- src/Annotation/Annotation.scss | 48 +- src/Annotation/_variables.scss | 27 +- src/Avatar/_variables.scss | 18 +- src/AvatarButton/_variables.scss | 6 +- src/Badge/Badge.scss | 2 +- src/Badge/_variables.scss | 18 +- src/Badge/badge-bootstrap.scss | 43 + src/Breadcrumb/Breadcrumb.scss | 8 +- src/Breadcrumb/_variables.scss | 38 +- src/Bubble/_variables.scss | 12 +- src/Button/Button.scss | 222 ++-- src/Button/_variables.scss | 77 +- src/Button/button-bootstrap.scss | 126 +++ src/Card/Card.scss | 10 +- src/Card/_variables.scss | 70 +- src/Card/card-bootstrap.scss | 254 +++++ src/Carousel/Carousel.scss | 2 +- src/Carousel/_variables.scss | 38 +- src/Carousel/carousel-bootstrap.scss | 183 ++++ src/Chip/_variables.scss | 24 +- src/CloseButton/CloseButton.scss | 2 +- src/CloseButton/_variables.scss | 8 +- src/CloseButton/close-button-bootstrap.scss | 32 + src/Code/Code.scss | 2 +- src/Code/_variables.scss | 22 +- src/Code/code-bootstrap.scss | 56 + src/Collapsible/_variables.scss | 18 +- src/Container/_variables.scss | 10 +- src/DataTable/CollapsibleButtonGroup.jsx | 4 +- src/DataTable/DataTable.scss | 24 +- src/DataTable/_variables.scss | 12 + src/Dropdown/Dropdown.scss | 2 +- src/Dropdown/_variables.scss | 48 +- src/Dropzone/_variables.scss | 18 +- src/Fieldset/Fieldset.scss | 2 +- src/Form/_Form.scss | 33 +- src/Form/_bootstrap-custom-forms.scss | 554 ++++++++++ src/Form/_mixins.scss | 8 +- src/Form/_variables.scss | 382 +++---- src/Icon/_variables.scss | 8 +- src/IconButton/IconButton.scss | 18 +- src/IconButton/_variables.scss | 17 + src/Image/_variables.scss | 16 +- src/Menu/Menu.scss | 8 +- src/Menu/_variables.scss | 5 + src/Modal/Modal.scss | 2 +- src/Modal/_ModalDialog.scss | 20 +- src/Modal/_variables.scss | 74 +- src/Nav/Nav.scss | 4 +- src/Nav/_variables.scss | 36 +- src/Navbar/_variables.scss | 68 +- src/PageBanner/PageBanner.scss | 10 +- src/Pagination/Pagination.scss | 7 +- src/Pagination/_variables.scss | 100 +- src/Popover/Popover.scss | 2 +- src/Popover/_variables.scss | 74 +- src/Popover/popover-bootstrap.scss | 180 ++++ src/ProductTour/Checkpoint.scss | 18 +- src/ProductTour/_variables.scss | 21 +- src/ProgressBar/ProgressBar.scss | 5 +- src/ProgressBar/_variables.scss | 38 +- src/Scrollable/Scrollable.scss | 6 +- src/Scrollable/_variables.scss | 1 + src/SearchField/_variables.scss | 26 +- src/SelectableBox/_variables.scss | 8 +- src/Sheet/Sheet.scss | 14 +- src/Sheet/_variables.scss | 2 + src/Spinner/_variables.scss | 12 +- src/Stack/_variables.scss | 2 +- src/Sticky/_variables.scss | 6 +- src/Table/_variables.scss | 2 + src/Tabs/_variables.scss | 6 +- src/Toast/_variables.scss | 30 +- src/Tooltip/_variables.scss | 33 +- tokens/build-tokens.js | 114 ++ tokens/build/_variables.scss | 978 +++++++++++++++++ tokens/build/css-to-scss.json | 1 + tokens/build/scss-to-css.json | 1 + tokens/build/variables.css | 980 ++++++++++++++++++ tokens/map-scss-to-css.js | 23 + tokens/package-lock.json | 784 ++++++++++++++ tokens/package.json | 19 + tokens/replace-variables.js | 28 + tokens/source/alias/color.json | 14 + tokens/source/components/ActionRow.json | 8 + tokens/source/components/Alert.json | 40 + tokens/source/components/Annotation.json | 30 + tokens/source/components/Avatar.json | 17 + tokens/source/components/AvatarButton.json | 11 + tokens/source/components/Badge.json | 25 + tokens/source/components/Breadcrumb.json | 40 + tokens/source/components/Bubble.json | 10 + tokens/source/components/Button.json | 91 ++ tokens/source/components/Card.json | 120 +++ tokens/source/components/Carousel.json | 36 + tokens/source/components/Chip.json | 43 + tokens/source/components/CloseButton.json | 12 + tokens/source/components/Code.json | 37 + tokens/source/components/Collapsible.json | 25 + tokens/source/components/Container.json | 13 + tokens/source/components/DataTable.json | 80 ++ tokens/source/components/Dropdown.json | 73 ++ tokens/source/components/Dropzone.json | 25 + tokens/source/components/Form.json | 723 +++++++++++++ tokens/source/components/Icon.json | 8 + tokens/source/components/IconButton.json | 17 + tokens/source/components/Image.json | 22 + tokens/source/components/Menu.json | 12 + tokens/source/components/Modal.json | 92 ++ tokens/source/components/Nav.json | 90 ++ tokens/source/components/Navbar.json | 162 +++ tokens/source/components/Pagination.json | 100 ++ tokens/source/components/Popover.json | 87 ++ tokens/source/components/ProductTour.json | 46 + tokens/source/components/ProgressBar.json | 39 + tokens/source/components/Scrollable.json | 15 + tokens/source/components/SearchField.json | 39 + tokens/source/components/SelectableBox.json | 11 + tokens/source/components/Sheet.json | 30 + tokens/source/components/Spinner.json | 12 + tokens/source/components/Stack.json | 5 + tokens/source/components/Sticky.json | 17 + tokens/source/components/Tabs.json | 13 + tokens/source/components/Toast.json | 57 + tokens/source/components/Tooltip.json | 40 + tokens/source/components/general/body.json | 6 + tokens/source/components/general/caret.json | 9 + .../source/components/general/headings.json | 15 + tokens/source/components/general/hr.json | 19 + tokens/source/components/general/input.json | 45 + tokens/source/components/general/link.json | 159 +++ tokens/source/components/general/list.json | 69 ++ tokens/source/components/general/text.json | 28 + tokens/source/global/border.json | 11 + tokens/source/global/breakpoints.json | 10 + tokens/source/global/color.json | 930 +++++++++++++++++ tokens/source/global/display.json | 21 + tokens/source/global/elevation.json | 184 ++++ tokens/source/global/grid.json | 11 + tokens/source/global/spacing.json | 17 + tokens/source/global/transition.json | 7 + tokens/source/global/typography.json | 62 ++ tokens/utils.js | 158 +++ www/src/components/Header.scss | 2 +- www/src/components/Menu.tsx | 3 + www/src/pages/foundations/design-tokens.mdx | 124 +++ www/src/scss/_variables.scss | 4 - www/src/scss/base.scss | 7 + www/src/scss/edxorg-theme.scss | 1 - www/src/scss/openedx-theme.scss | 1 - 162 files changed, 10686 insertions(+), 965 deletions(-) create mode 100644 docs/decisions/0018-design-tokens-style-dictionary.rst create mode 100644 scss/core/tokens.css create mode 100644 src/Badge/badge-bootstrap.scss create mode 100644 src/Button/button-bootstrap.scss create mode 100644 src/Card/card-bootstrap.scss create mode 100644 src/Carousel/carousel-bootstrap.scss create mode 100644 src/CloseButton/close-button-bootstrap.scss create mode 100644 src/Code/code-bootstrap.scss create mode 100644 src/DataTable/_variables.scss create mode 100644 src/Form/_bootstrap-custom-forms.scss create mode 100644 src/IconButton/_variables.scss create mode 100644 src/Menu/_variables.scss create mode 100644 src/Popover/popover-bootstrap.scss create mode 100644 src/Scrollable/_variables.scss create mode 100644 src/Sheet/_variables.scss create mode 100644 tokens/build-tokens.js create mode 100644 tokens/build/_variables.scss create mode 100644 tokens/build/css-to-scss.json create mode 100644 tokens/build/scss-to-css.json create mode 100644 tokens/build/variables.css create mode 100644 tokens/map-scss-to-css.js create mode 100644 tokens/package-lock.json create mode 100644 tokens/package.json create mode 100644 tokens/replace-variables.js create mode 100644 tokens/source/alias/color.json create mode 100644 tokens/source/components/ActionRow.json create mode 100644 tokens/source/components/Alert.json create mode 100644 tokens/source/components/Annotation.json create mode 100644 tokens/source/components/Avatar.json create mode 100644 tokens/source/components/AvatarButton.json create mode 100644 tokens/source/components/Badge.json create mode 100644 tokens/source/components/Breadcrumb.json create mode 100644 tokens/source/components/Bubble.json create mode 100644 tokens/source/components/Button.json create mode 100644 tokens/source/components/Card.json create mode 100644 tokens/source/components/Carousel.json create mode 100644 tokens/source/components/Chip.json create mode 100644 tokens/source/components/CloseButton.json create mode 100644 tokens/source/components/Code.json create mode 100644 tokens/source/components/Collapsible.json create mode 100644 tokens/source/components/Container.json create mode 100644 tokens/source/components/DataTable.json create mode 100644 tokens/source/components/Dropdown.json create mode 100644 tokens/source/components/Dropzone.json create mode 100644 tokens/source/components/Form.json create mode 100644 tokens/source/components/Icon.json create mode 100644 tokens/source/components/IconButton.json create mode 100644 tokens/source/components/Image.json create mode 100644 tokens/source/components/Menu.json create mode 100644 tokens/source/components/Modal.json create mode 100644 tokens/source/components/Nav.json create mode 100644 tokens/source/components/Navbar.json create mode 100644 tokens/source/components/Pagination.json create mode 100644 tokens/source/components/Popover.json create mode 100644 tokens/source/components/ProductTour.json create mode 100644 tokens/source/components/ProgressBar.json create mode 100644 tokens/source/components/Scrollable.json create mode 100644 tokens/source/components/SearchField.json create mode 100644 tokens/source/components/SelectableBox.json create mode 100644 tokens/source/components/Sheet.json create mode 100644 tokens/source/components/Spinner.json create mode 100644 tokens/source/components/Stack.json create mode 100644 tokens/source/components/Sticky.json create mode 100644 tokens/source/components/Tabs.json create mode 100644 tokens/source/components/Toast.json create mode 100644 tokens/source/components/Tooltip.json create mode 100644 tokens/source/components/general/body.json create mode 100644 tokens/source/components/general/caret.json create mode 100644 tokens/source/components/general/headings.json create mode 100644 tokens/source/components/general/hr.json create mode 100644 tokens/source/components/general/input.json create mode 100644 tokens/source/components/general/link.json create mode 100644 tokens/source/components/general/list.json create mode 100644 tokens/source/components/general/text.json create mode 100644 tokens/source/global/border.json create mode 100644 tokens/source/global/breakpoints.json create mode 100644 tokens/source/global/color.json create mode 100644 tokens/source/global/display.json create mode 100644 tokens/source/global/elevation.json create mode 100644 tokens/source/global/grid.json create mode 100644 tokens/source/global/spacing.json create mode 100644 tokens/source/global/transition.json create mode 100644 tokens/source/global/typography.json create mode 100644 tokens/utils.js create mode 100644 www/src/pages/foundations/design-tokens.mdx delete mode 100644 www/src/scss/_variables.scss diff --git a/.eslintignore b/.eslintignore index a693875c8a..0783b219a7 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,3 +7,5 @@ dependent-usage-analyzer/ build-scss.js component-generator/ example/ +style-dictionary-build/ +build-tokens.js diff --git a/.gitignore b/.gitignore index 986dbca569..4581cfa3b1 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ jest* dist src/i18n/transifex_input.json src/i18n/temp +style-dictionary-build # gatsby files www/.cache/ diff --git a/.releaserc b/.releaserc index 2c101b5028..50eab9763c 100644 --- a/.releaserc +++ b/.releaserc @@ -1,5 +1,10 @@ { - "branches": ["master", "next"], + "branches": [ + "master", + "next", + { "name": "alpha", "prerelease": true }, + { "name": "beta", "prerelease": true } + ], "plugins": [ "@semantic-release/commit-analyzer", "@semantic-release/release-notes-generator", diff --git a/.stylelintrc.json b/.stylelintrc.json index 5dafbb25a8..6abc524964 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -31,6 +31,9 @@ "ignoreProperties": ["xs", "sm", "md", "lg", "xl", "xxl"] }], "alpha-value-notation": "number", - "color-function-notation": "legacy" + "color-function-notation": "legacy", + "value-keyword-case": ["lower", { + "ignoreProperties": ["/font-family/"] + }] } } diff --git a/README.md b/README.md index 9babdf325a..3ba1851bbb 100644 --- a/README.md +++ b/README.md @@ -467,3 +467,21 @@ The assigned maintainers for this component and other project details may be fou Please do not report security issues in public. Please email security@edx.org. We tend to prioritize security issues which impact the published `@edx/paragon` NPM library more so than the [documentation website](https://paragon-openedx.netlify.app/) or example React application. + +## Design Tokens + +Design tokens are all the values needed to build and maintain a design system — spacing, color, typography, object styles, etc. They can represent anything defined by the design: color as an RGB value, opacity as a number, spacing as a REM value. They are used instead of hard-coded values to provide flexibility and uniformity across the application. + +### Design Tokens in Paragon + +Folder `tokens` in the project root contains split by categories `json` files. They consist of `JSON` objects that store information about the variable name and its value. Scripts that also reside in the `tokens` folder provide following facilities: build tokens into `css`, `scss` variables, map `scss` to `css` variables and replace old `scss` to new `css` variables. + +### Usage + +``` +cd tokens +npm install +npm run build-tokens # creates "build" folder with scss and css variables based on json tokens +npm run build-scss-to-css-map # creats scss-to-css-core.json and scss-to-css-components.json +npm run replace-variables -- --path ../src # this will replace all scss variables in the project with the new css variables based on the "scss-to-css-core.json" and "scss-to-css-components.json" files +``` diff --git a/docs/decisions/0018-design-tokens-style-dictionary.rst b/docs/decisions/0018-design-tokens-style-dictionary.rst new file mode 100644 index 0000000000..312302ee87 --- /dev/null +++ b/docs/decisions/0018-design-tokens-style-dictionary.rst @@ -0,0 +1,19 @@ +18. Design tokens with Style Dictionary +--------------------------------------- + +Status +------ + +Proposed + +Context +------- + +Decision +-------- + +Consequences +------------ + +Resources +--------- diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss index 3fe1f20d29..502ce9c290 100644 --- a/scss/core/_variables.scss +++ b/scss/core/_variables.scss @@ -688,7 +688,6 @@ $embed-responsive-aspect-ratios: join( // // Font, line-height, and color for body text, headings, and more. -// stylelint-disable value-keyword-case $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; @@ -696,7 +695,6 @@ $font-family-serif: serif !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; -// stylelint-enable value-keyword-case $font-size-base: 1.125rem !default; // Assumes the browser default, typically `16px` $font-size-lg: $font-size-base * 1.25 !default; @@ -789,15 +787,15 @@ $table-th-font-weight: null !default; // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. -$zindex-dropdown: 1000 !default; -$zindex-sticky: 1020 !default; -$zindex-fixed: 1030 !default; -$zindex-sheet-backdrop: 1031 !default; -$zindex-sheet: 1032 !default; -$zindex-modal-backdrop: 1040 !default; -$zindex-modal: 1050 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; +$zindex-dropdown: var(--pgn-dropdown-zindex) !default; +$zindex-sticky: var(--pgn-zindex-sticky) !default; +$zindex-fixed: var(--pgn-zindex-fixed) !default; +$zindex-sheet-backdrop: var(--pgn-sheet-zindex-backdrop) !default; +$zindex-sheet: var(--pgn-sheet-zindex-main) !default; +$zindex-modal-backdrop: var(--pgn-modal-backdrop-zindex) !default; +$zindex-modal: var(--pgn-modal-zindex) !default; +$zindex-popover: var(--pgn-popover-zindex) !default; +$zindex-tooltip: var(--pgn-tooltip-zindex) !default; // Buttons + Forms // diff --git a/scss/core/core.scss b/scss/core/core.scss index d6a2b072f7..6b9630c778 100644 --- a/scss/core/core.scss +++ b/scss/core/core.scss @@ -1,3 +1,4 @@ +@import "tokens"; @import "functions"; @import "variables"; @import "~bootstrap/scss/mixins"; diff --git a/scss/core/tokens.css b/scss/core/tokens.css new file mode 100644 index 0000000000..36ef076386 --- /dev/null +++ b/scss/core/tokens.css @@ -0,0 +1,980 @@ +:root { + --pgn-line-height-sm: 1.5; + --pgn-line-height-lg: 1.5; + --pgn-line-height-base: 1.5556; + --pgn-font-weight-lead: null; + --pgn-font-weight-bolder: bolder; + --pgn-font-weight-bold: 700; + --pgn-font-weight-semi-bold: 500; + --pgn-font-weight-normal: 400; + --pgn-font-weight-light: 300; + --pgn-font-weight-lighter: lighter; + --pgn-font-size-mobile-h1: 2.25rem; + --pgn-font-size-h6: .75rem; + --pgn-font-size-h5: .875rem; + --pgn-font-size-h4: 1.125rem; + --pgn-font-size-h3: 1.375rem; + --pgn-font-size-h2: 2rem; + --pgn-font-size-h1: 2.5rem; + --pgn-font-size-small-x: 75%; + --pgn-font-size-small-base: 87.5%; + --pgn-font-size-xs: .75rem; + --pgn-font-size-sm: .875rem; + --pgn-font-size-lg: 1.4063rem; + --pgn-font-size-base: 1.125rem; + --pgn-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; + --pgn-font-family-serif: serif; + --pgn-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --pgn-transition-collapse: height .35s ease; + --pgn-transition-fade: opacity .15s linear; + --pgn-transition-base: all .2s ease-in-out; + --pgn-spacer-base: 1rem; + --pgn-spacer-0: 0; + --pgn-grid-row-columns: 6; + --pgn-grid-gutter-width: 24px; + --pgn-grid-columns: 12; + --pgn-zindex-fixed: 1030; + --pgn-zindex-sticky: 1020; + --pgn-zindex-2000: 2000; + --pgn-zindex-1800: 1800; + --pgn-zindex-1600: 1600; + --pgn-zindex-1400: 1400; + --pgn-zindex-1200: 1200; + --pgn-zindex-1000: 1000; + --pgn-zindex-800: 800; + --pgn-zindex-600: 600; + --pgn-zindex-400: 400; + --pgn-zindex-200: 200; + --pgn-zindex-0: 0; + --pgn-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15); + --pgn-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); + --pgn-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); + --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); + --pgn-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); + --pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-display-line-height-mobile: 3.5rem; + --pgn-display-line-height-base: 1; + --pgn-display-size-mobile: 3.25rem; + --pgn-display-size-4: 7.5rem; + --pgn-display-size-3: 5.625rem; + --pgn-display-size-2: 4.875rem; + --pgn-display-size-1: 3.75rem; + --pgn-breakpoint-xxl: 1400px; + --pgn-breakpoint-xl: 1200px; + --pgn-breakpoint-lg: 992px; + --pgn-breakpoint-md: 768px; + --pgn-breakpoint-sm: 576px; + --pgn-breakpoint-xs: 0; + --pgn-border-radius-sm: .25rem; + --pgn-border-radius-lg: .425rem; + --pgn-border-radius-base: .375rem; + --pgn-border-width: 1px; + --pgn-tooltip-zindex: 1070; + --pgn-tooltip-arrow-height: .4rem; + --pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); + --pgn-tooltip-margin: 0; + --pgn-tooltip-padding-x: .5rem; + --pgn-tooltip-padding-y: .5rem; + --pgn-tooltip-opacity: 1; + --pgn-tooltip-max-width: 200px; + --pgn-toast-container-gutter-sm: .625rem; + --pgn-toast-container-gutter-lg: 1.25rem; + --pgn-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15); + --pgn-toast-border-radius: .25rem; + --pgn-toast-border-width: 1px; + --pgn-toast-color-base: null; + --pgn-toast-font-size: .875rem; + --pgn-toast-padding-y: .25rem; + --pgn-toast-padding-x: .75rem; + --pgn-toast-max-width: 400px; + --pgn-tabs-notification-width: 1rem; + --pgn-tabs-notification-height: 1rem; + --pgn-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); + --pgn-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); + --pgn-sticky-offset: 0; + --pgn-stack-gap: 0; + --pgn-spinner-sm-border-width: .2em; + --pgn-spinner-sm-width: 1rem; + --pgn-spinner-border-width: .25em; + --pgn-spinner-width: 2rem; + --pgn-sheet-zindex-main: 1032; + --pgn-sheet-zindex-backdrop: 1031; + --pgn-selectable-box-box-space: .75rem; + --pgn-selectable-box-border-radius: .25rem; + --pgn-selectable-box-padding: 1rem; + --pgn-search-field-button-margin: .5rem; + --pgn-search-field-disabled-opacity: .3; + --pgn-search-field-line-height: 1.5rem; + --pgn-search-field-border-width-focus: .3125rem; + --pgn-search-field-border-width-interaction: .125rem; + --pgn-search-field-border-width-base: .0625rem; + --pgn-search-field-border-radius: 0; + --pgn-progress-bar-hint-annotation-gap: .5rem; + --pgn-progress-bar-threshold-circle: .5625rem; + --pgn-progress-bar-bar-transition: width .6s ease; + --pgn-progress-bar-bar-animation-timing: 1s linear infinite; + --pgn-progress-bar-box-shadow: none; + --pgn-progress-bar-border-width: 1px; + --pgn-progress-bar-border-radius: 0; + --pgn-progress-bar-bg: transparent; + --pgn-progress-bar-height-annotated: .3125rem; + --pgn-progress-bar-height-base: 1rem; + --pgn-product-tour-checkpoint-zindex: 1060; + --pgn-product-tour-checkpoint-width-max: 480px; + --pgn-product-tour-checkpoint-width-arrow: 15px; + --pgn-product-tour-checkpoint-width-border: 8px; + --pgn-popover-zindex: 1060; + --pgn-popover-arrow-height: .5rem; + --pgn-popover-arrow-width: 1rem; + --pgn-popover-icon-width: 1rem; + --pgn-popover-icon-height: 1rem; + --pgn-popover-icon-margin-right: .5rem; + --pgn-popover-header-padding-x: 1rem; + --pgn-popover-header-padding-y: .5rem; + --pgn-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); + --pgn-popover-max-width: 480px; + --pgn-reduced-dropdown-width-min: 6rem; + --pgn-reduced-dropdown-height-max: 60vh; + --pgn-pagination-focus-border-width: .125rem; + --pgn-pagination-focus-outline: 0; + --pgn-pagination-secondary-height-sm: 2.25rem; + --pgn-pagination-secondary-height-base: 2.75rem; + --pgn-pagination-toggle-border-sm: .25rem; + --pgn-pagination-toggle-border-base: .3125rem; + --pgn-pagination-icon-height: 2.25rem; + --pgn-pagination-icon-width: 2.25rem; + --pgn-pagination-icon-size-sm: 1rem; + --pgn-pagination-icon-size-base: 1.375rem; + --pgn-pagination-font-size-sm: .875rem; + --pgn-pagination-line-height: 1.5rem; + --pgn-pagination-margin-y: .5rem; + --pgn-pagination-margin-x: .5rem; + --pgn-pagination-padding-icon: .5rem; + --pgn-pagination-padding-x-lg: 1.5rem; + --pgn-pagination-padding-x-sm: .6rem; + --pgn-pagination-padding-x-base: 1rem; + --pgn-pagination-padding-y-lg: .75rem; + --pgn-pagination-padding-y-sm: .8rem; + --pgn-pagination-padding-y-base: .625rem; + --pgn-navbar-toggler-padding-x: .75rem; + --pgn-navbar-toggler-padding-y: .25rem; + --pgn-navbar-nav-scroll-max-height: 75vh; + --pgn-navbar-padding-x-nav-link: .5rem; + --pgn-nav-tabs-border-radius: 0; + --pgn-nav-tabs-border-width: 2px; + --pgn-nav-link-font-weight: 500; + --pgn-nav-link-padding-x: 1rem; + --pgn-nav-link-padding-y: .5rem; + --pgn-modal-zindex: 1050; + --pgn-modal-transform-scale: scale(1.02); + --pgn-modal-transform-show: none; + --pgn-modal-transform-fade: translate(0, -50px); + --pgn-modal-transform-base: transform .3s ease-out; + --pgn-modal-sm: 500px; + --pgn-modal-md: 500px; + --pgn-modal-lg: 800px; + --pgn-modal-xl: 1140px; + --pgn-modal-header-padding-x: 1.5rem; + --pgn-modal-header-padding-y: 1rem; + --pgn-modal-backdrop-zindex: 1040; + --pgn-modal-backdrop-opacity: .5; + --pgn-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15); + --pgn-modal-content-box-shadow-xs: 0 .25rem .5rem rgba(0, 0, 0, .5); + --pgn-modal-content-border-width: 0rem; + --pgn-modal-content-color: null; + --pgn-modal-footer-padding-y: 1.5rem; + --pgn-modal-footer-padding-x: 1rem; + --pgn-modal-inner-padding-bottom: .7rem; + --pgn-modal-inner-padding-base: 1.5rem; + --pgn-menu-border-hover: transparent; + --pgn-menu-border-active: transparent; + --pgn-menu-border-base: transparent; + --pgn-image-figure-caption-font-size: 90%; + --pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); + --pgn-image-thumbnail-padding: .25rem; + --pgn-icon-button-bg: transparent; + --pgn-icon-button-diameter-sm: 2.25rem; + --pgn-icon-button-diameter-md: 2.75rem; + --pgn-icon-lg: 1.75rem; + --pgn-icon-md: 1.5rem; + --pgn-icon-sm: 1.25rem; + --pgn-icon-inline: .8em; + --pgn-mark-bg: #FFF243FF; + --pgn-mark-padding: .2em; + --pgn-paragraph-margin-bottom: 1rem; + --pgn-list-group-item-padding-x: 1.25rem; + --pgn-list-group-item-padding-y: .75rem; + --pgn-list-group-color: null; + --pgn-list-inline-padding: .5rem; + --pgn-link-emphasized-hover-darken-percentage: 15%; + --pgn-link-brand-inline-hover-decoration: underline; + --pgn-link-brand-inline-decoration: underline; + --pgn-link-brand-hover-decoration: underline; + --pgn-link-brand-decoration: none; + --pgn-link-muted-inline-hover-decoration: underline; + --pgn-link-muted-inline-decoration: underline; + --pgn-link-muted-hover-decoration: underline; + --pgn-link-muted-decoration: none; + --pgn-link-inline-hover-decoration: underline; + --pgn-link-inline-decoration: underline; + --pgn-link-hover-decoration: underline; + --pgn-link-decoration: none; + --pgn-input-btn-focus-width: 1px; + --pgn-input-btn-line-height-sm: 1.4286; + --pgn-input-btn-line-height-base: 1.3333; + --pgn-input-btn-font-size-lg: 1.325rem; + --pgn-input-btn-font-size-sm: .875rem; + --pgn-input-btn-font-size-base: 1.125rem; + --pgn-input-btn-font-family: inherit; + --pgn-input-btn-padding-lg-x: 1.25rem; + --pgn-input-btn-padding-lg-y: .6875rem; + --pgn-input-btn-padding-sm-x: .75rem; + --pgn-input-btn-padding-sm-y: .4375rem; + --pgn-input-btn-padding-x: 1rem; + --pgn-input-btn-padding-y: .5625rem; + --pgn-headings-line-height: 1.25; + --pgn-headings-font-family: null; + --pgn-headings-margin-bottom: .5rem; + --pgn-caret-spacing: .255em; + --pgn-caret-vertical-align: .255em; + --pgn-caret-width: .3em; + --pgn-form-select-icon-padding: .5625rem; + --pgn-form-control-icon-width: 32px; + --pgn-form-feedback-tooltip-opacity: .9; + --pgn-form-feedback-tooltip-padding-x: .5rem; + --pgn-form-feedback-tooltip-padding-y: .25rem; + --pgn-form-custom-range-thumb-box-shadow-base: 0 .1rem .25rem rgba(0, 0, 0, .1); + --pgn-form-custom-range-thumb-border-radius: 1rem; + --pgn-form-custom-range-thumb-border-base: 0; + --pgn-form-custom-range-thumb-width: 1rem; + --pgn-form-custom-range-track-box-shadow: inset 0 .25rem .25rem rgba(0, 0, 0, .1); + --pgn-form-custom-range-track-border-radius: 1rem; + --pgn-form-custom-range-track-cursor: pointer; + --pgn-form-custom-range-track-height: .5rem; + --pgn-form-custom-range-track-width: 100%; + --pgn-form-custom-select-border-box-shadow-base: inset 0 1px 2px rgba(0, 0, 0, .075); + --pgn-form-custom-select-bg-size: 24px 24px; + --pgn-form-custom-select-indicator-padding: 1rem; + --pgn-form-custom-radio-indicator-border-radius: 50%; + --pgn-form-custom-checkbox-indicator-indeterminate-box-shadow: none; + --pgn-form-custom-checkbox-indicator-border-radius: 0; + --pgn-form-custom-control-label-color-base: null; + --pgn-form-custom-control-indicator-active-bg: #0A3055FF; + --pgn-form-custom-control-indicator-active-box-shadow: none; + --pgn-form-custom-control-indicator-checked-box-shadow-focus: 0 0 0 4px rgba(0, 0, 0, .1); + --pgn-form-custom-control-indicator-checked-box-shadow-base: none; + --pgn-form-custom-control-indicator-border-width: 2px; + --pgn-form-custom-control-indicator-bg-size: 100%; + --pgn-form-custom-control-indicator-size: 1.25rem; + --pgn-form-custom-control-cursor: null; + --pgn-form-custom-control-spacer-x: 1rem; + --pgn-form-custom-control-gutter: .5rem; + --pgn-form-custom-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; + --pgn-form-group-margin-bottom: 1rem; + --pgn-form-check-border-width: .125rem; + --pgn-form-check-border-radius-focus: .0625rem; + --pgn-form-check-position-axis: .375rem; + --pgn-form-check-inline-margin-x: .75rem; + --pgn-form-text-margin-top: .25rem; + --pgn-form-input-check-margin-y: .3rem; + --pgn-form-input-check-margin-x-inline: .3125rem; + --pgn-form-input-check-margin-x-base: .25rem; + --pgn-form-input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; + --pgn-form-input-width-hover: 1px; + --pgn-form-input-focus-width: 1px; + --pgn-form-input-box-shadow-base: inset 0 1px 1px rgba(0, 0, 0, .075); + --pgn-dropzone-padding: 1.5rem; + --pgn-dropdown-zindex: 1000; + --pgn-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175); + --pgn-dropdown-spacer: .125rem; + --pgn-dropdown-padding-y-item: .5rem; + --pgn-dropdown-padding-y-base: .25rem; + --pgn-dropdown-padding-x-item: 1rem; + --pgn-dropdown-padding-x-base: 0; + --pgn-dropdown-min-width: 18rem; + --pgn-data-table-pagination-dropdown-min-width: 6rem; + --pgn-data-table-pagination-dropdown-max-height: 60vh; + --pgn-data-table-footer-position: center; + --pgn-data-table-padding-head-cell: .5rem .75rem; + --pgn-data-table-padding-cell: .75rem; + --pgn-data-table-padding-small: .5rem; + --pgn-data-table-padding-y: .75rem; + --pgn-data-table-padding-x: .75rem; + --pgn-container-max-width-xl: 1440px; + --pgn-container-max-width-lg: 1192px; + --pgn-container-max-width-md: 952px; + --pgn-container-max-width-sm: 708px; + --pgn-container-max-width-xs: 464px; + --pgn-collapsible-card-spacer-basic-icon: .625rem; + --pgn-collapsible-card-spacer-basic-x: .5rem; + --pgn-collapsible-card-spacer-basic-y: .5rem; + --pgn-collapsible-card-spacer-icon: 2.5rem; + --pgn-collapsible-card-spacer-left-body: .75rem; + --pgn-collapsible-card-spacer-x-base: .5rem; + --pgn-collapsible-card-spacer-y-base: .5rem; + --pgn-code-pre-scrollable-max-height: 340px; + --pgn-code-kbd-padding-x: .4rem; + --pgn-code-kbd-padding-y: .2rem; + --pgn-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25); + --pgn-code-color: #E83E8CFF; + --pgn-code-font-size: 87.5%; + --pgn-chip-icon-size: 1.25rem; + --pgn-chip-disabled-opacity: .3; + --pgn-chip-line-height: 1.5rem; + --pgn-chip-font-weight: 400; + --pgn-chip-font-size: .75rem; + --pgn-chip-position-axis: .125rem; + --pgn-chip-border-width: .0625rem; + --pgn-chip-border-radius-focus: .5rem; + --pgn-chip-border-radius-base: .4375rem; + --pgn-chip-margin-inline: .5rem; + --pgn-chip-margin-base: .125rem; + --pgn-chip-padding-icon-to: 3px; + --pgn-chip-padding-icon-base: .25rem; + --pgn-chip-padding-x: .5rem; + --pgn-chip-padding-y: .125rem; + --pgn-carousel-transition-duration: .6s; + --pgn-carousel-caption-width: 70%; + --pgn-carousel-indicator-transition: opacity .6s ease; + --pgn-carousel-indicator-spacer: 3px; + --pgn-carousel-indicator-height-area-hit: 3px; + --pgn-carousel-indicator-height-base: 3px; + --pgn-carousel-indicator-width: 30px; + --pgn-carousel-control-transition: opacity .15s ease; + --pgn-carousel-control-opacity-hover: .9; + --pgn-carousel-control-opacity-base: .5; + --pgn-carousel-control-width-icon: 20px; + --pgn-carousel-control-width-base: 15%; + --pgn-card-loading-skeleton-spacer: .313rem; + --pgn-card-logo-height: 4.125rem; + --pgn-card-logo-width: 7.25rem; + --pgn-card-logo-bottom-offset-horizontal: .4375rem; + --pgn-card-logo-bottom-offset-base: 1rem; + --pgn-card-logo-left-offset-horizontal: .4375rem; + --pgn-card-logo-left-offset-base: 1.5rem; + --pgn-card-footer-action-gap: .5rem; + --pgn-card-columns-gap: 1.25rem; + --pgn-card-columns-count: 3; + --pgn-card-margin-group: 12px; + --pgn-card-image-vertical-height-max: 140px; + --pgn-card-image-horizontal-width-max: 240px; + --pgn-card-image-overlay-padding: 1.25rem; + --pgn-card-color: null; + --pgn-card-height-base: null; + --pgn-card-cap-color: null; + --pgn-card-border-radius-logo: .25rem; + --pgn-card-border-radius-image: .3125rem; + --pgn-card-spacer-y: .75rem; + --pgn-card-spacer-x: 1.25rem; + --pgn-btn-transition: null; + --pgn-btn-block-spacing-y: .5rem; + --pgn-btn-tertiary-inverse-bg-base: transparent; + --pgn-btn-disabled-opacity: .65; + --pgn-btn-focus-gap: 1px; + --pgn-btn-focus-width: 2px; + --pgn-btn-box-shadow-active: none; + --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); + --pgn-bubble-expandable-padding-x: .25rem; + --pgn-bubble-expandable-padding-y: 0; + --pgn-breadcrumb-border-radius-focus: .125rem; + --pgn-breadcrumb-border-focus-width: .0625rem; + --pgn-breadcrumb-border-focus-axis-x: .25rem; + --pgn-breadcrumb-border-focus-axis-y: .5rem; + --pgn-breadcrumb-margin-left: .5rem; + --pgn-breadcrumb-margin-bottom: 1rem; + --pgn-breadcrumb-padding-item: .5rem; + --pgn-breadcrumb-padding-x: 1rem; + --pgn-breadcrumb-padding-y: .75rem; + --pgn-breadcrumb-font-size: null; + --pgn-badge-transition: none; + --pgn-badge-border-radius-pill: 10rem; + --pgn-badge-border-radius-base: .25rem; + --pgn-badge-padding-y: .125rem; + --pgn-badge-padding-x-pill: .6em; + --pgn-badge-padding-x-base: .5rem; + --pgn-badge-font-size: 75%; + --pgn-avatar-button-padding-left-lg: .25em; + --pgn-avatar-button-padding-left-sm: .25em; + --pgn-avatar-button-padding-left-base: .25em; + --pgn-avatar-size-huge: 18.75rem; + --pgn-avatar-size-xxl: 11.5rem; + --pgn-avatar-size-xl: 6rem; + --pgn-avatar-size-lg: 4rem; + --pgn-avatar-size-sm: 2.25rem; + --pgn-avatar-size-xs: 1.5rem; + --pgn-avatar-size-base: 3rem; + --pgn-avatar-border-radius: 100%; + --pgn-annotation-arrow-border-width: .5rem; + --pgn-annotation-arrow-side-margin: .25rem; + --pgn-annotation-max-width: 18.75rem; + --pgn-annotation-border-radius: .25rem; + --pgn-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) + drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); + --pgn-annotation-padding: .5rem; + --pgn-alert-line-height: 1.5rem; + --pgn-alert-icon-space: .8rem; + --pgn-alert-level-color: 6; + --pgn-alert-level-border: -9; + --pgn-alert-level-bg: -10; + --pgn-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15); + --pgn-alert-font-size: .875rem; + --pgn-alert-border-width: 0; + --pgn-alert-margin-bottom: 1rem; + --pgn-alert-padding-x: 1.5rem; + --pgn-alert-padding-y: 1.5rem; + --pgn-action-row-gap-y: .5rem; + --pgn-action-row-gap-x: .5rem; + --pgn-color-dark-base: #273F2FFF; + --pgn-color-light-base: #E1DDDBFF; + --pgn-color-brand-base: #9D0054FF; + --pgn-color-primary-base: #0A3055FF; + --pgn-color-gray-base: #707070FF; + --pgn-color-gray-900: #212529FF; + --pgn-color-gray-800: #333333FF; + --pgn-color-gray-700: #454545FF; + --pgn-color-gray-600: #5C5C5CFF; + --pgn-color-gray-400: #8F8F8FFF; + --pgn-color-gray-300: #ADADADFF; + --pgn-color-gray-200: #CCCCCCFF; + --pgn-color-gray-100: #EBEBEBFF; + --pgn-color-theme-interval: 8%; + --pgn-color-accent-b: #FFEE88FF; + --pgn-color-accent-a: #00BBF9FF; + --pgn-color-teal: #006DAAFF; + --pgn-color-yellow: #FFD900FF; + --pgn-color-green: #178253FF; + --pgn-color-red: #C32D3AFF; + --pgn-color-blue: #23419FFF; + --pgn-color-black: #000000FF; + --pgn-color-white: #FFFFFFFF; + --pgn-font-weight-base: var(--pgn-font-weight-normal); + --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25); + --pgn-font-size-mobile-h6: var(--pgn-font-size-h6); + --pgn-font-size-mobile-h5: var(--pgn-font-size-h5); + --pgn-font-size-mobile-h4: var(--pgn-font-size-h4); + --pgn-font-size-mobile-h3: var(--pgn-font-size-h3); + --pgn-font-size-mobile-h2: var(--pgn-font-size-h2); + --pgn-font-family-base: var(--pgn-font-family-sans-serif); + --pgn-spacer-5-5: calc(var(--pgn-spacer-base) * 4rem); + --pgn-spacer-4-5: calc(var(--pgn-spacer-base) * 2rem); + --pgn-spacer-3-5: calc(var(--pgn-spacer-base) * 1.25rem); + --pgn-spacer-2-5: calc(var(--pgn-spacer-base) * .75rem); + --pgn-spacer-1-5: calc(var(--pgn-spacer-base) * .375rem); + --pgn-spacer-6: calc(var(--pgn-spacer-base) * 5rem); + --pgn-spacer-5: calc(var(--pgn-spacer-base) * 3rem); + --pgn-spacer-4: calc(var(--pgn-spacer-base) * 1.5rem); + --pgn-spacer-3: var(--pgn-spacer-base); + --pgn-spacer-2: calc(var(--pgn-spacer-base) * .5rem); + --pgn-spacer-1: calc(var(--pgn-spacer-base) * .25rem); + --pgn-display-weight-4: var(--pgn-font-weight-bold); + --pgn-display-weight-3: var(--pgn-font-weight-bold); + --pgn-display-weight-2: var(--pgn-font-weight-bold); + --pgn-display-weight-1: var(--pgn-font-weight-bold); + --pgn-border-color: var(--pgn-color-gray-200); + --pgn-tooltip-arrow-color-light: var(--pgn-color-white); + --pgn-tooltip-border-radius: var(--pgn-border-radius-base); + --pgn-tooltip-bg-light: var(--pgn-color-white); + --pgn-tooltip-bg-base: var(--pgn-color-black); + --pgn-tooltip-color-light: var(--pgn-color-black); + --pgn-tooltip-color-base: var(--pgn-color-white); + --pgn-tooltip-font-size: var(--pgn-font-size-sm); + --pgn-toast-header-color-border: #00000080; + --pgn-toast-header-color-background: var(--pgn-color-gray-700); + --pgn-toast-header-color-base: var(--pgn-color-white); + --pgn-toast-border-color: #0000001A; + --pgn-toast-color-background: var(--pgn-color-gray-700); + --pgn-tabs-notification-font-size: var(--pgn-font-size-xs); + --pgn-spinner-sm-height: var(--pgn-spinner-sm-width); + --pgn-spinner-height: var(--pgn-spinner-width); + --pgn-sheet-skrim-component-box-shadow: #00000026; + --pgn-sheet-skrim-bg: #ADADAD80; + --pgn-search-field-border-color-focus: var(--pgn-color-black); + --pgn-search-field-border-color-interaction: var(--pgn-color-black); + --pgn-scrollable-body-box-shadow: #0000008C; + --pgn-progress-bar-bar-bg-base: var(--pgn-color-accent-a); + --pgn-progress-bar-bar-color: var(--pgn-color-white); + --pgn-progress-bar-font-size: calc(var(--pgn-font-size-base) * .75); + --pgn-product-tour-checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arrow) transparent; + --pgn-product-tour-checkpoint-arrow-color-default: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-color-background); + --pgn-product-tour-checkpoint-arrow-color-top: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-width-border); + --pgn-product-tour-checkpoint-color-box-shadow: #0000004D; + --pgn-product-tour-checkpoint-color-body: var(--pgn-color-gray-700); + --pgn-popover-body-padding-x: var(--pgn-popover-header-padding-x); + --pgn-popover-body-padding-y: var(--pgn-popover-header-padding-y); + --pgn-popover-header-border-darken: #E5E5E5FF; + --pgn-popover-header-bg-darken: #E5E5E5FF; + --pgn-popover-border-width: var(--pgn-border-width); + --pgn-popover-border-radius: var(--pgn-border-radius-sm); + --pgn-popover-font-size: var(--pgn-font-size-sm); + --pgn-pagination-focus-color-text: var(--pgn-color-black); + --pgn-pagination-border-radius-lg: var(--pgn-border-radius-lg); + --pgn-pagination-border-radius-sm: var(--pgn-border-radius-sm); + --pgn-pagination-border-color-disabled: var(--pgn-color-gray-100); + --pgn-pagination-border-color-hover: var(--pgn-color-gray-200); + --pgn-pagination-border-color-base: var(--pgn-color-gray-200); + --pgn-pagination-border-width: var(--pgn-border-width); + --pgn-pagination-bg-disabled: var(--pgn-color-white); + --pgn-pagination-bg-hover: var(--pgn-color-gray-100); + --pgn-pagination-color-inverse: var(--pgn-color-white); + --pgn-navbar-light-toggler-border-color: #0000001A; + --pgn-navbar-light-color-disabled: #0000004D; + --pgn-navbar-light-color-active: #000000E6; + --pgn-navbar-light-color-hover: #000000B3; + --pgn-navbar-dark-toggler-border-color: #FFFFFF1A; + --pgn-navbar-dark-color-disabled: #FFFFFF40; + --pgn-navbar-dark-color-hover: #FFFFFFBF; + --pgn-navbar-toggler-font-size: var(--pgn-font-size-lg); + --pgn-navbar-brand-font-size: var(--pgn-font-size-lg); + --pgn-navbar-nav-link-height: calc(var(--pgn-font-size-base) * var(--pgn-line-height-base) + .5rem * 2); + --pgn-navbar-padding-x-base: var(--pgn-spacer-base); + --pgn-navbar-padding-y: calc(var(--pgn-spacer-base) / 2); + --pgn-nav-color-light: #00000080; + --pgn-nav-color-dark: #FFFFFF80; + --pgn-nav-divider-margin-y: calc(var(--pgn-spacer-base) / 2); + --pgn-nav-divider-color: var(--pgn-color-gray-100); + --pgn-nav-pills-border-radius: var(--pgn-border-radius-base); + --pgn-nav-link-color-disabled: var(--pgn-color-gray-300); + --pgn-nav-link-color-base: var(--pgn-color-gray-700); + --pgn-modal-header-padding-base: var(--pgn-modal-header-padding-y) var(--pgn-modal-header-padding-x); + --pgn-modal-header-border-width: var(--pgn-modal-content-border-width); + --pgn-modal-backdrop-bg: var(--pgn-color-black); + --pgn-modal-content-border-radius: var(--pgn-border-radius-lg); + --pgn-modal-content-border-color: #00000033; + --pgn-modal-title-line-height: var(--pgn-line-height-base); + --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y); + --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base); + --pgn-image-thumbnail-border-color: var(--pgn-color-gray-200); + --pgn-image-thumbnail-border-width: var(--pgn-border-width); + --pgn-icon-button-accent-color: var(--pgn-color-white); + --pgn-icon-button-diameter-inline: calc(var(--pgn-line-height-base) + .1em); + --pgn-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25); + --pgn-blockquote-small-font-size: var(--pgn-font-size-small-base); + --pgn-list-group-action-active-bg: var(--pgn-color-gray-200); + --pgn-list-group-action-color-base: var(--pgn-color-gray-700); + --pgn-list-group-disabled-color: var(--pgn-color-gray-600); + --pgn-list-group-border-radius: var(--pgn-border-radius-base); + --pgn-list-group-border-width: var(--pgn-border-width); + --pgn-list-group-border-color: #00000020; + --pgn-list-group-bg-hover: var(--pgn-color-gray-100); + --pgn-dt-font-weight: var(--pgn-font-weight-bold); + --pgn-input-btn-border-width: var(--pgn-border-width); + --pgn-input-btn-focus-box-shadow: 0 0 0 var(--pgn-input-btn-focus-width) var(--pgn-input-btn-focus-color); + --pgn-input-btn-line-height-lg: var(--pgn-line-height-lg); + --pgn-hr-border-margin-y: var(--pgn-spacer-base); + --pgn-hr-border-width: var(--pgn-border-width); + --pgn-hr-border-color: #0000001A; + --pgn-headings-color: var(--pgn-color-black); + --pgn-headings-font-weight: var(--pgn-font-weight-bold); + --pgn-body-color: var(--pgn-color-gray-700); + --pgn-form-feedback-tooltip-border-radius: var(--pgn-border-radius-base); + --pgn-form-feedback-tooltip-line-height: var(--pgn-line-height-base); + --pgn-form-feedback-tooltip-font-size: var(--pgn-font-size-sm); + --pgn-form-feedback-font-size: var(--pgn-font-size-small-base); + --pgn-form-feedback-margin-top: var(--pgn-form-text-margin-top); + --pgn-form-custom-file-box-shadow-base: var(--pgn-form-input-box-shadow-base); + --pgn-form-custom-range-thumb-box-shadow-focus-width: var(--pgn-form-input-focus-width); + --pgn-form-custom-range-thumb-height: var(--pgn-form-custom-range-thumb-width); + --pgn-form-custom-range-track-bg: var(--pgn-color-gray-300); + --pgn-form-custom-select-border-radius: var(--pgn-border-radius-base); + --pgn-form-custom-select-border-width-focus: var(--pgn-form-input-focus-width); + --pgn-form-custom-select-bg-disabled: var(--pgn-color-gray-100); + --pgn-form-custom-switch-indicator-size: calc(var(--pgn-form-custom-control-indicator-size) - var(--pgn-form-custom-control-indicator-border-width) * 4); + --pgn-form-custom-switch-indicator-border-radius: calc(var(--pgn-form-custom-control-indicator-size) / 2); + --pgn-form-custom-switch-width: calc(var(--pgn-form-custom-control-indicator-size) * 1.75); + --pgn-form-custom-control-indicator-border-color: var(--pgn-color-gray-700); + --pgn-form-custom-control-indicator-box-shadow: var(--pgn-form-input-box-shadow-base); + --pgn-form-input-group-addon-bg: var(--pgn-color-gray-100); + --pgn-form-input-border-radius-sm: var(--pgn-border-radius-sm); + --pgn-form-input-border-radius-lg: var(--pgn-border-radius-lg); + --pgn-form-input-border-radius-base: var(--pgn-border-radius-base); + --pgn-form-input-color-base: var(--pgn-color-gray-700); + --pgn-form-input-bg-disabled: var(--pgn-color-gray-100); + --pgn-form-input-line-height-sm: var(--pgn-input-btn-line-height-sm); + --pgn-form-input-line-height-base: var(--pgn-input-btn-line-height-base); + --pgn-form-input-font-size-lg: var(--pgn-input-btn-font-size-lg); + --pgn-form-input-font-size-sm: var(--pgn-input-btn-font-size-sm); + --pgn-form-input-font-size-base: var(--pgn-input-btn-font-size-base); + --pgn-form-input-font-family: var(--pgn-input-btn-font-family); + --pgn-form-input-padding-x-lg: var(--pgn-input-btn-padding-lg-x); + --pgn-form-input-padding-x-sm: var(--pgn-input-btn-padding-sm-x); + --pgn-form-input-padding-x-base: var(--pgn-input-btn-padding-x); + --pgn-form-input-padding-y-lg: var(--pgn-input-btn-padding-lg-y); + --pgn-form-input-padding-y-sm: var(--pgn-input-btn-padding-sm-y); + --pgn-form-input-padding-y-base: var(--pgn-input-btn-padding-y); + --pgn-dropzone-restriction-msg-font-size: var(--pgn-font-size-small-x); + --pgn-dropdown-link-hover-color: var(--pgn-color-gray-900); + --pgn-dropdown-link-color: var(--pgn-color-gray-900); + --pgn-dropdown-divider-margin-y: calc(var(--pgn-spacer-base) / 2); + --pgn-dropdown-divider-bg: var(--pgn-color-gray-100); + --pgn-dropdown-border-radius-base: var(--pgn-border-radius-base); + --pgn-dropdown-border-width: var(--pgn-border-width); + --pgn-dropdown-border-color: #00000026; + --pgn-dropdown-font-size: var(--pgn-font-size-base); + --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item); + --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); + --pgn-data-table-border: 1px solid var(--pgn-color-gray-200); + --pgn-data-table-background-is-loading: #FFFFFFB3; + --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x); + --pgn-collapsible-card-spacer-y-lg: var(--pgn-card-spacer-y); + --pgn-code-pre-color: var(--pgn-color-gray-900); + --pgn-code-kbd-bg: var(--pgn-color-gray-700); + --pgn-code-kbd-color: var(--pgn-color-white); + --pgn-code-kbd-nested-font-weight: var(--pgn-font-weight-bold); + --pgn-code-kbd-font-size: var(--pgn-code-font-size); + --pgn-close-button-text-shadow: 0 1px 0 var(--pgn-color-white); + --pgn-close-button-color: var(--pgn-color-black); + --pgn-close-button-font-weight: var(--pgn-font-weight-bold); + --pgn-close-button-font-size: calc(var(--pgn-font-size-base) * 1.5); + --pgn-carousel-caption-color: var(--pgn-color-white); + --pgn-carousel-indicator-active-bg: var(--pgn-color-white); + --pgn-card-footer-text-font-size: var(--pgn-font-size-small-x); + --pgn-card-divider-margin-y: var(--pgn-card-spacer-y); + --pgn-card-columns-margin: var(--pgn-card-spacer-y); + --pgn-card-margin-grid: var(--pgn-card-margin-group); + --pgn-card-margin-deck: var(--pgn-card-margin-group); + --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max); + --pgn-card-cap-bg: #00000008; + --pgn-card-border-color-focus: #00000080; + --pgn-card-border-color-base: #00000020; + --pgn-card-border-radius-base: var(--pgn-border-radius-base); + --pgn-card-border-width: var(--pgn-border-width); + --pgn-btn-tertiary-inverse-bg-hover: #FFFFFF1A; + --pgn-btn-tertiary-inverse-color: var(--pgn-color-white); + --pgn-btn-tertiary-color: var(--pgn-color-gray-700); + --pgn-btn-border-radius-sm: var(--pgn-border-radius-sm); + --pgn-btn-border-radius-lg: var(--pgn-border-radius-lg); + --pgn-btn-border-radius-base: var(--pgn-border-radius-base); + --pgn-btn-line-height-sm: var(--pgn-input-btn-line-height-sm); + --pgn-btn-line-height-base: var(--pgn-input-btn-line-height-base); + --pgn-btn-font-weight: var(--pgn-font-weight-normal); + --pgn-btn-font-size-lg: var(--pgn-input-btn-font-size-lg); + --pgn-btn-font-size-sm: var(--pgn-input-btn-font-size-sm); + --pgn-btn-font-size-base: var(--pgn-input-btn-font-size-base); + --pgn-btn-font-family: var(--pgn-input-btn-font-family); + --pgn-btn-padding-x-sm: var(--pgn-input-btn-padding-sm-x); + --pgn-btn-padding-x-lg: var(--pgn-input-btn-padding-lg-x); + --pgn-btn-padding-x-base: var(--pgn-input-btn-padding-x); + --pgn-btn-padding-y-sm: var(--pgn-input-btn-padding-sm-y); + --pgn-btn-padding-y-lg: var(--pgn-input-btn-padding-lg-y); + --pgn-btn-padding-y-base: var(--pgn-input-btn-padding-y); + --pgn-breadcrumb-inverse-color: var(--pgn-color-white); + --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600); + --pgn-breadcrumb-bg: var(--pgn-color-gray-200); + --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base); + --pgn-badge-focus-width: var(--pgn-input-btn-focus-width); + --pgn-badge-font-weight: var(--pgn-font-weight-bold); + --pgn-annotation-line-height: var(--pgn-line-height-sm); + --pgn-annotation-font-size: var(--pgn-font-size-sm); + --pgn-alert-color-content: var(--pgn-color-gray-700); + --pgn-alert-color-title: var(--pgn-color-black); + --pgn-alert-font-weight-link: var(--pgn-font-weight-normal); + --pgn-alert-border-radius: var(--pgn-border-radius-base); + --pgn-color-dark-900: #1B2C21FF; + --pgn-color-dark-800: #1D2F23FF; + --pgn-color-dark-700: #1F3226FF; + --pgn-color-dark-600: #23392AFF; + --pgn-color-dark-500: var(--pgn-color-dark-base); + --pgn-color-dark-400: #5D6F63FF; + --pgn-color-dark-300: #939F97FF; + --pgn-color-dark-200: #C9CFCBFF; + --pgn-color-dark-100: #F2F3F3FF; + --pgn-color-light-900: #9E9B99FF; + --pgn-color-light-800: #A9A6A4FF; + --pgn-color-light-700: #B4B1AFFF; + --pgn-color-light-600: #CBC7C5FF; + --pgn-color-light-500: var(--pgn-color-light-base); + --pgn-color-light-400: #E9E6E4FF; + --pgn-color-light-300: #F0EEEDFF; + --pgn-color-light-200: #F8F7F6FF; + --pgn-color-light-100: #FDFDFDFF; + --pgn-color-danger-base: var(--pgn-color-red); + --pgn-color-warning-base: var(--pgn-color-yellow); + --pgn-color-info-base: var(--pgn-color-teal); + --pgn-color-success-base: var(--pgn-color-green); + --pgn-color-brand-900: #6E003BFF; + --pgn-color-brand-800: #76003FFF; + --pgn-color-brand-700: #7E0043FF; + --pgn-color-brand-600: #8D004CFF; + --pgn-color-brand-500: var(--pgn-color-brand-base); + --pgn-color-brand-400: #B6407FFF; + --pgn-color-brand-300: #CE80AAFF; + --pgn-color-brand-200: #E7BFD4FF; + --pgn-color-brand-100: #F9F0F5FF; + --pgn-color-secondary-base: var(--pgn-color-gray-700); + --pgn-color-primary-900: #07223CFF; + --pgn-color-primary-800: #082440FF; + --pgn-color-primary-700: #082644FF; + --pgn-color-primary-600: #092B4DFF; + --pgn-color-primary-500: var(--pgn-color-primary-base); + --pgn-color-primary-400: #476480FF; + --pgn-color-primary-300: #8598AAFF; + --pgn-color-primary-200: #C2CBD5FF; + --pgn-color-primary-100: #F0F3F5FF; + --pgn-color-gray-500: var(--pgn-color-gray-base); + --pgn-color-active: var(--pgn-color-white); + --pgn-color-background-base: var(--pgn-color-white); + --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base); + --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); + --pgn-search-field-button-variants-dark: var(--pgn-color-brand-500); + --pgn-search-field-button-variants-light: var(--pgn-color-primary-500); + --pgn-search-field-border-color-base: var(--pgn-color-gray-500); + --pgn-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500); + --pgn-progress-bar-border-color: var(--pgn-color-gray-500); + --pgn-product-tour-checkpoint-color-breadcrumb: var(--pgn-color-primary-500); + --pgn-product-tour-checkpoint-color-border: var(--pgn-color-brand-500); + --pgn-product-tour-checkpoint-color-background: var(--pgn-color-light-300); + --pgn-popover-body-color: var(--pgn-body-color); + --pgn-popover-header-color: var(--pgn-headings-color); + --pgn-popover-bg: var(--pgn-color-background-base); + --pgn-pagination-focus-color-base: var(--pgn-color-primary-500); + --pgn-pagination-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow); + --pgn-pagination-bg-base: var(--pgn-color-background-base); + --pgn-pagination-color-active: var(--pgn-color-active); + --pgn-navbar-light-brand-color-hover: var(--pgn-navbar-light-color-active); + --pgn-navbar-light-brand-color-base: var(--pgn-navbar-light-color-active); + --pgn-navbar-dark-color-active: var(--pgn-color-active); + --pgn-navbar-toggler-border-radius: var(--pgn-btn-border-radius-base); + --pgn-navbar-brand-padding-y: calc((var(--pgn-navbar-nav-link-height) - var(--pgn-navbar-brand-height)) / 2); + --pgn-navbar-brand-height: calc(var(--pgn-navbar-brand-font-size) * var(--pgn-line-height-base)); + --pgn-nav-pills-link-link-active-color: var(--pgn-color-active); + --pgn-nav-tabs-link-active-color-border: transparent transparent var(--pgn-color-primary-500); + --pgn-nav-tabs-link-active-color-base: var(--pgn-color-primary-500); + --pgn-nav-tabs-link-hover-bg: var(--pgn-color-light-400); + --pgn-nav-tabs-border-color: var(--pgn-color-light-400); + --pgn-modal-header-border-color: var(--pgn-border-color); + --pgn-modal-content-bg: var(--pgn-color-background-base); + --pgn-modal-footer-border-width: var(--pgn-modal-header-border-width); + --pgn-image-figure-caption-color: var(--pgn-color-gray-500); + --pgn-text-muted: var(--pgn-color-gray-500); + --pgn-list-group-action-active-color: var(--pgn-body-color); + --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base); + --pgn-list-group-active-color-base: var(--pgn-color-active); + --pgn-list-group-bg-base: var(--pgn-color-background-base); + --pgn-link-brand-inline-color: var(--pgn-color-brand-500); + --pgn-link-brand-color: var(--pgn-color-brand-500); + --pgn-link-muted-inline-color: var(--pgn-color-primary-500); + --pgn-link-muted-color: var(--pgn-color-primary-500); + --pgn-body-bg: var(--pgn-color-background-base); + --pgn-form-custom-file-button-bg: var(--pgn-form-input-group-addon-bg); + --pgn-form-custom-file-color: var(--pgn-form-input-color-base); + --pgn-form-custom-file-font-family: var(--pgn-form-input-font-family); + --pgn-form-custom-file-line-height: var(--pgn-form-input-line-height-base); + --pgn-form-custom-file-padding-x: var(--pgn-form-input-padding-x-base); + --pgn-form-custom-file-padding-y: var(--pgn-form-input-padding-y-base); + --pgn-form-custom-file-bg-disabled: var(--pgn-form-input-bg-disabled); + --pgn-form-custom-file-border-color-radius: var(--pgn-form-input-border-radius-base); + --pgn-form-custom-select-border-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow); + --pgn-form-custom-select-color-base: var(--pgn-form-input-color-base); + --pgn-form-custom-select-line-height: var(--pgn-form-input-line-height-base); + --pgn-form-custom-select-font-size-lg: var(--pgn-form-input-font-size-lg); + --pgn-form-custom-select-font-size-sm: var(--pgn-form-input-font-size-sm); + --pgn-form-custom-select-font-size-base: var(--pgn-form-input-font-size-base); + --pgn-form-custom-select-font-family: var(--pgn-form-input-font-family); + --pgn-form-custom-select-padding-x-lg: var(--pgn-form-input-padding-x-lg); + --pgn-form-custom-select-padding-x-sm: var(--pgn-form-input-padding-x-sm); + --pgn-form-custom-select-padding-x-base: var(--pgn-form-input-padding-x-base); + --pgn-form-custom-select-padding-y-lg: var(--pgn-form-input-padding-y-lg); + --pgn-form-custom-select-padding-y-sm: var(--pgn-form-input-padding-y-sm); + --pgn-form-custom-select-padding-y-base: var(--pgn-form-input-padding-y-base); + --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-color-primary-500); + --pgn-form-custom-control-indicator-checked-bg-disabled: #0A305580; + --pgn-form-custom-control-indicator-disabled-bg: var(--pgn-form-input-bg-disabled); + --pgn-form-input-group-addon-color-base: var(--pgn-form-input-color-base); + --pgn-form-input-height-inner-quarter: calc(var(--pgn-form-input-line-height-base) * .25em + calc(var(--pgn-form-input-padding-y-base) / 2)); + --pgn-form-input-height-inner-half: calc(var(--pgn-form-input-line-height-base) * .5em + var(--pgn-form-input-padding-y-base)); + --pgn-form-input-height-inner-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); + --pgn-form-input-height-sm: calc(var(--pgn-form-input-line-height-sm) * 1em + var(--pgn-input-btn-padding-sm-y) * 2 + var(--pgn-form-input-border-height)); + --pgn-form-input-height-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2 + var(--pgn-form-input-border-height)); + --pgn-form-input-focus-color-base: var(--pgn-form-input-color-base); + --pgn-form-input-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow); + --pgn-form-input-border-width: var(--pgn-input-btn-border-width); + --pgn-form-input-border-color: var(--pgn-color-gray-500); + --pgn-form-input-color-plaintext: var(--pgn-body-color); + --pgn-form-input-color-placeholder: var(--pgn-color-gray-500); + --pgn-form-input-bg-base: var(--pgn-color-background-base); + --pgn-form-input-line-height-lg: var(--pgn-input-btn-line-height-lg); + --pgn-form-input-font-weight: var(--pgn-font-weight-base); + --pgn-dropzone-restriction-msg-color: var(--pgn-color-gray-500); + --pgn-dropzone-border-active: 2px solid var(--pgn-color-primary-500); + --pgn-dropzone-border-default: 1px dashed var(--pgn-color-gray-500); + --pgn-dropdown-link-active-color: var(--pgn-color-active); + --pgn-dropdown-link-hover-bg: var(--pgn-color-light-300); + --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width)); + --pgn-dropdown-bg: var(--pgn-color-background-base); + --pgn-dropdown-color-header: var(--pgn-color-gray-500); + --pgn-dropdown-color-base: var(--pgn-body-color); + --pgn-data-table-background-color: var(--pgn-color-background-base); + --pgn-card-divider-bg: var(--pgn-color-light-400); + --pgn-card-bg: var(--pgn-color-background-base); + --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); + --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); + --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); + --pgn-btn-border-width: var(--pgn-input-btn-border-width); + --pgn-btn-line-height-lg: var(--pgn-input-btn-line-height-lg); + --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700); + --pgn-breadcrumb-inverse-active: var(--pgn-color-light-500); + --pgn-breadcrumb-color-active: var(--pgn-color-gray-500); + --pgn-breadcrumb-color-base: var(--pgn-color-primary-500); + --pgn-avatar-border-base: solid 1px var(--pgn-color-light-300); + --pgn-alert-actions-gap: var(--pgn-spacer-3); + --pgn-color-danger-900: #892029FF; + --pgn-color-danger-800: #92222CFF; + --pgn-color-danger-700: #9C242EFF; + --pgn-color-danger-600: #B02934FF; + --pgn-color-danger-500: var(--pgn-color-danger-base); + --pgn-color-danger-400: #D2626BFF; + --pgn-color-danger-300: #E1969DFF; + --pgn-color-danger-200: #F0CBCEFF; + --pgn-color-danger-100: #FBF2F3FF; + --pgn-color-warning-900: #B39800FF; + --pgn-color-warning-800: #BFA300FF; + --pgn-color-warning-700: #CCAE00FF; + --pgn-color-warning-600: #E6C300FF; + --pgn-color-warning-500: var(--pgn-color-warning-base); + --pgn-color-warning-400: #FFE340FF; + --pgn-color-warning-300: #FFEC80FF; + --pgn-color-warning-200: #FFF6BFFF; + --pgn-color-warning-100: #FFFDF0FF; + --pgn-color-info-900: #004C77FF; + --pgn-color-info-800: #005280FF; + --pgn-color-info-700: #005788FF; + --pgn-color-info-600: #006299FF; + --pgn-color-info-500: var(--pgn-color-info-base); + --pgn-color-info-400: #4092BFFF; + --pgn-color-info-300: #80B6D5FF; + --pgn-color-info-200: #BFDBEAFF; + --pgn-color-info-100: #F0F6FAFF; + --pgn-color-success-900: #105B3AFF; + --pgn-color-success-800: #11623EFF; + --pgn-color-success-700: #126842FF; + --pgn-color-success-600: #15754BFF; + --pgn-color-success-500: var(--pgn-color-success-base); + --pgn-color-success-400: #51A17EFF; + --pgn-color-success-300: #8BC1A9FF; + --pgn-color-success-200: #C5E0D4FF; + --pgn-color-success-100: #F1F8F5FF; + --pgn-color-secondary-900: #303030FF; + --pgn-color-secondary-800: #343434FF; + --pgn-color-secondary-700: #373737FF; + --pgn-color-secondary-600: #3E3E3EFF; + --pgn-color-secondary-500: var(--pgn-color-secondary-base); + --pgn-color-secondary-400: #747474FF; + --pgn-color-secondary-300: #A2A2A2FF; + --pgn-color-secondary-200: #D1D1D1FF; + --pgn-color-secondary-100: #F4F4F4FF; + --pgn-color-input-focus: var(--pgn-color-primary-500); + --pgn-color-disabled: var(--pgn-color-gray-500); + --pgn-color-background-active: var(--pgn-color-primary-500); + --pgn-popover-danger-icon-color: var(--pgn-color-warning-500); + --pgn-popover-danger-bg: var(--pgn-color-danger-100); + --pgn-popover-warning-icon-color: var(--pgn-color-warning-500); + --pgn-popover-warning-bg: var(--pgn-color-warning-100); + --pgn-popover-success-icon-color: var(--pgn-color-success-500); + --pgn-popover-success-bg: var(--pgn-color-success-100); + --pgn-popover-arrow-color: var(--pgn-popover-bg); + --pgn-pagination-bg-active: var(--pgn-color-background-active); + --pgn-pagination-color-disabled: var(--pgn-color-disabled); + --pgn-navbar-dark-brand-color-hover: var(--pgn-navbar-dark-color-active); + --pgn-navbar-dark-brand-color-base: var(--pgn-navbar-dark-color-active); + --pgn-nav-pills-link-link-active-bg: var(--pgn-color-background-active); + --pgn-nav-tabs-link-active-bg: var(--pgn-body-bg); + --pgn-nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color); + --pgn-modal-footer-border-color: var(--pgn-modal-header-border-color); + --pgn-menu-background-active: var(--pgn-btn-tertiary-bg-active); + --pgn-image-thumbnail-bg: var(--pgn-body-bg); + --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); + --pgn-list-group-active-bg: var(--pgn-color-background-active); + --pgn-link-brand-inline-hover-color: #95004EFF; + --pgn-link-brand-inline-decoration-color: #9D00544D; + --pgn-link-brand-hover-color: #95004EFF; + --pgn-link-muted-inline-hover-color: #002A4FFF; + --pgn-link-muted-inline-decoration-color: #0A30554D; + --pgn-link-muted-hover-color: #002A4FFF; + --pgn-input-btn-focus-color: var(--pgn-color-input-focus); + --pgn-form-custom-file-button-color: var(--pgn-form-custom-file-color); + --pgn-form-custom-file-font-weight: var(--pgn-form-input-font-weight); + --pgn-form-custom-file-bg-base: var(--pgn-form-input-bg-base); + --pgn-form-custom-file-box-shadow-focus: var(--pgn-form-input-box-shadow-focus); + --pgn-form-custom-file-border-width: var(--pgn-form-input-border-width); + --pgn-form-custom-file-border-color-base: var(--pgn-form-input-border-color); + --pgn-form-custom-file-height-inner: var(--pgn-form-input-height-inner-base); + --pgn-form-custom-file-height-base: var(--pgn-form-input-height-base); + --pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px var(--pgn-body-bg), var(--pgn-form-input-box-shadow-focus); + --pgn-form-custom-range-thumb-bg-active: #1F3E64FF; + --pgn-form-custom-range-thumb-bg-disabled: var(--pgn-color-disabled); + --pgn-form-custom-range-thumb-bg-base: var(--pgn-color-background-active); + --pgn-form-custom-select-height-sm: var(--pgn-form-input-height-sm); + --pgn-form-custom-select-border-color-base: var(--pgn-form-input-border-color); + --pgn-form-custom-select-border-width-base: var(--pgn-form-input-border-width); + --pgn-form-custom-select-feedback-icon-size: var(--pgn-form-input-height-inner-half) var(--pgn-form-input-height-inner-half); + --pgn-form-custom-select-feedback-icon-position: center right calc(var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding)); + --pgn-form-custom-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-form-custom-select-padding-y-base)) * 3 / 4 + var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding)); + --pgn-form-custom-select-bg-base: var(--pgn-form-input-bg-base); + --pgn-form-custom-select-color-disabled: var(--pgn-color-disabled); + --pgn-form-custom-select-font-weight: var(--pgn-form-input-font-weight); + --pgn-form-custom-select-font-height-base: var(--pgn-form-input-height-base); + --pgn-form-custom-checkbox-indicator-indeterminate-bg: var(--pgn-color-background-active); + --pgn-form-custom-control-label-floating-text: #FFFFFF1A; + --pgn-form-custom-control-label-color-disabled: var(--pgn-color-disabled); + --pgn-form-custom-control-indicator-bg-base: var(--pgn-form-input-bg-base); + --pgn-form-input-group-addon-color-border: var(--pgn-form-input-border-color); + --pgn-form-input-height-lg: calc(var(--pgn-form-input-line-height-lg) * 1em + var(--pgn-input-btn-padding-lg-y) * 2 + var(--pgn-form-input-border-height)); + --pgn-form-input-focus-color-border: var(--pgn-color-input-focus); + --pgn-form-input-focus-bg: var(--pgn-form-input-bg-base); + --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2); + --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500); + --pgn-dropzone-border-error: 2px solid var(--pgn-color-danger-300); + --pgn-dropzone-border-focus: 2px solid var(--pgn-color-info-300); + --pgn-dropzone-border-hover: 2px solid var(--pgn-color-info-300); + --pgn-dropdown-link-disabled-color: var(--pgn-color-disabled); + --pgn-dropdown-link-active-bg: var(--pgn-color-background-active); + --pgn-btn-disabled-link-color: var(--pgn-color-disabled); + --pgn-color-link: var(--pgn-color-info-500); + --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active); + --pgn-pagination-color-base: var(--pgn-color-link); + --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); + --pgn-link-brand-inline-hover-decoration-color: var(--pgn-link-brand-inline-hover-color); + --pgn-link-muted-inline-hover-decoration-color: var(--pgn-link-muted-inline-hover-color); + --pgn-link-inline-color: var(--pgn-color-link); + --pgn-link-hover-color: #0066A3FF; + --pgn-link-color: var(--pgn-color-link); + --pgn-form-custom-file-border-color-focus: var(--pgn-form-input-focus-color-border); + --pgn-form-custom-select-border-color-focus: var(--pgn-form-input-focus-color-border); + --pgn-form-custom-select-font-height-lg: var(--pgn-form-input-height-lg); + --pgn-form-custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg); + --pgn-form-custom-control-indicator-checked-border-color-focus: var(--pgn-form-input-focus-color-border); + --pgn-pagination-color-hover: var(--pgn-link-hover-color); + --pgn-link-inline-hover-color: #0066A3FF; + --pgn-link-inline-decoration-color: #006DAA4D; + --pgn-link-inline-hover-decoration-color: var(--pgn-link-inline-hover-color); +} diff --git a/src/ActionRow/_variables.scss b/src/ActionRow/_variables.scss index 37b2d3913d..65e304d57a 100644 --- a/src/ActionRow/_variables.scss +++ b/src/ActionRow/_variables.scss @@ -1,2 +1,2 @@ -$action-row-gap-x: .5rem !default; -$action-row-gap-y: .5rem !default; +$action-row-gap-x: var(--pgn-action-row-gap-x) !default; +$action-row-gap-y: var(--pgn-action-row-gap-y) !default; diff --git a/src/Alert/Alert.scss b/src/Alert/Alert.scss index c17ad75a07..fc1e4cc38f 100644 --- a/src/Alert/Alert.scss +++ b/src/Alert/Alert.scss @@ -68,7 +68,7 @@ // Baking in $close-font-size: $font-size-base * 1.5 !default; to avoid any dependency .alert-dismissible { - padding-right: ($font-size-base * 1.5) + $alert-padding-x * 2; + padding-right: calc(($font-size-base * 1.5) + $alert-padding-x * 2); // Adjust close link position .close { diff --git a/src/Alert/_variables.scss b/src/Alert/_variables.scss index 493a06fece..c6dd2eaa54 100644 --- a/src/Alert/_variables.scss +++ b/src/Alert/_variables.scss @@ -2,23 +2,23 @@ // // Define alert colors, border radius, and padding. -$alert-padding-y: 1.5rem !default; -$alert-padding-x: 1.5rem !default; -$alert-margin-bottom: 1rem !default; -$alert-border-radius: $border-radius !default; -$alert-link-font-weight: $font-weight-normal !default; -$alert-border-width: 0 !default; -$alert-title-color: #000000 !default; -$alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default; +$alert-padding-y: var(--pgn-alert-padding-y) !default; +$alert-padding-x: var(--pgn-alert-padding-x) !default; +$alert-margin-bottom: var(--pgn-alert-margin-bottom) !default; +$alert-border-radius: var(--pgn-alert-border-radius) !default; +$alert-link-font-weight: var(--pgn-alert-font-weight-link) !default; +$alert-border-width: var(--pgn-alert-border-width) !default; +$alert-title-color: var(--pgn-alert-color-title) !default; +$alert-box-shadow: var(--pgn-alert-box-shadow) !default; -$alert-bg-level: -10 !default; -$alert-border-level: -9 !default; -$alert-color-level: 6 !default; +$alert-bg-level: var(--pgn-alert-level-bg) !default; +$alert-border-level: var(--pgn-alert-level-border) !default; +$alert-color-level: var(--pgn-alert-level-color) !default; -$alert-icon-space: .8rem !default; +$alert-icon-space: var(--pgn-alert-icon-space) !default; -$alert-font-size: .875rem !default; -$alert-line-height: 1.5rem !default; -$alert-content-color: $gray-700 !default; +$alert-font-size: var(--pgn-alert-font-size) !default; +$alert-line-height: var(--pgn-alert-line-height) !default; +$alert-content-color: var(--pgn-alert-color-content) !default; -$alert-actions-gap: map-get($spacers, 3); +$alert-actions-gap: var(--pgn-alert-actions-gap) !default; diff --git a/src/Annotation/Annotation.scss b/src/Annotation/Annotation.scss index bdfefa7136..ba8cd74635 100644 --- a/src/Annotation/Annotation.scss +++ b/src/Annotation/Annotation.scss @@ -1,50 +1,54 @@ @import "variables"; -@mixin triangle($color, $direction) { +@mixin triangle($triangle-color, $triangle-direction) { + content: ""; height: 0; width: 0; position: absolute; - content: ""; border: solid transparent; - @if $direction == top { - border-bottom-color: $color; + @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: -$annotation-arrow-border-width; + top: calc(#{$annotation-arrow-border-width} * -1); margin: 0 auto; } - @else if $direction == right { - border-left-color: $color; - border-width: $annotation-arrow-border-width 0 $annotation-arrow-border-width $annotation-arrow-border-width; + @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: -$annotation-arrow-border-width; + right: calc(#{$annotation-arrow-border-width} * -1); margin: auto 0; } - @else if $direction == bottom { - border-top-color: $color; + @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: -$annotation-arrow-border-width; + bottom: calc(#{$annotation-arrow-border-width} * -1); margin: 0 auto; } - @else if $direction == left { - border-right-color: $color; - border-width: $annotation-arrow-border-width $annotation-arrow-border-width $annotation-arrow-border-width 0; + @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: -$annotation-arrow-border-width; + left: calc(#{$annotation-arrow-border-width} * -1); margin: auto 0; } @else { - @error "Unknown direction #{$direction}."; + @error "Unknown direction #{$triangle-direction}."; } } @@ -70,17 +74,17 @@ $arrow-directions: top, right, bottom, left; color: map-get($colors, "color"); // set additional margin to arrow side of the Annotation - margin-#{$direction}: $annotation-arrow-border-width + $annotation-arrow-side-margin; + margin-#{$direction}: calc($annotation-arrow-border-width + $annotation-arrow-side-margin); [dir="rtl"] & { @if $direction == left { margin-left: 0; - margin-right: $annotation-arrow-border-width + $annotation-arrow-side-margin; + margin-right: calc($annotation-arrow-border-width + $annotation-arrow-side-margin); } @else if $direction == right { margin-right: 0; - margin-left: $annotation-arrow-border-width + $annotation-arrow-side-margin; + margin-left: calc($annotation-arrow-border-width + $annotation-arrow-side-margin); } } @@ -90,7 +94,7 @@ $arrow-directions: top, right, bottom, left; [dir="rtl"] & { @if $direction == left { left: initial; - right: -$annotation-arrow-border-width; + right: calc(#{$annotation-arrow-border-width} * -1); border-width: $annotation-arrow-border-width 0 $annotation-arrow-border-width $annotation-arrow-border-width; @@ -99,7 +103,7 @@ $arrow-directions: top, right, bottom, left; @else if $direction == right { right: initial; - left: -$annotation-arrow-border-width; + left: calc(#{$annotation-arrow-border-width} * -1); border-width: $annotation-arrow-border-width $annotation-arrow-border-width $annotation-arrow-border-width 0; diff --git a/src/Annotation/_variables.scss b/src/Annotation/_variables.scss index dfe1de4e58..79aff6604f 100644 --- a/src/Annotation/_variables.scss +++ b/src/Annotation/_variables.scss @@ -1,18 +1,17 @@ -$annotation-padding: .5rem !default; -$annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) - drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default; -$annotation-border-radius: .25rem !default; -$annotation-max-width: 18.75rem !default; -$annotation-font-size: $font-size-sm !default; -$annotation-line-height: $line-height-sm !default; +$annotation-padding: var(--pgn-annotation-padding) !default; +$annotation-box-shadow: var(--pgn-annotation-box-shadow) !default; +$annotation-border-radius: var(--pgn-annotation-border-radius) !default; +$annotation-max-width: var(--pgn-annotation-max-width) !default; +$annotation-font-size: var(--pgn-annotation-font-size) !default; +$annotation-line-height: var(--pgn-annotation-line-height) !default; $annotation-variants: ( - "success": ( "background-color": $success, "color": $white ), - "warning": ( "background-color": $accent-b, "color": $black ), - "error": ( "background-color": $danger, "color": $white ), - "light": ( "background-color": $white, "color": $primary-500 ), - "dark": ( "background-color": $dark, "color": $white ), + "success": ( "background-color": var(--pgn-color-success-base), "color": var(--pgn-color-white) ), + "warning": ( "background-color": var(--pgn-color-accent-b), "color": var(--pgn-color-black) ), + "error": ( "background-color": var(--pgn-color-danger-base), "color": var(--pgn-color-white) ), + "light": ( "background-color": var(--pgn-color-white), "color": var(--pgn-color-primary-500) ), + "dark": ( "background-color": var(--pgn-color-dark-base), "color": var(--pgn-color-white) ), ) !default; -$annotation-arrow-side-margin: .25rem !default; -$annotation-arrow-border-width: .5rem !default; +$annotation-arrow-side-margin: var(--pgn-annotation-arrow-side-margin) !default; +$annotation-arrow-border-width: var(--pgn-annotation-arrow-border-width) !default; diff --git a/src/Avatar/_variables.scss b/src/Avatar/_variables.scss index 1d38482cab..e8a3f3a8f2 100644 --- a/src/Avatar/_variables.scss +++ b/src/Avatar/_variables.scss @@ -1,10 +1,10 @@ -$avatar-border-radius: 100% !default; -$avatar-border: solid 1px $light-300 !default; +$avatar-border-radius: var(--pgn-avatar-border-radius) !default; +$avatar-border: var(--pgn-avatar-border-base) !default; -$avatar-size-xs: 1.5rem !default; -$avatar-size-sm: 2.25rem !default; -$avatar-size: 3rem !default; -$avatar-size-lg: 4rem !default; -$avatar-size-xl: 6rem !default; -$avatar-size-xxl: 11.5rem !default; -$avatar-size-huge: 18.75rem !default; +$avatar-size-xs: var(--pgn-avatar-size-xs) !default; +$avatar-size-sm: var(--pgn-avatar-size-sm) !default; +$avatar-size: var(--pgn-avatar-size-base) !default; +$avatar-size-lg: var(--pgn-avatar-size-lg) !default; +$avatar-size-xl: var(--pgn-avatar-size-xl) !default; +$avatar-size-xxl: var(--pgn-avatar-size-xxl) !default; +$avatar-size-huge: var(--pgn-avatar-size-huge) !default; diff --git a/src/AvatarButton/_variables.scss b/src/AvatarButton/_variables.scss index cf568ae127..21bc685e14 100644 --- a/src/AvatarButton/_variables.scss +++ b/src/AvatarButton/_variables.scss @@ -1,3 +1,3 @@ -$avatar-button-padding-left: .25em !default; -$avatar-button-padding-left-sm: .25em !default; -$avatar-button-padding-left-lg: .25em !default; +$avatar-button-padding-left: var(--pgn-avatar-button-padding-left-base) !default; +$avatar-button-padding-left-sm: var(--pgn-avatar-button-padding-left-sm) !default; +$avatar-button-padding-left-lg: var(--pgn-avatar-button-padding-left-lg) !default; diff --git a/src/Badge/Badge.scss b/src/Badge/Badge.scss index c019627d0e..7f352e8457 100644 --- a/src/Badge/Badge.scss +++ b/src/Badge/Badge.scss @@ -1,2 +1,2 @@ @import "variables"; -@import "~bootstrap/scss/badge"; +@import "badge-bootstrap"; diff --git a/src/Badge/_variables.scss b/src/Badge/_variables.scss index 6067ea7d8a..50dd068450 100644 --- a/src/Badge/_variables.scss +++ b/src/Badge/_variables.scss @@ -1,16 +1,16 @@ // Badges -$badge-font-size: 75% !default; -$badge-font-weight: $font-weight-bold !default; -$badge-padding-y: .125rem !default; -$badge-padding-x: .5rem !default; -$badge-border-radius: .25rem !default; +$badge-font-size: var(--pgn-badge-font-size) !default; +$badge-font-weight: var(--pgn-badge-font-weight) !default; +$badge-padding-y: var(--pgn-badge-padding-y) !default; +$badge-padding-x: var(--pgn-badge-padding-x-base) !default; +$badge-border-radius: var(--pgn-badge-border-radius-base) !default; -$badge-transition: none !default; -$badge-focus-width: $input-btn-focus-width !default; +$badge-transition: var(--pgn-badge-transition) !default; +$badge-focus-width: var(--pgn-badge-focus-width) !default; -$badge-pill-padding-x: .6em !default; +$badge-pill-padding-x: var(--pgn-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: 10rem !default; +$badge-pill-border-radius: var(--pgn-badge-border-radius-pill) !default; diff --git a/src/Badge/badge-bootstrap.scss b/src/Badge/badge-bootstrap.scss new file mode 100644 index 0000000000..e88a094bc1 --- /dev/null +++ b/src/Badge/badge-bootstrap.scss @@ -0,0 +1,43 @@ +.badge { + display: inline-block; + padding: $badge-padding-y $badge-padding-x; + + @include font-size($badge-font-size); + + font-weight: $badge-font-weight; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + + @include border-radius($badge-border-radius); + @include transition($badge-transition); + + @at-root a#{&} { + @include hover-focus() { + text-decoration: none; + } + } + + &:empty { + display: none; + } +} + +.btn .badge { + position: relative; + top: -1px; +} + +.badge-pill { + padding-right: $badge-pill-padding-x; + padding-left: $badge-pill-padding-x; + + @include border-radius($badge-pill-border-radius); +} + +@each $color, $value in $theme-colors { + .badge-#{$color} { + @include badge-variant($value); + } +} diff --git a/src/Breadcrumb/Breadcrumb.scss b/src/Breadcrumb/Breadcrumb.scss index 2466a631c2..7a301d4d7d 100644 --- a/src/Breadcrumb/Breadcrumb.scss +++ b/src/Breadcrumb/Breadcrumb.scss @@ -19,10 +19,10 @@ &:focus::before { content: ""; position: absolute; - top: -$breadcrumb-border-focus-axis-y; - right: -$breadcrumb-border-focus-axis-x; - bottom: -$breadcrumb-border-focus-axis-y; - left: -$breadcrumb-border-focus-axis-x; + 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; } diff --git a/src/Breadcrumb/_variables.scss b/src/Breadcrumb/_variables.scss index 955751b0d7..0672dfd8df 100644 --- a/src/Breadcrumb/_variables.scss +++ b/src/Breadcrumb/_variables.scss @@ -1,27 +1,27 @@ // Breadcrumbs -$breadcrumb-font-size: null !default; +$breadcrumb-font-size: var(--pgn-breadcrumb-font-size) !default; -$breadcrumb-padding-y: .75rem !default; -$breadcrumb-padding-x: 1rem !default; -$breadcrumb-item-padding: .5rem !default; +$breadcrumb-padding-y: var(--pgn-breadcrumb-padding-y) !default; +$breadcrumb-padding-x: var(--pgn-breadcrumb-padding-x) !default; +$breadcrumb-item-padding: var(--pgn-breadcrumb-padding-item) !default; -$breadcrumb-margin-bottom: 1rem !default; -$breadcrumb-margin-left: .5rem !default; +$breadcrumb-margin-bottom: var(--pgn-breadcrumb-margin-bottom) !default; +$breadcrumb-margin-left: var(--pgn-breadcrumb-margin-left) !default; -$breadcrumb-border-focus-axis-x: .25rem !default; -$breadcrumb-border-focus-axis-y: .5rem !default; +$breadcrumb-border-focus-axis-x: var(--pgn-breadcrumb-border-focus-axis-x) !default; +$breadcrumb-border-focus-axis-y: var(--pgn-breadcrumb-border-focus-axis-y) !default; -$breadcrumb-border-focus-width: .0625rem !default; +$breadcrumb-border-focus-width: var(--pgn-breadcrumb-border-focus-width) !default; -$breadcrumb-bg: $gray-200 !default; -$breadcrumb-divider-color: $gray-600 !default; -$breadcrumb-active-color: $gray-500 !default; -$breadcrumb-inverse-active: $light-500 !default; -$breadcrumb-inverse-spacer: $light-700 !default; -$breadcrumb-color: $primary-500 !default; -$breadcrumb-inverse-color: $white !default; -$breadcrumb-divider: "/" !default; +$breadcrumb-bg: var(--pgn-breadcrumb-bg) !default; +$breadcrumb-divider-color: var(--pgn-breadcrumb-color-divider) !default; +$breadcrumb-active-color: var(--pgn-breadcrumb-color-active) !default; +$breadcrumb-inverse-active: var(--pgn-breadcrumb-inverse-active) !default; +$breadcrumb-inverse-spacer: var(--pgn-breadcrumb-inverse-spacer) !default; +$breadcrumb-color: var(--pgn-breadcrumb-color-base) !default; +$breadcrumb-inverse-color: var(--pgn-breadcrumb-inverse-color) !default; +$breadcrumb-divider: "/" !default; -$breadcrumb-border-radius: $border-radius !default; -$breadcrumb-focus-border-radius: .125rem !default; +$breadcrumb-border-radius: var(--pgn-breadcrumb-border-radius-base) !default; +$breadcrumb-focus-border-radius: var(--pgn-breadcrumb-border-radius-focus) !default; diff --git a/src/Bubble/_variables.scss b/src/Bubble/_variables.scss index e09ee586c8..7726e63f7d 100644 --- a/src/Bubble/_variables.scss +++ b/src/Bubble/_variables.scss @@ -1,8 +1,8 @@ $bubble-variants: ( - "success": ( "background-color": $success, "color": $white ), - "warning": ( "background-color": $warning, "color": $white ), - "error": ( "background-color": $danger, "color": $white ), - "primary": ( "background-color": $primary, "color": $white ), + "success": ( "background-color": var(--pgn-color-success-base), "color": var(--pgn-color-white) ), + "warning": ( "background-color": var(--pgn-color-warning-base), "color": var(--pgn-color-white) ), + "error": ( "background-color": var(--pgn-color-danger-base), "color": var(--pgn-color-white) ), + "primary": ( "background-color": var(--pgn-color-primary-base), "color": var(--pgn-color-white) ), ) !default; -$bubble-expandable-padding-x: .25rem !default; -$bubble-expandable-padding-y: 0 !default; +$bubble-expandable-padding-x: var(--pgn-bubble-expandable-padding-x) !default; +$bubble-expandable-padding-y: var(--pgn-bubble-expandable-padding-y) !default; diff --git a/src/Button/Button.scss b/src/Button/Button.scss index 52c3eae069..b1f9f9c2da 100644 --- a/src/Button/Button.scss +++ b/src/Button/Button.scss @@ -1,34 +1,37 @@ @import "variables"; -@import "~bootstrap/scss/button-group"; +@import "button-bootstrap"; +// TODO Pending decision on usage with CSS variables. @mixin button-variant( - $background, $border, $hover-background: darken($background, 7.5%), - $hover-border: darken($border, 10%), $active-background: darken($background, 10%), - $active-border: darken($border, 12.5%), $color: color-yiq($background), $hover-color: color-yiq($hover-background), - $active-color: color-yiq($active-background) + $btn-variant-bg, $btn-variant-border, $btn-variant-hover-bg: darken($btn-variant-bg, 7.5%), + $btn-variant-hover-border: darken($btn-variant-border, 10%), + $btn-variant-active-bg: darken($btn-variant-bg, 10%), + $btn-variant-active-border: darken($btn-variant-border, 12.5%), + $btn-variant-color: color-yiq($btn-variant-bg), $btn-variant-hover-color: color-yiq($btn-variant-hover-bg), + $btn-variant-active-color: color-yiq($btn-variant-active-bg) ) { - color: $color; + color: $btn-variant-color; - @include gradient-bg($background); + @include gradient-bg($btn-variant-bg); - border-color: $border; + border-color: $btn-variant-border; @include box-shadow($btn-box-shadow); @include hover { - color: $hover-color; + color: $btn-variant-hover-color; - @include gradient-bg($hover-background); + @include gradient-bg($btn-variant-hover-bg); - border-color: $hover-border; + border-color: $btn-variant-hover-border; } // Disabled comes first so active can properly restyle &.disabled, &:disabled { - color: $color; - background-color: $background; - border-color: $border; + color: $btn-variant-color; + background-color: $btn-variant-bg; + border-color: $btn-variant-border; // Remove CSS gradients if they're enabled @if $enable-gradients { @@ -39,44 +42,47 @@ &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { - color: $active-color; - background-color: $active-background; + color: $btn-variant-active-color; + background-color: $btn-variant-active-bg; @if $enable-gradients { background-image: none; // Remove the gradient for the pressed/active state } - border-color: $active-border; + border-color: $btn-variant-active-border; } } // OVERRIDE FROM BOOTSTRAP // We do this to better control active and focus states. @mixin button-outline-variant( - $color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color + $color-val, + $color-val-hover: color-yiq($color-val), + $color-val-active-bg: $color-val, + $btn-outline-variant-active-border: $color-val ) { - color: $color; - border-color: $color; + color: $color-val; + border-color: $color-val; @include hover { - color: $color-hover; - background-color: $active-background; - border-color: $active-border; + color: $color-val-hover; + background-color: $color-val-active-bg; + border-color: $btn-outline-variant-active-border; } &.disabled, &:disabled { - color: $color; + color: $color-val; background-color: transparent; - border-color: $color; + border-color: $color-val; } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { - color: color-yiq($active-background); - background-color: $active-background; - border-color: $active-border; + color: color-yiq($color-val-active-bg); + background-color: $color-val-active-bg; + border-color: $btn-outline-variant-active-border; } } @@ -84,15 +90,18 @@ // 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) { - padding: $padding-y $padding-x; +@mixin button-size( + $btn-size-padding-y, $btn-size-padding-x, $btn-size-font-size, + $btn-size-line-height, $btn-size-border-radius +) { + padding: $btn-size-padding-y $btn-size-padding-x; - @include font-size($font-size); + @include font-size($btn-size-font-size); - line-height: $line-height; + line-height: $btn-size-line-height; // Manually declare to provide an override to the browser default - @include border-radius($border-radius, 0); + @include border-radius($btn-size-border-radius, 0); } // ------------------------ @@ -103,30 +112,32 @@ // A new variant of button (inverse) // @mixin button-inverse-variant( - $color, $background: color-yiq($color), $active-background: $color, $active-border: $color + $btn-inverse-variant-color, $btn-inverse-variant-bg: color-yiq($btn-inverse-variant-color), + $btn-inverse-variant-active-bg: $btn-inverse-variant-color, + $btn-inverse-variant-active-border: $btn-inverse-variant-color ) { - color: $color; + color: $btn-inverse-variant-color; border-color: transparent; - background-color: $background; + background-color: $btn-inverse-variant-bg; &:not(:disabled):not(.disabled) { @include hover { - color: darken($color, 7.5%); - background-color: darken($background, 7.5%); + color: darken($btn-inverse-variant-color, 7.5%); + background-color: darken($btn-inverse-variant-bg, 7.5%); border-color: transparent; } } &.disabled, &:disabled { - color: $color; - background-color: $background; + color: $btn-inverse-variant-color; + background-color: $btn-inverse-variant-bg; } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { - color: darken($color, 10%); + color: darken($btn-inverse-variant-color, 10%); background: #EEEEEE; } } @@ -141,10 +152,10 @@ &::before { content: ""; position: absolute; - top: -1 * $btn-focus-distance-to-border; - right: -1 * $btn-focus-distance-to-border; - bottom: -1 * $btn-focus-distance-to-border; - left: -1 * $btn-focus-distance-to-border; + 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 $ring-color; border-radius: $btn-focus-border-radius; } @@ -198,7 +209,8 @@ background-color: transparent; border: $btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); + @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, + $btn-line-height, $btn-border-radius); @include transition($btn-transition); @include hover { @@ -247,27 +259,27 @@ fieldset:disabled a.btn { @each $color, $value in $theme-colors { .btn-#{$color} { - $background: $value; - $border: $value; + $theme-color-bg: $value; + $theme-color-border: $value; - $hover-background: theme-color($color, "hover"); - $hover-border: theme-color($color, "hover"); - $active-background: theme-color($color, "active"); - $active-border: theme-color($color, "active"); + $theme-color-hover-bg: theme-color($color, "hover"); + $theme-color-hover-border: theme-color($color, "hover"); + $theme-color-hover-border-active-bg: theme-color($color, "active"); + $theme-color-active-border: theme-color($color, "active"); // Defaults - $hover-background: darken($background, 7.5%) !default; - $hover-border: darken($border, 10%) !default; - $active-background: darken($background, 10%) !default; - $active-border: darken($border, 12.5%) !default; + $theme-color-hover-bg: darken($theme-color-bg, 7.5%) !default; + $theme-color-hover-border: darken($theme-color-border, 10%) !default; + $theme-color-hover-border-active-bg: darken($theme-color-bg, 10%) !default; + $theme-color-active-border: darken($theme-color-border, 12.5%) !default; @include button-variant( - $background, - $border, - $hover-background, - $hover-border, - $active-background, - $active-border + $theme-color-bg, + $theme-color-border, + $theme-color-hover-bg, + $theme-color-hover-border, + $theme-color-hover-border-active-bg, + $theme-color-active-border ); @include button-focus(theme-color($color, "focus")); } @@ -275,20 +287,20 @@ fieldset:disabled a.btn { .btn-outline-#{$color} { $text-and-border: $value; - $color-hover: theme-color($color, "hover"); - $active-background: theme-color($color, "background"); - $active-border: theme-color($color, "active"); + $btn-outline-color-hover: theme-color($color, "hover"); + $btn-outline-active-background: theme-color($color, "background"); + $btn-outline-active-border: theme-color($color, "active"); // Defaults $color-hover: color-yiq($value) !default; $active-background: $value !default; - $active-border: $value !default; + $btn-outline-active-border: $value !default; @include button-outline-variant( $text-and-border, - $color-hover, - $active-background, - $active-border, + $btn-outline-color-hover, + $btn-outline-active-background, + $btn-outline-active-border, ); @include button-focus(theme-color($color, "focus")); } @@ -300,15 +312,15 @@ fieldset:disabled a.btn { $active-border: theme-color($color, "active"); // Defaults - $background: color-yiq($value) !default; - $active-background: $value !default; - $active-border: $value !default; + $btn-inverse-bg: color-yiq($value) !default; + $btn-inverse-active-bg: $value !default; + $btn-inverse-active-border: $value !default; @include button-inverse-variant( $text, - $background, - $active-background, - $active-border, + $btn-inverse-bg, + $btn-inverse-active-bg, + $btn-inverse-active-border, ); @include button-focus($white); } @@ -317,19 +329,19 @@ fieldset:disabled a.btn { $text-and-border: $white; $color-hover: theme-color($color, "hover"); - $active-background: theme-color($color, "background"); - $active-border: transparent; + $active-bg-color: theme-color($color, "background"); + $active-border-color: transparent; // Defaults $color-hover: color-yiq($value) !default; - $active-background: $value !default; - $active-border: $value !default; + $active-bg-color: $value !default; + $active-border-color: $value !default; @include button-outline-variant( $text-and-border, $color-hover, - $active-background, - $active-border, + $active-bg-color, + $active-border-color, ); @include button-focus($white); } @@ -340,20 +352,20 @@ fieldset:disabled a.btn { // .btn-tertiary { - $background: $btn-tertiary-bg; - $border: transparent; + $button-tertiary-background: $btn-tertiary-bg; + $button-tertiary-border: transparent; $hover-background: $btn-tertiary-hover-bg; - $hover-border: transparent; - $active-background: $btn-tertiary-active-bg; - $active-border: transparent; + $button-tertiary-hover-border: transparent; + $button-tertiary-active-bg: $btn-tertiary-active-bg; + $button-tertiary-active-border: transparent; @include button-variant( - $background, - $border, + $button-tertiary-background, + $button-tertiary-border, $hover-background, - $hover-border, - $active-background, - $active-border, + $button-tertiary-hover-border, + $button-tertiary-active-bg, + $button-tertiary-active-border, $btn-tertiary-color, $btn-tertiary-color, $btn-tertiary-color @@ -362,20 +374,20 @@ fieldset:disabled a.btn { } .btn-inverse-tertiary { - $background: $btn-inverse-tertiary-bg; - $border: transparent; + $button-inverse-tertiary-bg: $btn-tertiary-bg; + $button-inverse-tertiary-border: transparent; $hover-background: $btn-inverse-tertiary-hover-bg; - $hover-border: transparent; - $active-background: $btn-inverse-tertiary-active-bg; - $active-border: transparent; + $button-inverse-hover-border: transparent; + $button-inverse-tertiary-active-bg: $btn-inverse-tertiary-active-bg; + $button-inverse-tertiary-active-border: transparent; @include button-variant( - $background, - $border, + $button-inverse-tertiary-bg, + $button-inverse-tertiary-border, $hover-background, - $hover-border, - $active-background, - $active-border, + $button-inverse-hover-border, + $button-inverse-tertiary-active-bg, + $button-inverse-tertiary-active-border, $btn-inverse-tertiary-color, $btn-inverse-tertiary-color, $btn-inverse-tertiary-color @@ -424,13 +436,15 @@ fieldset:disabled a.btn { .btn-lg { @include button-size( - $btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg + $btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, + $btn-line-height-lg, $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 + $btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, + $btn-line-height-sm, $btn-border-radius-sm ); } @@ -449,7 +463,7 @@ fieldset:disabled a.btn { } .btn-inline { - line-height: calc(#{$line-height-base}em - #{2 * $btn-border-width}); + line-height: calc(#{$line-height-base}em - 2 * #{$btn-border-width}); font-size: inherit; vertical-align: bottom; padding: 0 .25em; diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss index 5d92ed8271..9ca4159d15 100644 --- a/src/Button/_variables.scss +++ b/src/Button/_variables.scss @@ -1,48 +1,49 @@ -$btn-padding-y: $input-btn-padding-y !default; -$btn-padding-x: $input-btn-padding-x !default; -$btn-font-family: $input-btn-font-family !default; -$btn-font-size: $input-btn-font-size !default; -$btn-line-height: $input-btn-line-height !default; - -$btn-padding-y-sm: $input-btn-padding-y-sm !default; -$btn-padding-x-sm: $input-btn-padding-x-sm !default; -$btn-font-size-sm: $input-btn-font-size-sm !default; -$btn-line-height-sm: $input-btn-line-height-sm !default; - -$btn-padding-y-lg: $input-btn-padding-y-lg !default; -$btn-padding-x-lg: $input-btn-padding-x-lg !default; -$btn-font-size-lg: $input-btn-font-size-lg !default; -$btn-line-height-lg: $input-btn-line-height-lg !default; - -$btn-border-width: $input-btn-border-width !default; - -$btn-font-weight: $font-weight-normal !default; -$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; -$btn-focus-width: 2px !default; -$btn-focus-gap: 1px !default; +$btn-padding-y: var(--pgn-btn-padding-y-base) !default; +$btn-padding-x: var(--pgn-btn-padding-x-base) !default; +$btn-font-family: var(--pgn-btn-font-family) !default; +$btn-font-size: var(--pgn-btn-font-size-base) !default; +$btn-line-height: var(--pgn-btn-line-height-base) !default; + +$btn-padding-y-sm: var(--pgn-btn-padding-y-sm) !default; +$btn-padding-x-sm: var(--pgn-btn-padding-x-sm) !default; +$btn-font-size-sm: var(--pgn-btn-font-size-sm) !default; +$btn-line-height-sm: var(--pgn-btn-line-height-sm) !default; + +$btn-padding-y-lg: var(--pgn-btn-padding-y-lg) !default; +$btn-padding-x-lg: var(--pgn-btn-padding-x-lg) !default; +$btn-font-size-lg: var(--pgn-btn-font-size-lg) !default; +$btn-line-height-lg: var(--pgn-btn-line-height-lg) !default; + +$btn-border-width: var(--pgn-btn-border-width) !default; + +$btn-font-weight: var(--pgn-btn-font-weight) !default; +$btn-box-shadow: var(--pgn-btn-box-shadow-base) !default; +$btn-focus-width: var(--pgn-btn-focus-width) !default; +$btn-focus-gap: var(--pgn-btn-focus-gap) !default; $btn-focus-box-shadow: $input-btn-focus-box-shadow !default; -$btn-disabled-opacity: .65 !default; -$btn-active-box-shadow: none; +$btn-disabled-opacity: var(--pgn-btn-disabled-opacity) !default; +$btn-active-box-shadow: var(--pgn-btn-box-shadow-active) !default; -$btn-tertiary-color: $gray-700 !default; -$btn-tertiary-bg: transparent !default; -$btn-tertiary-hover-bg: $light-500 !default; -$btn-tertiary-active-bg: $light-500 !default; -$btn-inverse-tertiary-color: $white !default; -$btn-inverse-tertiary-bg: transparent !default; -$btn-inverse-tertiary-hover-bg: rgba(255, 255, 255, .1) !default; -$btn-inverse-tertiary-active-bg: rgba(255, 255, 255, .1) !default; +$btn-tertiary-color: var(--pgn-btn-tertiary-color) !default; +$btn-tertiary-bg: transparent !default; -$btn-link-disabled-color: theme-color("gray", "light-text") !default; +$btn-tertiary-hover-bg: var(--pgn-btn-tertiary-bg-hover) !default; +$btn-tertiary-active-bg: var(--pgn-btn-tertiary-bg-active) !default; +$btn-inverse-tertiary-color: var(--pgn-btn-tertiary-inverse-color) !default; +$btn-inverse-tertiary-bg: var(--pgn-btn-tertiary-inverse-bg-base) !default; +$btn-inverse-tertiary-hover-bg: var(--pgn-btn-tertiary-inverse-bg-hover) !default; +$btn-inverse-tertiary-active-bg: var(--pgn-btn-tertiary-inverse-bg-active) !default; -$btn-block-spacing-y: .5rem !default; +$btn-link-disabled-color: var(--pgn-btn-disabled-link-color) !default; + +$btn-block-spacing-y: var(--pgn-btn-block-spacing-y) !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius !default; -$btn-border-radius-lg: $border-radius-lg !default; -$btn-border-radius-sm: $border-radius-sm !default; +$btn-border-radius: var(--pgn-btn-border-radius-base) !default; +$btn-border-radius-lg: var(--pgn-btn-border-radius-lg) !default; +$btn-border-radius-sm: var(--pgn-btn-border-radius-sm) !default; -$btn-transition: null; +$btn-transition: var(--pgn-btn-transition) !default; $btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default; $btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default; diff --git a/src/Button/button-bootstrap.scss b/src/Button/button-bootstrap.scss new file mode 100644 index 0000000000..b13a0a58b6 --- /dev/null +++ b/src/Button/button-bootstrap.scss @@ -0,0 +1,126 @@ +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-flex; + vertical-align: middle; + + > .btn { + position: relative; + flex: 1 1 auto; + + @include hover() { + z-index: 1; + } + + &:focus, + &:active, + &.active { + z-index: 1; + } + } +} + +.btn-toolbar { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + + .input-group { + width: auto; + } +} + +.btn-group { + > .btn:not(:first-child), + > .btn-group:not(:first-child) { + margin-left: calc($btn-border-width * -1); + } + + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > .btn { + @include border-right-radius(0); + } + + > .btn:not(:first-child), + > .btn-group:not(:first-child) > .btn { + @include border-left-radius(0); + } +} + +/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ +.btn-group-sm > .btn { @extend .btn-sm; } +/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ +.btn-group-lg > .btn { @extend .btn-lg; } + +.dropdown-toggle-split { + padding-right: calc($btn-padding-x * .75); + padding-left: calc($btn-padding-x * .75); + + &::after, + .dropup &::after, + .dropright &::after { + margin-left: 0; + } + + .dropleft &::before { + margin-right: 0; + } +} + +.btn-sm + .dropdown-toggle-split { + padding-right: calc($btn-padding-x-sm * .75); + padding-left: calc($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); +} + +.btn-group.show .dropdown-toggle { + @include box-shadow($btn-active-box-shadow); + + &.btn-link { + @include box-shadow(none); + } +} + +.btn-group-vertical { + flex-direction: column; + align-items: flex-start; + justify-content: center; + + > .btn, + > .btn-group { + width: 100%; + } + + > .btn:not(:first-child), + > .btn-group:not(:first-child) { + margin-top: calc($btn-border-width * -1); + } + + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > .btn { + @include border-bottom-radius(0); + } + + > .btn:not(:first-child), + > .btn-group:not(:first-child) > .btn { + @include border-top-radius(0); + } +} + +.btn-group-toggle { + > .btn, + > .btn-group > .btn { + margin-bottom: 0; + + input[type="radio"], + input[type="checkbox"] { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; + } + } +} diff --git a/src/Card/Card.scss b/src/Card/Card.scss index 099c6f5bd9..32a8fafe43 100644 --- a/src/Card/Card.scss +++ b/src/Card/Card.scss @@ -1,5 +1,5 @@ @import "variables"; -@import "~bootstrap/scss/card"; +@import "card-bootstrap"; .pgn__card, .pgn__card-body { @@ -261,7 +261,7 @@ a .pgn__card { &.horizontal-stacked { flex-direction: column-reverse; - padding-top: $card-spacer-x - $card-footer-actions-gap; + padding-top: calc(#{$card-spacer-x} - #{$card-footer-actions-gap}); & > * { margin-top: $card-footer-actions-gap; @@ -327,9 +327,9 @@ a .pgn__card { .pgn__card-image-cap-loader { .react-loading-skeleton { - margin-bottom: -$loading-skeleton-spacer; + margin-bottom: calc(#{$loading-skeleton-spacer} * -1); position: relative; - top: -$loading-skeleton-spacer; + top: calc(#{$loading-skeleton-spacer} * -1); height: 100%; } } @@ -351,7 +351,7 @@ a .pgn__card { .pgn__card-logo-cap { position: absolute; inset-inline-start: $card-logo-left-offset; - bottom: #{-$card-logo-bottom-offset}; + bottom: #{calc(#{$card-logo-bottom-offset} * -1)}; width: $card-logo-width; height: $card-logo-height; border-radius: $card-logo-border-radius; diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss index 0d9ed7a08d..695e2dbfb1 100644 --- a/src/Card/_variables.scss +++ b/src/Card/_variables.scss @@ -1,55 +1,55 @@ // Card -$card-spacer-y: .75rem !default; -$card-spacer-x: 1.25rem !default; -$card-border-width: $border-width !default; -$card-border-radius: $border-radius !default; -$card-border-color: rgba($black, .125) !default; -$card-border-focus-color: rgba($black, .5) !default; +$card-spacer-y: var(--pgn-card-spacer-y) !default; +$card-spacer-x: var(--pgn-card-spacer-x) !default; +$card-border-width: var(--pgn-card-border-width) !default; +$card-border-radius: var(--pgn-card-border-radius-base) !default; +$card-border-color: var(--pgn-card-border-color-base) !default; +$card-border-focus-color: var(--pgn-card-border-color-focus) !default; $card-border-focus-color-dark: theme-color("primary", "focus") !default; -$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; -$card-cap-bg: rgba($black, .03) !default; -$card-cap-color: null !default; -$card-height: null !default; -$card-color: null !default; -$card-bg: $white !default; +$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !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-color: var(--pgn-card-color) !default; +$card-bg: var(--pgn-card-bg) !default; $card-bg-dark: $primary-500 !default; $card-bg-muted: $light-200 !default; -$card-img-overlay-padding: 1.25rem !default; +$card-img-overlay-padding: var(--pgn-card-image-overlay-padding) !default; -$card-group-margin: calc($grid-gutter-width / 2) !default; -$card-deck-margin: $card-group-margin !default; -$card-grid-margin: $card-group-margin !default; +$card-group-margin: var(--pgn-card-margin-group) !default; +$card-deck-margin: var(--pgn-card-margin-deck) !default; +$card-grid-margin: var(--pgn-card-margin-grid) !default; $card-deck-margin-bottom: map_get($spacers, 3) !default; $card-grid-margin-bottom: map_get($spacers, 3) !default; -$card-columns-count: 3 !default; -$card-columns-gap: 1.25rem !default; -$card-columns-margin: $card-spacer-y !default; +$card-columns-count: var(--pgn-card-columns-count) !default; +$card-columns-gap: var(--pgn-card-columns-gap) !default; +$card-columns-margin: var(--pgn-card-columns-margin) !default; -$card-divider-bg: $light-400 !default; -$card-divider-margin-y: $card-spacer-y !default; +$card-divider-bg: var(--pgn-card-divider-bg) !default; +$card-divider-margin-y: var(--pgn-card-divider-margin-y) !default; -$card-footer-actions-gap: .5rem !default; +$card-footer-actions-gap: var(--pgn-card-footer-action-gap) !default; -$card-logo-left-offset: 1.5rem !default; -$card-logo-bottom-offset: 1rem !default; -$card-logo-left-offset-horizontal: .4375rem !default; -$card-logo-bottom-offset-horizontal: .4375rem !default; +$card-logo-left-offset: var(--pgn-card-logo-left-offset-base) !default; +$card-logo-bottom-offset: var(--pgn-card-logo-bottom-offset-base) !default; +$card-logo-left-offset-horizontal: var(--pgn-card-logo-left-offset-horizontal) !default; +$card-logo-bottom-offset-horizontal: var(--pgn-card-logo-bottom-offset-horizontal) !default; -$card-logo-width: 7.25rem !default; -$card-logo-height: 4.125rem !default; +$card-logo-width: var(--pgn-card-logo-width) !default; +$card-logo-height: var(--pgn-card-logo-height) !default; -$card-image-border-radius: .3125rem !default; -$card-logo-border-radius: .25rem !default; +$card-image-border-radius: var(--pgn-card-border-radius-image) !default; +$card-logo-border-radius: var(--pgn-card-border-radius-logo) !default; -$card-footer-text-font-size: $x-small-font-size; +$card-footer-text-font-size: var(--pgn-card-footer-text-font-size) !default; -$card-image-horizontal-max-width: 240px !default; -$card-image-horizontal-min-width: $card-image-horizontal-max-width !default; -$card-image-vertical-max-height: 140px !default; -$loading-skeleton-spacer: .313rem !default; +$card-image-horizontal-max-width: var(--pgn-card-image-horizontal-width-max) !default; +$card-image-horizontal-min-width: var(--pgn-card-image-horizontal-width-min) !default; +$card-image-vertical-max-height: var(--pgn-card-image-vertical-height-max) !default; +$loading-skeleton-spacer: var(--pgn-card-loading-skeleton-spacer) !default; $card-focus-border-offset: 5px !default; $card-focus-border-width: 2px !default; diff --git a/src/Card/card-bootstrap.scss b/src/Card/card-bootstrap.scss new file mode 100644 index 0000000000..45f4904aff --- /dev/null +++ b/src/Card/card-bootstrap.scss @@ -0,0 +1,254 @@ +.card { + display: flex; + flex-direction: column; + min-width: 0; + height: $card-height; + word-wrap: break-word; + background-color: $card-bg; + background-clip: border-box; + border: $card-border-width solid $card-border-color; + position: relative; + + @include border-radius($card-border-radius); + + > hr { + margin-right: 0; + margin-left: 0; + } + + > .list-group { + border-top: inherit; + border-bottom: inherit; + + &:first-child { + border-top-width: 0; + + @include border-top-radius($card-inner-border-radius); + } + + &:last-child { + border-bottom-width: 0; + + @include border-bottom-radius($card-inner-border-radius); + } + } + + > .card-header + .list-group, + > .list-group + .card-footer { + border-top: 0; + } +} + +.card-body { + flex: 1 1 auto; + min-height: 1px; + padding: $card-spacer-x; + color: $card-color; +} + +.card-title { + margin-bottom: $card-spacer-y; +} + +.card-subtitle { + margin-top: calc($card-spacer-y * -.5); + margin-bottom: 0; +} + +.card-text:last-child { + margin-bottom: 0; +} + +.card-link { + @include hover() { + text-decoration: none; + } + + + .card-link { + margin-left: $card-spacer-x; + } +} + +// Optional textual caps +.card-header { + padding: $card-spacer-y $card-spacer-x; + margin-bottom: 0; // Removes the default margin-bottom of + color: $card-cap-color; + background-color: $card-cap-bg; + border-bottom: $card-border-width solid $card-border-color; + + &:first-child { + @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); + } +} + +.card-footer { + padding: $card-spacer-y $card-spacer-x; + color: $card-cap-color; + background-color: $card-cap-bg; + border-top: $card-border-width solid $card-border-color; + + &:last-child { + @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius); + } +} + +// Header navs +.card-header-tabs { + margin-right: calc($card-spacer-x * -.5); + margin-bottom: calc($card-spacer-y * -1); + margin-left: calc($card-spacer-x * -.5); + border-bottom: 0; +} + +.card-header-pills { + margin-right: calc($card-spacer-x * -.5); + margin-left: calc($card-spacer-x * .5); +} + +// Card image +.card-img-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: $card-img-overlay-padding; + + @include border-radius($card-inner-border-radius); +} + +.card-img, +.card-img-top, +.card-img-bottom { + flex-shrink: 0; + width: 100%; +} + +.card-img, +.card-img-top { + @include border-top-radius($card-inner-border-radius); +} + +.card-img, +.card-img-bottom { + @include border-bottom-radius($card-inner-border-radius); +} + +// Card deck +.card-deck { + .card { + margin-bottom: $card-deck-margin; + } + + @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); + + .card { + flex: 1 0 0%; + margin-right: $card-deck-margin; + margin-bottom: 0; // Override the default + margin-left: $card-deck-margin; + } + } +} + +// Card groups +.card-group { + > .card { + margin-bottom: $card-group-margin; + } + + @include media-breakpoint-up(sm) { + display: flex; + flex-flow: row wrap; + + > .card { + flex: 1 0 0%; + margin-bottom: 0; + + + .card { + margin-left: 0; + border-left: 0; + } + + // Handle rounded corners + @if $enable-rounded { + &:not(:last-child) { + @include border-right-radius(0); + + .card-img-top, + .card-header { + border-top-right-radius: 0; + } + + .card-img-bottom, + .card-footer { + border-bottom-right-radius: 0; + } + } + + &:not(:first-child) { + @include border-left-radius(0); + + .card-img-top, + .card-header { + border-top-left-radius: 0; + } + + .card-img-bottom, + .card-footer { + border-bottom-left-radius: 0; + } + } + } + } + } +} + +// Columns +.card-columns { + .card { + margin-bottom: $card-columns-margin; + } + + @include media-breakpoint-up(sm) { + column-count: $card-columns-count; + column-gap: $card-columns-gap; + orphans: 1; + widows: 1; + + .card { + display: inline-block; + width: 100%; + } + } +} + +// Accordion +.accordion { + overflow-anchor: none; + + > .card { + overflow: hidden; + + &:not(:last-of-type) { + border-bottom: 0; + + @include border-bottom-radius(0); + } + + &:not(:first-of-type) { + @include border-top-radius(0); + } + + > .card-header { + @include border-radius(0); + + margin-bottom: calc($card-border-width * -1); + } + } +} diff --git a/src/Carousel/Carousel.scss b/src/Carousel/Carousel.scss index f2aad61197..060291e5eb 100644 --- a/src/Carousel/Carousel.scss +++ b/src/Carousel/Carousel.scss @@ -1,2 +1,2 @@ @import "variables"; -@import "~bootstrap/scss/carousel"; +@import "carousel-bootstrap"; diff --git a/src/Carousel/_variables.scss b/src/Carousel/_variables.scss index 6ee4508d9a..6f32a28f0e 100644 --- a/src/Carousel/_variables.scss +++ b/src/Carousel/_variables.scss @@ -1,27 +1,27 @@ // Carousel -$carousel-control-color: $white !default; -$carousel-control-width: 15% !default; -$carousel-control-opacity: .5 !default; -$carousel-control-hover-opacity: .9 !default; -$carousel-control-transition: opacity .15s ease !default; +// TODO use css variable +$carousel-control-color: #FFFFFF !default; +$carousel-control-width: var(--pgn-carousel-control-width-base) !default; +$carousel-control-opacity: var(--pgn-carousel-control-opacity-base) !default; +$carousel-control-hover-opacity: var(--pgn-carousel-control-opacity-hover) !default; +$carousel-control-transition: var(--pgn-carousel-control-transition) !default; -$carousel-indicator-width: 30px !default; -$carousel-indicator-height: 3px !default; -$carousel-indicator-hit-area-height: 10px !default; -$carousel-indicator-spacer: 3px !default; -$carousel-indicator-active-bg: $white !default; -$carousel-indicator-transition: opacity .6s ease !default; +$carousel-indicator-width: var(--pgn-carousel-indicator-width) !default; +$carousel-indicator-height: var(--pgn-carousel-indicator-height-base) !default; +$carousel-indicator-hit-area-height: var(--pgn-carousel-indicator-height-area-hit) !default; +$carousel-indicator-spacer: var(--pgn-carousel-indicator-spacer) !default; +$carousel-indicator-active-bg: var(--pgn-carousel-indicator-active-bg) !default; +$carousel-indicator-transition: var(--pgn-carousel-indicator-transition) !default; -$carousel-caption-width: 70% !default; -$carousel-caption-color: $white !default; +$carousel-caption-width: var(--pgn-carousel-caption-width) !default; +$carousel-caption-color: var(--pgn-carousel-caption-color) !default; -$carousel-control-icon-width: 20px !default; +$carousel-control-icon-width: var(--pgn-carousel-control-width-icon) !default; +$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default; +$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default; -$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default; -$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default; - -$carousel-transition-duration: .6s !default; +$carousel-transition-duration: var(--pgn-carousel-transition-duration) !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) -$carousel-transition: transform $carousel-transition-duration ease-in-out !default; +$carousel-transition: transform $carousel-transition-duration ease-in-out !default; diff --git a/src/Carousel/carousel-bootstrap.scss b/src/Carousel/carousel-bootstrap.scss new file mode 100644 index 0000000000..1cfb8f0828 --- /dev/null +++ b/src/Carousel/carousel-bootstrap.scss @@ -0,0 +1,183 @@ +.carousel { + position: relative; +} + +.carousel.pointer-event { + touch-action: pan-y; +} + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; + + @include clearfix(); +} + +.carousel-item { + position: relative; + display: none; + float: left; + width: 100%; + margin-right: -100%; + backface-visibility: hidden; + + @include transition($carousel-transition); +} + +.carousel-item.active, +.carousel-item-next, +.carousel-item-prev { + display: block; +} + +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { + transform: translateX(100%); +} + +.carousel-item-prev:not(.carousel-item-right), +.active.carousel-item-left { + transform: translateX(-100%); +} + +// Alternate transitions +.carousel-fade { + .carousel-item { + opacity: 0; + transition-property: opacity; + transform: none; + } + + .carousel-item.active, + .carousel-item-next.carousel-item-left, + .carousel-item-prev.carousel-item-right { + z-index: 1; + opacity: 1; + } + + .active.carousel-item-left, + .active.carousel-item-right { + z-index: 0; + opacity: 0; + + @include transition(opacity 0s var(--pgn-carousel-transition-base)); + } +} + + +// Left/right controls for nav +.carousel-control-prev, +.carousel-control-next { + position: absolute; + top: 0; + bottom: 0; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + width: $carousel-control-width; + padding: 0; + color: var(--pgn-carousel-control-color); + text-align: center; + background: none; + border: 0; + opacity: $carousel-control-opacity; + + @include 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; + + @include 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/_variables.scss b/src/Chip/_variables.scss index 90c2878e07..6b864dbd8f 100644 --- a/src/Chip/_variables.scss +++ b/src/Chip/_variables.scss @@ -1,19 +1,19 @@ -$chip-padding-x: .5rem !default; -$chip-padding-y: .125rem !default; -$chip-padding-to-icon: 3px !default; -$chip-icon-padding: .25rem !default; -$chip-margin: .125rem !default; -$chip-border-radius: .25rem !default; -$chip-disable-opacity: .3 !default; -$chip-icon-size: 1.25rem !default; +$chip-padding-x: var(--pgn-chip-padding-x) !default; +$chip-padding-y: var(--pgn-chip-padding-y) !default; +$chip-padding-to-icon: var(--pgn-chip-padding-icon-to) !default; +$chip-icon-padding: var(--pgn-chip-padding-icon-base) !default; +$chip-margin: var(--pgn-chip-margin-base) !default; +$chip-border-radius: var(--pgn-chip-border-radius-base) !default; +$chip-disable-opacity: var(--pgn-chip-disabled-opacity) !default; +$chip-icon-size: var(--pgn-chip-icon-size) !default; $chip-theme-variants: ( "light": ( - "background": $light-500, - "color": $black, + "background": var(--pgn-color-light-500), + "color": var(--pgn-color-black), ), "dark": ( - "background": $dark-200, - "color": $white, + "background": var(--pgn-color-dark-200), + "color": var(--pgn-color-white), ) ) !default; diff --git a/src/CloseButton/CloseButton.scss b/src/CloseButton/CloseButton.scss index a84e20236e..e13cdb3822 100644 --- a/src/CloseButton/CloseButton.scss +++ b/src/CloseButton/CloseButton.scss @@ -1,2 +1,2 @@ @import "variables"; -@import "~bootstrap/scss/close"; +@import "close-button-bootstrap"; diff --git a/src/CloseButton/_variables.scss b/src/CloseButton/_variables.scss index 3ce0a0d790..0415c62774 100644 --- a/src/CloseButton/_variables.scss +++ b/src/CloseButton/_variables.scss @@ -1,6 +1,6 @@ // Close -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; +$close-font-size: var(--pgn-close-button-font-size) !default; +$close-font-weight: var(--pgn-close-button-font-weight) !default; +$close-color: var(--pgn-close-button-color) !default; +$close-text-shadow: var(--pgn-close-button-text-shadow) !default; diff --git a/src/CloseButton/close-button-bootstrap.scss b/src/CloseButton/close-button-bootstrap.scss new file mode 100644 index 0000000000..c3d1789db4 --- /dev/null +++ b/src/CloseButton/close-button-bootstrap.scss @@ -0,0 +1,32 @@ +.close { + float: right; + + @include font-size($close-font-size); + + font-weight: $close-font-weight; + line-height: 1; + color: $close-color; + text-shadow: $close-text-shadow; + opacity: .5; + + @include hover() { + color: $close-color; + text-decoration: none; + } + + &:not(:disabled):not(.disabled) { + @include hover-focus() { + opacity: .75; + } + } +} + +button.close { + padding: 0; + background-color: transparent; + border: 0; +} + +a.close.disabled { + pointer-events: none; +} diff --git a/src/Code/Code.scss b/src/Code/Code.scss index 62147a3ba5..f92537e5e8 100644 --- a/src/Code/Code.scss +++ b/src/Code/Code.scss @@ -1,2 +1,2 @@ @import "variables"; -@import "~bootstrap/scss/code"; +@import "code-bootstrap"; diff --git a/src/Code/_variables.scss b/src/Code/_variables.scss index a6790b97ba..118d2cab28 100644 --- a/src/Code/_variables.scss +++ b/src/Code/_variables.scss @@ -1,17 +1,17 @@ // Code -$code-font-size: 87.5% !default; -$code-color: #E83E8C !default; +$code-font-size: var(--pgn-code-font-size) !default; +$code-color: var(--pgn-code-color) !default; -$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; -$nested-kbd-font-weight: $font-weight-bold !default; +$kbd-box-shadow: var(--pgn-code-kbd-box-shadow) !default; +$nested-kbd-font-weight: var(--pgn-code-kbd-nested-font-weight) !default; // HTML Keyboard Input element () styles -$kbd-padding-y: .2rem !default; -$kbd-padding-x: .4rem !default; -$kbd-font-size: $code-font-size !default; -$kbd-color: $white !default; -$kbd-bg: theme-color("gray", "hover") !default; +$kbd-padding-y: var(--pgn-code-kbd-padding-y) !default; +$kbd-padding-x: var(--pgn-code-kbd-padding-x) !default; +$kbd-font-size: var(--pgn-code-kbd-font-size) !default; +$kbd-color: var(--pgn-code-kbd-color) !default; +$kbd-bg: var(--pgn-code-kbd-bg) !default; -$pre-color: theme-color("gray", "dark-text") !default; -$pre-scrollable-max-height: 340px !default; +$pre-color: var(--pgn-code-pre-color) !default; +$pre-scrollable-max-height: var(--pgn-code-pre-scrollable-max-height) !default; diff --git a/src/Code/code-bootstrap.scss b/src/Code/code-bootstrap.scss new file mode 100644 index 0000000000..f01dc41795 --- /dev/null +++ b/src/Code/code-bootstrap.scss @@ -0,0 +1,56 @@ +code { + @include font-size($code-font-size); + + color: $code-color; + word-wrap: break-word; + + a > & { + color: inherit; + } +} + +// User input typically entered via keyboard +kbd { + padding: $kbd-padding-y $kbd-padding-x; + + @include font-size($kbd-font-size); + + color: $kbd-color; + background-color: $kbd-bg; + + @include border-radius($border-radius-sm); + @include box-shadow($kbd-box-shadow); + + kbd { + padding: 0; + + @include font-size(100%); + + font-weight: $nested-kbd-font-weight; + + @include box-shadow(none); + } +} + +// Blocks of code +pre { + display: block; + + @include font-size($code-font-size); + + color: $pre-color; + + // Account for some code outputs that place code tags in pre tags + code { + @include font-size(inherit); + + color: inherit; + word-break: normal; + } +} + +// Enable scrollable blocks of code +.pre-scrollable { + max-height: $pre-scrollable-max-height; + overflow-y: scroll; +} diff --git a/src/Collapsible/_variables.scss b/src/Collapsible/_variables.scss index 19b10836b7..f7ae8f19b0 100644 --- a/src/Collapsible/_variables.scss +++ b/src/Collapsible/_variables.scss @@ -1,12 +1,12 @@ // Collapsible -$collapsible-card-spacer-y: .5rem !default; -$collapsible-card-spacer-x: .5rem !default; -$collapsible-card-spacer-y-lg: $card-spacer-y !default; -$collapsible-card-spacer-x-lg: $card-spacer-x !default; -$collapsible-card-body-spacer-left: .75rem !default; -$collapsible-card-spacer-icon: 2.5rem !default; +$collapsible-card-spacer-y: var(--pgn-collapsible-card-spacer-y-base) !default; +$collapsible-card-spacer-x: var(--pgn-collapsible-card-spacer-x-base) !default; +$collapsible-card-spacer-y-lg: var(--pgn-collapsible-card-spacer-y-lg) !default; +$collapsible-card-spacer-x-lg: var(--pgn-collapsible-card-spacer-x-lg) !default; +$collapsible-card-body-spacer-left: var(--pgn-collapsible-card-spacer-left-body) !default; +$collapsible-card-spacer-icon: var(--pgn-collapsible-card-spacer-icon) !default; -$collapsible-basic-spacer-y: .5rem !default; -$collapsible-basic-spacer-x: .5rem !default; -$collapsible-basic-spacer-icon: .625rem !default; +$collapsible-basic-spacer-y: var(--pgn-collapsible-card-spacer-basic-y) !default; +$collapsible-basic-spacer-x: var(--pgn-collapsible-card-spacer-basic-x) !default; +$collapsible-basic-spacer-icon: var(--pgn-collapsible-card-spacer-basic-icon) !default; diff --git a/src/Container/_variables.scss b/src/Container/_variables.scss index 64d6f892c5..428adb0ae4 100644 --- a/src/Container/_variables.scss +++ b/src/Container/_variables.scss @@ -1,5 +1,5 @@ -$max-width-xs: 464px !default; -$max-width-sm: 708px !default; -$max-width-md: 952px !default; -$max-width-lg: 1192px !default; -$max-width-xl: 1440px !default; +$max-width-xs: var(--pgn-container-max-width-xs) !default; +$max-width-sm: var(--pgn-container-max-width-sm) !default; +$max-width-md: var(--pgn-container-max-width-md) !default; +$max-width-lg: var(--pgn-container-max-width-lg) !default; +$max-width-xl: var(--pgn-container-max-width-xl) !default; diff --git a/src/DataTable/CollapsibleButtonGroup.jsx b/src/DataTable/CollapsibleButtonGroup.jsx index fced75f8ea..2fc6a34623 100644 --- a/src/DataTable/CollapsibleButtonGroup.jsx +++ b/src/DataTable/CollapsibleButtonGroup.jsx @@ -79,7 +79,7 @@ function CollapsibleButtonGroup({ placement="bottom-end" isOpen={isOverflowMenuOpen} > -
+
{dropdownActions.map(cloneAction)} @@ -87,7 +87,7 @@ function CollapsibleButtonGroup({ )} -
+
{visibleActions.map(cloneAction)}
diff --git a/src/DataTable/DataTable.scss b/src/DataTable/DataTable.scss index 1461de33a0..9cc7a0ad26 100644 --- a/src/DataTable/DataTable.scss +++ b/src/DataTable/DataTable.scss @@ -1,13 +1,4 @@ -$data-table-background-color: $white !default; -$data-table-border: 1px solid $gray-200 !default; -$data-table-box-shadow: $box-shadow-sm !default; -$data-table-padding-x: .75rem !default; -$data-table-padding-y: .75rem !default; -$data-table-padding-small: .5rem !default; -$data-table-cell-padding: .5rem .75rem !default; -$data-table-footer-position: center !default; -$data-table-pagination-dropdown-max-height: 60vh !default; -$data-table-pagination-dropdown-min-width: 6rem !default; +@import "variables"; .pgn__data-table-wrapper { font-size: $font-size-sm; @@ -34,7 +25,7 @@ $data-table-pagination-dropdown-min-width: 6rem !default; .pgn__table-actions { display: flex; - .pgn__datatable__visible-actions { + .pgn__data-table__visible-actions { margin-inline-start: map_get($spacers, 2); .btn { @@ -88,7 +79,7 @@ $data-table-pagination-dropdown-min-width: 6rem !default; left: 0; width: 100%; height: 100%; - background-color: rgba($white, .7); + background-color: $data-table-is-loading-bg; z-index: 1; } } @@ -97,6 +88,7 @@ $data-table-pagination-dropdown-min-width: 6rem !default; display: flex; align-items: flex-start; + // TODO CSS variables cannot be used as media breakpoints @media (max-width: $max-width-xl) { overflow-x: scroll; } @@ -137,12 +129,12 @@ $data-table-pagination-dropdown-min-width: 6rem !default; th { background-color: $light-300; - padding: $data-table-cell-padding; + padding: $data-table-head-cell-padding; text-align: start; } td { - padding: $table-cell-padding; + padding: $data-table-cell-padding; line-height: 24px; text-align: start; } @@ -283,8 +275,8 @@ $data-table-pagination-dropdown-min-width: 6rem !default; z-index: 2; } -.pgn__datatable__overflow-actions-menu { - background: #FFFFFF; +.pgn__data-table__overflow-actions-menu { + background: $white; padding: map_get($spacers, 2); box-shadow: $level-1-box-shadow; border-radius: 4px; diff --git a/src/DataTable/_variables.scss b/src/DataTable/_variables.scss new file mode 100644 index 0000000000..d5d3cb07cc --- /dev/null +++ b/src/DataTable/_variables.scss @@ -0,0 +1,12 @@ +$data-table-background-color: var(--pgn-data-table-background-color) !default; +$data-table-border: var(--pgn-data-table-border) !default; +$data-table-box-shadow: var(--pgn-data-table-box-shadow) !default; +$data-table-padding-x: var(--pgn-data-table-padding-x) !default; +$data-table-padding-y: var(--pgn-data-table-padding-y) !default; +$data-table-padding-small: var(--pgn-data-table-padding-small) !default; +$data-table-head-cell-padding: var(--pgn-data-table-padding-head-cell) !default; +$data-table-cell-padding: var(--pgn-data-table-padding-cell) !default; +$data-table-footer-position: var(--pgn-data-table-footer-position) !default; +$data-table-pagination-dropdown-max-height: var(--pgn-data-table-pagination-dropdown-max-height) !default; +$data-table-pagination-dropdown-min-width: var(--pgn-data-table-pagination-dropdown-min-width) !default; +$data-table-is-loading-bg: var(--pgn-data-table-background-is-loading) !default; diff --git a/src/Dropdown/Dropdown.scss b/src/Dropdown/Dropdown.scss index cd3091a107..7982c3a2e2 100644 --- a/src/Dropdown/Dropdown.scss +++ b/src/Dropdown/Dropdown.scss @@ -38,10 +38,10 @@ } .dropdown-toggle::after { + content: ""; border: 0; border-style: solid; border-width: .15rem .15rem 0 0; - content: ""; height: .45rem; margin-inline-start: .5em; position: relative; diff --git a/src/Dropdown/_variables.scss b/src/Dropdown/_variables.scss index dfc4e9316f..3337c9807e 100644 --- a/src/Dropdown/_variables.scss +++ b/src/Dropdown/_variables.scss @@ -2,32 +2,32 @@ // // Dropdown menu container and contents. -$dropdown-min-width: 18rem !default; -$dropdown-padding-x: 0 !default; -$dropdown-padding-y: .5rem !default; -$dropdown-spacer: .125rem !default; -$dropdown-font-size: $font-size-base !default; -$dropdown-color: $body-color !default; -$dropdown-bg: $white !default; -$dropdown-border-color: rgba($black, .15) !default; -$dropdown-border-radius: $border-radius !default; -$dropdown-border-width: $border-width !default; -$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; -$dropdown-divider-bg: theme-color("gray", "background") !default; -$dropdown-divider-margin-y: calc($spacer / 2) !default; -$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; +$dropdown-min-width: var(--pgn-dropdown-min-width) !default; +$dropdown-padding-x: var(--pgn-dropdown-padding-x-base) !default; +$dropdown-padding-y: var(--pgn-dropdown-padding-y-base) !default; +$dropdown-spacer: var(--pgn-dropdown-spacer) !default; +$dropdown-font-size: var(--pgn-dropdown-font-size) !default; +$dropdown-color: var(--pgn-dropdown-color-base) !default; +$dropdown-bg: var(--pgn-dropdown-bg) !default; +$dropdown-border-color: var(--pgn-dropdown-border-color) !default; +$dropdown-border-radius: var(--pgn-dropdown-border-radius-base) !default; +$dropdown-border-width: var(--pgn-dropdown-border-width) !default; +$dropdown-inner-border-radius: var(--pgn-dropdown-border-radius-inner) !default; +$dropdown-divider-bg: var(--pgn-dropdown-divider-bg) !default; +$dropdown-divider-margin-y: var(--pgn-dropdown-divider-margin-y) !default; +$dropdown-box-shadow: var(--pgn-dropdown-box-shadow) !default; -$dropdown-link-color: theme-color("gray", "dark-text") !default; -$dropdown-link-hover-color: darken(theme-color("gray", "dark-text"), 5%) !default; -$dropdown-link-hover-bg: $light-300 !default; +$dropdown-link-color: var(--pgn-dropdown-link-color) !default; +$dropdown-link-hover-color: var(--pgn-dropdown-link-hover-color) !default; +$dropdown-link-hover-bg: var(--pgn-dropdown-link-hover-bg) !default; -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; +$dropdown-link-active-color: var(--pgn-dropdown-link-active-color) !default; +$dropdown-link-active-bg: var(--pgn-dropdown-link-active-bg) !default; -$dropdown-link-disabled-color: theme-color("gray", "light-text") !default; +$dropdown-link-disabled-color: var(--pgn-dropdown-link-disabled-color) !default; -$dropdown-item-padding-y: .25rem !default; -$dropdown-item-padding-x: 1rem !default; +$dropdown-item-padding-y: var(--pgn-dropdown-padding-y-item) !default; +$dropdown-item-padding-x: var(--pgn-dropdown-padding-x-item) !default; -$dropdown-header-color: theme-color("gray", "light-text") !default; -$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; +$dropdown-header-color: var(--pgn-dropdown-color-header) !default; +$dropdown-header-padding: var(--pgn-dropdown-padding-header) !default; diff --git a/src/Dropzone/_variables.scss b/src/Dropzone/_variables.scss index ee7caed6a4..41a7567004 100644 --- a/src/Dropzone/_variables.scss +++ b/src/Dropzone/_variables.scss @@ -1,9 +1,9 @@ -$dropzone-padding: 1.5rem !default; -$dropzone-border-default: 1px dashed $gray-500 !default; -$dropzone-border-hover: 2px solid $info-300 !default; -$dropzone-border-focus: 2px solid $info-300 !default; -$dropzone-border-active: 2px solid $primary-500 !default; -$dropzone-border-error: 2px solid $danger-300 !default; -$dropzone-error-wrapper-color: $danger-500 !default; -$dropzone-restriction-msg-font-size: $x-small-font-size !default; -$dropzone-restriction-msg-color: $gray-500 !default; +$dropzone-padding: var(--pgn-dropzone-padding) !default; +$dropzone-border-default: var(--pgn-dropzone-border-default) !default; +$dropzone-border-hover: var(--pgn-dropzone-border-hover) !default; +$dropzone-border-focus: var(--pgn-dropzone-border-focus) !default; +$dropzone-border-active: var(--pgn-dropzone-border-active) !default; +$dropzone-border-error: var(--pgn-dropzone-border-error) !default; +$dropzone-error-wrapper-color: var(--pgn-dropzone-error-wrapper-color) !default; +$dropzone-restriction-msg-font-size: var(--pgn-dropzone-restriction-msg-font-size) !default; +$dropzone-restriction-msg-color: var(--pgn-dropzone-restriction-msg-color) !default; diff --git a/src/Fieldset/Fieldset.scss b/src/Fieldset/Fieldset.scss index 5e039319ad..d949419369 100644 --- a/src/Fieldset/Fieldset.scss +++ b/src/Fieldset/Fieldset.scss @@ -1,5 +1,5 @@ .paragon-fieldset { - margin-bottom: $spacer * 1.5; + margin-bottom: calc($spacer * 1.5); .form-control { height: auto; diff --git a/src/Form/_Form.scss b/src/Form/_Form.scss index 6d42e7dccd..13fd452065 100644 --- a/src/Form/_Form.scss +++ b/src/Form/_Form.scss @@ -1,14 +1,11 @@ @import "variables"; @import "~bootstrap/scss/forms"; @import "~bootstrap/scss/input-group"; -@import "~bootstrap/scss/custom-forms"; +@import "bootstrap-custom-forms"; @import "mixins"; @import "FormText"; @import "FormControlSet"; -$form-control-icon-width: 32px !default; -$select-icon-padding: .5625rem !default; - // A form input state used by the now deprecate Fieldset and asInput // we can remove this when they are deleted. .form-control.is-invalid.is-invalid-nodanger { @@ -117,13 +114,13 @@ $select-icon-padding: .5625rem !default; &.pgn__form-control-decorator-leading { inset-inline-start: 0; padding-inline-start: $input-padding-x; - padding-inline-end: calc($input-padding-x / 2); + padding-inline-end: calc(#{$input-padding-x} / 2); } &.pgn__form-control-decorator-trailing { inset-inline-end: 0; - padding-inline-start: calc($input-padding-x / 2); - padding-inline-end: calc(#{$input-padding-y-sm} - #{2 * $input-border-width}); + padding-inline-start: calc(#{$input-padding-x} / 2); + padding-inline-end: calc(#{$input-padding-y-sm} - calc(2 * #{$input-border-width})); } .pgn__form-control-decorator-group-lg & { @@ -137,7 +134,7 @@ $select-icon-padding: .5625rem !default; &.pgn__form-control-decorator-trailing { padding-left: calc($input-padding-x-lg / 2); - padding-right: calc(#{$input-padding-y} - #{2 * $input-border-width}); + padding-right: calc(#{$input-padding-y} - (2 * $input-border-width)); } } @@ -152,7 +149,7 @@ $select-icon-padding: .5625rem !default; &.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-right: calc($input-padding-y-sm - (2 * $input-border-width)); } } @@ -198,7 +195,7 @@ $select-icon-padding: .5625rem !default; // Prevent background-color from being output as "transparent" // Firefox doesn't handle the first animation well from transparent to // a color. Adding an alpha channel smooths it out. - background-color: rgba($input-bg, .01); + background-color: $form-control-floating-label-text-bg; white-space: nowrap; max-width: 75vw; display: block; @@ -215,7 +212,7 @@ $select-icon-padding: .5625rem !default; transform: translateX(#{$form-control-icon-width}); [dir="rtl"] & { - transform: translateX(#{-$form-control-icon-width}); + transform: translateX(calc(-1 * #{$form-control-icon-width})); } } } @@ -319,7 +316,7 @@ $select-icon-padding: .5625rem !default; } select.form-control { - padding-inline-end: 2rem + $select-icon-padding; + padding-inline-end: calc(#{$select-icon-padding} + 2rem); background-image: $custom-select-indicator; background-position: right $select-icon-padding center; background-repeat: no-repeat; @@ -365,7 +362,9 @@ select.form-control { height: $custom-control-indicator-size; width: $custom-control-indicator-size; background-color: $custom-control-indicator-bg; - border: solid $custom-control-indicator-border-width $custom-control-indicator-border-color; + 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; background-position: center; @@ -410,10 +409,10 @@ select.form-control { &:focus::before { content: ""; position: absolute; - top: -$form-check-position-axis; - right: -$form-check-position-axis; - bottom: -$form-check-position-axis; - left: -$form-check-position-axis; + 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; } diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss new file mode 100644 index 0000000000..8d86d34d2d --- /dev/null +++ b/src/Form/_bootstrap-custom-forms.scss @@ -0,0 +1,554 @@ +// Embedded icons from Open Iconic. +// Released under MIT and copyright 2014 Waybury. +// https://useiconic.com/open + + +// Checkboxes and radios +// +// Base class takes care of all the key behavioral aspects. + +.custom-control { + 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}); + print-color-adjust: exact; // Keep themed appearance for print +} + +.custom-control-inline { + display: inline-flex; + margin-right: $custom-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); + opacity: 0; + + &:checked ~ .custom-control-label::before { + color: $custom-control-indicator-checked-color; + border-color: $custom-control-indicator-checked-border-color; + + @include gradient-bg($custom-control-indicator-checked-bg); + @include box-shadow($custom-control-indicator-checked-box-shadow); + } + + &: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; + } + + @else { + box-shadow: $custom-control-indicator-focus-box-shadow; + } + } + + &:focus:not(:checked) ~ .custom-control-label::before { + border-color: $custom-control-indicator-focus-border-color; + } + + &: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; + + @include box-shadow($custom-control-indicator-active-box-shadow); + } + + // 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; + + &::before { + background-color: $custom-control-indicator-disabled-bg; + } + } + } +} + +// Custom control indicators +// +// Build the custom controls out of pseudo-elements. + +.custom-control-label { + position: relative; + margin-bottom: 0; + color: $custom-control-label-color; + vertical-align: top; + cursor: $custom-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); + display: block; + width: $custom-control-indicator-size; + height: $custom-control-indicator-size; + pointer-events: none; + background-color: $custom-control-indicator-bg; + border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color; + + @include box-shadow($custom-control-indicator-box-shadow); + } + + // 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); + display: block; + width: $custom-control-indicator-size; + height: $custom-control-indicator-size; + background: 50% / #{$custom-control-indicator-bg-size} no-repeat; + } +} + + +// Checkboxes +// +// Tweak just a few things for checkboxes. + +.custom-checkbox { + .custom-control-label::before { + @include border-radius($custom-checkbox-indicator-border-radius); + } + + .custom-control-input:checked ~ .custom-control-label { + &::after { + background-image: escape-svg($custom-checkbox-indicator-icon-checked); + } + } + + .custom-control-input:indeterminate ~ .custom-control-label { + &::before { + border-color: $custom-checkbox-indicator-indeterminate-border-color; + + @include gradient-bg($custom-checkbox-indicator-indeterminate-bg); + @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); + } + + &::after { + background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate); + } + } + + .custom-control-input:disabled { + &:checked ~ .custom-control-label::before { + @include gradient-bg($custom-control-indicator-checked-disabled-bg); + } + + &:indeterminate ~ .custom-control-label::before { + @include gradient-bg($custom-control-indicator-checked-disabled-bg); + } + } +} + +// Radios +// +// Tweak just a few things for radios. + +.custom-radio { + .custom-control-label::before { + // stylelint-disable-next-line property-disallowed-list + border-radius: $custom-radio-indicator-border-radius; + } + + .custom-control-input:checked ~ .custom-control-label { + &::after { + background-image: escape-svg($custom-radio-indicator-icon-checked); + } + } + + .custom-control-input:disabled { + &:checked ~ .custom-control-label::before { + @include gradient-bg($custom-control-indicator-checked-disabled-bg); + } + } +} + + +// switches +// +// Tweak a few things for switches + +.custom-switch { + padding-left: calc(#{$custom-switch-width} + #{$custom-control-gutter}); + + .custom-control-label { + &::before { + left: calc(-1 * (#{$custom-switch-width} + #{$custom-control-gutter})); + width: $custom-switch-width; + pointer-events: all; + // stylelint-disable-next-line property-disallowed-list + border-radius: $custom-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)); + // 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; + // stylelint-disable-next-line property-disallowed-list + border-radius: $custom-switch-indicator-border-radius; + + @include transition(transform .15s ease-in-out, $custom-forms-transition); + } + } + + .custom-control-input:checked ~ .custom-control-label { + &::after { + background-color: $custom-control-indicator-bg; + transform: translateX(calc(#{$custom-switch-width} - #{$custom-control-indicator-size})); + } + } + + .custom-control-input:disabled { + &:checked ~ .custom-control-label::before { + @include gradient-bg($custom-control-indicator-checked-disabled-bg); + } + } +} + + +// Select +// +// Replaces the browser default select with a custom one, mostly pulled from +// https://primer.github.io/. +// + +.custom-select { + display: inline-block; + width: 100%; + height: $custom-select-height; + // 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; + vertical-align: middle; + background: $custom-select-bg $custom-select-background; + border: $custom-select-border-width solid $custom-select-border-color; + appearance: none; + + @include font-size($custom-select-font-size); + @include border-radius($custom-select-border-radius,0); + @include box-shadow($custom-select-box-shadow); + + &:focus { + border-color: $custom-select-focus-border-color; + outline: 0; + + @if $enable-shadows { + @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow); + } + + @else { + // Avoid using mixin so we can pass custom focus shadow properly + box-shadow: $custom-select-focus-box-shadow; + } + + &::-ms-value { + // For visual consistency with other platforms/browsers, + // suppress the default white text on blue background highlight given to + // the selected option text when the (still closed)