From 28feb58bc7103781593a6dbb1c420b81a040d7c7 Mon Sep 17 00:00:00 2001 From: Martin Oppitz <6279703+deleonio@users.noreply.github.com> Date: Tue, 29 Oct 2024 08:26:54 +0100 Subject: [PATCH 1/5] refactor: use rem() instead of px --- .../components/@shared/_kol-alert-mixin.scss | 3 +- .../@shared/_kol-table-stateless-mixin.scss | 11 ++-- packages/components/src/components/a11y.scss | 8 +-- .../src/components/accordion/style.scss | 8 +-- .../src/components/alert/style.scss | 2 +- .../src/components/avatar/style.scss | 8 +-- .../src/components/badge/style.scss | 2 +- .../components/src/components/card/style.scss | 2 +- .../src/components/details/style.scss | 8 +-- .../components/src/components/form/style.scss | 2 +- .../components/input-checkbox/checkbox.scss | 4 +- .../src/components/input-checkbox/common.scss | 2 +- .../src/components/input-checkbox/style.scss | 2 +- .../src/components/input-checkbox/switch.scss | 6 +- .../src/components/input-color/style.scss | 2 +- .../src/components/input-date/style.scss | 2 +- .../src/components/input-email/style.scss | 2 +- .../src/components/input-file/style.scss | 2 +- .../src/components/input-number/style.scss | 2 +- .../src/components/input-password/style.scss | 2 +- .../src/components/input-radio/style.scss | 4 +- .../src/components/input-range/style.scss | 17 +++--- .../src/components/input-text/style.scss | 2 +- .../src/components/kolibri/style.scss | 2 +- packages/components/src/components/link.scss | 2 +- .../components/src/components/logo/style.scss | 2 +- .../src/components/progress/style.scss | 2 +- .../src/components/select/style.scss | 2 +- .../src/components/skip-nav/style.scss | 2 +- .../components/src/components/spin/cycle.scss | 8 ++- .../src/components/toaster/style.scss | 2 +- .../src/components/toolbar/style.scss | 4 +- .../src/components/tooltip/style.scss | 4 +- .../components/src/components/tree/style.scss | 4 +- .../Collapsible/collapsible.scss | 2 +- packages/samples/react/src/style.scss | 10 ++-- .../material-icons/iconfont/_variables.scss | 2 +- .../themes/assets/material-symbols/_core.scss | 13 ++-- .../material-icons/iconfont/_variables.scss | 2 +- .../bmf/assets/material-symbols/_core.scss | 13 ++-- .../themes/bmf/src/@shared/input-core.scss | 2 +- packages/themes/bmf/src/components/abbr.scss | 7 ++- .../themes/bmf/src/components/accordion.scss | 14 ++--- packages/themes/bmf/src/components/alert.scss | 2 +- packages/themes/bmf/src/components/badge.scss | 16 ++--- .../bmf/src/components/button-link.scss | 6 +- .../themes/bmf/src/components/button.scss | 11 ++-- packages/themes/bmf/src/components/card.scss | 2 +- .../themes/bmf/src/components/combobox.scss | 4 +- .../themes/bmf/src/components/details.scss | 8 +-- packages/themes/bmf/src/components/form.scss | 6 +- .../themes/bmf/src/components/heading.scss | 2 +- packages/themes/bmf/src/components/icon.scss | 4 +- .../bmf/src/components/indented-text.scss | 2 +- .../bmf/src/components/input-checkbox.scss | 60 +++++++++++-------- .../bmf/src/components/input-color.scss | 2 +- .../themes/bmf/src/components/input-date.scss | 2 +- .../bmf/src/components/input-email.scss | 2 +- .../themes/bmf/src/components/input-file.scss | 5 +- .../bmf/src/components/input-number.scss | 2 +- .../bmf/src/components/input-password.scss | 3 +- .../bmf/src/components/input-radio.scss | 25 ++++---- .../bmf/src/components/input-range.scss | 2 +- .../themes/bmf/src/components/input-text.scss | 2 +- .../bmf/src/components/link-button.scss | 17 +++--- packages/themes/bmf/src/components/link.scss | 2 +- packages/themes/bmf/src/components/nav.scss | 6 +- .../themes/bmf/src/components/pagination.scss | 16 +++-- .../themes/bmf/src/components/progress.scss | 4 +- .../themes/bmf/src/components/select.scss | 5 +- .../bmf/src/components/single-select.scss | 6 +- .../themes/bmf/src/components/skip-nav.scss | 4 +- .../bmf/src/components/split-button.scss | 19 +++--- packages/themes/bmf/src/components/tabs.scss | 14 ++--- .../themes/bmf/src/components/textarea.scss | 6 +- .../bmf/src/components/toast-container.scss | 4 +- .../themes/bmf/src/components/toolbar.scss | 4 +- .../themes/bmf/src/components/tree-item.scss | 4 +- packages/themes/bmf/src/global.scss | 8 +-- packages/themes/bmf/src/mixins/alert.scss | 22 +++---- packages/themes/bmf/src/mixins/button.scss | 4 +- .../themes/bmf/src/mixins/focus-outline.scss | 4 +- .../themes/bmf/src/mixins/indented-text.scss | 6 +- .../themes/bmf/src/mixins/input-messages.scss | 5 +- packages/themes/bmf/src/mixins/input.scss | 7 ++- .../src/mixins/kol-table-stateless-wc.scss | 18 +++--- packages/themes/bmf/src/mixins/link.scss | 8 ++- .../themes/bmf/src/mixins/typography.scss | 2 +- .../default/src/@shared/input-core.scss | 8 +-- .../themes/default/src/components/abbr.scss | 4 +- .../default/src/components/accordion.scss | 13 ++-- .../themes/default/src/components/alert.scss | 2 +- .../default/src/components/button-link.scss | 6 +- .../themes/default/src/components/button.scss | 5 +- .../default/src/components/combobox.scss | 10 ++-- .../themes/default/src/components/form.scss | 6 +- .../default/src/components/heading.scss | 15 ++--- .../default/src/components/indented-text.scss | 2 +- .../src/components/input-checkbox.scss | 40 ++++++------- .../default/src/components/input-color.scss | 5 +- .../default/src/components/input-date.scss | 2 +- .../default/src/components/input-email.scss | 2 +- .../default/src/components/input-file.scss | 5 +- .../default/src/components/input-number.scss | 2 +- .../src/components/input-password.scss | 2 +- .../default/src/components/input-radio.scss | 22 +++---- .../default/src/components/input-range.scss | 8 +-- .../default/src/components/input-text.scss | 2 +- .../default/src/components/link-button.scss | 8 +-- .../themes/default/src/components/link.scss | 2 +- .../themes/default/src/components/nav.scss | 2 +- .../default/src/components/pagination.scss | 8 ++- .../default/src/components/progress.scss | 9 ++- .../themes/default/src/components/select.scss | 6 +- .../default/src/components/single-select.scss | 12 ++-- .../default/src/components/skip-nav.scss | 2 +- .../default/src/components/split-button.scss | 9 +-- .../src/components/table-stateless.scss | 1 - .../themes/default/src/components/tabs.scss | 10 ++-- .../default/src/components/textarea.scss | 8 +-- .../src/components/toast-container.scss | 4 +- .../default/src/components/toolbar.scss | 4 +- .../default/src/components/tree-item.scss | 4 +- .../themes/default/src/components/tree.scss | 4 +- packages/themes/default/src/global.scss | 10 ++-- .../themes/default/src/mixins/alert-wc.scss | 4 +- .../themes/default/src/mixins/button.scss | 6 +- .../default/src/mixins/focus-outline.scss | 6 +- .../default/src/mixins/indented-text.scss | 6 +- .../default/src/mixins/input-error.scss | 6 +- .../src/mixins/kol-table-stateless-wc.scss | 12 ++-- packages/themes/default/src/mixins/link.scss | 4 +- .../themes/default/src/mixins/typography.scss | 32 ++++++++++ .../ecl/src/ecl-ec/@shared/input-core.scss | 22 +++---- .../ecl/src/ecl-ec/components/abbr.scss | 4 +- .../ecl/src/ecl-ec/components/accordion.scss | 6 +- .../ecl/src/ecl-ec/components/alert.scss | 2 +- .../ecl/src/ecl-ec/components/badge.scss | 2 +- .../src/ecl-ec/components/button-link.scss | 6 +- .../ecl/src/ecl-ec/components/button.scss | 9 +-- .../ecl/src/ecl-ec/components/card.scss | 4 +- .../ecl/src/ecl-ec/components/combobox.scss | 20 +++---- .../ecl/src/ecl-ec/components/form.scss | 6 +- .../ecl/src/ecl-ec/components/heading.scss | 22 +++---- .../src/ecl-ec/components/indented-text.scss | 2 +- .../src/ecl-ec/components/input-checkbox.scss | 12 ++-- .../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 | 21 ++++--- .../src/ecl-ec/components/input-range.scss | 2 +- .../ecl/src/ecl-ec/components/input-text.scss | 2 +- .../ecl/src/ecl-ec/components/link.scss | 2 +- .../themes/ecl/src/ecl-ec/components/nav.scss | 10 ++-- .../ecl/src/ecl-ec/components/pagination.scss | 8 ++- .../ecl/src/ecl-ec/components/progress.scss | 10 +++- .../ecl/src/ecl-ec/components/select.scss | 2 +- .../src/ecl-ec/components/single-select.scss | 20 +++---- .../ecl/src/ecl-ec/components/skip-nav.scss | 2 +- .../src/ecl-ec/components/split-button.scss | 11 ++-- .../ecl/src/ecl-ec/components/tabs.scss | 16 ++--- .../ecl/src/ecl-ec/components/textarea.scss | 2 +- .../ecl-ec/components/toast-container.scss | 4 +- .../ecl/src/ecl-ec/components/toolbar.scss | 4 +- .../ecl/src/ecl-ec/components/tree-item.scss | 4 +- packages/themes/ecl/src/ecl-ec/global.scss | 22 +++---- .../ecl/src/ecl-ec/mixins/alert-wc.scss | 2 +- .../themes/ecl/src/ecl-ec/mixins/button.scss | 8 +-- .../ecl/src/ecl-ec/mixins/indented-text.scss | 2 +- .../ecl-ec/mixins/kol-table-stateless-wc.scss | 16 ++--- .../ecl/src/ecl-ec/mixins/typography.scss | 36 +++++++++++ .../ecl/src/ecl-eu/@shared/input-core.scss | 22 +++---- .../ecl/src/ecl-eu/components/abbr.scss | 4 +- .../ecl/src/ecl-eu/components/accordion.scss | 34 +++++------ .../ecl/src/ecl-eu/components/alert.scss | 2 +- .../ecl/src/ecl-eu/components/badge.scss | 3 +- .../ecl/src/ecl-eu/components/button.scss | 2 +- .../ecl/src/ecl-eu/components/card.scss | 4 +- .../ecl/src/ecl-eu/components/combobox.scss | 22 +++---- .../ecl/src/ecl-eu/components/form.scss | 6 +- .../ecl/src/ecl-eu/components/heading.scss | 26 ++++---- .../src/ecl-eu/components/indented-text.scss | 2 +- .../src/ecl-eu/components/input-checkbox.scss | 10 ++-- .../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 | 19 +++--- .../src/ecl-eu/components/input-range.scss | 2 +- .../ecl/src/ecl-eu/components/input-text.scss | 2 +- .../src/ecl-eu/components/link-button.scss | 26 ++++---- .../ecl/src/ecl-eu/components/link.scss | 2 +- .../themes/ecl/src/ecl-eu/components/nav.scss | 10 ++-- .../ecl/src/ecl-eu/components/pagination.scss | 23 ++++--- .../ecl/src/ecl-eu/components/select.scss | 2 +- .../src/ecl-eu/components/single-select.scss | 22 +++---- .../ecl/src/ecl-eu/components/skip-nav.scss | 2 +- .../src/ecl-eu/components/split-button.scss | 8 +-- .../ecl/src/ecl-eu/components/tabs.scss | 16 ++--- .../ecl/src/ecl-eu/components/textarea.scss | 2 +- .../ecl-eu/components/toast-container.scss | 4 +- .../ecl/src/ecl-eu/components/toolbar.scss | 12 ++-- .../ecl/src/ecl-eu/components/tree-item.scss | 6 +- packages/themes/ecl/src/ecl-eu/global.scss | 22 +++---- .../ecl/src/ecl-eu/mixins/alert-wc.scss | 2 +- .../themes/ecl/src/ecl-eu/mixins/button.scss | 26 ++++---- .../ecl/src/ecl-eu/mixins/indented-text.scss | 8 +-- .../ecl-eu/mixins/kol-table-stateless-wc.scss | 22 +++---- .../ecl/src/ecl-eu/mixins/typography.scss | 41 +++++++++++++ .../itzbund/src/@shared/input-core.scss | 12 ++-- .../themes/itzbund/src/@shared/label.scss | 2 +- .../themes/itzbund/src/@shared/link-core.scss | 2 +- .../themes/itzbund/src/components/abbr.scss | 2 +- .../itzbund/src/components/accordion.scss | 4 +- .../themes/itzbund/src/components/alert.scss | 2 +- .../themes/itzbund/src/components/badge.scss | 2 +- .../itzbund/src/components/button-link.scss | 4 +- .../themes/itzbund/src/components/button.scss | 6 +- .../themes/itzbund/src/components/card.scss | 6 +- .../itzbund/src/components/combobox.scss | 16 ++--- .../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 | 16 ++--- .../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 | 22 +++---- .../itzbund/src/components/input-range.scss | 8 +-- .../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 | 10 ++-- .../itzbund/src/components/pagination.scss | 5 ++ .../itzbund/src/components/progress.scss | 11 +++- .../themes/itzbund/src/components/select.scss | 12 ++-- .../itzbund/src/components/single-select.scss | 16 ++--- .../itzbund/src/components/split-button.scss | 30 +++++----- .../src/components/table-stateful.scss | 2 +- .../themes/itzbund/src/components/tabs.scss | 4 +- .../itzbund/src/components/textarea.scss | 12 ++-- .../src/components/toast-container.scss | 4 +- .../itzbund/src/components/toolbar.scss | 2 +- .../itzbund/src/components/tree-item.scss | 4 +- .../themes/itzbund/src/components/tree.scss | 4 +- packages/themes/itzbund/src/global.scss | 10 ++-- .../themes/itzbund/src/mixins/alert-wc.scss | 2 +- .../itzbund/src/mixins/indented-text.scss | 6 +- .../themes/itzbund/src/mixins/input-base.scss | 9 ++- .../src/mixins/kol-table-stateless-wc.scss | 22 +++---- packages/themes/itzbund/src/mixins/link.scss | 4 +- .../themes/itzbund/src/mixins/typography.scss | 16 ++--- packages/themes/package.json | 1 + 261 files changed, 1106 insertions(+), 880 deletions(-) create mode 100644 packages/themes/default/src/mixins/typography.scss create mode 100644 packages/themes/ecl/src/ecl-ec/mixins/typography.scss create mode 100644 packages/themes/ecl/src/ecl-eu/mixins/typography.scss diff --git a/packages/components/src/components/@shared/_kol-alert-mixin.scss b/packages/components/src/components/@shared/_kol-alert-mixin.scss index b1d151dc40..fe731c8cfd 100644 --- a/packages/components/src/components/@shared/_kol-alert-mixin.scss +++ b/packages/components/src/components/@shared/_kol-alert-mixin.scss @@ -1,3 +1,4 @@ +@import '../@shared/mixins'; @import '../style'; @import '../host-display-block'; @@ -18,7 +19,7 @@ .close { /* Visible with forced colors */ - outline: transparent solid 1px; + outline: transparent solid rem(1); } } } 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 3a622fcdab..f5315c58fb 100644 --- a/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss +++ b/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss @@ -1,3 +1,4 @@ +@import '../@shared/mixins'; @import '../style'; @import '../host-display-block'; @@ -33,9 +34,9 @@ .table:has(.focus-element:focus) { /* @see https://remysharp.com/til/css/focus-ring-default-styles */ - outline: 5px auto Highlight; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: 2px; + outline: rem(5) auto Highlight; + outline: rem(5) auto -webkit-focus-ring-color; + outline-offset: rem(2); } .table-sort-button .button { @@ -120,14 +121,14 @@ align-items: center; justify-content: center; background-color: rgb(255, 255, 255); - border-width: 2px; + border-width: rem(2); line-height: 1.5; transition: all 0.5s ease 0s; } input[type='radio'] { display: flex; - border-width: 2px; + border-width: rem(2); border-radius: 100%; height: 1.5em; min-height: 1.5em; diff --git a/packages/components/src/components/a11y.scss b/packages/components/src/components/a11y.scss index 96a5ab7830..e3ab5535f1 100644 --- a/packages/components/src/components/a11y.scss +++ b/packages/components/src/components/a11y.scss @@ -6,7 +6,7 @@ /* * Minimum size of interactive elements. */ - --a11y-min-size: 44px; + --a11y-min-size: rem(44); /* * No element should be used without a background and font color whose contrast ratio has * not been checked. By initially setting the background color to white and the font color @@ -40,7 +40,7 @@ } /* - * All interactive elements should have a minimum size of 44px. + * All interactive elements should have a minimum size of rem(44). */ /* input:not([type='checkbox'], [type='radio'], [type='range']), */ /* option, */ @@ -88,9 +88,9 @@ .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); - height: 1px; + height: rem(1); overflow: hidden; position: absolute; white-space: nowrap; - width: 1px; + width: rem(1); } diff --git a/packages/components/src/components/accordion/style.scss b/packages/components/src/components/accordion/style.scss index 1fbd52f1fd..77d39a4902 100644 --- a/packages/components/src/components/accordion/style.scss +++ b/packages/components/src/components/accordion/style.scss @@ -1,7 +1,7 @@ -@use '../@shared/mixins'; -@use '../style'; -@use '../host-display-block'; -@use '../../functional-components/Collapsible/collapsible.scss'; +@import '../@shared/mixins'; +@import '../style'; +@import '../host-display-block'; +@import '../../functional-components/Collapsible/collapsible'; @layer kol-component { :host { diff --git a/packages/components/src/components/alert/style.scss b/packages/components/src/components/alert/style.scss index 7136304c4f..affda7275e 100644 --- a/packages/components/src/components/alert/style.scss +++ b/packages/components/src/components/alert/style.scss @@ -1,5 +1,5 @@ @import '../@shared/mixins'; -@import '../@shared/kol-alert-mixin.scss'; +@import '../@shared/kol-alert-mixin'; @import '../style'; @layer kol-component { diff --git a/packages/components/src/components/avatar/style.scss b/packages/components/src/components/avatar/style.scss index 57988309d6..692cf96001 100644 --- a/packages/components/src/components/avatar/style.scss +++ b/packages/components/src/components/avatar/style.scss @@ -11,10 +11,10 @@ border-radius: 50%; overflow: hidden; /* Visible with forced colors */ - outline: transparent solid 1px; + outline: transparent solid rem(1); /*theme?*/ - width: 100px; - height: 100px; + width: rem(100); + height: rem(100); } .image { @@ -30,6 +30,6 @@ justify-content: center; /*theme?*/ background-color: #d3d3d3; - font-size: 40px; + font-size: rem(40); } } diff --git a/packages/components/src/components/badge/style.scss b/packages/components/src/components/badge/style.scss index 636c2d90b0..9ff750fa96 100644 --- a/packages/components/src/components/badge/style.scss +++ b/packages/components/src/components/badge/style.scss @@ -11,7 +11,7 @@ display: inline-flex; place-items: center; /* Visible with forced colors */ - outline: transparent solid 1px; + outline: transparent solid rem(1); } :host > span > .kol-button-wc button { diff --git a/packages/components/src/components/card/style.scss b/packages/components/src/components/card/style.scss index 6c90e6532d..9e9362487f 100644 --- a/packages/components/src/components/card/style.scss +++ b/packages/components/src/components/card/style.scss @@ -10,7 +10,7 @@ height: 100%; position: relative; /* Visible with forced colors */ - outline: transparent solid 1px; + outline: transparent solid rem(1); } .close { diff --git a/packages/components/src/components/details/style.scss b/packages/components/src/components/details/style.scss index 1bcfd3f0b5..89e07e8734 100644 --- a/packages/components/src/components/details/style.scss +++ b/packages/components/src/components/details/style.scss @@ -1,7 +1,7 @@ -@use '../@shared/mixins'; -@use '../style'; -@use '../host-display-block'; -@use '../../functional-components/Collapsible/collapsible.scss'; +@import '../@shared/mixins'; +@import '../style'; +@import '../host-display-block'; +@import '../../functional-components/Collapsible/collapsible'; @layer kol-component { :host { diff --git a/packages/components/src/components/form/style.scss b/packages/components/src/components/form/style.scss index 6a04127b89..b759c06183 100644 --- a/packages/components/src/components/form/style.scss +++ b/packages/components/src/components/form/style.scss @@ -1,6 +1,6 @@ @import '../@shared/mixins'; @import '../input-line'; -@import '../@shared/kol-alert-mixin.scss'; +@import '../@shared/kol-alert-mixin'; @import '../link'; @include kol-alert-styles; diff --git a/packages/components/src/components/input-checkbox/checkbox.scss b/packages/components/src/components/input-checkbox/checkbox.scss index a5e4de8065..73313c0688 100644 --- a/packages/components/src/components/input-checkbox/checkbox.scss +++ b/packages/components/src/components/input-checkbox/checkbox.scss @@ -21,8 +21,8 @@ } & .checkbox-input-element { - width: 22px; - height: 22px; + width: rem(22); + height: rem(22); } } } diff --git a/packages/components/src/components/input-checkbox/common.scss b/packages/components/src/components/input-checkbox/common.scss index 35fc7054de..7817815f67 100644 --- a/packages/components/src/components/input-checkbox/common.scss +++ b/packages/components/src/components/input-checkbox/common.scss @@ -60,7 +60,7 @@ input { border-style: solid; - border-width: 2px; + border-width: rem(2); line-height: 1.5; } diff --git a/packages/components/src/components/input-checkbox/style.scss b/packages/components/src/components/input-checkbox/style.scss index 31c5aef49d..227ae44303 100644 --- a/packages/components/src/components/input-checkbox/style.scss +++ b/packages/components/src/components/input-checkbox/style.scss @@ -3,6 +3,6 @@ @import 'button'; @import 'checkbox'; @import 'switch'; -@import '../@shared/kol-alert-mixin.scss'; +@import '../@shared/kol-alert-mixin'; @include kol-alert-styles; diff --git a/packages/components/src/components/input-checkbox/switch.scss b/packages/components/src/components/input-checkbox/switch.scss index a800e44af1..3234e3ddd3 100644 --- a/packages/components/src/components/input-checkbox/switch.scss +++ b/packages/components/src/components/input-checkbox/switch.scss @@ -14,8 +14,8 @@ .switch input[type='checkbox']::before { background-color: #000; height: 1.2em; - left: calc(0.25em - 2px); - top: calc(0.25em - 2px); + left: calc(0.25em - rem(2)); + top: calc(0.25em - rem(2)); position: absolute; transition: 0.5s; width: 1.2em; @@ -39,7 +39,7 @@ position: absolute; z-index: 1; top: 50%; - left: 4px; + left: rem(4); transform: translate(0, -50%); transition: 0.5s; color: #000; diff --git a/packages/components/src/components/input-color/style.scss b/packages/components/src/components/input-color/style.scss index c05222e63d..227ec78fad 100644 --- a/packages/components/src/components/input-color/style.scss +++ b/packages/components/src/components/input-color/style.scss @@ -1,6 +1,6 @@ @import '../@shared/mixins'; @import '../input-line'; -@import '../@shared/kol-alert-mixin.scss'; +@import '../@shared/kol-alert-mixin'; @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 5e96c9389c..47a4b9310d 100644 --- a/packages/components/src/components/input-date/style.scss +++ b/packages/components/src/components/input-date/style.scss @@ -1,6 +1,6 @@ @import '../@shared/mixins'; @import '../input-line'; -@import '../@shared/kol-alert-mixin.scss'; +@import '../@shared/kol-alert-mixin'; @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 4f5b309280..36df503814 100644 --- a/packages/components/src/components/input-email/style.scss +++ b/packages/components/src/components/input-email/style.scss @@ -1,6 +1,6 @@ @import '../@shared/mixins'; @import '../input-line'; -@import '../@shared/kol-alert-mixin.scss'; +@import '../@shared/kol-alert-mixin'; @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 26ed308c3b..070c8e736e 100644 --- a/packages/components/src/components/input-file/style.scss +++ b/packages/components/src/components/input-file/style.scss @@ -1,6 +1,6 @@ @import '../@shared/mixins'; @import '../input-line'; -@import '../@shared/kol-alert-mixin.scss'; +@import '../@shared/kol-alert-mixin'; @include kol-alert-styles; diff --git a/packages/components/src/components/input-number/style.scss b/packages/components/src/components/input-number/style.scss index 4f5b309280..36df503814 100644 --- a/packages/components/src/components/input-number/style.scss +++ b/packages/components/src/components/input-number/style.scss @@ -1,6 +1,6 @@ @import '../@shared/mixins'; @import '../input-line'; -@import '../@shared/kol-alert-mixin.scss'; +@import '../@shared/kol-alert-mixin'; @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 abe99379ac..555b3bf78f 100644 --- a/packages/components/src/components/input-password/style.scss +++ b/packages/components/src/components/input-password/style.scss @@ -1,6 +1,6 @@ @import '../@shared/mixins'; @import '../input-line'; -@import '../@shared/kol-alert-mixin.scss'; +@import '../@shared/kol-alert-mixin'; @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 3ae9b58433..ff149c7427 100644 --- a/packages/components/src/components/input-radio/style.scss +++ b/packages/components/src/components/input-radio/style.scss @@ -1,12 +1,12 @@ @import '../@shared/mixins'; @import '../input'; -@import '../@shared/kol-alert-mixin.scss'; +@import '../@shared/kol-alert-mixin'; @include kol-alert-styles; @layer kol-component { :host { - --border-width: 2px; + --border-width: rem(2); --input-size: 1.5em; font-size: rem(16); } diff --git a/packages/components/src/components/input-range/style.scss b/packages/components/src/components/input-range/style.scss index 0c55fa3799..817fdef57f 100644 --- a/packages/components/src/components/input-range/style.scss +++ b/packages/components/src/components/input-range/style.scss @@ -8,6 +8,7 @@ :host { font-size: rem(16); } + .inputs-wrapper { align-items: center; display: flex; @@ -26,7 +27,7 @@ input[type='range'] { appearance: none; background-color: #d3d3d3; - border: 1px solid #000; + border: rem(1) solid #000; display: inline-block; flex-grow: 1; height: rem(8); @@ -40,9 +41,9 @@ input[type='range']::-webkit-slider-thumb { box-sizing: border-box; background-color: #000; - height: 20px; - width: 20px; - border-radius: 20px; + height: rem(20); + width: rem(20); + border-radius: rem(20); cursor: pointer; -webkit-appearance: none; } @@ -50,9 +51,9 @@ input[type='range']::-moz-range-thumb { box-sizing: border-box; background-color: #000; - height: 20px; - width: 20px; - border-radius: 20px; + height: rem(20); + width: rem(20); + border-radius: rem(20); cursor: pointer; -moz-appearance: none; } @@ -61,6 +62,6 @@ /* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */ @media (prefers-contrast: more) { ::-webkit-slider-thumb { - outline: 1px solid currentColor; + outline: rem(1) solid currentColor; } } diff --git a/packages/components/src/components/input-text/style.scss b/packages/components/src/components/input-text/style.scss index 4f5b309280..36df503814 100644 --- a/packages/components/src/components/input-text/style.scss +++ b/packages/components/src/components/input-text/style.scss @@ -1,6 +1,6 @@ @import '../@shared/mixins'; @import '../input-line'; -@import '../@shared/kol-alert-mixin.scss'; +@import '../@shared/kol-alert-mixin'; @include kol-alert-styles; diff --git a/packages/components/src/components/kolibri/style.scss b/packages/components/src/components/kolibri/style.scss index 2e28f034b3..4ce34ce853 100644 --- a/packages/components/src/components/kolibri/style.scss +++ b/packages/components/src/components/kolibri/style.scss @@ -8,7 +8,7 @@ } text { - font-size: 90px; + font-size: rem(90); letter-spacing: normal; word-spacing: normal; } diff --git a/packages/components/src/components/link.scss b/packages/components/src/components/link.scss index 2dae0a2dc8..0cb523c2c4 100644 --- a/packages/components/src/components/link.scss +++ b/packages/components/src/components/link.scss @@ -27,7 +27,7 @@ } .skip { - left: -99999px; + left: rem(-99999); overflow: hidden; position: absolute; z-index: 9999999; diff --git a/packages/components/src/components/logo/style.scss b/packages/components/src/components/logo/style.scss index 256155b171..e9b17e6bd6 100644 --- a/packages/components/src/components/logo/style.scss +++ b/packages/components/src/components/logo/style.scss @@ -8,7 +8,7 @@ } text { - font-size: 16px; + font-size: rem(16); letter-spacing: normal; word-spacing: normal; } diff --git a/packages/components/src/components/progress/style.scss b/packages/components/src/components/progress/style.scss index e3e8d856b8..40d605c31a 100644 --- a/packages/components/src/components/progress/style.scss +++ b/packages/components/src/components/progress/style.scss @@ -14,7 +14,7 @@ } .bar { - width: 150px; + width: rem(150); .border { fill: transparent; diff --git a/packages/components/src/components/select/style.scss b/packages/components/src/components/select/style.scss index 199532a69b..ebc9c9a16f 100644 --- a/packages/components/src/components/select/style.scss +++ b/packages/components/src/components/select/style.scss @@ -1,6 +1,6 @@ @import '../@shared/mixins'; @import '../input-line'; -@import '../@shared/kol-alert-mixin.scss'; +@import '../@shared/kol-alert-mixin'; @include kol-alert-styles; diff --git a/packages/components/src/components/skip-nav/style.scss b/packages/components/src/components/skip-nav/style.scss index f14ffd0c56..4e1fcb9ae1 100644 --- a/packages/components/src/components/skip-nav/style.scss +++ b/packages/components/src/components/skip-nav/style.scss @@ -17,7 +17,7 @@ } .kol-link-wc a { - left: -99999px; + left: rem(-99999); overflow: hidden; position: absolute; z-index: 9999999; diff --git a/packages/components/src/components/spin/cycle.scss b/packages/components/src/components/spin/cycle.scss index 289f257c0f..5f3db8ecb9 100644 --- a/packages/components/src/components/spin/cycle.scss +++ b/packages/components/src/components/spin/cycle.scss @@ -19,9 +19,9 @@ content: ''; box-sizing: border-box; position: absolute; - inset: 0px; + inset: 0; border-radius: 50%; - border: 5px solid #333; + border: rem(5) solid #333; animation: 3s linear infinite prixClipFix; } @@ -36,18 +36,22 @@ border-color: #fff; clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0); } + 25% { border-color: #666; clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0); } + 50% { border-color: #000; clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); } + 75% { border-color: #000; clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%); } + 100% { border-color: #000; clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0); diff --git a/packages/components/src/components/toaster/style.scss b/packages/components/src/components/toaster/style.scss index 1c3db98ac9..263de4af38 100644 --- a/packages/components/src/components/toaster/style.scss +++ b/packages/components/src/components/toaster/style.scss @@ -1,5 +1,5 @@ @import '../@shared/mixins'; -@import '../@shared/kol-alert-mixin.scss'; +@import '../@shared/kol-alert-mixin'; @include kol-alert-styles; diff --git a/packages/components/src/components/toolbar/style.scss b/packages/components/src/components/toolbar/style.scss index 48619c5da9..c0e1d4f755 100644 --- a/packages/components/src/components/toolbar/style.scss +++ b/packages/components/src/components/toolbar/style.scss @@ -13,8 +13,8 @@ flex-wrap: wrap; &:focus-within { - outline: 1px solid; - outline-offset: 2px; + outline: rem(1) solid; + outline-offset: rem(2); } } } diff --git a/packages/components/src/components/tooltip/style.scss b/packages/components/src/components/tooltip/style.scss index 8c2959332c..60a7067e5c 100644 --- a/packages/components/src/components/tooltip/style.scss +++ b/packages/components/src/components/tooltip/style.scss @@ -35,10 +35,10 @@ } .kol-tooltip-wc .tooltip-arrow { - height: 10px; + height: rem(10); position: absolute; transform: rotate(45deg); - width: 10px; + width: rem(10); z-index: 999; } diff --git a/packages/components/src/components/tree/style.scss b/packages/components/src/components/tree/style.scss index b7c67c632c..dff359c557 100644 --- a/packages/components/src/components/tree/style.scss +++ b/packages/components/src/components/tree/style.scss @@ -14,8 +14,8 @@ } &:focus-within { - outline: 1px solid; - outline-offset: 2px; + outline: rem(1) solid; + outline-offset: rem(2); } } } diff --git a/packages/components/src/functional-components/Collapsible/collapsible.scss b/packages/components/src/functional-components/Collapsible/collapsible.scss index 672f2d55c9..0b2e54e0ba 100644 --- a/packages/components/src/functional-components/Collapsible/collapsible.scss +++ b/packages/components/src/functional-components/Collapsible/collapsible.scss @@ -1,4 +1,4 @@ -@use '../../components/@shared/mixins'; +@import '../../components/@shared/mixins'; /* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */ diff --git a/packages/samples/react/src/style.scss b/packages/samples/react/src/style.scss index ed53427675..d7e02ba869 100644 --- a/packages/samples/react/src/style.scss +++ b/packages/samples/react/src/style.scss @@ -24,9 +24,9 @@ hr { .indented-text { p { font-family: var(--font-family); - border-left: -2px solid var(--color-primary-variant); + border-left: rem(-2) solid var(--color-primary-variant); padding: 0 calc(8rem / var(--kolibri-root-font-size, 16)); - margin-left: -2px; + margin-left: rem(-2); } } @@ -40,13 +40,13 @@ hr { @media (min-width: 1024px) { .app-container { display: grid; - grid-template-columns: 360px calc(100% - 360px); + grid-template-columns: rem(360) calc(100% - rem(360)); min-height: 100vh; height: 100%; } .app-sidebar { - border-right: 1px solid gray; + border-right: rem(1) solid gray; position: relative; & .scrollable-container-wrapper { @@ -54,7 +54,7 @@ hr { top: 0; bottom: 0; left: 0; - width: 330px; + width: rem(330); margin: rem(16); flex-direction: column; display: flex; diff --git a/packages/themes/assets/material-icons/iconfont/_variables.scss b/packages/themes/assets/material-icons/iconfont/_variables.scss index 40bc19f1a3..da74b60405 100644 --- a/packages/themes/assets/material-icons/iconfont/_variables.scss +++ b/packages/themes/assets/material-icons/iconfont/_variables.scss @@ -1,3 +1,3 @@ $material-icons-font-path: './' !default; -$material-icons-font-size: 24px !default; +$material-icons-font-size: rem(24) !default; $material-icons-font-display: block !default; diff --git a/packages/themes/assets/material-symbols/_core.scss b/packages/themes/assets/material-symbols/_core.scss index 55d198f0d4..0d9c4e0d05 100644 --- a/packages/themes/assets/material-symbols/_core.scss +++ b/packages/themes/assets/material-symbols/_core.scss @@ -3,14 +3,13 @@ $material-symbols-font-path: './' !default; // @see https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss @function material-symbols-str-replace($string, $search, $replace: '') { $index: str-index($string, $search); + @if $index { - @return str-slice($string, 1, $index - 1) + $replace + - material-symbols-str-replace( - str-slice($string, $index + str-length($search)), - $search, - $replace - ); + @return str-slice($string, 1, $index - 1)+$replace +material-symbols-str-replace(str-slice($string, $index + str-length($search)), + $search, + $replace ); } + @return $string; } @@ -31,7 +30,7 @@ $material-symbols-font-path: './' !default; font-family: $font-family; font-weight: normal; font-style: normal; - font-size: 24px; + font-size: rem(24); line-height: 1; letter-spacing: normal; text-transform: none; diff --git a/packages/themes/bmf/assets/material-icons/iconfont/_variables.scss b/packages/themes/bmf/assets/material-icons/iconfont/_variables.scss index 40bc19f1a3..da74b60405 100644 --- a/packages/themes/bmf/assets/material-icons/iconfont/_variables.scss +++ b/packages/themes/bmf/assets/material-icons/iconfont/_variables.scss @@ -1,3 +1,3 @@ $material-icons-font-path: './' !default; -$material-icons-font-size: 24px !default; +$material-icons-font-size: rem(24) !default; $material-icons-font-display: block !default; diff --git a/packages/themes/bmf/assets/material-symbols/_core.scss b/packages/themes/bmf/assets/material-symbols/_core.scss index 55d198f0d4..0d9c4e0d05 100644 --- a/packages/themes/bmf/assets/material-symbols/_core.scss +++ b/packages/themes/bmf/assets/material-symbols/_core.scss @@ -3,14 +3,13 @@ $material-symbols-font-path: './' !default; // @see https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss @function material-symbols-str-replace($string, $search, $replace: '') { $index: str-index($string, $search); + @if $index { - @return str-slice($string, 1, $index - 1) + $replace + - material-symbols-str-replace( - str-slice($string, $index + str-length($search)), - $search, - $replace - ); + @return str-slice($string, 1, $index - 1)+$replace +material-symbols-str-replace(str-slice($string, $index + str-length($search)), + $search, + $replace ); } + @return $string; } @@ -31,7 +30,7 @@ $material-symbols-font-path: './' !default; font-family: $font-family; font-weight: normal; font-style: normal; - font-size: 24px; + font-size: rem(24); line-height: 1; letter-spacing: normal; text-transform: none; diff --git a/packages/themes/bmf/src/@shared/input-core.scss b/packages/themes/bmf/src/@shared/input-core.scss index 8a13349391..7b4c44c63a 100644 --- a/packages/themes/bmf/src/@shared/input-core.scss +++ b/packages/themes/bmf/src/@shared/input-core.scss @@ -1,4 +1,4 @@ -@import '../mixins/input.scss'; +@import '../mixins/input'; @layer kol-theme-component { @include input; diff --git a/packages/themes/bmf/src/components/abbr.scss b/packages/themes/bmf/src/components/abbr.scss index 0bce84ba9c..119abfade6 100644 --- a/packages/themes/bmf/src/components/abbr.scss +++ b/packages/themes/bmf/src/components/abbr.scss @@ -1,9 +1,12 @@ +@import '../mixins/rem'; + @layer kol-theme-component { abbr { - border-bottom: dotted var(--color-black) 1px; + border-bottom: dotted var(--color-black) rem(1); text-decoration: none; } + abbr:focus { - border-radius: 5px; + border-radius: rem(5); } } diff --git a/packages/themes/bmf/src/components/accordion.scss b/packages/themes/bmf/src/components/accordion.scss index 1301928ab7..752060a919 100644 --- a/packages/themes/bmf/src/components/accordion.scss +++ b/packages/themes/bmf/src/components/accordion.scss @@ -1,6 +1,6 @@ @import '../mixins/rem'; -@import '../mixins/typography.scss'; -@import '../mixins/focus-outline.scss'; +@import '../mixins/typography'; +@import '../mixins/focus-outline'; @layer kol-theme-component { :host { @@ -18,13 +18,13 @@ } &__wrapper { - margin-top: 3px; + margin-top: rem(3); } &__content { padding-left: 2.25em; - padding-bottom: 12px; - padding-right: 8px; + padding-bottom: rem(12); + padding-right: rem(8); } &__heading-button { @@ -34,8 +34,8 @@ } border-radius: var(--border-radius); - min-height: 24px; - padding: 10px 8px; + min-height: rem(24); + padding: rem(10) rem(8); @include kol-typography-accordion; gap: rem(8); diff --git a/packages/themes/bmf/src/components/alert.scss b/packages/themes/bmf/src/components/alert.scss index f70b291d85..c23457fd4c 100644 --- a/packages/themes/bmf/src/components/alert.scss +++ b/packages/themes/bmf/src/components/alert.scss @@ -1,4 +1,4 @@ -@import '../mixins/alert.scss'; +@import '../mixins/alert'; @layer kol-theme-component { :host { diff --git a/packages/themes/bmf/src/components/badge.scss b/packages/themes/bmf/src/components/badge.scss index 9da2efff99..57fea7fce9 100644 --- a/packages/themes/bmf/src/components/badge.scss +++ b/packages/themes/bmf/src/components/badge.scss @@ -40,8 +40,8 @@ } .kol-button-wc { - height: 32px; - width: 32px; + height: rem(32); + width: rem(32); position: relative; &:hover > button > .kol-span-wc { @@ -53,16 +53,16 @@ color: inherit; font-size: rem(16); position: absolute; - top: -6px; - right: -12px; + top: rem(-6); + right: rem(-12); > .kol-span-wc { border-top-right-radius: rem(5); border-bottom-right-radius: rem(5); padding-left: 0; padding-right: 0; - height: 32px; - width: 32px; + height: rem(32); + width: rem(32); } &:focus-visible { @@ -70,9 +70,9 @@ > .kol-span-wc { outline-color: var(--color-ocean); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 3px; + outline-width: rem(3); transition: outline-offset 0.2s linear; } } diff --git a/packages/themes/bmf/src/components/button-link.scss b/packages/themes/bmf/src/components/button-link.scss index c1c08ee676..eeebdf854d 100644 --- a/packages/themes/bmf/src/components/button-link.scss +++ b/packages/themes/bmf/src/components/button-link.scss @@ -1,3 +1,5 @@ +@import '../mixins/rem'; + @layer kol-theme-component { :is(a, button) { color: var(--color-midnight); @@ -13,7 +15,7 @@ :is(a, button):focus .kol-span-wc { border-radius: var(--border-radius); - outline: 2px solid; + outline: rem(2) solid; } a:hover:not([aria-disabled]), @@ -26,7 +28,7 @@ } .skip { - left: -99999px; + left: rem(-99999); overflow: hidden; position: absolute; z-index: 9999999; diff --git a/packages/themes/bmf/src/components/button.scss b/packages/themes/bmf/src/components/button.scss index 1a921a2ddd..dd26961615 100644 --- a/packages/themes/bmf/src/components/button.scss +++ b/packages/themes/bmf/src/components/button.scss @@ -1,4 +1,4 @@ -@import '../mixins/button.scss'; +@import '../mixins/button'; @layer kol-theme-component { :host { @@ -7,9 +7,9 @@ :is(a, button):focus .kol-span-wc { outline-color: var(--color-ocean); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 3px; + outline-width: rem(3); transition: outline-offset 0.2s linear; } @@ -18,14 +18,15 @@ font-weight: 700; border-radius: var(--a11y-min-size); border-style: solid; - border-width: 2px; + border-width: rem(2); min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: 8px 14px; + padding: rem(8) rem(14); text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; } + &.regular > .kol-span-wc { font-weight: 500; } diff --git a/packages/themes/bmf/src/components/card.scss b/packages/themes/bmf/src/components/card.scss index e438fe86cf..28e0d3680e 100644 --- a/packages/themes/bmf/src/components/card.scss +++ b/packages/themes/bmf/src/components/card.scss @@ -34,6 +34,6 @@ } :host > div > div.content + div.footer { - border-top: 2px solid var(--color-ice); + border-top: rem(2) solid var(--color-ice); } } diff --git a/packages/themes/bmf/src/components/combobox.scss b/packages/themes/bmf/src/components/combobox.scss index dc224aea47..286d66bc64 100644 --- a/packages/themes/bmf/src/components/combobox.scss +++ b/packages/themes/bmf/src/components/combobox.scss @@ -52,14 +52,14 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: 1px; + border-width: rem(1); border-radius: var(--border-radius); border-color: var(--color-grey); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; width: 100%; - max-height: calc($option-height * $visible-options + 2px); + max-height: calc($option-height * $visible-options + rem(2)); } &__item { diff --git a/packages/themes/bmf/src/components/details.scss b/packages/themes/bmf/src/components/details.scss index 086ca9b1b8..bbc3560c94 100644 --- a/packages/themes/bmf/src/components/details.scss +++ b/packages/themes/bmf/src/components/details.scss @@ -1,6 +1,6 @@ @import '../mixins/indented-text'; @import '../mixins/rem'; -@import '../mixins/focus-outline.scss'; +@import '../mixins/focus-outline'; @layer kol-theme-component { :host { @@ -42,8 +42,8 @@ } &__wrapper { - margin-top: 4px; - margin-left: -2px; + margin-top: rem(4); + margin-left: rem(-2); } &__content { @@ -71,7 +71,7 @@ border: none; &:hover { - box-shadow: 0 3px var(--color-ocean); + box-shadow: 0 rem(3) var(--color-ocean); } } } diff --git a/packages/themes/bmf/src/components/form.scss b/packages/themes/bmf/src/components/form.scss index cb83aa716e..43b8e5efe3 100644 --- a/packages/themes/bmf/src/components/form.scss +++ b/packages/themes/bmf/src/components/form.scss @@ -1,6 +1,6 @@ -@import '../mixins/alert.scss'; -@import '../mixins/indented-text.scss'; -@import '../mixins/link.scss'; +@import '../mixins/alert'; +@import '../mixins/indented-text'; +@import '../mixins/link'; @layer kol-theme-component { :host { diff --git a/packages/themes/bmf/src/components/heading.scss b/packages/themes/bmf/src/components/heading.scss index 694516933f..5e5421ad87 100644 --- a/packages/themes/bmf/src/components/heading.scss +++ b/packages/themes/bmf/src/components/heading.scss @@ -1,4 +1,4 @@ -@import '../mixins/typography.scss'; +@import '../mixins/typography'; @layer kol-theme-component { .headline-h1, diff --git a/packages/themes/bmf/src/components/icon.scss b/packages/themes/bmf/src/components/icon.scss index 93b2254026..3f31fa7ff9 100644 --- a/packages/themes/bmf/src/components/icon.scss +++ b/packages/themes/bmf/src/components/icon.scss @@ -1,3 +1,5 @@ +@import '../mixins/rem'; + @layer kol-theme-component { @font-face { font-family: 'Material Symbols Outlined'; @@ -48,7 +50,7 @@ font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; - font-size: 24px; + font-size: rem(24); line-height: 1; letter-spacing: normal; text-transform: none; diff --git a/packages/themes/bmf/src/components/indented-text.scss b/packages/themes/bmf/src/components/indented-text.scss index e99e151bf4..f9a5237c48 100644 --- a/packages/themes/bmf/src/components/indented-text.scss +++ b/packages/themes/bmf/src/components/indented-text.scss @@ -1,4 +1,4 @@ -@import '../mixins/indented-text.scss'; +@import '../mixins/indented-text'; @layer kol-theme-component { :host { diff --git a/packages/themes/bmf/src/components/input-checkbox.scss b/packages/themes/bmf/src/components/input-checkbox.scss index aca9cd892f..a39fa266ab 100644 --- a/packages/themes/bmf/src/components/input-checkbox.scss +++ b/packages/themes/bmf/src/components/input-checkbox.scss @@ -1,4 +1,4 @@ -@import '../mixins/input-messages.scss'; +@import '../mixins/input-messages'; @import '../mixins/rem'; @layer kol-theme-component { @@ -12,7 +12,7 @@ align-items: center; justify-items: left; width: 100%; - min-height: 44px; + min-height: rem(44); &:not(.disabled) :is(.input, label) { cursor: pointer; @@ -44,12 +44,12 @@ > div.input { display: inherit; - min-height: 44px; + min-height: rem(44); order: 2; height: 100%; input { - margin: 0px; + margin: 0; } } @@ -75,18 +75,20 @@ order: 1; width: 100%; border-color: var(--color-grey); - border-width: 2px; + border-width: rem(2); border-style: solid; - border-radius: 5px; + border-radius: rem(5); line-height: 1; font-size: rem(16); &:focus { border-color: var(--color-midnight); } + &:hover { box-shadow: none; } + &:active { box-shadow: none; } @@ -116,25 +118,30 @@ &:before { content: ''; } + &:checked { background-color: var(--color-midnight); border-color: var(--color-midnight); } } + &.default { .checkbox-container { justify-content: flex-start; } + input[type='checkbox'] { border-radius: var(--border-radius); height: calc(6 * var(--spacing)); min-width: calc(6 * var(--spacing)); width: calc(6 * var(--spacing)); + &:indeterminate { background-color: var(--color-midnight); border-color: var(--color-midnight); } } + .icon { display: flex; color: var(--color-white); @@ -148,7 +155,7 @@ .icon::part(icon) { font-family: 'Material Symbols Rounded'; font-weight: 900; - margin-top: 1px; + margin-top: rem(1); } &.checked .icon::part(icon)::before { @@ -171,18 +178,19 @@ border-radius: 1.25em; position: relative; /* Visible with forced colors */ - outline: transparent solid 1px; + outline: transparent solid rem(1); &:before { transition: 0.5; width: 1.25em; height: 1.25em; - left: calc(0.25em - 2px); - top: calc(0.25em - 2px); + left: calc(0.25em - rem(2)); + top: calc(0.25em - rem(2)); border-radius: 1.25em; background-color: white; position: absolute; } + &:checked { background-color: var(--color-midnight); @@ -191,6 +199,7 @@ --tw-bg-opacity: 1; } } + &:indeterminate { --tw-bg-opacity: 1; @@ -199,6 +208,7 @@ } } } + & .checkbox-input-element { display: block; } @@ -206,7 +216,7 @@ & .icon { width: 1.25em; height: 1.25em; - left: 2px; + left: rem(2); color: #000; &::part(icon) { @@ -244,7 +254,7 @@ .checkbox-container { align-items: center; display: flex; - min-height: 44px; + min-height: rem(44); position: relative; } @@ -254,8 +264,8 @@ border-bottom-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius); height: auto; - min-height: 32px; - min-width: 32px; + min-height: rem(32); + min-width: rem(32); /* Stable position when paddings are changing */ &::part(icon) { @@ -282,7 +292,7 @@ .input-label { align-items: center; display: flex; - min-height: 44px; + min-height: rem(44); width: 100%; padding-top: 0; } @@ -294,8 +304,8 @@ border-bottom-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius); display: flex; - min-height: 32px; - padding-right: 12px; + min-height: rem(32); + padding-right: rem(12); width: 100%; @at-root [data-label-align='left']:not(.hide-label)#{&} { @@ -303,7 +313,7 @@ border-top-right-radius: 0; border-bottom-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius); - padding-left: 12px; + padding-left: rem(12); } } @@ -324,10 +334,10 @@ .icon, .input-label-span { - min-height: 34px; - border: 3px solid var(--color-ocean); + min-height: rem(34); + border: rem(3) solid var(--color-ocean); background-clip: content-box; // emulate outline with offset - padding: 2px; + padding: rem(2); } } @@ -345,15 +355,15 @@ &[data-label-align='left']:focus-within:not(.hide-label) { .icon { - border-right: 3px solid var(--color-ocean); - padding-right: 2px; + border-right: rem(3) solid var(--color-ocean); + padding-right: rem(2); border-left: none; padding-left: 0; } .input-label-span { - border-left: 3px solid var(--color-ocean); - padding-left: 2px; + border-left: rem(3) solid var(--color-ocean); + padding-left: rem(2); border-right: none; padding-right: 0; } diff --git a/packages/themes/bmf/src/components/input-color.scss b/packages/themes/bmf/src/components/input-color.scss index 45950703ff..89c1aa3cff 100644 --- a/packages/themes/bmf/src/components/input-color.scss +++ b/packages/themes/bmf/src/components/input-color.scss @@ -1,4 +1,4 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; @layer kol-theme-component { input { diff --git a/packages/themes/bmf/src/components/input-date.scss b/packages/themes/bmf/src/components/input-date.scss index 3194b12a32..f9a3a9186d 100644 --- a/packages/themes/bmf/src/components/input-date.scss +++ b/packages/themes/bmf/src/components/input-date.scss @@ -1,4 +1,4 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; @layer kol-theme-component { input { diff --git a/packages/themes/bmf/src/components/input-email.scss b/packages/themes/bmf/src/components/input-email.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/bmf/src/components/input-email.scss +++ b/packages/themes/bmf/src/components/input-email.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/bmf/src/components/input-file.scss b/packages/themes/bmf/src/components/input-file.scss index fa7a0f5a47..7501c3e2d9 100644 --- a/packages/themes/bmf/src/components/input-file.scss +++ b/packages/themes/bmf/src/components/input-file.scss @@ -1,8 +1,9 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; +@import '../mixins/rem'; @layer kol-theme-component { input { background-color: transparent; - padding-top: calc(0.5em + 2px); + padding-top: calc(0.5em + rem(2)); } } diff --git a/packages/themes/bmf/src/components/input-number.scss b/packages/themes/bmf/src/components/input-number.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/bmf/src/components/input-number.scss +++ b/packages/themes/bmf/src/components/input-number.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/bmf/src/components/input-password.scss b/packages/themes/bmf/src/components/input-password.scss index abb9dc6296..9e85036fbe 100644 --- a/packages/themes/bmf/src/components/input-password.scss +++ b/packages/themes/bmf/src/components/input-password.scss @@ -1,9 +1,10 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; @layer kol-theme-component { kol-button-wc { margin-right: -0.875em; } + .kol-input.disabled .kol-button-wc { display: none; } diff --git a/packages/themes/bmf/src/components/input-radio.scss b/packages/themes/bmf/src/components/input-radio.scss index 374bb01753..701655510d 100644 --- a/packages/themes/bmf/src/components/input-radio.scss +++ b/packages/themes/bmf/src/components/input-radio.scss @@ -1,6 +1,6 @@ -@import '../mixins/input-messages.scss'; +@import '../mixins/input-messages'; @import '../mixins/rem'; -@import '../mixins/typography.scss'; +@import '../mixins/typography'; @layer kol-theme-component { :host { @@ -26,7 +26,7 @@ cursor: pointer; display: grid; line-height: 1; - gap: 8px; + gap: rem(8); width: 100%; } @@ -39,13 +39,10 @@ cursor: pointer; border-color: var(--color-grey); - border-width: 2px; + border-width: rem(2); border-style: solid; - border-radius: 5px; - /* padding: 10px 14px; */ - //line-height: 24px; - font-size: 16px; - //width: 100%; + border-radius: rem(5); + font-size: rem(16); &:hover { border-color: var(--color-midnight); @@ -62,9 +59,9 @@ } fieldset { - border: 0px; - margin: 0px; - padding: 0px; + border: 0; + margin: 0; + padding: 0; gap: 0.25em; color: var(--color-black); display: grid; @@ -109,7 +106,7 @@ } &.error { - border-left: 3px solid var(--color-red); + border-left: rem(3) solid var(--color-red); padding-left: 1em; input:focus, @@ -137,7 +134,7 @@ flex-direction: row; align-items: center; position: relative; - min-height: 44px; + min-height: rem(44); margin: 0; gap: rem(8); diff --git a/packages/themes/bmf/src/components/input-range.scss b/packages/themes/bmf/src/components/input-range.scss index 250c8d692e..3d90abb7f9 100644 --- a/packages/themes/bmf/src/components/input-range.scss +++ b/packages/themes/bmf/src/components/input-range.scss @@ -1,4 +1,4 @@ -@import '../mixins/input.scss'; +@import '../mixins/input'; @layer kol-theme-component { .inputs-wrapper { diff --git a/packages/themes/bmf/src/components/input-text.scss b/packages/themes/bmf/src/components/input-text.scss index 4f3554feca..f70b4937fd 100644 --- a/packages/themes/bmf/src/components/input-text.scss +++ b/packages/themes/bmf/src/components/input-text.scss @@ -1,4 +1,4 @@ -@import '../mixins/input.scss'; +@import '../mixins/input'; @layer kol-theme-component { input { diff --git a/packages/themes/bmf/src/components/link-button.scss b/packages/themes/bmf/src/components/link-button.scss index 7c94dcbf45..0c30df9036 100644 --- a/packages/themes/bmf/src/components/link-button.scss +++ b/packages/themes/bmf/src/components/link-button.scss @@ -1,4 +1,4 @@ -@import '../mixins/button.scss'; +@import '../mixins/button'; @layer kol-theme-component { :host { @@ -8,9 +8,9 @@ :is(a, button) { &:focus .kol-span-wc { outline-color: var(--color-ocean); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 3px; + outline-width: rem(3); transition: outline-offset 0.2s linear; } @@ -18,10 +18,10 @@ font-weight: 700; border-radius: var(--a11y-min-size); border-style: solid; - border-width: 2px; + border-width: rem(2); min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: 8px 14px; + padding: rem(8) rem(14); text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; @@ -35,7 +35,7 @@ text-decoration: underline; &:hover { - text-decoration-thickness: 3px; + text-decoration-thickness: rem(3); text-decoration-color: var(--color-ocean); } @@ -44,14 +44,15 @@ } &:focus > .kol-span-wc { - outline-offset: -3px; + outline-offset: rem(-3); transition: outline 0.2s linear; } .kol-span-wc { border: none; - border-radius: 5px; + border-radius: rem(5); } } + @include kol-button; } diff --git a/packages/themes/bmf/src/components/link.scss b/packages/themes/bmf/src/components/link.scss index 72e9da2c4d..a612e4a58d 100644 --- a/packages/themes/bmf/src/components/link.scss +++ b/packages/themes/bmf/src/components/link.scss @@ -1,4 +1,4 @@ -@import '../mixins/link.scss'; +@import '../mixins/link'; @layer kol-theme-component { :host { diff --git a/packages/themes/bmf/src/components/nav.scss b/packages/themes/bmf/src/components/nav.scss index 1052214618..9241511ef2 100644 --- a/packages/themes/bmf/src/components/nav.scss +++ b/packages/themes/bmf/src/components/nav.scss @@ -25,10 +25,10 @@ color: var(--color-midnight); display: flex; font-style: normal; - letter-spacing: 0.175px; + letter-spacing: rem(0.175); line-height: 1; - min-height: 44px; - min-width: 44px; + min-height: rem(44); + min-width: rem(44); padding: rem(12) rem(8) rem(12) rem(4); place-items: center; text-decoration: none; diff --git a/packages/themes/bmf/src/components/pagination.scss b/packages/themes/bmf/src/components/pagination.scss index 70853a4724..be416280b3 100644 --- a/packages/themes/bmf/src/components/pagination.scss +++ b/packages/themes/bmf/src/components/pagination.scss @@ -1,3 +1,5 @@ +@import '../mixins/rem'; + @layer kol-theme-component { :host { font-family: var(--font-family); @@ -8,7 +10,7 @@ } .icon { - font-size: 18px; + font-size: rem(18); &::part(icon) { font-family: 'Material Symbols Rounded'; @@ -46,11 +48,12 @@ outline: none; .button-inner { - outline-offset: 2px; - outline: 3px solid var(--color-ocean); + outline-offset: rem(2); + outline: rem(3) solid var(--color-ocean); transition: outline-offset 0.2s linear; } } + &:active, &:hover { &:not(:disabled) .button-inner { @@ -58,10 +61,12 @@ border-color: var(--color-ocean); color: var(--color-white); } + &:not(:disabled) .icon::part(icon)::before { color: var(--color-white); } } + &:active .button-inner { border-color: var(--color-white); outline: none; @@ -70,11 +75,11 @@ .button-inner { background-color: transparent; border-radius: var(--a11y-min-size); - border: 2px solid transparent; + border: rem(2) solid transparent; color: var(--color-midnight); min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: 8px; + padding: rem(8); text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; @@ -85,6 +90,7 @@ &:disabled { opacity: 1; } + .button-inner { background-color: var(--color-ice); border-color: var(--color-ice); diff --git a/packages/themes/bmf/src/components/progress.scss b/packages/themes/bmf/src/components/progress.scss index a062792776..ebf60eb514 100644 --- a/packages/themes/bmf/src/components/progress.scss +++ b/packages/themes/bmf/src/components/progress.scss @@ -8,7 +8,7 @@ .bar > div { flex-direction: column; gap: rem(8); - width: 100px; + width: rem(100); } .bar > div text { @@ -23,7 +23,7 @@ .bar .background { fill: var(--color-ice); stroke: var(--color-ice); - stroke-width: 1px; + stroke-width: rem(1); height: rem(8); } diff --git a/packages/themes/bmf/src/components/select.scss b/packages/themes/bmf/src/components/select.scss index 89712ae2cd..432809e82b 100644 --- a/packages/themes/bmf/src/components/select.scss +++ b/packages/themes/bmf/src/components/select.scss @@ -1,4 +1,5 @@ -@import '../mixins/input.scss'; +@import '../mixins/input'; +@import '../mixins/rem'; @layer kol-theme-component { select { @@ -17,7 +18,7 @@ } option { - margin: 1px 0; + margin: rem(1) 0; border-radius: 0.25em; cursor: pointer; diff --git a/packages/themes/bmf/src/components/single-select.scss b/packages/themes/bmf/src/components/single-select.scss index 6bdaa2fe92..60ff6a7669 100644 --- a/packages/themes/bmf/src/components/single-select.scss +++ b/packages/themes/bmf/src/components/single-select.scss @@ -1,5 +1,5 @@ @import '../mixins/rem'; -@import '../mixins/input.scss'; +@import '../mixins/input'; $option-height: rem(40); $visible-options: 5; @@ -50,10 +50,10 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: 1px; + border-width: rem(1); border-radius: var(--border-radius); border-color: var(--color-grey); - max-height: calc($option-height * $visible-options + 2px); + max-height: calc($option-height * $visible-options + rem(2)); overflow-y: auto; overflow-x: hidden; width: 100%; diff --git a/packages/themes/bmf/src/components/skip-nav.scss b/packages/themes/bmf/src/components/skip-nav.scss index 247f46a986..2dd943fa6a 100644 --- a/packages/themes/bmf/src/components/skip-nav.scss +++ b/packages/themes/bmf/src/components/skip-nav.scss @@ -4,10 +4,10 @@ .kol-link-wc > a > .kol-span-wc { border-radius: var(--a11y-min-size); border-style: solid; - border-width: 2px; + border-width: rem(2); gap: rem(8); line-height: 1; - padding: 8px 14px; + padding: rem(8) rem(14); background-color: var(--color-ocean); border-color: var(--color-ocean); color: var(--color-white); diff --git a/packages/themes/bmf/src/components/split-button.scss b/packages/themes/bmf/src/components/split-button.scss index fd37418f39..b00b1cb278 100644 --- a/packages/themes/bmf/src/components/split-button.scss +++ b/packages/themes/bmf/src/components/split-button.scss @@ -1,11 +1,12 @@ -@import '../mixins/button.scss'; +@import '../mixins/button'; +@import '../mixins/rem'; @layer kol-theme-component { :host { font-family: var(--font-family); border-radius: var(--a11y-min-size); border-style: solid; - border-width: 2px; + border-width: rem(2); border-color: var(--color-midnight); } @@ -15,8 +16,8 @@ .horizontal-line { background-color: var(--color-midnight); - border-radius: 2px; - width: 1px; + border-radius: rem(2); + width: rem(1); } .secondary-button button { @@ -31,16 +32,16 @@ .secondary-button :focus .kol-span-wc { border-top-right-radius: var(--a11y-min-size); border-bottom-right-radius: var(--a11y-min-size); - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; outline-offset: 0; } :is(a, button):focus .kol-span-wc { outline-color: var(--color-ocean); outline-style: solid; - outline-width: 3px; - outline-offset: 2px; + outline-width: rem(3); + outline-offset: rem(2); transition: outline-offset 0.2s linear; } @@ -50,7 +51,7 @@ border-bottom-left-radius: var(--a11y-min-size); min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: 8px 14px; + padding: rem(8) rem(14); text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; diff --git a/packages/themes/bmf/src/components/tabs.scss b/packages/themes/bmf/src/components/tabs.scss index ac9347e7f0..dee98cb3e7 100644 --- a/packages/themes/bmf/src/components/tabs.scss +++ b/packages/themes/bmf/src/components/tabs.scss @@ -18,10 +18,10 @@ border-radius: rem(4); font-style: normal; font-weight: 700; - font-size: 18px; + font-size: rem(18); line-height: 1; - min-height: 44px; - min-width: 44px; + min-height: rem(44); + min-width: rem(44); color: var(--color-grey); padding: 0; } @@ -109,11 +109,11 @@ } :host > .tabs-align-bottom > .tabs-button-group > div > div:first-child { - margin: 0px 1em 0px 0px; + margin: 0 1em 0 0; } :host > .tabs-align-bottom > .tabs-button-group > div > div { - margin: 0px 1em; + margin: 0 1em; } :host > .tabs-align-top { @@ -130,11 +130,11 @@ } :host > .tabs-align-top > .tabs-button-group > div > div:first-child { - margin: 0px 1em 0px 0px; + margin: 0 1em 0 0; } :host > .tabs-align-top > .tabs-button-group > div > div { - margin: 0px 1em; + margin: 0 1em; } :host > div { diff --git a/packages/themes/bmf/src/components/textarea.scss b/packages/themes/bmf/src/components/textarea.scss index 6300692ac8..986d48fbf6 100644 --- a/packages/themes/bmf/src/components/textarea.scss +++ b/packages/themes/bmf/src/components/textarea.scss @@ -1,12 +1,12 @@ -@import '../mixins/input.scss'; +@import '../mixins/input'; @import '../mixins/rem'; @layer kol-theme-component { textarea { border: none; display: block; - padding-top: 12px; - padding-bottom: 12px; + padding-top: rem(12); + padding-bottom: rem(12); overflow: auto; &::placeholder { diff --git a/packages/themes/bmf/src/components/toast-container.scss b/packages/themes/bmf/src/components/toast-container.scss index 9ea5ba4e78..f0fc3eb1ab 100644 --- a/packages/themes/bmf/src/components/toast-container.scss +++ b/packages/themes/bmf/src/components/toast-container.scss @@ -1,11 +1,11 @@ @import '../mixins/rem'; -@import '../mixins/alert.scss'; +@import '../mixins/alert'; @layer kol-theme-component { :host { top: rem(80); right: rem(32); - width: 440px; + width: rem(440); max-width: 100%; } diff --git a/packages/themes/bmf/src/components/toolbar.scss b/packages/themes/bmf/src/components/toolbar.scss index 02dea506af..dd51a6a990 100644 --- a/packages/themes/bmf/src/components/toolbar.scss +++ b/packages/themes/bmf/src/components/toolbar.scss @@ -1,9 +1,11 @@ +@import '../mixins/rem'; + @layer kol-theme-component { .toolbar { padding: var(--spacing); border-radius: var(--border-radius); background-color: var(--color-ice); - border-width: 2px; + border-width: rem(2); border-style: solid; } } diff --git a/packages/themes/bmf/src/components/tree-item.scss b/packages/themes/bmf/src/components/tree-item.scss index 6f4c145491..16403d1ace 100644 --- a/packages/themes/bmf/src/components/tree-item.scss +++ b/packages/themes/bmf/src/components/tree-item.scss @@ -3,12 +3,12 @@ @layer kol-theme-component { .tree-link { display: block; - border: 2px solid transparent; + border: rem(2) solid transparent; &:hover, &:focus-within { background-color: var(--color-ocean); - border: 2px solid var(--color-midnight); + border: rem(2) solid var(--color-midnight); & > a { outline-offset: 0; diff --git a/packages/themes/bmf/src/global.scss b/packages/themes/bmf/src/global.scss index d29f0ac544..51038ae7b5 100644 --- a/packages/themes/bmf/src/global.scss +++ b/packages/themes/bmf/src/global.scss @@ -1,10 +1,10 @@ @import './mixins/rem'; -@import './mixins/focus-outline.scss'; +@import './mixins/focus-outline'; @layer kol-theme-global { /* Design Tokens */ :host { - --border-radius: 5px; + --border-radius: rem(5); --color-midnight: #004b76; --color-ocean: #0077b6; --color-sky: #99c9e2; @@ -86,12 +86,12 @@ } .kol-tooltip-wc .tooltip-floating { - border: 1px solid var(--color-metal); + border: rem(1) solid var(--color-metal); border-radius: var(--border-radius); } .kol-tooltip-wc .tooltip-arrow { - border: 1px solid var(--color-metal); + border: rem(1) solid var(--color-metal); } .kol-tooltip-wc .tooltip-area { diff --git a/packages/themes/bmf/src/mixins/alert.scss b/packages/themes/bmf/src/mixins/alert.scss index 7208b2a397..e40ab3c6a4 100644 --- a/packages/themes/bmf/src/mixins/alert.scss +++ b/packages/themes/bmf/src/mixins/alert.scss @@ -2,9 +2,9 @@ @mixin kol-alert-theme { .kol-alert-wc { - border-width: 2px; + border-width: rem(2); border-style: solid; - border-radius: 5px; + border-radius: rem(5); display: flex; width: 100%; overflow: unset; @@ -52,7 +52,7 @@ display: grid; > .kol-heading-wc { - line-height: 20px; + line-height: rem(20); padding-top: rem(2); } } @@ -174,9 +174,9 @@ } .card { - border-width: 2px; + border-width: rem(2); border-style: solid; - filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24)); + filter: drop-shadow(0 rem(2) rem(4) rgba(8, 35, 48, 0.24)); flex-direction: column; &.hasCloser > .heading { @@ -216,9 +216,9 @@ .kol-button-wc button { &:focus { outline-color: var(--color-white); - outline-offset: -3px; + outline-offset: rem(-3); outline-style: solid; - outline-width: 3px; + outline-width: rem(3); transition: outline 0.1s linear; } @@ -312,9 +312,9 @@ } .close > button { - min-width: 44px; + min-width: rem(44); color: var(--color-white); - min-height: 44px; + min-height: rem(44); display: grid; gap: 0.25em; line-height: rem(24); @@ -323,10 +323,10 @@ cursor: pointer; border-radius: 1.5em; border-style: solid; - border-width: 2px; + border-width: rem(2); font-size: rem(16); align-items: center; - padding: 8px; + padding: rem(8); justify-content: center; font-style: normal; text-align: center; diff --git a/packages/themes/bmf/src/mixins/button.scss b/packages/themes/bmf/src/mixins/button.scss index de480146e4..a5984c93cb 100644 --- a/packages/themes/bmf/src/mixins/button.scss +++ b/packages/themes/bmf/src/mixins/button.scss @@ -145,7 +145,7 @@ } :is(a, button).hide-label > .kol-span-wc { - padding: 8px; + padding: rem(8); width: unset; } @@ -159,7 +159,7 @@ /** button with inline focus */ :is(a, button).focus-inline:focus > .kol-span-wc { - outline-offset: -2px; + outline-offset: rem(-2); } /** :is(a,button) with transparent background */ diff --git a/packages/themes/bmf/src/mixins/focus-outline.scss b/packages/themes/bmf/src/mixins/focus-outline.scss index 7a62012243..8916db9002 100644 --- a/packages/themes/bmf/src/mixins/focus-outline.scss +++ b/packages/themes/bmf/src/mixins/focus-outline.scss @@ -1,8 +1,8 @@ @mixin focus-outline { cursor: pointer; outline-color: var(--color-ocean); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 3px; + outline-width: rem(3); transition: outline-offset 0.2s linear; } diff --git a/packages/themes/bmf/src/mixins/indented-text.scss b/packages/themes/bmf/src/mixins/indented-text.scss index 1b9aff363b..afe6074c13 100644 --- a/packages/themes/bmf/src/mixins/indented-text.scss +++ b/packages/themes/bmf/src/mixins/indented-text.scss @@ -1,8 +1,10 @@ +@import './rem'; + @mixin indented-text { font-family: var(--font-family); - border-left: 2px solid var(--color-ocean); + border-left: rem(2) solid var(--color-ocean); padding: 0 0.5em; - margin-left: -2px; + margin-left: rem(-2); width: 100%; color: var(--color-grey); } diff --git a/packages/themes/bmf/src/mixins/input-messages.scss b/packages/themes/bmf/src/mixins/input-messages.scss index 5a465e401d..3cdbec1cd1 100644 --- a/packages/themes/bmf/src/mixins/input-messages.scss +++ b/packages/themes/bmf/src/mixins/input-messages.scss @@ -93,15 +93,16 @@ &.#{$type} { .input { border-color: var(#{$color}); - border-width: 3px; + border-width: rem(3); &:hover { border-color: var(--color-midnight); } } + &:not(.hidden-error) { padding-left: 1em; - border-left: 3px solid var(#{$color}); + border-left: rem(3) solid var(#{$color}); } } } diff --git a/packages/themes/bmf/src/mixins/input.scss b/packages/themes/bmf/src/mixins/input.scss index e209c7faf2..4a6193d902 100644 --- a/packages/themes/bmf/src/mixins/input.scss +++ b/packages/themes/bmf/src/mixins/input.scss @@ -1,4 +1,4 @@ -@import './input-messages.scss'; +@import './input-messages'; @mixin input { :host { @@ -9,7 +9,7 @@ gap: 0.25em; display: grid; grid-template-areas: 'error error' 'label label' 'input input' 'hint hint'; - grid-template-columns: 1fr 115px; + grid-template-columns: 1fr rem(115); &:has(> .counter) { grid-template-areas: 'error error' 'label counter' 'input input' 'hint hint'; @@ -48,6 +48,7 @@ label { opacity: 1; } + .input { background-color: var(--color-smoke); border-color: var(--color-granite); @@ -61,7 +62,7 @@ border-color: var(--color-grey); border-radius: var(--border-radius); border-style: solid; - border-width: 2px; + border-width: rem(2); > .kol-icon { width: 1em; diff --git a/packages/themes/bmf/src/mixins/kol-table-stateless-wc.scss b/packages/themes/bmf/src/mixins/kol-table-stateless-wc.scss index 384d235b42..89d034e460 100644 --- a/packages/themes/bmf/src/mixins/kol-table-stateless-wc.scss +++ b/packages/themes/bmf/src/mixins/kol-table-stateless-wc.scss @@ -24,15 +24,15 @@ .table:has(.focus-element:focus) { outline-color: var(--color-ocean); outline-style: solid; - outline-width: 3px; + outline-width: rem(3); transition: outline-offset 0.2s linear; } caption { - width: 1px; - height: 1px; + width: rem(1); + height: rem(1); padding: 0; - margin: -1px; + margin: rem(-1); overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; @@ -64,7 +64,7 @@ th, td { - border-bottom: 1px solid var(--color-granite); + border-bottom: rem(1) solid var(--color-granite); height: rem(20); } @@ -106,15 +106,15 @@ border-color: var(--color-midnight); outline-color: var(--color-ocean); outline-style: solid; - outline-offset: 2px; - outline-width: 3px; + outline-offset: rem(2); + outline-width: rem(3); } } // CHECKBOX input[type='checkbox'] { border-color: var(--color-grey); - border-radius: 5px; + border-radius: rem(5); &:checked { background-color: var(--color-midnight); @@ -129,7 +129,7 @@ .icon::part(icon) { font-family: 'Material Symbols Rounded'; font-weight: 900; - margin-top: 1px; + margin-top: rem(1); } &.checked .icon::part(icon)::before { diff --git a/packages/themes/bmf/src/mixins/link.scss b/packages/themes/bmf/src/mixins/link.scss index e56cccf043..e2e85f4b09 100644 --- a/packages/themes/bmf/src/mixins/link.scss +++ b/packages/themes/bmf/src/mixins/link.scss @@ -1,3 +1,5 @@ +@import './rem'; + @mixin kol-link { :is(a, button) { color: var(--color-midnight); @@ -11,8 +13,8 @@ text-decoration-thickness: unset; .kol-span-wc { - border-radius: 5px; - outline: 3px solid var(--color-ocean); + border-radius: rem(5); + outline: rem(3) solid var(--color-ocean); } &:hover { @@ -27,7 +29,7 @@ } .skip { - left: -99999px; + left: rem(-99999); overflow: hidden; position: absolute; z-index: 9999999; diff --git a/packages/themes/bmf/src/mixins/typography.scss b/packages/themes/bmf/src/mixins/typography.scss index 4ca9a115e2..b7528ba885 100644 --- a/packages/themes/bmf/src/mixins/typography.scss +++ b/packages/themes/bmf/src/mixins/typography.scss @@ -30,7 +30,7 @@ } @mixin kol-typography-label { - font-size: 14px; + font-size: rem(14); line-height: 1.25; } diff --git a/packages/themes/default/src/@shared/input-core.scss b/packages/themes/default/src/@shared/input-core.scss index 0f1ffe2a0d..e177f802a5 100644 --- a/packages/themes/default/src/@shared/input-core.scss +++ b/packages/themes/default/src/@shared/input-core.scss @@ -1,6 +1,7 @@ @import '../mixins/rem'; -@import '../mixins/alert-wc.scss'; +@import '../mixins/alert-wc'; @import '../mixins/input-error'; +@import '../mixins/typography'; @layer kol-theme-component { :host { @@ -36,7 +37,7 @@ border-color: var(--color-subtle); border-radius: var(--border-radius); border-style: solid; - border-width: 2px; + border-width: rem(2); padding: 0 rem(8); > .kol-icon { @@ -76,8 +77,7 @@ .hint { order: 4; - font-size: rem(14.4); - font-style: italic; + @include kol-typography-hint; } } diff --git a/packages/themes/default/src/components/abbr.scss b/packages/themes/default/src/components/abbr.scss index a0cf8146d5..b199d29f76 100644 --- a/packages/themes/default/src/components/abbr.scss +++ b/packages/themes/default/src/components/abbr.scss @@ -1,6 +1,8 @@ +@import '../mixins/rem'; + @layer kol-theme-component { abbr { - border-bottom: dashed var(--color-text) 1px; + border-bottom: dashed var(--color-text) rem(1); text-decoration: none; } } diff --git a/packages/themes/default/src/components/accordion.scss b/packages/themes/default/src/components/accordion.scss index aa25b4f4ef..5ea0811765 100644 --- a/packages/themes/default/src/components/accordion.scss +++ b/packages/themes/default/src/components/accordion.scss @@ -1,5 +1,6 @@ @import '../mixins/rem'; @import '../mixins/focus-outline'; +@import '../mixins/typography'; @layer kol-theme-component { :host { @@ -15,8 +16,8 @@ &__content { margin: 0; padding-left: 2.25em; - padding-bottom: 12px; - padding-right: 8px; + padding-bottom: rem(12); + padding-right: rem(8); } &__heading { @@ -39,18 +40,16 @@ display: flex; place-items: baseline center; text-align: left; - - font-weight: 700; - font-size: rem(18); - line-height: 1.1; gap: 0.5em; + @include kol-typography-accordion; } border-radius: var(--border-radius); min-height: rem(35.2); button { - padding: 12px 8px; + padding: rem(12) rem(8); + :focus { outline: none; } diff --git a/packages/themes/default/src/components/alert.scss b/packages/themes/default/src/components/alert.scss index 0b60ea1f05..b3467d4560 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.scss'; +@import '../mixins/alert-wc'; @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 e5c408f4a7..7129e8c1b4 100644 --- a/packages/themes/default/src/components/button-link.scss +++ b/packages/themes/default/src/components/button-link.scss @@ -1,3 +1,5 @@ +@import '../mixins/rem'; + @layer kol-theme-component { :is(a, button) { color: var(--color-primary); @@ -27,7 +29,7 @@ } .skip { - left: -99999px; + left: rem(-99999); overflow: hidden; position: absolute; z-index: 9999999; @@ -41,7 +43,7 @@ .access-key-hint { background-color: var(--color-mute-variant); - border-radius: 3px; + border-radius: rem(3); color: var(--color-text); padding: 0 0.3em; } diff --git a/packages/themes/default/src/components/button.scss b/packages/themes/default/src/components/button.scss index 46b4a5fe57..5c798761f8 100644 --- a/packages/themes/default/src/components/button.scss +++ b/packages/themes/default/src/components/button.scss @@ -1,4 +1,5 @@ -@import '../mixins/button.scss'; +@import '../mixins/button'; +@import '../mixins/rem'; @layer kol-theme-component { :host { @@ -12,7 +13,7 @@ border-width: var(--border-width); min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: 8px 14px; + padding: rem(8) rem(14); text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; diff --git a/packages/themes/default/src/components/combobox.scss b/packages/themes/default/src/components/combobox.scss index 4801bcfff0..75407e82ac 100644 --- a/packages/themes/default/src/components/combobox.scss +++ b/packages/themes/default/src/components/combobox.scss @@ -1,6 +1,7 @@ @import '../mixins/rem'; @import '../mixins/alert-wc'; @import '../mixins/input-error'; +@import '../mixins/typography'; $option-height: rem(40); $visible-options: 5; @@ -54,14 +55,14 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: 1px; + border-width: rem(1); border-radius: var(--border-radius); border-color: var(--color-subtle); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; width: 100%; - max-height: calc($option-height * $visible-options + 2px); + max-height: calc($option-height * $visible-options + rem(2)); } &__item { @@ -102,8 +103,7 @@ $visible-options: 5; .kol-input .hint { order: 5; - font-size: rem(14.4); - font-style: italic; + @include kol-typography-hint; } input::placeholder { @@ -115,7 +115,7 @@ $visible-options: 5; border-color: var(--color-subtle); border-radius: var(--border-radius); border-style: solid; - border-width: 2px; + border-width: rem(2); padding: 0 rem(8); } diff --git a/packages/themes/default/src/components/form.scss b/packages/themes/default/src/components/form.scss index 671aa09572..03a1887aef 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.scss'; -@import '../mixins/indented-text.scss'; -@import '../mixins/link.scss'; +@import '../mixins/alert-wc'; +@import '../mixins/indented-text'; +@import '../mixins/link'; @layer kol-theme-component { :host { diff --git a/packages/themes/default/src/components/heading.scss b/packages/themes/default/src/components/heading.scss index 675a9fa996..e723babefe 100644 --- a/packages/themes/default/src/components/heading.scss +++ b/packages/themes/default/src/components/heading.scss @@ -1,4 +1,4 @@ -@import '../mixins/rem'; +@import '../mixins/typography'; @layer kol-theme-component { .headline-h1, @@ -11,21 +11,22 @@ font-style: normal; font-family: var(--font-family); } + .headline-h1, .headline-h2, .headline-h3 { font-weight: 700; } + .headline-h1 { - font-size: rem(24); - line-height: 1.6667; + @include kol-typography-h1; } + .headline-h2 { - font-size: rem(20); - line-height: 1.4; + @include kol-typography-h2; } + .headline-h3 { - font-size: rem(18); - line-height: 1.333; + @include kol-typography-h3; } } diff --git a/packages/themes/default/src/components/indented-text.scss b/packages/themes/default/src/components/indented-text.scss index e99e151bf4..f9a5237c48 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.scss'; +@import '../mixins/indented-text'; @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 4522abf416..1f6b858d6d 100644 --- a/packages/themes/default/src/components/input-checkbox.scss +++ b/packages/themes/default/src/components/input-checkbox.scss @@ -1,7 +1,8 @@ @import '../mixins/rem'; @import '../mixins/focus-outline'; -@import '../mixins/alert-wc.scss'; +@import '../mixins/alert-wc'; @import '../mixins/input-error'; +@import '../mixins/typography'; @layer kol-theme-component { :host { @@ -35,7 +36,7 @@ } .kol-input.button { - gap: rem(6.4) 1px; + gap: rem(6.4) rem(1); } .checkbox-container { @@ -49,7 +50,7 @@ } .kol-input > div.input input { - margin: 0px; + margin: 0; } kol-input > label { @@ -82,16 +83,15 @@ order: 1; width: 100%; border-color: var(--color-subtle); - border-width: 2px; + border-width: rem(2); border-style: solid; border-radius: var(--border-radius); - line-height: 1.5; - font-size: rem(16); + @include kol-typography-body; } input:hover { border-color: var(--color-primary); - box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24); + box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); } input:focus:hover { @@ -154,14 +154,14 @@ position: relative; width: 3.5em; /* Visible with forced colors */ - outline: transparent solid 1px; + outline: transparent solid rem(1); } .kol-input.switch input[type='checkbox']:before { width: 1.25em; height: 1.25em; - left: calc(0.25em - 2px); - top: calc(0.25em - 2px); + left: calc(0.25em - rem(2)); + top: calc(0.25em - rem(2)); border-radius: 1.25em; background-color: white; position: absolute; @@ -183,7 +183,7 @@ & .icon { width: 1.25em; height: 1.25em; - left: 2px; + left: rem(2); } &.checked .icon { @@ -197,9 +197,9 @@ .button { .input { - border-top-width: 1px; - border-left-width: 1px; - border-bottom-width: 1px; + border-top-width: rem(1); + border-left-width: rem(1); + border-bottom-width: rem(1); border-top-style: solid; border-left-style: solid; @@ -207,14 +207,14 @@ } &.hide-label .input { - border-right-width: 1px; + border-right-width: rem(1); border-right-style: solid; } .input-label { - border-top-width: 1px; - border-right-width: 1px; - border-bottom-width: 1px; + border-top-width: rem(1); + border-right-width: rem(1); + border-bottom-width: rem(1); border-top-style: solid; border-right-style: solid; @@ -281,12 +281,12 @@ .input { border-style: solid; - border-width: 1px 1px 1px 0; + border-width: rem(1) rem(1) rem(1) 0; } .input-label { border-style: solid; - border-width: 1px 0 1px 1px; + border-width: rem(1) 0 rem(1) rem(1); } } } diff --git a/packages/themes/default/src/components/input-color.scss b/packages/themes/default/src/components/input-color.scss index be929d1751..6e4ad65795 100644 --- a/packages/themes/default/src/components/input-color.scss +++ b/packages/themes/default/src/components/input-color.scss @@ -1,9 +1,10 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; +@import '../mixins/rem'; @layer kol-theme-component { input[type='color'] { border: none; - min-height: 40px; + min-height: rem(40); } input[type='color'] { diff --git a/packages/themes/default/src/components/input-date.scss b/packages/themes/default/src/components/input-date.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/default/src/components/input-date.scss +++ b/packages/themes/default/src/components/input-date.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/default/src/components/input-email.scss b/packages/themes/default/src/components/input-email.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/default/src/components/input-email.scss +++ b/packages/themes/default/src/components/input-email.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/default/src/components/input-file.scss b/packages/themes/default/src/components/input-file.scss index db68899242..9ec227b8a9 100644 --- a/packages/themes/default/src/components/input-file.scss +++ b/packages/themes/default/src/components/input-file.scss @@ -1,8 +1,9 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; +@import '../mixins/rem'; @layer kol-theme-component { .kol-input .input input[type='file'] { - padding-top: calc(0.5em + 2px); + padding-top: calc(0.5em + rem(2)); } input[type='file'] { diff --git a/packages/themes/default/src/components/input-number.scss b/packages/themes/default/src/components/input-number.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/default/src/components/input-number.scss +++ b/packages/themes/default/src/components/input-number.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/default/src/components/input-password.scss b/packages/themes/default/src/components/input-password.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/default/src/components/input-password.scss +++ b/packages/themes/default/src/components/input-password.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/default/src/components/input-radio.scss b/packages/themes/default/src/components/input-radio.scss index bd96c6175e..5da383a8ec 100644 --- a/packages/themes/default/src/components/input-radio.scss +++ b/packages/themes/default/src/components/input-radio.scss @@ -1,6 +1,7 @@ @import '../mixins/rem'; -@import '../mixins/alert-wc.scss'; +@import '../mixins/alert-wc'; @import '../mixins/input-error'; +@import '../mixins/typography'; @layer kol-theme-component { :host { @@ -20,15 +21,15 @@ cursor: pointer; width: 100%; border-color: var(--color-subtle); - border-width: 2px; + border-width: rem(2); border-style: solid; - border-radius: 5px; + border-radius: rem(5); line-height: 1.5; } input:hover { border-color: var(--color-primary); - box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24); + box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); } input:focus:hover { @@ -50,9 +51,9 @@ /* RADIO */ fieldset { - border: 0px; - margin: 0px; - padding: 0px; + border: 0; + margin: 0; + padding: 0; display: grid; gap: 0.25em; } @@ -110,8 +111,7 @@ .hint { order: 4; - font-size: rem(14.4); - font-style: italic; + @include kol-typography-hint; } fieldset legend { @@ -126,8 +126,7 @@ .kol-input .hint { order: 3; - font-size: rem(14.4); - font-style: italic; + @include kol-typography-hint; } fieldset.error:not(.hidden-error) { @@ -141,6 +140,7 @@ textarea:focus { outline-color: var(--color-danger); } + .kol-alert-wc.error { margin-left: -0.25em; } diff --git a/packages/themes/default/src/components/input-range.scss b/packages/themes/default/src/components/input-range.scss index 765c8575f2..086a6a6497 100644 --- a/packages/themes/default/src/components/input-range.scss +++ b/packages/themes/default/src/components/input-range.scss @@ -1,6 +1,7 @@ @import '../mixins/rem'; -@import '../mixins/alert-wc.scss'; +@import '../mixins/alert-wc'; @import '../mixins/input-error'; +@import '../mixins/typography'; @layer kol-theme-component { :host { @@ -30,8 +31,7 @@ .kol-input .hint { order: 4; - font-size: rem(14.4); - font-style: italic; + @include kol-typography-hint; } input::placeholder { @@ -43,7 +43,7 @@ border-color: var(--color-subtle); border-radius: var(--border-radius); border-style: solid; - border-width: 2px; + border-width: rem(2); padding: 0 rem(8); } diff --git a/packages/themes/default/src/components/input-text.scss b/packages/themes/default/src/components/input-text.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/default/src/components/input-text.scss +++ b/packages/themes/default/src/components/input-text.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/default/src/components/link-button.scss b/packages/themes/default/src/components/link-button.scss index a7b4943684..136f781e92 100644 --- a/packages/themes/default/src/components/link-button.scss +++ b/packages/themes/default/src/components/link-button.scss @@ -11,7 +11,7 @@ :is(a, button):focus .kol-span-wc { outline-color: var(--color-primary-variant); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; outline-width: calc(var(--border-width) * 2); transition: outline-offset 0.2s linear; @@ -24,7 +24,7 @@ outline-width: calc(var(--border-width) * 2); min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: 8px 14px; + padding: rem(8) rem(14); text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; @@ -74,7 +74,7 @@ .ghost :is(a, button):hover > .kol-span-wc { background-color: var(--color-primary-variant); border-color: var(--color-primary-variant); - box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24); + box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); color: var(--color-light); } @@ -133,7 +133,7 @@ .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span { background-color: var(--color-primary-variant); border-color: var(--color-primary-variant); - box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24); + box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); color: var(--color-light); } diff --git a/packages/themes/default/src/components/link.scss b/packages/themes/default/src/components/link.scss index 5cd0838bc7..47c3428892 100644 --- a/packages/themes/default/src/components/link.scss +++ b/packages/themes/default/src/components/link.scss @@ -1,4 +1,4 @@ -@import '../mixins/link.scss'; +@import '../mixins/link'; @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..3c7813a7d0 100644 --- a/packages/themes/default/src/components/nav.scss +++ b/packages/themes/default/src/components/nav.scss @@ -28,7 +28,7 @@ text-decoration: none; .vertical & { - border-left: 2px solid transparent; + border-left: rem(2) solid transparent; padding-left: rem(8); } diff --git a/packages/themes/default/src/components/pagination.scss b/packages/themes/default/src/components/pagination.scss index 5666fb4250..ab8bfad6fb 100644 --- a/packages/themes/default/src/components/pagination.scss +++ b/packages/themes/default/src/components/pagination.scss @@ -1,9 +1,11 @@ @import '../mixins/focus-outline'; +@import '../mixins/rem'; @layer kol-theme-component { :host { font-family: var(--font-family); } + .button:focus { outline: none; } @@ -11,12 +13,12 @@ .button-inner { background-color: var(--color-light); border-radius: var(--border-radius); - border: 1px solid var(--color-primary); + border: rem(1) solid var(--color-primary); color: var(--color-primary); font-weight: 700; min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: 8px; + padding: rem(8); text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; @@ -29,7 +31,7 @@ .button:is(:active, :hover):not(:disabled) .button-inner { background-color: var(--color-primary-variant); border-color: var(--color-primary-variant); - box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24); + box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); color: var(--color-light); } diff --git a/packages/themes/default/src/components/progress.scss b/packages/themes/default/src/components/progress.scss index d9d6708331..a7925803c3 100644 --- a/packages/themes/default/src/components/progress.scss +++ b/packages/themes/default/src/components/progress.scss @@ -1,19 +1,24 @@ +@import '../mixins/rem'; + @layer kol-theme-component { :host { font-family: var(--font-family); } + :host progress, :host span { display: block; - height: 0px; + height: 0; overflow: hidden; - width: 0px; + width: 0; } + :host svg line:first-child, :host svg circle:first-child { fill: transparent; stroke: var(--color-mute-variant); } + :host svg line:last-child, :host svg circle:last-child { fill: transparent; diff --git a/packages/themes/default/src/components/select.scss b/packages/themes/default/src/components/select.scss index b185935592..5ffb1a1dd1 100644 --- a/packages/themes/default/src/components/select.scss +++ b/packages/themes/default/src/components/select.scss @@ -1,5 +1,5 @@ -@use '../@shared/input-core.scss'; -@import '../mixins/rem.scss'; +@import '../@shared/input-core'; +@import '../mixins/rem'; @layer kol-theme-component { .input > .kol-icon { @@ -14,7 +14,7 @@ } option { - margin: 1px 0; + margin: rem(1) 0; border-radius: var(--border-radius); cursor: pointer; diff --git a/packages/themes/default/src/components/single-select.scss b/packages/themes/default/src/components/single-select.scss index de5d3769b7..7209616b99 100644 --- a/packages/themes/default/src/components/single-select.scss +++ b/packages/themes/default/src/components/single-select.scss @@ -1,6 +1,7 @@ @import '../mixins/rem'; -@import '../mixins/alert-wc.scss'; +@import '../mixins/alert-wc'; @import '../mixins/input-error'; +@import '../mixins/typography'; $option-height: rem(40); $visible-options: 5; @@ -52,10 +53,10 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: 1px; + border-width: rem(1); border-radius: var(--border-radius); border-color: var(--color-subtle); - max-height: calc($option-height * $visible-options + 2px); + max-height: calc($option-height * $visible-options + rem(2)); overflow-y: auto; overflow-x: hidden; width: 100%; @@ -103,8 +104,7 @@ $visible-options: 5; .kol-input .hint { order: 5; - font-size: rem(14.4); - font-style: italic; + @include kol-typography-hint; } input::placeholder { @@ -116,7 +116,7 @@ $visible-options: 5; border-color: var(--color-subtle); border-radius: var(--border-radius); border-style: solid; - border-width: 2px; + border-width: rem(2); padding: 0 rem(8); } diff --git a/packages/themes/default/src/components/skip-nav.scss b/packages/themes/default/src/components/skip-nav.scss index d5a51946f0..61cfc7d623 100644 --- a/packages/themes/default/src/components/skip-nav.scss +++ b/packages/themes/default/src/components/skip-nav.scss @@ -11,7 +11,7 @@ border-width: var(--border-width); gap: calc(var(--spacing) * 2); line-height: 1; - padding: 8px 14px; + padding: rem(8) rem(14); background-color: var(--color-primary-variant); border-color: var(--color-primary-variant); color: var(--color-light); diff --git a/packages/themes/default/src/components/split-button.scss b/packages/themes/default/src/components/split-button.scss index 37e05728a1..6f12d858d0 100644 --- a/packages/themes/default/src/components/split-button.scss +++ b/packages/themes/default/src/components/split-button.scss @@ -1,4 +1,5 @@ -@import '../mixins/button.scss'; +@import '../mixins/button'; +@import '../mixins/rem'; @layer kol-theme-component { :host { @@ -21,8 +22,8 @@ .horizontal-line { background-color: var(--color-primary); - border-radius: 2px; - width: 1px; + border-radius: rem(2); + width: rem(1); } :is(a, button) > .kol-span-wc { @@ -31,7 +32,7 @@ border-bottom-left-radius: var(--border-radius); min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: 8px 14px; + padding: rem(8) rem(14); text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; diff --git a/packages/themes/default/src/components/table-stateless.scss b/packages/themes/default/src/components/table-stateless.scss index 04772a2b6c..c74a51d65e 100644 --- a/packages/themes/default/src/components/table-stateless.scss +++ b/packages/themes/default/src/components/table-stateless.scss @@ -1,4 +1,3 @@ -@import '../mixins/rem'; @import '../mixins/kol-table-stateless-wc'; @include kol-table-stateless-wc; diff --git a/packages/themes/default/src/components/tabs.scss b/packages/themes/default/src/components/tabs.scss index fe8c56f0ae..e6236b86dd 100644 --- a/packages/themes/default/src/components/tabs.scss +++ b/packages/themes/default/src/components/tabs.scss @@ -18,7 +18,7 @@ border-radius: var(--border-radius); font-style: normal; font-weight: 700; - font-size: 18px; + font-size: rem(18); line-height: 1.2; min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); @@ -97,11 +97,11 @@ } :host > .tabs-align-bottom > .tabs-button-group > div > div:first-child { - margin: 0px rem(16) 0px 0px; + margin: 0 rem(16) 0 0; } :host > .tabs-align-bottom > .tabs-button-group > div > div { - margin: 0px rem(16); + margin: 0 rem(16); } :host > .tabs-align-top { @@ -118,11 +118,11 @@ } :host > .tabs-align-top > .tabs-button-group > div > div:first-child { - margin: 0px rem(16) 0px 0px; + margin: 0 rem(16) 0 0; } :host > .tabs-align-top > .tabs-button-group > div > div { - margin: 0px rem(16); + margin: 0 rem(16); } :host > div { diff --git a/packages/themes/default/src/components/textarea.scss b/packages/themes/default/src/components/textarea.scss index cad8c364ca..63b47ab20d 100644 --- a/packages/themes/default/src/components/textarea.scss +++ b/packages/themes/default/src/components/textarea.scss @@ -1,6 +1,7 @@ @import '../mixins/rem'; -@import '../mixins/alert-wc.scss'; +@import '../mixins/alert-wc'; @import '../mixins/input-error'; +@import '../mixins/typography'; @layer kol-theme-component { :host { @@ -30,8 +31,7 @@ .kol-input .hint { order: 5; - font-size: rem(14.4); - font-style: italic; + @include kol-typography-hint; } textarea { @@ -47,7 +47,7 @@ border-color: var(--color-subtle); border-radius: var(--border-radius); border-style: solid; - border-width: 2px; + border-width: rem(2); padding: 0 rem(8); } diff --git a/packages/themes/default/src/components/toast-container.scss b/packages/themes/default/src/components/toast-container.scss index ad6afafa5a..b63c4a4276 100644 --- a/packages/themes/default/src/components/toast-container.scss +++ b/packages/themes/default/src/components/toast-container.scss @@ -1,11 +1,11 @@ @import '../mixins/rem'; -@import '../mixins/alert-wc.scss'; +@import '../mixins/alert-wc'; @layer kol-theme-component { :host { top: rem(16); right: rem(16); - width: 440px; + width: rem(440); } .toast { diff --git a/packages/themes/default/src/components/toolbar.scss b/packages/themes/default/src/components/toolbar.scss index b628371a7d..368702dbed 100644 --- a/packages/themes/default/src/components/toolbar.scss +++ b/packages/themes/default/src/components/toolbar.scss @@ -1,6 +1,8 @@ +@import '../mixins/rem'; + @layer kol-theme-component { .toolbar { - padding: 8px 14px; + padding: rem(8) rem(14); border-radius: var(--border-radius); background-color: var(--color-light); border-width: var(--border-width); diff --git a/packages/themes/default/src/components/tree-item.scss b/packages/themes/default/src/components/tree-item.scss index e94d7f6b31..551edad846 100644 --- a/packages/themes/default/src/components/tree-item.scss +++ b/packages/themes/default/src/components/tree-item.scss @@ -3,11 +3,11 @@ @layer kol-theme-component { .tree-link { display: block; - border: 1px solid transparent; + border: rem(1) solid transparent; &:hover, &:focus-within { - border: 1px solid var(--color-primary); + border: rem(1) solid var(--color-primary); background-color: var(--color-primary-variant); & > a { diff --git a/packages/themes/default/src/components/tree.scss b/packages/themes/default/src/components/tree.scss index f8d8f1fca6..25bfdab71a 100644 --- a/packages/themes/default/src/components/tree.scss +++ b/packages/themes/default/src/components/tree.scss @@ -3,7 +3,7 @@ @layer kol-theme-component { .tree { ul { - border: 2px solid transparent; + border: rem(2) solid transparent; border-radius: var(--border-radius); } @@ -11,7 +11,7 @@ outline: 0; ul { - border: 2px solid var(--color-primary); + border: rem(2) solid var(--color-primary); } } } diff --git a/packages/themes/default/src/global.scss b/packages/themes/default/src/global.scss index 63f010b4e6..1689798b20 100644 --- a/packages/themes/default/src/global.scss +++ b/packages/themes/default/src/global.scss @@ -2,11 +2,11 @@ @layer kol-theme-global { :host { - --border-radius: var(--kolibri-border-radius, 5px); + --border-radius: var(--kolibri-border-radius, rem(5)); --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif); - --font-size: var(--kolibri-font-size, 16px); + --font-size: var(--kolibri-font-size, rem(16)); --spacing: var(--kolibri-spacing, #{rem(4)}); - --border-width: var(--kolibri-border-width, 1px); + --border-width: var(--kolibri-border-width, rem(1)); --color-primary: var(--kolibri-color-primary, #004b76); --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6); --color-danger: var(--kolibri-color-danger, #b4003c); @@ -39,9 +39,9 @@ summary:focus { cursor: pointer; outline-color: var(--color-primary-variant); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 3px; + outline-width: rem(3); transition: outline-offset 0.2s linear; } diff --git a/packages/themes/default/src/mixins/alert-wc.scss b/packages/themes/default/src/mixins/alert-wc.scss index d8c26a0f70..5061fecd68 100644 --- a/packages/themes/default/src/mixins/alert-wc.scss +++ b/packages/themes/default/src/mixins/alert-wc.scss @@ -153,7 +153,7 @@ .card { border-width: var(--border-width); border-style: solid; - filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24)); + filter: drop-shadow(0 rem(2) rem(4) rgba(8, 35, 48, 0.24)); flex-direction: column; } @@ -174,7 +174,7 @@ .card > .heading .heading-icon { justify-self: right; - margin-top: -4px; + margin-top: rem(-4); } .card > .heading .kol-heading-wc { diff --git a/packages/themes/default/src/mixins/button.scss b/packages/themes/default/src/mixins/button.scss index 03c99d72b0..59fb934d34 100644 --- a/packages/themes/default/src/mixins/button.scss +++ b/packages/themes/default/src/mixins/button.scss @@ -54,7 +54,7 @@ .ghost :is(a, button):hover > .kol-span-wc { background-color: var(--color-primary-variant); border-color: var(--color-primary-variant); - box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24); + box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); color: var(--color-light); } @@ -113,7 +113,7 @@ .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span { background-color: var(--color-primary-variant); border-color: var(--color-primary-variant); - box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24); + box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); color: var(--color-light); } @@ -127,7 +127,7 @@ .access-key-hint { background-color: var(--color-mute-variant); - border-radius: 3px; + border-radius: rem(3); color: var(--color-text); padding: 0 0.3em; } diff --git a/packages/themes/default/src/mixins/focus-outline.scss b/packages/themes/default/src/mixins/focus-outline.scss index 7256a3fb94..6ce314ae85 100644 --- a/packages/themes/default/src/mixins/focus-outline.scss +++ b/packages/themes/default/src/mixins/focus-outline.scss @@ -1,6 +1,8 @@ +@import 'rem'; + @mixin focus-outline { border-radius: var(--border-radius); - outline-offset: 2px; - outline: var(--color-primary-variant) solid 3px; + outline-offset: rem(2); + outline: var(--color-primary-variant) solid rem(3); transition: 200ms outline-offset linear; } diff --git a/packages/themes/default/src/mixins/indented-text.scss b/packages/themes/default/src/mixins/indented-text.scss index 9cefc3256f..d367995703 100644 --- a/packages/themes/default/src/mixins/indented-text.scss +++ b/packages/themes/default/src/mixins/indented-text.scss @@ -1,9 +1,9 @@ -@import '../mixins/rem'; +@import 'rem'; @mixin indented-text { font-family: var(--font-family); - border-left: 2px solid var(--color-primary-variant); + border-left: rem(2) solid var(--color-primary-variant); padding: 0 rem(18) 0 rem(8); - margin-left: -2px; + margin-left: rem(-2); width: 100%; } diff --git a/packages/themes/default/src/mixins/input-error.scss b/packages/themes/default/src/mixins/input-error.scss index 8a2952fc51..4fa0884ba9 100644 --- a/packages/themes/default/src/mixins/input-error.scss +++ b/packages/themes/default/src/mixins/input-error.scss @@ -1,8 +1,8 @@ -@import '../mixins/rem'; -@import '../mixins/alert-wc.scss'; +@import 'rem'; +@import '../mixins/alert-wc'; @mixin input-error { - border-left: 3px solid var(--color-danger); + border-left: rem(3) solid var(--color-danger); padding-left: rem(16); .input:focus-within { 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 29bbc4b1df..d212ee18f1 100644 --- a/packages/themes/default/src/mixins/kol-table-stateless-wc.scss +++ b/packages/themes/default/src/mixins/kol-table-stateless-wc.scss @@ -38,9 +38,9 @@ &:has(.focus-element:focus) { outline-color: var(--color-primary-variant); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 3px; + outline-width: rem(3); transition: outline-offset 0.2s linear; } } @@ -104,15 +104,15 @@ input { &:hover { border-color: var(--color-primary); - box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24); + box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); } &:focus { border-color: var(--color-primary); outline-color: var(--color-primary-variant); outline-style: solid; - outline-offset: 2px; - outline-width: 3px; + outline-offset: rem(2); + outline-width: rem(3); } &:focus:hover { @@ -123,7 +123,7 @@ // CHECKBOX input[type='checkbox'] { border-color: var(--color-subtle); - border-radius: 5px; + border-radius: rem(5); &:checked { background-color: var(--color-primary); diff --git a/packages/themes/default/src/mixins/link.scss b/packages/themes/default/src/mixins/link.scss index 49cb01143b..108b4ad70f 100644 --- a/packages/themes/default/src/mixins/link.scss +++ b/packages/themes/default/src/mixins/link.scss @@ -1,3 +1,5 @@ +@import 'rem'; + @mixin kol-link { :is(a, button) { color: var(--color-primary); @@ -27,7 +29,7 @@ } .skip { - left: -99999px; + left: rem(-99999); overflow: hidden; position: absolute; z-index: 9999999; diff --git a/packages/themes/default/src/mixins/typography.scss b/packages/themes/default/src/mixins/typography.scss new file mode 100644 index 0000000000..760c928ac2 --- /dev/null +++ b/packages/themes/default/src/mixins/typography.scss @@ -0,0 +1,32 @@ +@import 'rem'; + +@mixin kol-typography-body { + font-size: rem(16); + line-height: 1.5; +} + +@mixin kol-typography-h1 { + font-size: rem(24); + line-height: 1.25; +} + +@mixin kol-typography-h2 { + font-size: rem(20); + line-height: 1.143; +} + +@mixin kol-typography-h3 { + font-size: rem(18); + line-height: 1.1667; +} + +@mixin kol-typography-accordion { + font-weight: 700; + font-size: rem(18); + line-height: 1.1; +} + +@mixin kol-typography-hint { + font-size: rem(14.4); + font-style: italic; +} 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 433d6165aa..9558b9a81f 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.scss'; +@import '../mixins/alert-wc'; @layer kol-theme-component { :host { @@ -16,21 +16,21 @@ select, textarea { border: none; - margin: 1px; + margin: rem(1); outline: none; } input, select:not([multiple]) { - height: 44px; - min-height: 44px; + height: rem(44); + min-height: rem(44); } input:not([type='range']):focus, select:focus, textarea:focus { - border-top: 1px solid var(--color-blue); - border-bottom: 1px solid var(--color-blue); + border-top: rem(1) solid var(--color-blue); + border-bottom: rem(1) solid var(--color-blue); } label { @@ -49,12 +49,12 @@ } .input { - min-height: 44px; - border: 1px solid var(--color-grey-75); + min-height: rem(44); + border: rem(1) solid var(--color-grey-75); color: var(--color-grey); order: 4; align-items: center; - padding: 1px 0.5em; + padding: rem(1) 0.5em; } input::placeholder, @@ -64,8 +64,8 @@ .input:focus-within { box-shadow: - inset 1px 1px var(--color-blue), - inset -1px -1px var(--color-blue); + inset rem(1) rem(1) var(--color-blue), + inset rem(-1) rem(-1) var(--color-blue); outline: none; } diff --git a/packages/themes/ecl/src/ecl-ec/components/abbr.scss b/packages/themes/ecl/src/ecl-ec/components/abbr.scss index a0cf8146d5..7d2b7f0a24 100644 --- a/packages/themes/ecl/src/ecl-ec/components/abbr.scss +++ b/packages/themes/ecl/src/ecl-ec/components/abbr.scss @@ -1,6 +1,8 @@ +@import '../../mixins/rem'; + @layer kol-theme-component { abbr { - border-bottom: dashed var(--color-text) 1px; + border-bottom: dashed var(--color-text) rem(1); text-decoration: none; } } diff --git a/packages/themes/ecl/src/ecl-ec/components/accordion.scss b/packages/themes/ecl/src/ecl-ec/components/accordion.scss index bc12f5694e..4c4f98fea7 100644 --- a/packages/themes/ecl/src/ecl-ec/components/accordion.scss +++ b/packages/themes/ecl/src/ecl-ec/components/accordion.scss @@ -10,7 +10,7 @@ background-color: var(--color-grey-5); border-color: var(--color-grey-25); border-style: solid; - border-width: 1px; + border-width: rem(1); &__heading-button { button { @@ -35,8 +35,8 @@ } &:focus { - outline: 2px solid var(--color-blue); - outline-offset: -2px; + outline: rem(2) solid var(--color-blue); + outline-offset: rem(-2); } } diff --git a/packages/themes/ecl/src/ecl-ec/components/alert.scss b/packages/themes/ecl/src/ecl-ec/components/alert.scss index 0f1fcfe8ca..9abedf547e 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.scss'; +@import '../mixins/alert-wc'; @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 f9add3efba..066c9d61ba 100644 --- a/packages/themes/ecl/src/ecl-ec/components/badge.scss +++ b/packages/themes/ecl/src/ecl-ec/components/badge.scss @@ -3,7 +3,7 @@ @layer kol-theme-component { :host > span { font: normal normal var(--font-weight) 1em var(--font-family); - padding: calc(rem(8) - 1px) calc(rem(12) - 1px); + padding: calc(rem(8) - rem(1)) calc(rem(12) - rem(1)); text-transform: uppercase; } } 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 518b75e1ee..d3db6889af 100644 --- a/packages/themes/ecl/src/ecl-ec/components/button-link.scss +++ b/packages/themes/ecl/src/ecl-ec/components/button-link.scss @@ -1,3 +1,5 @@ +@import '../../mixins/rem'; + @layer kol-theme-component { :is(a, button) { color: var(--color-primary); @@ -27,7 +29,7 @@ } .skip { - left: -99999px; + left: rem(-99999); overflow: hidden; position: absolute; z-index: 9999999; @@ -41,7 +43,7 @@ .access-key-hint { background-color: var(--color-mute-variant); - border-radius: 3px; + border-radius: rem(3); color: var(--color-text); padding: 0 0.3em; } diff --git a/packages/themes/ecl/src/ecl-ec/components/button.scss b/packages/themes/ecl/src/ecl-ec/components/button.scss index 770d9bdc83..d30303deee 100644 --- a/packages/themes/ecl/src/ecl-ec/components/button.scss +++ b/packages/themes/ecl/src/ecl-ec/components/button.scss @@ -1,4 +1,5 @@ -@import '../mixins/button.scss'; +@import '../mixins/button'; +@import '../../mixins/rem'; @layer kol-theme-component { :host { @@ -9,11 +10,11 @@ button .kol-span-wc { border-radius: 0; border-style: solid; - border-width: 2px; + border-width: rem(2); font-weight: var(--font-weight-bold); margin: 0; - min-height: 44px; - min-width: 44px; + min-height: rem(44); + min-width: rem(44); padding: 0.25em 0.75em; line-height: 1.2; } diff --git a/packages/themes/ecl/src/ecl-ec/components/card.scss b/packages/themes/ecl/src/ecl-ec/components/card.scss index cfd6f57d82..9e5aab2c40 100644 --- a/packages/themes/ecl/src/ecl-ec/components/card.scss +++ b/packages/themes/ecl/src/ecl-ec/components/card.scss @@ -1,3 +1,5 @@ +@import '../../mixins/rem'; + @layer kol-theme-component { :host { font-family: var(--font-family); @@ -34,6 +36,6 @@ } :host > div > div.content + div.footer { - border-top: 2px solid var(--color-blue); + border-top: rem(2) solid var(--color-blue); } } diff --git a/packages/themes/ecl/src/ecl-ec/components/combobox.scss b/packages/themes/ecl/src/ecl-ec/components/combobox.scss index 60446058b0..5d8cfcd17f 100644 --- a/packages/themes/ecl/src/ecl-ec/components/combobox.scss +++ b/packages/themes/ecl/src/ecl-ec/components/combobox.scss @@ -20,11 +20,11 @@ $visible-options: 5; min-height: var(--a11y-min-size); text-align: left; width: 100%; - min-height: 44px; + min-height: rem(44); color: var(--color-grey); order: 4; align-items: center; - padding: 1px 0.5em; + padding: rem(1) 0.5em; } &__input { @@ -59,13 +59,13 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: 1px; + border-width: rem(1); border-color: var(--color-blue); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; width: 100%; - max-height: calc($option-height * $visible-options + 2px); + max-height: calc($option-height * $visible-options + rem(2)); } &__item { @@ -98,8 +98,8 @@ $visible-options: 5; input:not([type='range']):focus, select:focus, textarea:focus { - border-top: 1px solid var(--color-blue); - border-bottom: 1px solid var(--color-blue); + border-top: rem(1) solid var(--color-blue); + border-bottom: rem(1) solid var(--color-blue); } label { @@ -118,11 +118,11 @@ $visible-options: 5; } .input { - border: 1px solid var(--color-grey-75); + border: rem(1) solid var(--color-grey-75); color: var(--color-grey); order: 4; align-items: center; - padding: 1px; + padding: rem(1); } input::placeholder, @@ -132,8 +132,8 @@ $visible-options: 5; .input:focus-within { box-shadow: - inset 1px 1px var(--color-blue), - inset -1px -1px var(--color-blue); + inset rem(1) rem(1) var(--color-blue), + inset rem(-1) rem(-1) var(--color-blue); outline: none; } diff --git a/packages/themes/ecl/src/ecl-ec/components/form.scss b/packages/themes/ecl/src/ecl-ec/components/form.scss index 585baf3185..6d39a7d905 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.scss'; -@import '../mixins/indented-text.scss'; -@import '../mixins/link.scss'; +@import '../mixins/alert-wc'; +@import '../mixins/indented-text'; +@import '../mixins/link'; @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 bb0a099725..8e03819b13 100644 --- a/packages/themes/ecl/src/ecl-ec/components/heading.scss +++ b/packages/themes/ecl/src/ecl-ec/components/heading.scss @@ -1,29 +1,31 @@ @import '../../mixins/rem'; +@import '../mixins/typography'; @layer kol-theme-component { :host { font-family: var(--font-family); } + .headline-h1 { - font-size: rem(32); - line-height: 1.25; + @include kol-typography-h1; } + .headline-h2 { - font-size: rem(28); - line-height: 1.143; + @include kol-typography-h2; } + .headline-h3 { - font-size: rem(24); - line-height: 1.1667; + @include kol-typography-h3; } + .headline-h4 { - font-size: rem(20); - line-height: 1.4; + @include kol-typography-h4; } + .headline-h5 { - font-size: rem(16); - line-height: 1.5; + @include kol-typography-h5; } + .headline-h6 { color: rgb(234, 0, 255); } 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 e99e151bf4..f9a5237c48 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.scss'; +@import '../mixins/indented-text'; @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 e680ec15f1..d8ebddf9fb 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.scss'; +@import '../mixins/alert-wc'; @layer kol-theme-component { :host { @@ -17,7 +17,7 @@ input[type='checkbox'] { background-color: var(--color-white); - border-width: 2px; + border-width: rem(2); border-style: solid; color: var(--color-grey); line-height: 1.5; @@ -26,9 +26,9 @@ input[type='checkbox']:focus { outline-color: var(--color-blue); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 2px; + outline-width: rem(2); } input[type='checkbox'] { @@ -144,8 +144,8 @@ .button:focus-within { outline-color: var(--color-blue); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 2px; + outline-width: rem(2); } } 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 e260b11da8..c6a8cf8a92 100644 --- a/packages/themes/ecl/src/ecl-ec/components/input-radio.scss +++ b/packages/themes/ecl/src/ecl-ec/components/input-radio.scss @@ -1,5 +1,6 @@ @import '../../mixins/rem'; -@import '../mixins/alert-wc.scss'; +@import '../mixins/alert-wc'; +@import '../mixins/typography'; @layer kol-theme-component { :host { @@ -24,8 +25,7 @@ fieldset .hint { order: 4; - font-size: rem(14.4); - font-style: italic; + @include kol-typography-hint; } fieldset .kol-alert-wc { @@ -39,8 +39,7 @@ fieldset .kol-input .hint { order: 3; - font-size: rem(14.4); - font-style: italic; + @include kol-typography-hint; } .radio-input-wrapper { @@ -58,7 +57,7 @@ } input[type='radio'] { - border: 2px solid var(--color-grey-75); + border: rem(2) solid var(--color-grey-75); } input[type='radio']:before { @@ -67,12 +66,12 @@ input[type='radio']:checked { border-color: var(--color-blue); - border-width: 7px; + border-width: rem(7); } input[type='radio']:focus { - outline: 2px solid var(--color-blue); - outline-offset: 2px; + outline: rem(2) solid var(--color-blue); + outline-offset: rem(2); } input[type='radio']:not(:disabled):hover { @@ -89,7 +88,7 @@ } .error input[type='radio'] { - border: 2px solid var(--color-red); + border: rem(2) solid var(--color-red); } .error input[type='radio']:before { @@ -98,7 +97,7 @@ .error input[type='radio']:checked { border-color: var(--color-red); - border-width: 7px; + border-width: rem(7); } .error input[type='radio']:not(:disabled):hover { 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/ecl/src/ecl-ec/components/link.scss b/packages/themes/ecl/src/ecl-ec/components/link.scss index 72e9da2c4d..a612e4a58d 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.scss'; +@import '../mixins/link'; @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 5296b30050..dcbfce6619 100644 --- a/packages/themes/ecl/src/ecl-ec/components/nav.scss +++ b/packages/themes/ecl/src/ecl-ec/components/nav.scss @@ -8,8 +8,8 @@ .list { display: flex; list-style: none; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; } .list.vertical { @@ -46,9 +46,9 @@ .kol-span-wc { border-color: transparent; border-style: solid; - border-width: 2px; + border-width: rem(2); color: var(--color-white); - font-size: 18px; + font-size: rem(18); justify-items: start; padding: rem(16); height: 100%; @@ -59,7 +59,7 @@ border-color: var(--color-blue-75); border-style: solid; border-width: 0; - border-top-width: 2px; + border-top-width: rem(2); } a { diff --git a/packages/themes/ecl/src/ecl-ec/components/pagination.scss b/packages/themes/ecl/src/ecl-ec/components/pagination.scss index 1acbded00e..0b3f5a09d3 100644 --- a/packages/themes/ecl/src/ecl-ec/components/pagination.scss +++ b/packages/themes/ecl/src/ecl-ec/components/pagination.scss @@ -1,3 +1,5 @@ +@import '../../mixins/rem'; + @layer kol-theme-component { :host { display: grid; @@ -13,7 +15,7 @@ .button-inner { background-color: var(--color-yellow); - border: 2px solid var(--color-yellow); + border: rem(2) solid var(--color-yellow); color: var(--color-black); font-weight: var(--font-weight-bold); min-height: var(--a11y-min-size); @@ -27,8 +29,8 @@ } .button:focus .button-inner { - outline-offset: -4px; - outline: 2px solid var(--color-black); + outline-offset: rem(-4); + outline: rem(2) solid var(--color-black); } .button:disabled .button-inner { diff --git a/packages/themes/ecl/src/ecl-ec/components/progress.scss b/packages/themes/ecl/src/ecl-ec/components/progress.scss index aa4391e626..0d17c864b5 100644 --- a/packages/themes/ecl/src/ecl-ec/components/progress.scss +++ b/packages/themes/ecl/src/ecl-ec/components/progress.scss @@ -1,24 +1,30 @@ +@import '../../mixins/rem'; + @layer kol-theme-component { :host { font-family: var(--font-family); } + :host progress, :host span { display: block; - height: 0px; + height: 0; overflow: hidden; - width: 0px; + width: 0; } + svg line:first-child, svg circle:first-child { fill: transparent; stroke: var(--color-grey-25); } + svg line:last-child, svg circle:last-child { stroke: var(--color-blue-130); fill: transparent; } + progress { display: none; } diff --git a/packages/themes/ecl/src/ecl-ec/components/select.scss b/packages/themes/ecl/src/ecl-ec/components/select.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/ecl/src/ecl-ec/components/select.scss +++ b/packages/themes/ecl/src/ecl-ec/components/select.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 d68249410d..8dfc7c6c96 100644 --- a/packages/themes/ecl/src/ecl-ec/components/single-select.scss +++ b/packages/themes/ecl/src/ecl-ec/components/single-select.scss @@ -18,11 +18,11 @@ $visible-options: 5; display: inline-flex; text-align: left; width: 100%; - min-height: 44px; + min-height: rem(44); color: var(--color-grey); order: 4; align-items: center; - padding: 1px 0.5em; + padding: rem(1) 0.5em; } &__input { @@ -61,9 +61,9 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: 1px; + border-width: rem(1); border-color: var(--color-blue); - max-height: calc($option-height * $visible-options + 2px); + max-height: calc($option-height * $visible-options + rem(1)); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; @@ -104,8 +104,8 @@ $visible-options: 5; input:not([type='range']):focus, select:focus, textarea:focus { - border-top: 1px solid var(--color-blue); - border-bottom: 1px solid var(--color-blue); + border-top: rem(1) solid var(--color-blue); + border-bottom: rem(1) solid var(--color-blue); } label { @@ -124,11 +124,11 @@ $visible-options: 5; } .input { - border: 1px solid var(--color-grey-75); + border: rem(1) solid var(--color-grey-75); color: var(--color-grey); order: 4; align-items: center; - padding: 1px; + padding: rem(1); } input::placeholder, @@ -138,8 +138,8 @@ $visible-options: 5; .input:focus-within { box-shadow: - inset 1px 1px var(--color-blue), - inset -1px -1px var(--color-blue); + inset rem(1) rem(1) var(--color-blue), + inset rem(-1) rem(-1) var(--color-blue); outline: none; } 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..83deaea53d 100644 --- a/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss +++ b/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss @@ -8,7 +8,7 @@ .kol-link-wc > a > .kol-span-wc { border-radius: 0; border-style: solid; - border-width: 2px; + border-width: rem(2); font-weight: var(--font-weight-bold); gap: rem(8); line-height: 1; 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 5c7439c081..569a37f937 100644 --- a/packages/themes/ecl/src/ecl-ec/components/split-button.scss +++ b/packages/themes/ecl/src/ecl-ec/components/split-button.scss @@ -1,11 +1,12 @@ -@import '../mixins/button.scss'; +@import '../mixins/button'; +@import '../../mixins/rem'; @layer kol-theme-component { :host { font-family: var(--font-family); border-radius: 0; border-style: solid; - border-width: 2px; + border-width: rem(2); border-color: var(--color-blue); } @@ -15,15 +16,15 @@ .horizontal-line { border: 0; - border-top: 1px solid var(--color-blue); + border-top: rem(1) solid var(--color-blue); } a .kol-span-wc, button .kol-span-wc { font-weight: var(--font-weight-bold); margin: 0; - min-height: 44px; - min-width: 44px; + min-height: rem(44); + min-width: rem(44); padding: 0.25em 0.75em; } diff --git a/packages/themes/ecl/src/ecl-ec/components/tabs.scss b/packages/themes/ecl/src/ecl-ec/components/tabs.scss index 2906ad6263..cf163fc647 100644 --- a/packages/themes/ecl/src/ecl-ec/components/tabs.scss +++ b/packages/themes/ecl/src/ecl-ec/components/tabs.scss @@ -7,28 +7,28 @@ } .tabs-button-group { - border-bottom: 1px solid var(--color-grey-25); - margin-bottom: -1px; + border-bottom: rem(1) solid var(--color-grey-25); + margin-bottom: rem(-1); } .tabs-button-group button { border: none; - margin-bottom: -1px; + margin-bottom: rem(-1); } .tabs-button-group button .kol-span-wc { padding: rem(8); - min-height: 44px; - min-width: 44px; + min-height: rem(44); + min-width: rem(44); } .tabs-button-group button.selected .kol-span-wc { border-color: var(--color-grey-25); border-style: solid; - border-width: 1px; + border-width: rem(1); border-bottom-color: white; border-top-color: var(--color-blue); - box-shadow: 0 -3px var(--color-blue); + box-shadow: 0 rem(-3) var(--color-blue); font-weight: var(--font-weight-bold); color: var(--color-blue); } @@ -40,6 +40,6 @@ .tabs-button-group button:focus .kol-span-wc { outline-color: var(--color-blue-130); outline-style: solid; - outline-width: 2px; + outline-width: rem(2); } } diff --git a/packages/themes/ecl/src/ecl-ec/components/textarea.scss b/packages/themes/ecl/src/ecl-ec/components/textarea.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/ecl/src/ecl-ec/components/textarea.scss +++ b/packages/themes/ecl/src/ecl-ec/components/textarea.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 32176928a5..2de3c774ec 100644 --- a/packages/themes/ecl/src/ecl-ec/components/toast-container.scss +++ b/packages/themes/ecl/src/ecl-ec/components/toast-container.scss @@ -1,11 +1,11 @@ @import '../../mixins/rem'; -@import '../mixins/alert-wc.scss'; +@import '../mixins/alert-wc'; @layer kol-theme-component { :host { top: rem(16); right: rem(16); - width: 440px; + width: rem(440); max-width: 100%; } diff --git a/packages/themes/ecl/src/ecl-ec/components/toolbar.scss b/packages/themes/ecl/src/ecl-ec/components/toolbar.scss index f49c737d7c..fb10a21669 100644 --- a/packages/themes/ecl/src/ecl-ec/components/toolbar.scss +++ b/packages/themes/ecl/src/ecl-ec/components/toolbar.scss @@ -1,9 +1,11 @@ +@import '../../mixins/rem'; + @layer kol-theme-component { .toolbar { padding: var(--spacing-s); border-color: var(--color-grey-25); border-style: solid; - border-width: 1px; + border-width: rem(1); background-color: var(--color-grey-5); } } 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..62923162b3 100644 --- a/packages/themes/ecl/src/ecl-ec/components/tree-item.scss +++ b/packages/themes/ecl/src/ecl-ec/components/tree-item.scss @@ -10,12 +10,12 @@ .tree-link { display: block; - border: 2px solid transparent; + border: rem(2) solid transparent; &:hover, &:focus-within { background-color: var(--color-sky); - border: 2px solid var(--color-yellow-120); + border: rem(2) solid var(--color-yellow-120); & > a { color: var(--color-black); diff --git a/packages/themes/ecl/src/ecl-ec/global.scss b/packages/themes/ecl/src/ecl-ec/global.scss index b23b01bb91..b978d3318e 100644 --- a/packages/themes/ecl/src/ecl-ec/global.scss +++ b/packages/themes/ecl/src/ecl-ec/global.scss @@ -13,8 +13,8 @@ padding: rem(4) rem(8); font-size: rem(14); line-height: 1.2; - border-radius: 2px; - border: 1px solid #626262; + border-radius: rem(2); + border: rem(1) solid #626262; } :host { @@ -57,15 +57,15 @@ --font-weight-bold: 600; --line-height: 1.5; --line-height-heading: 1.2; - --spacing-4xl: 64px; - --spacing-3xl: 48px; - --spacing-2xl: 40px; - --spacing-xl: 32px; - --spacing-l: 24px; - --spacing-m: 16px; - --spacing-s: 12px; - --spacing-xs: 8px; - --spacing-2xs: 4px; + --spacing-4xl: rem(64); + --spacing-3xl: rem(48); + --spacing-2xl: rem(40); + --spacing-xl: rem(32); + --spacing-l: rem(24); + --spacing-m: rem(16); + --spacing-s: rem(12); + --spacing-xs: rem(8); + --spacing-2xs: rem(4); } a, 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..964e7afb8d 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/alert-wc.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/alert-wc.scss @@ -15,7 +15,7 @@ div.card { border-style: solid; - border-width: 2px; + border-width: rem(2); } div.msg { diff --git a/packages/themes/ecl/src/ecl-ec/mixins/button.scss b/packages/themes/ecl/src/ecl-ec/mixins/button.scss index 55695823e1..563b4abf98 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/button.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/button.scss @@ -9,13 +9,13 @@ a:focus .kol-span-wc, button:focus .kol-span-wc { - outline-offset: -4px; - outline-width: 2px; + outline-offset: rem(-4); + outline-width: rem(2); outline-style: solid; } button.ghost:focus .kol-span-wc { - outline-offset: -2px; + outline-offset: rem(-2); } .primary a .kol-span-wc, @@ -46,7 +46,7 @@ .secondary a:focus .kol-span-wc, .secondary button:focus .kol-span-wc { outline-color: var(--color-blue); - outline-offset: -6px; + outline-offset: rem(-6); } .secondary a:hover .kol-span-wc, 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 e2d8dc7e4c..08aeb3b177 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/indented-text.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/indented-text.scss @@ -3,7 +3,7 @@ @mixin indented-text { font-family: var(--font-family); border-end-start-radius: 0; - border-inline-start: 10px solid var(--color-yellow); + border-inline-start: rem(10) solid var(--color-yellow); border-start-start-radius: 0; padding-bottom: rem(16); padding-inline-start: rem(24); 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 2f52800c8d..e0e0548f7b 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,3 +1,5 @@ +@import '../../mixins/rem'; + @mixin kol-table-stateless-wc { @layer kol-theme-component { :host, @@ -24,7 +26,7 @@ table thead tr:first-child th, table thead tr:first-child td { border-width: 0; - border-top-width: 2px; + border-top-width: rem(2); border-style: solid; border-color: var(--color-ice); } @@ -35,9 +37,9 @@ .table:has(.focus-element:focus) { outline-color: var(--color-blue); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 2px; + outline-width: rem(2); } table { @@ -49,7 +51,7 @@ table thead tr:last-child th, table thead tr:last-child td { border-width: 0; - border-bottom-width: 2px; + border-bottom-width: rem(2); border-style: solid; border-color: var(--color-ice); } @@ -89,8 +91,8 @@ border-color: var(--color-blue); outline-color: var(--color-blue); outline-style: solid; - outline-offset: 2px; - outline-width: 2px; + outline-offset: rem(2); + outline-width: rem(2); } // CHECKBOX @@ -133,7 +135,7 @@ &:checked { border-color: var(--color-blue); - border-width: 7px; + border-width: rem(7); &:before { background-color: var(--color-white); diff --git a/packages/themes/ecl/src/ecl-ec/mixins/typography.scss b/packages/themes/ecl/src/ecl-ec/mixins/typography.scss new file mode 100644 index 0000000000..0ede89e728 --- /dev/null +++ b/packages/themes/ecl/src/ecl-ec/mixins/typography.scss @@ -0,0 +1,36 @@ +@import '../../mixins/rem'; + +@mixin kol-typography-body { + font-size: rem(16); + line-height: 1.5; +} + +@mixin kol-typography-h1 { + font-size: rem(32); + line-height: 1.25; +} + +@mixin kol-typography-h2 { + font-size: rem(28); + line-height: 1.143; +} + +@mixin kol-typography-h3 { + font-size: rem(24); + line-height: 1.1667; +} + +@mixin kol-typography-h4 { + font-size: rem(20); + line-height: 1.4; +} + +@mixin kol-typography-h5 { + font-size: rem(16); + line-height: 1.5; +} + +@mixin kol-typography-hint { + font-size: rem(14.4); + font-style: italic; +} 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 433d6165aa..9558b9a81f 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.scss'; +@import '../mixins/alert-wc'; @layer kol-theme-component { :host { @@ -16,21 +16,21 @@ select, textarea { border: none; - margin: 1px; + margin: rem(1); outline: none; } input, select:not([multiple]) { - height: 44px; - min-height: 44px; + height: rem(44); + min-height: rem(44); } input:not([type='range']):focus, select:focus, textarea:focus { - border-top: 1px solid var(--color-blue); - border-bottom: 1px solid var(--color-blue); + border-top: rem(1) solid var(--color-blue); + border-bottom: rem(1) solid var(--color-blue); } label { @@ -49,12 +49,12 @@ } .input { - min-height: 44px; - border: 1px solid var(--color-grey-75); + min-height: rem(44); + border: rem(1) solid var(--color-grey-75); color: var(--color-grey); order: 4; align-items: center; - padding: 1px 0.5em; + padding: rem(1) 0.5em; } input::placeholder, @@ -64,8 +64,8 @@ .input:focus-within { box-shadow: - inset 1px 1px var(--color-blue), - inset -1px -1px var(--color-blue); + inset rem(1) rem(1) var(--color-blue), + inset rem(-1) rem(-1) var(--color-blue); outline: none; } diff --git a/packages/themes/ecl/src/ecl-eu/components/abbr.scss b/packages/themes/ecl/src/ecl-eu/components/abbr.scss index a0cf8146d5..7d2b7f0a24 100644 --- a/packages/themes/ecl/src/ecl-eu/components/abbr.scss +++ b/packages/themes/ecl/src/ecl-eu/components/abbr.scss @@ -1,6 +1,8 @@ +@import '../../mixins/rem'; + @layer kol-theme-component { abbr { - border-bottom: dashed var(--color-text) 1px; + border-bottom: dashed var(--color-text) rem(1); text-decoration: none; } } diff --git a/packages/themes/ecl/src/ecl-eu/components/accordion.scss b/packages/themes/ecl/src/ecl-eu/components/accordion.scss index ae8ed30056..137700e8ba 100644 --- a/packages/themes/ecl/src/ecl-eu/components/accordion.scss +++ b/packages/themes/ecl/src/ecl-eu/components/accordion.scss @@ -7,12 +7,12 @@ } .accordion { - border-radius: 8px; + border-radius: rem(8); box-shadow: - 0 2px 4px rgb(9 49 142 / 8%), - 0 0 10px rgb(9 49 142 / 4%), - 0 4px 5px rgb(9 49 142 / 4%), - 0 -4px 4px rgb(9 49 142 / 4%); + 0 rem(2) rem(4) rgb(9 49 142 / 8%), + 0 0 rem(10) rgb(9 49 142 / 4%), + 0 rem(4) rem(5) rgb(9 49 142 / 4%), + 0 rem(-4) rem(4) rgb(9 49 142 / 4%); margin: 0; overflow: hidden; @@ -22,12 +22,12 @@ &__heading-button { button { - border-radius: 8px; - outline-offset: -1px; + border-radius: rem(8); + outline-offset: rem(-1); border: 0; border-bottom-color: #cfdaf5; border-bottom-style: solid; - border-bottom-width: 2px; + border-bottom-width: rem(2); color: #171a22; position: relative; display: block; @@ -45,14 +45,14 @@ &::before { background-color: #fc0; - border-end-end-radius: 2px; - border-end-start-radius: 2px; + border-end-end-radius: rem(2); + border-end-start-radius: rem(2); content: ''; - height: 4px; + height: rem(4); position: absolute; left: rem(24); top: 0; - width: 32px; + width: 3rem (2); } } @@ -68,10 +68,10 @@ } &__content { - -webkit-border-start: 4px solid #0e47cb; + -webkit-border-start: rem(4) solid #0e47cb; -webkit-margin-start: 0; - border-bottom: 2px solid #cfdaf5; - border-inline-start: 4px solid #0e47cb; + border-bottom: rem(2) solid #cfdaf5; + border-inline-start: rem(4) solid #0e47cb; color: #515560; font: normal normal 400 rem(16) / rem(24) arial, @@ -82,8 +82,8 @@ .open &__heading-button { button { - border-start-end-radius: 8px; - border-start-start-radius: 8px; + border-start-end-radius: rem(8); + border-start-start-radius: rem(8); } .kol-icon::part(icon)::before { diff --git a/packages/themes/ecl/src/ecl-eu/components/alert.scss b/packages/themes/ecl/src/ecl-eu/components/alert.scss index 0f1fcfe8ca..9abedf547e 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.scss'; +@import '../mixins/alert-wc'; @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 cd9f8190c9..19556da6bc 100644 --- a/packages/themes/ecl/src/ecl-eu/components/badge.scss +++ b/packages/themes/ecl/src/ecl-eu/components/badge.scss @@ -4,9 +4,10 @@ :host { font-family: var(--font-family); } + :host > span { font: normal normal var(--font-weight) rem(14) / 1em var(--font-family); - padding: calc(rem(8) - 1px) calc(rem(12) - 1px); + padding: calc(rem(8) - rem(1)) calc(rem(12) - rem(1)); text-transform: uppercase; } } diff --git a/packages/themes/ecl/src/ecl-eu/components/button.scss b/packages/themes/ecl/src/ecl-eu/components/button.scss index 63ba09d2d7..94deafac60 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.scss'; +@import '../mixins/button'; @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 07a9ca097d..60c9b17b5d 100644 --- a/packages/themes/ecl/src/ecl-eu/components/card.scss +++ b/packages/themes/ecl/src/ecl-eu/components/card.scss @@ -1,3 +1,5 @@ +@import '../../mixins/rem'; + @layer kol-theme-component { :host { font-family: var(--font-family); @@ -34,6 +36,6 @@ } :host > div > div.content + div.footer { - border-top: 2px solid var(--color-blue); + border-top: rem(2) solid var(--color-blue); } } diff --git a/packages/themes/ecl/src/ecl-eu/components/combobox.scss b/packages/themes/ecl/src/ecl-eu/components/combobox.scss index 3c8a30b354..49c9bf3d34 100644 --- a/packages/themes/ecl/src/ecl-eu/components/combobox.scss +++ b/packages/themes/ecl/src/ecl-eu/components/combobox.scss @@ -37,11 +37,11 @@ $visible-options: 5; min-height: var(--a11y-min-size); text-align: left; width: 100%; - min-height: 44px; + min-height: rem(44); color: var(--color-grey); order: 4; align-items: center; - padding: 1px 0.5em; + padding: rem(1) 0.5em; } &__input { @@ -76,13 +76,13 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: 1px; + border-width: rem(1); border-color: var(--color-blue); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; width: 100%; - max-height: calc($option-height * $visible-options + 2px); + max-height: calc($option-height * $visible-options + rem(2)); } &__item { @@ -114,8 +114,8 @@ $visible-options: 5; input, select:not([multiple]) { - height: 44px; - min-height: 44px; + height: rem(44); + min-height: rem(44); } label { @@ -135,12 +135,12 @@ $visible-options: 5; } .input { - min-height: 44px; - border: 1px solid var(--color-grey-75); + min-height: rem(44); + border: rem(1) solid var(--color-grey-75); color: var(--color-grey); order: 4; align-items: center; - padding: 1px; + padding: rem(1); } input::placeholder, @@ -150,8 +150,8 @@ $visible-options: 5; .input:focus-within { box-shadow: - inset 1px 1px var(--color-blue), - inset -1px -1px var(--color-blue); + inset rem(1) rem(1) var(--color-blue), + inset rem(-1) rem(-1) var(--color-blue); outline: none; } diff --git a/packages/themes/ecl/src/ecl-eu/components/form.scss b/packages/themes/ecl/src/ecl-eu/components/form.scss index 585baf3185..6d39a7d905 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.scss'; -@import '../mixins/indented-text.scss'; -@import '../mixins/link.scss'; +@import '../mixins/alert-wc'; +@import '../mixins/indented-text'; +@import '../mixins/link'; @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 6488b8ac9c..fb136b4e34 100644 --- a/packages/themes/ecl/src/ecl-eu/components/heading.scss +++ b/packages/themes/ecl/src/ecl-eu/components/heading.scss @@ -1,9 +1,11 @@ @import '../../mixins/rem'; +@import '../mixins/typography'; @layer kol-theme-component { :host { font-family: var(--font-family); } + .headline-h1, .headline-h2, .headline-h3, @@ -12,28 +14,28 @@ .headline-h6 { font-weight: var(--font-weight-bold); } + .headline-h1 { - font-size: rem(42); - line-height: 3.25; + @include kol-typography-h1; } + .headline-h2 { - font-size: rem(36); - line-height: 2.755; + @include kol-typography-h2; } + .headline-h3 { - font-size: rem(32); - line-height: 2.5; + @include kol-typography-h3; } + .headline-h4 { - font-size: rem(28); - line-height: 2; + @include kol-typography-h4; } + .headline-h5 { - font-size: rem(24); - line-height: 1.75; + @include kol-typography-h5; } + .headline-h6 { - font-size: rem(20); - line-height: 1.75; + @include kol-typography-h6; } } 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 e99e151bf4..f9a5237c48 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.scss'; +@import '../mixins/indented-text'; @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 15eb1dea79..2f29d383b2 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.scss'; +@import '../mixins/alert-wc'; @layer kol-theme-component { :host { @@ -17,7 +17,7 @@ input[type='checkbox'] { background-color: var(--color-white); - border-width: 2px; + border-width: rem(2); border-style: solid; color: var(--color-grey); line-height: 1.5; @@ -26,9 +26,9 @@ input[type='checkbox']:focus { outline-color: var(--color-blue); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 2px; + outline-width: rem(2); } input[type='checkbox'] { @@ -145,6 +145,6 @@ .button:focus-within { outline-color: var(--color-blue-130); outline-style: solid; - outline-width: 2px; + outline-width: rem(2); } } 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 255f5cd899..a4d845ac5c 100644 --- a/packages/themes/ecl/src/ecl-eu/components/input-radio.scss +++ b/packages/themes/ecl/src/ecl-eu/components/input-radio.scss @@ -1,5 +1,6 @@ @import '../../mixins/rem'; -@import '../mixins/alert-wc.scss'; +@import '../mixins/alert-wc'; +@import '../mixins/typography'; @layer kol-theme-component { :host { @@ -20,8 +21,7 @@ fieldset .hint { order: 4; - font-size: rem(14.4); - font-style: italic; + @include kol-typography-hint; } fieldset .kol-alert-wc { @@ -35,8 +35,7 @@ fieldset .kol-input .hint { order: 3; - font-size: rem(14.4); - font-style: italic; + @include kol-typography-hint; } .radio-input-wrapper { @@ -54,8 +53,8 @@ } input[type='radio'] { - outline: 2px solid var(--color-grey-75); - outline-offset: 2px; + outline: rem(2) solid var(--color-grey-75); + outline-offset: rem(2); } input[type='radio']:before { @@ -64,7 +63,7 @@ input[type='radio']:checked { border-color: var(--color-blue); - border-width: 7px; + border-width: rem(7); } input[type='radio']:focus { @@ -85,7 +84,7 @@ } .error input[type='radio'] { - border: 2px solid var(--color-red); + border: rem(2) solid var(--color-red); } .error input[type='radio']:before { @@ -94,7 +93,7 @@ .error input[type='radio']:checked { border-color: var(--color-red); - border-width: 7px; + border-width: rem(7); } .error input[type='radio']:not(:disabled):hover { 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 c177298a42..b787945a14 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.scss'; +@import '../mixins/alert-wc'; @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 169513cdc8..5c1a18e4a6 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 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 b801778c2d..5451549a3a 100644 --- a/packages/themes/ecl/src/ecl-eu/components/link-button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/link-button.scss @@ -9,7 +9,7 @@ a, button { appearance: none; - border-radius: 4px; + border-radius: rem(4); text-decoration: none; } @@ -20,9 +20,9 @@ a > .kol-span-wc, button > .kol-span-wc { - min-height: 44px; - min-width: 44px; - border-radius: 4px; + min-height: rem(44); + min-width: rem(44); + border-radius: rem(4); font: normal normal 400 rem(16) / rem(20) arial, sans-serif; @@ -33,9 +33,9 @@ a:focus-visible > .kol-span-wc, button:focus-visible > .kol-span-wc { - outline-offset: -4px; + outline-offset: rem(-4); outline-style: solid; - outline-width: 2px; + outline-width: rem(2); } a:active > .kol-span-wc, @@ -43,10 +43,10 @@ a:hover > .kol-span-wc, button:hover > .kol-span-wc { box-shadow: - 0 2px 4px rgb(9 49 142 / 8%), - 0 0 10px rgb(9 49 142 / 4%), - 0 4px 5px rgb(9 49 142 / 4%), - 0 -4px 4px rgb(9 49 142 / 4%); + 0 rem(2) rem(4) rgb(9 49 142 / 8%), + 0 0 rem(10) rgb(9 49 142 / 4%), + 0 rem(4) rem(5) rgb(9 49 142 / 4%), + 0 rem(-4) rem(4) rgb(9 49 142 / 4%); } .primary a > .kol-span-wc, @@ -68,14 +68,14 @@ .secondary a > .kol-span-wc, .secondary button > .kol-span-wc { background-color: #fff; - border: 2px solid #0e47cb; + border: rem(2) solid #0e47cb; color: #0e47cb; - padding: calc(rem(12) - 2px) calc(rem(16) - 2px); + padding: calc(rem(12) - rem(2)) calc(rem(16) - rem(2)); } .secondary a:focus-visible > .kol-span-wc, .secondary button:focus-visible > .kol-span-wc { - box-shadow: inset 0 0 0 4px #0e47cb; + box-shadow: inset 0 0 0 rem(4) #0e47cb; outline-color: #fff; } diff --git a/packages/themes/ecl/src/ecl-eu/components/link.scss b/packages/themes/ecl/src/ecl-eu/components/link.scss index 72e9da2c4d..a612e4a58d 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.scss'; +@import '../mixins/link'; @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 5296b30050..dcbfce6619 100644 --- a/packages/themes/ecl/src/ecl-eu/components/nav.scss +++ b/packages/themes/ecl/src/ecl-eu/components/nav.scss @@ -8,8 +8,8 @@ .list { display: flex; list-style: none; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; } .list.vertical { @@ -46,9 +46,9 @@ .kol-span-wc { border-color: transparent; border-style: solid; - border-width: 2px; + border-width: rem(2); color: var(--color-white); - font-size: 18px; + font-size: rem(18); justify-items: start; padding: rem(16); height: 100%; @@ -59,7 +59,7 @@ border-color: var(--color-blue-75); border-style: solid; border-width: 0; - border-top-width: 2px; + border-top-width: rem(2); } a { diff --git a/packages/themes/ecl/src/ecl-eu/components/pagination.scss b/packages/themes/ecl/src/ecl-eu/components/pagination.scss index fc4478d469..4698170ffd 100644 --- a/packages/themes/ecl/src/ecl-eu/components/pagination.scss +++ b/packages/themes/ecl/src/ecl-eu/components/pagination.scss @@ -5,17 +5,20 @@ display: grid; font-family: var(--font-family); } + .button { --kolibri-spacing: rem(4); - border-radius: 4px; + border-radius: rem(4); + &:focus { outline: none; } } + .button-inner { min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - border-radius: 4px; + border-radius: rem(4); font: normal normal 400 rem(16) / rem(20) Arial, sans-serif; @@ -23,24 +26,28 @@ background-color: #fc0; color: #171a22; } + .button:focus-visible .button-inner { - outline-offset: -4px; - outline: 2px solid var(--color-black); + outline-offset: rem(-4); + outline: rem(2) solid var(--color-black); } + button:not(:disabled):active .button-inner, button:not(:disabled):hover .button-inner { background-color: #fc0; border-color: #fc0; box-shadow: - 0 2px 4px rgb(9 49 142 / 8%), - 0 0 10px rgb(9 49 142 / 4%), - 0 4px 5px rgb(9 49 142 / 4%), - 0 -4px 4px rgb(9 49 142 / 4%); + 0 rem(2) rem(4) rgb(9 49 142 / 8%), + 0 0 rem(10) rgb(9 49 142 / 4%), + 0 rem(4) rem(5) rgb(9 49 142 / 4%), + 0 rem(-4) rem(4) rgb(9 49 142 / 4%); } + .button:disabled .button-inner { opacity: 0.5; cursor: not-allowed; } + .selected .button-inner { background-color: var(--color-blue); border-color: var(--color-blue); diff --git a/packages/themes/ecl/src/ecl-eu/components/select.scss b/packages/themes/ecl/src/ecl-eu/components/select.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/ecl/src/ecl-eu/components/select.scss +++ b/packages/themes/ecl/src/ecl-eu/components/select.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 e111a9be4b..102c6dfa63 100644 --- a/packages/themes/ecl/src/ecl-eu/components/single-select.scss +++ b/packages/themes/ecl/src/ecl-eu/components/single-select.scss @@ -17,10 +17,10 @@ $visible-options: 5; display: inline-flex; align-items: center; width: 100%; - min-height: 44px; + min-height: rem(44); color: var(--color-grey); order: 4; - padding: 1px 0.5em; + padding: rem(1) 0.5em; } &__input { @@ -59,9 +59,9 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: 1px; + border-width: rem(1); border-color: var(--color-blue); - max-height: calc($option-height * $visible-options + 2px); + max-height: calc($option-height * $visible-options + rem(2)); overflow-y: auto; overflow-x: hidden; width: 100%; @@ -103,8 +103,8 @@ $visible-options: 5; input, select:not([multiple]) { - height: 44px; - min-height: 44px; + height: rem(44); + min-height: rem(44); } label { @@ -124,12 +124,12 @@ $visible-options: 5; } .input { - min-height: 44px; - border: 1px solid var(--color-grey-75); + min-height: rem(44); + border: rem(1) solid var(--color-grey-75); color: var(--color-grey); order: 4; align-items: center; - padding: 1px; + padding: rem(1); } input::placeholder, @@ -139,8 +139,8 @@ $visible-options: 5; .input:focus-within { box-shadow: - inset 1px 1px var(--color-blue), - inset -1px -1px var(--color-blue); + inset rem(1) rem(1) var(--color-blue), + inset rem(-1) rem(-1) var(--color-blue); outline: none; } 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..d92e5470fd 100644 --- a/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss +++ b/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss @@ -6,7 +6,7 @@ } .kol-link-wc > a > .kol-span-wc { - border-radius: 4px; + border-radius: rem(4); gap: rem(8); line-height: 1; padding: rem(12); 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 e1322142a9..402f611c94 100644 --- a/packages/themes/ecl/src/ecl-eu/components/split-button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/split-button.scss @@ -1,17 +1,17 @@ -@import '../mixins/button.scss'; +@import '../mixins/button'; @layer kol-theme-component { :host { font-family: var(--font-family); border-style: solid; - border-width: 2px; + border-width: rem(2); border-color: var(--color-blue); - border-radius: 4px; + border-radius: rem(4); } .horizontal-line { border: 0; - border-top: 1px solid var(--color-blue); + border-top: rem(1) solid var(--color-blue); } .popover { diff --git a/packages/themes/ecl/src/ecl-eu/components/tabs.scss b/packages/themes/ecl/src/ecl-eu/components/tabs.scss index 8bff1dc8e3..29d030e4a2 100644 --- a/packages/themes/ecl/src/ecl-eu/components/tabs.scss +++ b/packages/themes/ecl/src/ecl-eu/components/tabs.scss @@ -7,28 +7,28 @@ } .tabs-button-group { - border-bottom: 1px solid var(--color-grey-25); - margin-bottom: -1px; + border-bottom: rem(1) solid var(--color-grey-25); + margin-bottom: rem(-1); } .tabs-button-group button { border: none; - margin-bottom: -1px; + margin-bottom: rem(-1); } .tabs-button-group button .kol-span-wc { padding: rem(4); - min-height: 44px; - min-width: 44px; + min-height: rem(44); + min-width: rem(44); } .tabs-button-group button.selected .kol-span-wc { border-color: var(--color-grey-25); border-style: solid; - border-width: 1px; + border-width: rem(1); border-bottom-color: white; border-top-color: var(--color-blue); - box-shadow: 0 -3px var(--color-blue); + box-shadow: 0 rem(-3) var(--color-blue); font-weight: var(--font-weight-bold); color: var(--color-blue); } @@ -40,6 +40,6 @@ .tabs-button-group button:focus .kol-span-wc { outline-color: var(--color-blue-130); outline-style: solid; - outline-width: 2px; + outline-width: rem(2); } } diff --git a/packages/themes/ecl/src/ecl-eu/components/textarea.scss b/packages/themes/ecl/src/ecl-eu/components/textarea.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/ecl/src/ecl-eu/components/textarea.scss +++ b/packages/themes/ecl/src/ecl-eu/components/textarea.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; 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 991a581f34..6d6188312c 100644 --- a/packages/themes/ecl/src/ecl-eu/components/toast-container.scss +++ b/packages/themes/ecl/src/ecl-eu/components/toast-container.scss @@ -1,11 +1,11 @@ @import '../../mixins/rem'; -@import '../mixins/alert-wc.scss'; +@import '../mixins/alert-wc'; @layer kol-theme-component { :host { top: rem(16); right: rem(16); - width: 440px; + width: rem(440); max-width: 100%; } diff --git a/packages/themes/ecl/src/ecl-eu/components/toolbar.scss b/packages/themes/ecl/src/ecl-eu/components/toolbar.scss index 164995f5c9..ede7cb29c0 100644 --- a/packages/themes/ecl/src/ecl-eu/components/toolbar.scss +++ b/packages/themes/ecl/src/ecl-eu/components/toolbar.scss @@ -1,12 +1,14 @@ +@import '../../mixins/rem'; + @layer kol-theme-component { .toolbar { padding: var(--spacing-s); - border-radius: 8px; + border-radius: rem(8); box-shadow: - 0 2px 4px rgb(9 49 142 / 8%), - 0 0 10px rgb(9 49 142 / 4%), - 0 4px 5px rgb(9 49 142 / 4%), - 0 -4px 4px rgb(9 49 142 / 4%); + 0 rem(2) rem(4) rgb(9 49 142 / 8%), + 0 0 rem(10) rgb(9 49 142 / 4%), + 0 rem(4) rem(5) rgb(9 49 142 / 4%), + 0 rem(-4) rem(4) rgb(9 49 142 / 4%); background-color: var(--color-white); } } 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..2cd9db7d18 100644 --- a/packages/themes/ecl/src/ecl-eu/components/tree-item.scss +++ b/packages/themes/ecl/src/ecl-eu/components/tree-item.scss @@ -10,13 +10,13 @@ .tree-link { display: block; - border: 2px solid transparent; - border-radius: 4px; + border: rem(2) solid transparent; + border-radius: rem(4); &:hover, &:focus-within { background-color: var(--color-sky); - border: 2px solid var(--color-blue); + border: rem(2) solid var(--color-blue); & > a { color: var(--color-black); diff --git a/packages/themes/ecl/src/ecl-eu/global.scss b/packages/themes/ecl/src/ecl-eu/global.scss index 3984618a6d..8135817fd7 100644 --- a/packages/themes/ecl/src/ecl-eu/global.scss +++ b/packages/themes/ecl/src/ecl-eu/global.scss @@ -13,8 +13,8 @@ padding: rem(4) rem(8); font-size: rem(14); line-height: 1.2; - border-radius: 2px; - border: 1px solid #626262; + border-radius: rem(2); + border: rem(1) solid #626262; } :host { @@ -114,15 +114,15 @@ --font-weight-bold: 700; --line-height-regular: 1.5; --line-height-heading: 1.2; - --spacing-4xl: 64px; - --spacing-3xl: 48px; - --spacing-2xl: 40px; - --spacing-xl: 32px; - --spacing-l: 24px; - --spacing-m: 16px; - --spacing-s: 12px; - --spacing-xs: 8px; - --spacing-2xs: 4px; + --spacing-4xl: rem(64); + --spacing-3xl: rem(48); + --spacing-2xl: rem(40); + --spacing-xl: rem(32); + --spacing-l: rem(24); + --spacing-m: rem(16); + --spacing-s: rem(12); + --spacing-xs: rem(8); + --spacing-2xs: rem(4); } a, 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..9ee68bb32a 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/alert-wc.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/alert-wc.scss @@ -15,7 +15,7 @@ div.card { border-style: solid; - border-width: 2px; + border-width: rem(2); } div.msg { diff --git a/packages/themes/ecl/src/ecl-eu/mixins/button.scss b/packages/themes/ecl/src/ecl-eu/mixins/button.scss index 1264c46e17..dc9d98f9f1 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/button.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/button.scss @@ -4,7 +4,7 @@ a, button { appearance: none; - border-radius: 4px; + border-radius: rem(4); text-decoration: none; } @@ -15,9 +15,9 @@ a > .kol-span-wc, button > .kol-span-wc { - min-height: 44px; - min-width: 44px; - border-radius: 4px; + min-height: rem(44); + min-width: rem(44); + border-radius: rem(4); font: normal normal 400 rem(16) / rem(20) arial, sans-serif; @@ -29,9 +29,9 @@ a:focus-visible > .kol-span-wc, button:focus-visible > .kol-span-wc { - outline-offset: -4px; + outline-offset: rem(-4); outline-style: solid; - outline-width: 2px; + outline-width: rem(2); } a:active > .kol-span-wc, @@ -39,10 +39,10 @@ a:hover > .kol-span-wc, button:hover > .kol-span-wc { box-shadow: - 0 2px 4px rgb(9 49 142 / 8%), - 0 0 10px rgb(9 49 142 / 4%), - 0 4px 5px rgb(9 49 142 / 4%), - 0 -4px 4px rgb(9 49 142 / 4%); + 0 rem(2) rem(4) rgb(9 49 142 / 8%), + 0 0 rem(10) rgb(9 49 142 / 4%), + 0 rem(4) rem(5) rgb(9 49 142 / 4%), + 0 rem(-4) rem(4) rgb(9 49 142 / 4%); } .primary a > .kol-span-wc, @@ -64,14 +64,14 @@ .secondary a > .kol-span-wc, .secondary button > .kol-span-wc { background-color: #fff; - border: 2px solid #0e47cb; + border: rem(2) solid #0e47cb; color: #0e47cb; - padding: calc(rem(12) - 2px) calc(rem(16) - 2px); + padding: calc(rem(12) - rem(2)) calc(rem(16) - rem(2)); } .secondary a:focus-visible > .kol-span-wc, .secondary button:focus-visible > .kol-span-wc { - box-shadow: inset 0 0 0 4px #0e47cb; + box-shadow: inset 0 0 0 rem(4) #0e47cb; outline-color: #fff; } 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 4281a9aee7..777f4f46d3 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/indented-text.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/indented-text.scss @@ -2,11 +2,11 @@ @mixin indented-text { font-family: var(--font-family); - -webkit-border-start: 8px solid #0e47cb; + -webkit-border-start: rem(8) solid #0e47cb; -webkit-padding-start: rem(24); - border-end-start-radius: 4px; - border-inline-start: 8px solid #0e47cb; - border-start-start-radius: 4px; + border-end-start-radius: rem(4); + border-inline-start: rem(8) solid #0e47cb; + border-start-start-radius: rem(4); display: inline-block; padding-bottom: rem(16); padding-inline-start: rem(24); 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 b57347cae7..6036972d93 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,3 +1,5 @@ +@import '../../mixins/rem'; + @mixin kol-table-stateless-wc { @layer kol-theme-component { :host, @@ -18,7 +20,7 @@ table thead tr:first-child th, table thead tr:first-child td { border-width: 0; - border-top-width: 2px; + border-top-width: rem(2); border-style: solid; border-color: var(--color-ice); } @@ -29,9 +31,9 @@ .table:has(.focus-element:focus) { outline-color: var(--color-blue); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 2px; + outline-width: rem(2); } table { @@ -43,7 +45,7 @@ table thead tr:last-child th, table thead tr:last-child td { border-width: 0; - border-bottom-width: 2px; + border-bottom-width: rem(2); border-style: solid; border-color: var(--color-ice); } @@ -83,8 +85,8 @@ border-color: var(--color-blue); outline-color: var(--color-blue); outline-style: solid; - outline-offset: 2px; - outline-width: 2px; + outline-offset: rem(2); + outline-width: rem(2); } // CHECKBOX @@ -119,17 +121,17 @@ // RADIO input[type='radio'] { display: block; - outline: 2px solid var(--color-grey-75); - outline-offset: 2px; + outline: rem(2) solid var(--color-grey-75); + outline-offset: rem(2); &:hover { border-color: var(--color-blue); } &:checked { - outline: 2px solid var(--color-blue); + outline: rem(2) solid var(--color-blue); border-color: var(--color-blue); - border-width: 7px; + border-width: rem(7); &:before { background-color: var(--color-white); diff --git a/packages/themes/ecl/src/ecl-eu/mixins/typography.scss b/packages/themes/ecl/src/ecl-eu/mixins/typography.scss new file mode 100644 index 0000000000..f25727937f --- /dev/null +++ b/packages/themes/ecl/src/ecl-eu/mixins/typography.scss @@ -0,0 +1,41 @@ +@import '../../mixins/rem'; + +@mixin kol-typography-body { + font-size: rem(16); + line-height: 1.5; +} + +@mixin kol-typography-h1 { + font-size: rem(42); + line-height: 3.25; +} + +@mixin kol-typography-h2 { + font-size: rem(36); + line-height: 2.755; +} + +@mixin kol-typography-h3 { + font-size: rem(32); + line-height: 2.5; +} + +@mixin kol-typography-h4 { + font-size: rem(28); + line-height: 2; +} + +@mixin kol-typography-h5 { + font-size: rem(24); + line-height: 1.75; +} + +@mixin kol-typography-h6 { + font-size: rem(20); + line-height: 1.75; +} + +@mixin kol-typography-hint { + font-size: rem(14.4); + font-style: italic; +} diff --git a/packages/themes/itzbund/src/@shared/input-core.scss b/packages/themes/itzbund/src/@shared/input-core.scss index 256979a3bc..f0ebacc245 100644 --- a/packages/themes/itzbund/src/@shared/input-core.scss +++ b/packages/themes/itzbund/src/@shared/input-core.scss @@ -1,10 +1,10 @@ -@use './label.scss'; -@use './kol-alert-wc.scss'; -@use './kol-required.scss'; +@import './label'; +@import './kol-alert-wc'; +@import './kol-required'; -@import '../mixins/alert-wc.scss'; -@import '../mixins/typography.scss'; -@import '../mixins/input-base.scss'; +@import '../mixins/alert-wc'; +@import '../mixins/typography'; +@import '../mixins/input-base'; @layer kol-theme-component { :host { diff --git a/packages/themes/itzbund/src/@shared/label.scss b/packages/themes/itzbund/src/@shared/label.scss index 00d23a31aa..8570055662 100644 --- a/packages/themes/itzbund/src/@shared/label.scss +++ b/packages/themes/itzbund/src/@shared/label.scss @@ -1,4 +1,4 @@ -@import '../mixins/typography.scss'; +@import '../mixins/typography'; @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 31bd27dcdb..6d0a44c019 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.scss'; +@import '../mixins/link'; @layer kol-theme-component { @include kol-link; diff --git a/packages/themes/itzbund/src/components/abbr.scss b/packages/themes/itzbund/src/components/abbr.scss index a0cf8146d5..a9a67d7144 100644 --- a/packages/themes/itzbund/src/components/abbr.scss +++ b/packages/themes/itzbund/src/components/abbr.scss @@ -1,6 +1,6 @@ @layer kol-theme-component { abbr { - border-bottom: dashed var(--color-text) 1px; + border-bottom: dashed var(--color-text) rem(1); text-decoration: none; } } diff --git a/packages/themes/itzbund/src/components/accordion.scss b/packages/themes/itzbund/src/components/accordion.scss index 64a0681850..c2b613bedf 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.scss'; +@import '../mixins/typography'; @layer kol-theme-component { :host { @@ -13,7 +13,7 @@ height: 100%; display: grid; border-color: var(--kolibri-border-color); - border-width: 1px; + border-width: rem(1); border-style: solid; border-radius: rem(4); diff --git a/packages/themes/itzbund/src/components/alert.scss b/packages/themes/itzbund/src/components/alert.scss index e663edfccb..9ea0b24c56 100644 --- a/packages/themes/itzbund/src/components/alert.scss +++ b/packages/themes/itzbund/src/components/alert.scss @@ -1,4 +1,4 @@ -@import '../mixins/alert-wc.scss'; +@import '../mixins/alert-wc'; @import '../mixins/rem'; @layer kol-theme-component { diff --git a/packages/themes/itzbund/src/components/badge.scss b/packages/themes/itzbund/src/components/badge.scss index 5a93606e6b..debad8241d 100644 --- a/packages/themes/itzbund/src/components/badge.scss +++ b/packages/themes/itzbund/src/components/badge.scss @@ -12,7 +12,7 @@ } :host > span .kol-button-wc { - border-left: 1px solid rgba(0, 0, 0, 0.25); + border-left: rem(1) solid rgba(0, 0, 0, 0.25); } :host > span .kol-span-wc { diff --git a/packages/themes/itzbund/src/components/button-link.scss b/packages/themes/itzbund/src/components/button-link.scss index d47328cd72..5603d8fa7e 100644 --- a/packages/themes/itzbund/src/components/button-link.scss +++ b/packages/themes/itzbund/src/components/button-link.scss @@ -12,8 +12,8 @@ button > .kol-span-wc { border-radius: rem(32); border-style: solid; - min-width: 44px; - min-height: 44px; + min-width: rem(44); + min-height: rem(44); border-width: var(--spacing); font-size: inherit; /*line-height: 1.25em;*/ diff --git a/packages/themes/itzbund/src/components/button.scss b/packages/themes/itzbund/src/components/button.scss index 4723ce08c3..96358443ba 100644 --- a/packages/themes/itzbund/src/components/button.scss +++ b/packages/themes/itzbund/src/components/button.scss @@ -1,4 +1,4 @@ -@import '../mixins/button.scss'; +@import '../mixins/button'; @import '../mixins/rem'; @layer kol-theme-component { @@ -13,8 +13,8 @@ button > .kol-span-wc { border-radius: rem(32); border-style: solid; - min-width: 44px; - min-height: 44px; + min-width: rem(44); + min-height: rem(44); border-width: var(--spacing); font-size: inherit; /*line-height: 1.25em;*/ diff --git a/packages/themes/itzbund/src/components/card.scss b/packages/themes/itzbund/src/components/card.scss index 73f5b5efd4..8cc21b4722 100644 --- a/packages/themes/itzbund/src/components/card.scss +++ b/packages/themes/itzbund/src/components/card.scss @@ -5,7 +5,7 @@ background-color: white; border-color: var(--border-color); border-style: solid; - border-width: 1px; + border-width: rem(1); border-radius: calc(2 * var(--border-radius)); width: 100%; height: 100%; @@ -16,7 +16,7 @@ display: block; border-bottom-style: solid; border-bottom-color: var(--border-color); - border-bottom-width: 1px; + border-bottom-width: rem(1); } :host > div > div { @@ -29,6 +29,6 @@ padding: rem(8); border-top-style: solid; border-top-color: var(--color-achat); - border-top-width: 1px; + border-top-width: rem(1); } } diff --git a/packages/themes/itzbund/src/components/combobox.scss b/packages/themes/itzbund/src/components/combobox.scss index 1371cbf0be..ee17772026 100644 --- a/packages/themes/itzbund/src/components/combobox.scss +++ b/packages/themes/itzbund/src/components/combobox.scss @@ -1,11 +1,11 @@ -@use '../@shared/label.scss'; -@use '../@shared/kol-alert-wc.scss'; -@use '../@shared/kol-required.scss'; +@import '../@shared/label'; +@import '../@shared/kol-alert-wc'; +@import '../@shared/kol-required'; @import '../mixins/rem'; @import '../mixins/alert-wc'; -@import '../mixins/typography.scss'; -@import '../mixins/input-base.scss'; +@import '../mixins/typography'; +@import '../mixins/input-base'; $option-height: rem(40); $visible-options: 5; @@ -35,7 +35,7 @@ $visible-options: 5; outline-color: var(--primary); outline-offset: 0; outline-style: solid; - outline-width: 1px; + outline-width: rem(1); } } @@ -66,7 +66,7 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: 1px; + border-width: rem(1); border-radius: var(--border-radius); border-color: var(--kolibri-color-normal); background-color: #e8edf2; @@ -74,7 +74,7 @@ $visible-options: 5; overflow-x: hidden; box-sizing: border-box; width: 100%; - max-height: calc($option-height * $visible-options + 2px); + max-height: calc($option-height * $visible-options + rem(2)); } &__item { diff --git a/packages/themes/itzbund/src/components/form.scss b/packages/themes/itzbund/src/components/form.scss index 155e7fad11..eb96cbbc43 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.scss'; -@import '../mixins/indented-text.scss'; -@import '../mixins/link.scss'; +@import '../mixins/alert-wc'; +@import '../mixins/indented-text'; +@import '../mixins/link'; @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 c65355a62e..83994cb98f 100644 --- a/packages/themes/itzbund/src/components/heading.scss +++ b/packages/themes/itzbund/src/components/heading.scss @@ -1,4 +1,4 @@ -@import '../mixins/typography.scss'; +@import '../mixins/typography'; @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 e99e151bf4..f9a5237c48 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.scss'; +@import '../mixins/indented-text'; @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 c111f6ccb2..2e30096b2f 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.scss'; +@import '../mixins/alert-wc'; @import '../mixins/rem'; -@import '../mixins/typography.scss'; +@import '../mixins/typography'; @layer kol-theme-component { :host { @@ -15,7 +15,7 @@ @include kol-typography-body; color: var(--default-letter); border-color: var(--default-border); - border-width: 2px; + border-width: rem(2); border-style: solid; } @@ -73,7 +73,7 @@ } .kol-input > div.input input { - margin: 0px; + margin: 0; } .kol-input > label { @@ -130,8 +130,8 @@ transition: 0.5; width: 1.2em; height: 1.2em; - left: calc(0.25em - 2px); - top: calc(0.25em - 2px); + left: calc(0.25em - rem(2)); + top: calc(0.25em - rem(2)); background-color: black; position: absolute; } @@ -166,8 +166,8 @@ .button:focus-within { border-radius: rem(32); outline-color: var(--color-achat); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 3px; + outline-width: rem(3); } } diff --git a/packages/themes/itzbund/src/components/input-color.scss b/packages/themes/itzbund/src/components/input-color.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/itzbund/src/components/input-color.scss +++ b/packages/themes/itzbund/src/components/input-color.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/itzbund/src/components/input-date.scss b/packages/themes/itzbund/src/components/input-date.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/itzbund/src/components/input-date.scss +++ b/packages/themes/itzbund/src/components/input-date.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/itzbund/src/components/input-email.scss b/packages/themes/itzbund/src/components/input-email.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/itzbund/src/components/input-email.scss +++ b/packages/themes/itzbund/src/components/input-email.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/itzbund/src/components/input-file.scss b/packages/themes/itzbund/src/components/input-file.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/itzbund/src/components/input-file.scss +++ b/packages/themes/itzbund/src/components/input-file.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/itzbund/src/components/input-number.scss b/packages/themes/itzbund/src/components/input-number.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/itzbund/src/components/input-number.scss +++ b/packages/themes/itzbund/src/components/input-number.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/itzbund/src/components/input-password.scss b/packages/themes/itzbund/src/components/input-password.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/itzbund/src/components/input-password.scss +++ b/packages/themes/itzbund/src/components/input-password.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/itzbund/src/components/input-radio.scss b/packages/themes/itzbund/src/components/input-radio.scss index 8883fb04c1..6601bacad0 100644 --- a/packages/themes/itzbund/src/components/input-radio.scss +++ b/packages/themes/itzbund/src/components/input-radio.scss @@ -1,8 +1,8 @@ -@use '../@shared/label.scss'; +@import '../@shared/label'; -@import '../mixins/alert-wc.scss'; +@import '../mixins/alert-wc'; @import '../mixins/rem'; -@import '../mixins/typography.scss'; +@import '../mixins/typography'; @layer kol-theme-component { :host { @@ -15,9 +15,9 @@ :host input:focus { outline-color: var(--color-achat); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 3px; + outline-width: rem(3); } input { @@ -25,10 +25,10 @@ width: 100%; color: var(--color-anthrazit); border-color: var(--default-border); - border-width: 2px; + border-width: rem(2); border-style: solid; - border-radius: 5px; - /* padding: 10px 14px; */ + border-radius: rem(5); + /* padding: rem(10) rem(14); */ } input:hover { @@ -47,9 +47,9 @@ /* RADIO */ fieldset { - border: 0px; - margin: 0px; - padding: 0px; + border: 0; + margin: 0; + padding: 0; flex-wrap: wrap; } diff --git a/packages/themes/itzbund/src/components/input-range.scss b/packages/themes/itzbund/src/components/input-range.scss index eacce466db..5f8a4f34d1 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.scss'; +@import '../mixins/alert-wc'; @import '../mixins/rem'; -@import '../mixins/typography.scss'; +@import '../mixins/typography'; @layer kol-theme-component { :host { @@ -42,7 +42,7 @@ border-color: var(--color-subtle); border-radius: var(--border-radius); border-style: solid; - border-width: 2px; + border-width: rem(2); padding: 0 rem(8); } @@ -77,7 +77,7 @@ } .kol-input.error { - border-left: 3px solid var(--color-danger); + border-left: rem(3) solid var(--color-danger); padding-left: rem(16); } diff --git a/packages/themes/itzbund/src/components/input-text.scss b/packages/themes/itzbund/src/components/input-text.scss index 169513cdc8..5c1a18e4a6 100644 --- a/packages/themes/itzbund/src/components/input-text.scss +++ b/packages/themes/itzbund/src/components/input-text.scss @@ -1 +1 @@ -@use '../@shared/input-core.scss'; +@import '../@shared/input-core'; diff --git a/packages/themes/itzbund/src/components/link-button.scss b/packages/themes/itzbund/src/components/link-button.scss index 51192c6c0c..3af7ac431c 100644 --- a/packages/themes/itzbund/src/components/link-button.scss +++ b/packages/themes/itzbund/src/components/link-button.scss @@ -1 +1 @@ -@use '../@shared/link-core.scss'; +@import '../@shared/link-core'; diff --git a/packages/themes/itzbund/src/components/link.scss b/packages/themes/itzbund/src/components/link.scss index 51192c6c0c..3af7ac431c 100644 --- a/packages/themes/itzbund/src/components/link.scss +++ b/packages/themes/itzbund/src/components/link.scss @@ -1 +1 @@ -@use '../@shared/link-core.scss'; +@import '../@shared/link-core'; diff --git a/packages/themes/itzbund/src/components/nav.scss b/packages/themes/itzbund/src/components/nav.scss index a10fe34140..ae81dd595f 100644 --- a/packages/themes/itzbund/src/components/nav.scss +++ b/packages/themes/itzbund/src/components/nav.scss @@ -1,8 +1,10 @@ +@import '../mixins/rem'; + @layer kol-theme-component { :host > div > nav ul { list-style: none; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; border-radius: var(--border-radius); background-color: var(--color-petrol); } @@ -44,7 +46,7 @@ :host > div > nav .kol-link-wc a { border-radius: var(--border-radius); background-color: var(--color-petrol); - border: 1px solid transparent; + border: rem(1) solid transparent; grid: flex; line-height: 2; padding: 0.5em; @@ -72,7 +74,7 @@ :host > div > nav .kol-link-wc a:focus, :host > div > nav .kol-link-wc a:hover { - border: 1px solid white; + border: rem(1) solid white; background-color: var(--color-fluorit); color: var(--color-anthrazit); } diff --git a/packages/themes/itzbund/src/components/pagination.scss b/packages/themes/itzbund/src/components/pagination.scss index 2b7bd8e831..5629ffc012 100644 --- a/packages/themes/itzbund/src/components/pagination.scss +++ b/packages/themes/itzbund/src/components/pagination.scss @@ -5,6 +5,7 @@ border-radius: rem(32); font-family: var(--font-family-sans); } + .button-inner { background-color: var(--color-weiss); border-radius: rem(32); @@ -19,19 +20,23 @@ transition-property: background, color, border-color; transition-timing-function: ease-in-out; } + .hide-label .button-inner { padding: 0 rem(8); } + .button:not(:disabled):hover .button-inner, .button:focus .button-inner { background-color: var(--color-anthrazit); border-color: var(--color-anthrazit); color: var(--color-weiss); } + .button:disabled .button-inner { cursor: not-allowed; opacity: 0.5; } + .selected .button-inner { background-color: var(--color-achat); border-color: var(--color-achat); diff --git a/packages/themes/itzbund/src/components/progress.scss b/packages/themes/itzbund/src/components/progress.scss index 35e924f506..a34e166dfc 100644 --- a/packages/themes/itzbund/src/components/progress.scss +++ b/packages/themes/itzbund/src/components/progress.scss @@ -1,25 +1,30 @@ +@import '../mixins/rem'; + @layer kol-theme-component { :host { - --kolibri-text-label-padding: 60px; + --kolibri-text-label-padding: rem(60); } :host progress, :host span { display: block; - height: 0px; + height: 0; overflow: hidden; - width: 0px; + width: 0; } + svg line:first-child, svg circle:first-child { fill: transparent; stroke: var(--color-fluorit); } + svg line:last-child, svg circle:last-child { stroke: var(--color-achat); fill: transparent; } + progress { display: none; } diff --git a/packages/themes/itzbund/src/components/select.scss b/packages/themes/itzbund/src/components/select.scss index 52dfba3623..c896e602f2 100644 --- a/packages/themes/itzbund/src/components/select.scss +++ b/packages/themes/itzbund/src/components/select.scss @@ -1,10 +1,10 @@ -@use '../@shared/label.scss'; -@use '../@shared/kol-alert-wc.scss'; -@use '../@shared/kol-required.scss'; +@import '../@shared/label'; +@import '../@shared/kol-alert-wc'; +@import '../@shared/kol-required'; -@import '../mixins/alert-wc.scss'; -@import '../mixins/typography.scss'; -@import '../mixins/input-base.scss'; +@import '../mixins/alert-wc'; +@import '../mixins/typography'; +@import '../mixins/input-base'; @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 ccea92d855..dd6f047c31 100644 --- a/packages/themes/itzbund/src/components/single-select.scss +++ b/packages/themes/itzbund/src/components/single-select.scss @@ -1,11 +1,11 @@ -@use '../@shared/label.scss'; -@use '../@shared/kol-alert-wc.scss'; -@use '../@shared/kol-required.scss'; +@import '../@shared/label'; +@import '../@shared/kol-alert-wc'; +@import '../@shared/kol-required'; @import '../mixins/alert-wc'; @import '../mixins/rem'; -@import '../mixins/typography.scss'; -@import '../mixins/input-base.scss'; +@import '../mixins/typography'; +@import '../mixins/input-base'; $option-height: rem(40); $visible-options: 5; @@ -35,7 +35,7 @@ $visible-options: 5; outline-color: var(--primary); outline-offset: 0; outline-style: solid; - outline-width: 1px; + outline-width: rem(1); } } @@ -65,10 +65,10 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: 1px; + border-width: rem(1); border-radius: var(--border-radius); border-color: var(--kolibri-color-normal); - max-height: calc($option-height * $visible-options + 2px); + max-height: calc($option-height * $visible-options + rem(2)); background-color: #e8edf2; overflow-y: auto; overflow-x: hidden; diff --git a/packages/themes/itzbund/src/components/split-button.scss b/packages/themes/itzbund/src/components/split-button.scss index f767df770f..9c8a097168 100644 --- a/packages/themes/itzbund/src/components/split-button.scss +++ b/packages/themes/itzbund/src/components/split-button.scss @@ -1,4 +1,4 @@ -@import '../mixins/button.scss'; +@import '../mixins/button'; @import '../mixins/rem'; @layer kol-theme-component { @@ -14,8 +14,8 @@ .horizontal-line { background-color: var(--border-color); - border-radius: 2px; - width: 1px; + border-radius: rem(2); + width: rem(1); } .secondary-button button { @@ -25,30 +25,30 @@ .secondary-button > button > .kol-span-wc { border-top-right-radius: rem(32); border-bottom-right-radius: rem(32); - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } .secondary-button > button > :active > .kol-span-wc { border-top-right-radius: rem(32); border-bottom-right-radius: rem(32); - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } .secondary-button > button > :focus > .kol-span-wc { border-top-right-radius: rem(32); border-bottom-right-radius: rem(32); - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } .secondary-button > a, .secondary-button > button { border-top-right-radius: rem(32); border-bottom-right-radius: rem(32); - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; font-family: var(--font-family-sans); /* text-transform: uppercase; */ } @@ -57,8 +57,8 @@ button { border-top-left-radius: rem(32); border-bottom-left-radius: rem(32); - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; font-family: var(--font-family-sans); /* text-transform: uppercase; */ } @@ -69,8 +69,8 @@ border-bottom-left-radius: rem(32); font-size: inherit; padding: 0 rem(16); - min-width: 44px; - min-height: 44px; + min-width: rem(44); + min-height: rem(44); } @include kol-button; diff --git a/packages/themes/itzbund/src/components/table-stateful.scss b/packages/themes/itzbund/src/components/table-stateful.scss index 9b78023e32..9c047575c9 100644 --- a/packages/themes/itzbund/src/components/table-stateful.scss +++ b/packages/themes/itzbund/src/components/table-stateful.scss @@ -9,7 +9,7 @@ :host > div:last-child { border-style: solid; - border-width: 1px; + border-width: rem(1); border-color: var(--border-color); } diff --git a/packages/themes/itzbund/src/components/tabs.scss b/packages/themes/itzbund/src/components/tabs.scss index a21154722c..b2e71de617 100644 --- a/packages/themes/itzbund/src/components/tabs.scss +++ b/packages/themes/itzbund/src/components/tabs.scss @@ -21,7 +21,7 @@ .tabs-content { padding: 0.25em; - border: 1px solid var(--border-color); + border: rem(1) solid var(--border-color); } button { @@ -29,7 +29,7 @@ font-size: inherit; line-height: 1.25; cursor: pointer; - border-width: 2px; + border-width: rem(2); box-shadow: 0 0 0.25em gray; width: inherit; overflow: hidden; diff --git a/packages/themes/itzbund/src/components/textarea.scss b/packages/themes/itzbund/src/components/textarea.scss index a0a8796fb0..e4633f2933 100644 --- a/packages/themes/itzbund/src/components/textarea.scss +++ b/packages/themes/itzbund/src/components/textarea.scss @@ -1,10 +1,10 @@ -@use '../@shared/label.scss'; -@use '../@shared/kol-alert-wc.scss'; -@use '../@shared/kol-required.scss'; +@import '../@shared/label'; +@import '../@shared/kol-alert-wc'; +@import '../@shared/kol-required'; -@import '../mixins/alert-wc.scss'; -@import '../mixins/typography.scss'; -@import '../mixins/input-base.scss'; +@import '../mixins/alert-wc'; +@import '../mixins/typography'; +@import '../mixins/input-base'; @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 3c51677f89..ed3be7e5d1 100644 --- a/packages/themes/itzbund/src/components/toast-container.scss +++ b/packages/themes/itzbund/src/components/toast-container.scss @@ -1,10 +1,10 @@ -@use './alert.scss'; +@import './alert'; @import '../mixins/rem'; @layer kol-theme-component { :host { top: rem(16); - width: 750px; + width: rem(750); max-width: 100%; left: 50%; transform: translateX(-50%); diff --git a/packages/themes/itzbund/src/components/toolbar.scss b/packages/themes/itzbund/src/components/toolbar.scss index 447715144d..f214ff5f97 100644 --- a/packages/themes/itzbund/src/components/toolbar.scss +++ b/packages/themes/itzbund/src/components/toolbar.scss @@ -3,7 +3,7 @@ @layer kol-theme-component { .toolbar { padding: rem(8); - border-width: 1px; + border-width: rem(1); border-style: solid; border-radius: rem(4); border-color: var(--kolibri-border-color); diff --git a/packages/themes/itzbund/src/components/tree-item.scss b/packages/themes/itzbund/src/components/tree-item.scss index 07633c3232..666f1219c4 100644 --- a/packages/themes/itzbund/src/components/tree-item.scss +++ b/packages/themes/itzbund/src/components/tree-item.scss @@ -10,11 +10,11 @@ .tree-link { display: block; - border: 2px solid transparent; + border: rem(2) solid transparent; &:hover, &:focus-within { - border: 2px solid var(--border-color); + border: rem(2) solid var(--border-color); & > a { outline-offset: 0; diff --git a/packages/themes/itzbund/src/components/tree.scss b/packages/themes/itzbund/src/components/tree.scss index 81178edc15..db430a11e5 100644 --- a/packages/themes/itzbund/src/components/tree.scss +++ b/packages/themes/itzbund/src/components/tree.scss @@ -5,7 +5,7 @@ ul { display: flex; flex-direction: column; - border: 2px solid transparent; + border: rem(2) solid transparent; border-radius: rem(4); } @@ -13,7 +13,7 @@ outline: 0; ul { - border: 2px solid var(--color-petrol); + border: rem(2) solid var(--color-petrol); } } } diff --git a/packages/themes/itzbund/src/global.scss b/packages/themes/itzbund/src/global.scss index d44849984f..935285439d 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.scss'; +@import './mixins/typography'; @layer kol-theme-global { :host { @@ -56,9 +56,9 @@ textarea:focus { cursor: pointer; outline-color: var(--color-petrol); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 3px; + outline-width: rem(3); transition: outline-offset 0.2s linear; } @@ -78,7 +78,7 @@ .kol-tooltip-wc .tooltip-content { @include kol-typography-label; padding: rem(4) rem(8); - border-radius: 2px; - border: 1px solid #626262; + border-radius: rem(2); + border: rem(1) solid #626262; } } diff --git a/packages/themes/itzbund/src/mixins/alert-wc.scss b/packages/themes/itzbund/src/mixins/alert-wc.scss index 621d087895..7fbf386d9c 100644 --- a/packages/themes/itzbund/src/mixins/alert-wc.scss +++ b/packages/themes/itzbund/src/mixins/alert-wc.scss @@ -1,7 +1,7 @@ @import './rem'; @mixin kol-alert-theme { - --kolibri-border-width: 1px; + --kolibri-border-width: rem(1); .default { border-color: var(--color-anthrazit); diff --git a/packages/themes/itzbund/src/mixins/indented-text.scss b/packages/themes/itzbund/src/mixins/indented-text.scss index d807496a65..8ab747a0b5 100644 --- a/packages/themes/itzbund/src/mixins/indented-text.scss +++ b/packages/themes/itzbund/src/mixins/indented-text.scss @@ -1,7 +1,9 @@ +@import './rem'; + @mixin indented-text { font-family: var(--font-family); - border-left: 4px solid var(--color-petrol); + border-left: rem(4) solid var(--color-petrol); padding: 0.25em 0.5em; - margin-left: -4px; + margin-left: rem(-4); width: 100%; } diff --git a/packages/themes/itzbund/src/mixins/input-base.scss b/packages/themes/itzbund/src/mixins/input-base.scss index 25001222d3..393838f5ca 100644 --- a/packages/themes/itzbund/src/mixins/input-base.scss +++ b/packages/themes/itzbund/src/mixins/input-base.scss @@ -1,6 +1,8 @@ +@import './rem'; + @mixin kol-input-border { color: var(--default-letter); - border-width: 1px; + border-width: rem(1); border-style: solid; border-radius: 0; border-color: var(--kolibri-color-normal); @@ -27,9 +29,10 @@ outline-color: var(--primary); outline-offset: 0; outline-style: solid; - outline-width: 1px; + outline-width: rem(1); } } + @mixin kol-input-error { background-color: var(--color-rotton-20); border-color: var(--color-rotton); @@ -44,6 +47,6 @@ outline-color: var(--primary); outline-offset: 0; outline-style: solid; - outline-width: 1px; + outline-width: rem(1); } } 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 e1c4e08f7c..18e1b42bd6 100644 --- a/packages/themes/itzbund/src/mixins/kol-table-stateless-wc.scss +++ b/packages/themes/itzbund/src/mixins/kol-table-stateless-wc.scss @@ -1,3 +1,5 @@ +@import './rem'; + @mixin kol-table-stateless-wc { @layer kol-theme-component { .table { @@ -6,9 +8,9 @@ .table:has(.focus-element:focus) { outline-color: var(--color-petrol); - outline-offset: 2px; + outline-offset: rem(2); outline-style: solid; - outline-width: 3px; + outline-width: rem(3); transition: outline-offset 0.2s linear; } @@ -16,17 +18,17 @@ width: 100%; border-collapse: collapse; border-spacing: 0; - border: 1px solid var(--color-petrol); - border-width: 0 1px 1px 1px; + border: rem(1) solid var(--color-petrol); + border-width: 0 rem(1) rem(1) rem(1); } tr { - border-top: 1px solid var(--color-petrol); + border-top: rem(1) solid var(--color-petrol); } th, td { - border-right: 1px solid var(--color-petrol); + border-right: rem(1) solid var(--color-petrol); &:last-child { border-right-width: 0; @@ -62,8 +64,8 @@ border-color: var(--color-petrol); outline-color: var(--color-petrol); outline-style: solid; - outline-offset: 2px; - outline-width: 3px; + outline-offset: rem(2); + outline-width: rem(3); } } @@ -101,8 +103,8 @@ border-color: var(--color-petrol); border-color: var(--color-anthrazit); outline-style: solid; - outline-offset: 2px; - outline-width: 3px; + outline-offset: rem(2); + outline-width: rem(2); } } } diff --git a/packages/themes/itzbund/src/mixins/link.scss b/packages/themes/itzbund/src/mixins/link.scss index 9a67b6f5d7..bd4c9ad97a 100644 --- a/packages/themes/itzbund/src/mixins/link.scss +++ b/packages/themes/itzbund/src/mixins/link.scss @@ -1,4 +1,4 @@ -@import './rem.scss'; +@import './rem'; @mixin kol-link { .kol-link-wc a, @@ -37,7 +37,7 @@ } a.skip { - left: -99999px; + left: rem(-99999); overflow: hidden; position: absolute; z-index: 9999999; diff --git a/packages/themes/itzbund/src/mixins/typography.scss b/packages/themes/itzbund/src/mixins/typography.scss index 7ea3b56d41..1684f32768 100644 --- a/packages/themes/itzbund/src/mixins/typography.scss +++ b/packages/themes/itzbund/src/mixins/typography.scss @@ -1,48 +1,48 @@ @import './rem'; @mixin kol-typography-body { - font-size: 16px; + font-size: rem(16); line-height: 1.5; } @mixin kol-typography-h1 { font-family: var(--font-family-serif); - font-size: 54px; + font-size: rem(54); font-weight: bold; line-height: 1; } @mixin kol-typography-h2 { font-family: var(--font-family-serif); - font-size: 32px; + font-size: rem(32); font-weight: bold; line-height: 1; } @mixin kol-typography-h3 { font-family: var(--font-family-serif); - font-size: 26px; + font-size: rem(26); font-weight: bold; line-height: 1; } @mixin kol-typography-h4 { font-family: var(--font-family-serif); - font-size: 20px; + font-size: rem(20); font-weight: normal; line-height: 1; } @mixin kol-typography-h5 { font-family: var(--font-family-serif); - font-size: 17px; + font-size: rem(17); font-weight: bold; line-height: 1; } @mixin kol-typography-h6 { font-family: var(--font-family-sans); - font-size: 17px; + font-size: rem(17); font-weight: normal; line-height: 1; } @@ -59,7 +59,7 @@ } @mixin kol-typography-label { - font-size: 14px; + font-size: rem(14); line-height: 1.25; } diff --git a/packages/themes/package.json b/packages/themes/package.json index 606f726eed..ba693845aa 100644 --- a/packages/themes/package.json +++ b/packages/themes/package.json @@ -45,6 +45,7 @@ ], "scripts": { "build": "rollup -c", + "build:deps": "pnpm --filter @public-ui/themes^... build", "dev": "rollup -c --watch", "format": "prettier --check src", "lint": "tsc --noemit && eslint src", From a78c1888fed46e85292c82313076a3e6023c7ef3 Mon Sep 17 00:00:00 2001 From: Martin Oppitz <6279703+deleonio@users.noreply.github.com> Date: Tue, 29 Oct 2024 09:24:36 +0100 Subject: [PATCH 2/5] fix: scss variablen korrigiert mit #{} notation --- packages/components/src/components/a11y.scss | 2 +- .../src/components/input-password/style.scss | 2 +- .../src/components/input-radio/style.scss | 2 +- packages/themes/bmf/src/global.scss | 4 ++-- packages/themes/default/src/global.scss | 6 +++--- .../src/ecl-ec/components/link-button.scss | 4 +++- .../ecl/src/ecl-ec/components/tabs.scss | 2 +- packages/themes/ecl/src/ecl-ec/global.scss | 20 +++++++++---------- .../ecl/src/ecl-eu/components/button.scss | 2 +- .../src/ecl-eu/components/link-button.scss | 2 +- .../ecl/src/ecl-eu/components/pagination.scss | 2 +- .../ecl/src/ecl-eu/components/tabs.scss | 2 +- packages/themes/ecl/src/ecl-eu/global.scss | 20 +++++++++---------- .../itzbund/src/components/progress.scss | 2 +- packages/themes/itzbund/src/global.scss | 4 ++-- .../themes/itzbund/src/mixins/alert-wc.scss | 2 +- 16 files changed, 40 insertions(+), 38 deletions(-) diff --git a/packages/components/src/components/a11y.scss b/packages/components/src/components/a11y.scss index e3ab5535f1..458f08f302 100644 --- a/packages/components/src/components/a11y.scss +++ b/packages/components/src/components/a11y.scss @@ -6,7 +6,7 @@ /* * Minimum size of interactive elements. */ - --a11y-min-size: rem(44); + --a11y-min-size: #{rem(44)}; /* * No element should be used without a background and font color whose contrast ratio has * not been checked. By initially setting the background color to white and the font color diff --git a/packages/components/src/components/input-password/style.scss b/packages/components/src/components/input-password/style.scss index 555b3bf78f..6d70367b20 100644 --- a/packages/components/src/components/input-password/style.scss +++ b/packages/components/src/components/input-password/style.scss @@ -15,6 +15,6 @@ } .kol-tooltip-wc { - --kol-tooltip-width: rem(160); + --kol-tooltip-width: #{rem(160)}; } } diff --git a/packages/components/src/components/input-radio/style.scss b/packages/components/src/components/input-radio/style.scss index ff149c7427..42b7a22914 100644 --- a/packages/components/src/components/input-radio/style.scss +++ b/packages/components/src/components/input-radio/style.scss @@ -6,7 +6,7 @@ @layer kol-component { :host { - --border-width: rem(2); + --border-width: #{rem(2)}; --input-size: 1.5em; font-size: rem(16); } diff --git a/packages/themes/bmf/src/global.scss b/packages/themes/bmf/src/global.scss index 51038ae7b5..cb1104c4c1 100644 --- a/packages/themes/bmf/src/global.scss +++ b/packages/themes/bmf/src/global.scss @@ -4,7 +4,7 @@ @layer kol-theme-global { /* Design Tokens */ :host { - --border-radius: rem(5); + --border-radius: #{rem(5)}; --color-midnight: #004b76; --color-ocean: #0077b6; --color-sky: #99c9e2; @@ -39,7 +39,7 @@ --color-cloud: #f6f7f7; --color-white: #ffffff; --font-family: Verdana, Arial, Calibri, Helvetica, sans-serif; - --font-size: rem(16); + --font-size: #{rem(16)}; --spacing: 0.25em; } diff --git a/packages/themes/default/src/global.scss b/packages/themes/default/src/global.scss index 1689798b20..a80954986c 100644 --- a/packages/themes/default/src/global.scss +++ b/packages/themes/default/src/global.scss @@ -2,11 +2,11 @@ @layer kol-theme-global { :host { - --border-radius: var(--kolibri-border-radius, rem(5)); + --border-radius: var(--kolibri-border-radius, #{rem(5)}); --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif); - --font-size: var(--kolibri-font-size, rem(16)); + --font-size: var(--kolibri-font-size, #{rem(16)}); --spacing: var(--kolibri-spacing, #{rem(4)}); - --border-width: var(--kolibri-border-width, rem(1)); + --border-width: var(--kolibri-border-width, #{rem(1)}); --color-primary: var(--kolibri-color-primary, #004b76); --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6); --color-danger: var(--kolibri-color-danger, #b4003c); 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 73f9f43a73..44ce9cf8a0 100644 --- a/packages/themes/ecl/src/ecl-ec/components/link-button.scss +++ b/packages/themes/ecl/src/ecl-ec/components/link-button.scss @@ -2,14 +2,16 @@ @layer kol-theme-component { :host { - --kolibri-spacing: rem(4); + --kolibri-spacing: #{rem(4)}; } + a, button { appearance: none; color: var(--color-blue); text-decoration: underline; } + a:hover, button:hover { color: var(--color-blue-130); diff --git a/packages/themes/ecl/src/ecl-ec/components/tabs.scss b/packages/themes/ecl/src/ecl-ec/components/tabs.scss index cf163fc647..450549ab67 100644 --- a/packages/themes/ecl/src/ecl-ec/components/tabs.scss +++ b/packages/themes/ecl/src/ecl-ec/components/tabs.scss @@ -3,7 +3,7 @@ @layer kol-theme-component { :host { font-family: var(--font-family); - --kolibri-spacing: rem(4); + --kolibri-spacing: #{rem(4)}; } .tabs-button-group { diff --git a/packages/themes/ecl/src/ecl-ec/global.scss b/packages/themes/ecl/src/ecl-ec/global.scss index b978d3318e..d91c98e69a 100644 --- a/packages/themes/ecl/src/ecl-ec/global.scss +++ b/packages/themes/ecl/src/ecl-ec/global.scss @@ -52,20 +52,20 @@ --color-black: #000; --color-white: #fff; --font-family: Arial, sans-serif; - --font-size: rem(16); + --font-size: #{rem(16)}; --font-weight: 400; --font-weight-bold: 600; --line-height: 1.5; --line-height-heading: 1.2; - --spacing-4xl: rem(64); - --spacing-3xl: rem(48); - --spacing-2xl: rem(40); - --spacing-xl: rem(32); - --spacing-l: rem(24); - --spacing-m: rem(16); - --spacing-s: rem(12); - --spacing-xs: rem(8); - --spacing-2xs: rem(4); + --spacing-4xl: #{rem(64)}; + --spacing-3xl: #{rem(48)}; + --spacing-2xl: #{rem(40)}; + --spacing-xl: #{rem(32)}; + --spacing-l: #{rem(24)}; + --spacing-m: #{rem(16)}; + --spacing-s: #{rem(12)}; + --spacing-xs: #{rem(8)}; + --spacing-2xs: #{rem(4)}; } a, diff --git a/packages/themes/ecl/src/ecl-eu/components/button.scss b/packages/themes/ecl/src/ecl-eu/components/button.scss index 94deafac60..b73e984339 100644 --- a/packages/themes/ecl/src/ecl-eu/components/button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/button.scss @@ -3,7 +3,7 @@ @layer kol-theme-component { :host { - --kolibri-spacing: rem(4); + --kolibri-spacing: #{rem(4)}; font-family: var(--font-family); } 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 5451549a3a..5c4a5414ff 100644 --- a/packages/themes/ecl/src/ecl-eu/components/link-button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/link-button.scss @@ -2,7 +2,7 @@ @layer kol-theme-component { :host { - --kolibri-spacing: rem(4); + --kolibri-spacing: #{rem(4)}; font-family: var(--font-family); } diff --git a/packages/themes/ecl/src/ecl-eu/components/pagination.scss b/packages/themes/ecl/src/ecl-eu/components/pagination.scss index 4698170ffd..f30d57acae 100644 --- a/packages/themes/ecl/src/ecl-eu/components/pagination.scss +++ b/packages/themes/ecl/src/ecl-eu/components/pagination.scss @@ -7,7 +7,7 @@ } .button { - --kolibri-spacing: rem(4); + --kolibri-spacing: #{rem(4)}; border-radius: rem(4); &:focus { diff --git a/packages/themes/ecl/src/ecl-eu/components/tabs.scss b/packages/themes/ecl/src/ecl-eu/components/tabs.scss index 29d030e4a2..d2f7d4d58c 100644 --- a/packages/themes/ecl/src/ecl-eu/components/tabs.scss +++ b/packages/themes/ecl/src/ecl-eu/components/tabs.scss @@ -3,7 +3,7 @@ @layer kol-theme-component { :host { font-family: var(--font-family); - --kolibri-spacing: rem(4); + --kolibri-spacing: #{rem(4)}; } .tabs-button-group { diff --git a/packages/themes/ecl/src/ecl-eu/global.scss b/packages/themes/ecl/src/ecl-eu/global.scss index 8135817fd7..0b998cffad 100644 --- a/packages/themes/ecl/src/ecl-eu/global.scss +++ b/packages/themes/ecl/src/ecl-eu/global.scss @@ -109,20 +109,20 @@ --color-white: #fff; --color-black: #000; --font-family: Arial, sans-serif; - --font-size: rem(16); + --font-size: #{rem(16)}; --font-weight-regular: 400; --font-weight-bold: 700; --line-height-regular: 1.5; --line-height-heading: 1.2; - --spacing-4xl: rem(64); - --spacing-3xl: rem(48); - --spacing-2xl: rem(40); - --spacing-xl: rem(32); - --spacing-l: rem(24); - --spacing-m: rem(16); - --spacing-s: rem(12); - --spacing-xs: rem(8); - --spacing-2xs: rem(4); + --spacing-4xl: #{rem(64)}; + --spacing-3xl: #{rem(48)}; + --spacing-2xl: #{rem(40)}; + --spacing-xl: #{rem(32)}; + --spacing-l: #{rem(24)}; + --spacing-m: #{rem(16)}; + --spacing-s: #{rem(12)}; + --spacing-xs: #{rem(8)}; + --spacing-2xs: #{rem(4)}; } a, diff --git a/packages/themes/itzbund/src/components/progress.scss b/packages/themes/itzbund/src/components/progress.scss index a34e166dfc..6f4d52277c 100644 --- a/packages/themes/itzbund/src/components/progress.scss +++ b/packages/themes/itzbund/src/components/progress.scss @@ -2,7 +2,7 @@ @layer kol-theme-component { :host { - --kolibri-text-label-padding: rem(60); + --kolibri-text-label-padding: #{rem(60)}; } :host progress, diff --git a/packages/themes/itzbund/src/global.scss b/packages/themes/itzbund/src/global.scss index 935285439d..91a5bf8484 100644 --- a/packages/themes/itzbund/src/global.scss +++ b/packages/themes/itzbund/src/global.scss @@ -4,7 +4,7 @@ @layer kol-theme-global { :host { --border-color: var(--color-anthrazit); - --border-radius: rem(2); + --border-radius: #{rem(2)}; --color-anthrazit: #333; --color-jade: #f3f7fb; --color-weiss: #fff; @@ -26,7 +26,7 @@ --gradient-gelb-citrin: linear-gradient(67deg, var(--color-gelb), var(--color-citrin)); --font-family-sans: Verdana; --font-family-serif: 'Times New Roman'; - --font-size: rem(16); + --font-size: #{rem(16)}; --spacing: 0.125em; --kolibri-spacing: calc(2 * var(--spacing)); } diff --git a/packages/themes/itzbund/src/mixins/alert-wc.scss b/packages/themes/itzbund/src/mixins/alert-wc.scss index 7fbf386d9c..e7a98a85a1 100644 --- a/packages/themes/itzbund/src/mixins/alert-wc.scss +++ b/packages/themes/itzbund/src/mixins/alert-wc.scss @@ -1,7 +1,7 @@ @import './rem'; @mixin kol-alert-theme { - --kolibri-border-width: rem(1); + --kolibri-border-width: #{rem(1)}; .default { border-color: var(--color-anthrazit); From 79a5fc721fb4c2d89155c9a1e5f45f410b121e76 Mon Sep 17 00:00:00 2001 From: Martin Oppitz <6279703+deleonio@users.noreply.github.com> Date: Tue, 29 Oct 2024 10:25:44 +0100 Subject: [PATCH 3/5] fix: scss correct import --- packages/components/src/components/button.scss | 4 ++-- .../components/src/components/input-checkbox/style.scss | 8 ++++---- packages/components/src/components/input-line.scss | 2 +- packages/components/src/components/input.scss | 6 +++--- packages/components/src/components/label.scss | 2 +- packages/components/src/components/link.scss | 4 ++-- packages/components/src/components/spin/style.scss | 4 ++-- packages/components/src/components/style.scss | 4 ++-- packages/themes/default/src/mixins/alert-wc.scss | 2 +- packages/themes/default/src/mixins/button.scss | 2 +- packages/themes/default/src/mixins/focus-outline.scss | 2 +- packages/themes/default/src/mixins/indented-text.scss | 2 +- packages/themes/default/src/mixins/input-error.scss | 2 +- .../themes/default/src/mixins/kol-table-stateless-wc.scss | 2 +- packages/themes/default/src/mixins/link.scss | 2 +- packages/themes/default/src/mixins/typography.scss | 2 +- 16 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/components/src/components/button.scss b/packages/components/src/components/button.scss index 11138bae34..c3c41bdba8 100644 --- a/packages/components/src/components/button.scss +++ b/packages/components/src/components/button.scss @@ -1,5 +1,5 @@ -@import '@shared/mixins'; -@import 'style'; +@import './@shared/mixins'; +@import './style'; @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 227ae44303..94151deeed 100644 --- a/packages/components/src/components/input-checkbox/style.scss +++ b/packages/components/src/components/input-checkbox/style.scss @@ -1,8 +1,8 @@ @import '../input'; -@import 'common'; -@import 'button'; -@import 'checkbox'; -@import 'switch'; +@import './common'; +@import './button'; +@import './checkbox'; +@import './switch'; @import '../@shared/kol-alert-mixin'; @include kol-alert-styles; diff --git a/packages/components/src/components/input-line.scss b/packages/components/src/components/input-line.scss index 19a8a831de..77bfcd7d98 100644 --- a/packages/components/src/components/input-line.scss +++ b/packages/components/src/components/input-line.scss @@ -1,4 +1,4 @@ -@import 'input'; +@import './input'; @layer kol-component { .kol-input { diff --git a/packages/components/src/components/input.scss b/packages/components/src/components/input.scss index d307157e27..ae517c704f 100644 --- a/packages/components/src/components/input.scss +++ b/packages/components/src/components/input.scss @@ -1,6 +1,6 @@ -@import '@shared/mixins'; -@import 'label'; -@import 'host-display-block'; +@import './@shared/mixins'; +@import './label'; +@import './host-display-block'; @layer kol-component { input, diff --git a/packages/components/src/components/label.scss b/packages/components/src/components/label.scss index c4d15aa7b2..3c7b9c6852 100644 --- a/packages/components/src/components/label.scss +++ b/packages/components/src/components/label.scss @@ -1,4 +1,4 @@ -@import 'style'; +@import './style'; @layer kol-component { .required label > span::after, diff --git a/packages/components/src/components/link.scss b/packages/components/src/components/link.scss index 0cb523c2c4..36abca4eec 100644 --- a/packages/components/src/components/link.scss +++ b/packages/components/src/components/link.scss @@ -1,5 +1,5 @@ -@import '@shared/mixins'; -@import 'style'; +@import './@shared/mixins'; +@import './style'; @layer kol-component { :host { diff --git a/packages/components/src/components/spin/style.scss b/packages/components/src/components/spin/style.scss index 2f4ea1a753..30c01a864f 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'; +@import './cycle'; +@import './dot'; @layer kol-component { :host { diff --git a/packages/components/src/components/style.scss b/packages/components/src/components/style.scss index 6106cf7761..022fd4fc26 100644 --- a/packages/components/src/components/style.scss +++ b/packages/components/src/components/style.scss @@ -1,5 +1,5 @@ -@import 'a11y'; -@import 'preset'; +@import './a11y'; +@import './preset'; @layer kol-global { :host { diff --git a/packages/themes/default/src/mixins/alert-wc.scss b/packages/themes/default/src/mixins/alert-wc.scss index 5061fecd68..a71520c40c 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'; +@import './rem'; @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 59fb934d34..850b3c788e 100644 --- a/packages/themes/default/src/mixins/button.scss +++ b/packages/themes/default/src/mixins/button.scss @@ -1,4 +1,4 @@ -@import 'rem'; +@import './rem'; @import './focus-outline'; @mixin kol-button { diff --git a/packages/themes/default/src/mixins/focus-outline.scss b/packages/themes/default/src/mixins/focus-outline.scss index 6ce314ae85..96c555b4f5 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'; +@import './rem'; @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 d367995703..05333ee21e 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'; +@import './rem'; @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 4fa0884ba9..1cf94640cd 100644 --- a/packages/themes/default/src/mixins/input-error.scss +++ b/packages/themes/default/src/mixins/input-error.scss @@ -1,4 +1,4 @@ -@import 'rem'; +@import './rem'; @import '../mixins/alert-wc'; @mixin input-error { 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 d212ee18f1..5961305476 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'; +@import './rem'; @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 108b4ad70f..5f7ab2f842 100644 --- a/packages/themes/default/src/mixins/link.scss +++ b/packages/themes/default/src/mixins/link.scss @@ -1,4 +1,4 @@ -@import 'rem'; +@import './rem'; @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 760c928ac2..2774781bd0 100644 --- a/packages/themes/default/src/mixins/typography.scss +++ b/packages/themes/default/src/mixins/typography.scss @@ -1,4 +1,4 @@ -@import 'rem'; +@import './rem'; @mixin kol-typography-body { font-size: rem(16); From 0006019c7d1f67573aaa801e0bd2f7e82c1cf237 Mon Sep 17 00:00:00 2001 From: Martin Oppitz <6279703+deleonio@users.noreply.github.com> Date: Tue, 29 Oct 2024 11:05:08 +0100 Subject: [PATCH 4/5] fix: default heading line heights --- packages/themes/default/src/mixins/typography.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/themes/default/src/mixins/typography.scss b/packages/themes/default/src/mixins/typography.scss index 2774781bd0..dbea775262 100644 --- a/packages/themes/default/src/mixins/typography.scss +++ b/packages/themes/default/src/mixins/typography.scss @@ -7,17 +7,17 @@ @mixin kol-typography-h1 { font-size: rem(24); - line-height: 1.25; + line-height: 1.667; } @mixin kol-typography-h2 { font-size: rem(20); - line-height: 1.143; + line-height: 1.4; } @mixin kol-typography-h3 { font-size: rem(18); - line-height: 1.1667; + line-height: 1.333; } @mixin kol-typography-accordion { From 977092731ade0014d8e6c82abb892a9f3a9a5250 Mon Sep 17 00:00:00 2001 From: "publicuibot[bot]" <175724668+publicuibot[bot]@users.noreply.github.com> Date: Tue, 29 Oct 2024 13:20:21 +0000 Subject: [PATCH 5/5] chore: release 2.1.9 --- lerna.json | 2 +- packages/adapters/angular/v15/package.json | 2 +- packages/adapters/angular/v16/package.json | 2 +- packages/adapters/angular/v17/package.json | 2 +- packages/adapters/angular/v18/package.json | 2 +- packages/adapters/hydrate/package.json | 2 +- packages/adapters/preact/package.json | 2 +- packages/adapters/react-standalone/package.json | 2 +- packages/adapters/react/package.json | 2 +- packages/adapters/solid/package.json | 2 +- packages/adapters/vue/package.json | 2 +- packages/components/package.json | 2 +- packages/designer/package.json | 2 +- packages/samples/react/package.json | 2 +- packages/themes/default/package.json | 2 +- packages/themes/package.json | 2 +- packages/tools/kolibri-cli/package.json | 2 +- packages/tools/visual-tests/package.json | 2 +- publiccode.yml | 4 ++-- 19 files changed, 20 insertions(+), 20 deletions(-) diff --git a/lerna.json b/lerna.json index 0bf72e0710..ef0475c44a 100644 --- a/lerna.json +++ b/lerna.json @@ -23,5 +23,5 @@ "packages/tools/visual-tests" ], "useNx": true, - "version": "2.1.9-rc.0" + "version": "2.1.9" } diff --git a/packages/adapters/angular/v15/package.json b/packages/adapters/angular/v15/package.json index e498269124..aa1f201f3b 100644 --- a/packages/adapters/angular/v15/package.json +++ b/packages/adapters/angular/v15/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/angular-v15", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/angular/v16/package.json b/packages/adapters/angular/v16/package.json index 092fa68e13..ffac7bfab0 100644 --- a/packages/adapters/angular/v16/package.json +++ b/packages/adapters/angular/v16/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/angular-v16", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/angular/v17/package.json b/packages/adapters/angular/v17/package.json index 50d758c489..b1b1dbbd9e 100644 --- a/packages/adapters/angular/v17/package.json +++ b/packages/adapters/angular/v17/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/angular-v17", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/angular/v18/package.json b/packages/adapters/angular/v18/package.json index bff58f8ed8..c3a227814e 100644 --- a/packages/adapters/angular/v18/package.json +++ b/packages/adapters/angular/v18/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/angular-v18", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/hydrate/package.json b/packages/adapters/hydrate/package.json index 8b94567274..c8b8e61d71 100644 --- a/packages/adapters/hydrate/package.json +++ b/packages/adapters/hydrate/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/hydrate", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/preact/package.json b/packages/adapters/preact/package.json index bad8d886e6..9ec7bac943 100644 --- a/packages/adapters/preact/package.json +++ b/packages/adapters/preact/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/preact", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/react-standalone/package.json b/packages/adapters/react-standalone/package.json index c0e37701f2..c19eb2f5cb 100644 --- a/packages/adapters/react-standalone/package.json +++ b/packages/adapters/react-standalone/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/react-standalone", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/react/package.json b/packages/adapters/react/package.json index 307086c757..3b45c1efdf 100644 --- a/packages/adapters/react/package.json +++ b/packages/adapters/react/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/react", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/solid/package.json b/packages/adapters/solid/package.json index 793ce1d0b0..b2fb28a92f 100644 --- a/packages/adapters/solid/package.json +++ b/packages/adapters/solid/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/solid", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/vue/package.json b/packages/adapters/vue/package.json index dedb2fc6d1..203d4f8119 100644 --- a/packages/adapters/vue/package.json +++ b/packages/adapters/vue/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/vue", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/components/package.json b/packages/components/package.json index 27d534b452..1d21db1c99 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/components", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/designer/package.json b/packages/designer/package.json index db5e6efcfb..7c12d3184a 100644 --- a/packages/designer/package.json +++ b/packages/designer/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/designer", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/samples/react/package.json b/packages/samples/react/package.json index f3ab9a3d4c..30aec9551f 100644 --- a/packages/samples/react/package.json +++ b/packages/samples/react/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/sample-react", - "version": "2.1.9-rc.0", + "version": "2.1.9", "description": "This app contains samples for the KoliBri/Public UI", "license": "EUPL-1.2", "repository": { diff --git a/packages/themes/default/package.json b/packages/themes/default/package.json index d106363cf7..1f77695036 100644 --- a/packages/themes/default/package.json +++ b/packages/themes/default/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/theme-default", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/themes/package.json b/packages/themes/package.json index ba693845aa..1465e67886 100644 --- a/packages/themes/package.json +++ b/packages/themes/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/themes", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/tools/kolibri-cli/package.json b/packages/tools/kolibri-cli/package.json index 1ad483c213..e5ee6cb180 100644 --- a/packages/tools/kolibri-cli/package.json +++ b/packages/tools/kolibri-cli/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/kolibri-cli", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/tools/visual-tests/package.json b/packages/tools/visual-tests/package.json index a39776bd41..df792de1d5 100644 --- a/packages/tools/visual-tests/package.json +++ b/packages/tools/visual-tests/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/visual-tests", - "version": "2.1.9-rc.0", + "version": "2.1.9", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/publiccode.yml b/publiccode.yml index 53422bd133..be89288389 100644 --- a/publiccode.yml +++ b/publiccode.yml @@ -3,8 +3,8 @@ name: KoliBri - The accessible HTML-Standard applicationSuite: Informationstechnikzentrum Bund url: https://github.com/public-ui/kolibri.git landingURL: https://github.com/public-ui -releaseDate: '2024-10-09' -softwareVersion: 2.1.9-rc.0 +releaseDate: '2024-10-29' +softwareVersion: 2.1.9 logo: https://avatars.githubusercontent.com/u/109126739 platforms: - android