diff --git a/packages/components/src/globals/scss/_typography.import.scss b/packages/components/src/globals/scss/_typography.import.scss index be16159322c2..31529608aa37 100644 --- a/packages/components/src/globals/scss/_typography.import.scss +++ b/packages/components/src/globals/scss/_typography.import.scss @@ -19,6 +19,7 @@ // compatibility file to ensure we continue to support node-sass and dart-sass // in v10. +@use 'sass:meta'; @use 'sass:math'; @import 'vars'; /* stylelint-disable-line no-invalid-position-at-import-rule */ @@ -42,7 +43,11 @@ $base-font-size: 16px !default; @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; } - @return math.div($px, $base-font-size) * 1rem; + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1rem; + } @else { + @return ($px / $base-font-size) * 1rem; + } } /// Convert px to em @@ -58,7 +63,11 @@ $base-font-size: 16px !default; @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; } - @return math.div($px, $base-font-size) * 1em; + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1em; + } @else { + @return ($px / $base-font-size) * 1em; + } } // 🔬 Experimental diff --git a/packages/grid/scss/_mixins.import.scss b/packages/grid/scss/_mixins.import.scss index 798b69268159..e799c31da54f 100644 --- a/packages/grid/scss/_mixins.import.scss +++ b/packages/grid/scss/_mixins.import.scss @@ -23,6 +23,7 @@ // and often derived from, bootstrap: // https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss +@use 'sass:meta'; @use 'sass:math'; @import '@carbon/layout/scss/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ @import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */ @@ -46,21 +47,21 @@ // always setting `width: 100%;`. This works because we use `flex` values // later on to override this initial width. width: 100%; - padding-right: math.div($gutter, 2); - padding-left: math.div($gutter, 2); + padding-right: $gutter * 0.5; + padding-left: $gutter * 0.5; // For our condensed use-case, our gutters collapse to 2px solid, 1px on each // side. .#{$prefix}--row--condensed &, .#{$prefix}--grid--condensed & { - padding-right: math.div($condensed-gutter, 2); - padding-left: math.div($condensed-gutter, 2); + padding-right: $condensed-gutter * 0.5; + padding-left: $condensed-gutter * 0.5; } // For our narrow use-case, our container hangs 16px into the gutter .#{$prefix}--row--narrow &, .#{$prefix}--grid--narrow & { - padding-right: math.div($gutter, 2); + padding-right: $gutter * 0.5; padding-left: 0; } } @@ -80,8 +81,13 @@ // Add a `max-width` to ensure content within each column does not blow out // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari // do not appear to require this. - max-width: percentage(math.div($span, $columns)); - flex: 0 0 percentage(math.div($span, $columns)); + @if meta.function-exists('div', 'math') { + max-width: percentage(math.div($span, $columns)); + flex: 0 0 percentage(math.div($span, $columns)); + } @else { + max-width: percentage(($span / $columns)); + flex: 0 0 percentage(($span / $columns)); + } } } @@ -91,7 +97,12 @@ /// @access private /// @group @carbon/grid @mixin carbon--make-col-offset($span, $columns) { - $offset: math.div($span, $columns); + $offset: 0; + @if meta.function-exists('div', 'math') { + $offset: math.div($span, $columns); + } @else { + $offset: ($span / $columns); + } @if $offset == 0 { margin-left: 0; } @else { @@ -173,8 +184,8 @@ @mixin carbon--make-row($gutter: $carbon--grid-gutter) { display: flex; flex-wrap: wrap; - margin-right: -1 * math.div($gutter, 2); - margin-left: -1 * math.div($gutter, 2); + margin-right: -1 * $gutter * 0.5; + margin-left: -1 * $gutter * 0.5; } // ----------------------------------------------------------------------------- @@ -225,20 +236,20 @@ /// @group @carbon/grid @mixin carbon--hang($gutter: $carbon--grid-gutter) { .#{$prefix}--hang--start { - padding-left: math.div($gutter, 2); + padding-left: $gutter * 0.5; } .#{$prefix}--hang--end { - padding-right: math.div($gutter, 2); + padding-right: $gutter * 0.5; } // Deprecated ☠️ .#{$prefix}--hang--left { - padding-left: math.div($gutter, 2); + padding-left: $gutter * 0.5; } .#{$prefix}--hang--right { - padding-right: math.div($gutter, 2); + padding-right: $gutter * 0.5; } } @@ -299,7 +310,11 @@ $carbon--aspect-ratios: ( $height: nth($aspect-ratio, 2); .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before { - padding-top: percentage(math.div($height, $width)); + @if meta.function-exists('div', 'math') { + padding-top: percentage(math.div($height, $width)); + } @else { + padding-top: percentage(($height / $width)); + } } } @@ -336,14 +351,14 @@ $carbon--aspect-ratios: ( $prev-margin: map-get($prev-breakpoint, margin); @if $prev-margin != $margin { @include carbon--breakpoint($name) { - padding-right: #{math.div($carbon--grid-gutter, 2) + $margin}; - padding-left: #{math.div($carbon--grid-gutter, 2) + $margin}; + padding-right: #{($carbon--grid-gutter * 0.5) + $margin}; + padding-left: #{($carbon--grid-gutter * 0.5) + $margin}; } } } @else { @include carbon--breakpoint($name) { - padding-right: #{math.div($carbon--grid-gutter, 2) + $margin}; - padding-left: #{math.div($carbon--grid-gutter, 2) + $margin}; + padding-right: #{($carbon--grid-gutter * 0.5) + $margin}; + padding-left: #{($carbon--grid-gutter * 0.5) + $margin}; } } } @@ -400,13 +415,13 @@ $carbon--aspect-ratios: ( .#{$prefix}--row-padding [class*='#{$prefix}--col'], .#{$prefix}--col-padding { - padding-top: math.div($grid-gutter, 2); - padding-bottom: math.div($grid-gutter, 2); + padding-top: $grid-gutter * 0.5; + padding-bottom: $grid-gutter * 0.5; } .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] { - padding-top: math.div($condensed-gutter, 2); - padding-bottom: math.div($condensed-gutter, 2); + padding-top: $condensed-gutter * 0.5; + padding-bottom: $condensed-gutter * 0.5; } @include carbon--make-grid-columns($breakpoints, $grid-gutter); diff --git a/packages/grid/scss/modules/_css-grid.scss b/packages/grid/scss/modules/_css-grid.scss index 0362b2a8876c..e5e09efe10e2 100644 --- a/packages/grid/scss/modules/_css-grid.scss +++ b/packages/grid/scss/modules/_css-grid.scss @@ -5,6 +5,7 @@ // LICENSE file in the root directory of this source tree. // +@use 'sass:meta'; @use "sass:math"; @use 'sass:map'; @@ -405,7 +406,11 @@ $carbon--aspect-ratios: ( $height: nth($aspect-ratio, 2); .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before { - padding-top: percentage(math.div($height, $width)); + @if meta.function-exists('div', 'math') { + padding-top: percentage(math.div($height, $width)); + } @else { + padding-top: percentage(($height / $width)); + } } } } diff --git a/packages/grid/scss/modules/_mixins.scss b/packages/grid/scss/modules/_mixins.scss index 4561626a0cd3..08706d68a3ad 100644 --- a/packages/grid/scss/modules/_mixins.scss +++ b/packages/grid/scss/modules/_mixins.scss @@ -5,6 +5,7 @@ // LICENSE file in the root directory of this source tree. // +@use 'sass:meta'; @use "sass:math"; @use 'config' as *; @@ -63,8 +64,13 @@ // Add a `max-width` to ensure content within each column does not blow out // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari // do not appear to require this. - max-width: percentage(math.div($span, $columns)); - flex: 0 0 percentage(math.div($span, $columns)); + @if meta.function-exists('div', 'math') { + max-width: percentage(math.div($span, $columns)); + flex: 0 0 percentage(math.div($span, $columns)); + } @else { + max-width: percentage(($span / $columns)); + flex: 0 0 percentage(($span / $columns)); + } } } @@ -74,7 +80,12 @@ /// @access private /// @group @carbon/grid @mixin -make-col-offset($span, $columns) { - $offset: math.div($span, $columns); + $offset: 0; + @if meta.function-exists('div', 'math') { + $offset: math.div($span, $columns); + } @else { + $offset: ($span / $columns); + } @if $offset == 0 { margin-left: 0; } @else { diff --git a/packages/layout/scss/_convert.import.scss b/packages/layout/scss/_convert.import.scss index 19517d19fbe0..f8cab364b5f3 100644 --- a/packages/layout/scss/_convert.import.scss +++ b/packages/layout/scss/_convert.import.scss @@ -19,6 +19,7 @@ // compatibility file to ensure we continue to support node-sass and dart-sass // in v10. +@use 'sass:meta'; @use 'sass:math'; /// Default font size @@ -38,7 +39,11 @@ $carbon--base-font-size: 16px !default; @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; } - @return math.div($px, $carbon--base-font-size) * 1rem; + @if meta.function-exists('div', 'math') { + @return math.div($px, $carbon--base-font-size) * 1rem; + } @else { + @return ($px / $carbon--base-font-size) * 1rem; + } } /// Convert a given px unit to a em unit @@ -52,5 +57,9 @@ $carbon--base-font-size: 16px !default; @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; } - @return math.div($px, $carbon--base-font-size) * 1em; + @if meta.function-exists('div', 'math') { + @return math.div($px, $carbon--base-font-size) * 1em; + } @else { + @return ($px / $carbon--base-font-size) * 1em; + } } diff --git a/packages/layout/scss/_key-height.import.scss b/packages/layout/scss/_key-height.import.scss index 0ebab92a256d..15e9f7090f33 100644 --- a/packages/layout/scss/_key-height.import.scss +++ b/packages/layout/scss/_key-height.import.scss @@ -19,6 +19,7 @@ // compatibility file to ensure we continue to support node-sass and dart-sass // in v10. +@use 'sass:meta'; @use "sass:math"; @import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ @import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */ @@ -39,7 +40,11 @@ $margin: map-get($values, margin); $columns: map-get($values, columns); - @return math.div($width - (2 * $margin), $columns); + @if meta.function-exists('div', 'math') { + @return math.div($width - (2 * $margin), $columns); + } @else { + @return (($width - (2 * $margin)) / $columns); + } } @else { @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; } diff --git a/packages/layout/scss/modules/_convert.scss b/packages/layout/scss/modules/_convert.scss index c159d9e03984..3b28c4f09127 100644 --- a/packages/layout/scss/modules/_convert.scss +++ b/packages/layout/scss/modules/_convert.scss @@ -5,6 +5,7 @@ // LICENSE file in the root directory of this source tree. // +@use 'sass:meta'; @use 'sass:math'; /// Default font size @@ -24,7 +25,11 @@ $base-font-size: 16px !default; @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; } - @return math.div($px, $base-font-size) * 1rem; + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1rem; + } @else { + @return ($px / $base-font-size) * 1rem; + } } /// Convert a given px unit to a em unit @@ -38,5 +43,9 @@ $base-font-size: 16px !default; @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; } - @return math.div($px, $base-font-size) * 1em; + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1em; + } @else { + @return ($px / $base-font-size) * 1em; + } } diff --git a/packages/styles/scss/utilities/_convert.scss b/packages/styles/scss/utilities/_convert.scss index e20bf087305f..58fb831d1777 100644 --- a/packages/styles/scss/utilities/_convert.scss +++ b/packages/styles/scss/utilities/_convert.scss @@ -5,11 +5,12 @@ // LICENSE file in the root directory of this source tree. // +@use 'sass:meta'; +@use "sass:math"; + /// Default font size /// @type Number /// @access public -@use "sass:math"; - $base-font-size: 16px !default; /// Convert a given px unit to a rem unit @@ -23,7 +24,11 @@ $base-font-size: 16px !default; @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; } - @return math.div($px, $base-font-size) * 1rem; + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1rem; + } @else { + @return ($px / $base-font-size) * 1rem; + } } /// Convert a given px unit to a em unit @@ -37,5 +42,9 @@ $base-font-size: 16px !default; @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; } - @return math.div($px, $base-font-size) * 1em; + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1em; + } @else { + @return ($px / $base-font-size) * 1em; + } } diff --git a/packages/type/scss/_styles.import.scss b/packages/type/scss/_styles.import.scss index 360053250589..51b105afd082 100644 --- a/packages/type/scss/_styles.import.scss +++ b/packages/type/scss/_styles.import.scss @@ -19,6 +19,7 @@ // compatibility file to ensure we continue to support node-sass and dart-sass // in v10. +@use "sass:meta"; @use "sass:math"; @import '@carbon/layout/scss/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ @import 'font-family'; /* stylelint-disable-line no-invalid-position-at-import-rule */ @@ -582,7 +583,11 @@ $tokens: ( /// @access public /// @group @carbon/type @function strip-unit($value) { - @return math.div($value, $value * 0 + 1); + @if meta.function-exists('div', 'math') { + @return math.div($value, $value * 0 + 1); + } @else { + @return $value / ($value * 0 + 1); + } } /// This helper includes fluid type styles for the given token value. Fluid type