fix(@carbon/styles): change rem function to to-rem (#14420)

* fix(@carbon/styles): scope rem namespace * chore(react): update react sas package version, run dedupe * refactor(styles): rename rem function to to-rem * fix(stylelint): remove old workaround * chore(sass): bump sass version down until we can update v10 version
carbon-design-system · Aug 11, 2023 · 8e78840 · 8e78840
1 parent f762241
commit 8e78840
Show file tree

Hide file tree

Showing 78 changed files with 903 additions and 860 deletions.
diff --git a/packages/cra-template/template/src/content/HomePage/_homepage.scss b/packages/cra-template/template/src/content/HomePage/_homepage.scss
@@ -21,7 +21,7 @@
 }
 
 .landing-page__r2 {
-  margin-top: rem(-40px);
+  margin-top: to-rem(-40px);
 }
 
 .tabs-group-content {

diff --git a/packages/grid/scss/_config.scss b/packages/grid/scss/_config.scss
@@ -24,13 +24,13 @@ $flex-grid-columns: 16 !default;
 /// @type Number
 /// @access public
 /// @group @carbon/layout
-$grid-gutter: convert.rem(32px) !default;
+$grid-gutter: convert.to-rem(32px) !default;
 
 /// Carbon condensed gutter size in rem
 /// @type Number
 /// @access public
 /// @group @carbon/layout
-$grid-gutter-condensed: convert.rem(1px) !default;
+$grid-gutter-condensed: convert.to-rem(1px) !default;
 
 // Initial map of our breakpoints and their values
 /// @type Map
@@ -40,27 +40,27 @@ $grid-breakpoints: (
   sm: (
     columns: 4,
     margin: 0,
-    width: convert.rem(320px),
+    width: convert.to-rem(320px),
   ),
   md: (
     columns: 8,
-    margin: convert.rem(16px),
-    width: convert.rem(672px),
+    margin: convert.to-rem(16px),
+    width: convert.to-rem(672px),
   ),
   lg: (
     columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1056px),
+    margin: convert.to-rem(16px),
+    width: convert.to-rem(1056px),
   ),
   xlg: (
     columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1312px),
+    margin: convert.to-rem(16px),
+    width: convert.to-rem(1312px),
   ),
   max: (
     columns: 16,
-    margin: convert.rem(24px),
-    width: convert.rem(1584px),
+    margin: convert.to-rem(24px),
+    width: convert.to-rem(1584px),
   ),
 ) !default;
 

