Style(web): Apply stylistic rules

packages/web/src/scss/components/Alert/_Alert.scss

@@ -25,7 +25,6 @@
 }
 
 @include dictionaries.generate-colors('Alert', theme.$color-dictionary, theme.$color-dictionary-config);
-
 @include dictionaries.generate-colors(
     'Alert',
     theme.$color-dictionary,

packages/web/src/scss/components/Button/_Button.scss

@@ -44,7 +44,6 @@
     $overrides: theme.$color-dictionary-overrides,
     $generate-data-attribute: true
 );
-
 @include dictionaries.generate-sizes('Button', theme.$sizes);
 
 .Button--block {

packages/web/src/scss/components/Grid/_Grid.scss

@@ -25,5 +25,4 @@
 }
 
 @include tools.equal-columns(theme.$grid-equal-columns, theme.$breakpoints);
-
 @include tools.item(theme.$breakpoints);

packages/web/src/scss/components/Tag/_Tag.scss

@@ -12,15 +12,13 @@
 }
 
 @include dictionaries.generate-sizes('Tag', theme.$sizes);
-
 @include dictionaries.generate-colors(
     'Tag',
     theme.$color-dictionary,
     theme.$color-dictionary-config,
     null,
     theme.$color-dictionary-overrides
 );
-
 @include dictionaries.generate-colors(
     'Tag--subtle.Tag',
     theme.$color-dictionary,

packages/web/src/scss/components/UNSTABLE_Section/_UNSTABLE_Section.scss

@@ -2,7 +2,7 @@
     margin-bottom: 2.5rem;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
     .UNSTABLE_Section:not(:last-child) {
         margin-bottom: 4rem;
     }

packages/web/src/scss/tools/__tests__/_breakpoint.test.scss

@@ -13,7 +13,7 @@
             }
 
             @include test.expect() {
-                @media (min-width: 600px) {
+                @media (width >= 600px) {
                     .selector {
                         color: #bada55;
                     }
@@ -53,7 +53,7 @@
             }
 
             @include test.expect() {
-                @media (max-width: 599px) {
+                @media (width <= 599px) {
                     .selector {
                         color: #bada55;
                     }

packages/web/src/scss/tools/__tests__/_form-fields.test.scss

@@ -11,6 +11,7 @@
                     @include form-fields.label-disabled();
                 }
             }
+
             @include test.expect() {
                 .label-disabled-test {
                     color: form-fields-theme.$label-color-disabled;
@@ -30,6 +31,7 @@
                     @include form-fields.input-disabled();
                 }
             }
+
             @include test.expect() {
                 .input-disabled-test {
                     color: form-fields-theme.$input-color-disabled;
@@ -46,6 +48,7 @@
                     @include form-fields.box-field-fluid();
                 }
             }
+
             @include test.expect() {
                 .box-field-fluid-test {
                     width: 100%;

packages/web/src/scss/tools/__tests__/_typography.test.scss

@@ -27,7 +27,7 @@
             }
 
             @include test.expect() {
-                @media (min-width: map.get(tokens.$breakpoints, 'tablet')) {
+                @media (width >= #{map.get(tokens.$breakpoints, 'tablet')}) {
                     .typography-test {
                         font-style: italic;
                         font-weight: 700;

packages/web/src/scss/tools/_breakpoint.scss

@@ -1,30 +1,32 @@
-// Mixin to get the min-width media query for a breakpoint value.
+@use 'sass:string';
+
+// Mixin to get the width media query for a breakpoint value in up direction.
 //
 // Example: up(0) { … } will return …
-// Example: up(768px) { … } will return @media (min-width: 768px) { … }
+// Example: up(768px) { … } will return @media (width >= 768px) { … }
 //
 // Parameters are:
 // * $breakpoint-value: the breakpoint value (in pixels)
 @mixin up($breakpoint-value) {
     @if $breakpoint-value > 0 {
-        @media (min-width: $breakpoint-value) {
+        @media (width >= $breakpoint-value) {
             @content;
         }
     } @else {
         @content;
     }
 }
 
-// Mixin to get the max-width media query for a breakpoint value.
+// Mixin to get the width media query for a breakpoint value in down direction.
 //
 // Example: down(0) { … } will return …
-// Example: down(768px) { … } will return @media (max-width: 767px) { … }
+// Example: down(768px) { … } will return @media (width <= 767px) { … }
 //
 // Parameters are:
 // * $breakpoint-value: the breakpoint value (in pixels)
 @mixin down($breakpoint-value) {
     @if $breakpoint-value > 0 {
-        @media (max-width: ($breakpoint-value - 1px)) {
+        @media (width <= ($breakpoint-value - 1px)) {
             @content;
         }
     } @else {
@@ -45,10 +47,10 @@
 @function get-modifier($modifier, $name, $breakpoint-value) {
     @if $breakpoint-value > 0 {
         @if $modifier == 'infix' {
-            @return unquote($name + '--');
+            @return string.unquote($name + '--');
         }
 
-        @return unquote('-' + $name);
+        @return string.unquote('-' + $name);
     }
 
     @return '';

packages/web/src/scss/tools/_dictionaries.scss

@@ -1,5 +1,6 @@
 @use 'sass:list';
 @use 'sass:map';
+@use 'sass:meta';
 @use 'sass:string';
 @use '@tokens' as tokens;
 @use './links';
@@ -15,14 +16,17 @@
     @if map.has-key(tokens.$action-colors, #{$variant}-default) {
         @return tokens.$action-colors;
     }
+
     @if map.has-key(tokens.$emotion-colors, #{$variant}-default) {
         @return tokens.$emotion-colors;
     }
+
     @if map.has-key(tokens.$text-colors, #{$variant}-default) {
         @return tokens.$text-colors;
     }
 
     @error 'Invalid color dictionary value as there is no #{$variant}-default token either in action-colors, emotion-colors, or text-colors tokens';
+
     @return null;
 }
 
@@ -53,13 +57,16 @@
                 @return map.get($overrides, $dictionary-value, states, $state-name, $property-name);
             }
         }
+
         @if map.has-key($overrides, $dictionary-value, $property-name) {
             @return map.get($overrides, $dictionary-value, $property-name);
         }
     }
-    @if type-of($property-value) == 'string' {
+
+    @if meta.type-of($property-value) == 'string' {
         $tokens: -get-color-dictionary-tokens($dictionary-value);
-        @if type-of($tokens) == 'map' {
+
+        @if meta.type-of($tokens) == 'map' {
             @return map.get($tokens, #{$dictionary-value}-#{$property-value});
         }
     } @else {
@@ -166,6 +173,7 @@
     @each $dictionary-value in $dictionary-values {
         @each $print-value in $print-values {
             $variant-class: '#{$dictionary-value}';
+
             @if $print-value == 'disabled' {
                 $variant-class: '#{$dictionary-value}.link-#{$print-value}';
             } @else if $print-value != 'default' {

packages/web/src/scss/tools/_list.scss

@@ -5,10 +5,10 @@
 @function to-string($list, $separator: ' ') {
     $string: '';
 
-    @for $i from 1 through length($list) {
+    @for $i from 1 through list.length($list) {
         $string: $string + list.nth($list, $i);
 
-        @if $i < length($list) {
+        @if $i < list.length($list) {
             $string: $string + $separator;
         }
     }