refactor: Update SCSS imports to use global namespace for better read…

…ability
Amsterdam · Dec 13, 2024 · 39acbcf · 39acbcf
1 parent 1f1f12a
commit 39acbcf
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 37 deletions.
diff --git a/packages/css/src/components/breakout/breakout.scss b/packages/css/src/components/breakout/breakout.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@use "../../common/breakpoint";
-@use "../grid/grid";
+@use "../../common/breakpoint" as *;
+@use "../grid/grid" as *;
 @use "../grid/mixins" as *;
 
 $ams-breakout-row-span-max: 4;
@@ -82,7 +82,7 @@ $ams-breakout-row-span-max: 4;
   }
 }
 
-@media screen and (min-width: breakpoint.$ams-breakpoint-medium) {
+@media screen and (min-width: $ams-breakpoint-medium) {
   @for $i from 1 through grid.$ams-grid-column-count {
     .ams-breakout__cell--col-span-#{$i}-medium {
       @include ams-grid__cell--span-medium($i);
@@ -94,7 +94,7 @@ $ams-breakout-row-span-max: 4;
   }
 }
 
-@media screen and (min-width: breakpoint.$ams-breakpoint-wide) {
+@media screen and (min-width: $ams-breakpoint-wide) {
   @for $i from 1 through grid.$ams-grid-column-count {
     .ams-breakout__cell--col-span-#{$i}-wide {
       @include ams-grid__cell--span-wide($i);
@@ -138,7 +138,7 @@ $ams-breakout-row-span-max: 4;
   }
 }
 
-@media screen and (min-width: breakpoint.$ams-breakpoint-medium) {
+@media screen and (min-width: $ams-breakpoint-medium) {
   @for $i from 1 through $ams-breakout-row-span-max {
     .ams-breakout__cell--row-span-#{$i}-medium {
       grid-row-end: span $i;
@@ -150,7 +150,7 @@ $ams-breakout-row-span-max: 4;
   }
 }
 
-@media screen and (min-width: breakpoint.$ams-breakpoint-wide) {
+@media screen and (min-width: $ams-breakpoint-wide) {
   @for $i from 1 through $ams-breakout-row-span-max {
     .ams-breakout__cell--row-span-#{$i}-wide {
       grid-row-end: span $i;

diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
@@ -3,13 +3,13 @@
  * Copyright Gemeente Amsterdam
  */
 
-@use "../../common/input-label-focus";
-@use "../../common/hide-input";
+@use "../../common/input-label-focus" as *;
+@use "../../common/hide-input" as *;
 @use "../../common/text-rendering" as *;
 
 .ams-checkbox__input {
-  @include hide-input.hide-input;
-  @include input-label-focus.input-label-focus;
+  @include hide-input;
+  @include input-label-focus;
 }
 
 .ams-checkbox__checkmark {

diff --git a/packages/css/src/components/column/column.scss b/packages/css/src/components/column/column.scss
@@ -3,15 +3,15 @@
  * Copyright Gemeente Amsterdam
  */
 
-@use "../../common/size";
+@use "../../common/size" as *;
 
 .ams-column {
   display: flex;
   flex-direction: column;
   gap: var(--ams-column-gap-md);
 }
 
-@each $size, $label in size.$ams-sizes {
+@each $size, $label in $ams-sizes {
   @if $size != "md" {
     .ams-column--gap-#{$label} {
       gap: var(--ams-column-gap-#{$size});

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@use "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
 @use "../../common/text-rendering" as *;
 
 @mixin reset-dl {
@@ -24,7 +24,7 @@
   @include text-rendering;
 }
 
-@media screen and (min-width: breakpoint.$ams-breakpoint-medium) {
+@media screen and (min-width: $ams-breakpoint-medium) {
   .ams-description-list {
     grid-template-columns: auto 1fr;
   }
@@ -49,7 +49,7 @@
 .ams-description-list__term {
   font-weight: var(--ams-description-list-term-font-weight);
 
-  @media screen and (min-width: breakpoint.$ams-breakpoint-medium) {
+  @media screen and (min-width: $ams-breakpoint-medium) {
     grid-column-start: 1;
   }
 }
@@ -64,7 +64,7 @@
 
   @include reset-dd;
 
-  @media screen and (min-width: breakpoint.$ams-breakpoint-medium) {
+  @media screen and (min-width: $ams-breakpoint-medium) {
     grid-column-start: 2;
     padding-inline-start: 0;
   }

diff --git a/packages/css/src/components/gap/gap.scss b/packages/css/src/components/gap/gap.scss
@@ -4,13 +4,13 @@
  */
 
 @use "sass:map";
-@use "../../common/size";
+@use "../../common/size" as *;
 
 [class|="ams-gap-"] {
   display: grid !important;
 }
 
-@each $size in map.keys(size.$ams-sizes) {
+@each $size in map.keys($ams-sizes) {
   @if $size != "no" {
     .ams-gap--#{$size} {
       grid-gap: var(--ams-gap-#{$size}) !important;

diff --git a/packages/css/src/components/grid/_mixins.scss b/packages/css/src/components/grid/_mixins.scss
@@ -1,4 +1,4 @@
-@use "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
 
 /**
  * @license EUPL-1.2+
@@ -12,11 +12,11 @@
   padding-inline: var(--ams-grid-padding-inline);
   row-gap: var(--ams-grid-row-gap-md);
 
-  @media screen and (min-width: breakpoint.$ams-breakpoint-medium) {
+  @media screen and (min-width: $ams-breakpoint-medium) {
     grid-template-columns: repeat(var(--ams-grid-medium-column-count), 1fr);
   }
 
-  @media screen and (min-width: breakpoint.$ams-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     grid-template-columns: repeat(var(--ams-grid-wide-column-count), 1fr);
   }
 }
@@ -88,25 +88,25 @@
 }
 
 @mixin ams-grid__cell--span-medium($i) {
-  @media screen and (min-width: breakpoint.$ams-breakpoint-medium) {
+  @media screen and (min-width: $ams-breakpoint-medium) {
     grid-column-end: span $i;
   }
 }
 
 @mixin ams-grid__cell--start-medium($i) {
-  @media screen and (min-width: breakpoint.$ams-breakpoint-medium) {
+  @media screen and (min-width: $ams-breakpoint-medium) {
     grid-column-start: $i;
   }
 }
 
 @mixin ams-grid__cell--span-wide($i) {
-  @media screen and (min-width: breakpoint.$ams-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     grid-column-end: span $i;
   }
 }
 
 @mixin ams-grid__cell--start-wide($i) {
-  @media screen and (min-width: breakpoint.$ams-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     grid-column-start: $i;
   }
 }
diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@use "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
 @use "mixins" as *;
 
 $ams-grid-column-count: 12;
@@ -81,7 +81,7 @@ $ams-grid-column-count: 12;
   }
 }
 
-@media screen and (min-width: breakpoint.$ams-breakpoint-medium) {
+@media screen and (min-width: $ams-breakpoint-medium) {
   @for $i from 1 through $ams-grid-column-count {
     .ams-grid__cell--span-#{$i}-medium {
       @include ams-grid__cell--span-medium($i);
@@ -93,7 +93,7 @@ $ams-grid-column-count: 12;
   }
 }
 
-@media screen and (min-width: breakpoint.$ams-breakpoint-wide) {
+@media screen and (min-width: $ams-breakpoint-wide) {
   @for $i from 1 through $ams-grid-column-count {
     .ams-grid__cell--span-#{$i}-wide {
       @include ams-grid__cell--span-wide($i);

diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@use "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
 
 .ams-header {
   align-items: center;
@@ -12,7 +12,7 @@
   padding-block: var(--ams-header-padding-block);
   row-gap: 1.5rem;
 
-  @media screen and (min-width: breakpoint.$ams-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     column-gap: var(--ams-header-column-gap);
     flex-wrap: nowrap;
   }
@@ -26,12 +26,12 @@
 .ams-header__links {
   display: none;
 
-  @media screen and (min-width: breakpoint.$ams-breakpoint-medium) {
+  @media screen and (min-width: $ams-breakpoint-medium) {
     display: block;
     flex: 10 0 auto;
   }
 
-  @media screen and (min-width: breakpoint.$ams-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     order: 3;
   }
 }
@@ -41,7 +41,7 @@
   padding-inline-start: var(--ams-page-menu-column-gap); // TODO Don’t use tokens of another component
   text-align: end;
 
-  @media screen and (min-width: breakpoint.$ams-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     order: 4;
     padding-inline-start: 0;
   }
@@ -50,7 +50,7 @@
 .ams-header__app-name {
   flex: 1 1 100%;
 
-  @media screen and (min-width: breakpoint.$ams-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     min-inline-size: 0;
     order: 2;
 

diff --git a/packages/css/src/components/image-slider/image-slider.scss b/packages/css/src/components/image-slider/image-slider.scss
@@ -2,7 +2,7 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-@use "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
 
 .ams-image-slider {
   display: grid;
@@ -49,7 +49,7 @@
   grid-row: 1;
   justify-content: space-between;
 
-  @media (pointer: coarse) and (max-width: breakpoint.$ams-breakpoint-medium) {
+  @media (pointer: coarse) and (max-width: $ams-breakpoint-medium) {
     display: none;
   }
 }

diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@use "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
 
 @mixin reset-button {
   background-color: transparent;