From 3426b52ae01f85fad6fe733a1ce25b43e702c25f Mon Sep 17 00:00:00 2001 From: Cyrine Ben Romdhane <135605630+anicyne@users.noreply.github.com> Date: Thu, 27 Feb 2025 13:28:32 +0100 Subject: [PATCH] Refactor @import to @use --- .../components/@shared/_kol-alert-mixin.scss | 6 +-- .../@shared/_kol-table-stateless-mixin.scss | 6 +-- .../components/src/components/abbr/style.scss | 6 +-- .../src/components/accordion/style.scss | 8 ++-- .../src/components/alert/style.scss | 6 +-- .../src/components/avatar/style.scss | 6 +-- .../src/components/badge/style.scss | 6 +-- .../src/components/breadcrumb/style.scss | 4 +- .../src/components/button-group/style.scss | 4 +- .../src/components/button-link/style.scss | 6 +-- .../components/src/components/button.scss | 4 +- .../src/components/button/style.scss | 6 +-- .../components/src/components/card/style.scss | 6 +-- .../src/components/combobox/style.scss | 6 +-- .../src/components/details/style.scss | 8 ++-- .../src/components/drawer/style.scss | 4 +- .../components/src/components/form/style.scss | 9 +++-- .../src/components/heading/style.scss | 4 +- .../components/src/components/icon/style.scss | 4 +- .../src/components/image/style.scss | 4 +- .../src/components/indented-text/style.scss | 6 +-- .../src/components/input-checkbox/common.scss | 2 +- .../src/components/input-checkbox/style.scss | 15 ++++---- .../src/components/input-color/style.scss | 7 ++-- .../src/components/input-date/style.scss | 7 ++-- .../src/components/input-email/style.scss | 7 ++-- .../src/components/input-file/style.scss | 7 ++-- .../components/src/components/input-line.scss | 2 +- .../src/components/input-number/style.scss | 7 ++-- .../src/components/input-password/style.scss | 7 ++-- .../src/components/input-radio/style.scss | 7 ++-- .../src/components/input-range/style.scss | 7 ++-- .../src/components/input-text/style.scss | 7 ++-- packages/components/src/components/input.scss | 8 ++-- .../src/components/kolibri/style.scss | 4 +- .../src/components/link-button/style.scss | 6 +-- .../src/components/link-group/style.scss | 4 +- packages/components/src/components/link.scss | 4 +- .../components/src/components/link/style.scss | 6 +-- .../components/src/components/logo/style.scss | 4 +- .../src/components/modal/style.scss | 4 +- .../components/src/components/nav/style.scss | 6 +-- .../src/components/pagination/style.scss | 6 +-- .../src/components/popover/style.scss | 2 +- .../src/components/progress/style.scss | 4 +- .../src/components/quote/style.scss | 4 +- .../src/components/select/style.scss | 7 ++-- .../src/components/single-select/style.scss | 6 +-- .../src/components/skip-nav/style.scss | 4 +- .../components/src/components/span/style.scss | 4 +- .../components/src/components/spin/cycle.scss | 2 +- .../components/src/components/spin/dot.scss | 2 +- .../components/src/components/spin/style.scss | 8 ++-- .../src/components/split-button/style.scss | 8 ++-- packages/components/src/components/style.scss | 4 +- .../src/components/table-stateful/style.scss | 6 +-- .../src/components/table-stateless/style.scss | 8 ++-- .../components/src/components/tabs/style.scss | 8 ++-- .../src/components/textarea/style.scss | 6 +-- .../src/components/toaster/style.scss | 6 +-- .../src/components/toolbar/style.scss | 4 +- .../src/components/tooltip/style.scss | 2 +- .../src/components/tree-item/style.scss | 4 +- .../components/src/components/tree/style.scss | 4 +- .../src/components/version/style.scss | 4 +- .../Collapsible/collapsible.scss | 2 +- .../horizontal-scrollbar-advanced/layout.scss | 8 ++-- packages/samples/react/src/style.scss | 2 +- .../assets/material-icons/css/_mixins.scss | 4 +- .../assets/material-icons/css/_variables.scss | 6 +-- .../material-icons/css/material-icons.scss | 38 ++++++++----------- .../material-icons/iconfont/filled.scss | 6 +-- .../iconfont/material-icons.scss | 10 ++--- .../material-icons/iconfont/outlined.scss | 6 +-- .../assets/material-icons/iconfont/round.scss | 6 +-- .../assets/material-icons/iconfont/sharp.scss | 6 +-- .../material-icons/iconfont/two-tone.scss | 6 +-- .../themes/assets/material-symbols/index.scss | 6 +-- .../assets/material-symbols/outlined.scss | 4 +- .../assets/material-symbols/rounded.scss | 4 +- .../themes/assets/material-symbols/sharp.scss | 4 +- .../default/src/@shared/input-core.scss | 8 ++-- .../themes/default/src/components/abbr.scss | 2 +- .../default/src/components/accordion.scss | 6 +-- .../themes/default/src/components/alert.scss | 2 +- .../themes/default/src/components/badge.scss | 2 +- .../default/src/components/breadcrumb.scss | 2 +- .../default/src/components/button-link.scss | 2 +- .../themes/default/src/components/button.scss | 4 +- .../themes/default/src/components/card.scss | 2 +- .../default/src/components/combobox.scss | 8 ++-- .../default/src/components/details.scss | 6 +-- .../themes/default/src/components/drawer.scss | 2 +- .../themes/default/src/components/form.scss | 6 +-- .../default/src/components/heading.scss | 2 +- .../default/src/components/indented-text.scss | 2 +- .../src/components/input-checkbox.scss | 10 ++--- .../default/src/components/input-color.scss | 4 +- .../default/src/components/input-date.scss | 2 +- .../default/src/components/input-email.scss | 2 +- .../default/src/components/input-file.scss | 4 +- .../default/src/components/input-number.scss | 2 +- .../src/components/input-password.scss | 2 +- .../default/src/components/input-radio.scss | 8 ++-- .../default/src/components/input-range.scss | 8 ++-- .../default/src/components/input-text.scss | 2 +- .../default/src/components/link-button.scss | 2 +- .../themes/default/src/components/link.scss | 2 +- .../themes/default/src/components/nav.scss | 4 +- .../default/src/components/pagination.scss | 4 +- .../default/src/components/progress.scss | 2 +- .../themes/default/src/components/select.scss | 4 +- .../default/src/components/single-select.scss | 8 ++-- .../default/src/components/skip-nav.scss | 2 +- .../default/src/components/split-button.scss | 4 +- .../src/components/table-stateful.scss | 2 +- .../src/components/table-stateless.scss | 2 +- .../themes/default/src/components/tabs.scss | 2 +- .../default/src/components/textarea.scss | 8 ++-- .../src/components/toast-container.scss | 4 +- .../default/src/components/toolbar.scss | 2 +- .../default/src/components/tree-item.scss | 2 +- .../themes/default/src/components/tree.scss | 2 +- packages/themes/default/src/global.scss | 2 +- .../themes/default/src/mixins/alert-wc.scss | 2 +- .../themes/default/src/mixins/button.scss | 4 +- .../default/src/mixins/focus-outline.scss | 2 +- .../default/src/mixins/indented-text.scss | 2 +- .../default/src/mixins/input-error.scss | 4 +- .../src/mixins/kol-table-stateless-wc.scss | 2 +- packages/themes/default/src/mixins/link.scss | 2 +- .../themes/default/src/mixins/typography.scss | 2 +- .../ecl/src/ecl-ec/@shared/input-core.scss | 4 +- .../ecl/src/ecl-ec/components/abbr.scss | 2 +- .../ecl/src/ecl-ec/components/accordion.scss | 2 +- .../ecl/src/ecl-ec/components/alert.scss | 2 +- .../ecl/src/ecl-ec/components/badge.scss | 2 +- .../ecl/src/ecl-ec/components/breadcrumb.scss | 2 +- .../src/ecl-ec/components/button-link.scss | 2 +- .../ecl/src/ecl-ec/components/button.scss | 4 +- .../ecl/src/ecl-ec/components/card.scss | 2 +- .../ecl/src/ecl-ec/components/combobox.scss | 4 +- .../ecl/src/ecl-ec/components/details.scss | 4 +- .../ecl/src/ecl-ec/components/form.scss | 6 +-- .../ecl/src/ecl-ec/components/heading.scss | 4 +- .../src/ecl-ec/components/indented-text.scss | 2 +- .../src/ecl-ec/components/input-checkbox.scss | 4 +- .../src/ecl-ec/components/input-color.scss | 2 +- .../ecl/src/ecl-ec/components/input-date.scss | 2 +- .../src/ecl-ec/components/input-email.scss | 2 +- .../ecl/src/ecl-ec/components/input-file.scss | 2 +- .../src/ecl-ec/components/input-number.scss | 2 +- .../src/ecl-ec/components/input-password.scss | 2 +- .../src/ecl-ec/components/input-radio.scss | 6 +-- .../src/ecl-ec/components/input-range.scss | 2 +- .../ecl/src/ecl-ec/components/input-text.scss | 2 +- .../src/ecl-ec/components/link-button.scss | 2 +- .../ecl/src/ecl-ec/components/link.scss | 2 +- .../themes/ecl/src/ecl-ec/components/nav.scss | 2 +- .../ecl/src/ecl-ec/components/pagination.scss | 2 +- .../ecl/src/ecl-ec/components/progress.scss | 2 +- .../ecl/src/ecl-ec/components/select.scss | 2 +- .../src/ecl-ec/components/single-select.scss | 4 +- .../ecl/src/ecl-ec/components/skip-nav.scss | 2 +- .../ecl/src/ecl-ec/components/spin.scss | 3 +- .../src/ecl-ec/components/split-button.scss | 4 +- .../src/ecl-ec/components/table-stateful.scss | 4 +- .../ecl-ec/components/table-stateless.scss | 2 +- .../ecl/src/ecl-ec/components/tabs.scss | 2 +- .../ecl/src/ecl-ec/components/textarea.scss | 2 +- .../ecl-ec/components/toast-container.scss | 4 +- .../ecl/src/ecl-ec/components/toolbar.scss | 2 +- .../ecl/src/ecl-ec/components/tree-item.scss | 2 +- .../ecl/src/ecl-ec/components/tree.scss | 2 +- packages/themes/ecl/src/ecl-ec/global.scss | 2 +- .../ecl/src/ecl-ec/mixins/alert-wc.scss | 2 +- .../ecl/src/ecl-ec/mixins/indented-text.scss | 2 +- .../ecl-ec/mixins/kol-table-stateless-wc.scss | 2 +- .../ecl/src/ecl-ec/mixins/typography.scss | 2 +- .../ecl/src/ecl-eu/@shared/input-core.scss | 4 +- .../ecl/src/ecl-eu/components/abbr.scss | 2 +- .../ecl/src/ecl-eu/components/accordion.scss | 2 +- .../ecl/src/ecl-eu/components/alert.scss | 2 +- .../ecl/src/ecl-eu/components/badge.scss | 2 +- .../ecl/src/ecl-eu/components/button.scss | 4 +- .../ecl/src/ecl-eu/components/card.scss | 2 +- .../ecl/src/ecl-eu/components/combobox.scss | 4 +- .../ecl/src/ecl-eu/components/details.scss | 4 +- .../ecl/src/ecl-eu/components/form.scss | 6 +-- .../ecl/src/ecl-eu/components/heading.scss | 4 +- .../src/ecl-eu/components/indented-text.scss | 2 +- .../src/ecl-eu/components/input-checkbox.scss | 4 +- .../src/ecl-eu/components/input-color.scss | 2 +- .../ecl/src/ecl-eu/components/input-date.scss | 2 +- .../src/ecl-eu/components/input-email.scss | 2 +- .../ecl/src/ecl-eu/components/input-file.scss | 2 +- .../src/ecl-eu/components/input-number.scss | 2 +- .../src/ecl-eu/components/input-password.scss | 2 +- .../src/ecl-eu/components/input-radio.scss | 6 +-- .../src/ecl-eu/components/input-range.scss | 4 +- .../ecl/src/ecl-eu/components/input-text.scss | 2 +- .../src/ecl-eu/components/link-button.scss | 2 +- .../ecl/src/ecl-eu/components/link.scss | 2 +- .../themes/ecl/src/ecl-eu/components/nav.scss | 2 +- .../ecl/src/ecl-eu/components/pagination.scss | 2 +- .../ecl/src/ecl-eu/components/select.scss | 2 +- .../src/ecl-eu/components/single-select.scss | 4 +- .../ecl/src/ecl-eu/components/skip-nav.scss | 2 +- .../ecl/src/ecl-eu/components/spin.scss | 3 +- .../src/ecl-eu/components/split-button.scss | 2 +- .../src/ecl-eu/components/table-stateful.scss | 4 +- .../ecl-eu/components/table-stateless.scss | 2 +- .../ecl/src/ecl-eu/components/tabs.scss | 2 +- .../ecl/src/ecl-eu/components/textarea.scss | 2 +- .../ecl-eu/components/toast-container.scss | 4 +- .../ecl/src/ecl-eu/components/toolbar.scss | 2 +- .../ecl/src/ecl-eu/components/tree-item.scss | 2 +- .../ecl/src/ecl-eu/components/tree.scss | 2 +- packages/themes/ecl/src/ecl-eu/global.scss | 2 +- .../ecl/src/ecl-eu/mixins/alert-wc.scss | 2 +- .../themes/ecl/src/ecl-eu/mixins/button.scss | 2 +- .../ecl/src/ecl-eu/mixins/indented-text.scss | 2 +- .../ecl-eu/mixins/kol-table-stateless-wc.scss | 2 +- .../ecl/src/ecl-eu/mixins/typography.scss | 2 +- .../itzbund/src/@shared/input-core.scss | 12 +++--- .../themes/itzbund/src/@shared/label.scss | 2 +- .../themes/itzbund/src/@shared/link-core.scss | 2 +- .../itzbund/src/components/accordion.scss | 4 +- .../themes/itzbund/src/components/alert.scss | 4 +- .../themes/itzbund/src/components/badge.scss | 2 +- .../itzbund/src/components/button-group.scss | 2 +- .../itzbund/src/components/button-link.scss | 2 +- .../themes/itzbund/src/components/button.scss | 4 +- .../themes/itzbund/src/components/card.scss | 2 +- .../itzbund/src/components/combobox.scss | 14 +++---- .../itzbund/src/components/details.scss | 4 +- .../themes/itzbund/src/components/form.scss | 6 +-- .../itzbund/src/components/heading.scss | 2 +- .../itzbund/src/components/indented-text.scss | 2 +- .../src/components/input-checkbox.scss | 6 +-- .../itzbund/src/components/input-color.scss | 2 +- .../itzbund/src/components/input-date.scss | 2 +- .../itzbund/src/components/input-email.scss | 2 +- .../itzbund/src/components/input-file.scss | 2 +- .../itzbund/src/components/input-number.scss | 2 +- .../src/components/input-password.scss | 2 +- .../itzbund/src/components/input-radio.scss | 8 ++-- .../itzbund/src/components/input-range.scss | 6 +-- .../itzbund/src/components/input-text.scss | 2 +- .../itzbund/src/components/link-button.scss | 2 +- .../themes/itzbund/src/components/link.scss | 2 +- .../themes/itzbund/src/components/nav.scss | 2 +- .../itzbund/src/components/pagination.scss | 2 +- .../itzbund/src/components/progress.scss | 2 +- .../themes/itzbund/src/components/select.scss | 12 +++--- .../itzbund/src/components/single-select.scss | 16 ++++---- .../itzbund/src/components/skip-nav.scss | 2 +- .../themes/itzbund/src/components/spin.scss | 3 +- .../itzbund/src/components/split-button.scss | 4 +- .../src/components/table-stateful.scss | 4 +- .../src/components/table-stateless.scss | 2 +- .../themes/itzbund/src/components/tabs.scss | 2 +- .../itzbund/src/components/textarea.scss | 12 +++--- .../src/components/toast-container.scss | 4 +- .../itzbund/src/components/toolbar.scss | 2 +- .../itzbund/src/components/tree-item.scss | 2 +- .../themes/itzbund/src/components/tree.scss | 2 +- packages/themes/itzbund/src/global.scss | 4 +- .../themes/itzbund/src/mixins/alert-wc.scss | 2 +- .../themes/itzbund/src/mixins/button.scss | 2 +- .../itzbund/src/mixins/indented-text.scss | 2 +- .../themes/itzbund/src/mixins/input-base.scss | 2 +- .../src/mixins/kol-table-stateless-wc.scss | 2 +- packages/themes/itzbund/src/mixins/link.scss | 2 +- .../themes/itzbund/src/mixins/typography.scss | 2 +- 275 files changed, 550 insertions(+), 541 deletions(-) diff --git a/packages/components/src/components/@shared/_kol-alert-mixin.scss b/packages/components/src/components/@shared/_kol-alert-mixin.scss index 346586055d..060393a70b 100644 --- a/packages/components/src/components/@shared/_kol-alert-mixin.scss +++ b/packages/components/src/components/@shared/_kol-alert-mixin.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../host-display-block'; -@import '../tooltip/style.scss'; +@use '../@shared/mixins' as *; +@use '../host-display-block' as *; +@use '../tooltip/style.scss' as *; @mixin kol-alert-styles { @layer kol-component { diff --git a/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss b/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss index ce5bda44ad..d89f87dc1c 100644 --- a/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss +++ b/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../host-display-block'; -@import '../tooltip/style.scss'; +@use '../@shared/mixins' as *; +@use '../host-display-block' as *; +@use '../tooltip/style.scss' as *; @mixin kol-table-stateless-styles { @layer kol-component { diff --git a/packages/components/src/components/abbr/style.scss b/packages/components/src/components/abbr/style.scss index 1a27cd2585..1d4f02234c 100644 --- a/packages/components/src/components/abbr/style.scss +++ b/packages/components/src/components/abbr/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../tooltip/style.scss'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../tooltip/style.scss' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/accordion/style.scss b/packages/components/src/components/accordion/style.scss index 77d39a4902..3fd94a2c24 100644 --- a/packages/components/src/components/accordion/style.scss +++ b/packages/components/src/components/accordion/style.scss @@ -1,7 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../host-display-block'; -@import '../../functional-components/Collapsible/collapsible'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../host-display-block' as *; +@use '../../functional-components/Collapsible/collapsible' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/alert/style.scss b/packages/components/src/components/alert/style.scss index 6b188c150f..b5ab64a194 100644 --- a/packages/components/src/components/alert/style.scss +++ b/packages/components/src/components/alert/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../@shared/kol-alert-mixin'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../@shared/kol-alert-mixin' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/avatar/style.scss b/packages/components/src/components/avatar/style.scss index 692cf96001..e07f0653a8 100644 --- a/packages/components/src/components/avatar/style.scss +++ b/packages/components/src/components/avatar/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../host-display-block'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../host-display-block' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/badge/style.scss b/packages/components/src/components/badge/style.scss index 0ea8bb1e83..3a1d5a8b70 100644 --- a/packages/components/src/components/badge/style.scss +++ b/packages/components/src/components/badge/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../tooltip/style.scss'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../tooltip/style.scss' as *; @layer kol-component { /* :host implicitly inherits font-size, e.g. for usage in headlines */ diff --git a/packages/components/src/components/breadcrumb/style.scss b/packages/components/src/components/breadcrumb/style.scss index 5764324b34..7b28359523 100644 --- a/packages/components/src/components/breadcrumb/style.scss +++ b/packages/components/src/components/breadcrumb/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/button-group/style.scss b/packages/components/src/components/button-group/style.scss index 92d2e96890..3ffb3e4a05 100644 --- a/packages/components/src/components/button-group/style.scss +++ b/packages/components/src/components/button-group/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/button-link/style.scss b/packages/components/src/components/button-link/style.scss index ed99740474..8320332d64 100644 --- a/packages/components/src/components/button-link/style.scss +++ b/packages/components/src/components/button-link/style.scss @@ -1,3 +1,3 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../link'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../link' as *; diff --git a/packages/components/src/components/button.scss b/packages/components/src/components/button.scss index 22761ebd0a..cf61c9d623 100644 --- a/packages/components/src/components/button.scss +++ b/packages/components/src/components/button.scss @@ -1,5 +1,5 @@ -@import './@shared/mixins'; -@import './tooltip/style.scss'; +@use './@shared/mixins' as *; +@use './tooltip/style.scss' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/button/style.scss b/packages/components/src/components/button/style.scss index d3fa692cac..b30b63b435 100644 --- a/packages/components/src/components/button/style.scss +++ b/packages/components/src/components/button/style.scss @@ -1,3 +1,3 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../button'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../button' as *; diff --git a/packages/components/src/components/card/style.scss b/packages/components/src/components/card/style.scss index 18f7584c00..ec1930c9aa 100644 --- a/packages/components/src/components/card/style.scss +++ b/packages/components/src/components/card/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../tooltip/style.scss'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../tooltip/style.scss' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/combobox/style.scss b/packages/components/src/components/combobox/style.scss index 4f5b30d3df..403d3e02e8 100644 --- a/packages/components/src/components/combobox/style.scss +++ b/packages/components/src/components/combobox/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input-line'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../input-line' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/details/style.scss b/packages/components/src/components/details/style.scss index 89e07e8734..f0a498ee21 100644 --- a/packages/components/src/components/details/style.scss +++ b/packages/components/src/components/details/style.scss @@ -1,7 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../host-display-block'; -@import '../../functional-components/Collapsible/collapsible'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../host-display-block' as *; +@use '../../functional-components/Collapsible/collapsible' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/drawer/style.scss b/packages/components/src/components/drawer/style.scss index fce5a63908..531e9dd5bb 100644 --- a/packages/components/src/components/drawer/style.scss +++ b/packages/components/src/components/drawer/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/form/style.scss b/packages/components/src/components/form/style.scss index 3c0fe03826..069494764c 100644 --- a/packages/components/src/components/form/style.scss +++ b/packages/components/src/components/form/style.scss @@ -1,7 +1,8 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input-line'; -@import '../link'; +@use '../@shared/mixins' as *; +@use '../@shared/kol-alert-mixin' as *; +@use '../style' as *; +@use '../input-line' as *; +@use '../link' as *; @include kol-alert-styles; diff --git a/packages/components/src/components/heading/style.scss b/packages/components/src/components/heading/style.scss index 728527017d..e028e4c170 100644 --- a/packages/components/src/components/heading/style.scss +++ b/packages/components/src/components/heading/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/icon/style.scss b/packages/components/src/components/icon/style.scss index 94421b5099..8bd06b86ac 100644 --- a/packages/components/src/components/icon/style.scss +++ b/packages/components/src/components/icon/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../../assets/codicons/codicon'; +@use '../@shared/mixins' as *; +@use '../../assets/codicons/codicon' as *; @layer kol-component { /* :host implicitly inherits font-size, see below */ diff --git a/packages/components/src/components/image/style.scss b/packages/components/src/components/image/style.scss index 88d5af93f8..55acdaa4af 100644 --- a/packages/components/src/components/image/style.scss +++ b/packages/components/src/components/image/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/indented-text/style.scss b/packages/components/src/components/indented-text/style.scss index e331aeb039..50d1f6d980 100644 --- a/packages/components/src/components/indented-text/style.scss +++ b/packages/components/src/components/indented-text/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../host-display-block'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../host-display-block' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/input-checkbox/common.scss b/packages/components/src/components/input-checkbox/common.scss index 35fc7054de..dfb2e471df 100644 --- a/packages/components/src/components/input-checkbox/common.scss +++ b/packages/components/src/components/input-checkbox/common.scss @@ -1,4 +1,4 @@ -@import '../@shared/mixins'; +@use '../@shared/mixins' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/input-checkbox/style.scss b/packages/components/src/components/input-checkbox/style.scss index f1a32b3255..0edbc3de7d 100644 --- a/packages/components/src/components/input-checkbox/style.scss +++ b/packages/components/src/components/input-checkbox/style.scss @@ -1,9 +1,10 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input'; -@import './common'; -@import './button'; -@import './checkbox'; -@import './switch'; +@use '../@shared/mixins' as *; +@use '../@shared/kol-alert-mixin' as *; +@use '../style' as *; +@use '../input' as *; +@use './common' as *; +@use './button' as *; +@use './checkbox' as *; +@use './switch' as *; @include kol-alert-styles; diff --git a/packages/components/src/components/input-color/style.scss b/packages/components/src/components/input-color/style.scss index 0da74f93fc..aa2d744981 100644 --- a/packages/components/src/components/input-color/style.scss +++ b/packages/components/src/components/input-color/style.scss @@ -1,6 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input-line'; +@use '../@shared/mixins' as *; +@use '../@shared/kol-alert-mixin' as *; +@use '../style' as *; +@use '../input-line' as *; @include kol-alert-styles; diff --git a/packages/components/src/components/input-date/style.scss b/packages/components/src/components/input-date/style.scss index 3f1253804a..fc06086030 100644 --- a/packages/components/src/components/input-date/style.scss +++ b/packages/components/src/components/input-date/style.scss @@ -1,6 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input-line'; +@use '../@shared/mixins' as *; +@use '../@shared/kol-alert-mixin' as *; +@use '../style' as *; +@use '../input-line' as *; @include kol-alert-styles; diff --git a/packages/components/src/components/input-email/style.scss b/packages/components/src/components/input-email/style.scss index 08fff25ab9..76f366a217 100644 --- a/packages/components/src/components/input-email/style.scss +++ b/packages/components/src/components/input-email/style.scss @@ -1,6 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input-line'; +@use '../@shared/mixins' as *; +@use '../@shared/kol-alert-mixin' as *; +@use '../style' as *; +@use '../input-line' as *; @include kol-alert-styles; diff --git a/packages/components/src/components/input-file/style.scss b/packages/components/src/components/input-file/style.scss index 7c062b20eb..ccbe32dbc9 100644 --- a/packages/components/src/components/input-file/style.scss +++ b/packages/components/src/components/input-file/style.scss @@ -1,6 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input-line'; +@use '../@shared/mixins' as *; +@use '../@shared/kol-alert-mixin' as *; +@use '../style' as *; +@use '../input-line' as *; @include kol-alert-styles; diff --git a/packages/components/src/components/input-line.scss b/packages/components/src/components/input-line.scss index 77bfcd7d98..0162221408 100644 --- a/packages/components/src/components/input-line.scss +++ b/packages/components/src/components/input-line.scss @@ -1,4 +1,4 @@ -@import './input'; +@use './input' as *; @layer kol-component { .kol-input { diff --git a/packages/components/src/components/input-number/style.scss b/packages/components/src/components/input-number/style.scss index 08fff25ab9..76f366a217 100644 --- a/packages/components/src/components/input-number/style.scss +++ b/packages/components/src/components/input-number/style.scss @@ -1,6 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input-line'; +@use '../@shared/mixins' as *; +@use '../@shared/kol-alert-mixin' as *; +@use '../style' as *; +@use '../input-line' as *; @include kol-alert-styles; diff --git a/packages/components/src/components/input-password/style.scss b/packages/components/src/components/input-password/style.scss index 8b0a518a4d..6b03bbafd8 100644 --- a/packages/components/src/components/input-password/style.scss +++ b/packages/components/src/components/input-password/style.scss @@ -1,6 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input-line'; +@use '../@shared/mixins' as *; +@use '../@shared/kol-alert-mixin' as *; +@use '../style' as *; +@use '../input-line' as *; @include kol-alert-styles; diff --git a/packages/components/src/components/input-radio/style.scss b/packages/components/src/components/input-radio/style.scss index 8371447203..e12797fd96 100644 --- a/packages/components/src/components/input-radio/style.scss +++ b/packages/components/src/components/input-radio/style.scss @@ -1,6 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input'; +@use '../@shared/mixins' as *; +@use '../@shared/kol-alert-mixin' as *; +@use '../style' as *; +@use '../input' as *; @include kol-alert-styles; diff --git a/packages/components/src/components/input-range/style.scss b/packages/components/src/components/input-range/style.scss index 848677114f..df24f32e35 100644 --- a/packages/components/src/components/input-range/style.scss +++ b/packages/components/src/components/input-range/style.scss @@ -1,6 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input-line'; +@use '../@shared/mixins' as *; +@use '../@shared/kol-alert-mixin' as *; +@use '../style' as *; +@use '../input-line' as *; @include kol-alert-styles; diff --git a/packages/components/src/components/input-text/style.scss b/packages/components/src/components/input-text/style.scss index 08fff25ab9..76f366a217 100644 --- a/packages/components/src/components/input-text/style.scss +++ b/packages/components/src/components/input-text/style.scss @@ -1,6 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input-line'; +@use '../@shared/mixins' as *; +@use '../@shared/kol-alert-mixin' as *; +@use '../style' as *; +@use '../input-line' as *; @include kol-alert-styles; diff --git a/packages/components/src/components/input.scss b/packages/components/src/components/input.scss index ce3ff1c4e3..bc76dbb86f 100644 --- a/packages/components/src/components/input.scss +++ b/packages/components/src/components/input.scss @@ -1,7 +1,7 @@ -@import './@shared/mixins'; -@import './@shared/kol-alert-mixin'; -@import './label'; -@import './host-display-block'; +@use './@shared/mixins' as *; +@use './@shared/kol-alert-mixin' as *; +@use './label' as *; +@use './host-display-block' as *; @layer kol-component { input, diff --git a/packages/components/src/components/kolibri/style.scss b/packages/components/src/components/kolibri/style.scss index 4ce34ce853..82d69bea88 100644 --- a/packages/components/src/components/kolibri/style.scss +++ b/packages/components/src/components/kolibri/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/link-button/style.scss b/packages/components/src/components/link-button/style.scss index d3fa692cac..b30b63b435 100644 --- a/packages/components/src/components/link-button/style.scss +++ b/packages/components/src/components/link-button/style.scss @@ -1,3 +1,3 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../button'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../button' as *; diff --git a/packages/components/src/components/link-group/style.scss b/packages/components/src/components/link-group/style.scss index 2ce2fb13c2..4fad3c6101 100644 --- a/packages/components/src/components/link-group/style.scss +++ b/packages/components/src/components/link-group/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/link.scss b/packages/components/src/components/link.scss index 7656e3fe54..07b3b790a1 100644 --- a/packages/components/src/components/link.scss +++ b/packages/components/src/components/link.scss @@ -1,5 +1,5 @@ -@import './@shared/mixins'; -@import '../tooltip/style.scss'; +@use './@shared/mixins' as *; +@use '../tooltip/style.scss' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/link/style.scss b/packages/components/src/components/link/style.scss index ed99740474..8320332d64 100644 --- a/packages/components/src/components/link/style.scss +++ b/packages/components/src/components/link/style.scss @@ -1,3 +1,3 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../link'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../link' as *; diff --git a/packages/components/src/components/logo/style.scss b/packages/components/src/components/logo/style.scss index e9b17e6bd6..ed5c2e6bcb 100644 --- a/packages/components/src/components/logo/style.scss +++ b/packages/components/src/components/logo/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/modal/style.scss b/packages/components/src/components/modal/style.scss index 5018b3b7ac..d024196587 100644 --- a/packages/components/src/components/modal/style.scss +++ b/packages/components/src/components/modal/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/nav/style.scss b/packages/components/src/components/nav/style.scss index 3e8cc952cb..52bc832880 100644 --- a/packages/components/src/components/nav/style.scss +++ b/packages/components/src/components/nav/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../tooltip/style.scss'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../tooltip/style.scss' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/pagination/style.scss b/packages/components/src/components/pagination/style.scss index 627389f79c..665b1e5649 100644 --- a/packages/components/src/components/pagination/style.scss +++ b/packages/components/src/components/pagination/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../tooltip/style.scss'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../tooltip/style.scss' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/popover/style.scss b/packages/components/src/components/popover/style.scss index 8b25fe5b9f..8a70292aad 100644 --- a/packages/components/src/components/popover/style.scss +++ b/packages/components/src/components/popover/style.scss @@ -1,4 +1,4 @@ -@import '../@shared/mixins'; +@use '../@shared/mixins' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/progress/style.scss b/packages/components/src/components/progress/style.scss index 26da02dabc..5343cb02d8 100644 --- a/packages/components/src/components/progress/style.scss +++ b/packages/components/src/components/progress/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/quote/style.scss b/packages/components/src/components/quote/style.scss index 3dbaaf106b..771cf7414b 100644 --- a/packages/components/src/components/quote/style.scss +++ b/packages/components/src/components/quote/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/select/style.scss b/packages/components/src/components/select/style.scss index 4834d2d743..b62995d43d 100644 --- a/packages/components/src/components/select/style.scss +++ b/packages/components/src/components/select/style.scss @@ -1,6 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input-line'; +@use '../@shared/mixins' as *; +@use '../@shared/kol-alert-mixin' as *; +@use '../style' as *; +@use '../input-line' as *; @include kol-alert-styles; diff --git a/packages/components/src/components/single-select/style.scss b/packages/components/src/components/single-select/style.scss index 74437825a3..f085843536 100644 --- a/packages/components/src/components/single-select/style.scss +++ b/packages/components/src/components/single-select/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input-line'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../input-line' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/skip-nav/style.scss b/packages/components/src/components/skip-nav/style.scss index 4e1fcb9ae1..83bf626abe 100644 --- a/packages/components/src/components/skip-nav/style.scss +++ b/packages/components/src/components/skip-nav/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/span/style.scss b/packages/components/src/components/span/style.scss index 728527017d..e028e4c170 100644 --- a/packages/components/src/components/span/style.scss +++ b/packages/components/src/components/span/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/spin/cycle.scss b/packages/components/src/components/spin/cycle.scss index ce774d1355..2f39712401 100644 --- a/packages/components/src/components/spin/cycle.scss +++ b/packages/components/src/components/spin/cycle.scss @@ -1,4 +1,4 @@ -@import '../@shared/mixins'; +@use '../@shared/mixins' as *; @layer kol-component { .spin.cycle { diff --git a/packages/components/src/components/spin/dot.scss b/packages/components/src/components/spin/dot.scss index 1445645206..9b85937148 100644 --- a/packages/components/src/components/spin/dot.scss +++ b/packages/components/src/components/spin/dot.scss @@ -1,4 +1,4 @@ -@import '../@shared/mixins'; +@use '../@shared/mixins' as *; @layer kol-component { .spin.dot { diff --git a/packages/components/src/components/spin/style.scss b/packages/components/src/components/spin/style.scss index 30c01a864f..48e0e1bf4b 100644 --- a/packages/components/src/components/spin/style.scss +++ b/packages/components/src/components/spin/style.scss @@ -1,7 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import './cycle'; -@import './dot'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use './cycle' as *; +@use './dot' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/split-button/style.scss b/packages/components/src/components/split-button/style.scss index f5c0741f12..042cc83764 100644 --- a/packages/components/src/components/split-button/style.scss +++ b/packages/components/src/components/split-button/style.scss @@ -1,7 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../popover/style.scss'; -@import '../tooltip/style.scss'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../popover/style.scss' as *; +@use '../tooltip/style.scss' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/style.scss b/packages/components/src/components/style.scss index 022fd4fc26..57f72d1fc2 100644 --- a/packages/components/src/components/style.scss +++ b/packages/components/src/components/style.scss @@ -1,5 +1,5 @@ -@import './a11y'; -@import './preset'; +@use './a11y' as *; +@use './preset' as *; @layer kol-global { :host { diff --git a/packages/components/src/components/table-stateful/style.scss b/packages/components/src/components/table-stateful/style.scss index 01b950f3c6..e633e6f0f8 100644 --- a/packages/components/src/components/table-stateful/style.scss +++ b/packages/components/src/components/table-stateful/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../@shared/kol-table-stateless-mixin'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../@shared/kol-table-stateless-mixin' as *; @layer kol-component { :root { diff --git a/packages/components/src/components/table-stateless/style.scss b/packages/components/src/components/table-stateless/style.scss index 71ab0e2a70..31a0a2bef9 100644 --- a/packages/components/src/components/table-stateless/style.scss +++ b/packages/components/src/components/table-stateless/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../@shared/kol-table-stateless-mixin'; -@import '../host-display-block'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../@shared/kol-table-stateless-mixin' as *; +@use '../host-display-block' as *; @include kol-table-stateless-styles; diff --git a/packages/components/src/components/tabs/style.scss b/packages/components/src/components/tabs/style.scss index 3794d5a49e..e0f0cb2769 100644 --- a/packages/components/src/components/tabs/style.scss +++ b/packages/components/src/components/tabs/style.scss @@ -1,7 +1,7 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../host-display-block'; -@import '../tooltip/style.scss'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../host-display-block' as *; +@use '../tooltip/style.scss' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/textarea/style.scss b/packages/components/src/components/textarea/style.scss index 134affeab3..76abcac588 100644 --- a/packages/components/src/components/textarea/style.scss +++ b/packages/components/src/components/textarea/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../input-line'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../input-line' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/toaster/style.scss b/packages/components/src/components/toaster/style.scss index 142e72bc10..5661f2565c 100644 --- a/packages/components/src/components/toaster/style.scss +++ b/packages/components/src/components/toaster/style.scss @@ -1,6 +1,6 @@ -@import '../@shared/mixins'; -@import '../style'; -@import '../@shared/kol-alert-mixin'; +@use '../@shared/mixins' as *; +@use '../style' as *; +@use '../@shared/kol-alert-mixin' as *; @include kol-alert-styles; diff --git a/packages/components/src/components/toolbar/style.scss b/packages/components/src/components/toolbar/style.scss index 48619c5da9..1c40e899e6 100644 --- a/packages/components/src/components/toolbar/style.scss +++ b/packages/components/src/components/toolbar/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/tooltip/style.scss b/packages/components/src/components/tooltip/style.scss index 82fce6b359..978ca3451c 100644 --- a/packages/components/src/components/tooltip/style.scss +++ b/packages/components/src/components/tooltip/style.scss @@ -1,4 +1,4 @@ -@import '../@shared/mixins'; +@use '../@shared/mixins' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/tree-item/style.scss b/packages/components/src/components/tree-item/style.scss index cd4d7b0076..9db3630b27 100644 --- a/packages/components/src/components/tree-item/style.scss +++ b/packages/components/src/components/tree-item/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/tree/style.scss b/packages/components/src/components/tree/style.scss index b7c67c632c..fe65daf5ca 100644 --- a/packages/components/src/components/tree/style.scss +++ b/packages/components/src/components/tree/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/components/version/style.scss b/packages/components/src/components/version/style.scss index 728527017d..e028e4c170 100644 --- a/packages/components/src/components/version/style.scss +++ b/packages/components/src/components/version/style.scss @@ -1,5 +1,5 @@ -@import '../@shared/mixins'; -@import '../style'; +@use '../@shared/mixins' as *; +@use '../style' as *; @layer kol-component { :host { diff --git a/packages/components/src/functional-components/Collapsible/collapsible.scss b/packages/components/src/functional-components/Collapsible/collapsible.scss index 0b2e54e0ba..08f2626a0a 100644 --- a/packages/components/src/functional-components/Collapsible/collapsible.scss +++ b/packages/components/src/functional-components/Collapsible/collapsible.scss @@ -1,4 +1,4 @@ -@import '../../components/@shared/mixins'; +@use '../../components/@shared/mixins' as *; /* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */ diff --git a/packages/samples/react/src/scenarios/horizontal-scrollbar-advanced/layout.scss b/packages/samples/react/src/scenarios/horizontal-scrollbar-advanced/layout.scss index df454f968d..ee4711da67 100644 --- a/packages/samples/react/src/scenarios/horizontal-scrollbar-advanced/layout.scss +++ b/packages/samples/react/src/scenarios/horizontal-scrollbar-advanced/layout.scss @@ -1,4 +1,4 @@ -@import '../../@shared/mixins'; +@use '../../@shared/mixins' as *; .mainlayout { min-height: calc(100vh - rem(32)); @@ -9,11 +9,11 @@ grid-template-rows: 1fr; grid-template-areas: 'nav content'; - & > .nav-area { + &>.nav-area { grid-area: nav; } - & > .content { + &>.content { grid-area: content; } -} +} \ No newline at end of file diff --git a/packages/samples/react/src/style.scss b/packages/samples/react/src/style.scss index 991869a394..7fc8146f4f 100644 --- a/packages/samples/react/src/style.scss +++ b/packages/samples/react/src/style.scss @@ -1,4 +1,4 @@ -@import './@shared/mixins'; +@use './@shared/mixins' as *; :root { --kolibri-root-font-size: 100; diff --git a/packages/themes/assets/material-icons/css/_mixins.scss b/packages/themes/assets/material-icons/css/_mixins.scss index 7c7b1946cd..66864dac20 100644 --- a/packages/themes/assets/material-icons/css/_mixins.scss +++ b/packages/themes/assets/material-icons/css/_mixins.scss @@ -1,4 +1,4 @@ -@import '../iconfont/mixins'; +@use '../iconfont/mixins' as *; @function material-icons-content($codepoint) { @return unquote('"\\#{$codepoint}"'); @@ -10,4 +10,4 @@ &::#{$pseudo} { content: material-icons-content($codepoint); } -} +} \ No newline at end of file diff --git a/packages/themes/assets/material-icons/css/_variables.scss b/packages/themes/assets/material-icons/css/_variables.scss index 2a08c8161c..b24e6bf498 100644 --- a/packages/themes/assets/material-icons/css/_variables.scss +++ b/packages/themes/assets/material-icons/css/_variables.scss @@ -1,6 +1,6 @@ -@import '../iconfont/variables'; -@import 'codepoints'; +@use '../iconfont/variables' as *; +@use 'codepoints' as *; $material-icons-css-prefix: 'mi' !default; $material-icons-css-search: '_' !default; -$material-icons-css-replace: '-' !default; +$material-icons-css-replace: '-' !default; \ No newline at end of file diff --git a/packages/themes/assets/material-icons/css/material-icons.scss b/packages/themes/assets/material-icons/css/material-icons.scss index 45d00e148f..c34382ee45 100644 --- a/packages/themes/assets/material-icons/css/material-icons.scss +++ b/packages/themes/assets/material-icons/css/material-icons.scss @@ -1,22 +1,18 @@ -@import 'variables'; -@import 'mixins'; +@use 'variables' as *; +@use 'mixins' as *; -@each $font-family - in ( - 'Material Icons', - 'Material Icons Outlined', - 'Material Icons Round', - 'Material Icons Sharp', - 'Material Icons Two Tone' - ) -{ +@each $font-family in ('Material Icons', + 'Material Icons Outlined', + 'Material Icons Round', + 'Material Icons Sharp', + 'Material Icons Two Tone' + +) { $full-class-name: to-lower-case($font-family); $full-class-name: material-icons-str-replace($full-class-name, ' ', '-'); - $class-name: material-icons-str-replace( - $full-class-name, - 'material-icons', - $material-icons-css-prefix - ); + $class-name: material-icons-str-replace($full-class-name, + 'material-icons', + $material-icons-css-prefix ); /** * @deprecated As of 1.0, use .#{$full-class-name} instead of .#{$class-name} @@ -27,13 +23,11 @@ } @each $name, $codepoint in $material-icons-codepoints { - $class-name: material-icons-str-replace( - $name, - $material-icons-css-search, - $material-icons-css-replace - ); + $class-name: material-icons-str-replace($name, + $material-icons-css-search, + $material-icons-css-replace ); .#{$material-icons-css-prefix}-#{$class-name} { @include material-icon($name); } -} +} \ No newline at end of file diff --git a/packages/themes/assets/material-icons/iconfont/filled.scss b/packages/themes/assets/material-icons/iconfont/filled.scss index e1b258cf37..d5595df8a5 100644 --- a/packages/themes/assets/material-icons/iconfont/filled.scss +++ b/packages/themes/assets/material-icons/iconfont/filled.scss @@ -1,4 +1,4 @@ -@import 'variables'; -@import 'mixins'; +@use 'variables' as *; +@use 'mixins' as *; -@include material-icons-font('Material Icons'); +@include material-icons-font('Material Icons'); \ No newline at end of file diff --git a/packages/themes/assets/material-icons/iconfont/material-icons.scss b/packages/themes/assets/material-icons/iconfont/material-icons.scss index 3a094277ac..3e8520f59f 100644 --- a/packages/themes/assets/material-icons/iconfont/material-icons.scss +++ b/packages/themes/assets/material-icons/iconfont/material-icons.scss @@ -1,5 +1,5 @@ -@import 'filled'; -@import 'outlined'; -@import 'round'; -@import 'sharp'; -@import 'two-tone'; +@use 'filled' as *; +@use 'outlined' as *; +@use 'round' as *; +@use 'sharp' as *; +@use 'two-tone' as *; \ No newline at end of file diff --git a/packages/themes/assets/material-icons/iconfont/outlined.scss b/packages/themes/assets/material-icons/iconfont/outlined.scss index cabbac092f..65c022eee6 100644 --- a/packages/themes/assets/material-icons/iconfont/outlined.scss +++ b/packages/themes/assets/material-icons/iconfont/outlined.scss @@ -1,4 +1,4 @@ -@import 'variables'; -@import 'mixins'; +@use 'variables' as *; +@use 'mixins' as *; -@include material-icons-font('Material Icons Outlined'); +@include material-icons-font('Material Icons Outlined'); \ No newline at end of file diff --git a/packages/themes/assets/material-icons/iconfont/round.scss b/packages/themes/assets/material-icons/iconfont/round.scss index ba3260cd73..c28c156cdd 100644 --- a/packages/themes/assets/material-icons/iconfont/round.scss +++ b/packages/themes/assets/material-icons/iconfont/round.scss @@ -1,4 +1,4 @@ -@import 'variables'; -@import 'mixins'; +@use 'variables' as *; +@use 'mixins' as *; -@include material-icons-font('Material Icons Round'); +@include material-icons-font('Material Icons Round'); \ No newline at end of file diff --git a/packages/themes/assets/material-icons/iconfont/sharp.scss b/packages/themes/assets/material-icons/iconfont/sharp.scss index cb6016155c..d1854e4ac9 100644 --- a/packages/themes/assets/material-icons/iconfont/sharp.scss +++ b/packages/themes/assets/material-icons/iconfont/sharp.scss @@ -1,4 +1,4 @@ -@import 'variables'; -@import 'mixins'; +@use 'variables' as *; +@use 'mixins' as *; -@include material-icons-font('Material Icons Sharp'); +@include material-icons-font('Material Icons Sharp'); \ No newline at end of file diff --git a/packages/themes/assets/material-icons/iconfont/two-tone.scss b/packages/themes/assets/material-icons/iconfont/two-tone.scss index 110f7b6bb8..69291a654a 100644 --- a/packages/themes/assets/material-icons/iconfont/two-tone.scss +++ b/packages/themes/assets/material-icons/iconfont/two-tone.scss @@ -1,4 +1,4 @@ -@import 'variables'; -@import 'mixins'; +@use 'variables' as *; +@use 'mixins' as *; -@include material-icons-font('Material Icons Two Tone'); +@include material-icons-font('Material Icons Two Tone'); \ No newline at end of file diff --git a/packages/themes/assets/material-symbols/index.scss b/packages/themes/assets/material-symbols/index.scss index 4dc42644bc..c92903b452 100644 --- a/packages/themes/assets/material-symbols/index.scss +++ b/packages/themes/assets/material-symbols/index.scss @@ -1,3 +1,3 @@ -@import 'outlined'; -@import 'rounded'; -@import 'sharp'; +@use 'outlined' as *; +@use 'rounded' as *; +@use 'sharp' as *; \ No newline at end of file diff --git a/packages/themes/assets/material-symbols/outlined.scss b/packages/themes/assets/material-symbols/outlined.scss index 428f86e4dc..e18e47727f 100644 --- a/packages/themes/assets/material-symbols/outlined.scss +++ b/packages/themes/assets/material-symbols/outlined.scss @@ -1,3 +1,3 @@ -@import 'core'; +@use 'core' as *; -@include material-symbols-font('Material Symbols Outlined'); +@include material-symbols-font('Material Symbols Outlined'); \ No newline at end of file diff --git a/packages/themes/assets/material-symbols/rounded.scss b/packages/themes/assets/material-symbols/rounded.scss index d4130a2c6e..5ec83d0d7f 100644 --- a/packages/themes/assets/material-symbols/rounded.scss +++ b/packages/themes/assets/material-symbols/rounded.scss @@ -1,3 +1,3 @@ -@import 'core'; +@use 'core' as *; -@include material-symbols-font('Material Symbols Rounded'); +@include material-symbols-font('Material Symbols Rounded'); \ No newline at end of file diff --git a/packages/themes/assets/material-symbols/sharp.scss b/packages/themes/assets/material-symbols/sharp.scss index 67703061cc..055acaec55 100644 --- a/packages/themes/assets/material-symbols/sharp.scss +++ b/packages/themes/assets/material-symbols/sharp.scss @@ -1,3 +1,3 @@ -@import 'core'; +@use 'core' as *; -@include material-symbols-font('Material Symbols Sharp'); +@include material-symbols-font('Material Symbols Sharp'); \ No newline at end of file diff --git a/packages/themes/default/src/@shared/input-core.scss b/packages/themes/default/src/@shared/input-core.scss index 5b9572265b..11a973b248 100644 --- a/packages/themes/default/src/@shared/input-core.scss +++ b/packages/themes/default/src/@shared/input-core.scss @@ -1,7 +1,7 @@ -@import '../mixins/rem'; -@import '../mixins/alert-wc'; -@import '../mixins/input-error'; -@import '../mixins/typography'; +@use '../mixins/rem' as *; +@use '../mixins/alert-wc' as *; +@use '../mixins/input-error' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/abbr.scss b/packages/themes/default/src/components/abbr.scss index b199d29f76..52ac5138cd 100644 --- a/packages/themes/default/src/components/abbr.scss +++ b/packages/themes/default/src/components/abbr.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { abbr { diff --git a/packages/themes/default/src/components/accordion.scss b/packages/themes/default/src/components/accordion.scss index 5ea0811765..fd785a1abb 100644 --- a/packages/themes/default/src/components/accordion.scss +++ b/packages/themes/default/src/components/accordion.scss @@ -1,6 +1,6 @@ -@import '../mixins/rem'; -@import '../mixins/focus-outline'; -@import '../mixins/typography'; +@use '../mixins/rem' as *; +@use '../mixins/focus-outline' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/alert.scss b/packages/themes/default/src/components/alert.scss index b3467d4560..db50823057 100644 --- a/packages/themes/default/src/components/alert.scss +++ b/packages/themes/default/src/components/alert.scss @@ -1,4 +1,4 @@ -@import '../mixins/alert-wc'; +@use '../mixins/alert-wc' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/badge.scss b/packages/themes/default/src/components/badge.scss index 2169325cc3..15808584e1 100644 --- a/packages/themes/default/src/components/badge.scss +++ b/packages/themes/default/src/components/badge.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/breadcrumb.scss b/packages/themes/default/src/components/breadcrumb.scss index 2b37cfc9a0..23c44ff176 100644 --- a/packages/themes/default/src/components/breadcrumb.scss +++ b/packages/themes/default/src/components/breadcrumb.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/button-link.scss b/packages/themes/default/src/components/button-link.scss index 54cb0f4d59..b701632a38 100644 --- a/packages/themes/default/src/components/button-link.scss +++ b/packages/themes/default/src/components/button-link.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :is(a, button) { diff --git a/packages/themes/default/src/components/button.scss b/packages/themes/default/src/components/button.scss index 5c798761f8..e0e927e044 100644 --- a/packages/themes/default/src/components/button.scss +++ b/packages/themes/default/src/components/button.scss @@ -1,5 +1,5 @@ -@import '../mixins/button'; -@import '../mixins/rem'; +@use '../mixins/button' as *; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/card.scss b/packages/themes/default/src/components/card.scss index 465328c7d2..9d18f703cb 100644 --- a/packages/themes/default/src/components/card.scss +++ b/packages/themes/default/src/components/card.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/combobox.scss b/packages/themes/default/src/components/combobox.scss index 487b34d02f..af6c737c28 100644 --- a/packages/themes/default/src/components/combobox.scss +++ b/packages/themes/default/src/components/combobox.scss @@ -1,7 +1,7 @@ -@import '../mixins/rem'; -@import '../mixins/alert-wc'; -@import '../mixins/input-error'; -@import '../mixins/typography'; +@use '../mixins/rem' as *; +@use '../mixins/alert-wc' as *; +@use '../mixins/input-error' as *; +@use '../mixins/typography' as *; $option-height: rem(40); $visible-options: 5; diff --git a/packages/themes/default/src/components/details.scss b/packages/themes/default/src/components/details.scss index eeee0ac8bc..94cd623719 100644 --- a/packages/themes/default/src/components/details.scss +++ b/packages/themes/default/src/components/details.scss @@ -1,6 +1,6 @@ -@import '../mixins/rem'; -@import '../mixins/indented-text'; -@import '../mixins/focus-outline'; +@use '../mixins/rem' as *; +@use '../mixins/indented-text' as *; +@use '../mixins/focus-outline' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/drawer.scss b/packages/themes/default/src/components/drawer.scss index 4a27cc6598..c9539155ce 100644 --- a/packages/themes/default/src/components/drawer.scss +++ b/packages/themes/default/src/components/drawer.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; $duration: 0.4s; diff --git a/packages/themes/default/src/components/form.scss b/packages/themes/default/src/components/form.scss index 03a1887aef..c9b182274f 100644 --- a/packages/themes/default/src/components/form.scss +++ b/packages/themes/default/src/components/form.scss @@ -1,6 +1,6 @@ -@import '../mixins/alert-wc'; -@import '../mixins/indented-text'; -@import '../mixins/link'; +@use '../mixins/alert-wc' as *; +@use '../mixins/indented-text' as *; +@use '../mixins/link' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/heading.scss b/packages/themes/default/src/components/heading.scss index e723babefe..f2dc3b92ca 100644 --- a/packages/themes/default/src/components/heading.scss +++ b/packages/themes/default/src/components/heading.scss @@ -1,4 +1,4 @@ -@import '../mixins/typography'; +@use '../mixins/typography' as *; @layer kol-theme-component { .headline-h1, diff --git a/packages/themes/default/src/components/indented-text.scss b/packages/themes/default/src/components/indented-text.scss index f9a5237c48..5c7721ece2 100644 --- a/packages/themes/default/src/components/indented-text.scss +++ b/packages/themes/default/src/components/indented-text.scss @@ -1,4 +1,4 @@ -@import '../mixins/indented-text'; +@use '../mixins/indented-text' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/input-checkbox.scss b/packages/themes/default/src/components/input-checkbox.scss index c716401442..4ebe30a562 100644 --- a/packages/themes/default/src/components/input-checkbox.scss +++ b/packages/themes/default/src/components/input-checkbox.scss @@ -1,8 +1,8 @@ -@import '../mixins/rem'; -@import '../mixins/focus-outline'; -@import '../mixins/alert-wc'; -@import '../mixins/input-error'; -@import '../mixins/typography'; +@use '../mixins/rem' as *; +@use '../mixins/focus-outline' as *; +@use '../mixins/alert-wc' as *; +@use '../mixins/input-error' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/input-color.scss b/packages/themes/default/src/components/input-color.scss index 6e4ad65795..95603036bf 100644 --- a/packages/themes/default/src/components/input-color.scss +++ b/packages/themes/default/src/components/input-color.scss @@ -1,5 +1,5 @@ -@import '../@shared/input-core'; -@import '../mixins/rem'; +@use '../@shared/input-core' as *; +@use '../mixins/rem' as *; @layer kol-theme-component { input[type='color'] { diff --git a/packages/themes/default/src/components/input-date.scss b/packages/themes/default/src/components/input-date.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/default/src/components/input-date.scss +++ b/packages/themes/default/src/components/input-date.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/default/src/components/input-email.scss b/packages/themes/default/src/components/input-email.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/default/src/components/input-email.scss +++ b/packages/themes/default/src/components/input-email.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/default/src/components/input-file.scss b/packages/themes/default/src/components/input-file.scss index 9ec227b8a9..9aa8455652 100644 --- a/packages/themes/default/src/components/input-file.scss +++ b/packages/themes/default/src/components/input-file.scss @@ -1,5 +1,5 @@ -@import '../@shared/input-core'; -@import '../mixins/rem'; +@use '../@shared/input-core' as *; +@use '../mixins/rem' as *; @layer kol-theme-component { .kol-input .input input[type='file'] { diff --git a/packages/themes/default/src/components/input-number.scss b/packages/themes/default/src/components/input-number.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/default/src/components/input-number.scss +++ b/packages/themes/default/src/components/input-number.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/default/src/components/input-password.scss b/packages/themes/default/src/components/input-password.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/default/src/components/input-password.scss +++ b/packages/themes/default/src/components/input-password.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/default/src/components/input-radio.scss b/packages/themes/default/src/components/input-radio.scss index d527d68ad7..7b4d91845a 100644 --- a/packages/themes/default/src/components/input-radio.scss +++ b/packages/themes/default/src/components/input-radio.scss @@ -1,7 +1,7 @@ -@import '../mixins/rem'; -@import '../mixins/alert-wc'; -@import '../mixins/input-error'; -@import '../mixins/typography'; +@use '../mixins/rem' as *; +@use '../mixins/alert-wc' as *; +@use '../mixins/input-error' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/input-range.scss b/packages/themes/default/src/components/input-range.scss index 8fc1196127..bfbf19c32b 100644 --- a/packages/themes/default/src/components/input-range.scss +++ b/packages/themes/default/src/components/input-range.scss @@ -1,7 +1,7 @@ -@import '../mixins/rem'; -@import '../mixins/alert-wc'; -@import '../mixins/input-error'; -@import '../mixins/typography'; +@use '../mixins/rem' as *; +@use '../mixins/alert-wc' as *; +@use '../mixins/input-error' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/input-text.scss b/packages/themes/default/src/components/input-text.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/default/src/components/input-text.scss +++ b/packages/themes/default/src/components/input-text.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/default/src/components/link-button.scss b/packages/themes/default/src/components/link-button.scss index 3c2fd0c2f1..0e880eb487 100644 --- a/packages/themes/default/src/components/link-button.scss +++ b/packages/themes/default/src/components/link-button.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/link.scss b/packages/themes/default/src/components/link.scss index 47c3428892..ce61fa6072 100644 --- a/packages/themes/default/src/components/link.scss +++ b/packages/themes/default/src/components/link.scss @@ -1,4 +1,4 @@ -@import '../mixins/link'; +@use '../mixins/link' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/nav.scss b/packages/themes/default/src/components/nav.scss index 16d7ff1bf4..7408070dde 100644 --- a/packages/themes/default/src/components/nav.scss +++ b/packages/themes/default/src/components/nav.scss @@ -1,5 +1,5 @@ -@import '../mixins/rem'; -@import '../mixins/focus-outline'; +@use '../mixins/rem' as *; +@use '../mixins/focus-outline' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/pagination.scss b/packages/themes/default/src/components/pagination.scss index cc10e43e92..f9098966ee 100644 --- a/packages/themes/default/src/components/pagination.scss +++ b/packages/themes/default/src/components/pagination.scss @@ -1,5 +1,5 @@ -@import '../mixins/focus-outline'; -@import '../mixins/rem'; +@use '../mixins/focus-outline' as *; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/progress.scss b/packages/themes/default/src/components/progress.scss index a7925803c3..eecbbf2a66 100644 --- a/packages/themes/default/src/components/progress.scss +++ b/packages/themes/default/src/components/progress.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/select.scss b/packages/themes/default/src/components/select.scss index 5ffb1a1dd1..51f6efc3f6 100644 --- a/packages/themes/default/src/components/select.scss +++ b/packages/themes/default/src/components/select.scss @@ -1,5 +1,5 @@ -@import '../@shared/input-core'; -@import '../mixins/rem'; +@use '../@shared/input-core' as *; +@use '../mixins/rem' as *; @layer kol-theme-component { .input > .kol-icon { diff --git a/packages/themes/default/src/components/single-select.scss b/packages/themes/default/src/components/single-select.scss index a8fae94418..0f0e0e9ad8 100644 --- a/packages/themes/default/src/components/single-select.scss +++ b/packages/themes/default/src/components/single-select.scss @@ -1,7 +1,7 @@ -@import '../mixins/rem'; -@import '../mixins/alert-wc'; -@import '../mixins/input-error'; -@import '../mixins/typography'; +@use '../mixins/rem' as *; +@use '../mixins/alert-wc' as *; +@use '../mixins/input-error' as *; +@use '../mixins/typography' as *; $option-height: rem(40); $visible-options: 5; diff --git a/packages/themes/default/src/components/skip-nav.scss b/packages/themes/default/src/components/skip-nav.scss index 61cfc7d623..4c6159262c 100644 --- a/packages/themes/default/src/components/skip-nav.scss +++ b/packages/themes/default/src/components/skip-nav.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/split-button.scss b/packages/themes/default/src/components/split-button.scss index bb78f64d47..2d2cd2a959 100644 --- a/packages/themes/default/src/components/split-button.scss +++ b/packages/themes/default/src/components/split-button.scss @@ -1,5 +1,5 @@ -@import '../mixins/button'; -@import '../mixins/rem'; +@use '../mixins/button' as *; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/table-stateful.scss b/packages/themes/default/src/components/table-stateful.scss index 7781040afa..bfaae324f4 100644 --- a/packages/themes/default/src/components/table-stateful.scss +++ b/packages/themes/default/src/components/table-stateful.scss @@ -1,4 +1,4 @@ -@import '../mixins/kol-table-stateless-wc'; +@use '../mixins/kol-table-stateless-wc' as *; @layer kol-theme-component { :host * { diff --git a/packages/themes/default/src/components/table-stateless.scss b/packages/themes/default/src/components/table-stateless.scss index c74a51d65e..e29ec3436e 100644 --- a/packages/themes/default/src/components/table-stateless.scss +++ b/packages/themes/default/src/components/table-stateless.scss @@ -1,3 +1,3 @@ -@import '../mixins/kol-table-stateless-wc'; +@use '../mixins/kol-table-stateless-wc' as *; @include kol-table-stateless-wc; diff --git a/packages/themes/default/src/components/tabs.scss b/packages/themes/default/src/components/tabs.scss index e6236b86dd..206b35d1fb 100644 --- a/packages/themes/default/src/components/tabs.scss +++ b/packages/themes/default/src/components/tabs.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/textarea.scss b/packages/themes/default/src/components/textarea.scss index 67d3ac1540..4ac45beaab 100644 --- a/packages/themes/default/src/components/textarea.scss +++ b/packages/themes/default/src/components/textarea.scss @@ -1,7 +1,7 @@ -@import '../mixins/rem'; -@import '../mixins/alert-wc'; -@import '../mixins/input-error'; -@import '../mixins/typography'; +@use '../mixins/rem' as *; +@use '../mixins/alert-wc' as *; +@use '../mixins/input-error' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/toast-container.scss b/packages/themes/default/src/components/toast-container.scss index b63c4a4276..04fc5d14db 100644 --- a/packages/themes/default/src/components/toast-container.scss +++ b/packages/themes/default/src/components/toast-container.scss @@ -1,5 +1,5 @@ -@import '../mixins/rem'; -@import '../mixins/alert-wc'; +@use '../mixins/rem' as *; +@use '../mixins/alert-wc' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/toolbar.scss b/packages/themes/default/src/components/toolbar.scss index 368702dbed..e6a0364dd5 100644 --- a/packages/themes/default/src/components/toolbar.scss +++ b/packages/themes/default/src/components/toolbar.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { .toolbar { diff --git a/packages/themes/default/src/components/tree-item.scss b/packages/themes/default/src/components/tree-item.scss index e94d7f6b31..f5440c550d 100644 --- a/packages/themes/default/src/components/tree-item.scss +++ b/packages/themes/default/src/components/tree-item.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { .tree-link { diff --git a/packages/themes/default/src/components/tree.scss b/packages/themes/default/src/components/tree.scss index f8d8f1fca6..5baf8b96de 100644 --- a/packages/themes/default/src/components/tree.scss +++ b/packages/themes/default/src/components/tree.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { .tree { diff --git a/packages/themes/default/src/global.scss b/packages/themes/default/src/global.scss index 2e22e53fdd..62961412c7 100644 --- a/packages/themes/default/src/global.scss +++ b/packages/themes/default/src/global.scss @@ -1,4 +1,4 @@ -@import 'mixins/rem'; +@use 'mixins/rem' as *; @layer kol-theme-global { :host { diff --git a/packages/themes/default/src/mixins/alert-wc.scss b/packages/themes/default/src/mixins/alert-wc.scss index a71520c40c..6aa5a52da5 100644 --- a/packages/themes/default/src/mixins/alert-wc.scss +++ b/packages/themes/default/src/mixins/alert-wc.scss @@ -1,4 +1,4 @@ -@import './rem'; +@use './rem' as *; @mixin kol-alert-wc { display: block; diff --git a/packages/themes/default/src/mixins/button.scss b/packages/themes/default/src/mixins/button.scss index 041d0e98d6..d0833ccb64 100644 --- a/packages/themes/default/src/mixins/button.scss +++ b/packages/themes/default/src/mixins/button.scss @@ -1,5 +1,5 @@ -@import './rem'; -@import './focus-outline'; +@use './rem' as *; +@use './focus-outline' as *; @mixin kol-button { :is(a, button):focus { diff --git a/packages/themes/default/src/mixins/focus-outline.scss b/packages/themes/default/src/mixins/focus-outline.scss index e4e5a8d31f..a871f709ae 100644 --- a/packages/themes/default/src/mixins/focus-outline.scss +++ b/packages/themes/default/src/mixins/focus-outline.scss @@ -1,4 +1,4 @@ -@import './rem'; +@use './rem' as *; @mixin focus-outline { border-radius: var(--border-radius); diff --git a/packages/themes/default/src/mixins/indented-text.scss b/packages/themes/default/src/mixins/indented-text.scss index b1bc911658..ebe537a01f 100644 --- a/packages/themes/default/src/mixins/indented-text.scss +++ b/packages/themes/default/src/mixins/indented-text.scss @@ -1,4 +1,4 @@ -@import './rem'; +@use './rem' as *; @mixin indented-text { font-family: var(--font-family); diff --git a/packages/themes/default/src/mixins/input-error.scss b/packages/themes/default/src/mixins/input-error.scss index 6d6c0732c5..21c4849e47 100644 --- a/packages/themes/default/src/mixins/input-error.scss +++ b/packages/themes/default/src/mixins/input-error.scss @@ -1,5 +1,5 @@ -@import './rem'; -@import '../mixins/alert-wc'; +@use './rem' as *; +@use '../mixins/alert-wc' as *; @mixin input-error { border-left: 3px solid var(--color-danger); diff --git a/packages/themes/default/src/mixins/kol-table-stateless-wc.scss b/packages/themes/default/src/mixins/kol-table-stateless-wc.scss index c48a1e69c0..3e679c7ab4 100644 --- a/packages/themes/default/src/mixins/kol-table-stateless-wc.scss +++ b/packages/themes/default/src/mixins/kol-table-stateless-wc.scss @@ -1,4 +1,4 @@ -@import './rem'; +@use './rem' as *; @mixin kol-table-stateless-wc { @layer kol-theme-component { diff --git a/packages/themes/default/src/mixins/link.scss b/packages/themes/default/src/mixins/link.scss index 5f7ab2f842..2295e3ad78 100644 --- a/packages/themes/default/src/mixins/link.scss +++ b/packages/themes/default/src/mixins/link.scss @@ -1,4 +1,4 @@ -@import './rem'; +@use './rem' as *; @mixin kol-link { :is(a, button) { diff --git a/packages/themes/default/src/mixins/typography.scss b/packages/themes/default/src/mixins/typography.scss index dbea775262..89e16cd53d 100644 --- a/packages/themes/default/src/mixins/typography.scss +++ b/packages/themes/default/src/mixins/typography.scss @@ -1,4 +1,4 @@ -@import './rem'; +@use './rem' as *; @mixin kol-typography-body { font-size: rem(16); diff --git a/packages/themes/ecl/src/ecl-ec/@shared/input-core.scss b/packages/themes/ecl/src/ecl-ec/@shared/input-core.scss index d1f28122e5..4826cd83ef 100644 --- a/packages/themes/ecl/src/ecl-ec/@shared/input-core.scss +++ b/packages/themes/ecl/src/ecl-ec/@shared/input-core.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/alert-wc'; +@use '../../mixins/rem' as *; +@use '../mixins/alert-wc' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/abbr.scss b/packages/themes/ecl/src/ecl-ec/components/abbr.scss index 7d2b7f0a24..74364515b5 100644 --- a/packages/themes/ecl/src/ecl-ec/components/abbr.scss +++ b/packages/themes/ecl/src/ecl-ec/components/abbr.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { abbr { diff --git a/packages/themes/ecl/src/ecl-ec/components/accordion.scss b/packages/themes/ecl/src/ecl-ec/components/accordion.scss index bc12f5694e..0f49b319a0 100644 --- a/packages/themes/ecl/src/ecl-ec/components/accordion.scss +++ b/packages/themes/ecl/src/ecl-ec/components/accordion.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/alert.scss b/packages/themes/ecl/src/ecl-ec/components/alert.scss index 9abedf547e..cb437d5699 100644 --- a/packages/themes/ecl/src/ecl-ec/components/alert.scss +++ b/packages/themes/ecl/src/ecl-ec/components/alert.scss @@ -1,4 +1,4 @@ -@import '../mixins/alert-wc'; +@use '../mixins/alert-wc' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/badge.scss b/packages/themes/ecl/src/ecl-ec/components/badge.scss index 066c9d61ba..ec240ac755 100644 --- a/packages/themes/ecl/src/ecl-ec/components/badge.scss +++ b/packages/themes/ecl/src/ecl-ec/components/badge.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host > span { diff --git a/packages/themes/ecl/src/ecl-ec/components/breadcrumb.scss b/packages/themes/ecl/src/ecl-ec/components/breadcrumb.scss index a0aef8be8e..b560dc4676 100644 --- a/packages/themes/ecl/src/ecl-ec/components/breadcrumb.scss +++ b/packages/themes/ecl/src/ecl-ec/components/breadcrumb.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/button-link.scss b/packages/themes/ecl/src/ecl-ec/components/button-link.scss index da55d17275..0b4336ea67 100644 --- a/packages/themes/ecl/src/ecl-ec/components/button-link.scss +++ b/packages/themes/ecl/src/ecl-ec/components/button-link.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :is(a, button) { diff --git a/packages/themes/ecl/src/ecl-ec/components/button.scss b/packages/themes/ecl/src/ecl-ec/components/button.scss index fe41d76605..52a78e1eea 100644 --- a/packages/themes/ecl/src/ecl-ec/components/button.scss +++ b/packages/themes/ecl/src/ecl-ec/components/button.scss @@ -1,5 +1,5 @@ -@import '../mixins/button'; -@import '../../mixins/rem'; +@use '../mixins/button' as *; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/card.scss b/packages/themes/ecl/src/ecl-ec/components/card.scss index 6939a4e23c..245b56c548 100644 --- a/packages/themes/ecl/src/ecl-ec/components/card.scss +++ b/packages/themes/ecl/src/ecl-ec/components/card.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/combobox.scss b/packages/themes/ecl/src/ecl-ec/components/combobox.scss index 75eae799b4..3a18d7672a 100644 --- a/packages/themes/ecl/src/ecl-ec/components/combobox.scss +++ b/packages/themes/ecl/src/ecl-ec/components/combobox.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/alert-wc'; +@use '../../mixins/rem' as *; +@use '../mixins/alert-wc' as *; $option-height: rem(40); $visible-options: 5; diff --git a/packages/themes/ecl/src/ecl-ec/components/details.scss b/packages/themes/ecl/src/ecl-ec/components/details.scss index 79ffb8f307..fca95f6820 100644 --- a/packages/themes/ecl/src/ecl-ec/components/details.scss +++ b/packages/themes/ecl/src/ecl-ec/components/details.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/indented-text'; +@use '../../mixins/rem' as *; +@use '../mixins/indented-text' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/form.scss b/packages/themes/ecl/src/ecl-ec/components/form.scss index 6d39a7d905..8d03389b1b 100644 --- a/packages/themes/ecl/src/ecl-ec/components/form.scss +++ b/packages/themes/ecl/src/ecl-ec/components/form.scss @@ -1,6 +1,6 @@ -@import '../mixins/alert-wc'; -@import '../mixins/indented-text'; -@import '../mixins/link'; +@use '../mixins/alert-wc' as *; +@use '../mixins/indented-text' as *; +@use '../mixins/link' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/heading.scss b/packages/themes/ecl/src/ecl-ec/components/heading.scss index 8e03819b13..642e3accaa 100644 --- a/packages/themes/ecl/src/ecl-ec/components/heading.scss +++ b/packages/themes/ecl/src/ecl-ec/components/heading.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/typography'; +@use '../../mixins/rem' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/indented-text.scss b/packages/themes/ecl/src/ecl-ec/components/indented-text.scss index f9a5237c48..5c7721ece2 100644 --- a/packages/themes/ecl/src/ecl-ec/components/indented-text.scss +++ b/packages/themes/ecl/src/ecl-ec/components/indented-text.scss @@ -1,4 +1,4 @@ -@import '../mixins/indented-text'; +@use '../mixins/indented-text' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss b/packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss index f18388fddb..1fe694c5c8 100644 --- a/packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss +++ b/packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/alert-wc'; +@use '../../mixins/rem' as *; +@use '../mixins/alert-wc' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/input-color.scss b/packages/themes/ecl/src/ecl-ec/components/input-color.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-ec/components/input-color.scss +++ b/packages/themes/ecl/src/ecl-ec/components/input-color.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-ec/components/input-date.scss b/packages/themes/ecl/src/ecl-ec/components/input-date.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-ec/components/input-date.scss +++ b/packages/themes/ecl/src/ecl-ec/components/input-date.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-ec/components/input-email.scss b/packages/themes/ecl/src/ecl-ec/components/input-email.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-ec/components/input-email.scss +++ b/packages/themes/ecl/src/ecl-ec/components/input-email.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-ec/components/input-file.scss b/packages/themes/ecl/src/ecl-ec/components/input-file.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-ec/components/input-file.scss +++ b/packages/themes/ecl/src/ecl-ec/components/input-file.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-ec/components/input-number.scss b/packages/themes/ecl/src/ecl-ec/components/input-number.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-ec/components/input-number.scss +++ b/packages/themes/ecl/src/ecl-ec/components/input-number.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-ec/components/input-password.scss b/packages/themes/ecl/src/ecl-ec/components/input-password.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-ec/components/input-password.scss +++ b/packages/themes/ecl/src/ecl-ec/components/input-password.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-ec/components/input-radio.scss b/packages/themes/ecl/src/ecl-ec/components/input-radio.scss index 69d1f36614..a6512030c5 100644 --- a/packages/themes/ecl/src/ecl-ec/components/input-radio.scss +++ b/packages/themes/ecl/src/ecl-ec/components/input-radio.scss @@ -1,6 +1,6 @@ -@import '../../mixins/rem'; -@import '../mixins/alert-wc'; -@import '../mixins/typography'; +@use '../../mixins/rem' as *; +@use '../mixins/alert-wc' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/input-range.scss b/packages/themes/ecl/src/ecl-ec/components/input-range.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-ec/components/input-range.scss +++ b/packages/themes/ecl/src/ecl-ec/components/input-range.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-ec/components/input-text.scss b/packages/themes/ecl/src/ecl-ec/components/input-text.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-ec/components/input-text.scss +++ b/packages/themes/ecl/src/ecl-ec/components/input-text.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-ec/components/link-button.scss b/packages/themes/ecl/src/ecl-ec/components/link-button.scss index 44ce9cf8a0..c7531fb366 100644 --- a/packages/themes/ecl/src/ecl-ec/components/link-button.scss +++ b/packages/themes/ecl/src/ecl-ec/components/link-button.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/link.scss b/packages/themes/ecl/src/ecl-ec/components/link.scss index a612e4a58d..9b93cb7ed4 100644 --- a/packages/themes/ecl/src/ecl-ec/components/link.scss +++ b/packages/themes/ecl/src/ecl-ec/components/link.scss @@ -1,4 +1,4 @@ -@import '../mixins/link'; +@use '../mixins/link' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/nav.scss b/packages/themes/ecl/src/ecl-ec/components/nav.scss index ca69915427..f9ae09793b 100644 --- a/packages/themes/ecl/src/ecl-ec/components/nav.scss +++ b/packages/themes/ecl/src/ecl-ec/components/nav.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/pagination.scss b/packages/themes/ecl/src/ecl-ec/components/pagination.scss index 2cc6adbfdd..4f8a06bb90 100644 --- a/packages/themes/ecl/src/ecl-ec/components/pagination.scss +++ b/packages/themes/ecl/src/ecl-ec/components/pagination.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/progress.scss b/packages/themes/ecl/src/ecl-ec/components/progress.scss index 0d17c864b5..b3facaeb38 100644 --- a/packages/themes/ecl/src/ecl-ec/components/progress.scss +++ b/packages/themes/ecl/src/ecl-ec/components/progress.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/select.scss b/packages/themes/ecl/src/ecl-ec/components/select.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-ec/components/select.scss +++ b/packages/themes/ecl/src/ecl-ec/components/select.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-ec/components/single-select.scss b/packages/themes/ecl/src/ecl-ec/components/single-select.scss index e3e77d71f1..6b8aaad9f2 100644 --- a/packages/themes/ecl/src/ecl-ec/components/single-select.scss +++ b/packages/themes/ecl/src/ecl-ec/components/single-select.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/alert-wc'; +@use '../../mixins/rem' as *; +@use '../mixins/alert-wc' as *; $option-height: rem(40); $visible-options: 5; diff --git a/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss b/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss index 94dd0ead13..da47a8ae45 100644 --- a/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss +++ b/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/spin.scss b/packages/themes/ecl/src/ecl-ec/components/spin.scss index 66f3c58a1d..8050d14daa 100644 --- a/packages/themes/ecl/src/ecl-ec/components/spin.scss +++ b/packages/themes/ecl/src/ecl-ec/components/spin.scss @@ -1,8 +1,9 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { .cycle { padding: rem(2); + & span { background-color: var(--color-blue-75); } diff --git a/packages/themes/ecl/src/ecl-ec/components/split-button.scss b/packages/themes/ecl/src/ecl-ec/components/split-button.scss index eb9bfd4e53..97eb56c532 100644 --- a/packages/themes/ecl/src/ecl-ec/components/split-button.scss +++ b/packages/themes/ecl/src/ecl-ec/components/split-button.scss @@ -1,5 +1,5 @@ -@import '../mixins/button'; -@import '../../mixins/rem'; +@use '../mixins/button' as *; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/table-stateful.scss b/packages/themes/ecl/src/ecl-ec/components/table-stateful.scss index 095f368fd0..97136c9d9e 100644 --- a/packages/themes/ecl/src/ecl-ec/components/table-stateful.scss +++ b/packages/themes/ecl/src/ecl-ec/components/table-stateful.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/kol-table-stateless-wc'; +@use '../../mixins/rem' as *; +@use '../mixins/kol-table-stateless-wc' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/table-stateless.scss b/packages/themes/ecl/src/ecl-ec/components/table-stateless.scss index c74a51d65e..e29ec3436e 100644 --- a/packages/themes/ecl/src/ecl-ec/components/table-stateless.scss +++ b/packages/themes/ecl/src/ecl-ec/components/table-stateless.scss @@ -1,3 +1,3 @@ -@import '../mixins/kol-table-stateless-wc'; +@use '../mixins/kol-table-stateless-wc' as *; @include kol-table-stateless-wc; diff --git a/packages/themes/ecl/src/ecl-ec/components/tabs.scss b/packages/themes/ecl/src/ecl-ec/components/tabs.scss index 52ec9c7296..f95e81002e 100644 --- a/packages/themes/ecl/src/ecl-ec/components/tabs.scss +++ b/packages/themes/ecl/src/ecl-ec/components/tabs.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/textarea.scss b/packages/themes/ecl/src/ecl-ec/components/textarea.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-ec/components/textarea.scss +++ b/packages/themes/ecl/src/ecl-ec/components/textarea.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-ec/components/toast-container.scss b/packages/themes/ecl/src/ecl-ec/components/toast-container.scss index 2de3c774ec..0ae58ef857 100644 --- a/packages/themes/ecl/src/ecl-ec/components/toast-container.scss +++ b/packages/themes/ecl/src/ecl-ec/components/toast-container.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/alert-wc'; +@use '../../mixins/rem' as *; +@use '../mixins/alert-wc' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-ec/components/toolbar.scss b/packages/themes/ecl/src/ecl-ec/components/toolbar.scss index 9ab3cd4050..11776be829 100644 --- a/packages/themes/ecl/src/ecl-ec/components/toolbar.scss +++ b/packages/themes/ecl/src/ecl-ec/components/toolbar.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { .toolbar { diff --git a/packages/themes/ecl/src/ecl-ec/components/tree-item.scss b/packages/themes/ecl/src/ecl-ec/components/tree-item.scss index e01398f7f1..28b85a6669 100644 --- a/packages/themes/ecl/src/ecl-ec/components/tree-item.scss +++ b/packages/themes/ecl/src/ecl-ec/components/tree-item.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { .tree-item { diff --git a/packages/themes/ecl/src/ecl-ec/components/tree.scss b/packages/themes/ecl/src/ecl-ec/components/tree.scss index 5cbb51dea3..8d78223411 100644 --- a/packages/themes/ecl/src/ecl-ec/components/tree.scss +++ b/packages/themes/ecl/src/ecl-ec/components/tree.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { .tree { diff --git a/packages/themes/ecl/src/ecl-ec/global.scss b/packages/themes/ecl/src/ecl-ec/global.scss index a0d667ad65..84a864e596 100644 --- a/packages/themes/ecl/src/ecl-ec/global.scss +++ b/packages/themes/ecl/src/ecl-ec/global.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-global { .kol-tooltip-wc .tooltip-area { diff --git a/packages/themes/ecl/src/ecl-ec/mixins/alert-wc.scss b/packages/themes/ecl/src/ecl-ec/mixins/alert-wc.scss index a22d7ea43b..1bb80ca7c3 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/alert-wc.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/alert-wc.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @mixin kol-alert-wc($color: null) { color: var($color); diff --git a/packages/themes/ecl/src/ecl-ec/mixins/indented-text.scss b/packages/themes/ecl/src/ecl-ec/mixins/indented-text.scss index 08aeb3b177..f1e8fba4f9 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/indented-text.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/indented-text.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @mixin indented-text { font-family: var(--font-family); diff --git a/packages/themes/ecl/src/ecl-ec/mixins/kol-table-stateless-wc.scss b/packages/themes/ecl/src/ecl-ec/mixins/kol-table-stateless-wc.scss index ddc6b8bdb0..afbc1ad41b 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/kol-table-stateless-wc.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/kol-table-stateless-wc.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @mixin kol-table-stateless-wc { @layer kol-theme-component { diff --git a/packages/themes/ecl/src/ecl-ec/mixins/typography.scss b/packages/themes/ecl/src/ecl-ec/mixins/typography.scss index 0ede89e728..dd8913e64e 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/typography.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/typography.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @mixin kol-typography-body { font-size: rem(16); diff --git a/packages/themes/ecl/src/ecl-eu/@shared/input-core.scss b/packages/themes/ecl/src/ecl-eu/@shared/input-core.scss index d1f28122e5..4826cd83ef 100644 --- a/packages/themes/ecl/src/ecl-eu/@shared/input-core.scss +++ b/packages/themes/ecl/src/ecl-eu/@shared/input-core.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/alert-wc'; +@use '../../mixins/rem' as *; +@use '../mixins/alert-wc' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/abbr.scss b/packages/themes/ecl/src/ecl-eu/components/abbr.scss index 7d2b7f0a24..74364515b5 100644 --- a/packages/themes/ecl/src/ecl-eu/components/abbr.scss +++ b/packages/themes/ecl/src/ecl-eu/components/abbr.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { abbr { diff --git a/packages/themes/ecl/src/ecl-eu/components/accordion.scss b/packages/themes/ecl/src/ecl-eu/components/accordion.scss index b31de3ee41..39719ae544 100644 --- a/packages/themes/ecl/src/ecl-eu/components/accordion.scss +++ b/packages/themes/ecl/src/ecl-eu/components/accordion.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/alert.scss b/packages/themes/ecl/src/ecl-eu/components/alert.scss index 9abedf547e..cb437d5699 100644 --- a/packages/themes/ecl/src/ecl-eu/components/alert.scss +++ b/packages/themes/ecl/src/ecl-eu/components/alert.scss @@ -1,4 +1,4 @@ -@import '../mixins/alert-wc'; +@use '../mixins/alert-wc' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/badge.scss b/packages/themes/ecl/src/ecl-eu/components/badge.scss index 19556da6bc..7c450e0b62 100644 --- a/packages/themes/ecl/src/ecl-eu/components/badge.scss +++ b/packages/themes/ecl/src/ecl-eu/components/badge.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/button.scss b/packages/themes/ecl/src/ecl-eu/components/button.scss index b73e984339..056469511d 100644 --- a/packages/themes/ecl/src/ecl-eu/components/button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/button.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/button'; +@use '../../mixins/rem' as *; +@use '../mixins/button' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/card.scss b/packages/themes/ecl/src/ecl-eu/components/card.scss index eda0b58050..41395f5631 100644 --- a/packages/themes/ecl/src/ecl-eu/components/card.scss +++ b/packages/themes/ecl/src/ecl-eu/components/card.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/combobox.scss b/packages/themes/ecl/src/ecl-eu/components/combobox.scss index 95b0f72f0a..0cb0c6a73b 100644 --- a/packages/themes/ecl/src/ecl-eu/components/combobox.scss +++ b/packages/themes/ecl/src/ecl-eu/components/combobox.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/alert-wc'; +@use '../../mixins/rem' as *; +@use '../mixins/alert-wc' as *; $option-height: rem(40); $visible-options: 5; diff --git a/packages/themes/ecl/src/ecl-eu/components/details.scss b/packages/themes/ecl/src/ecl-eu/components/details.scss index 79ffb8f307..fca95f6820 100644 --- a/packages/themes/ecl/src/ecl-eu/components/details.scss +++ b/packages/themes/ecl/src/ecl-eu/components/details.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/indented-text'; +@use '../../mixins/rem' as *; +@use '../mixins/indented-text' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/form.scss b/packages/themes/ecl/src/ecl-eu/components/form.scss index 6d39a7d905..8d03389b1b 100644 --- a/packages/themes/ecl/src/ecl-eu/components/form.scss +++ b/packages/themes/ecl/src/ecl-eu/components/form.scss @@ -1,6 +1,6 @@ -@import '../mixins/alert-wc'; -@import '../mixins/indented-text'; -@import '../mixins/link'; +@use '../mixins/alert-wc' as *; +@use '../mixins/indented-text' as *; +@use '../mixins/link' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/heading.scss b/packages/themes/ecl/src/ecl-eu/components/heading.scss index fb136b4e34..cfb66b4dcf 100644 --- a/packages/themes/ecl/src/ecl-eu/components/heading.scss +++ b/packages/themes/ecl/src/ecl-eu/components/heading.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/typography'; +@use '../../mixins/rem' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/indented-text.scss b/packages/themes/ecl/src/ecl-eu/components/indented-text.scss index f9a5237c48..5c7721ece2 100644 --- a/packages/themes/ecl/src/ecl-eu/components/indented-text.scss +++ b/packages/themes/ecl/src/ecl-eu/components/indented-text.scss @@ -1,4 +1,4 @@ -@import '../mixins/indented-text'; +@use '../mixins/indented-text' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/input-checkbox.scss b/packages/themes/ecl/src/ecl-eu/components/input-checkbox.scss index e7722282c2..be389e4acd 100644 --- a/packages/themes/ecl/src/ecl-eu/components/input-checkbox.scss +++ b/packages/themes/ecl/src/ecl-eu/components/input-checkbox.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/alert-wc'; +@use '../../mixins/rem' as *; +@use '../mixins/alert-wc' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/input-color.scss b/packages/themes/ecl/src/ecl-eu/components/input-color.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-eu/components/input-color.scss +++ b/packages/themes/ecl/src/ecl-eu/components/input-color.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-eu/components/input-date.scss b/packages/themes/ecl/src/ecl-eu/components/input-date.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-eu/components/input-date.scss +++ b/packages/themes/ecl/src/ecl-eu/components/input-date.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-eu/components/input-email.scss b/packages/themes/ecl/src/ecl-eu/components/input-email.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-eu/components/input-email.scss +++ b/packages/themes/ecl/src/ecl-eu/components/input-email.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-eu/components/input-file.scss b/packages/themes/ecl/src/ecl-eu/components/input-file.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-eu/components/input-file.scss +++ b/packages/themes/ecl/src/ecl-eu/components/input-file.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-eu/components/input-number.scss b/packages/themes/ecl/src/ecl-eu/components/input-number.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-eu/components/input-number.scss +++ b/packages/themes/ecl/src/ecl-eu/components/input-number.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-eu/components/input-password.scss b/packages/themes/ecl/src/ecl-eu/components/input-password.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-eu/components/input-password.scss +++ b/packages/themes/ecl/src/ecl-eu/components/input-password.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-eu/components/input-radio.scss b/packages/themes/ecl/src/ecl-eu/components/input-radio.scss index 6e01f3eac2..1b21f4e3c7 100644 --- a/packages/themes/ecl/src/ecl-eu/components/input-radio.scss +++ b/packages/themes/ecl/src/ecl-eu/components/input-radio.scss @@ -1,6 +1,6 @@ -@import '../../mixins/rem'; -@import '../mixins/alert-wc'; -@import '../mixins/typography'; +@use '../../mixins/rem' as *; +@use '../mixins/alert-wc' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/input-range.scss b/packages/themes/ecl/src/ecl-eu/components/input-range.scss index b787945a14..a128aa2749 100644 --- a/packages/themes/ecl/src/ecl-eu/components/input-range.scss +++ b/packages/themes/ecl/src/ecl-eu/components/input-range.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/alert-wc'; +@use '../../mixins/rem' as *; +@use '../mixins/alert-wc' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/input-text.scss b/packages/themes/ecl/src/ecl-eu/components/input-text.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-eu/components/input-text.scss +++ b/packages/themes/ecl/src/ecl-eu/components/input-text.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-eu/components/link-button.scss b/packages/themes/ecl/src/ecl-eu/components/link-button.scss index b5ea93e7e7..90601ba782 100644 --- a/packages/themes/ecl/src/ecl-eu/components/link-button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/link-button.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/link.scss b/packages/themes/ecl/src/ecl-eu/components/link.scss index a612e4a58d..9b93cb7ed4 100644 --- a/packages/themes/ecl/src/ecl-eu/components/link.scss +++ b/packages/themes/ecl/src/ecl-eu/components/link.scss @@ -1,4 +1,4 @@ -@import '../mixins/link'; +@use '../mixins/link' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/nav.scss b/packages/themes/ecl/src/ecl-eu/components/nav.scss index ca69915427..f9ae09793b 100644 --- a/packages/themes/ecl/src/ecl-eu/components/nav.scss +++ b/packages/themes/ecl/src/ecl-eu/components/nav.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/pagination.scss b/packages/themes/ecl/src/ecl-eu/components/pagination.scss index 01fe905a79..ea3568c544 100644 --- a/packages/themes/ecl/src/ecl-eu/components/pagination.scss +++ b/packages/themes/ecl/src/ecl-eu/components/pagination.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/select.scss b/packages/themes/ecl/src/ecl-eu/components/select.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-eu/components/select.scss +++ b/packages/themes/ecl/src/ecl-eu/components/select.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-eu/components/single-select.scss b/packages/themes/ecl/src/ecl-eu/components/single-select.scss index 642b1ac5fa..03f48ef746 100644 --- a/packages/themes/ecl/src/ecl-eu/components/single-select.scss +++ b/packages/themes/ecl/src/ecl-eu/components/single-select.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/alert-wc'; +@use '../../mixins/rem' as *; +@use '../mixins/alert-wc' as *; $option-height: rem(40); $visible-options: 5; diff --git a/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss b/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss index 5bb97b44d4..2c071597ba 100644 --- a/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss +++ b/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/spin.scss b/packages/themes/ecl/src/ecl-eu/components/spin.scss index de202ce2d1..246daf6d84 100644 --- a/packages/themes/ecl/src/ecl-eu/components/spin.scss +++ b/packages/themes/ecl/src/ecl-eu/components/spin.scss @@ -1,8 +1,9 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { .cycle { padding: rem(2); + & span { background-color: var(--color-blue-80); } diff --git a/packages/themes/ecl/src/ecl-eu/components/split-button.scss b/packages/themes/ecl/src/ecl-eu/components/split-button.scss index af6bfdad95..95348b3dfe 100644 --- a/packages/themes/ecl/src/ecl-eu/components/split-button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/split-button.scss @@ -1,4 +1,4 @@ -@import '../mixins/button'; +@use '../mixins/button' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/table-stateful.scss b/packages/themes/ecl/src/ecl-eu/components/table-stateful.scss index e9cd72624a..cf2bb44938 100644 --- a/packages/themes/ecl/src/ecl-eu/components/table-stateful.scss +++ b/packages/themes/ecl/src/ecl-eu/components/table-stateful.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/kol-table-stateless-wc'; +@use '../../mixins/rem' as *; +@use '../mixins/kol-table-stateless-wc' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/table-stateless.scss b/packages/themes/ecl/src/ecl-eu/components/table-stateless.scss index c74a51d65e..e29ec3436e 100644 --- a/packages/themes/ecl/src/ecl-eu/components/table-stateless.scss +++ b/packages/themes/ecl/src/ecl-eu/components/table-stateless.scss @@ -1,3 +1,3 @@ -@import '../mixins/kol-table-stateless-wc'; +@use '../mixins/kol-table-stateless-wc' as *; @include kol-table-stateless-wc; diff --git a/packages/themes/ecl/src/ecl-eu/components/tabs.scss b/packages/themes/ecl/src/ecl-eu/components/tabs.scss index 6ecfc3d9d6..ca9e3e193b 100644 --- a/packages/themes/ecl/src/ecl-eu/components/tabs.scss +++ b/packages/themes/ecl/src/ecl-eu/components/tabs.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/textarea.scss b/packages/themes/ecl/src/ecl-eu/components/textarea.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/ecl/src/ecl-eu/components/textarea.scss +++ b/packages/themes/ecl/src/ecl-eu/components/textarea.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/ecl/src/ecl-eu/components/toast-container.scss b/packages/themes/ecl/src/ecl-eu/components/toast-container.scss index 6d6188312c..90fa781621 100644 --- a/packages/themes/ecl/src/ecl-eu/components/toast-container.scss +++ b/packages/themes/ecl/src/ecl-eu/components/toast-container.scss @@ -1,5 +1,5 @@ -@import '../../mixins/rem'; -@import '../mixins/alert-wc'; +@use '../../mixins/rem' as *; +@use '../mixins/alert-wc' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/ecl/src/ecl-eu/components/toolbar.scss b/packages/themes/ecl/src/ecl-eu/components/toolbar.scss index 54b7777fef..929263c887 100644 --- a/packages/themes/ecl/src/ecl-eu/components/toolbar.scss +++ b/packages/themes/ecl/src/ecl-eu/components/toolbar.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { .toolbar { diff --git a/packages/themes/ecl/src/ecl-eu/components/tree-item.scss b/packages/themes/ecl/src/ecl-eu/components/tree-item.scss index 9d13c4c82b..60caee121e 100644 --- a/packages/themes/ecl/src/ecl-eu/components/tree-item.scss +++ b/packages/themes/ecl/src/ecl-eu/components/tree-item.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { .tree-item { diff --git a/packages/themes/ecl/src/ecl-eu/components/tree.scss b/packages/themes/ecl/src/ecl-eu/components/tree.scss index 5cbb51dea3..8d78223411 100644 --- a/packages/themes/ecl/src/ecl-eu/components/tree.scss +++ b/packages/themes/ecl/src/ecl-eu/components/tree.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @layer kol-theme-component { .tree { diff --git a/packages/themes/ecl/src/ecl-eu/global.scss b/packages/themes/ecl/src/ecl-eu/global.scss index 7c044e689c..490ed4926d 100644 --- a/packages/themes/ecl/src/ecl-eu/global.scss +++ b/packages/themes/ecl/src/ecl-eu/global.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-global { .kol-tooltip-wc .tooltip-area { diff --git a/packages/themes/ecl/src/ecl-eu/mixins/alert-wc.scss b/packages/themes/ecl/src/ecl-eu/mixins/alert-wc.scss index ae1d1fb7d6..97b136a556 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/alert-wc.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/alert-wc.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @mixin kol-alert-wc($color: null) { color: var($color); diff --git a/packages/themes/ecl/src/ecl-eu/mixins/button.scss b/packages/themes/ecl/src/ecl-eu/mixins/button.scss index 3bd60f1bab..d269be36aa 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/button.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/button.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @mixin kol-button { a, diff --git a/packages/themes/ecl/src/ecl-eu/mixins/indented-text.scss b/packages/themes/ecl/src/ecl-eu/mixins/indented-text.scss index 777f4f46d3..fbc267c678 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/indented-text.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/indented-text.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @mixin indented-text { font-family: var(--font-family); diff --git a/packages/themes/ecl/src/ecl-eu/mixins/kol-table-stateless-wc.scss b/packages/themes/ecl/src/ecl-eu/mixins/kol-table-stateless-wc.scss index 121854f384..b439ac64b5 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/kol-table-stateless-wc.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/kol-table-stateless-wc.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @mixin kol-table-stateless-wc { @layer kol-theme-component { diff --git a/packages/themes/ecl/src/ecl-eu/mixins/typography.scss b/packages/themes/ecl/src/ecl-eu/mixins/typography.scss index f25727937f..b70fdab163 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/typography.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/typography.scss @@ -1,4 +1,4 @@ -@import '../../mixins/rem'; +@use '../../mixins/rem' as *; @mixin kol-typography-body { font-size: rem(16); diff --git a/packages/themes/itzbund/src/@shared/input-core.scss b/packages/themes/itzbund/src/@shared/input-core.scss index f0ebacc245..545f1cbbd6 100644 --- a/packages/themes/itzbund/src/@shared/input-core.scss +++ b/packages/themes/itzbund/src/@shared/input-core.scss @@ -1,10 +1,10 @@ -@import './label'; -@import './kol-alert-wc'; -@import './kol-required'; +@use './label' as *; +@use './kol-alert-wc' as *; +@use './kol-required' as *; -@import '../mixins/alert-wc'; -@import '../mixins/typography'; -@import '../mixins/input-base'; +@use '../mixins/alert-wc' as *; +@use '../mixins/typography' as *; +@use '../mixins/input-base' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/@shared/label.scss b/packages/themes/itzbund/src/@shared/label.scss index 8570055662..5d01feec99 100644 --- a/packages/themes/itzbund/src/@shared/label.scss +++ b/packages/themes/itzbund/src/@shared/label.scss @@ -1,4 +1,4 @@ -@import '../mixins/typography'; +@use '../mixins/typography' as *; @layer kol-theme-component { label { diff --git a/packages/themes/itzbund/src/@shared/link-core.scss b/packages/themes/itzbund/src/@shared/link-core.scss index 6d0a44c019..5b4fed9181 100644 --- a/packages/themes/itzbund/src/@shared/link-core.scss +++ b/packages/themes/itzbund/src/@shared/link-core.scss @@ -1,4 +1,4 @@ -@import '../mixins/link'; +@use '../mixins/link' as *; @layer kol-theme-component { @include kol-link; diff --git a/packages/themes/itzbund/src/components/accordion.scss b/packages/themes/itzbund/src/components/accordion.scss index 92ed95967e..2b9f2127d0 100644 --- a/packages/themes/itzbund/src/components/accordion.scss +++ b/packages/themes/itzbund/src/components/accordion.scss @@ -1,5 +1,5 @@ -@import '../mixins/rem'; -@import '../mixins/typography'; +@use '../mixins/rem' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/components/alert.scss b/packages/themes/itzbund/src/components/alert.scss index 9ea0b24c56..9bea7e25c2 100644 --- a/packages/themes/itzbund/src/components/alert.scss +++ b/packages/themes/itzbund/src/components/alert.scss @@ -1,5 +1,5 @@ -@import '../mixins/alert-wc'; -@import '../mixins/rem'; +@use '../mixins/alert-wc' as *; +@use '../mixins/rem' as *; @layer kol-theme-component { .default { diff --git a/packages/themes/itzbund/src/components/badge.scss b/packages/themes/itzbund/src/components/badge.scss index 78e10a1401..20c0103b17 100644 --- a/packages/themes/itzbund/src/components/badge.scss +++ b/packages/themes/itzbund/src/components/badge.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/components/button-group.scss b/packages/themes/itzbund/src/components/button-group.scss index b7f3baf060..62747837ea 100644 --- a/packages/themes/itzbund/src/components/button-group.scss +++ b/packages/themes/itzbund/src/components/button-group.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :host > .kol-button-group-wc { diff --git a/packages/themes/itzbund/src/components/button-link.scss b/packages/themes/itzbund/src/components/button-link.scss index 66e52f413c..e8baa44b50 100644 --- a/packages/themes/itzbund/src/components/button-link.scss +++ b/packages/themes/itzbund/src/components/button-link.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { a, diff --git a/packages/themes/itzbund/src/components/button.scss b/packages/themes/itzbund/src/components/button.scss index c413e51466..c618a2b345 100644 --- a/packages/themes/itzbund/src/components/button.scss +++ b/packages/themes/itzbund/src/components/button.scss @@ -1,5 +1,5 @@ -@import '../mixins/button'; -@import '../mixins/rem'; +@use '../mixins/button' as *; +@use '../mixins/rem' as *; @layer kol-theme-component { a, diff --git a/packages/themes/itzbund/src/components/card.scss b/packages/themes/itzbund/src/components/card.scss index 73f5b5efd4..83ff3c33f5 100644 --- a/packages/themes/itzbund/src/components/card.scss +++ b/packages/themes/itzbund/src/components/card.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :host > div { diff --git a/packages/themes/itzbund/src/components/combobox.scss b/packages/themes/itzbund/src/components/combobox.scss index a28f940f72..b3dfd16f64 100644 --- a/packages/themes/itzbund/src/components/combobox.scss +++ b/packages/themes/itzbund/src/components/combobox.scss @@ -1,11 +1,11 @@ -@import '../@shared/label'; -@import '../@shared/kol-alert-wc'; -@import '../@shared/kol-required'; +@use '../@shared/label' as *; +@use '../@shared/kol-alert-wc' as *; +@use '../@shared/kol-required' as *; -@import '../mixins/rem'; -@import '../mixins/alert-wc'; -@import '../mixins/typography'; -@import '../mixins/input-base'; +@use '../mixins/rem' as *; +@use '../mixins/alert-wc' as *; +@use '../mixins/typography' as *; +@use '../mixins/input-base' as *; $option-height: rem(40); $visible-options: 5; diff --git a/packages/themes/itzbund/src/components/details.scss b/packages/themes/itzbund/src/components/details.scss index 4ec0f754b5..aef216bac2 100644 --- a/packages/themes/itzbund/src/components/details.scss +++ b/packages/themes/itzbund/src/components/details.scss @@ -1,5 +1,5 @@ -@import '../mixins/rem'; -@import '../mixins/indented-text'; +@use '../mixins/rem' as *; +@use '../mixins/indented-text' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/components/form.scss b/packages/themes/itzbund/src/components/form.scss index eb96cbbc43..41cc485f1b 100644 --- a/packages/themes/itzbund/src/components/form.scss +++ b/packages/themes/itzbund/src/components/form.scss @@ -1,6 +1,6 @@ -@import '../mixins/alert-wc'; -@import '../mixins/indented-text'; -@import '../mixins/link'; +@use '../mixins/alert-wc' as *; +@use '../mixins/indented-text' as *; +@use '../mixins/link' as *; @layer kol-theme-component { @include kol-alert-theme; diff --git a/packages/themes/itzbund/src/components/heading.scss b/packages/themes/itzbund/src/components/heading.scss index 83994cb98f..f198acba88 100644 --- a/packages/themes/itzbund/src/components/heading.scss +++ b/packages/themes/itzbund/src/components/heading.scss @@ -1,4 +1,4 @@ -@import '../mixins/typography'; +@use '../mixins/typography' as *; @layer kol-theme-component { .headline-h1, diff --git a/packages/themes/itzbund/src/components/indented-text.scss b/packages/themes/itzbund/src/components/indented-text.scss index f9a5237c48..5c7721ece2 100644 --- a/packages/themes/itzbund/src/components/indented-text.scss +++ b/packages/themes/itzbund/src/components/indented-text.scss @@ -1,4 +1,4 @@ -@import '../mixins/indented-text'; +@use '../mixins/indented-text' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/components/input-checkbox.scss b/packages/themes/itzbund/src/components/input-checkbox.scss index 25feb12d39..eca7fb9840 100644 --- a/packages/themes/itzbund/src/components/input-checkbox.scss +++ b/packages/themes/itzbund/src/components/input-checkbox.scss @@ -1,6 +1,6 @@ -@import '../mixins/alert-wc'; -@import '../mixins/rem'; -@import '../mixins/typography'; +@use '../mixins/alert-wc' as *; +@use '../mixins/rem' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/components/input-color.scss b/packages/themes/itzbund/src/components/input-color.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/itzbund/src/components/input-color.scss +++ b/packages/themes/itzbund/src/components/input-color.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/itzbund/src/components/input-date.scss b/packages/themes/itzbund/src/components/input-date.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/itzbund/src/components/input-date.scss +++ b/packages/themes/itzbund/src/components/input-date.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/itzbund/src/components/input-email.scss b/packages/themes/itzbund/src/components/input-email.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/itzbund/src/components/input-email.scss +++ b/packages/themes/itzbund/src/components/input-email.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/itzbund/src/components/input-file.scss b/packages/themes/itzbund/src/components/input-file.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/itzbund/src/components/input-file.scss +++ b/packages/themes/itzbund/src/components/input-file.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/itzbund/src/components/input-number.scss b/packages/themes/itzbund/src/components/input-number.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/itzbund/src/components/input-number.scss +++ b/packages/themes/itzbund/src/components/input-number.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/itzbund/src/components/input-password.scss b/packages/themes/itzbund/src/components/input-password.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/itzbund/src/components/input-password.scss +++ b/packages/themes/itzbund/src/components/input-password.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/itzbund/src/components/input-radio.scss b/packages/themes/itzbund/src/components/input-radio.scss index 99b019bca5..bed5a982c6 100644 --- a/packages/themes/itzbund/src/components/input-radio.scss +++ b/packages/themes/itzbund/src/components/input-radio.scss @@ -1,8 +1,8 @@ -@import '../@shared/label'; +@use '../@shared/label' as *; -@import '../mixins/alert-wc'; -@import '../mixins/rem'; -@import '../mixins/typography'; +@use '../mixins/alert-wc' as *; +@use '../mixins/rem' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/components/input-range.scss b/packages/themes/itzbund/src/components/input-range.scss index 86d4d857d0..d4130a0f0e 100644 --- a/packages/themes/itzbund/src/components/input-range.scss +++ b/packages/themes/itzbund/src/components/input-range.scss @@ -1,6 +1,6 @@ -@import '../mixins/alert-wc'; -@import '../mixins/rem'; -@import '../mixins/typography'; +@use '../mixins/alert-wc' as *; +@use '../mixins/rem' as *; +@use '../mixins/typography' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/components/input-text.scss b/packages/themes/itzbund/src/components/input-text.scss index 5c1a18e4a6..e81ddb570a 100644 --- a/packages/themes/itzbund/src/components/input-text.scss +++ b/packages/themes/itzbund/src/components/input-text.scss @@ -1 +1 @@ -@import '../@shared/input-core'; +@use '../@shared/input-core' as *; diff --git a/packages/themes/itzbund/src/components/link-button.scss b/packages/themes/itzbund/src/components/link-button.scss index 3af7ac431c..2c15d3b193 100644 --- a/packages/themes/itzbund/src/components/link-button.scss +++ b/packages/themes/itzbund/src/components/link-button.scss @@ -1 +1 @@ -@import '../@shared/link-core'; +@use '../@shared/link-core' as *; diff --git a/packages/themes/itzbund/src/components/link.scss b/packages/themes/itzbund/src/components/link.scss index 3af7ac431c..2c15d3b193 100644 --- a/packages/themes/itzbund/src/components/link.scss +++ b/packages/themes/itzbund/src/components/link.scss @@ -1 +1 @@ -@import '../@shared/link-core'; +@use '../@shared/link-core' as *; diff --git a/packages/themes/itzbund/src/components/nav.scss b/packages/themes/itzbund/src/components/nav.scss index d88d4d02f7..a593550d0c 100644 --- a/packages/themes/itzbund/src/components/nav.scss +++ b/packages/themes/itzbund/src/components/nav.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :host > div > nav ul { diff --git a/packages/themes/itzbund/src/components/pagination.scss b/packages/themes/itzbund/src/components/pagination.scss index 2ae655d313..a3a3e1db23 100644 --- a/packages/themes/itzbund/src/components/pagination.scss +++ b/packages/themes/itzbund/src/components/pagination.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { .button { diff --git a/packages/themes/itzbund/src/components/progress.scss b/packages/themes/itzbund/src/components/progress.scss index 6f4d52277c..945393c6fe 100644 --- a/packages/themes/itzbund/src/components/progress.scss +++ b/packages/themes/itzbund/src/components/progress.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/components/select.scss b/packages/themes/itzbund/src/components/select.scss index c896e602f2..650932020a 100644 --- a/packages/themes/itzbund/src/components/select.scss +++ b/packages/themes/itzbund/src/components/select.scss @@ -1,10 +1,10 @@ -@import '../@shared/label'; -@import '../@shared/kol-alert-wc'; -@import '../@shared/kol-required'; +@use '../@shared/label' as *; +@use '../@shared/kol-alert-wc' as *; +@use '../@shared/kol-required' as *; -@import '../mixins/alert-wc'; -@import '../mixins/typography'; -@import '../mixins/input-base'; +@use '../mixins/alert-wc' as *; +@use '../mixins/typography' as *; +@use '../mixins/input-base' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/components/single-select.scss b/packages/themes/itzbund/src/components/single-select.scss index 6cf1b3d932..fb943ce193 100644 --- a/packages/themes/itzbund/src/components/single-select.scss +++ b/packages/themes/itzbund/src/components/single-select.scss @@ -1,11 +1,11 @@ -@import '../@shared/label'; -@import '../@shared/kol-alert-wc'; -@import '../@shared/kol-required'; - -@import '../mixins/alert-wc'; -@import '../mixins/rem'; -@import '../mixins/typography'; -@import '../mixins/input-base'; +@use '../@shared/label' as *; +@use '../@shared/kol-alert-wc' as *; +@use '../@shared/kol-required' as *; + +@use '../mixins/alert-wc' as *; +@use '../mixins/rem' as *; +@use '../mixins/typography' as *; +@use '../mixins/input-base' as *; $option-height: rem(40); $visible-options: 5; diff --git a/packages/themes/itzbund/src/components/skip-nav.scss b/packages/themes/itzbund/src/components/skip-nav.scss index 02e2df420c..bae4d6d5af 100644 --- a/packages/themes/itzbund/src/components/skip-nav.scss +++ b/packages/themes/itzbund/src/components/skip-nav.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { .kol-link-wc > a > .kol-span-wc { diff --git a/packages/themes/itzbund/src/components/spin.scss b/packages/themes/itzbund/src/components/spin.scss index f4bb7f47f7..b9ce337e16 100644 --- a/packages/themes/itzbund/src/components/spin.scss +++ b/packages/themes/itzbund/src/components/spin.scss @@ -1,8 +1,9 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { .cycle { padding: rem(2); + & span { background-color: #fc0; } diff --git a/packages/themes/itzbund/src/components/split-button.scss b/packages/themes/itzbund/src/components/split-button.scss index 2f3029d91a..59f681dbd6 100644 --- a/packages/themes/itzbund/src/components/split-button.scss +++ b/packages/themes/itzbund/src/components/split-button.scss @@ -1,5 +1,5 @@ -@import '../mixins/button'; -@import '../mixins/rem'; +@use '../mixins/button' as *; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/components/table-stateful.scss b/packages/themes/itzbund/src/components/table-stateful.scss index 9b78023e32..34758adde9 100644 --- a/packages/themes/itzbund/src/components/table-stateful.scss +++ b/packages/themes/itzbund/src/components/table-stateful.scss @@ -1,5 +1,5 @@ -@import '../mixins/kol-table-stateless-wc'; -@import '../mixins/rem'; +@use '../mixins/kol-table-stateless-wc' as *; +@use '../mixins/rem' as *; @layer kol-theme-component { :host > div { diff --git a/packages/themes/itzbund/src/components/table-stateless.scss b/packages/themes/itzbund/src/components/table-stateless.scss index c74a51d65e..e29ec3436e 100644 --- a/packages/themes/itzbund/src/components/table-stateless.scss +++ b/packages/themes/itzbund/src/components/table-stateless.scss @@ -1,3 +1,3 @@ -@import '../mixins/kol-table-stateless-wc'; +@use '../mixins/kol-table-stateless-wc' as *; @include kol-table-stateless-wc; diff --git a/packages/themes/itzbund/src/components/tabs.scss b/packages/themes/itzbund/src/components/tabs.scss index a21154722c..8aa96297b1 100644 --- a/packages/themes/itzbund/src/components/tabs.scss +++ b/packages/themes/itzbund/src/components/tabs.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { :host > div { diff --git a/packages/themes/itzbund/src/components/textarea.scss b/packages/themes/itzbund/src/components/textarea.scss index e4633f2933..b39683d597 100644 --- a/packages/themes/itzbund/src/components/textarea.scss +++ b/packages/themes/itzbund/src/components/textarea.scss @@ -1,10 +1,10 @@ -@import '../@shared/label'; -@import '../@shared/kol-alert-wc'; -@import '../@shared/kol-required'; +@use '../@shared/label' as *; +@use '../@shared/kol-alert-wc' as *; +@use '../@shared/kol-required' as *; -@import '../mixins/alert-wc'; -@import '../mixins/typography'; -@import '../mixins/input-base'; +@use '../mixins/alert-wc' as *; +@use '../mixins/typography' as *; +@use '../mixins/input-base' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/components/toast-container.scss b/packages/themes/itzbund/src/components/toast-container.scss index ed3be7e5d1..5a2cefcb43 100644 --- a/packages/themes/itzbund/src/components/toast-container.scss +++ b/packages/themes/itzbund/src/components/toast-container.scss @@ -1,5 +1,5 @@ -@import './alert'; -@import '../mixins/rem'; +@use './alert' as *; +@use '../mixins/rem' as *; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/components/toolbar.scss b/packages/themes/itzbund/src/components/toolbar.scss index 96ad28ee9d..da355092f0 100644 --- a/packages/themes/itzbund/src/components/toolbar.scss +++ b/packages/themes/itzbund/src/components/toolbar.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { .toolbar { diff --git a/packages/themes/itzbund/src/components/tree-item.scss b/packages/themes/itzbund/src/components/tree-item.scss index 07633c3232..e3bac8faa0 100644 --- a/packages/themes/itzbund/src/components/tree-item.scss +++ b/packages/themes/itzbund/src/components/tree-item.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { .tree-item { diff --git a/packages/themes/itzbund/src/components/tree.scss b/packages/themes/itzbund/src/components/tree.scss index 2a3c24b199..3803b5ebd8 100644 --- a/packages/themes/itzbund/src/components/tree.scss +++ b/packages/themes/itzbund/src/components/tree.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@use '../mixins/rem' as *; @layer kol-theme-component { .tree { diff --git a/packages/themes/itzbund/src/global.scss b/packages/themes/itzbund/src/global.scss index a8f81ef935..c5b3461ce9 100644 --- a/packages/themes/itzbund/src/global.scss +++ b/packages/themes/itzbund/src/global.scss @@ -1,5 +1,5 @@ -@import './mixins/rem'; -@import './mixins/typography'; +@use './mixins/rem' as *; +@use './mixins/typography' as *; @layer kol-theme-global { :host { diff --git a/packages/themes/itzbund/src/mixins/alert-wc.scss b/packages/themes/itzbund/src/mixins/alert-wc.scss index 621d087895..07ef433946 100644 --- a/packages/themes/itzbund/src/mixins/alert-wc.scss +++ b/packages/themes/itzbund/src/mixins/alert-wc.scss @@ -1,4 +1,4 @@ -@import './rem'; +@use './rem' as *; @mixin kol-alert-theme { --kolibri-border-width: 1px; diff --git a/packages/themes/itzbund/src/mixins/button.scss b/packages/themes/itzbund/src/mixins/button.scss index ac5779ded8..40527e47f5 100644 --- a/packages/themes/itzbund/src/mixins/button.scss +++ b/packages/themes/itzbund/src/mixins/button.scss @@ -1,4 +1,4 @@ -@import './rem'; +@use './rem' as *; @mixin kol-button { button { diff --git a/packages/themes/itzbund/src/mixins/indented-text.scss b/packages/themes/itzbund/src/mixins/indented-text.scss index 812efdad6a..a2b294782b 100644 --- a/packages/themes/itzbund/src/mixins/indented-text.scss +++ b/packages/themes/itzbund/src/mixins/indented-text.scss @@ -1,4 +1,4 @@ -@import './rem'; +@use './rem' as *; @mixin indented-text { font-family: var(--font-family); diff --git a/packages/themes/itzbund/src/mixins/input-base.scss b/packages/themes/itzbund/src/mixins/input-base.scss index 336ec01ad8..614475dc0f 100644 --- a/packages/themes/itzbund/src/mixins/input-base.scss +++ b/packages/themes/itzbund/src/mixins/input-base.scss @@ -1,4 +1,4 @@ -@import './rem'; +@use './rem' as *; @mixin kol-input-border { color: var(--default-letter); diff --git a/packages/themes/itzbund/src/mixins/kol-table-stateless-wc.scss b/packages/themes/itzbund/src/mixins/kol-table-stateless-wc.scss index f762f322ad..161f8b5fcb 100644 --- a/packages/themes/itzbund/src/mixins/kol-table-stateless-wc.scss +++ b/packages/themes/itzbund/src/mixins/kol-table-stateless-wc.scss @@ -1,4 +1,4 @@ -@import './rem'; +@use './rem' as *; @mixin kol-table-stateless-wc { @layer kol-theme-component { diff --git a/packages/themes/itzbund/src/mixins/link.scss b/packages/themes/itzbund/src/mixins/link.scss index 4b3126c7cf..1c4be5d804 100644 --- a/packages/themes/itzbund/src/mixins/link.scss +++ b/packages/themes/itzbund/src/mixins/link.scss @@ -1,4 +1,4 @@ -@import './rem'; +@use './rem' as *; @mixin kol-link { .kol-link-wc a, diff --git a/packages/themes/itzbund/src/mixins/typography.scss b/packages/themes/itzbund/src/mixins/typography.scss index 1684f32768..3a42f88f0e 100644 --- a/packages/themes/itzbund/src/mixins/typography.scss +++ b/packages/themes/itzbund/src/mixins/typography.scss @@ -1,4 +1,4 @@ -@import './rem'; +@use './rem' as *; @mixin kol-typography-body { font-size: rem(16);