From dec3f27e529a0cce15a739151f916c59c753d5fe Mon Sep 17 00:00:00 2001 From: Braden MacDonald Date: Thu, 16 Jan 2025 11:11:07 -0800 Subject: [PATCH] chore: address/ignore SCSS warnings from upgraded sass + stylelint * used sass-migrator to auto-fix use of deprecated global functions like mix(), map-merge() * used sass-migrator to auto-fix things like @media query syntax * suppress other SASS deprecation warnings that we cannot fix at this time * update stylelint rules --- .stylelintrc.json | 9 +- build-scss.js | 2 + scss/core/_exports.module.scss | 13 +- scss/core/_functions.scss | 16 +- scss/core/_typography.scss | 3 +- scss/core/_utilities.scss | 3 +- scss/core/_variables.scss | 193 +++++++++--------- src/Alert/_variables.scss | 3 +- src/Annotation/index.scss | 11 +- src/Bubble/index.scss | 5 +- src/Button/index.scss | 37 ++-- src/Card/_variables.scss | 5 +- src/Card/index.scss | 19 +- src/ColorPicker/index.scss | 3 +- src/DataTable/index.scss | 27 +-- src/Dropdown/_variables.scss | 3 +- src/Dropzone/index.scss | 5 +- src/Form/_index.scss | 16 +- src/Form/_variables.scss | 6 +- src/Hyperlink/index.scss | 4 +- src/IconButtonToggle/index.scss | 4 +- src/Modal/_ModalDialog.scss | 4 +- src/Modal/index.scss | 8 +- src/Nav/_mixins.scss | 4 +- src/PageBanner/index.scss | 3 +- src/Popover/_variables.scss | 3 +- src/ProductTour/Checkpoint.scss | 17 +- src/SearchField/index.scss | 3 +- src/Table/_variables.scss | 3 +- src/Toast/ToastContainer.scss | 2 +- src/Toast/index.scss | 4 +- www/build-themes.js | 2 +- www/src/components/Menu.scss | 4 +- www/src/components/Search/Search.scss | 14 +- www/src/components/_CodeBlock.scss | 6 +- .../exampleComponents/ExamplePropsForm.scss | 6 +- www/utils/createCssUtilityClassNodes.js | 1 + 37 files changed, 261 insertions(+), 210 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 5dafbb25a8..75ae3cfdef 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -31,6 +31,13 @@ "ignoreProperties": ["xs", "sm", "md", "lg", "xl", "xxl"] }], "alpha-value-notation": "number", - "color-function-notation": "legacy" + "color-function-notation": "legacy", + "import-notation": "string", + "at-rule-empty-line-before": ["always", { + "except": ["blockless-after-same-name-blockless", "first-nested"], + "ignore": ["after-comment"], + "ignoreAtRules": ["import"] + }], + "declaration-block-no-redundant-longhand-properties": null } } diff --git a/build-scss.js b/build-scss.js index a912a96c8f..19243e79ff 100644 --- a/build-scss.js +++ b/build-scss.js @@ -18,6 +18,8 @@ var coreResult = sass.renderSync({ file: './scss/core/core.scss', outputStyle: 'compressed', importer: tildaImporter, + // For now we can't resolve these warnings as we need to upgrade our 'bootstrap' dependency to do so: + silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin'], }); fs.writeFileSync('./dist/paragon.css', coreResult.css); diff --git a/scss/core/_exports.module.scss b/scss/core/_exports.module.scss index ccb1160dd0..00e3d0b829 100644 --- a/scss/core/_exports.module.scss +++ b/scss/core/_exports.module.scss @@ -1,3 +1,4 @@ +@use "sass:map"; // Grid breakpoints // // Define the minimum dimensions at which your layout will change, @@ -13,10 +14,10 @@ $grid-breakpoints: ( ) !default; :export { - xs: map-get($grid-breakpoints, "xs"); - sm: map-get($grid-breakpoints, "sm"); - md: map-get($grid-breakpoints, "md"); - lg: map-get($grid-breakpoints, "lg"); - xl: map-get($grid-breakpoints, "xl"); - xxl: map-get($grid-breakpoints, "xxl"); + xs: map.get($grid-breakpoints, "xs"); + sm: map.get($grid-breakpoints, "sm"); + md: map.get($grid-breakpoints, "md"); + lg: map.get($grid-breakpoints, "lg"); + xl: map.get($grid-breakpoints, "xl"); + xxl: map.get($grid-breakpoints, "xxl"); } diff --git a/scss/core/_functions.scss b/scss/core/_functions.scss index 3cfa15e758..2dbd129092 100644 --- a/scss/core/_functions.scss +++ b/scss/core/_functions.scss @@ -1,3 +1,5 @@ +@use "sass:map"; +@use "sass:meta"; @import "~bootstrap/scss/functions"; // @@ -15,20 +17,20 @@ $base-color: #808080 !default; $color-level: 500 !default; - @if map-has-key($theme-colors, $color-name) { - $base-color: map-get($theme-colors, $color-name); + @if map.has-key($theme-colors, $color-name) { + $base-color: map.get($theme-colors, $color-name); } - @if type-of($variant) == "number" { + @if meta.type-of($variant) == "number" { $color-level: $variant; } - @else if map-has-key($element-color-levels, $variant) { - $color-level: map-get($element-color-levels, $variant); + @else if map.has-key($element-color-levels, $variant) { + $color-level: map.get($element-color-levels, $variant); } - @if map-has-key($theme-color-levels, "#{$color-name}-#{$color-level}") { - @return map-get($theme-color-levels, "#{$color-name}-#{$color-level}"); + @if map.has-key($theme-color-levels, "#{$color-name}-#{$color-level}") { + @return map.get($theme-color-levels, "#{$color-name}-#{$color-level}"); } @return $base-color; diff --git a/scss/core/_typography.scss b/scss/core/_typography.scss index 1bc648d691..457df57c5b 100644 --- a/scss/core/_typography.scss +++ b/scss/core/_typography.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @import "~bootstrap/scss/type"; @mixin mobile-type { @@ -40,7 +41,7 @@ } } -@media (max-width: map-get($grid-breakpoints, "sm")) { +@media (max-width: map.get($grid-breakpoints, "sm")) { @include mobile-type; } diff --git a/scss/core/_utilities.scss b/scss/core/_utilities.scss index 254c484c7c..b72fd936be 100644 --- a/scss/core/_utilities.scss +++ b/scss/core/_utilities.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @import "~bootstrap/scss/utilities"; // Add background, border, and text color utilities @@ -81,7 +82,7 @@ $color-levels: 100, 200, 300, 400, 500, 600, 700, 800, 900; // Define classes for z-index $indexes: () !default; -$indexes: map-merge( +$indexes: map.merge( ( 0: 0, 1: 200, diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss index c53894661e..e5e1f0d668 100644 --- a/scss/core/_variables.scss +++ b/scss/core/_variables.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "sass:list"; +@use "sass:map"; // Variables // // Variables should follow the `$component-state-property-size` formula for @@ -18,7 +21,7 @@ $gray-900: #212529 !default; $black: #000000 !default; $grays: () !default; -$grays: map-merge( +$grays: map.merge( ( "100": $gray-100, "200": $gray-200, @@ -40,7 +43,7 @@ $green: #178253 !default; $teal: #006DAA !default; $colors: () !default; -$colors: map-merge( +$colors: map.merge( ( "blue": $blue, "green": $green, @@ -67,7 +70,7 @@ $accent-a: #00BBF9 !default; $accent-b: #FFEE88 !default; $theme-colors: () !default; -$theme-colors: map-merge( +$theme-colors: map.merge( ( "primary": $primary, "secondary": $secondary, @@ -85,99 +88,99 @@ $theme-colors: map-merge( $theme-colors ); -$primary-100: mix(white, $primary, 94%) !default; -$primary-200: mix(white, $primary, 75%) !default; -$primary-300: mix(white, $primary, 50%) !default; -$primary-400: mix(white, $primary, 25%) !default; +$primary-100: color.mix(white, $primary, 94%) !default; +$primary-200: color.mix(white, $primary, 75%) !default; +$primary-300: color.mix(white, $primary, 50%) !default; +$primary-400: color.mix(white, $primary, 25%) !default; $primary-500: $primary !default; -$primary-600: mix(black, $primary, 10%) !default; -$primary-700: mix(black, $primary, 20%) !default; -$primary-800: mix(black, $primary, 25%) !default; -$primary-900: mix(black, $primary, 30%) !default; - -$secondary-100: mix(white, $secondary, 94%) !default; -$secondary-200: mix(white, $secondary, 75%) !default; -$secondary-300: mix(white, $secondary, 50%) !default; -$secondary-400: mix(white, $secondary, 25%) !default; +$primary-600: color.mix(black, $primary, 10%) !default; +$primary-700: color.mix(black, $primary, 20%) !default; +$primary-800: color.mix(black, $primary, 25%) !default; +$primary-900: color.mix(black, $primary, 30%) !default; + +$secondary-100: color.mix(white, $secondary, 94%) !default; +$secondary-200: color.mix(white, $secondary, 75%) !default; +$secondary-300: color.mix(white, $secondary, 50%) !default; +$secondary-400: color.mix(white, $secondary, 25%) !default; $secondary-500: $secondary !default; -$secondary-600: mix(black, $secondary, 10%) !default; -$secondary-700: mix(black, $secondary, 20%) !default; -$secondary-800: mix(black, $secondary, 25%) !default; -$secondary-900: mix(black, $secondary, 30%) !default; - -$brand-100: mix(white, $brand, 94%) !default; -$brand-200: mix(white, $brand, 75%) !default; -$brand-300: mix(white, $brand, 50%) !default; -$brand-400: mix(white, $brand, 25%) !default; +$secondary-600: color.mix(black, $secondary, 10%) !default; +$secondary-700: color.mix(black, $secondary, 20%) !default; +$secondary-800: color.mix(black, $secondary, 25%) !default; +$secondary-900: color.mix(black, $secondary, 30%) !default; + +$brand-100: color.mix(white, $brand, 94%) !default; +$brand-200: color.mix(white, $brand, 75%) !default; +$brand-300: color.mix(white, $brand, 50%) !default; +$brand-400: color.mix(white, $brand, 25%) !default; $brand-500: $brand !default; -$brand-600: mix(black, $brand, 10%) !default; -$brand-700: mix(black, $brand, 20%) !default; -$brand-800: mix(black, $brand, 25%) !default; -$brand-900: mix(black, $brand, 30%) !default; - -$success-100: mix(white, $success, 94%) !default; -$success-200: mix(white, $success, 75%) !default; -$success-300: mix(white, $success, 50%) !default; -$success-400: mix(white, $success, 25%) !default; +$brand-600: color.mix(black, $brand, 10%) !default; +$brand-700: color.mix(black, $brand, 20%) !default; +$brand-800: color.mix(black, $brand, 25%) !default; +$brand-900: color.mix(black, $brand, 30%) !default; + +$success-100: color.mix(white, $success, 94%) !default; +$success-200: color.mix(white, $success, 75%) !default; +$success-300: color.mix(white, $success, 50%) !default; +$success-400: color.mix(white, $success, 25%) !default; $success-500: $success !default; -$success-600: mix(black, $success, 10%) !default; -$success-700: mix(black, $success, 20%) !default; -$success-800: mix(black, $success, 25%) !default; -$success-900: mix(black, $success, 30%) !default; - -$info-100: mix(white, $info, 94%) !default; -$info-200: mix(white, $info, 75%) !default; -$info-300: mix(white, $info, 50%) !default; -$info-400: mix(white, $info, 25%) !default; +$success-600: color.mix(black, $success, 10%) !default; +$success-700: color.mix(black, $success, 20%) !default; +$success-800: color.mix(black, $success, 25%) !default; +$success-900: color.mix(black, $success, 30%) !default; + +$info-100: color.mix(white, $info, 94%) !default; +$info-200: color.mix(white, $info, 75%) !default; +$info-300: color.mix(white, $info, 50%) !default; +$info-400: color.mix(white, $info, 25%) !default; $info-500: $info !default; -$info-600: mix(black, $info, 10%) !default; -$info-700: mix(black, $info, 20%) !default; -$info-800: mix(black, $info, 25%) !default; -$info-900: mix(black, $info, 30%) !default; - -$warning-100: mix(white, $warning, 94%) !default; -$warning-200: mix(white, $warning, 75%) !default; -$warning-300: mix(white, $warning, 50%) !default; -$warning-400: mix(white, $warning, 25%) !default; +$info-600: color.mix(black, $info, 10%) !default; +$info-700: color.mix(black, $info, 20%) !default; +$info-800: color.mix(black, $info, 25%) !default; +$info-900: color.mix(black, $info, 30%) !default; + +$warning-100: color.mix(white, $warning, 94%) !default; +$warning-200: color.mix(white, $warning, 75%) !default; +$warning-300: color.mix(white, $warning, 50%) !default; +$warning-400: color.mix(white, $warning, 25%) !default; $warning-500: $warning !default; -$warning-600: mix(black, $warning, 10%) !default; -$warning-700: mix(black, $warning, 20%) !default; -$warning-800: mix(black, $warning, 25%) !default; -$warning-900: mix(black, $warning, 30%) !default; - -$danger-100: mix(white, $danger, 94%) !default; -$danger-200: mix(white, $danger, 75%) !default; -$danger-300: mix(white, $danger, 50%) !default; -$danger-400: mix(white, $danger, 25%) !default; +$warning-600: color.mix(black, $warning, 10%) !default; +$warning-700: color.mix(black, $warning, 20%) !default; +$warning-800: color.mix(black, $warning, 25%) !default; +$warning-900: color.mix(black, $warning, 30%) !default; + +$danger-100: color.mix(white, $danger, 94%) !default; +$danger-200: color.mix(white, $danger, 75%) !default; +$danger-300: color.mix(white, $danger, 50%) !default; +$danger-400: color.mix(white, $danger, 25%) !default; $danger-500: $danger !default; -$danger-600: mix(black, $danger, 10%) !default; -$danger-700: mix(black, $danger, 20%) !default; -$danger-800: mix(black, $danger, 25%) !default; -$danger-900: mix(black, $danger, 30%) !default; - -$light-100: mix(white, $light, 94%) !default; -$light-200: mix(white, $light, 75%) !default; -$light-300: mix(white, $light, 50%) !default; -$light-400: mix(white, $light, 25%) !default; +$danger-600: color.mix(black, $danger, 10%) !default; +$danger-700: color.mix(black, $danger, 20%) !default; +$danger-800: color.mix(black, $danger, 25%) !default; +$danger-900: color.mix(black, $danger, 30%) !default; + +$light-100: color.mix(white, $light, 94%) !default; +$light-200: color.mix(white, $light, 75%) !default; +$light-300: color.mix(white, $light, 50%) !default; +$light-400: color.mix(white, $light, 25%) !default; $light-500: $light !default; -$light-600: mix(black, $light, 10%) !default; -$light-700: mix(black, $light, 20%) !default; -$light-800: mix(black, $light, 25%) !default; -$light-900: mix(black, $light, 30%) !default; - -$dark-100: mix(white, $dark, 94%) !default; -$dark-200: mix(white, $dark, 75%) !default; -$dark-300: mix(white, $dark, 50%) !default; -$dark-400: mix(white, $dark, 25%) !default; +$light-600: color.mix(black, $light, 10%) !default; +$light-700: color.mix(black, $light, 20%) !default; +$light-800: color.mix(black, $light, 25%) !default; +$light-900: color.mix(black, $light, 30%) !default; + +$dark-100: color.mix(white, $dark, 94%) !default; +$dark-200: color.mix(white, $dark, 75%) !default; +$dark-300: color.mix(white, $dark, 50%) !default; +$dark-400: color.mix(white, $dark, 25%) !default; $dark-500: $dark !default; -$dark-600: mix(black, $dark, 10%) !default; -$dark-700: mix(black, $dark, 20%) !default; -$dark-800: mix(black, $dark, 25%) !default; -$dark-900: mix(black, $dark, 30%) !default; +$dark-600: color.mix(black, $dark, 10%) !default; +$dark-700: color.mix(black, $dark, 20%) !default; +$dark-800: color.mix(black, $dark, 25%) !default; +$dark-900: color.mix(black, $dark, 30%) !default; $theme-color-levels: () !default; -$theme-color-levels: map-merge( +$theme-color-levels: map.merge( ( "gray-100": $gray-100, "gray-200": $gray-200, @@ -275,7 +278,7 @@ $theme-color-levels: map-merge( $element-color-levels: () !default; -$element-color-levels: map-merge( +$element-color-levels: map.merge( ( "background": 100, "disabled-border": 100, @@ -341,7 +344,7 @@ $enable-deprecation-messages: true !default; $spacer: 1rem !default; $spacers: () !default; // stylelint-disable-next-line scss/dollar-variable-default -$spacers: map-merge( +$spacers: map.merge( ( 0: 0, 1: ($spacer * .25), @@ -362,7 +365,7 @@ $spacers: map-merge( // This variable affects the `.h-*` and `.w-*` classes. $sizes: () !default; // stylelint-disable-next-line scss/dollar-variable-default -$sizes: map-merge( +$sizes: map.merge( ( 25: 25%, 50: 50%, @@ -386,34 +389,34 @@ $body-color: $gray-700 !default; $link-color: $info-500 !default; $link-decoration: none !default; -$link-hover-color: darken($link-color, 15%) !default; +$link-hover-color: color.adjust($link-color, $lightness: -15%) !default; $link-hover-decoration: underline !default; $inline-link-color: $info-500 !default; $inline-link-decoration: underline !default; $inline-link-decoration-color: rgba($inline-link-color, .3) !default; -$inline-link-hover-color: darken($inline-link-color, 15%) !default; +$inline-link-hover-color: color.adjust($inline-link-color, $lightness: -15%) !default; $inline-link-hover-decoration: underline !default; $inline-link-hover-decoration-color: rgba($inline-link-hover-color, 1) !default; $muted-link-color: $primary-500 !default; $muted-link-decoration: none !default; -$muted-link-hover-color: darken($muted-link-color, 15%) !default; +$muted-link-hover-color: color.adjust($muted-link-color, $lightness: -15%) !default; $muted-link-hover-decoration: underline !default; $muted-inline-link-color: $primary-500 !default; $muted-inline-link-decoration: underline !default; $muted-inline-link-decoration-color: rgba($muted-inline-link-color, .3) !default; -$muted-inline-link-hover-color: darken($muted-inline-link-color, 15%) !default; +$muted-inline-link-hover-color: color.adjust($muted-inline-link-color, $lightness: -15%) !default; $muted-inline-link-hover-decoration: underline !default; $muted-inline-link-hover-decoration-color: rgba($muted-inline-link-hover-color, 1) !default; $brand-link-color: $brand-500 !default; $brand-link-decoration: none !default; -$brand-link-hover-color: darken($brand-link-color, 15%) !default; +$brand-link-hover-color: color.adjust($brand-link-color, $lightness: -15%) !default; $brand-link-hover-decoration: underline !default; $brand-inline-link-color: $brand-500 !default; $brand-inline-link-decoration: underline !default; $brand-inline-link-decoration-color: rgba($brand-inline-link-color, .3) !default; -$brand-inline-link-hover-color: darken($brand-inline-link-color, 15%) !default; +$brand-inline-link-hover-color: color.adjust($brand-inline-link-color, $lightness: -15%) !default; $brand-inline-link-hover-decoration: underline !default; $brand-inline-link-hover-decoration-color: rgba($brand-inline-link-hover-color, 1) !default; @@ -674,7 +677,7 @@ $transition-collapse-width: width .35s ease !default; $embed-responsive-aspect-ratios: () !default; // stylelint-disable-next-line scss/dollar-variable-default -$embed-responsive-aspect-ratios: join( +$embed-responsive-aspect-ratios: list.join( ( (21 9), (16 9), @@ -847,7 +850,7 @@ $user-selects: all, auto, none !default; // Printing $print-page-size: a3 !default; -$print-body-min-width: map-get($grid-breakpoints, "lg") !default; +$print-body-min-width: map.get($grid-breakpoints, "lg") !default; // List group diff --git a/src/Alert/_variables.scss b/src/Alert/_variables.scss index 493a06fece..9afc85851b 100644 --- a/src/Alert/_variables.scss +++ b/src/Alert/_variables.scss @@ -1,3 +1,4 @@ +@use "sass:map"; // Alerts // // Define alert colors, border radius, and padding. @@ -21,4 +22,4 @@ $alert-font-size: .875rem !default; $alert-line-height: 1.5rem !default; $alert-content-color: $gray-700 !default; -$alert-actions-gap: map-get($spacers, 3); +$alert-actions-gap: map.get($spacers, 3); diff --git a/src/Annotation/index.scss b/src/Annotation/index.scss index bdfefa7136..ae6c91880a 100644 --- a/src/Annotation/index.scss +++ b/src/Annotation/index.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @import "variables"; @mixin triangle($color, $direction) { @@ -66,8 +67,8 @@ $arrow-directions: top, right, bottom, left; @each $name, $colors in $annotation-variants { @each $direction in $arrow-directions { .pgn__annotation-#{$name}-#{$direction} { - background-color: map-get($colors, "background-color"); - color: map-get($colors, "color"); + background-color: map.get($colors, "background-color"); + color: map.get($colors, "color"); // set additional margin to arrow side of the Annotation margin-#{$direction}: $annotation-arrow-border-width + $annotation-arrow-side-margin; @@ -85,7 +86,7 @@ $arrow-directions: top, right, bottom, left; } &::after { - @include triangle(map-get($colors, "background-color"), $direction); + @include triangle(map.get($colors, "background-color"), $direction); [dir="rtl"] & { @if $direction == left { @@ -94,7 +95,7 @@ $arrow-directions: top, right, bottom, left; border-width: $annotation-arrow-border-width 0 $annotation-arrow-border-width $annotation-arrow-border-width; - border-left-color: map-get($colors, "background-color"); + border-left-color: map.get($colors, "background-color"); } @else if $direction == right { @@ -103,7 +104,7 @@ $arrow-directions: top, right, bottom, left; border-width: $annotation-arrow-border-width $annotation-arrow-border-width $annotation-arrow-border-width 0; - border-right-color: map-get($colors, "background-color"); + border-right-color: map.get($colors, "background-color"); } } } diff --git a/src/Bubble/index.scss b/src/Bubble/index.scss index c176a95097..122db27625 100644 --- a/src/Bubble/index.scss +++ b/src/Bubble/index.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @import "variables"; .pgn__bubble { @@ -12,8 +13,8 @@ @each $name, $colors in $bubble-variants { &.pgn__bubble-#{$name} { - background-color: map-get($colors, "background-color"); - color: map-get($colors, "color"); + background-color: map.get($colors, "background-color"); + color: map.get($colors, "color"); } } diff --git a/src/Button/index.scss b/src/Button/index.scss index 957e2dd159..dc33931f8e 100644 --- a/src/Button/index.scss +++ b/src/Button/index.scss @@ -1,10 +1,11 @@ +@use "sass:color"; @import "variables"; @import "~bootstrap/scss/button-group"; @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), + $background, $border, $hover-background: color.adjust($background, $lightness: -7.5%), + $hover-border: color.adjust($border, $lightness: -10%), $active-background: color.adjust($background, $lightness: -10%), + $active-border: color.adjust($border, $lightness: -12.5%), $color: color-yiq($background), $hover-color: color-yiq($hover-background), $active-color: color-yiq($active-background) ) { color: $color; @@ -36,8 +37,8 @@ } } - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, + &:not(:disabled, .disabled):active, + &:not(:disabled, .disabled).active, .show > &.dropdown-toggle { color: $active-color; background-color: $active-background; @@ -71,8 +72,8 @@ border-color: $color; } - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, + &:not(:disabled, .disabled):active, + &:not(:disabled, .disabled).active, .show > &.dropdown-toggle { color: color-yiq($active-background); background-color: $active-background; @@ -109,10 +110,10 @@ border-color: transparent; background-color: $background; - &:not(:disabled):not(.disabled) { + &:not(:disabled, .disabled) { @include hover { - color: darken($color, 7.5%); - background-color: darken($background, 7.5%); + color: color.adjust($color, $lightness: -7.5%); + background-color: color.adjust($background, $lightness: -7.5%); border-color: transparent; } } @@ -123,10 +124,10 @@ background-color: $background; } - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, + &:not(:disabled, .disabled):active, + &:not(:disabled, .disabled).active, .show > &.dropdown-toggle { - color: darken($color, 10%); + color: color.adjust($color, $lightness: -10%); background: #EEEEEE; } } @@ -256,10 +257,10 @@ fieldset:disabled a.btn { $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; + $hover-background: color.adjust($background, $lightness: -7.5%) !default; + $hover-border: color.adjust($border, $lightness: -10%) !default; + $active-background: color.adjust($background, $lightness: -10%) !default; + $active-border: color.adjust($border, $lightness: -12.5%) !default; @include button-variant( $background, @@ -476,7 +477,7 @@ input[type="button"] { } } -[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle), +[dir="rtl"] .btn-group > .btn:not(:last-child, .dropdown-toggle), [dir="rtl"] .btn-group > .btn-group:not(:last-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss index 703e99dc26..ebbcb80824 100644 --- a/src/Card/_variables.scss +++ b/src/Card/_variables.scss @@ -1,3 +1,4 @@ +@use "sass:map"; // Card $card-spacer-y: .75rem !default; @@ -21,8 +22,8 @@ $card-img-overlay-padding: 1.25rem !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-deck-margin-bottom: map_get($spacers, 3) !default; -$card-grid-margin-bottom: map_get($spacers, 3) !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; diff --git a/src/Card/index.scss b/src/Card/index.scss index 74bb2095bf..3c6a889cc4 100644 --- a/src/Card/index.scss +++ b/src/Card/index.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @import "variables"; @import "~bootstrap/scss/card"; @@ -51,19 +52,19 @@ a.pgn__card { .pgn__card-carousel { .pgn__card-carousel-title { - margin-bottom: map-get($spacers, 2); + margin-bottom: map.get($spacers, 2); } .pgn__card-carousel-subtitle { font-size: $font-size-sm; - margin-bottom: map-get($spacers, 2); + margin-bottom: map.get($spacers, 2); } .pgn__card-carousel-header { display: flex; align-items: center; justify-content: space-between; - margin-bottom: map-get($spacers, 1); + margin-bottom: map.get($spacers, 1); } } @@ -118,7 +119,7 @@ a.pgn__card { .pgn__card-header-content { display: flex; flex-direction: column; - margin-top: map_get($spacers, 4\.5); + margin-top: map.get($spacers, 4\.5); overflow: auto; text-align: start; width: 100%; @@ -146,7 +147,7 @@ a.pgn__card { %header-subtitle { color: $gray-700; - margin-top: map_get($spacers, 1); + margin-top: map.get($spacers, 1); } .pgn__card-header-subtitle, @@ -173,7 +174,7 @@ a.pgn__card { width: 100%; .react-loading-skeleton { - margin-top: map-get($spacers, 4); + margin-top: map.get($spacers, 4); } } } @@ -357,7 +358,7 @@ a.pgn__card { object-position: center center; border-radius: $card-logo-border-radius; box-shadow: $level-1-box-shadow; - padding: map_get($spacers, 2); + padding: map.get($spacers, 2); background-color: $white; display: none; @@ -391,7 +392,7 @@ a.pgn__card { } .pgn__card-status__actions { - margin-top: map-get($spacers, 3); + margin-top: map.get($spacers, 3); } .pgn__card-status__heading { @@ -485,7 +486,7 @@ a.pgn__card { } } -@media (max-width: map-get($grid-breakpoints, "sm")) { +@media (max-width: map.get($grid-breakpoints, "sm")) { .pgn__card-footer { &.horizontal > :not(:last-child) { margin-inline-end: 0; diff --git a/src/ColorPicker/index.scss b/src/ColorPicker/index.scss index 9504df4dfc..08009ae656 100644 --- a/src/ColorPicker/index.scss +++ b/src/ColorPicker/index.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @import "variables"; .pgn__color-picker { @@ -55,7 +56,7 @@ } .pgn__hex-field { - @media (min-width: map-get($grid-breakpoints, "sm")) { + @media (min-width: map.get($grid-breakpoints, "sm")) { margin-inline-end: 0; } } diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss index fcaac080de..4287bde754 100644 --- a/src/DataTable/index.scss +++ b/src/DataTable/index.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @import "variables"; .pgn__data-table-wrapper { @@ -26,10 +27,10 @@ display: flex; .pgn__datatable__visible-actions { - margin-inline-start: map_get($spacers, 2); + margin-inline-start: map.get($spacers, 2); .btn { - margin-inline-start: map_get($spacers, 2); + margin-inline-start: map.get($spacers, 2); &:first-child { margin-inline-start: 0; @@ -57,7 +58,7 @@ width: 100%; display: flex; align-items: center; - margin-top: map_get($spacers, 4); + margin-top: map.get($spacers, 4); } .pgn__icon-button-toggle__container { @@ -97,18 +98,18 @@ border-radius: $border-radius; box-shadow: $data-table-box-shadow; padding: $data-table-padding-small; - margin-right: map_get($spacers, 4); + margin-right: map.get($spacers, 4); flex: 0 0 $data-table-layout-sidebar-width; } .pgn__data-table-side-filters { .pgn__data-table-side-filters-title { - margin-bottom: map_get($spacers, 3); + margin-bottom: map.get($spacers, 3); text-align: start; } .pgn__data-table-side-filters-status { - margin-bottom: map_get($spacers, 2); + margin-bottom: map.get($spacers, 2); display: flex; justify-content: flex-end; } @@ -175,7 +176,7 @@ } .pgn__data-table-filters-breakout-filter { - margin-inline-end: map_get($spacers, 2); + margin-inline-end: map.get($spacers, 2); } .pgn__data-table-filters-dropdown-item { @@ -264,12 +265,12 @@ padding: 0 $data-table-padding-x; .pgn__data-table-card-view-default-skeleton-card-section { - margin-top: map_get($spacers, 2); + margin-top: map.get($spacers, 2); } } .pgn__data-table__action-btn { - margin-left: map_get($spacers, 2); + margin-left: map.get($spacers, 2); &:first-child { margin-left: 0; @@ -287,7 +288,7 @@ .pgn__datatable__overflow-actions-menu { background: #FFFFFF; - padding: map_get($spacers, 2); + padding: map.get($spacers, 2); box-shadow: $level-1-box-shadow; border-radius: 4px; } @@ -309,10 +310,10 @@ &.selection-right { > :first-child { - margin-right: map_get($spacers, 2); + margin-right: map.get($spacers, 2); [dir="rtl"] & { - margin-left: map_get($spacers, 2); + margin-left: map.get($spacers, 2); margin-right: 0; } } @@ -326,5 +327,5 @@ .pgn__data-table__controlled-select { display: flex; align-content: center; - padding: map_get($spacers, 1); + padding: map.get($spacers, 1); } diff --git a/src/Dropdown/_variables.scss b/src/Dropdown/_variables.scss index dfc4e9316f..d8086686d2 100644 --- a/src/Dropdown/_variables.scss +++ b/src/Dropdown/_variables.scss @@ -1,3 +1,4 @@ +@use "sass:color"; // Dropdowns // // Dropdown menu container and contents. @@ -18,7 +19,7 @@ $dropdown-divider-margin-y: calc($spacer / 2) !default; $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; $dropdown-link-color: theme-color("gray", "dark-text") !default; -$dropdown-link-hover-color: darken(theme-color("gray", "dark-text"), 5%) !default; +$dropdown-link-hover-color: color.adjust(theme-color("gray", "dark-text"), $lightness: -5%) !default; $dropdown-link-hover-bg: $light-300 !default; $dropdown-link-active-color: $component-active-color !default; diff --git a/src/Dropzone/index.scss b/src/Dropzone/index.scss index 07601791ce..3ff864d87f 100644 --- a/src/Dropzone/index.scss +++ b/src/Dropzone/index.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @import "variables"; .pgn__dropzone { @@ -41,7 +42,7 @@ .pgn__dropzone-generic-alert { width: 100%; - margin-bottom: map_get($spacers, 4); + margin-bottom: map.get($spacers, 4); .pgn__alert-message-wrapper .alert-message-content { > span { @@ -56,7 +57,7 @@ background: $light-300; border-radius: 50%; position: relative; - margin-bottom: map-get($spacers, 4); + margin-bottom: map.get($spacers, 4); } .pgn__dropzone__upload-icon { diff --git a/src/Form/_index.scss b/src/Form/_index.scss index 6ce41363c4..855775977f 100644 --- a/src/Form/_index.scss +++ b/src/Form/_index.scss @@ -1,3 +1,5 @@ +@use "sass:map"; +@use "sass:string"; @import "variables"; @import "~bootstrap/scss/forms"; @import "~bootstrap/scss/input-group"; @@ -60,7 +62,7 @@ $select-icon-padding: .5625rem !default; } } - @media (min-width: map-get($grid-breakpoints, "sm")) { + @media (min-width: map.get($grid-breakpoints, "sm")) { margin-inline-end: $custom-control-gutter; } @@ -306,7 +308,7 @@ $select-icon-padding: .5625rem !default; text-align: right; } - &:not(:focus):not(.has-value) { + &:not(:focus, .has-value) { color: transparent; } @@ -318,17 +320,17 @@ $select-icon-padding: .5625rem !default; } } - .form-control:not(:focus):not(.has-value) { + .form-control:not(:focus, .has-value) { &::placeholder, &::-webkit-datetime-edit { opacity: 0; } } - select.form-control:not(.has-value):not(:focus) { + select.form-control:not(.has-value, :focus) { // color: rgba(0,0,0,0); Force the rgba syntax to appear in the output rather // than transparent. IE11 does not understand color: transparent here. - color: unquote("rgba(0,0,0,0)"); + color: string.unquote("rgba(0,0,0,0)"); } } @@ -545,7 +547,7 @@ select.form-control { .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text, .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .btn, .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .input-group-text, -.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group > .input-group-append:last-child > .btn:not(:last-child, .dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { [dir="rtl"] & { border-radius: 0 $input-border-radius $input-border-radius 0; @@ -588,7 +590,7 @@ select.form-control { .pgn__form-autosuggest__dropdown { @include pgn-box-shadow(1, "centered"); - @media (min-width: map-get($grid-breakpoints, "sm")) { + @media (min-width: map.get($grid-breakpoints, "sm")) { margin-inline-end: $custom-control-gutter; } diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss index 1a29fbf9b6..a9cde7d0db 100644 --- a/src/Form/_variables.scss +++ b/src/Form/_variables.scss @@ -1,3 +1,5 @@ +@use "sass:color"; +@use "sass:map"; $input-padding-y: $input-btn-padding-y !default; $input-padding-x: $input-btn-padding-x !default; $input-font-family: $input-btn-font-family !default; @@ -198,7 +200,7 @@ $custom-range-thumb-border-radius: 1rem !default; $custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; $custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default; $custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge -$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; +$custom-range-thumb-active-bg: color.adjust($component-active-bg, $lightness: 35%) !default; $custom-range-thumb-disabled-bg: theme-color("gray", "default") !default; $custom-file-height: $input-height !default; @@ -238,7 +240,7 @@ $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,%3csvg x $form-validation-states: () !default; // stylelint-disable-next-line scss/dollar-variable-default -$form-validation-states: map-merge( +$form-validation-states: map.merge( ( "valid": ( "color": $form-feedback-valid-color, diff --git a/src/Hyperlink/index.scss b/src/Hyperlink/index.scss index 1a17eba9c2..c3fa069f59 100644 --- a/src/Hyperlink/index.scss +++ b/src/Hyperlink/index.scss @@ -1,9 +1,11 @@ +@use "sass:map"; + .pgn__hyperlink { display: inline-flex; align-items: center; text-align: start; &__external-icon { - margin-inline-start: map_get($spacers, 2); + margin-inline-start: map.get($spacers, 2); } } diff --git a/src/IconButtonToggle/index.scss b/src/IconButtonToggle/index.scss index 3895f83b57..2aa71651ee 100644 --- a/src/IconButtonToggle/index.scss +++ b/src/IconButtonToggle/index.scss @@ -1,7 +1,9 @@ +@use "sass:map"; + .pgn__icon-button-toggle__container { display: flex; .btn-icon + .btn-icon { - margin-inline-start: map_get($spacers, 1); + margin-inline-start: map.get($spacers, 1); } } diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss index 31ab661e2a..1fde41fbe9 100644 --- a/src/Modal/_ModalDialog.scss +++ b/src/Modal/_ModalDialog.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + .pgn__modal { background: $modal-content-bg; border-radius: $modal-content-inner-border-radius; @@ -315,7 +317,7 @@ .pgn__alert-modal__title_icon { flex-shrink: 0; - margin-right: map-get($spacers, 2\.5); + margin-right: map.get($spacers, 2\.5); } } } diff --git a/src/Modal/index.scss b/src/Modal/index.scss index 6d8aae5209..3974649dfa 100644 --- a/src/Modal/index.scss +++ b/src/Modal/index.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @import "variables"; @import "~bootstrap/scss/modal"; @import "ModalDialog"; @@ -19,12 +20,9 @@ .pgn__modal-backdrop { background: $modal-backdrop-bg; - bottom: 0; - left: 0; + inset: 0; opacity: $modal-backdrop-opacity; position: fixed; - right: 0; - top: 0; z-index: 0; } @@ -88,7 +86,7 @@ margin: auto; padding: calc($spacer / 2); - @media (min-width: map-get($grid-breakpoints, "sm")) { + @media (min-width: map.get($grid-breakpoints, "sm")) { padding: $spacer; } } diff --git a/src/Nav/_mixins.scss b/src/Nav/_mixins.scss index 7c3900e461..07dafce1a3 100644 --- a/src/Nav/_mixins.scss +++ b/src/Nav/_mixins.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + @mixin nav-tabs-link-focus( $border-color, $radius: $nav-tabs-border-radius, @@ -5,7 +7,7 @@ ) { position: relative; outline: 0; - z-index: map-get($map: $indexes, $key: 1); + z-index: map.get($map: $indexes, $key: 1); &::before { content: ""; diff --git a/src/PageBanner/index.scss b/src/PageBanner/index.scss index 229dbda334..de9fa0580a 100644 --- a/src/PageBanner/index.scss +++ b/src/PageBanner/index.scss @@ -1,3 +1,4 @@ +@use "sass:map"; // stylelint-disable-next-line selector-class-pattern .pgn__pageBanner-component { width: 100%; @@ -46,7 +47,7 @@ flex-grow: 1; justify-content: center; align-items: center; - padding: map_get($spacers, 2) map_get($spacers, 2\.5); + padding: map.get($spacers, 2) map.get($spacers, 2\.5); text-align: center; } diff --git a/src/Popover/_variables.scss b/src/Popover/_variables.scss index 869f00f212..bc9cc0bc67 100644 --- a/src/Popover/_variables.scss +++ b/src/Popover/_variables.scss @@ -1,3 +1,4 @@ +@use "sass:color"; // Popovers $popover-font-size: $font-size-sm !default; @@ -26,7 +27,7 @@ $popover-arrow-width: 1rem !default; $popover-arrow-height: .5rem !default; $popover-arrow-color: $popover-bg !default; -$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; +$popover-arrow-outer-color: color.adjust($popover-border-color, $alpha: .05) !default; $popover-success-bg: $success-100 !default; $popover-success-icon-color: $success-500 !default; diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss index 5a2940274c..cb7d16eeea 100644 --- a/src/ProductTour/Checkpoint.scss +++ b/src/ProductTour/Checkpoint.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @import "variables"; $checkpoint-arrow-top-color: solid $checkpoint-arrow-width $checkpoint-border-color; @@ -9,12 +10,12 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; background: $checkpoint-background-color; border-top: $checkpoint-border-width solid $checkpoint-border-color; border-radius: $border-radius; - padding: map_get($spacers, 4); + padding: map.get($spacers, 4); box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3); z-index: $checkpoint-z-index; max-width: $checkpoint-max-width; - @media (max-width: map-get($grid-breakpoints, "md")) { + @media (max-width: map.get($grid-breakpoints, "md")) { min-width: 90%; max-width: 90%; } @@ -43,7 +44,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; } .pgn__checkpoint-button_dismiss { - margin-inline-end: map_get($spacers, 2); + margin-inline-end: map.get($spacers, 2); } .pgn__checkpoint-breadcrumb { @@ -61,11 +62,11 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; } &:not(:first-child) { - margin-left: map_get($spacers, 1\.5); + margin-left: map.get($spacers, 1\.5); } [dir="rtl"] & { - margin-left: map_get($spacers, 1\.5); + margin-left: map.get($spacers, 1\.5); margin-right: 0; &:last-child { @@ -81,19 +82,19 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; .pgn__checkpoint-body { color: $checkpoint-body-color; - margin-bottom: map_get($spacers, 3\.5); + margin-bottom: map.get($spacers, 3\.5); text-align: start; } .pgn__checkpoint-header { display: flex; justify-content: space-between; - margin-bottom: map_get($spacers, 2\.5); + margin-bottom: map.get($spacers, 2\.5); } #pgn__checkpoint-title { font-size: $h3-font-size; - margin-inline-end: map_get($spacers, 2\.5); + margin-inline-end: map.get($spacers, 2\.5); margin-bottom: 0; } } diff --git a/src/SearchField/index.scss b/src/SearchField/index.scss index db467466ae..3f10624935 100644 --- a/src/SearchField/index.scss +++ b/src/SearchField/index.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @import "variables"; .pgn__searchfield { @@ -129,5 +130,5 @@ .pgn__searchfield__iconbutton-submit, .pgn__searchfield__iconbutton-reset { flex-shrink: 0; - margin-inline-end: map-get($spacers, 1); + margin-inline-end: map.get($spacers, 1); } diff --git a/src/Table/_variables.scss b/src/Table/_variables.scss index a494d0a47a..d7f016410d 100644 --- a/src/Table/_variables.scss +++ b/src/Table/_variables.scss @@ -1,3 +1,4 @@ +@use "sass:color"; // Tables // // Customizes the `.table` component with basic values, each used across all table variations. @@ -23,7 +24,7 @@ $table-dark-bg: theme-color("gray", "hover") !default; $table-dark-accent-bg: rgba($white, .05) !default; $table-dark-hover-color: $table-dark-color !default; $table-dark-hover-bg: rgba($white, .075) !default; -$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default; +$table-dark-border-color: color.adjust($table-dark-bg, $lightness: 7.5%) !default; $table-dark-color: $white !default; $table-striped-order: odd !default; diff --git a/src/Toast/ToastContainer.scss b/src/Toast/ToastContainer.scss index b29ba0e5dc..423b419044 100644 --- a/src/Toast/ToastContainer.scss +++ b/src/Toast/ToastContainer.scss @@ -11,7 +11,7 @@ left: 0; } - @media only screen and (max-width: 768px) { + @media only screen and (width <= 768px) { bottom: $toast-container-gutter-sm; right: $toast-container-gutter-sm; left: $toast-container-gutter-sm; diff --git a/src/Toast/index.scss b/src/Toast/index.scss index 58658f0e9c..ffce11dbf1 100644 --- a/src/Toast/index.scss +++ b/src/Toast/index.scss @@ -42,11 +42,11 @@ } } - @media only screen and (max-width: 768px) { + @media only screen and (width <= 768px) { max-width: 100%; } - @media only screen and (min-width: 768px) { + @media only screen and (width >= 768px) { min-width: $toast-max-width; max-width: $toast-max-width; } diff --git a/www/build-themes.js b/www/build-themes.js index e28f9a2c49..474dba2d7f 100644 --- a/www/build-themes.js +++ b/www/build-themes.js @@ -26,7 +26,7 @@ THEMES.forEach(theme => { file: `./src/scss/${theme.stylesheet}.scss`, outputStyle: 'compressed', importer, - quietDeps: true, + silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin'], }); fs.writeFileSync(`./public/static/${theme.stylesheet}.css`, result.css); diff --git a/www/src/components/Menu.scss b/www/src/components/Menu.scss index 3b3af48bc2..611efd8f8e 100644 --- a/www/src/components/Menu.scss +++ b/www/src/components/Menu.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + .pgn__modal-popup__tooltip .pgn-doc__menu { padding: $spacer 1.5rem 2rem; } @@ -25,7 +27,7 @@ .btn { width: 50%; - @media (max-width: map-get($grid-breakpoints, "xxl")) { + @media (max-width: map.get($grid-breakpoints, "xxl")) { font-size: $font-size-xs; line-height: $headings-line-height; } diff --git a/www/src/components/Search/Search.scss b/www/src/components/Search/Search.scss index f5544745ee..389d777daa 100644 --- a/www/src/components/Search/Search.scss +++ b/www/src/components/Search/Search.scss @@ -1,3 +1,5 @@ +@use "sass:color"; +@use "sass:map"; // stylelint-disable selector-class-pattern .DocSearch.DocSearch-Button { border-radius: 0; @@ -53,7 +55,7 @@ margin: 6.875rem auto auto; cursor: auto; - @media (max-width: map-get($grid-breakpoints, "md")) { + @media (max-width: map.get($grid-breakpoints, "md")) { max-width: 100%; margin: auto; border-radius: 0; @@ -65,7 +67,7 @@ border-top: $border-width solid $light-400; padding: 0 1.625rem; - @media (max-width: map-get($grid-breakpoints, "md")) { + @media (max-width: map.get($grid-breakpoints, "md")) { position: absolute; border-radius: 0; bottom: 0; @@ -92,7 +94,7 @@ padding: 0 1.625rem; max-height: 20.9375rem; - @media (max-width: map-get($grid-breakpoints, "md")) { + @media (max-width: map.get($grid-breakpoints, "md")) { height: 100%; // stylelint-disable-next-line max-line-length max-height: calc(var(--docsearch-vh, 1vh) * 100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height)); @@ -170,7 +172,7 @@ } .DocSearch-Hit .DocSearch-Hit-icon svg { - color: lighten($color: $dark, $amount: .5); + color: color.adjust($color: $dark, $lightness: .5%); position: absolute; } @@ -291,7 +293,7 @@ text-decoration: underline; } - @media (max-width: map-get($grid-breakpoints, "md")) { + @media (max-width: map.get($grid-breakpoints, "md")) { font-size: $font-size-base; line-height: $line-height-base; font-weight: $font-weight-semi-bold; @@ -319,7 +321,7 @@ } .DocSearch-Cancel { - @media (max-width: map-get($grid-breakpoints, "md")) { + @media (max-width: map.get($grid-breakpoints, "md")) { margin-right: 1.1875rem; } } diff --git a/www/src/components/_CodeBlock.scss b/www/src/components/_CodeBlock.scss index c8c23f945a..748c1a62e2 100644 --- a/www/src/components/_CodeBlock.scss +++ b/www/src/components/_CodeBlock.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + .pgn-doc__code-block { margin: $spacer 0 2rem; background-color: $light-200; @@ -27,8 +29,8 @@ .pgn-doc__collapsible-live-editor-copy-btn { position: absolute; - top: map-get($spacers, 2); - right: map-get($spacers, 2); + top: map.get($spacers, 2); + right: map.get($spacers, 2); } } } diff --git a/www/src/components/exampleComponents/ExamplePropsForm.scss b/www/src/components/exampleComponents/ExamplePropsForm.scss index 42dedf7f28..8029c1faea 100644 --- a/www/src/components/exampleComponents/ExamplePropsForm.scss +++ b/www/src/components/exampleComponents/ExamplePropsForm.scss @@ -1,7 +1,9 @@ +@use "sass:map"; + .pgn-doc__example-props-form { background: $warning-100; - padding: map-get($spacers, 3) map-get($spacers, 3) 0 map-get($spacers, 3); + padding: map.get($spacers, 3) map.get($spacers, 3) 0 map.get($spacers, 3); border-radius: 10px; border: 2px dashed black; - margin-bottom: map-get($spacers, 3); + margin-bottom: map.get($spacers, 3); } diff --git a/www/utils/createCssUtilityClassNodes.js b/www/utils/createCssUtilityClassNodes.js index 4074fadf40..2426e6b49f 100644 --- a/www/utils/createCssUtilityClassNodes.js +++ b/www/utils/createCssUtilityClassNodes.js @@ -21,6 +21,7 @@ function createCssUtilityClassNodes({ } return { file: resolvedUrl }; }, + silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin'], }) .css.toString();