diff --git a/packages/layout/examples/preview/src/styles.scss b/packages/layout/examples/preview/src/styles.scss
@@ -8,8 +8,8 @@ body {
 // Conversion
 //------------------------------------------------------------------------------
 .convert-box {
-  width: rem(48px);
-  height: rem(48px);
+  width: to-rem(48px);
+  height: to-rem(48px);
   background-color: black;
 }
 

diff --git a/packages/layout/scss/_convert.scss b/packages/layout/scss/_convert.scss
@@ -19,7 +19,7 @@ $base-font-size: 16px !default;
 /// @return {Number} Number with rem unit
 /// @access public
 /// @group @carbon/layout
-@function rem($px) {
+@function to-rem($px) {
   @if unit($px) != 'px' {
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }

diff --git a/packages/layout/scss/modules/_convert.scss b/packages/layout/scss/modules/_convert.scss
@@ -19,7 +19,7 @@ $base-font-size: 16px !default;
 /// @return {Number} Number with rem unit
 /// @access public
 /// @group @carbon/layout
-@function rem($px) {
+@function to-rem($px) {
   @if unit($px) != 'px' {
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }

diff --git a/packages/styles/scss/_layout.scss b/packages/styles/scss/_layout.scss
@@ -10,18 +10,18 @@
 
 @use './config' as *;
 @use './utilities/custom-property';
-@use './utilities/convert' as *;
+@use './utilities/convert';
 @use './spacing' as *;
 
 $layout-tokens: (
   size: (
     height: (
-      xs: rem(24px),
-      sm: rem(32px),
-      md: rem(40px),
-      lg: rem(48px),
-      xl: rem(64px),
-      2xl: rem(80px),
+      xs: convert.to-rem(24px),
+      sm: convert.to-rem(32px),
+      md: convert.to-rem(40px),
+      lg: convert.to-rem(48px),
+      xl: convert.to-rem(64px),
+      2xl: convert.to-rem(80px),
     ),
   ),
   density: (

diff --git a/packages/styles/scss/components/breadcrumb/_breadcrumb.scss b/packages/styles/scss/components/breadcrumb/_breadcrumb.scss
@@ -14,7 +14,7 @@
 @use '../../type' as *;
 @use '../../layer' as *;
 @use '../../utilities/component-reset';
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/skeleton' as *;
 
 @mixin breadcrumb {
@@ -79,8 +79,8 @@
   // Overflow Menu overrides
   .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu {
     position: relative;
-    width: rem(20px);
-    height: rem(18px);
+    width: convert.to-rem(20px);
+    height: convert.to-rem(18px);
 
     &:focus {
       outline: 1px solid $focus;
@@ -94,7 +94,7 @@
     &::after {
       position: absolute;
       bottom: 2px;
-      width: rem(12px);
+      width: convert.to-rem(12px);
       height: 1px;
       background: $link-primary-hover;
       content: '';
@@ -133,7 +133,7 @@
     outline: none;
   }
 
-  $caret-size: rem(7px);
+  $caret-size: convert.to-rem(7px);
   .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options::after {
     top: -$caret-size;
     left: $caret-size * 2;
@@ -150,7 +150,7 @@
   .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
     @include skeleton;
 
-    width: rem(100px);
+    width: convert.to-rem(100px);
     height: 1rem;
   }
 

diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss
@@ -14,7 +14,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../layer' as *;
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/focus-outline';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
@@ -113,7 +113,9 @@
       $background-active
     );
 
-    padding-inline-end: calc(layout.density('padding-inline') - rem(1px));
+    padding-inline-end: calc(
+      layout.density('padding-inline') - convert.to-rem(1px)
+    );
 
     .#{$prefix}--btn__icon {
       position: static;
@@ -153,13 +155,15 @@
     padding: 0;
     // -1px to compensate for border width
     padding-block-start: min(
-      calc((layout.size('height') - rem(16px)) / 2 - rem(1px)),
+      calc(
+        (layout.size('height') - convert.to-rem(16px)) / 2 - convert.to-rem(1px)
+      ),
       var(--temp-padding-block-max)
     );
 
     > :first-child {
-      min-width: rem(16px);
-      margin-block-start: rem(1px);
+      min-width: convert.to-rem(16px);
+      margin-block-start: convert.to-rem(1px);
     }
 
     .#{$prefix}--btn__icon {
@@ -273,7 +277,9 @@
         $button-danger-active
       );
 
-      padding-inline-end: calc(layout.density('padding-inline') - rem(1px));
+      padding-inline-end: calc(
+        layout.density('padding-inline') - convert.to-rem(1px)
+      );
 
       .#{$prefix}--btn__icon {
         position: static;
@@ -304,7 +310,10 @@
     @include type-style('body-compact-02');
 
     padding-block: min(
-      calc((layout.size('height') - var(--temp-expressive-1lh)) / 2 - rem(1px)),
+      calc(
+        (layout.size('height') - var(--temp-expressive-1lh)) / 2 -
+          convert.to-rem(1px)
+      ),
       var(--temp-padding-block-max)
     );
   }
@@ -315,19 +324,19 @@
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--expressive .#{$prefix}--btn__icon {
-    width: rem(20px);
-    height: rem(20px);
+    width: convert.to-rem(20px);
+    height: convert.to-rem(20px);
   }
 
   .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--expressive {
-    max-width: rem(320px);
+    max-width: convert.to-rem(320px);
   }
 
   // Skeleton State
   .#{$prefix}--btn.#{$prefix}--skeleton {
     @include skeleton;
 
-    width: rem(150px);
+    width: convert.to-rem(150px);
   }
 
   // button set styles
@@ -342,10 +351,10 @@
   .#{$prefix}--btn-set .#{$prefix}--btn {
     width: 100%;
     // 196px from design kit
-    max-width: rem(196px);
+    max-width: convert.to-rem(196px);
 
     &:not(:focus) {
-      box-shadow: rem(-1px) 0 0 0 $button-separator;
+      box-shadow: convert.to-rem(-1px) 0 0 0 $button-separator;
     }
 
     &:first-of-type:not(:focus) {
@@ -358,23 +367,23 @@
   }
 
   .#{$prefix}--btn-set--stacked .#{$prefix}--btn:not(:focus) {
-    box-shadow: 0 rem(-1px) 0 0 $button-separator;
+    box-shadow: 0 convert.to-rem(-1px) 0 0 $button-separator;
   }
 
   .#{$prefix}--btn-set--stacked .#{$prefix}--btn:first-of-type:not(:focus) {
     box-shadow: inherit;
   }
 
   .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--disabled {
-    box-shadow: rem(-1px) 0 0 0 $icon-on-color-disabled;
+    box-shadow: convert.to-rem(-1px) 0 0 0 $icon-on-color-disabled;
 
     &:first-of-type {
       box-shadow: none;
     }
   }
 
   .#{$prefix}--btn-set--stacked .#{$prefix}--btn.#{$prefix}--btn--disabled {
-    box-shadow: 0 rem(-1px) 0 0 $layer-selected-disabled;
+    box-shadow: 0 convert.to-rem(-1px) 0 0 $layer-selected-disabled;
 
     &:first-of-type {
       box-shadow: none;

diff --git a/packages/styles/scss/components/button/_mixins.scss b/packages/styles/scss/components/button/_mixins.scss
@@ -14,7 +14,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/component-reset';
-@use '../../utilities/convert' as *;
+@use '../../utilities/convert';
 @use '../../utilities/custom-property';
 @use '../../utilities/layout';
 @use 'tokens' as *;
@@ -38,7 +38,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   // -1px to compensate for border width
   --temp-padding-block-max: calc(
     (#{custom-property.get-var('layout-size-height-lg')} - var(--temp-1lh)) / 2 -
-      #{rem(1px)}
+      #{convert.to-rem(1px)}
   );
 
   @include component-reset.reset;
@@ -47,7 +47,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   position: relative;
   display: inline-flex;
   width: max-content;
-  max-width: rem(320px);
+  max-width: convert.to-rem(320px);
   min-height: layout.size('height');
   flex-shrink: 0;
   justify-content: space-between;
@@ -58,13 +58,16 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   outline: none;
   // -1px to compensate for border width
   padding-block: min(
-    calc((layout.size('height') - var(--temp-1lh)) / 2 - rem(1px)),
+    calc((layout.size('height') - var(--temp-1lh)) / 2 - convert.to-rem(1px)),
     var(--temp-padding-block-max)
   );
   padding-inline-end: calc(
-    layout.density('padding-inline') * 3 + rem(16px) - rem(1px)
+    layout.density('padding-inline') * 3 + convert.to-rem(16px) -
+      convert.to-rem(1px)
+  );
+  padding-inline-start: calc(
+    layout.density('padding-inline') - convert.to-rem(1px)
   );
-  padding-inline-start: calc(layout.density('padding-inline') - rem(1px));
   text-align: left;
   text-decoration: none;
   transition: background $duration-fast-01 motion(entrance, productive),
@@ -90,14 +93,16 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
     position: absolute;
     // -1px to compensate for border width
     top: min(
-      calc((layout.size('height') - rem(16px)) / 2 - rem(1px)),
+      calc(
+        (layout.size('height') - convert.to-rem(16px)) / 2 - convert.to-rem(1px)
+      ),
       var(--temp-padding-block-max)
     );
     right: layout.density('padding-inline');
-    width: rem(16px);
-    height: rem(16px);
+    width: convert.to-rem(16px);
+    height: convert.to-rem(16px);
     flex-shrink: 0;
-    margin-block-start: rem(1px);
+    margin-block-start: convert.to-rem(1px);
   }
 }