From 48b1b46452bb9e357ac78dc4b4c4a6a29c96e1bf Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Mon, 9 Dec 2024 10:55:56 +0100 Subject: [PATCH 1/6] Ran the sass-migrator --- .../src/components/accordion/accordion.scss | 4 +- .../src/components/blockquote/blockquote.scss | 8 +- .../src/components/breadcrumb/breadcrumb.scss | 4 +- .../css/src/components/breakout/breakout.scss | 60 ++++----- .../css/src/components/button/button.scss | 4 +- .../character-count/character-count.scss | 4 +- .../css/src/components/checkbox/checkbox.scss | 12 +- .../css/src/components/column/column.scss | 4 +- .../src/components/date-input/date-input.scss | 4 +- .../description-list/description-list.scss | 12 +- .../error-message/error-message.scss | 4 +- .../src/components/field-set/field-set.scss | 8 +- .../src/components/file-input/file-input.scss | 4 +- packages/css/src/components/gap/gap.scss | 5 +- packages/css/src/components/grid/_mixins.scss | 14 +- packages/css/src/components/grid/grid.scss | 48 +++---- .../css/src/components/header/header.scss | 12 +- .../css/src/components/heading/heading.scss | 8 +- .../components/image-slider/image-slider.scss | 4 +- packages/css/src/components/index.scss | 126 +++++++++--------- packages/css/src/components/label/label.scss | 8 +- .../src/components/link-list/link-list.scss | 8 +- packages/css/src/components/link/link.scss | 4 +- .../css/src/components/margin/margin.scss | 5 +- .../components/ordered-list/ordered-list.scss | 4 +- .../components/page-heading/page-heading.scss | 8 +- .../src/components/page-menu/page-menu.scss | 4 +- .../src/components/pagination/pagination.scss | 4 +- .../src/components/paragraph/paragraph.scss | 4 +- .../password-input/password-input.scss | 4 +- packages/css/src/components/radio/radio.scss | 12 +- packages/css/src/components/row/row.scss | 4 +- .../components/search-field/search-field.scss | 4 +- .../css/src/components/switch/switch.scss | 8 +- .../table-of-contents/table-of-contents.scss | 4 +- packages/css/src/components/tabs/tabs.scss | 2 +- .../src/components/text-area/text-area.scss | 4 +- .../src/components/text-input/text-input.scss | 4 +- .../src/components/time-input/time-input.scss | 4 +- .../top-task-link/top-task-link.scss | 8 +- .../unordered-list/unordered-list.scss | 4 +- 41 files changed, 232 insertions(+), 228 deletions(-) diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss index 5355c17281..92f7a72a35 100644 --- a/packages/css/src/components/accordion/accordion.scss +++ b/packages/css/src/components/accordion/accordion.scss @@ -3,14 +3,14 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; .ams-accordion { display: flex; flex-direction: column; gap: var(--ams-accordion-gap); - @include text-rendering; + @include text-rendering.text-rendering; } .ams-accordion__header { diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss index e1f39d94ef..1ee3fc8989 100644 --- a/packages/css/src/components/blockquote/blockquote.scss +++ b/packages/css/src/components/blockquote/blockquote.scss @@ -3,8 +3,8 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/hyphenation"; -@import "../../common/text-rendering"; +@use "../../common/hyphenation"; +@use "../../common/text-rendering"; @mixin reset-blockquote { margin-block: 0; @@ -21,8 +21,8 @@ line-height: var(--ams-blockquote-line-height); quotes: "“" "”"; - @include hyphenation; - @include text-rendering; + @include hyphenation.hyphenation; + @include text-rendering.text-rendering; @include reset-blockquote; &::before { diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss index 1fc4231726..38bfc2c16d 100644 --- a/packages/css/src/components/breadcrumb/breadcrumb.scss +++ b/packages/css/src/components/breadcrumb/breadcrumb.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-ol { margin-block: 0; @@ -22,7 +22,7 @@ break-after: avoid; break-inside: avoid; - @include text-rendering; + @include text-rendering.text-rendering; @include reset-ol; } diff --git a/packages/css/src/components/breakout/breakout.scss b/packages/css/src/components/breakout/breakout.scss index fb27c4bccb..5dd25b0539 100644 --- a/packages/css/src/components/breakout/breakout.scss +++ b/packages/css/src/components/breakout/breakout.scss @@ -3,105 +3,105 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/breakpoint"; -@import "../grid/grid"; -@import "../grid/mixins"; +@use "../../common/breakpoint"; +@use "../grid/grid"; +@use "../grid/mixins"; $ams-breakout-row-span-max: 4; .ams-breakout { - @include ams-grid; + @include mixins.ams-grid; } // Grid gap .ams-breakout--gap-vertical--none { - @include ams-grid--gap-vertical--none; + @include mixins.ams-grid--gap-vertical--none; } .ams-breakout--gap-vertical--small { - @include ams-grid--gap-vertical--small; + @include mixins.ams-grid--gap-vertical--small; } .ams-breakout--gap-vertical--large { - @include ams-grid--gap-vertical--large; + @include mixins.ams-grid--gap-vertical--large; } // Grid padding .ams-breakout--padding-bottom--small { - @include ams-grid--padding-bottom--small; + @include mixins.ams-grid--padding-bottom--small; } .ams-breakout--padding-bottom--medium { - @include ams-grid--padding-bottom--medium; + @include mixins.ams-grid--padding-bottom--medium; } .ams-breakout--padding-bottom--large { - @include ams-grid--padding-bottom--large; + @include mixins.ams-grid--padding-bottom--large; } .ams-breakout--padding-top--small { - @include ams-grid--padding-top--small; + @include mixins.ams-grid--padding-top--small; } .ams-breakout--padding-top--medium { - @include ams-grid--padding-top--medium; + @include mixins.ams-grid--padding-top--medium; } .ams-breakout--padding-top--large { - @include ams-grid--padding-top--large; + @include mixins.ams-grid--padding-top--large; } .ams-breakout--padding-vertical--small { - @include ams-grid--padding-vertical--small; + @include mixins.ams-grid--padding-vertical--small; } .ams-breakout--padding-vertical--medium { - @include ams-grid--padding-vertical--medium; + @include mixins.ams-grid--padding-vertical--medium; } .ams-breakout--padding-vertical--large { - @include ams-grid--padding-vertical--large; + @include mixins.ams-grid--padding-vertical--large; } // Column span // The order of these declaration blocks ensures the intended specificity. .ams-breakout__cell--col-span-all { - @include ams-grid__cell--span-all; + @include mixins.ams-grid__cell--span-all; } -@for $i from 1 through $ams-grid-column-count { +@for $i from 1 through grid.$ams-grid-column-count { .ams-breakout__cell--col-span-#{$i} { - @include ams-grid__cell--span($i); + @include mixins.ams-grid__cell--span($i); } .ams-breakout__cell--col-start-#{$i} { - @include ams-grid__cell--start($i); + @include mixins.ams-grid__cell--start($i); } } -@media screen and (min-width: $ams-breakpoint-medium) { - @for $i from 1 through $ams-grid-column-count { +@media screen and (min-width: breakpoint.$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); + @include mixins.ams-grid__cell--span-medium($i); } .ams-breakout__cell--col-start-#{$i}-medium { - @include ams-grid__cell--start-medium($i); + @include mixins.ams-grid__cell--start-medium($i); } } } -@media screen and (min-width: $ams-breakpoint-wide) { - @for $i from 1 through $ams-grid-column-count { +@media screen and (min-width: breakpoint.$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); + @include mixins.ams-grid__cell--span-wide($i); } .ams-breakout__cell--col-start-#{$i}-wide { - @include ams-grid__cell--start-wide($i); + @include mixins.ams-grid__cell--start-wide($i); } } } @@ -138,7 +138,7 @@ $ams-breakout-row-span-max: 4; } } -@media screen and (min-width: $ams-breakpoint-medium) { +@media screen and (min-width: breakpoint.$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: $ams-breakpoint-wide) { +@media screen and (min-width: breakpoint.$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/button/button.scss b/packages/css/src/components/button/button.scss index baf5276da5..54373b5e15 100644 --- a/packages/css/src/components/button/button.scss +++ b/packages/css/src/components/button/button.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-button { border: 0; @@ -26,7 +26,7 @@ padding-inline: var(--ams-button-padding-inline); touch-action: manipulation; - @include text-rendering; + @include text-rendering.text-rendering; @include reset-button; &:disabled, diff --git a/packages/css/src/components/character-count/character-count.scss b/packages/css/src/components/character-count/character-count.scss index e359156634..84d72683bf 100644 --- a/packages/css/src/components/character-count/character-count.scss +++ b/packages/css/src/components/character-count/character-count.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; .ams-character-count { color: var(--ams-character-count-color); @@ -12,7 +12,7 @@ font-weight: var(--ams-character-count-font-weight); line-height: var(--ams-character-count-line-height); - @include text-rendering; + @include text-rendering.text-rendering; } .ams-character-count--error { diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss index e2c93e2863..0d78696711 100644 --- a/packages/css/src/components/checkbox/checkbox.scss +++ b/packages/css/src/components/checkbox/checkbox.scss @@ -3,13 +3,13 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/input-label-focus"; -@import "../../common/hide-input"; -@import "../../common/text-rendering"; +@use "../../common/input-label-focus"; +@use "../../common/hide-input"; +@use "../../common/text-rendering"; .ams-checkbox__input { - @include hide-input; - @include input-label-focus; + @include hide-input.hide-input; + @include input-label-focus.input-label-focus; } .ams-checkbox__checkmark { @@ -44,7 +44,7 @@ line-height: var(--ams-checkbox-line-height); outline-offset: var(--ams-checkbox-outline-offset); - @include text-rendering; + @include text-rendering.text-rendering; &:hover { color: var(--ams-checkbox-hover-color); diff --git a/packages/css/src/components/column/column.scss b/packages/css/src/components/column/column.scss index 8094a40840..70b8509046 100644 --- a/packages/css/src/components/column/column.scss +++ b/packages/css/src/components/column/column.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/size"; +@use "../../common/size"; .ams-column { display: flex; @@ -11,7 +11,7 @@ gap: var(--ams-column-gap-md); } -@each $size, $label in $ams-sizes { +@each $size, $label in size.$ams-sizes { @if $size != "md" { .ams-column--gap-#{$label} { gap: var(--ams-column-gap-#{$size}); diff --git a/packages/css/src/components/date-input/date-input.scss b/packages/css/src/components/date-input/date-input.scss index b7022e7722..759b0d4f55 100644 --- a/packages/css/src/components/date-input/date-input.scss +++ b/packages/css/src/components/date-input/date-input.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-input { -webkit-appearance: none; // Reset appearance for Safari < 15.4 @@ -35,7 +35,7 @@ padding-inline: var(--ams-date-input-padding-inline); touch-action: manipulation; - @include text-rendering; + @include text-rendering.text-rendering; @include reset-input; &:hover { diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index 7a5680868a..a1e4316b5a 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -3,8 +3,8 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/breakpoint"; -@import "../../common/text-rendering"; +@use "../../common/breakpoint"; +@use "../../common/text-rendering"; @mixin reset-dl { margin-block: 0; @@ -21,10 +21,10 @@ row-gap: var(--ams-description-list-row-gap); @include reset-dl; - @include text-rendering; + @include text-rendering.text-rendering; } -@media screen and (min-width: $ams-breakpoint-medium) { +@media screen and (min-width: breakpoint.$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: $ams-breakpoint-medium) { + @media screen and (min-width: breakpoint.$ams-breakpoint-medium) { grid-column-start: 1; } } @@ -64,7 +64,7 @@ @include reset-dd; - @media screen and (min-width: $ams-breakpoint-medium) { + @media screen and (min-width: breakpoint.$ams-breakpoint-medium) { grid-column-start: 2; padding-inline-start: 0; } diff --git a/packages/css/src/components/error-message/error-message.scss b/packages/css/src/components/error-message/error-message.scss index bdc789802b..e1b8fb2f36 100644 --- a/packages/css/src/components/error-message/error-message.scss +++ b/packages/css/src/components/error-message/error-message.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-p { margin-block: 0; @@ -19,6 +19,6 @@ gap: var(--ams-error-message-gap); line-height: var(--ams-error-message-line-height); - @include text-rendering; + @include text-rendering.text-rendering; @include reset-p; } diff --git a/packages/css/src/components/field-set/field-set.scss b/packages/css/src/components/field-set/field-set.scss index 9ee7d329b9..4141f814fd 100644 --- a/packages/css/src/components/field-set/field-set.scss +++ b/packages/css/src/components/field-set/field-set.scss @@ -3,8 +3,8 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/hyphenation"; -@import "../../common/text-rendering"; +@use "../../common/hyphenation"; +@use "../../common/text-rendering"; @mixin reset-fieldset { border: 0; @@ -46,7 +46,7 @@ --ams-field-set-legend-margin-block-end ); /* Because of a bug in Chrome we can’t use display grid or flex for this gap */ - @include hyphenation; - @include text-rendering; + @include hyphenation.hyphenation; + @include text-rendering.text-rendering; @include reset-legend; } diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss index 4b73941f5f..729481190e 100644 --- a/packages/css/src/components/file-input/file-input.scss +++ b/packages/css/src/components/file-input/file-input.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-button { border: 0; @@ -26,7 +26,7 @@ padding-inline: var(--ams-file-input-padding-inline); touch-action: manipulation; - @include text-rendering; + @include text-rendering.text-rendering; } .ams-file-input:disabled { diff --git a/packages/css/src/components/gap/gap.scss b/packages/css/src/components/gap/gap.scss index b5e2b5ee2a..157767cfb5 100644 --- a/packages/css/src/components/gap/gap.scss +++ b/packages/css/src/components/gap/gap.scss @@ -3,13 +3,14 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/size"; +@use "sass:map"; +@use "../../common/size"; [class|="ams-gap-"] { display: grid !important; } -@each $size in map-keys($ams-sizes) { +@each $size in map.keys(size.$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 index 7d1a55922f..a93470199d 100644 --- a/packages/css/src/components/grid/_mixins.scss +++ b/packages/css/src/components/grid/_mixins.scss @@ -1,3 +1,5 @@ +@use "../../common/breakpoint"; + /** * @license EUPL-1.2+ * Copyright Gemeente Amsterdam @@ -10,11 +12,11 @@ padding-inline: var(--ams-grid-padding-inline); row-gap: var(--ams-grid-row-gap-md); - @media screen and (min-width: $ams-breakpoint-medium) { + @media screen and (min-width: breakpoint.$ams-breakpoint-medium) { grid-template-columns: repeat(var(--ams-grid-medium-column-count), 1fr); } - @media screen and (min-width: $ams-breakpoint-wide) { + @media screen and (min-width: breakpoint.$ams-breakpoint-wide) { grid-template-columns: repeat(var(--ams-grid-wide-column-count), 1fr); } } @@ -86,25 +88,25 @@ } @mixin ams-grid__cell--span-medium($i) { - @media screen and (min-width: $ams-breakpoint-medium) { + @media screen and (min-width: breakpoint.$ams-breakpoint-medium) { grid-column-end: span $i; } } @mixin ams-grid__cell--start-medium($i) { - @media screen and (min-width: $ams-breakpoint-medium) { + @media screen and (min-width: breakpoint.$ams-breakpoint-medium) { grid-column-start: $i; } } @mixin ams-grid__cell--span-wide($i) { - @media screen and (min-width: $ams-breakpoint-wide) { + @media screen and (min-width: breakpoint.$ams-breakpoint-wide) { grid-column-end: span $i; } } @mixin ams-grid__cell--start-wide($i) { - @media screen and (min-width: $ams-breakpoint-wide) { + @media screen and (min-width: breakpoint.$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 index 33185a2964..6aa32d0232 100644 --- a/packages/css/src/components/grid/grid.scss +++ b/packages/css/src/components/grid/grid.scss @@ -3,104 +3,104 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/breakpoint"; -@import "mixins"; +@use "../../common/breakpoint"; +@use "mixins"; $ams-grid-column-count: 12; .ams-grid { - @include ams-grid; + @include mixins.ams-grid; } // Grid gap .ams-grid--gap-vertical--none { - @include ams-grid--gap-vertical--none; + @include mixins.ams-grid--gap-vertical--none; } .ams-grid--gap-vertical--small { - @include ams-grid--gap-vertical--small; + @include mixins.ams-grid--gap-vertical--small; } .ams-grid--gap-vertical--large { - @include ams-grid--gap-vertical--large; + @include mixins.ams-grid--gap-vertical--large; } // Grid padding .ams-grid--padding-bottom--small { - @include ams-grid--padding-bottom--small; + @include mixins.ams-grid--padding-bottom--small; } .ams-grid--padding-bottom--medium { - @include ams-grid--padding-bottom--medium; + @include mixins.ams-grid--padding-bottom--medium; } .ams-grid--padding-bottom--large { - @include ams-grid--padding-bottom--large; + @include mixins.ams-grid--padding-bottom--large; } .ams-grid--padding-top--small { - @include ams-grid--padding-top--small; + @include mixins.ams-grid--padding-top--small; } .ams-grid--padding-top--medium { - @include ams-grid--padding-top--medium; + @include mixins.ams-grid--padding-top--medium; } .ams-grid--padding-top--large { - @include ams-grid--padding-top--large; + @include mixins.ams-grid--padding-top--large; } .ams-grid--padding-vertical--small { - @include ams-grid--padding-vertical--small; + @include mixins.ams-grid--padding-vertical--small; } .ams-grid--padding-vertical--medium { - @include ams-grid--padding-vertical--medium; + @include mixins.ams-grid--padding-vertical--medium; } .ams-grid--padding-vertical--large { - @include ams-grid--padding-vertical--large; + @include mixins.ams-grid--padding-vertical--large; } // Column span // The order of these declaration blocks ensures the intended specificity. .ams-grid__cell--span-all { - @include ams-grid__cell--span-all; + @include mixins.ams-grid__cell--span-all; } @for $i from 1 through $ams-grid-column-count { .ams-grid__cell--span-#{$i} { - @include ams-grid__cell--span($i); + @include mixins.ams-grid__cell--span($i); } .ams-grid__cell--start-#{$i} { - @include ams-grid__cell--start($i); + @include mixins.ams-grid__cell--start($i); } } -@media screen and (min-width: $ams-breakpoint-medium) { +@media screen and (min-width: breakpoint.$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); + @include mixins.ams-grid__cell--span-medium($i); } .ams-grid__cell--start-#{$i}-medium { - @include ams-grid__cell--start-medium($i); + @include mixins.ams-grid__cell--start-medium($i); } } } -@media screen and (min-width: $ams-breakpoint-wide) { +@media screen and (min-width: breakpoint.$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); + @include mixins.ams-grid__cell--span-wide($i); } .ams-grid__cell--start-#{$i}-wide { - @include ams-grid__cell--start-wide($i); + @include mixins.ams-grid__cell--start-wide($i); } } } diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss index 1014dbb3a3..6532842e6c 100644 --- a/packages/css/src/components/header/header.scss +++ b/packages/css/src/components/header/header.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/breakpoint"; +@use "../../common/breakpoint"; .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: $ams-breakpoint-wide) { + @media screen and (min-width: breakpoint.$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: $ams-breakpoint-medium) { + @media screen and (min-width: breakpoint.$ams-breakpoint-medium) { display: block; flex: 10 0 auto; } - @media screen and (min-width: $ams-breakpoint-wide) { + @media screen and (min-width: breakpoint.$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: $ams-breakpoint-wide) { + @media screen and (min-width: breakpoint.$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: $ams-breakpoint-wide) { + @media screen and (min-width: breakpoint.$ams-breakpoint-wide) { min-inline-size: 0; order: 2; diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss index 3eb185c147..50b30178e2 100644 --- a/packages/css/src/components/heading/heading.scss +++ b/packages/css/src/components/heading/heading.scss @@ -3,8 +3,8 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/hyphenation"; -@import "../../common/text-rendering"; +@use "../../common/hyphenation"; +@use "../../common/text-rendering"; @mixin reset-hx { margin-block: 0; @@ -18,8 +18,8 @@ font-family: var(--ams-heading-font-family); font-weight: var(--ams-heading-font-weight); - @include hyphenation; - @include text-rendering; + @include hyphenation.hyphenation; + @include text-rendering.text-rendering; @include reset-hx; } diff --git a/packages/css/src/components/image-slider/image-slider.scss b/packages/css/src/components/image-slider/image-slider.scss index 36a87b3aa7..a17a9cc279 100644 --- 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 */ -@import "../../common/breakpoint"; +@use "../../common/breakpoint"; .ams-image-slider { display: grid; @@ -49,7 +49,7 @@ grid-row: 1; justify-content: space-between; - @media (pointer: coarse) and (max-width: $ams-breakpoint-medium) { + @media (pointer: coarse) and (max-width: breakpoint.$ams-breakpoint-medium) { display: none; } } diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index 995f0179fe..e74f7e2d99 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -4,66 +4,66 @@ */ /* Append here */ -@import "./action-group/action-group"; -@import "./breakout/breakout"; -@import "./hint/hint"; -@import "./password-input/password-input"; -@import "./form-error-list/form-error-list"; -@import "./image-slider/image-slider"; -@import "./table-of-contents/table-of-contents"; -@import "./error-message/error-message"; -@import "./file-input/file-input"; -@import "./field/field"; -@import "./select/select"; -@import "./time-input/time-input"; -@import "./date-input/date-input"; -@import "./document/document"; -@import "./avatar/avatar"; -@import "./character-count/character-count"; -@import "./description-list/description-list"; -@import "./row/row"; -@import "./radio/radio"; -@import "./tabs/tabs"; -@import "./text-area/text-area"; -@import "./column/column"; -@import "./margin/margin"; -@import "./gap/gap"; -@import "./field-set/field-set"; -@import "./link-list/link-list"; -@import "./badge/badge"; -@import "./table/table"; -@import "./mega-menu/mega-menu"; -@import "./icon-button/icon-button"; -@import "./skip-link/skip-link"; -@import "./overlap/overlap"; -@import "./header/header"; -@import "./mark/mark"; -@import "./text-input/text-input"; -@import "./search-field/search-field"; -@import "./logo/logo"; -@import "./dialog/dialog"; -@import "./image/image"; -@import "./pagination/pagination"; -@import "./accordion/accordion"; -@import "./alert/alert"; -@import "./aspect-ratio/aspect-ratio"; -@import "./blockquote/blockquote"; -@import "./breadcrumb/breadcrumb"; -@import "./button/button"; -@import "./card/card"; -@import "./checkbox/checkbox"; -@import "./label/label"; -@import "./grid/grid"; -@import "./heading/heading"; -@import "./spotlight/spotlight"; -@import "./icon/icon"; -@import "./link/link"; -@import "./ordered-list/ordered-list"; -@import "./page-heading/page-heading"; -@import "./page-menu/page-menu"; -@import "./paragraph/paragraph"; -@import "./screen/screen"; -@import "./switch/switch"; -@import "./top-task-link/top-task-link"; -@import "./unordered-list/unordered-list"; -@import "./visually-hidden/visually-hidden"; +@use "action-group/action-group"; +@use "breakout/breakout"; +@use "hint/hint"; +@use "password-input/password-input"; +@use "form-error-list/form-error-list"; +@use "image-slider/image-slider"; +@use "table-of-contents/table-of-contents"; +@use "error-message/error-message"; +@use "file-input/file-input"; +@use "field/field"; +@use "select/select"; +@use "time-input/time-input"; +@use "date-input/date-input"; +@use "document/document"; +@use "avatar/avatar"; +@use "character-count/character-count"; +@use "description-list/description-list"; +@use "row/row"; +@use "radio/radio"; +@use "tabs/tabs"; +@use "text-area/text-area"; +@use "column/column"; +@use "margin/margin"; +@use "gap/gap"; +@use "field-set/field-set"; +@use "link-list/link-list"; +@use "badge/badge"; +@use "table/table"; +@use "mega-menu/mega-menu"; +@use "icon-button/icon-button"; +@use "skip-link/skip-link"; +@use "overlap/overlap"; +@use "header/header"; +@use "mark/mark"; +@use "text-input/text-input"; +@use "search-field/search-field"; +@use "logo/logo"; +@use "dialog/dialog"; +@use "image/image"; +@use "pagination/pagination"; +@use "accordion/accordion"; +@use "alert/alert"; +@use "aspect-ratio/aspect-ratio"; +@use "blockquote/blockquote"; +@use "breadcrumb/breadcrumb"; +@use "button/button"; +@use "card/card"; +@use "checkbox/checkbox"; +@use "label/label"; +@use "grid/grid"; +@use "heading/heading"; +@use "spotlight/spotlight"; +@use "icon/icon"; +@use "link/link"; +@use "ordered-list/ordered-list"; +@use "page-heading/page-heading"; +@use "page-menu/page-menu"; +@use "paragraph/paragraph"; +@use "screen/screen"; +@use "switch/switch"; +@use "top-task-link/top-task-link"; +@use "unordered-list/unordered-list"; +@use "visually-hidden/visually-hidden"; diff --git a/packages/css/src/components/label/label.scss b/packages/css/src/components/label/label.scss index 53ab1f55a4..dd01236a45 100644 --- a/packages/css/src/components/label/label.scss +++ b/packages/css/src/components/label/label.scss @@ -3,8 +3,8 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/hyphenation"; -@import "../../common/text-rendering"; +@use "../../common/hyphenation"; +@use "../../common/text-rendering"; .ams-label { color: var(--ams-label-color); @@ -13,6 +13,6 @@ font-weight: var(--ams-label-font-weight); line-height: var(--ams-label-line-height); - @include hyphenation; - @include text-rendering; + @include hyphenation.hyphenation; + @include text-rendering.text-rendering; } diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss index 450968b00b..3aa531e0ff 100644 --- a/packages/css/src/components/link-list/link-list.scss +++ b/packages/css/src/components/link-list/link-list.scss @@ -3,8 +3,8 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/hyphenation"; -@import "../../common/text-rendering"; +@use "../../common/hyphenation"; +@use "../../common/text-rendering"; @mixin reset-ul { list-style: none; @@ -17,7 +17,7 @@ display: grid; gap: var(--ams-link-list-gap); - @include text-rendering; + @include text-rendering.text-rendering; @include reset-ul; } @@ -50,7 +50,7 @@ font-size: var(--ams-link-list-link-large-font-size); line-height: var(--ams-link-list-link-large-line-height); - @include hyphenation; + @include hyphenation.hyphenation; } .ams-link-list__link--contrast-color { diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss index 8ce355a48c..eccfb7dcfc 100644 --- a/packages/css/src/components/link/link.scss +++ b/packages/css/src/components/link/link.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; .ams-link { color: var(--ams-link-color); @@ -11,7 +11,7 @@ font-weight: var(--ams-link-font-weight); outline-offset: var(--ams-link-outline-offset); - @include text-rendering; + @include text-rendering.text-rendering; &:hover { color: var(--ams-link-hover-color); diff --git a/packages/css/src/components/margin/margin.scss b/packages/css/src/components/margin/margin.scss index 45b9953919..fd0867f509 100644 --- a/packages/css/src/components/margin/margin.scss +++ b/packages/css/src/components/margin/margin.scss @@ -3,9 +3,10 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/size"; +@use "sass:map"; +@use "../../common/size"; -@each $size in map-keys($ams-sizes) { +@each $size in map.keys(size.$ams-sizes) { @if $size != "no" { .ams-mb--#{$size} { margin-block-end: var(--ams-margin-#{$size}) !important; diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss index 3ac1f633f0..96b8aa970d 100644 --- a/packages/css/src/components/ordered-list/ordered-list.scss +++ b/packages/css/src/components/ordered-list/ordered-list.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-ol { list-style-type: none; @@ -16,7 +16,7 @@ display: grid; gap: var(--ams-ordered-list-gap); - @include text-rendering; + @include text-rendering.text-rendering; @include reset-ol; } diff --git a/packages/css/src/components/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss index a982fcee05..96f5d0c2dc 100644 --- a/packages/css/src/components/page-heading/page-heading.scss +++ b/packages/css/src/components/page-heading/page-heading.scss @@ -3,8 +3,8 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/hyphenation"; -@import "../../common/text-rendering"; +@use "../../common/hyphenation"; +@use "../../common/text-rendering"; @mixin reset-h1 { margin-block: 0; @@ -20,8 +20,8 @@ font-weight: var(--ams-page-heading-font-weight); line-height: var(--ams-page-heading-line-height); - @include hyphenation; - @include text-rendering; + @include hyphenation.hyphenation; + @include text-rendering.text-rendering; @include reset-h1; } diff --git a/packages/css/src/components/page-menu/page-menu.scss b/packages/css/src/components/page-menu/page-menu.scss index 3ca0ac7b17..ef57e0b319 100644 --- a/packages/css/src/components/page-menu/page-menu.scss +++ b/packages/css/src/components/page-menu/page-menu.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-ul { margin-block: 0; @@ -53,7 +53,7 @@ box-sizing: border-box; @include page-menu-item; - @include text-rendering; + @include text-rendering.text-rendering; } .ams-page-menu__link:hover, diff --git a/packages/css/src/components/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss index ab63116416..fcfb16462f 100644 --- a/packages/css/src/components/pagination/pagination.scss +++ b/packages/css/src/components/pagination/pagination.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-ol { list-style-type: none; @@ -45,7 +45,7 @@ text-underline-offset: var(--ams-pagination-button-text-underline-offset); touch-action: manipulation; - @include text-rendering; + @include text-rendering.text-rendering; &:disabled { display: none; diff --git a/packages/css/src/components/paragraph/paragraph.scss b/packages/css/src/components/paragraph/paragraph.scss index 8b9108021a..c77e9a0fb4 100644 --- a/packages/css/src/components/paragraph/paragraph.scss +++ b/packages/css/src/components/paragraph/paragraph.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-p { margin-block: 0; @@ -17,7 +17,7 @@ font-weight: var(--ams-paragraph-font-weight); line-height: var(--ams-paragraph-line-height); - @include text-rendering; + @include text-rendering.text-rendering; @include reset-p; } diff --git a/packages/css/src/components/password-input/password-input.scss b/packages/css/src/components/password-input/password-input.scss index 902b82f255..5836523481 100644 --- a/packages/css/src/components/password-input/password-input.scss +++ b/packages/css/src/components/password-input/password-input.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-input { -webkit-appearance: none; // Reset appearance for Safari < 15.4 @@ -28,7 +28,7 @@ padding-inline: var(--ams-password-input-padding-inline); touch-action: manipulation; - @include text-rendering; + @include text-rendering.text-rendering; @include reset-input; &:hover { diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss index a9ba889b1f..8faf21fc3a 100644 --- a/packages/css/src/components/radio/radio.scss +++ b/packages/css/src/components/radio/radio.scss @@ -3,13 +3,13 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/input-label-focus"; -@import "../../common/hide-input"; -@import "../../common/text-rendering"; +@use "../../common/input-label-focus"; +@use "../../common/hide-input"; +@use "../../common/text-rendering"; .ams-radio__input { - @include hide-input; - @include input-label-focus; + @include hide-input.hide-input; + @include input-label-focus.input-label-focus; } // Default @@ -26,7 +26,7 @@ text-decoration-thickness: var(--ams-radio-text-decoration-thickness); text-underline-offset: var(--ams-radio-text-underline-offset); - @include text-rendering; + @include text-rendering.text-rendering; } .ams-radio__icon-container { diff --git a/packages/css/src/components/row/row.scss b/packages/css/src/components/row/row.scss index 943401dc44..9a175d81b7 100644 --- a/packages/css/src/components/row/row.scss +++ b/packages/css/src/components/row/row.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/size"; +@use "../../common/size"; .ams-row { display: flex; @@ -11,7 +11,7 @@ gap: var(--ams-row-gap-md); } -@each $size, $label in $ams-sizes { +@each $size, $label in size.$ams-sizes { @if $size != "md" { .ams-row--gap-#{$label} { gap: var(--ams-row-gap-#{$size}); diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss index 56c378fd90..549fdbbe88 100644 --- a/packages/css/src/components/search-field/search-field.scss +++ b/packages/css/src/components/search-field/search-field.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; .ams-search-field { display: flex; @@ -33,7 +33,7 @@ padding-inline: var(--ams-search-field-input-padding-inline); touch-action: manipulation; - @include text-rendering; + @include text-rendering.text-rendering; @include reset-input; &:hover { diff --git a/packages/css/src/components/switch/switch.scss b/packages/css/src/components/switch/switch.scss index 827b1efdfb..9d68170ec1 100644 --- a/packages/css/src/components/switch/switch.scss +++ b/packages/css/src/components/switch/switch.scss @@ -3,12 +3,12 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/input-label-focus"; -@import "../../common/hide-input"; +@use "../../common/input-label-focus"; +@use "../../common/hide-input"; .ams-switch__input { - @include hide-input; - @include input-label-focus; + @include hide-input.hide-input; + @include input-label-focus.input-label-focus; } .ams-switch__label { diff --git a/packages/css/src/components/table-of-contents/table-of-contents.scss b/packages/css/src/components/table-of-contents/table-of-contents.scss index b312071d3c..755722d69e 100644 --- a/packages/css/src/components/table-of-contents/table-of-contents.scss +++ b/packages/css/src/components/table-of-contents/table-of-contents.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-ul { margin-block: 0; @@ -27,7 +27,7 @@ gap: var(--ams-table-of-contents-list-gap); list-style: none; - @include text-rendering; + @include text-rendering.text-rendering; @include reset-ul; .ams-table-of-contents__list { diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss index 4c51d07bf2..e2e7aeaba8 100644 --- a/packages/css/src/components/tabs/tabs.scss +++ b/packages/css/src/components/tabs/tabs.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/breakpoint"; +@use "../../common/breakpoint"; @mixin reset-button { background-color: transparent; diff --git a/packages/css/src/components/text-area/text-area.scss b/packages/css/src/components/text-area/text-area.scss index 0587b12d12..eb41ba24d7 100644 --- a/packages/css/src/components/text-area/text-area.scss +++ b/packages/css/src/components/text-area/text-area.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-textarea { -webkit-appearance: none; // Reset appearance for Safari < 15.4 @@ -30,7 +30,7 @@ padding-inline: var(--ams-text-area-padding-inline); touch-action: manipulation; - @include text-rendering; + @include text-rendering.text-rendering; @include reset-textarea; &:hover { diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss index 0ee5b3ee81..edc0426983 100644 --- a/packages/css/src/components/text-input/text-input.scss +++ b/packages/css/src/components/text-input/text-input.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-input { -webkit-appearance: none; // Reset appearance for Safari < 15.4 @@ -28,7 +28,7 @@ padding-inline: var(--ams-text-input-padding-inline); touch-action: manipulation; - @include text-rendering; + @include text-rendering.text-rendering; @include reset-input; &:hover { diff --git a/packages/css/src/components/time-input/time-input.scss b/packages/css/src/components/time-input/time-input.scss index 10c41af4d2..2511a76aba 100644 --- a/packages/css/src/components/time-input/time-input.scss +++ b/packages/css/src/components/time-input/time-input.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-input { -webkit-appearance: none; // Reset appearance for Safari < 15.4 @@ -36,7 +36,7 @@ padding-inline: var(--ams-time-input-padding-inline); touch-action: manipulation; - @include text-rendering; + @include text-rendering.text-rendering; @include reset-input; &:hover { diff --git a/packages/css/src/components/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss index b1418d6215..4efe7e8528 100644 --- a/packages/css/src/components/top-task-link/top-task-link.scss +++ b/packages/css/src/components/top-task-link/top-task-link.scss @@ -3,8 +3,8 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/hyphenation"; -@import "../../common/text-rendering"; +@use "../../common/hyphenation"; +@use "../../common/text-rendering"; .ams-top-task-link { break-inside: avoid; @@ -26,8 +26,8 @@ text-decoration-thickness: var(--ams-top-task-link-label-text-decoration-thickness); text-underline-offset: var(--ams-top-task-link-label-text-underline-offset); - @include hyphenation; - @include text-rendering; + @include hyphenation.hyphenation; + @include text-rendering.text-rendering; } .ams-top-task-link:hover .ams-top-task-link__label { diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss index d602dda30f..344a56ae5c 100644 --- a/packages/css/src/components/unordered-list/unordered-list.scss +++ b/packages/css/src/components/unordered-list/unordered-list.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@import "../../common/text-rendering"; +@use "../../common/text-rendering"; @mixin reset-ul { list-style: none; @@ -16,7 +16,7 @@ display: grid; gap: var(--ams-unordered-list-gap); - @include text-rendering; + @include text-rendering.text-rendering; @include reset-ul; } From a437c6d4717daa7f62196d0f44df446c851d6c8f Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Mon, 9 Dec 2024 15:50:29 +0100 Subject: [PATCH 2/6] refactor: Importing as global in multiple components --- .../src/components/accordion/accordion.scss | 4 +- .../src/components/blockquote/blockquote.scss | 4 +- .../src/components/breadcrumb/breadcrumb.scss | 4 +- .../css/src/components/breakout/breakout.scss | 42 +++++++++---------- .../css/src/components/button/button.scss | 4 +- .../character-count/character-count.scss | 4 +- .../css/src/components/checkbox/checkbox.scss | 4 +- .../src/components/date-input/date-input.scss | 4 +- .../description-list/description-list.scss | 4 +- .../error-message/error-message.scss | 4 +- .../src/components/field-set/field-set.scss | 4 +- .../src/components/file-input/file-input.scss | 4 +- packages/css/src/components/grid/grid.scss | 42 +++++++++---------- .../css/src/components/heading/heading.scss | 4 +- packages/css/src/components/label/label.scss | 4 +- .../src/components/link-list/link-list.scss | 4 +- packages/css/src/components/link/link.scss | 4 +- .../components/ordered-list/ordered-list.scss | 4 +- .../components/page-heading/page-heading.scss | 4 +- .../src/components/page-menu/page-menu.scss | 4 +- .../src/components/pagination/pagination.scss | 4 +- .../src/components/paragraph/paragraph.scss | 4 +- .../password-input/password-input.scss | 4 +- packages/css/src/components/radio/radio.scss | 4 +- .../components/search-field/search-field.scss | 4 +- .../table-of-contents/table-of-contents.scss | 4 +- .../src/components/text-area/text-area.scss | 4 +- .../src/components/text-input/text-input.scss | 4 +- .../src/components/time-input/time-input.scss | 4 +- .../top-task-link/top-task-link.scss | 4 +- .../unordered-list/unordered-list.scss | 4 +- 31 files changed, 100 insertions(+), 100 deletions(-) diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss index 92f7a72a35..244d99b619 100644 --- a/packages/css/src/components/accordion/accordion.scss +++ b/packages/css/src/components/accordion/accordion.scss @@ -3,14 +3,14 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; .ams-accordion { display: flex; flex-direction: column; gap: var(--ams-accordion-gap); - @include text-rendering.text-rendering; + @include text-rendering; } .ams-accordion__header { diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss index 1ee3fc8989..e74037513f 100644 --- a/packages/css/src/components/blockquote/blockquote.scss +++ b/packages/css/src/components/blockquote/blockquote.scss @@ -4,7 +4,7 @@ */ @use "../../common/hyphenation"; -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-blockquote { margin-block: 0; @@ -22,7 +22,7 @@ quotes: "“" "”"; @include hyphenation.hyphenation; - @include text-rendering.text-rendering; + @include text-rendering; @include reset-blockquote; &::before { diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss index 38bfc2c16d..9e18fc47b7 100644 --- a/packages/css/src/components/breadcrumb/breadcrumb.scss +++ b/packages/css/src/components/breadcrumb/breadcrumb.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-ol { margin-block: 0; @@ -22,7 +22,7 @@ break-after: avoid; break-inside: avoid; - @include text-rendering.text-rendering; + @include text-rendering; @include reset-ol; } diff --git a/packages/css/src/components/breakout/breakout.scss b/packages/css/src/components/breakout/breakout.scss index 5dd25b0539..6398670485 100644 --- a/packages/css/src/components/breakout/breakout.scss +++ b/packages/css/src/components/breakout/breakout.scss @@ -5,91 +5,91 @@ @use "../../common/breakpoint"; @use "../grid/grid"; -@use "../grid/mixins"; +@use "../grid/mixins" as *; $ams-breakout-row-span-max: 4; .ams-breakout { - @include mixins.ams-grid; + @include ams-grid; } // Grid gap .ams-breakout--gap-vertical--none { - @include mixins.ams-grid--gap-vertical--none; + @include ams-grid--gap-vertical--none; } .ams-breakout--gap-vertical--small { - @include mixins.ams-grid--gap-vertical--small; + @include ams-grid--gap-vertical--small; } .ams-breakout--gap-vertical--large { - @include mixins.ams-grid--gap-vertical--large; + @include ams-grid--gap-vertical--large; } // Grid padding .ams-breakout--padding-bottom--small { - @include mixins.ams-grid--padding-bottom--small; + @include ams-grid--padding-bottom--small; } .ams-breakout--padding-bottom--medium { - @include mixins.ams-grid--padding-bottom--medium; + @include ams-grid--padding-bottom--medium; } .ams-breakout--padding-bottom--large { - @include mixins.ams-grid--padding-bottom--large; + @include ams-grid--padding-bottom--large; } .ams-breakout--padding-top--small { - @include mixins.ams-grid--padding-top--small; + @include ams-grid--padding-top--small; } .ams-breakout--padding-top--medium { - @include mixins.ams-grid--padding-top--medium; + @include ams-grid--padding-top--medium; } .ams-breakout--padding-top--large { - @include mixins.ams-grid--padding-top--large; + @include ams-grid--padding-top--large; } .ams-breakout--padding-vertical--small { - @include mixins.ams-grid--padding-vertical--small; + @include ams-grid--padding-vertical--small; } .ams-breakout--padding-vertical--medium { - @include mixins.ams-grid--padding-vertical--medium; + @include ams-grid--padding-vertical--medium; } .ams-breakout--padding-vertical--large { - @include mixins.ams-grid--padding-vertical--large; + @include ams-grid--padding-vertical--large; } // Column span // The order of these declaration blocks ensures the intended specificity. .ams-breakout__cell--col-span-all { - @include mixins.ams-grid__cell--span-all; + @include ams-grid__cell--span-all; } @for $i from 1 through grid.$ams-grid-column-count { .ams-breakout__cell--col-span-#{$i} { - @include mixins.ams-grid__cell--span($i); + @include ams-grid__cell--span($i); } .ams-breakout__cell--col-start-#{$i} { - @include mixins.ams-grid__cell--start($i); + @include ams-grid__cell--start($i); } } @media screen and (min-width: breakpoint.$ams-breakpoint-medium) { @for $i from 1 through grid.$ams-grid-column-count { .ams-breakout__cell--col-span-#{$i}-medium { - @include mixins.ams-grid__cell--span-medium($i); + @include ams-grid__cell--span-medium($i); } .ams-breakout__cell--col-start-#{$i}-medium { - @include mixins.ams-grid__cell--start-medium($i); + @include ams-grid__cell--start-medium($i); } } } @@ -97,11 +97,11 @@ $ams-breakout-row-span-max: 4; @media screen and (min-width: breakpoint.$ams-breakpoint-wide) { @for $i from 1 through grid.$ams-grid-column-count { .ams-breakout__cell--col-span-#{$i}-wide { - @include mixins.ams-grid__cell--span-wide($i); + @include ams-grid__cell--span-wide($i); } .ams-breakout__cell--col-start-#{$i}-wide { - @include mixins.ams-grid__cell--start-wide($i); + @include ams-grid__cell--start-wide($i); } } } diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss index 54373b5e15..1dbdce57e0 100644 --- a/packages/css/src/components/button/button.scss +++ b/packages/css/src/components/button/button.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-button { border: 0; @@ -26,7 +26,7 @@ padding-inline: var(--ams-button-padding-inline); touch-action: manipulation; - @include text-rendering.text-rendering; + @include text-rendering; @include reset-button; &:disabled, diff --git a/packages/css/src/components/character-count/character-count.scss b/packages/css/src/components/character-count/character-count.scss index 84d72683bf..b838676a38 100644 --- a/packages/css/src/components/character-count/character-count.scss +++ b/packages/css/src/components/character-count/character-count.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; .ams-character-count { color: var(--ams-character-count-color); @@ -12,7 +12,7 @@ font-weight: var(--ams-character-count-font-weight); line-height: var(--ams-character-count-line-height); - @include text-rendering.text-rendering; + @include text-rendering; } .ams-character-count--error { diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss index 0d78696711..0b6ba469c8 100644 --- a/packages/css/src/components/checkbox/checkbox.scss +++ b/packages/css/src/components/checkbox/checkbox.scss @@ -5,7 +5,7 @@ @use "../../common/input-label-focus"; @use "../../common/hide-input"; -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; .ams-checkbox__input { @include hide-input.hide-input; @@ -44,7 +44,7 @@ line-height: var(--ams-checkbox-line-height); outline-offset: var(--ams-checkbox-outline-offset); - @include text-rendering.text-rendering; + @include text-rendering; &:hover { color: var(--ams-checkbox-hover-color); diff --git a/packages/css/src/components/date-input/date-input.scss b/packages/css/src/components/date-input/date-input.scss index 759b0d4f55..e19f30be63 100644 --- a/packages/css/src/components/date-input/date-input.scss +++ b/packages/css/src/components/date-input/date-input.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-input { -webkit-appearance: none; // Reset appearance for Safari < 15.4 @@ -35,7 +35,7 @@ padding-inline: var(--ams-date-input-padding-inline); touch-action: manipulation; - @include text-rendering.text-rendering; + @include text-rendering; @include reset-input; &:hover { diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index a1e4316b5a..3bad3864b7 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -4,7 +4,7 @@ */ @use "../../common/breakpoint"; -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-dl { margin-block: 0; @@ -21,7 +21,7 @@ row-gap: var(--ams-description-list-row-gap); @include reset-dl; - @include text-rendering.text-rendering; + @include text-rendering; } @media screen and (min-width: breakpoint.$ams-breakpoint-medium) { diff --git a/packages/css/src/components/error-message/error-message.scss b/packages/css/src/components/error-message/error-message.scss index e1b8fb2f36..b688421cc9 100644 --- a/packages/css/src/components/error-message/error-message.scss +++ b/packages/css/src/components/error-message/error-message.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-p { margin-block: 0; @@ -19,6 +19,6 @@ gap: var(--ams-error-message-gap); line-height: var(--ams-error-message-line-height); - @include text-rendering.text-rendering; + @include text-rendering; @include reset-p; } diff --git a/packages/css/src/components/field-set/field-set.scss b/packages/css/src/components/field-set/field-set.scss index 4141f814fd..2d2b42d5c5 100644 --- a/packages/css/src/components/field-set/field-set.scss +++ b/packages/css/src/components/field-set/field-set.scss @@ -4,7 +4,7 @@ */ @use "../../common/hyphenation"; -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-fieldset { border: 0; @@ -47,6 +47,6 @@ ); /* Because of a bug in Chrome we can’t use display grid or flex for this gap */ @include hyphenation.hyphenation; - @include text-rendering.text-rendering; + @include text-rendering; @include reset-legend; } diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss index 729481190e..c90b269461 100644 --- a/packages/css/src/components/file-input/file-input.scss +++ b/packages/css/src/components/file-input/file-input.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-button { border: 0; @@ -26,7 +26,7 @@ padding-inline: var(--ams-file-input-padding-inline); touch-action: manipulation; - @include text-rendering.text-rendering; + @include text-rendering; } .ams-file-input:disabled { diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss index 6aa32d0232..5c66ad2401 100644 --- a/packages/css/src/components/grid/grid.scss +++ b/packages/css/src/components/grid/grid.scss @@ -4,91 +4,91 @@ */ @use "../../common/breakpoint"; -@use "mixins"; +@use "mixins" as *; $ams-grid-column-count: 12; .ams-grid { - @include mixins.ams-grid; + @include ams-grid; } // Grid gap .ams-grid--gap-vertical--none { - @include mixins.ams-grid--gap-vertical--none; + @include ams-grid--gap-vertical--none; } .ams-grid--gap-vertical--small { - @include mixins.ams-grid--gap-vertical--small; + @include ams-grid--gap-vertical--small; } .ams-grid--gap-vertical--large { - @include mixins.ams-grid--gap-vertical--large; + @include ams-grid--gap-vertical--large; } // Grid padding .ams-grid--padding-bottom--small { - @include mixins.ams-grid--padding-bottom--small; + @include ams-grid--padding-bottom--small; } .ams-grid--padding-bottom--medium { - @include mixins.ams-grid--padding-bottom--medium; + @include ams-grid--padding-bottom--medium; } .ams-grid--padding-bottom--large { - @include mixins.ams-grid--padding-bottom--large; + @include ams-grid--padding-bottom--large; } .ams-grid--padding-top--small { - @include mixins.ams-grid--padding-top--small; + @include ams-grid--padding-top--small; } .ams-grid--padding-top--medium { - @include mixins.ams-grid--padding-top--medium; + @include ams-grid--padding-top--medium; } .ams-grid--padding-top--large { - @include mixins.ams-grid--padding-top--large; + @include ams-grid--padding-top--large; } .ams-grid--padding-vertical--small { - @include mixins.ams-grid--padding-vertical--small; + @include ams-grid--padding-vertical--small; } .ams-grid--padding-vertical--medium { - @include mixins.ams-grid--padding-vertical--medium; + @include ams-grid--padding-vertical--medium; } .ams-grid--padding-vertical--large { - @include mixins.ams-grid--padding-vertical--large; + @include ams-grid--padding-vertical--large; } // Column span // The order of these declaration blocks ensures the intended specificity. .ams-grid__cell--span-all { - @include mixins.ams-grid__cell--span-all; + @include ams-grid__cell--span-all; } @for $i from 1 through $ams-grid-column-count { .ams-grid__cell--span-#{$i} { - @include mixins.ams-grid__cell--span($i); + @include ams-grid__cell--span($i); } .ams-grid__cell--start-#{$i} { - @include mixins.ams-grid__cell--start($i); + @include ams-grid__cell--start($i); } } @media screen and (min-width: breakpoint.$ams-breakpoint-medium) { @for $i from 1 through $ams-grid-column-count { .ams-grid__cell--span-#{$i}-medium { - @include mixins.ams-grid__cell--span-medium($i); + @include ams-grid__cell--span-medium($i); } .ams-grid__cell--start-#{$i}-medium { - @include mixins.ams-grid__cell--start-medium($i); + @include ams-grid__cell--start-medium($i); } } } @@ -96,11 +96,11 @@ $ams-grid-column-count: 12; @media screen and (min-width: breakpoint.$ams-breakpoint-wide) { @for $i from 1 through $ams-grid-column-count { .ams-grid__cell--span-#{$i}-wide { - @include mixins.ams-grid__cell--span-wide($i); + @include ams-grid__cell--span-wide($i); } .ams-grid__cell--start-#{$i}-wide { - @include mixins.ams-grid__cell--start-wide($i); + @include ams-grid__cell--start-wide($i); } } } diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss index 50b30178e2..a948ef3935 100644 --- a/packages/css/src/components/heading/heading.scss +++ b/packages/css/src/components/heading/heading.scss @@ -4,7 +4,7 @@ */ @use "../../common/hyphenation"; -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-hx { margin-block: 0; @@ -19,7 +19,7 @@ font-weight: var(--ams-heading-font-weight); @include hyphenation.hyphenation; - @include text-rendering.text-rendering; + @include text-rendering; @include reset-hx; } diff --git a/packages/css/src/components/label/label.scss b/packages/css/src/components/label/label.scss index dd01236a45..7b4b1efe9f 100644 --- a/packages/css/src/components/label/label.scss +++ b/packages/css/src/components/label/label.scss @@ -4,7 +4,7 @@ */ @use "../../common/hyphenation"; -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; .ams-label { color: var(--ams-label-color); @@ -14,5 +14,5 @@ line-height: var(--ams-label-line-height); @include hyphenation.hyphenation; - @include text-rendering.text-rendering; + @include text-rendering; } diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss index 3aa531e0ff..929af75c08 100644 --- a/packages/css/src/components/link-list/link-list.scss +++ b/packages/css/src/components/link-list/link-list.scss @@ -4,7 +4,7 @@ */ @use "../../common/hyphenation"; -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-ul { list-style: none; @@ -17,7 +17,7 @@ display: grid; gap: var(--ams-link-list-gap); - @include text-rendering.text-rendering; + @include text-rendering; @include reset-ul; } diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss index eccfb7dcfc..cdeded0c22 100644 --- a/packages/css/src/components/link/link.scss +++ b/packages/css/src/components/link/link.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; .ams-link { color: var(--ams-link-color); @@ -11,7 +11,7 @@ font-weight: var(--ams-link-font-weight); outline-offset: var(--ams-link-outline-offset); - @include text-rendering.text-rendering; + @include text-rendering; &:hover { color: var(--ams-link-hover-color); diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss index 96b8aa970d..c104507de0 100644 --- a/packages/css/src/components/ordered-list/ordered-list.scss +++ b/packages/css/src/components/ordered-list/ordered-list.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-ol { list-style-type: none; @@ -16,7 +16,7 @@ display: grid; gap: var(--ams-ordered-list-gap); - @include text-rendering.text-rendering; + @include text-rendering; @include reset-ol; } diff --git a/packages/css/src/components/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss index 96f5d0c2dc..992da8f852 100644 --- a/packages/css/src/components/page-heading/page-heading.scss +++ b/packages/css/src/components/page-heading/page-heading.scss @@ -4,7 +4,7 @@ */ @use "../../common/hyphenation"; -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-h1 { margin-block: 0; @@ -21,7 +21,7 @@ line-height: var(--ams-page-heading-line-height); @include hyphenation.hyphenation; - @include text-rendering.text-rendering; + @include text-rendering; @include reset-h1; } diff --git a/packages/css/src/components/page-menu/page-menu.scss b/packages/css/src/components/page-menu/page-menu.scss index ef57e0b319..57e3466894 100644 --- a/packages/css/src/components/page-menu/page-menu.scss +++ b/packages/css/src/components/page-menu/page-menu.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-ul { margin-block: 0; @@ -53,7 +53,7 @@ box-sizing: border-box; @include page-menu-item; - @include text-rendering.text-rendering; + @include text-rendering; } .ams-page-menu__link:hover, diff --git a/packages/css/src/components/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss index fcfb16462f..4ac40cd44b 100644 --- a/packages/css/src/components/pagination/pagination.scss +++ b/packages/css/src/components/pagination/pagination.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-ol { list-style-type: none; @@ -45,7 +45,7 @@ text-underline-offset: var(--ams-pagination-button-text-underline-offset); touch-action: manipulation; - @include text-rendering.text-rendering; + @include text-rendering; &:disabled { display: none; diff --git a/packages/css/src/components/paragraph/paragraph.scss b/packages/css/src/components/paragraph/paragraph.scss index c77e9a0fb4..a6abf28e70 100644 --- a/packages/css/src/components/paragraph/paragraph.scss +++ b/packages/css/src/components/paragraph/paragraph.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-p { margin-block: 0; @@ -17,7 +17,7 @@ font-weight: var(--ams-paragraph-font-weight); line-height: var(--ams-paragraph-line-height); - @include text-rendering.text-rendering; + @include text-rendering; @include reset-p; } diff --git a/packages/css/src/components/password-input/password-input.scss b/packages/css/src/components/password-input/password-input.scss index 5836523481..27102085e4 100644 --- a/packages/css/src/components/password-input/password-input.scss +++ b/packages/css/src/components/password-input/password-input.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-input { -webkit-appearance: none; // Reset appearance for Safari < 15.4 @@ -28,7 +28,7 @@ padding-inline: var(--ams-password-input-padding-inline); touch-action: manipulation; - @include text-rendering.text-rendering; + @include text-rendering; @include reset-input; &:hover { diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss index 8faf21fc3a..7199c97c33 100644 --- a/packages/css/src/components/radio/radio.scss +++ b/packages/css/src/components/radio/radio.scss @@ -5,7 +5,7 @@ @use "../../common/input-label-focus"; @use "../../common/hide-input"; -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; .ams-radio__input { @include hide-input.hide-input; @@ -26,7 +26,7 @@ text-decoration-thickness: var(--ams-radio-text-decoration-thickness); text-underline-offset: var(--ams-radio-text-underline-offset); - @include text-rendering.text-rendering; + @include text-rendering; } .ams-radio__icon-container { diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss index 549fdbbe88..43ea03ca62 100644 --- a/packages/css/src/components/search-field/search-field.scss +++ b/packages/css/src/components/search-field/search-field.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; .ams-search-field { display: flex; @@ -33,7 +33,7 @@ padding-inline: var(--ams-search-field-input-padding-inline); touch-action: manipulation; - @include text-rendering.text-rendering; + @include text-rendering; @include reset-input; &:hover { diff --git a/packages/css/src/components/table-of-contents/table-of-contents.scss b/packages/css/src/components/table-of-contents/table-of-contents.scss index 755722d69e..5c0740f54f 100644 --- a/packages/css/src/components/table-of-contents/table-of-contents.scss +++ b/packages/css/src/components/table-of-contents/table-of-contents.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-ul { margin-block: 0; @@ -27,7 +27,7 @@ gap: var(--ams-table-of-contents-list-gap); list-style: none; - @include text-rendering.text-rendering; + @include text-rendering; @include reset-ul; .ams-table-of-contents__list { diff --git a/packages/css/src/components/text-area/text-area.scss b/packages/css/src/components/text-area/text-area.scss index eb41ba24d7..ba165dcfc0 100644 --- a/packages/css/src/components/text-area/text-area.scss +++ b/packages/css/src/components/text-area/text-area.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-textarea { -webkit-appearance: none; // Reset appearance for Safari < 15.4 @@ -30,7 +30,7 @@ padding-inline: var(--ams-text-area-padding-inline); touch-action: manipulation; - @include text-rendering.text-rendering; + @include text-rendering; @include reset-textarea; &:hover { diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss index edc0426983..934407a5f3 100644 --- a/packages/css/src/components/text-input/text-input.scss +++ b/packages/css/src/components/text-input/text-input.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-input { -webkit-appearance: none; // Reset appearance for Safari < 15.4 @@ -28,7 +28,7 @@ padding-inline: var(--ams-text-input-padding-inline); touch-action: manipulation; - @include text-rendering.text-rendering; + @include text-rendering; @include reset-input; &:hover { diff --git a/packages/css/src/components/time-input/time-input.scss b/packages/css/src/components/time-input/time-input.scss index 2511a76aba..2469c079e5 100644 --- a/packages/css/src/components/time-input/time-input.scss +++ b/packages/css/src/components/time-input/time-input.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-input { -webkit-appearance: none; // Reset appearance for Safari < 15.4 @@ -36,7 +36,7 @@ padding-inline: var(--ams-time-input-padding-inline); touch-action: manipulation; - @include text-rendering.text-rendering; + @include text-rendering; @include reset-input; &:hover { diff --git a/packages/css/src/components/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss index 4efe7e8528..18771efed8 100644 --- a/packages/css/src/components/top-task-link/top-task-link.scss +++ b/packages/css/src/components/top-task-link/top-task-link.scss @@ -4,7 +4,7 @@ */ @use "../../common/hyphenation"; -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; .ams-top-task-link { break-inside: avoid; @@ -27,7 +27,7 @@ text-underline-offset: var(--ams-top-task-link-label-text-underline-offset); @include hyphenation.hyphenation; - @include text-rendering.text-rendering; + @include text-rendering; } .ams-top-task-link:hover .ams-top-task-link__label { diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss index 344a56ae5c..7c29691216 100644 --- a/packages/css/src/components/unordered-list/unordered-list.scss +++ b/packages/css/src/components/unordered-list/unordered-list.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/text-rendering"; +@use "../../common/text-rendering" as *; @mixin reset-ul { list-style: none; @@ -16,7 +16,7 @@ display: grid; gap: var(--ams-unordered-list-gap); - @include text-rendering.text-rendering; + @include text-rendering; @include reset-ul; } From 1f1f12a813630be95e55b0b3d7bdc469c0d72bc3 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 10 Dec 2024 15:59:04 +0100 Subject: [PATCH 3/6] refactor: Simplify hyphenation imports in multiple components --- packages/css/src/components/blockquote/blockquote.scss | 4 ++-- packages/css/src/components/field-set/field-set.scss | 4 ++-- packages/css/src/components/heading/heading.scss | 4 ++-- packages/css/src/components/label/label.scss | 4 ++-- packages/css/src/components/link-list/link-list.scss | 4 ++-- packages/css/src/components/page-heading/page-heading.scss | 4 ++-- packages/css/src/components/top-task-link/top-task-link.scss | 4 ++-- 7 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss index e74037513f..911abf3fb8 100644 --- a/packages/css/src/components/blockquote/blockquote.scss +++ b/packages/css/src/components/blockquote/blockquote.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/hyphenation"; +@use "../../common/hyphenation" as *; @use "../../common/text-rendering" as *; @mixin reset-blockquote { @@ -21,7 +21,7 @@ line-height: var(--ams-blockquote-line-height); quotes: "“" "”"; - @include hyphenation.hyphenation; + @include hyphenation; @include text-rendering; @include reset-blockquote; diff --git a/packages/css/src/components/field-set/field-set.scss b/packages/css/src/components/field-set/field-set.scss index 2d2b42d5c5..2e4328e126 100644 --- a/packages/css/src/components/field-set/field-set.scss +++ b/packages/css/src/components/field-set/field-set.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/hyphenation"; +@use "../../common/hyphenation" as *; @use "../../common/text-rendering" as *; @mixin reset-fieldset { @@ -46,7 +46,7 @@ --ams-field-set-legend-margin-block-end ); /* Because of a bug in Chrome we can’t use display grid or flex for this gap */ - @include hyphenation.hyphenation; + @include hyphenation; @include text-rendering; @include reset-legend; } diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss index a948ef3935..ee567e0465 100644 --- a/packages/css/src/components/heading/heading.scss +++ b/packages/css/src/components/heading/heading.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/hyphenation"; +@use "../../common/hyphenation" as *; @use "../../common/text-rendering" as *; @mixin reset-hx { @@ -18,7 +18,7 @@ font-family: var(--ams-heading-font-family); font-weight: var(--ams-heading-font-weight); - @include hyphenation.hyphenation; + @include hyphenation; @include text-rendering; @include reset-hx; } diff --git a/packages/css/src/components/label/label.scss b/packages/css/src/components/label/label.scss index 7b4b1efe9f..f69e82209e 100644 --- a/packages/css/src/components/label/label.scss +++ b/packages/css/src/components/label/label.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/hyphenation"; +@use "../../common/hyphenation" as *; @use "../../common/text-rendering" as *; .ams-label { @@ -13,6 +13,6 @@ font-weight: var(--ams-label-font-weight); line-height: var(--ams-label-line-height); - @include hyphenation.hyphenation; + @include hyphenation; @include text-rendering; } diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss index 929af75c08..bbe89d58e0 100644 --- a/packages/css/src/components/link-list/link-list.scss +++ b/packages/css/src/components/link-list/link-list.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/hyphenation"; +@use "../../common/hyphenation" as *; @use "../../common/text-rendering" as *; @mixin reset-ul { @@ -50,7 +50,7 @@ font-size: var(--ams-link-list-link-large-font-size); line-height: var(--ams-link-list-link-large-line-height); - @include hyphenation.hyphenation; + @include hyphenation; } .ams-link-list__link--contrast-color { diff --git a/packages/css/src/components/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss index 992da8f852..a51aa9e2ab 100644 --- a/packages/css/src/components/page-heading/page-heading.scss +++ b/packages/css/src/components/page-heading/page-heading.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/hyphenation"; +@use "../../common/hyphenation" as *; @use "../../common/text-rendering" as *; @mixin reset-h1 { @@ -20,7 +20,7 @@ font-weight: var(--ams-page-heading-font-weight); line-height: var(--ams-page-heading-line-height); - @include hyphenation.hyphenation; + @include hyphenation; @include text-rendering; @include reset-h1; } diff --git a/packages/css/src/components/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss index 18771efed8..5be5f0c304 100644 --- a/packages/css/src/components/top-task-link/top-task-link.scss +++ b/packages/css/src/components/top-task-link/top-task-link.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/hyphenation"; +@use "../../common/hyphenation" as *; @use "../../common/text-rendering" as *; .ams-top-task-link { @@ -26,7 +26,7 @@ text-decoration-thickness: var(--ams-top-task-link-label-text-decoration-thickness); text-underline-offset: var(--ams-top-task-link-label-text-underline-offset); - @include hyphenation.hyphenation; + @include hyphenation; @include text-rendering; } From 39acbcf34c48e5941130382937c19227e10c8306 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 13 Dec 2024 11:27:29 +0100 Subject: [PATCH 4/6] refactor: Update SCSS imports to use global namespace for better readability --- packages/css/src/components/breakout/breakout.scss | 12 ++++++------ packages/css/src/components/checkbox/checkbox.scss | 8 ++++---- packages/css/src/components/column/column.scss | 4 ++-- .../description-list/description-list.scss | 8 ++++---- packages/css/src/components/gap/gap.scss | 4 ++-- packages/css/src/components/grid/_mixins.scss | 14 +++++++------- packages/css/src/components/grid/grid.scss | 6 +++--- packages/css/src/components/header/header.scss | 12 ++++++------ .../src/components/image-slider/image-slider.scss | 4 ++-- packages/css/src/components/tabs/tabs.scss | 2 +- 10 files changed, 37 insertions(+), 37 deletions(-) diff --git a/packages/css/src/components/breakout/breakout.scss b/packages/css/src/components/breakout/breakout.scss index 6398670485..5c66f805d8 100644 --- 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 index 0b6ba469c8..71877569f8 100644 --- 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 index 70b8509046..137c162c23 100644 --- a/packages/css/src/components/column/column.scss +++ b/packages/css/src/components/column/column.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/size"; +@use "../../common/size" as *; .ams-column { display: flex; @@ -11,7 +11,7 @@ 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 index 3bad3864b7..b21b7cb7a4 100644 --- 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 index 157767cfb5..6d5ad3aef6 100644 --- 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 index a93470199d..d7797cdb74 100644 --- 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 index 5c66ad2401..91107b2ed0 100644 --- 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 index 6532842e6c..7c80af5d0a 100644 --- 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 index a17a9cc279..ccb18d05c7 100644 --- 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 index e2e7aeaba8..3b8d0ec0dc 100644 --- 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; From 74af110115b878619038c447fb9a7dc038d62c4d Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 13 Dec 2024 11:30:41 +0100 Subject: [PATCH 5/6] refactor: Update SCSS loop to use local variable for grid column count --- packages/css/src/components/breakout/breakout.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/css/src/components/breakout/breakout.scss b/packages/css/src/components/breakout/breakout.scss index 5c66f805d8..978666fbcc 100644 --- a/packages/css/src/components/breakout/breakout.scss +++ b/packages/css/src/components/breakout/breakout.scss @@ -72,7 +72,7 @@ $ams-breakout-row-span-max: 4; @include ams-grid__cell--span-all; } -@for $i from 1 through grid.$ams-grid-column-count { +@for $i from 1 through $ams-grid-column-count { .ams-breakout__cell--col-span-#{$i} { @include ams-grid__cell--span($i); } @@ -83,7 +83,7 @@ $ams-breakout-row-span-max: 4; } @media screen and (min-width: $ams-breakpoint-medium) { - @for $i from 1 through grid.$ams-grid-column-count { + @for $i from 1 through $ams-grid-column-count { .ams-breakout__cell--col-span-#{$i}-medium { @include ams-grid__cell--span-medium($i); } @@ -95,7 +95,7 @@ $ams-breakout-row-span-max: 4; } @media screen and (min-width: $ams-breakpoint-wide) { - @for $i from 1 through grid.$ams-grid-column-count { + @for $i from 1 through $ams-grid-column-count { .ams-breakout__cell--col-span-#{$i}-wide { @include ams-grid__cell--span-wide($i); } From d60b7e8089e8ac35c2188ccf878d3b7f8db9c364 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 13 Dec 2024 11:33:17 +0100 Subject: [PATCH 6/6] refactor: Simplify SCSS imports and usage for better clarity and consistency --- packages/css/src/components/margin/margin.scss | 4 ++-- packages/css/src/components/radio/radio.scss | 8 ++++---- packages/css/src/components/row/row.scss | 4 ++-- packages/css/src/components/switch/switch.scss | 8 ++++---- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/css/src/components/margin/margin.scss b/packages/css/src/components/margin/margin.scss index fd0867f509..6fee9d553b 100644 --- a/packages/css/src/components/margin/margin.scss +++ b/packages/css/src/components/margin/margin.scss @@ -4,9 +4,9 @@ */ @use "sass:map"; -@use "../../common/size"; +@use "../../common/size" as *; -@each $size in map.keys(size.$ams-sizes) { +@each $size in map.keys($ams-sizes) { @if $size != "no" { .ams-mb--#{$size} { margin-block-end: var(--ams-margin-#{$size}) !important; diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss index 7199c97c33..9a60153556 100644 --- a/packages/css/src/components/radio/radio.scss +++ b/packages/css/src/components/radio/radio.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-radio__input { - @include hide-input.hide-input; - @include input-label-focus.input-label-focus; + @include hide-input; + @include input-label-focus; } // Default diff --git a/packages/css/src/components/row/row.scss b/packages/css/src/components/row/row.scss index 9a175d81b7..ac8ef1ea09 100644 --- a/packages/css/src/components/row/row.scss +++ b/packages/css/src/components/row/row.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/size"; +@use "../../common/size" as *; .ams-row { display: flex; @@ -11,7 +11,7 @@ gap: var(--ams-row-gap-md); } -@each $size, $label in size.$ams-sizes { +@each $size, $label in $ams-sizes { @if $size != "md" { .ams-row--gap-#{$label} { gap: var(--ams-row-gap-#{$size}); diff --git a/packages/css/src/components/switch/switch.scss b/packages/css/src/components/switch/switch.scss index 9d68170ec1..65d82d3c44 100644 --- a/packages/css/src/components/switch/switch.scss +++ b/packages/css/src/components/switch/switch.scss @@ -3,12 +3,12 @@ * Copyright Gemeente Amsterdam */ -@use "../../common/input-label-focus"; -@use "../../common/hide-input"; +@use "../../common/input-label-focus" as *; +@use "../../common/hide-input" as *; .ams-switch__input { - @include hide-input.hide-input; - @include input-label-focus.input-label-focus; + @include hide-input; + @include input-label-focus; } .ams-switch__label {