From bb9ae8cba94b1cfc5db4802d3ad483b79851ea9e Mon Sep 17 00:00:00 2001 From: Matthew Oliveira Date: Mon, 9 Dec 2024 07:45:28 -0500 Subject: [PATCH] chore(styles): properly handle to-rem func calls (#12152) ### Related Ticket(s) None. Noticed in a Slack conversation. ### Description There are many instances of using the `to-rem` utliity funcation that don't include the correct module import, hence `to-rem` makes it into compiled CSS, which invalidates the style rule. ### Changelog **Changed** - Corrects `to-rem` usage by `@use` the appropriate module. --- .../styles/scss/components/button-group/_button-group.scss | 1 + .../components/callout-with-media/_callout-with-media.scss | 1 + packages/styles/scss/components/card-group/_card-group.scss | 1 + .../styles/scss/components/card-in-card/_card-in-card.scss | 1 + .../components/card-section-offset/_card-section-offset.scss | 3 ++- .../components/content-block-media/_content-block-media.scss | 3 ++- .../components/content-block-mixed/_content-block-mixed.scss | 1 + .../components/content-block-simple/_content-block-simple.scss | 3 ++- .../content-item-row-media/_content-item-row-media.scss | 3 ++- .../scss/components/content-item-row/_content-item-row.scss | 3 ++- packages/styles/scss/components/cta-block/_cta-block.scss | 1 + .../scss/components/expressive-modal/_expressive-modal.scss | 3 ++- .../styles/scss/components/filter-panel/_filter-panel.scss | 1 + packages/styles/scss/components/footer/_footer.scss | 2 +- packages/styles/scss/components/footer/_language-selector.scss | 1 + .../styles/scss/components/global-banner/_global-banner.scss | 3 ++- packages/styles/scss/components/image/_image.scss | 1 + .../scss/components/leadspace-block/_leadspace-block.scss | 1 + .../leadspace-with-search/_leadspace-with-search.scss | 3 ++- packages/styles/scss/components/leadspace/_leadspace.scss | 1 + .../search-with-typeahead/_search-with-typeahead.scss | 1 + .../scss/components/tableofcontents/_table-of-contents.scss | 1 + .../styles/scss/components/tabs-extended/_tabs-extended.scss | 1 + packages/styles/scss/components/tag-link/_tag-link.scss | 3 ++- packages/styles/scss/globals/utils/_content-width.scss | 1 + .../scss/patterns/blocks/callout-data/_callout-data.scss | 2 ++ .../scss/patterns/blocks/leadspace-block/_leadspace-block.scss | 1 + .../styles/scss/patterns/sections/leadspace/_leadspace.scss | 1 + 28 files changed, 38 insertions(+), 10 deletions(-) diff --git a/packages/styles/scss/components/button-group/_button-group.scss b/packages/styles/scss/components/button-group/_button-group.scss index 4626f27742f..c47e63d728a 100644 --- a/packages/styles/scss/components/button-group/_button-group.scss +++ b/packages/styles/scss/components/button-group/_button-group.scss @@ -10,6 +10,7 @@ @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/motion' as *; @use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; @use '../lightbox-media-viewer'; diff --git a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss index 5f29a6e72f0..078c71b64a9 100644 --- a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss +++ b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; @use '../../internal/callout/callout' as *; @use '../../internal/content-block'; diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss index 4097a15cfad..3b5b9da7d12 100644 --- a/packages/styles/scss/components/card-group/_card-group.scss +++ b/packages/styles/scss/components/card-group/_card-group.scss @@ -13,6 +13,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; @use '../../globals/utils/ratio-base' as *; diff --git a/packages/styles/scss/components/card-in-card/_card-in-card.scss b/packages/styles/scss/components/card-in-card/_card-in-card.scss index 1f71350a120..cd972825e7c 100644 --- a/packages/styles/scss/components/card-in-card/_card-in-card.scss +++ b/packages/styles/scss/components/card-in-card/_card-in-card.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/motion' as *; @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; @use '../../globals/utils/aspect-ratio'; @use '../../globals/utils/ratio-base' as *; diff --git a/packages/styles/scss/components/card-section-offset/_card-section-offset.scss b/packages/styles/scss/components/card-section-offset/_card-section-offset.scss index 387fea632d7..8e89d7a6e05 100644 --- a/packages/styles/scss/components/card-section-offset/_card-section-offset.scss +++ b/packages/styles/scss/components/card-section-offset/_card-section-offset.scss @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -12,6 +12,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; @use '../card-group/card-group'; diff --git a/packages/styles/scss/components/content-block-media/_content-block-media.scss b/packages/styles/scss/components/content-block-media/_content-block-media.scss index 2373848f2d3..5f6fc2f0521 100644 --- a/packages/styles/scss/components/content-block-media/_content-block-media.scss +++ b/packages/styles/scss/components/content-block-media/_content-block-media.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -8,6 +8,7 @@ @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; @use '../../internal/content-block'; @use '../../internal/content-group'; diff --git a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss index 4134da59b7f..bcec8956f82 100644 --- a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss +++ b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss @@ -8,6 +8,7 @@ @use '@carbon/styles/scss/breakpoint' as *; @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; @use '../../internal/content-block'; diff --git a/packages/styles/scss/components/content-block-simple/_content-block-simple.scss b/packages/styles/scss/components/content-block-simple/_content-block-simple.scss index 4dd4e2c5c18..e7b76c2d7ac 100644 --- a/packages/styles/scss/components/content-block-simple/_content-block-simple.scss +++ b/packages/styles/scss/components/content-block-simple/_content-block-simple.scss @@ -1,11 +1,12 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ @use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; @use '../../internal/content-block'; @use '../../internal/content-item/content-item'; diff --git a/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss index aa7c2f80057..cbacc59c294 100644 --- a/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss +++ b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; @use '../link-list'; diff --git a/packages/styles/scss/components/content-item-row/_content-item-row.scss b/packages/styles/scss/components/content-item-row/_content-item-row.scss index a7f5375457a..bb28123afd8 100644 --- a/packages/styles/scss/components/content-item-row/_content-item-row.scss +++ b/packages/styles/scss/components/content-item-row/_content-item-row.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; @use '../link-list'; diff --git a/packages/styles/scss/components/cta-block/_cta-block.scss b/packages/styles/scss/components/cta-block/_cta-block.scss index b423f4f287e..a8b7368c485 100644 --- a/packages/styles/scss/components/cta-block/_cta-block.scss +++ b/packages/styles/scss/components/cta-block/_cta-block.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; @use '../../internal/content-block'; diff --git a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss index 8e70caa0624..89d2a8f8d9f 100644 --- a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss +++ b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss @@ -14,6 +14,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/components/modal' as *; @@ -31,7 +32,7 @@ .#{$prefix}--modal-container { padding: $spacing-05; grid-template-rows: 1fr; - min-block-size: $spacing-10 + to-rem($icon-size); + min-block-size: $spacing-10 + $icon-size; @include breakpoint(md) { padding: $spacing-07; diff --git a/packages/styles/scss/components/filter-panel/_filter-panel.scss b/packages/styles/scss/components/filter-panel/_filter-panel.scss index 1b77fdd6789..74d2bc21b8c 100644 --- a/packages/styles/scss/components/filter-panel/_filter-panel.scss +++ b/packages/styles/scss/components/filter-panel/_filter-panel.scss @@ -9,6 +9,7 @@ @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/layout' as *; diff --git a/packages/styles/scss/components/footer/_footer.scss b/packages/styles/scss/components/footer/_footer.scss index 5fefa9a188f..d6f85ad334f 100644 --- a/packages/styles/scss/components/footer/_footer.scss +++ b/packages/styles/scss/components/footer/_footer.scss @@ -487,7 +487,7 @@ } .#{$prefix}--list-box__menu { - inset-block-end: to-rem($spacing-09); + inset-block-end: $spacing-09; } .#{$prefix}--dropdown, diff --git a/packages/styles/scss/components/footer/_language-selector.scss b/packages/styles/scss/components/footer/_language-selector.scss index d8dfb2fddd3..6733f18901d 100644 --- a/packages/styles/scss/components/footer/_language-selector.scss +++ b/packages/styles/scss/components/footer/_language-selector.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '@carbon/styles/scss/components/combo-box/combo-box' as *; @use '@carbon/styles/scss/components/list-box/list-box' as *; @use '@carbon/styles/scss/components/select/select' as *; diff --git a/packages/styles/scss/components/global-banner/_global-banner.scss b/packages/styles/scss/components/global-banner/_global-banner.scss index 6f4615e2766..8803450fc41 100644 --- a/packages/styles/scss/components/global-banner/_global-banner.scss +++ b/packages/styles/scss/components/global-banner/_global-banner.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2023 +// Copyright IBM Corp. 2019, 2024 // // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; @use '../image/index'; diff --git a/packages/styles/scss/components/image/_image.scss b/packages/styles/scss/components/image/_image.scss index 8b39b1cf507..0e6b6929379 100644 --- a/packages/styles/scss/components/image/_image.scss +++ b/packages/styles/scss/components/image/_image.scss @@ -13,6 +13,7 @@ @use '@carbon/styles/scss/breakpoint' as *; @use '@carbon/styles/scss/motion' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '@carbon/colors' as *; @use '../lightbox-media-viewer/lightbox-media-viewer'; diff --git a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss index c7873fbeafc..3e7249a1dfb 100644 --- a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss +++ b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss @@ -10,6 +10,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '@carbon/styles/scss/type' as *; @use '../../globals/utils/content-width' as *; @use '../../globals/utils/hang' as *; diff --git a/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss b/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss index 87b9c206e74..a0a735be0e5 100644 --- a/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss +++ b/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; @use '../../internal/content-block'; diff --git a/packages/styles/scss/components/leadspace/_leadspace.scss b/packages/styles/scss/components/leadspace/_leadspace.scss index 61f4c7b02ae..40262815af4 100644 --- a/packages/styles/scss/components/leadspace/_leadspace.scss +++ b/packages/styles/scss/components/leadspace/_leadspace.scss @@ -15,6 +15,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/content-width' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/utils/ratio-base' as *; diff --git a/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss b/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss index f884e8dd9f3..d41c0b07f68 100644 --- a/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss +++ b/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '@carbon/styles/scss/components/ui-shell/header'; @use '@carbon/styles/scss/components/ui-shell/side-nav'; @use '@carbon/styles/scss/components/dropdown'; diff --git a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss index b3ee02bd4a8..d63c6cd9cf5 100644 --- a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss +++ b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss @@ -13,6 +13,7 @@ @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/carbon-grid' as *; @use '../../globals/vars' as *; diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss index 990bc80a769..915bc63e9f7 100644 --- a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss +++ b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss @@ -13,6 +13,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '@carbon/styles/scss/components/button' as *; @use '../../globals/vars' as *; @use '@carbon/styles/scss/components/tabs/vars' as *; diff --git a/packages/styles/scss/components/tag-link/_tag-link.scss b/packages/styles/scss/components/tag-link/_tag-link.scss index e1b3e5b4ff6..8f37160bfde 100644 --- a/packages/styles/scss/components/tag-link/_tag-link.scss +++ b/packages/styles/scss/components/tag-link/_tag-link.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2023 +// Copyright IBM Corp. 2019, 2024 // // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. @@ -9,6 +9,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; @mixin tag-link { diff --git a/packages/styles/scss/globals/utils/_content-width.scss b/packages/styles/scss/globals/utils/_content-width.scss index 3ad67bd02ba..49f6875c526 100644 --- a/packages/styles/scss/globals/utils/_content-width.scss +++ b/packages/styles/scss/globals/utils/_content-width.scss @@ -7,6 +7,7 @@ @use '@carbon/styles/scss/breakpoint' as *; @use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/utilities/convert' as *; // Sets the Width and Max-Width of the Card to 90% / 640px. @mixin content-width { diff --git a/packages/styles/scss/patterns/blocks/callout-data/_callout-data.scss b/packages/styles/scss/patterns/blocks/callout-data/_callout-data.scss index 6bf53dd65ad..f0976e640f9 100644 --- a/packages/styles/scss/patterns/blocks/callout-data/_callout-data.scss +++ b/packages/styles/scss/patterns/blocks/callout-data/_callout-data.scss @@ -5,6 +5,8 @@ * LICENSE file in the root directory of this source tree. */ +@use '@carbon/styles/scss/utilities/convert' as *; + @mixin callout-data { .#{$prefix}--callout-data { .#{$prefix}--callout { diff --git a/packages/styles/scss/patterns/blocks/leadspace-block/_leadspace-block.scss b/packages/styles/scss/patterns/blocks/leadspace-block/_leadspace-block.scss index 6b926b89ca3..888a54c49be 100644 --- a/packages/styles/scss/patterns/blocks/leadspace-block/_leadspace-block.scss +++ b/packages/styles/scss/patterns/blocks/leadspace-block/_leadspace-block.scss @@ -8,6 +8,7 @@ /// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block" @warn 'Deprecated scss import for `leadspace-block`, remap to `@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block`'; @use '../../../components/leadspace-block'; +@use '@carbon/styles/scss/utilities/convert' as *; @mixin leadspace-block { .#{$prefix}--leadspace-block { diff --git a/packages/styles/scss/patterns/sections/leadspace/_leadspace.scss b/packages/styles/scss/patterns/sections/leadspace/_leadspace.scss index 6e52d3e491a..13256529c51 100644 --- a/packages/styles/scss/patterns/sections/leadspace/_leadspace.scss +++ b/packages/styles/scss/patterns/sections/leadspace/_leadspace.scss @@ -7,6 +7,7 @@ /// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace" @warn 'Deprecated scss import for `leadspace`, remap to `@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace`'; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../../components/leadspace';