Skip to content

Commit

Permalink
fix(sass): Do not use legacy global functions
Browse files Browse the repository at this point in the history
  • Loading branch information
mlaursen committed Nov 2, 2021
1 parent c103178 commit 6159e16
Show file tree
Hide file tree
Showing 27 changed files with 159 additions and 88 deletions.
4 changes: 3 additions & 1 deletion packages/alert/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group alert
////

@use 'sass:map';

@import '~@react-md/transition/dist/variables';
@import '~@react-md/theme/dist/color-palette';
@import '~@react-md/theme/dist/variables';
Expand Down Expand Up @@ -44,7 +46,7 @@ $rmd-toast-light-color: $rmd-white-base !default;
/// @require $rmd-theme-dark-elevation-colors
/// @type Color
/// @since 2.7.0
$rmd-toast-dark-elevation-background-color: map-get(
$rmd-toast-dark-elevation-background-color: map.get(
$rmd-theme-dark-elevation-colors,
$rmd-toast-elevation
) !default;
Expand Down
4 changes: 3 additions & 1 deletion packages/card/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group card
////

@use 'sass:map';

@import '~@react-md/divider/dist/functions';
@import '~@react-md/divider/dist/variables';
@import '~@react-md/theme/dist/functions';
Expand All @@ -23,7 +25,7 @@ $rmd-card-light-background-color: rmd-theme-var(surface) !default;
/// @require $rmd-theme-dark-elevation-colors
/// @type Color
/// @since 2.7.0
$rmd-card-dark-elevation-background-color: map-get(
$rmd-card-dark-elevation-background-color: map.get(
$rmd-theme-dark-elevation-colors,
$rmd-card-elevation
);
Expand Down
13 changes: 8 additions & 5 deletions packages/chip/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
/// @group chip
////

@use 'sass:color';
@use 'sass:map';

@import '~@react-md/states/dist/variables';
@import '~@react-md/transition/dist/variables';
@import '~@react-md/theme/dist/functions';
Expand Down Expand Up @@ -70,7 +73,7 @@ $rmd-chip-themed-background-color: rmd-theme-get-swatch(
$rmd-theme-primary,
300,
false,
darken($rmd-theme-primary, 20%),
color.adjust($rmd-theme-primary, $lightness: -20%),
rmd-chip-themed-background-color
) !default;

Expand Down Expand Up @@ -121,7 +124,7 @@ $rmd-chip-solid-light-disabled-background-color: $rmd-grey-100 !default;
/// @type Color
$rmd-chip-solid-dark-background-color: if(
$rmd-theme-dark-elevation,
map-get($rmd-theme-dark-elevation-colors, 12),
map.get($rmd-theme-dark-elevation-colors, 12),
$rmd-grey-900
) !default;

Expand All @@ -142,9 +145,9 @@ $rmd-chip-solid-dark-color: if(
///
/// @require $rmd-grey-900
/// @type Color
$rmd-chip-solid-dark-disabled-background-color: lighten(
$rmd-chip-solid-dark-disabled-background-color: color.adjust(
$rmd-grey-900,
2%
$lightness: 2%
) !default;

/// The background color to use for "solid" themed chips.
Expand Down Expand Up @@ -206,7 +209,7 @@ $rmd-chip-outline-light-color: if(
/// @type Color
$rmd-chip-outline-dark-background-color: if(
$rmd-theme-dark-elevation,
map-get($rmd-theme-dark-elevation-colors, 8),
map.get($rmd-theme-dark-elevation-colors, 8),
$rmd-theme-dark-surface
) !default;

Expand Down
3 changes: 1 addition & 2 deletions packages/dev-utils/src/utils/styles/variable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -189,8 +189,7 @@ export function getCompiledValue(
return { name, value: originalValue };
}

const data = `@use 'sass:meta';
${getEverythingScss()}
const data = `${getEverythingScss()}
.output {
--value: #{meta.inspect(${originalValue})};
Expand Down
4 changes: 3 additions & 1 deletion packages/dialog/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group dialog
////

@use 'sass:map';

@import '~@react-md/overlay/dist/variables';
@import '~@react-md/theme/dist/variables';
@import '~@react-md/theme/dist/functions';
Expand All @@ -27,7 +29,7 @@ $rmd-dialog-light-background-color: rmd-theme-var(surface) !default;
/// @require $rmd-theme-dark-elevation-colors
/// @type Color
/// @since 2.7.0
$rmd-dialog-dark-elevation-background-color: map-get(
$rmd-dialog-dark-elevation-background-color: map.get(
$rmd-theme-dark-elevation-colors,
$rmd-dialog-elevation
) !default;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use 'sass:map';
@use 'react-md' as *;
@use './solarized';

Expand Down Expand Up @@ -78,7 +79,7 @@

&.important,
&.bold {
font-weight: map-get($rmd-typography-font-weights, bold);
font-weight: map.get($rmd-typography-font-weights, bold);
}

&.italic {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
@use 'sass:map';
@use 'react-md' as *;

.container {
color: $rmd-black-base;
display: flex;
font-weight: map-get($rmd-typography-font-weights, bold);
font-weight: map.get($rmd-typography-font-weights, bold);
justify-content: space-between;
padding: 1rem;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use 'sass:map';
@use 'react-md' as *;

.container {
Expand All @@ -9,7 +10,7 @@
}

strong {
font-weight: map-get($rmd-typography-font-weights, bold);
font-weight: map.get($rmd-typography-font-weights, bold);
}

em {
Expand Down
3 changes: 2 additions & 1 deletion packages/documentation/src/components/Home/Logo.module.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use 'sass:map';
@use 'react-md' as *;

.primary {
Expand All @@ -14,6 +15,6 @@
transform: translateX(0.7em);
}

font-weight: map-get($rmd-typography-font-weights, bold);
font-weight: map.get($rmd-typography-font-weights, bold);
transform: translateX(-0.8em);
}
8 changes: 5 additions & 3 deletions packages/elevation/src/_functions.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group elevation
////

@use 'sass:map';

@import '~@react-md/theme/dist/functions';
@import './variables';

Expand Down Expand Up @@ -40,19 +42,19 @@
}

$color: rmd-theme($color);
$shadow-1-value: map-get($rmd-elevation-shadow-1-map, $z-value);
$shadow-1-value: map.get($rmd-elevation-shadow-1-map, $z-value);
$shadow-1-color: rgba(
$color,
$rmd-elevation-shadow-1-opacity + $opacity-boost
);

$shadow-2-value: map-get($rmd-elevation-shadow-2-map, $z-value);
$shadow-2-value: map.get($rmd-elevation-shadow-2-map, $z-value);
$shadow-2-color: rgba(
$color,
$rmd-elevation-shadow-2-opacity + $opacity-boost
);

$shadow-3-value: map-get($rmd-elevation-shadow-3-map, $z-value);
$shadow-3-value: map.get($rmd-elevation-shadow-3-map, $z-value);
$shadow-3-color: rgba(
$color,
$rmd-elevation-shadow-3-opacity + $opacity-boost
Expand Down
4 changes: 3 additions & 1 deletion packages/form/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group form
////

@use 'sass:color';

@import '~@react-md/theme/dist/color-palette';
@import '~@react-md/theme/dist/helpers';
@import '~@react-md/theme/dist/functions';
Expand All @@ -27,7 +29,7 @@ $rmd-form-error-hover-color: rmd-theme-get-swatch(
$rmd-form-error-color,
700,
true,
darken($rmd-form-error-color, 10%),
color.adjust($rmd-form-error-color, $lightness: -10%),
rmd-form-error-color
) !default;

Expand Down
4 changes: 3 additions & 1 deletion packages/form/src/select/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group form-select
////

@use 'sass:map';

@import '~@react-md/theme/dist/color-palette';
@import '~@react-md/theme/dist/functions';
@import '~@react-md/utils/dist/variables';
Expand Down Expand Up @@ -36,7 +38,7 @@ $rmd-listbox-light-background-color: rmd-theme-var(surface) !default;
/// @require $rmd-theme-dark-elevation-colors
/// @type Color
/// @since 2.7.0
$rmd-listbox-dark-elevation-background-color: map-get(
$rmd-listbox-dark-elevation-background-color: map.get(
$rmd-theme-dark-elevation-colors,
$rmd-listbox-elevation
) !default;
Expand Down
4 changes: 3 additions & 1 deletion packages/form/src/toggle/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group form-toggle
////

@use 'sass:color';

@import '~@react-md/button/dist/mixins';
@import '~@react-md/icon/dist/mixins';
@import '~@react-md/menu/dist/mixins';
Expand Down Expand Up @@ -336,7 +338,7 @@
&::after {
@include rmd-elevation(1);

background-color: darken($rmd-white-base, 5%);
background-color: color.adjust($rmd-white-base, $lightness: -5%);
border-radius: inherit;
content: '';
height: $rmd-switch-ball-size;
Expand Down
7 changes: 5 additions & 2 deletions packages/form/src/toggle/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
/// @group form-toggle
////

@use 'sass:map';
@use 'sass:color';

@import '~@react-md/theme/dist/color-palette';
@import '~@react-md/theme/dist/functions';

Expand Down Expand Up @@ -97,7 +100,7 @@ $rmd-switch-track-width: 2.25rem !default;
/// @type Color
$rmd-switch-track-background-color: if(
$rmd-theme-dark-elevation,
map-get($rmd-theme-dark-elevation-colors, 24),
map.get($rmd-theme-dark-elevation-colors, 24),
rgba($rmd-black-base, 0.38)
) !default;

Expand Down Expand Up @@ -139,7 +142,7 @@ $rmd-switch-ball-disabled-color: rmd-theme-get-swatch(
$rmd-theme-secondary,
200,
false,
darken($rmd-theme-secondary, 5%),
color.adjust($rmd-theme-secondary, $lightness: -5%),
rmd-switch-ball-disabled-color
) !default;

Expand Down
12 changes: 7 additions & 5 deletions packages/icon/src/_material-icons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group icon
////

@use 'sass:map';

@import '~@react-md/typography/dist/variables';
@import './mixins';

Expand Down Expand Up @@ -61,13 +63,13 @@
@font-face {
font-family: $font-family;
font-style: normal;
font-weight: map-get($rmd-typography-font-weights, normal);
font-weight: map.get($rmd-typography-font-weights, normal);

@if $old-ie-support {
@if $font-map == null {
src: url($font-url + '.eot');
} @else {
src: #{map-get($font-map, eot)};
src: #{map.get($font-map, eot)};
}
}

Expand All @@ -79,9 +81,9 @@
url($font-url + '.ttf')
format('truetype');
} @else {
$woff2: map-get($font-url-or-map, woff2);
$woff: map-get($font-url-or-map, woff);
$truetype: map-get($font-url-or-map, truetype);
$woff2: map.get($font-url-or-map, woff2);
$woff: map.get($font-url-or-map, woff);
$truetype: map.get($font-url-or-map, truetype);

$src: local($font-family), local($font-name);
$src: "local(#{$font-family}), local(#{$font-name}), #{$woff2} format('woff2'), #{$woff} format('woff'), #{$truetype} format('truetype')";
Expand Down
2 changes: 1 addition & 1 deletion packages/media/src/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
/// @param {Number} width - The width to enforce for the responsive media
/// @param {Number} height - The height to enforce for the responsive media
@mixin rmd-media-aspect-ratio($width, $height) {
padding-bottom: percentage(math.div($height, $width));
padding-bottom: math.percentage(math.div($height, $width));
}

/// Creates the styles for a media container that should enforce a specific
Expand Down
2 changes: 1 addition & 1 deletion packages/media/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ $rmd-media-selectors: (img '>svg' iframe video embed object) !default;
/// enforced.
///
/// @type Number
$rmd-media-default-aspect-ratio: percentage(math.div(9, 16)) !default;
$rmd-media-default-aspect-ratio: math.percentage(math.div(9, 16)) !default;

/// A Map including the default aspect ratios to create for responsive media
/// with a forced aspect ratio. Each key must be a string for a class name
Expand Down
4 changes: 3 additions & 1 deletion packages/menu/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group menu
////

@use 'sass:map';

@import '~@react-md/theme/dist/mixins';
@import '~@react-md/list/dist/functions';
@import '~@react-md/utils/dist/variables';
Expand All @@ -25,7 +27,7 @@ $rmd-menu-light-background-color: rmd-theme-var(surface) !default;
/// @require $rmd-theme-dark-elevation-colors
/// @type Color
/// @since 2.7.0
$rmd-menu-dark-elevation-background-color: map-get(
$rmd-menu-dark-elevation-background-color: map.get(
$rmd-theme-dark-elevation-colors,
$rmd-menu-elevation
) !default;
Expand Down
6 changes: 4 additions & 2 deletions packages/sheet/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group sheet
////

@use 'sass:map';

@import '~@react-md/dialog/dist/variables';
@import '~@react-md/overlay/dist/variables';
@import '~@react-md/transition/dist/variables';
Expand Down Expand Up @@ -61,7 +63,7 @@ $rmd-sheet-light-background-color: rmd-dialog-theme-var(
/// @require $rmd-theme-dark-elevation-colors
/// @type Color
/// @since 2.7.0
$rmd-sheet-dark-elevation-background-color: map-get(
$rmd-sheet-dark-elevation-background-color: map.get(
$rmd-theme-dark-elevation-colors,
$rmd-sheet-elevation
) !default;
Expand Down Expand Up @@ -115,7 +117,7 @@ $rmd-sheet-raised-light-background-color: rmd-dialog-theme-var(
/// @require $rmd-theme-dark-elevation-colors
/// @type Color
/// @since 2.7.0
$rmd-sheet-raised-dark-elevation-background-color: map-get(
$rmd-sheet-raised-dark-elevation-background-color: map.get(
$rmd-theme-dark-elevation-colors,
$rmd-sheet-raised-elevation
) !default;
Expand Down

0 comments on commit 6159e16

Please sign in to comment.