From f3d9a04e6ccb3cd4739e4f1867918a5869e5f38c Mon Sep 17 00:00:00 2001 From: timwessman Date: Wed, 18 Dec 2024 10:22:50 +0200 Subject: [PATCH] fix: change style 'imports' to 'use' --- CHANGELOG.md | 2 +- packages/core/src/components/all.css | 34 +++++++++---------- .../components/checkbox/_checkbox-mixin.scss | 9 +++-- packages/core/src/components/link/link.css | 4 +-- .../src/components/pagination/pagination.css | 6 ++-- .../components/search-input/search-input.css | 4 +-- packages/core/src/components/tag/tag.css | 4 +-- .../src/components/text-input/text-input.css | 2 +- 8 files changed, 32 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e73de4073..9254ab823d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -49,7 +49,7 @@ Changes that are not related to specific components #### Fixed -- [Component] What bugs/typos are fixed? +- Changed includes to use @use notation ### Documentation diff --git a/packages/core/src/components/all.css b/packages/core/src/components/all.css index f1d347b986..4e046b9c0f 100644 --- a/packages/core/src/components/all.css +++ b/packages/core/src/components/all.css @@ -3,20 +3,20 @@ @use './checkbox/checkbox.scss'; @use './status-label/status-label.scss'; @use './table/table.scss'; -@import url('./card/card.css'); -@import url('./container/container.css'); -@import url('./error-summary/error-summary.css'); -@import url('./fieldset/fieldset.css'); -@import url('./hero/hero.css'); -@import url('./highlight/highlight.css'); -@import url('./koros/koros.css'); -@import url('./link/link.css'); -@import url('./loading-spinner/loading-spinner.css'); -@import url('./notification/notification.scss'); -@import url('./pagination/pagination.css'); -@import url('./radio-button/radio-button.css'); -@import url('./search-input/search-input.css'); -@import url('./selection-group/selection-group.css'); -@import url('./step-by-step/step-by-step.css'); -@import url('./tag/tag.css'); -@import url('./text-input/text-input.css'); +@use './notification/notification.scss'; +@use './card/card.css'; +@use './container/container.css'; +@use './error-summary/error-summary.css'; +@use './fieldset/fieldset.css'; +@use './hero/hero.css'; +@use './highlight/highlight.css'; +@use './koros/koros.css'; +@use './link/link.css'; +@use './loading-spinner/loading-spinner.css'; +@use './pagination/pagination.css'; +@use './radio-button/radio-button.css'; +@use './search-input/search-input.css'; +@use './selection-group/selection-group.css'; +@use './step-by-step/step-by-step.css'; +@use './tag/tag.css'; +@use './text-input/text-input.css'; diff --git a/packages/core/src/components/checkbox/_checkbox-mixin.scss b/packages/core/src/components/checkbox/_checkbox-mixin.scss index 3a91899b32..652164f397 100644 --- a/packages/core/src/components/checkbox/_checkbox-mixin.scss +++ b/packages/core/src/components/checkbox/_checkbox-mixin.scss @@ -69,18 +69,17 @@ width: var(--size); &:before { - content: ""; - left: 0; - position: absolute; - top: 0; - // checkbox icon background-color: var(--icon-color-unselected); + content: ''; height: var(--size); + left: 0; mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E"); mask-position: center; mask-repeat: no-repeat; mask-size: calc(var(--size) * var(--icon-scale)); + position: absolute; + top: 0; transform: scale(0.6); width: var(--size); z-index: 1; diff --git a/packages/core/src/components/link/link.css b/packages/core/src/components/link/link.css index 3a8ca99d6e..6e3fd45d3a 100644 --- a/packages/core/src/components/link/link.css +++ b/packages/core/src/components/link/link.css @@ -1,5 +1,5 @@ -@import url("../../icons/icon.css"); -@import url("../../icons/link-external.css"); +@use '../../icons/icon.css'; +@use '../../icons/link-external.css'; .hds-link { --link-visited-color: #551a8b; diff --git a/packages/core/src/components/pagination/pagination.css b/packages/core/src/components/pagination/pagination.css index c22c422cb5..990e535339 100644 --- a/packages/core/src/components/pagination/pagination.css +++ b/packages/core/src/components/pagination/pagination.css @@ -1,6 +1,6 @@ -@import url("../../icons/icon.css"); -@import url("../../icons/angle-right.css"); -@import url("../../icons/angle-left.css"); +@use '../../icons/icon.css'; +@use '../../icons/angle-right.css'; +@use '../../icons/angle-left.css'; .hds-pagination-container { text-align: center; diff --git a/packages/core/src/components/search-input/search-input.css b/packages/core/src/components/search-input/search-input.css index a20150969b..f5b5069472 100644 --- a/packages/core/src/components/search-input/search-input.css +++ b/packages/core/src/components/search-input/search-input.css @@ -1,5 +1,5 @@ -@import url("../../icons/icon.css"); -@import url("../../icons/search.css"); +@use '../../icons/icon.css'; +@use '../../icons/search.css'; .hds-search-input { --border-width: 2px; diff --git a/packages/core/src/components/tag/tag.css b/packages/core/src/components/tag/tag.css index 05649d38ef..51ed6afc99 100644 --- a/packages/core/src/components/tag/tag.css +++ b/packages/core/src/components/tag/tag.css @@ -1,5 +1,5 @@ -@import url("../../icons/icon.css"); -@import url("../../icons/cross.css"); +@use '../../icons/icon.css'; +@use '../../icons/cross.css'; .hds-tag { /* logics, always falls back to previous (upper) if not given -> diff --git a/packages/core/src/components/text-input/text-input.css b/packages/core/src/components/text-input/text-input.css index f907f513f3..1ce927407b 100644 --- a/packages/core/src/components/text-input/text-input.css +++ b/packages/core/src/components/text-input/text-input.css @@ -1,4 +1,4 @@ -@import url('../../utils/animations.css'); +@use '../../utils/animations.css'; .hds-text-input { --border-width: 2px;