From e53a8828af86321c4acf85219d9e6210e06e2d1a Mon Sep 17 00:00:00 2001 From: leagrdv Date: Wed, 18 Dec 2024 16:23:39 +0100 Subject: [PATCH 1/4] remove all usage of size (hair, huge, etc.) variables --- .../post-card-control/post-card-control.scss | 36 ++--- .../components/post-rating/post-rating.scss | 4 +- .../components/post-tooltip/post-tooltip.scss | 10 +- .../.storybook/addons/addons.scss | 12 +- .../version-switcher/version-switcher.scss | 8 +- .../.storybook/styles/components/blocks.scss | 26 ++-- .../.storybook/styles/components/tabs.scss | 10 +- .../.storybook/styles/preview.scss | 8 +- .../src/shared/tile/tile.component.scss | 21 +-- .../icons/search/search-icons.styles.scss | 22 +-- .../typography/typography.styles.scss | 16 ++- .../guidelines/angular/angular.styles.scss | 8 +- .../src/stories/introduction.styles.scss | 15 +- .../utilities/elevation/elevation.styles.scss | 14 +- .../stories/utilities/flex/flex.styles.scss | 8 +- .../src/stories/utilities/text/text.docs.mdx | 4 - .../stories/utilities/text/text.module.scss | 1 - .../src/lib/primeng-theme/_extensions.scss | 10 +- .../styles/src/components/breadcrumb.scss | 5 +- .../styles/src/components/button-group.scss | 11 +- .../styles/src/components/card-control.scss | 38 ++--- packages/styles/src/components/card.scss | 19 ++- packages/styles/src/components/datatable.scss | 39 +++--- .../styles/src/components/datepicker.scss | 2 +- packages/styles/src/components/dialog.scss | 29 ++-- packages/styles/src/components/dropdown.scss | 13 +- .../styles/src/components/form-range.scss | 14 +- .../intranet-header/_language-chooser.scss | 5 +- .../components/intranet-header/_sidebar.scss | 14 +- packages/styles/src/components/modal.scss | 4 +- .../styles/src/components/pagination.scss | 17 ++- .../styles/src/components/product-card.scss | 11 +- packages/styles/src/components/sizing.scss | 45 ------ packages/styles/src/components/stepper.scss | 65 +++++---- .../styles/src/components/subnavigation.scss | 29 ++-- .../src/components/tabs/_tab-title.scss | 11 +- packages/styles/src/mixins/_index.scss | 1 - packages/styles/src/mixins/_notification.scss | 2 +- packages/styles/src/mixins/_size.scss | 65 --------- packages/styles/src/mixins/_utilities.scss | 6 - packages/styles/src/variables/_animation.scss | 16 ++- packages/styles/src/variables/_spacing.scss | 131 ------------------ packages/styles/src/variables/_type.scss | 13 +- .../src/variables/components/_badge.scss | 14 +- .../src/variables/components/_button.scss | 23 +-- .../src/variables/components/_card.scss | 9 +- .../src/variables/components/_chip.scss | 16 ++- .../src/variables/components/_close.scss | 10 +- .../src/variables/components/_datatable.scss | 20 +-- .../src/variables/components/_form-check.scss | 14 +- .../src/variables/components/_forms.scss | 9 +- .../src/variables/components/_modal.scss | 29 ++-- .../src/variables/components/_navbar.scss | 11 +- .../variables/components/_notification.scss | 10 +- .../src/variables/components/_pagination.scss | 17 +-- .../src/variables/components/_spinners.scss | 9 +- .../src/variables/components/_stepper.scss | 17 ++- .../variables/components/_subnavigation.scss | 14 +- .../src/variables/components/_tables.scss | 13 +- .../styles/src/variables/components/_tag.scss | 17 ++- packages/styles/tests/mixins/index.test.scss | 8 -- packages/styles/tests/mixins/size.test.scss | 11 -- 62 files changed, 519 insertions(+), 590 deletions(-) delete mode 100644 packages/styles/src/mixins/_size.scss delete mode 100644 packages/styles/tests/mixins/size.test.scss diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss index ba070ab501..4922e020a0 100644 --- a/packages/components/src/components/post-card-control/post-card-control.scss +++ b/packages/components/src/components/post-card-control/post-card-control.scss @@ -4,6 +4,10 @@ @use '@swisspost/design-system-styles/components/form-check'; @use '@swisspost/design-system-styles/components/checkbox'; @use '@swisspost/design-system-styles/components/radio-button'; +@use '@swisspost/design-system-styles/tokens/utilities'; +@use '@swisspost/design-system-styles/functions/tokens'; + +tokens.$default-map: utilities.$post-spacing; /* * There are a whole bunch of !important statements in this file. @@ -22,7 +26,7 @@ :host-context(fieldset) { &:host(:not(:last-child)) { .card-control { - margin-bottom: post.$size-regular; + margin-bottom: tokens.get('utility-gap-16'); } } } @@ -38,18 +42,18 @@ display: grid; grid-template: 'input label icon' 'input content content' / min-content auto min-content; align-items: center; - gap: 0 post.$size-mini; + gap: 0 tokens.get('utility-gap-8'); margin: 0; - padding: post.$size-regular; + padding: tokens.get('utility-gap-12'); background-color: var(--post-card-control-bg); - border: post.$size-line solid var(--post-card-control-border-color); + border: tokens.get('utility-gap-2') solid var(--post-card-control-border-color); border-radius: post.$border-radius; color: var(--post-card-control-color) !important; cursor: pointer; .card-control--input { grid-area: input; - margin: post.$size-micro 0; + margin: tokens.get('utility-gap-4') 0; background-color: var(--post-card-control-input-bg) !important; border-color: var(--post-card-control-input-border-color) !important; color: var(--post-card-control-input-border-color) !important; @@ -79,7 +83,7 @@ .card-control--label { grid-area: label; - margin: post.$size-micro 0; + margin: tokens.get('utility-gap-4') 0; padding: 0 !important; color: inherit !important; pointer-events: none; @@ -101,8 +105,8 @@ .card-control--icon { grid-area: icon; - width: post.$size-big; - height: post.$size-big; + width: tokens.get('utility-gap-32'); + height: tokens.get('utility-gap-32'); pointer-events: none; > slot { @@ -195,11 +199,11 @@ --post-card-control-input-border-color: FieldText; --post-card-control-input-bg: Field; - outline: post.$size-line solid Field; - outline-offset: post.$size-line * -2; + outline: tokens.get('utility-gap-2') solid Field; + outline-offset: calc(tokens.get('utility-gap-2') * -2); .card-control--input { - outline: post.$size-line solid Field; + outline: tokens.get('utility-gap-2') solid Field; // selector needed to override the .form-check styles &[type] { @@ -264,7 +268,7 @@ display: block; content: ''; position: absolute; - inset: post.$size-line; + inset: tokens.get('utility-gap-2'); background-color: SelectedItem; z-index: 1; } @@ -296,8 +300,8 @@ display: block; content: ''; position: absolute; - inset: post.$size-line; - border-radius: post.$size-line * 0.5; + inset: tokens.get('utility-gap-2'); + border-radius: calc(tokens.get('utility-gap-2') * 0.5); background-color: SelectedItem; } @@ -306,7 +310,7 @@ } .card-control--input { - outline: post.$size-line solid Field; + outline: tokens.get('utility-gap-2') solid Field; } } } @@ -432,7 +436,7 @@ :host([data-context*='fieldset']:not(:last-child)) { .card-control { - margin-bottom: post.$size-regular; + margin-bottom: tokens.get('utility-gap-16'); } } diff --git a/packages/components/src/components/post-rating/post-rating.scss b/packages/components/src/components/post-rating/post-rating.scss index d3de559cac..a66dc12cf7 100644 --- a/packages/components/src/components/post-rating/post-rating.scss +++ b/packages/components/src/components/post-rating/post-rating.scss @@ -1,4 +1,6 @@ @use '@swisspost/design-system-styles/core' as post; +@use '@swisspost/design-system-styles/tokens/utilities'; +@use '@swisspost/design-system-styles/functions/tokens'; :host { display: inline-block; @@ -8,7 +10,7 @@ display: flex; flex-wrap: wrap; overflow: hidden; - margin: 0 (-(post.$size-micro)); + margin: 0 (-(tokens.get('utility-gap-4', utilities.$post-spacing))); border-radius: post.$border-radius; .star { diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss index 8d1d131f33..ab40d871bb 100644 --- a/packages/components/src/components/post-tooltip/post-tooltip.scss +++ b/packages/components/src/components/post-tooltip/post-tooltip.scss @@ -3,11 +3,15 @@ @use '@swisspost/design-system-styles/variables/color'; @use '@swisspost/design-system-styles/functions/color' as color-fn; @use '@swisspost/design-system-styles/variables/spacing'; +@use '@swisspost/design-system-styles/tokens/utilities'; +@use '@swisspost/design-system-styles/functions/tokens'; + +tokens.$default-map: utilities.$post-spacing; post-popovercontainer { - padding: spacing.$size-micro spacing.$size-mini; - max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini; - min-height: spacing.$size-regular; + padding: tokens.get('utility-gap-4') tokens.get('utility-gap-8'); + max-width: calc(2 * tokens.get('utility-gap-112') - tokens.get('utility-gap-8')); + min-height: tokens.get('utility-gap-16'); // Creates a safe space around the popovercontainer for save pointer crossing between trigger and tooltip &[arrow] { diff --git a/packages/documentation/.storybook/addons/addons.scss b/packages/documentation/.storybook/addons/addons.scss index f6861fbce9..ddaae2c01c 100644 --- a/packages/documentation/.storybook/addons/addons.scss +++ b/packages/documentation/.storybook/addons/addons.scss @@ -1,4 +1,8 @@ @use '@swisspost/design-system-styles/core' as post; +@use '@swisspost/design-system-styles/functions/tokens' as tokens; +@use '@swisspost/design-system-styles/tokens/utilities' as utilities; + +tokens.$default-map: utilities.$post-spacing; .addon-label { color: post.$body-color !important; @@ -8,11 +12,11 @@ min-width: 12rem; display: flex; flex-flow: column nowrap; - gap: post.$size-line; + gap: tokens.get('utility-gap-2'); position: absolute; top: -5px; right: 0; - padding: post.$size-mini; + padding: tokens.get('utility-gap-8'); background-color: post.$white; border: post.$border-width solid post.$border-color; border-radius: post.$border-radius; @@ -20,7 +24,7 @@ .addon-dropdown__item { display: block; - padding: post.$size-mini post.$size-small-regular; + padding: tokens.get('utility-gap-8') tokens.get('utility-gap-12'); border-radius: post.$border-radius-sm; text-decoration: none; color: post.$body-color !important; @@ -38,6 +42,6 @@ .addon-button { post-icon { font-size: post.$font-size-20; - margin-inline-end: post.$size-line; + margin-inline-end: tokens.get('utility-gap-2'); } } diff --git a/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss b/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss index 68ad4c73d5..00be20668d 100644 --- a/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss +++ b/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss @@ -1,4 +1,8 @@ @use '@swisspost/design-system-styles/core' as post; +@use '@swisspost/design-system-styles/functions/tokens' as tokens; +@use '@swisspost/design-system-styles/tokens/utilities' as utilities; + +tokens.$default-map: utilities.$post-spacing; .version-switcher__loading { display: flex; @@ -17,12 +21,12 @@ .item__deps { display: flex; - gap: post.$size-small-regular; + gap: tokens.get('utility-gap-12'); } .deps_dep { display: flex; - gap: post.$size-line; + gap: tokens.get('utility-gap-2'); font-size: 85%; } diff --git a/packages/documentation/.storybook/styles/components/blocks.scss b/packages/documentation/.storybook/styles/components/blocks.scss index 4d1b551b8c..e7205b7a97 100644 --- a/packages/documentation/.storybook/styles/components/blocks.scss +++ b/packages/documentation/.storybook/styles/components/blocks.scss @@ -1,15 +1,19 @@ @use '@swisspost/design-system-styles/core' as post; @use '@swisspost/design-system-styles/elements/body'; +@use '@swisspost/design-system-styles/functions/tokens'; +@use '@swisspost/design-system-styles/tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; #storybook-docs { .sbdocs-preview { border-color: post.$border-color; - border-radius: post.$size-mini; + border-radius: tokens.get('utility-gap-8'); box-shadow: none; } .docblock-argstable { - border-radius: post.$size-mini; + border-radius: tokens.get('utility-gap-8'); tbody { position: relative; @@ -22,7 +26,7 @@ position: absolute; inset: 0; border: post.$border-width solid post.$border-color; - border-radius: post.$size-mini; + border-radius: tokens.get('utility-gap-8'); z-index: -1; } @@ -46,33 +50,33 @@ background-clip: padding-box !important; &:first-child { - border-inline-start: post.$size-line solid transparent; + border-inline-start: tokens.get('utility-gap-2') solid transparent; } &:last-child { - border-inline-end: post.$size-line solid transparent; + border-inline-end: tokens.get('utility-gap-2') solid transparent; } } &:first-child > td { - border-block-start: post.$size-hair solid transparent; + border-block-start: tokens.get('utility-gap-1') solid transparent; &:first-child { - border-start-start-radius: post.$size-mini; + border-start-start-radius: tokens.get('utility-gap-8'); } &:last-child { - border-start-end-radius: post.$size-mini; + border-start-end-radius: tokens.get('utility-gap-8'); } } &:last-child > td { &:first-child { - border-end-start-radius: post.$size-mini; + border-end-start-radius: tokens.get('utility-gap-8'); } &:last-child { - border-end-end-radius: post.$size-mini; + border-end-end-radius: tokens.get('utility-gap-8'); } } } @@ -81,7 +85,7 @@ } .docblock-source { - border-radius: post.$size-mini; + border-radius: tokens.get('utility-gap-8'); box-shadow: none; } } diff --git a/packages/documentation/.storybook/styles/components/tabs.scss b/packages/documentation/.storybook/styles/components/tabs.scss index 83e1a23c67..f2dc55ba87 100644 --- a/packages/documentation/.storybook/styles/components/tabs.scss +++ b/packages/documentation/.storybook/styles/components/tabs.scss @@ -1,5 +1,9 @@ @use '@swisspost/design-system-styles/core' as post; @use '../mixins'; +@use '@swisspost/design-system-styles/functions/tokens'; +@use '@swisspost/design-system-styles/tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; @include mixins.style-docs-only-guard('post-tabs') { &::part(tabs) { @@ -30,7 +34,7 @@ } &:where(.sb-tabs-lg, :has(post-tab-panel > .sbdocs)) { - margin-top: post.$size-big; + margin-top: tokens.get('utility-gap-32'); &::part(tabs) { &::before { @@ -57,9 +61,9 @@ display: block; content: ''; position: absolute; - top: calc(100% + #{post.$size-regular}); + top: calc(100% + #{tokens.get('utility-gap-16')}); left: 0; - right: post.$size-mini * -1; + right: calc(#{tokens.get('utility-gap-8')} * -1); border-top: post.$border-width dashed post.$border-color; } } diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 17ad69d1f9..8e4983d47c 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -2,8 +2,8 @@ @use '@swisspost/design-system-styles/core.scss' as post; @use '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css'; @use './components'; -@use '@swisspost/design-system-styles/functions/tokens' as tokens; -@use '@swisspost/design-system-styles/tokens/utilities' as utilities; +@use '@swisspost/design-system-styles/functions/tokens'; +@use '@swisspost/design-system-styles/tokens/utilities'; tokens.$default-map: utilities.$post-color; @@ -91,10 +91,10 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier display: flex; flex-wrap: wrap; align-items: center; - gap: post.$size-mini; + gap: tokens.get('utility-gap-8', utilities.$post-spacing); } .docs-title { - margin-bottom: post.$size-mini; + margin-bottom: tokens.get('utility-gap-8', utilities.$post-spacing); :first-child { margin-right: auto; diff --git a/packages/documentation/src/shared/tile/tile.component.scss b/packages/documentation/src/shared/tile/tile.component.scss index 9896087eb0..8b73c5e591 100644 --- a/packages/documentation/src/shared/tile/tile.component.scss +++ b/packages/documentation/src/shared/tile/tile.component.scss @@ -1,13 +1,17 @@ @use 'sass:map'; @use '@swisspost/design-system-styles/core.scss' as post; -@use '@swisspost/design-system-styles/mixins/utilities'; +@use '@swisspost/design-system-styles/mixins/utilities' as utilities-mx; +@use '@swisspost/design-system-styles/functions/tokens'; +@use '@swisspost/design-system-styles/tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; $tile-size: var(--post-docs-tile-size, 120px); $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2)); :host { a { - @include utilities.focus-style { + @include utilities-mx.focus-style { border-radius: post.$border-radius; } } @@ -18,12 +22,12 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2)); width: $tile-size; height: $tile-size; background-color: post.$white; - border-radius: post.$size-regular; + border-radius: tokens.get('utility-gap-16'); box-shadow: 0 2px 5px 0 rgba(82, 49, 120, 0.3); text-decoration: none; text-align: center; - @include utilities.high-contrast-mode() { + @include utilities-mx.high-contrast-mode() { border: 2px solid transparent; } @@ -32,8 +36,8 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2)); justify-content: center; align-items: center; flex: 0 0 auto; - padding: 0 post.$size-micro; - height: calc(#{post.$size-mini * 2} + 2.2em); + padding: 0 tokens.get('utility-gap-4'); + height: calc((#{tokens.get('utility-gap-8')} * 2) + 2.2em); background-color: post.$yellow; border-top-left-radius: inherit; border-top-right-radius: inherit; @@ -57,7 +61,7 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2)); flex-direction: column; justify-content: center; align-items: center; - gap: post.$size-micro; + gap: tokens.get('utility-gap-4'); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; @@ -83,8 +87,9 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2)); @include post.media-breakpoint-down(md) { width: $tile-rg-size; height: $tile-rg-size; + .tile--title { - height: calc(#{post.$size-mini * 1.5} + 2.2em); + height: calc((#{tokens.get('utility-gap-8')} * 1.5) + 2.2em); ~ .tile--icon { ::slotted(img) { diff --git a/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss b/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss index df1c6f2194..3f21053026 100644 --- a/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss @@ -1,15 +1,19 @@ -@use '../../../../../node_modules/@swisspost/design-system-styles/core' as post; +@use '@swisspost/design-system-styles/core' as post; +@use '@swisspost/design-system-styles/functions/tokens'; +@use '@swisspost/design-system-styles/tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; .icon-search { .icon-search--filters { - margin: post.$size-huge auto; + margin: tokens.get('utility-gap-56') auto; max-width: 500px; .freetext { position: relative; .form-control { - padding-right: post.$input-height-lg; + padding-right: calc(post.$input-height-lg); } .form-control-reset { @@ -22,7 +26,7 @@ post-icon { padding: post.$input-padding-y-lg; - width: post.$input-height-lg; + width: calc(post.$input-height-lg); } } } @@ -30,13 +34,13 @@ .icon-search--results { display: grid; - gap: post.$size-regular; + gap: tokens.get('utility-gap-16'); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); - margin-top: post.$size-big; + margin-top: tokens.get('utility-gap-32'); .results--empty { display: flex; - gap: post.$size-mini; + gap: tokens.get('utility-gap-8'); align-items: center; margin-left: auto; margin-right: auto; @@ -61,7 +65,7 @@ display: flex; justify-content: center; align-items: center; - padding: post.$size-micro post.$size-regular; + padding: tokens.get('utility-gap-4') tokens.get('utility-gap-16'); width: 100%; height: 80px; background-color: var(--post-contrast-color-inverted); @@ -80,7 +84,7 @@ display: flex; flex-direction: column; justify-content: center; - padding: post.$size-micro post.$size-regular; + padding: tokens.get('utility-gap-4') tokens.get('utility-gap-16'); background-color: var(--post-gray-10); border-top: post.$border-width solid var(--post-gray-20); border-bottom-left-radius: post.$border-radius; diff --git a/packages/documentation/src/stories/foundations/typography/typography.styles.scss b/packages/documentation/src/stories/foundations/typography/typography.styles.scss index 0a67da490d..2517952df0 100644 --- a/packages/documentation/src/stories/foundations/typography/typography.styles.scss +++ b/packages/documentation/src/stories/foundations/typography/typography.styles.scss @@ -1,4 +1,8 @@ @use '@swisspost/design-system-styles/core' as post; +@use '@swisspost/design-system-styles/functions/tokens'; +@use '@swisspost/design-system-styles/tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; .sb-fontface-wrapper { display: grid; @@ -7,8 +11,8 @@ @include post.media-breakpoint-up(md) { grid-template-columns: max-content min-content max-content; - gap: post.$size-regular; - margin-bottom: post.$size-regular; + gap: tokens.get('utility-gap-16'); + margin-bottom: tokens.get('utility-gap-16'); } } @@ -22,9 +26,9 @@ } .sb-fontface__settings { - margin-top: post.$size-mini; - margin-bottom: post.$size-regular; - padding-top: post.$size-mini; + margin-top: tokens.get('utility-gap-8'); + margin-bottom: tokens.get('utility-gap-16'); + padding-top: tokens.get('utility-gap-8'); border-top: post.$border-width dashed post.$border-color; .settings__face { @@ -51,7 +55,7 @@ margin-top: 0; margin-bottom: 0; padding-top: 0; - padding-left: post.$size-regular; + padding-left: tokens.get('utility-gap-16'); border-top: 0 none; border-left: post.$border-width dashed post.$border-color; } diff --git a/packages/documentation/src/stories/guidelines/angular/angular.styles.scss b/packages/documentation/src/stories/guidelines/angular/angular.styles.scss index e94d151458..cb9d889870 100644 --- a/packages/documentation/src/stories/guidelines/angular/angular.styles.scss +++ b/packages/documentation/src/stories/guidelines/angular/angular.styles.scss @@ -1,13 +1,17 @@ @use '../../../../node_modules/@swisspost/design-system-styles/core' as post; +@use '@swisspost/design-system-styles/functions/tokens'; +@use '@swisspost/design-system-styles/tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; .tile-wrapper { display: flex; flex-wrap: wrap; padding-left: 0; list-style-type: none; - gap: post.$size-big; + gap: tokens.get('utility-gap-32'); @include post.media-breakpoint-down(sm) { - gap: post.$size-regular; + gap: tokens.get('utility-gap-16'); } } diff --git a/packages/documentation/src/stories/introduction.styles.scss b/packages/documentation/src/stories/introduction.styles.scss index 5b2d3545bb..c44c996075 100644 --- a/packages/documentation/src/stories/introduction.styles.scss +++ b/packages/documentation/src/stories/introduction.styles.scss @@ -1,6 +1,9 @@ @use 'sass:map'; @use '@swisspost/design-system-styles/core.scss' as post; -@use '@swisspost/design-system-styles/mixins/utilities'; +@use '@swisspost/design-system-styles/functions/tokens'; +@use '@swisspost/design-system-styles/tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; #storybook-docs { overflow-x: hidden; @@ -36,19 +39,19 @@ padding: 0; list-style-type: none; justify-content: center; - gap: post.$size-big; + gap: tokens.get('utility-gap-32'); @include post.media-breakpoint-down(sm) { - gap: post.$size-regular; + gap: tokens.get('utility-gap-16'); } } .feature { - padding: post.$size-regular; + padding: tokens.get('utility-gap-16'); .feature--icon { - margin-bottom: post.$size-regular; - font-size: post.$size-huge; + margin-bottom: tokens.get('utility-gap-16'); + font-size: tokens.get('utility-gap-56'); color: #523178; } diff --git a/packages/documentation/src/stories/utilities/elevation/elevation.styles.scss b/packages/documentation/src/stories/utilities/elevation/elevation.styles.scss index 27a06abd6d..29dc4a3008 100644 --- a/packages/documentation/src/stories/utilities/elevation/elevation.styles.scss +++ b/packages/documentation/src/stories/utilities/elevation/elevation.styles.scss @@ -1,25 +1,29 @@ @use '../../../../node_modules/@swisspost/design-system-styles/core' as post; +@use '@swisspost/design-system-styles/functions/tokens'; +@use '@swisspost/design-system-styles/tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; .elevation-container { display: flex; flex-wrap: wrap; - gap: post.$size-big; - margin-block: post.$size-large post.$size-bigger-big; + gap: tokens.get('utility-gap-32'); + margin-block: tokens.get('utility-gap-24') tokens.get('utility-gap-40'); } .elevation-tile { - padding: post.$size-regular; + padding: tokens.get('utility-gap-16'); border-radius: post.$border-radius; .h3 { - margin-bottom: post.$size-large; + margin-bottom: tokens.get('utility-gap-24'); text-transform: capitalize; } dl { display: grid; grid-template-columns: max-content 1fr; - column-gap: post.$size-regular; + column-gap: tokens.get('utility-gap-16'); margin-bottom: 0; } diff --git a/packages/documentation/src/stories/utilities/flex/flex.styles.scss b/packages/documentation/src/stories/utilities/flex/flex.styles.scss index 6c1d78fed9..978a79b96b 100644 --- a/packages/documentation/src/stories/utilities/flex/flex.styles.scss +++ b/packages/documentation/src/stories/utilities/flex/flex.styles.scss @@ -1,4 +1,8 @@ @use '@swisspost/design-system-styles/core' as post; +@use '@swisspost/design-system-styles/functions/tokens'; +@use '@swisspost/design-system-styles/tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; .flex-story-container, .flex-doc-container__demo { @@ -23,7 +27,7 @@ .flex-doc-container { > * { align-self: stretch; - padding: post.$size-mini (post.$size-regular * 0.5); + padding: tokens.get('utility-gap-8') calc(#{tokens.get('utility-gap-16')} * 0.5); border-top: post.$border-width solid post.$border-color; flex: 0 0 50%; @@ -48,7 +52,7 @@ } .flex-doc-container__demo { - padding: post.$size-mini; + padding: tokens.get('utility-gap-8'); @include post.media-breakpoint-up(lg) { border: post.$border-width solid post.$border-color; diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx index 7e093615a2..22dabfe4f2 100644 --- a/packages/documentation/src/stories/utilities/text/text.docs.mdx +++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx @@ -80,10 +80,6 @@ import './text.styles.scss'; #### Possible Values -##### Fixed-size (deprecated) - - - ##### Relative For good accessibility, the line height is set to 1.5 for body text and 1.2 for headings. diff --git a/packages/documentation/src/stories/utilities/text/text.module.scss b/packages/documentation/src/stories/utilities/text/text.module.scss index 77d9affad9..a25016a868 100644 --- a/packages/documentation/src/stories/utilities/text/text.module.scss +++ b/packages/documentation/src/stories/utilities/text/text.module.scss @@ -6,7 +6,6 @@ fontSizes: [map.keys(post.$font-sizes)]; fontWeights: [('light', 'normal', 'bold')]; fontStyles: [('normal', 'italic')]; - fixedLineHeights: [map.keys(post.$post-sizes)]; relativeLineHeights: [('1', 'base', 'sm', 'lg')]; colors: [map.keys(post.$theme-colors)]; } diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_extensions.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_extensions.scss index ef2b905c51..f953e6ad90 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_extensions.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_extensions.scss @@ -1,5 +1,9 @@ @use '@swisspost/design-system-styles/core' as post; @use './variables' as variables; +@use '@swisspost/design-system-styles/tokens/utilities'; +@use '@swisspost/design-system-styles/functions/tokens'; + +tokens.$default-map: utilities.$post-spacing; .p-datatable-wrapper { overflow: initial; @@ -7,7 +11,7 @@ .p-datatable { .p-datatable-thead > tr > th { - gap: post.$size-mini; + gap: tokens.get('utility-gap-8'); } .p-sortable-column { @@ -31,7 +35,7 @@ } p-columnfilter { - margin-inline: post.$size-mini; + margin-inline: tokens.get('utility-gap-8'); height: 1.5rem; filtericon { @@ -123,7 +127,7 @@ } .p-button { - gap: post.$size-mini; + gap: tokens.get('utility-gap-8'); &.p-button-text { color: post.$dark; diff --git a/packages/styles/src/components/breadcrumb.scss b/packages/styles/src/components/breadcrumb.scss index 2f821f09e8..2d4a8b4b26 100644 --- a/packages/styles/src/components/breadcrumb.scss +++ b/packages/styles/src/components/breadcrumb.scss @@ -10,10 +10,13 @@ @use './../variables/components/breadcrumbs'; @use './../placeholders/text'; +@use '../functions/tokens'; +@use '../tokens/utilities'; + .breadcrumb { @extend %font-curve-small; flex-wrap: nowrap; - height: map.get(spacing.$post-sizes, 'bigger-big'); + height: tokens.get('utility-gap-40', utilities.$post-spacing); overflow: hidden; font-weight: type.$font-weight-normal; white-space: nowrap; diff --git a/packages/styles/src/components/button-group.scss b/packages/styles/src/components/button-group.scss index f8774ffd6d..9179db8931 100644 --- a/packages/styles/src/components/button-group.scss +++ b/packages/styles/src/components/button-group.scss @@ -3,16 +3,19 @@ @use './../themes/bootstrap/core' as *; @use './../themes/bootstrap/button-group' as bg; -@use './../mixins/utilities'; +@use './../mixins/utilities' as utilities-mx; @use './../variables/color'; @use './../variables/spacing'; @use './../variables/components/button'; @use './../variables/components/forms'; +@use '../functions/tokens'; +@use '../tokens/utilities'; + .btn-group { max-width: 100%; flex-wrap: wrap; - row-gap: spacing.$size-micro; + row-gap: tokens.get('utility-gap-4', utilities.$post-spacing); padding-inline-start: button.$btn-border-width; > .btn { @@ -31,7 +34,7 @@ background-color: color.$yellow; color: color.$black; - @include utilities.high-contrast-mode() { + @include utilities-mx.high-contrast-mode() { background-color: Highlight; } } @@ -41,5 +44,5 @@ position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; - @include utilities.focus-style('+ .btn'); + @include utilities-mx.focus-style('+ .btn'); } diff --git a/packages/styles/src/components/card-control.scss b/packages/styles/src/components/card-control.scss index 049fad2671..863baee365 100644 --- a/packages/styles/src/components/card-control.scss +++ b/packages/styles/src/components/card-control.scss @@ -3,7 +3,11 @@ @use '../variables/spacing'; @use '../variables/components/forms'; @use '../variables/components/form-check'; -@use '../mixins/utilities'; +@use '../mixins/utilities' as utilities-mx; +@use '../functions/tokens'; +@use '../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; /* * There are a whole bunch of !important statments in this file. @@ -13,7 +17,7 @@ fieldset { .radio-button-card, .checkbox-button-card { &:not(:last-child) { - margin-bottom: spacing.$size-regular; + margin-bottom: tokens.get('utility-gap-16'); } } } @@ -29,12 +33,12 @@ fieldset { display: grid; grid-template: 'input label icon' 'input content content' / min-content auto min-content; align-items: center; - gap: 0 spacing.$size-mini; + gap: 0 tokens.get('utility-gap-8'); position: relative; - padding: spacing.$size-regular; + padding: tokens.get('utility-gap-16'); width: 100%; background-color: var(--post-card-control-bg); - border: spacing.$size-line solid var(--post-card-control-border-color); + border: tokens.get('utility-gap-2') solid var(--post-card-control-border-color); border-radius: commons.$border-radius; color: var(--post-card-control-color); cursor: pointer; @@ -43,14 +47,14 @@ fieldset { grid-area: input; position: relative; z-index: 2; - margin: spacing.$size-micro 0; + margin: tokens.get('utility-gap-4') 0; background-color: var(--post-card-control-input-bg) !important; border-color: var(--post-card-control-input-border-color) !important; color: var(--post-card-control-input-border-color) !important; cursor: inherit; transition: none; - @include utilities.focus-style-none(); + @include utilities-mx.focus-style-none(); &:hover:not([disabled]) ~ label { color: var(--post-contrast-color); @@ -69,7 +73,7 @@ fieldset { label { grid-area: label; - margin: spacing.$size-micro 0; + margin: tokens.get('utility-gap-4') 0; padding: 0; border-radius: inherit; transition: none; @@ -78,7 +82,7 @@ fieldset { display: block; content: ''; position: absolute; - inset: spacing.$size-line * -1; + inset: calc(tokens.get('utility-gap-2') * -1); border-radius: inherit; } @@ -100,8 +104,8 @@ fieldset { post-icon { grid-area: icon; - width: spacing.$size-big; - height: spacing.$size-big; + width: tokens.get('utility-gap-32'); + height: tokens.get('utility-gap-32'); pointer-events: none; } @@ -145,18 +149,18 @@ fieldset { } } - @include utilities.high-contrast-mode() { + @include utilities-mx.high-contrast-mode() { --post-card-control-border-color: FieldText; --post-card-control-bg: Field; --post-card-control-color: FieldText; --post-card-control-input-border-color: FieldText; --post-card-control-input-bg: Field; - outline: spacing.$size-line solid Field; - outline-offset: spacing.$size-line * -2; + outline: tokens.get('utility-gap-2') solid Field; + outline-offset: calc(tokens.get('utility-gap-2') * -2); input.form-check-input[type] { - outline: spacing.$size-line solid Field; + outline: tokens.get('utility-gap-2') solid Field; background-color: Field !important; &::after { @@ -209,7 +213,7 @@ fieldset { display: block; content: ''; position: absolute; - inset: spacing.$size-line; + inset: tokens.get('utility-gap-2'); background-color: SelectedItem; z-index: 1; } @@ -286,7 +290,7 @@ fieldset { --post-card-control-input-bg: transparent; } - @include utilities.high-contrast-mode() { + @include utilities-mx.high-contrast-mode() { --post-card-control-border-color: FieldText; --post-card-control-bg: Field; --post-card-control-color: FieldText; diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index c66363159e..5249aefa17 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -7,10 +7,15 @@ @use './../variables/commons'; @use './../variables/components/card'; @use './../functions/sizing'; -@use './../mixins/icons' as icons-mixins; +@use './../mixins/icons' as icons-mx; @use './../variables/icons'; @use './../variables/animation'; +@use './../functions/tokens'; +@use './../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; + .card-group { margin-top: commons.$border-width; margin-left: commons.$border-width; @@ -95,15 +100,15 @@ .product-card &, .card-button & { @include media-breakpoint-down(sm) { - padding: spacing.$size-regular; + padding: tokens.get('utility-gap-16'); } @include media-breakpoint-between(sm, md) { - padding: spacing.$size-large; + padding: tokens.get('utility-gap-24'); } @include media-breakpoint-up(md) { - padding: spacing.$size-big; + padding: tokens.get('utility-gap-32'); } } @@ -172,14 +177,14 @@ a { display: inline-flex; align-items: center; - padding-inline: spacing.$size-mini; - gap: spacing.$size-mini; + padding-inline: tokens.get('utility-gap-8'); + gap: tokens.get('utility-gap-8'); color: color.$gray-60; text-decoration: none; -ms-flex-align: center; &::before { - @include icons-mixins.icon(3020); + @include icons-mx.icon(3020); content: ''; display: inline-block; width: icons.$icon-size-default; diff --git a/packages/styles/src/components/datatable.scss b/packages/styles/src/components/datatable.scss index b6f9d0b598..1a93e365e4 100644 --- a/packages/styles/src/components/datatable.scss +++ b/packages/styles/src/components/datatable.scss @@ -7,12 +7,17 @@ @use './../variables/components/datatable'; @use './../variables/components/forms'; -@use './../mixins/button' as button-mixins; +@use './../mixins/button' as button-mx; @use './../mixins/icons' as icons-mx; -@use './../mixins/utilities'; +@use './../mixins/utilities' as utilities-mx; @use './../placeholders/text'; +@use '../functions/tokens'; +@use '../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; + .datatable-header-cell { padding: datatable.$datatable-cell-padding; font-weight: datatable.$datatable-header-font-weight; @@ -65,9 +70,9 @@ .ngx-datatable .sort-btn { flex: 0 0 auto; - width: spacing.$size-regular; - height: spacing.$size-regular; - margin-left: spacing.$size-mini; + width: tokens.get('utility-gap-16'); + height: tokens.get('utility-gap-16'); + margin-left: tokens.get('utility-gap-8'); &.datatable-icon-sort-unset { @include icons-mx.icon(2127); @@ -96,7 +101,7 @@ .datatable-button { display: flex; align-items: center; - @include button-mixins.reset-button; + @include button-mx.reset-button; width: datatable.$datatable-button-width; height: datatable.$datatable-button-height; margin: datatable.$datatable-button-margin; @@ -120,7 +125,7 @@ .datatable-row-count-label { @extend %font-curve-small; flex: 0 0 auto; - margin: 0 spacing.$size-mini 0 0; + margin: 0 tokens.get('utility-gap-8') 0 0; } .datatable-row-count-input { @@ -131,7 +136,7 @@ padding-bottom: 0; + .datatable-pagination { - padding-left: spacing.$size-mini; + padding-left: tokens.get('utility-gap-8'); border-left: datatable.$datatable-footer-separator; } } @@ -195,7 +200,7 @@ } } -@include utilities.high-contrast-mode() { +@include utilities-mx.high-contrast-mode() { .ngx-datatable { .datatable-header-cell, .datatable-body-cell, @@ -209,8 +214,8 @@ .datatable-button { &:hover, &:focus-visible { - outline: spacing.$size-line solid Highlight; - outline-offset: -(spacing.$size-line); + outline: tokens.get('utility-gap-2') solid Highlight; + outline-offset: -(tokens.get('utility-gap-2')); } } @@ -218,12 +223,12 @@ &:not(.datatable-spaced-cells) { .datatable-row-wrapper { .datatable-body-cell { - border-top: spacing.$size-line solid CanvasText; + border-top: tokens.get('utility-gap-2') solid CanvasText; } &:last-child { .datatable-body-cell { - border-bottom: spacing.$size-line solid CanvasText; + border-bottom: tokens.get('utility-gap-2') solid CanvasText; } } } @@ -233,17 +238,17 @@ &.datatable-spaced-cells { .datatable-row-wrapper { .datatable-body-cell { - border-top: spacing.$size-line solid CanvasText; - border-left: spacing.$size-line solid CanvasText; + border-top: tokens.get('utility-gap-2') solid CanvasText; + border-left: tokens.get('utility-gap-2') solid CanvasText; &:last-child { - border-right: spacing.$size-line solid CanvasText; + border-right: tokens.get('utility-gap-2') solid CanvasText; } } &:last-child { .datatable-body-cell { - border-bottom: spacing.$size-line solid CanvasText; + border-bottom: tokens.get('utility-gap-2') solid CanvasText; } } } diff --git a/packages/styles/src/components/datepicker.scss b/packages/styles/src/components/datepicker.scss index fc41252901..21a992f907 100644 --- a/packages/styles/src/components/datepicker.scss +++ b/packages/styles/src/components/datepicker.scss @@ -161,7 +161,7 @@ span.ngb-dp-navigation-chevron { .form-floating > .ngb-dp-open, .form-control-lg ~ .ngb-dp-open { height: calc(#{forms.$form-floating-height} - #{forms.$input-border-width * 2}); - width: forms.$input-height-inner-lg; + width: calc(forms.$input-height-inner-lg); post-icon { width: datepicker.$ngb-dp-icon-size-lg; diff --git a/packages/styles/src/components/dialog.scss b/packages/styles/src/components/dialog.scss index 42b4ca2a4b..b241eca883 100644 --- a/packages/styles/src/components/dialog.scss +++ b/packages/styles/src/components/dialog.scss @@ -1,11 +1,16 @@ @use '../mixins/elevation'; -@use '../mixins/utilities'; +@use '../mixins/utilities' as utilities-mx; @use '../variables/spacing'; @use '../variables/color'; @use '../variables/animation'; @use './../themes/bootstrap/core' as *; +@use '../functions/tokens'; +@use '../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; + dialog { @include elevation.elevation('elevation-5'); @@ -23,7 +28,7 @@ dialog { backdrop-filter: blur(0); } - @include utilities.high-contrast-mode { + @include utilities-mx.high-contrast-mode { // Show the border in HCM border-width: 2px; @@ -72,9 +77,9 @@ dialog { } dialog > .dialog-grid { - margin: spacing.$size-regular spacing.$size-regular 0 spacing.$size-regular; + margin: tokens.get('utility-gap-16') tokens.get('utility-gap-16') 0 tokens.get('utility-gap-16'); display: grid; - column-gap: spacing.$size-regular; + column-gap: tokens.get('utility-gap-16'); grid-template-columns: auto 1fr auto; grid-template-areas: 'icon header close-button' @@ -93,14 +98,14 @@ dialog > .dialog-grid { grid-area: icon; display: block; - width: spacing.$size-big; - height: spacing.$size-big; + width: tokens.get('utility-gap-32'); + height: tokens.get('utility-gap-32'); // Larger icon for bigger notification dialogs dialog:not([size='small']) & { @include media-breakpoint-up(sm) { - width: spacing.$size-small-huge; - height: spacing.$size-small-huge; + width: tokens.get('utility-gap-48'); + height: tokens.get('utility-gap-48'); } } } @@ -123,11 +128,11 @@ dialog > .dialog-grid { grid-area: controls; position: sticky; bottom: 0; - padding-block: spacing.$size-regular; + padding-block: tokens.get('utility-gap-16'); display: flex; flex-wrap: wrap; flex-direction: row-reverse; - gap: spacing.$size-regular; + gap: tokens.get('utility-gap-16'); background-color: inherit; button { @@ -141,8 +146,8 @@ dialog > .dialog-grid { position: sticky; top: 0; grid-area: close-button; - width: spacing.$size-large; - height: spacing.$size-large; + width: tokens.get('utility-gap-24'); + height: tokens.get('utility-gap-24'); min-height: 0; } diff --git a/packages/styles/src/components/dropdown.scss b/packages/styles/src/components/dropdown.scss index 4e0499438f..1697a98d86 100644 --- a/packages/styles/src/components/dropdown.scss +++ b/packages/styles/src/components/dropdown.scss @@ -7,7 +7,12 @@ @use './../variables/icons'; @use './../variables/spacing'; @use './../mixins/icons' as icons-mx; -@use './../mixins/utilities'; +@use './../mixins/utilities' as utilities-mx; + +@use '../functions/tokens'; +@use '../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; %toggler-icon { content: ''; @@ -40,12 +45,12 @@ margin: 0.25rem 0; } - @include utilities.high-contrast-mode() { + @include utilities-mx.high-contrast-mode() { .dropdown-item { &:hover, &:focus-visible { - outline: spacing.$size-line solid Highlight; - outline-offset: -(spacing.$size-line); + outline: tokens.get('utility-gap-2') solid Highlight; + outline-offset: -(tokens.get('utility-gap-2')); } } } diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss index 692f4b847a..5992098b6a 100644 --- a/packages/styles/src/components/form-range.scss +++ b/packages/styles/src/components/form-range.scss @@ -7,21 +7,23 @@ @use './../variables/color'; @use './../variables/spacing'; @use './../variables/components/forms'; -@use './../mixins/utilities'; +@use './../mixins/utilities' as utilities-mx; +@use '../functions/tokens'; +@use '../tokens/utilities'; $track-height: 4px; $webkit-progress-height-adjustment: 2px; $webkit-thumb-width: 32px; .form-range-wrapper { - @include utilities.focus-style { + @include utilities-mx.focus-style { border-radius: commons.$border-radius; } } :not(.form-range-wrapper) > { .form-range { - @include utilities.focus-style { + @include utilities-mx.focus-style { border-radius: commons.$border-radius; } } @@ -90,7 +92,7 @@ $webkit-thumb-width: 32px; box-shadow: none; // Remove default style } - @include utilities.focus-style-custom('::-moz-range-thumb') { + @include utilities-mx.focus-style-custom('::-moz-range-thumb') { outline: none; } } @@ -114,12 +116,12 @@ $webkit-thumb-width: 32px; } + .form-hint { - margin-top: spacing.$size-regular; + margin-top: tokens.get('utility-gap-16', utilities.$post-spacing); transform: translateY(#{-0.5 * forms.$form-range-height}); } } -@include utilities.high-contrast-mode() { +@include utilities-mx.high-contrast-mode() { .form-range { // linear-gradient is forced to the value of "none" in forced-color mode // so, the "forced-color-adjust" property is necessary for "linear-gradient" to continue to work diff --git a/packages/styles/src/components/intranet-header/_language-chooser.scss b/packages/styles/src/components/intranet-header/_language-chooser.scss index 173f937b8a..fe15311c2f 100644 --- a/packages/styles/src/components/intranet-header/_language-chooser.scss +++ b/packages/styles/src/components/intranet-header/_language-chooser.scss @@ -2,7 +2,8 @@ @use './../../variables/spacing'; @use './../../variables/commons'; -@use './../../mixins/icons' as icon-mixin; +@use './../../functions/tokens'; +@use './../../tokens/utilities'; #languageParent { min-width: 18rem; @@ -14,7 +15,7 @@ .dropdown-item { flex: auto 1 1; - padding: spacing.$size-small-regular 0; + padding: tokens.get('utility-gap-12', utilities.$post-spacing) 0; border: commons.$border-width solid color.$gray-20; border-top: 0; border-left: 0; diff --git a/packages/styles/src/components/intranet-header/_sidebar.scss b/packages/styles/src/components/intranet-header/_sidebar.scss index e34dd42ae8..68289de487 100644 --- a/packages/styles/src/components/intranet-header/_sidebar.scss +++ b/packages/styles/src/components/intranet-header/_sidebar.scss @@ -1,10 +1,14 @@ -@use './../../mixins/utilities'; +@use './../../mixins/utilities' as utilities-mx; @use './../../variables/color'; @use './../../variables/commons'; @use './../../variables/spacing'; @use './../../variables/components/intranet-header'; @use './../../themes/bootstrap/core' as *; +@use './../../functions/tokens'; +@use './../../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; // Sidebar #sidebar { @@ -28,7 +32,7 @@ background: none; border: 0; - @include utilities.focus-style { + @include utilities-mx.focus-style { border-radius: commons.$border-radius; } } @@ -50,13 +54,13 @@ margin: spacing.$spacer * -1; margin-bottom: 0; - padding: spacing.$size-mini; - padding-left: spacing.$size-regular; + padding: tokens.get('utility-gap-8'); + padding-left: tokens.get('utility-gap-16'); border-bottom: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2); background-color: color.$white; button { - padding: spacing.$size-mini; + padding: tokens.get('utility-gap-8'); } &:hover, diff --git a/packages/styles/src/components/modal.scss b/packages/styles/src/components/modal.scss index e918313797..668b53272e 100644 --- a/packages/styles/src/components/modal.scss +++ b/packages/styles/src/components/modal.scss @@ -44,7 +44,7 @@ post-ngb-modal-content { @include media-breakpoint-up(sm) { post-ngb-modal-content { // prevents the modal from exceeding the height of the screen - max-height: calc(100vh - #{2 * modal.$modal-dialog-margin-y-sm-up}); + max-height: calc(100vh - (2 * #{modal.$modal-dialog-margin-y-sm-up})); } // Right and left margins are set to "auto" from the sm breakpoint @@ -58,7 +58,7 @@ post-ngb-modal-content { @include media-breakpoint-down(sm) { post-ngb-modal-content { // make the modal cover the full height available on small screens - height: calc(100vh - #{2 * modal.$modal-dialog-margin}); + height: calc(100vh - (2 * #{modal.$modal-dialog-margin})); } .modal-body, diff --git a/packages/styles/src/components/pagination.scss b/packages/styles/src/components/pagination.scss index 56309a1682..44b9b19b30 100644 --- a/packages/styles/src/components/pagination.scss +++ b/packages/styles/src/components/pagination.scss @@ -5,8 +5,11 @@ @use './../variables/spacing'; @use './../variables/commons'; @use './../variables/icons'; -@use './../mixins/icons' as icon-mixin; -@use './../mixins/utilities'; +@use './../mixins/icons' as icon-mx; +@use './../mixins/utilities' as utilities-mx; + +@use '../functions/tokens'; +@use '../tokens/utilities'; .pagination { .page-item { @@ -24,12 +27,12 @@ text-align: center; text-decoration: none; - @include utilities.high-contrast-mode() { + @include utilities-mx.high-contrast-mode() { &:focus, &:focus-within, &:focus-visible { border-radius: commons.$border-radius; - outline: spacing.$size-line solid highlight; + outline: tokens.get('utility-gap-2', utilities.$post-spacing) solid highlight; } } @@ -48,14 +51,14 @@ &[aria-label='Previous'], &[aria-label='Next'] { > span { - @include icon-mixin.icon(2110); + @include icon-mx.icon(2110); } } &[aria-label='First'], &[aria-label='Last'] { > span { - @include icon-mixin.icon(2396); + @include icon-mx.icon(2396); } } @@ -79,7 +82,7 @@ color: pagination.$pagination-active-color; } - @include utilities.high-contrast-mode() { + @include utilities-mx.high-contrast-mode() { &.active > .page-link { background-color: Highlight; } diff --git a/packages/styles/src/components/product-card.scss b/packages/styles/src/components/product-card.scss index 2cc7536983..db4119cd37 100644 --- a/packages/styles/src/components/product-card.scss +++ b/packages/styles/src/components/product-card.scss @@ -9,7 +9,10 @@ @use './../variables/breakpoints'; @use './../variables/components/card'; @use './../functions/sizing'; -@use './../mixins/size' as size-mixin; +@use './../mixins/media'; + +@use './../functions/tokens'; +@use './../tokens/utilities'; .product-navigation { display: flex; @@ -57,7 +60,11 @@ } .card-body { - @include size-mixin.responsive-size(regular); + padding: tokens.get('utility-gap-16', utilities.$post-spacing); + + @include media.min(md) { + padding: tokens.get('utility-gap-24', utilities.$post-spacing); + } } .post-card-favourit { diff --git a/packages/styles/src/components/sizing.scss b/packages/styles/src/components/sizing.scss index bf76e9bf87..4e51471f45 100644 --- a/packages/styles/src/components/sizing.scss +++ b/packages/styles/src/components/sizing.scss @@ -21,48 +21,3 @@ } } } - -// Generate responsive spacing utility classes, a lot of them -$cache: (); - -@each $breakpoint-key, $breakpoint-value in breakpoints.$grid-breakpoints { - @if ($breakpoint-key == 'xs') { - @each $curve-name, $curve-sizes in spacing.$size-curves { - $value: map.get($curve-sizes, $breakpoint-key); - - @each $classname, $property in spacing.$responsive-spacing-properties { - $cache: map.set($cache, $classname + $curve-name, $value); - @include utilities.generate-utility-class($classname, $curve-name, $property, $value); - } - } - } @else { - // Media queries create a scope, upstream variables become read-only and updating the $cache - // is impossible from within the media query. Therefore we first compile a stack of utility - // classes to compile, and then compile them. With caching, we're able to skip 370 utility - // classes from being written (765 vs. 2248 lines of code unminified) - - $stack: (); - - @each $curve-name, $curve-sizes in spacing.$size-curves { - $value: map.get($curve-sizes, $breakpoint-key); - - @each $classname, $property in spacing.$responsive-spacing-properties { - @if (map.get($cache, $classname + $curve-name) != $value) { - $stack: map.set($stack, $classname, $curve-name, $property, $value); - $cache: map.set($cache, $classname + $curve-name, $value); - } - } - } - - // Render the stack - @include media-breakpoint-up($breakpoint-key) { - @each $classname, $class-map in $stack { - @each $curve-name, $curve-map in $class-map { - @each $property, $value in $curve-map { - @include utilities.generate-utility-class($classname, $curve-name, $property, $value); - } - } - } - } - } -} diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 53159b2d6c..f493925758 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -1,18 +1,31 @@ @use 'sass:math'; @use './../mixins/icons' as icons-mx; -@use './../mixins/size' as size-mx; -@use './../mixins/utilities'; +@use './../mixins/utilities' as utilities-mx; @use './../variables/color'; @use './../variables/commons'; @use './../variables/components/stepper'; @use './../themes/bootstrap/core' as *; +@use './../mixins/media'; + +@use './../functions/tokens'; +@use './../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; // for backward compatibility .stepper-container { - @include size-mx.responsive-size('big', 'margin-bottom'); + margin-bottom: tokens.get('utility-gap-20'); + + @include media.min(md) { + margin-bottom: tokens.get('utility-gap-32'); + } + + @include media.min(xl) { + margin-bottom: tokens.get('utility-gap-40'); + } > .stepper-bar { display: none; @@ -20,7 +33,7 @@ } .stepper { - @include utilities.reset-list; + @include utilities-mx.reset-list; // start a counter for the step numbers counter-reset: step-index; @@ -29,13 +42,13 @@ overflow: hidden; // the first column is half a step wide to make sure the separators are the same size even on small screens - grid-template-columns: math.div(stepper.$stepper-indicator-size, 2); + grid-template-columns: calc(math.div(#{stepper.$stepper-indicator-size}, 2)); // all other columns are 1 fraction of the available space ase we don't know the number of steps grid-auto-columns: minmax(0, 1fr); // we use a padding and negative margin on the last step for the same reason we need the first column - padding-inline-end: math.div(stepper.$stepper-indicator-size, 2); + padding-inline-end: calc(math.div(#{stepper.$stepper-indicator-size}, 2)); } .stepper-item { @@ -44,11 +57,11 @@ padding-inline-start: 0; &:not(:first-child) { - padding-inline-start: math.div(stepper.$stepper-link-spacing, 2); + padding-inline-start: calc(math.div(#{stepper.$stepper-link-spacing}, 2)); } &:not(:last-child) { - padding-inline-end: math.div(stepper.$stepper-link-spacing, 2); + padding-inline-end: calc(math.div(#{stepper.$stepper-link-spacing}, 2)); grid-column: span 2; } @@ -58,7 +71,9 @@ content: ''; display: block; position: absolute; - inset-block-start: math.div((stepper.$stepper-indicator-size - stepper.$stepper-bar-height), 2); + inset-block-start: calc( + math.div((#{stepper.$stepper-indicator-size} - #{stepper.$stepper-bar-height}), 2) + ); height: stepper.$stepper-bar-height; background-color: stepper.$stepper-bar-color; inset-inline: 0; @@ -109,7 +124,9 @@ .stepper-item:last-child > & { margin-inline-start: auto; - margin-inline-end: -1 * math.div(stepper.$stepper-indicator-size, 2); // negative margin matching the container padding + margin-inline-end: calc( + -1 * math.div(#{stepper.$stepper-indicator-size}, 2) + ); // negative margin matching the container padding text-align: end; } @@ -162,7 +179,9 @@ @include icons-mx.icon(2105); display: block; position: absolute; - top: math.div((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size), 2); + top: calc( + math.div((#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size), 2) + ); z-index: 1; height: stepper.$stepper-indicator-check-icon-size; width: stepper.$stepper-indicator-check-icon-size; @@ -171,7 +190,7 @@ .stepper-item:first-child > & { left: math.div( - (stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size), + (#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size), 2 ); } @@ -181,9 +200,8 @@ } .stepper-item:last-child > & { - right: math.div( - (stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size), - 2 + right: calc( + math.div((#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size), 2) ); } @@ -195,11 +213,11 @@ // hover/focus state .stepper-link:is(a[href]) { - @include utilities.focus-style { + @include utilities-mx.focus-style { border-radius: commons.$border-radius; } - @include utilities.focus-hover-style-custom() { + @include utilities-mx.focus-hover-style-custom() { color: stepper.$stepper-link-color; .stepper-item[aria-current='step'] > & { @@ -238,9 +256,8 @@ // progress bar &::before { grid-row: -1; - margin-block-start: math.div( - (stepper.$stepper-indicator-size - stepper.$stepper-bar-height), - 2 + margin-block-start: calc( + math.div((#{stepper.$stepper-indicator-size} - #{stepper.$stepper-bar-height}), 2) ); position: static; } @@ -291,7 +308,7 @@ } } -@include utilities.high-contrast-mode { +@include utilities-mx.high-contrast-mode { .stepper-item { &::before, &::after { @@ -332,7 +349,7 @@ .stepper-link:is(a[href]) { .stepper-item[aria-current='step'] > & { - @include utilities.focus-hover-style-custom() { + @include utilities-mx.focus-hover-style-custom() { &::before { border-color: Highlight; } @@ -344,7 +361,7 @@ color: Canvas; } - @include utilities.focus-hover-style-custom() { + @include utilities-mx.focus-hover-style-custom() { &::before { background-color: Highlight; color: HighlightText; @@ -357,7 +374,7 @@ background-color: LinkText; } - @include utilities.focus-hover-style-custom() { + @include utilities-mx.focus-hover-style-custom() { &::before { background-color: Highlight; } diff --git a/packages/styles/src/components/subnavigation.scss b/packages/styles/src/components/subnavigation.scss index 7db696a807..7a7a316913 100644 --- a/packages/styles/src/components/subnavigation.scss +++ b/packages/styles/src/components/subnavigation.scss @@ -2,13 +2,18 @@ @use './../themes/bootstrap/core' as *; -@use './../mixins/utilities'; -@use './../functions/utilities' as utility-functions; +@use './../mixins/utilities' as utilities-mx; +@use './../functions/utilities' as utilities-fx; @use './../variables/components/subnavigation'; @use './../variables/animation'; @use './../variables/spacing'; @use './../placeholders/text'; +@use '../functions/tokens'; +@use '../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; + $module-name: 'subnavigation'; .#{$module-name} { @@ -16,11 +21,11 @@ $module-name: 'subnavigation'; background-color: subnavigation.$subnavigation-background-color; &::after { - @include utilities.full-width-underscore( + @include utilities-mx.full-width-underscore( subnavigation.$subnavigation-border-bottom-color, subnavigation.$subnavigation-border-bottom-width ); - z-index: utility-functions.z-index(subnavigation, underscore-root); + z-index: utilities-fx.z-index(subnavigation, underscore-root); } &-alternate { @@ -69,11 +74,11 @@ $module-name: 'subnavigation'; padding: subnavigation.$subnavigation-link-padding-lg; } - @include utilities.high-contrast-mode() { + @include utilities-mx.high-contrast-mode() { &:hover, &:focus-visible { - outline: spacing.$size-line solid Highlight; - outline-offset: -(spacing.$size-micro); + outline: tokens.get('utility-gap-2') solid Highlight; + outline-offset: -(tokens.get('utility-gap-4')); } } @@ -90,11 +95,11 @@ $module-name: 'subnavigation'; } &:not(.active)::after { - @include utilities.full-width-underscore( + @include utilities-mx.full-width-underscore( #{subnavigation.$subnavigation-link-underscore-color-hover}, #{subnavigation.$subnavigation-link-underscore-height} ); - z-index: utility-functions.z-index(subnavigation, underscore-link); + z-index: utilities-fx.z-index(subnavigation, underscore-link); right: animation.$transition-distance-medium; left: animation.$transition-distance-medium; opacity: 0; @@ -116,16 +121,16 @@ $module-name: 'subnavigation'; font-weight: $font-weight-bold; &::after { - @include utilities.full-width-underscore( + @include utilities-mx.full-width-underscore( #{subnavigation.$subnavigation-link-underscore-color-active}, #{subnavigation.$subnavigation-link-underscore-height} ); - z-index: utility-functions.z-index(subnavigation, underscore-link); + z-index: utilities-fx.z-index(subnavigation, underscore-link); } } } - @include utilities.high-contrast-mode() { + @include utilities-mx.high-contrast-mode() { &::after { background-color: CanvasText; } diff --git a/packages/styles/src/components/tabs/_tab-title.scss b/packages/styles/src/components/tabs/_tab-title.scss index 4c18c0b9f3..34d8091f37 100644 --- a/packages/styles/src/components/tabs/_tab-title.scss +++ b/packages/styles/src/components/tabs/_tab-title.scss @@ -6,6 +6,11 @@ @use './../../variables/spacing'; @use './../../variables/components/nav'; +@use './../../functions/tokens'; +@use './../../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; + .tab-title[role='tab'] { display: inline-block; cursor: pointer; @@ -69,7 +74,7 @@ top: 0; right: -1px; left: -1px; - height: spacing.$size-micro; + height: tokens.get('utility-gap-4'); background-color: nav.$nav-tabs-link-active-border-color; } } @@ -95,8 +100,8 @@ &:focus, &:focus-within, &:focus-visible { - outline: spacing.$size-line solid Highlight; - outline-offset: -(spacing.$size-micro); + outline: tokens.get('utility-gap-2') solid Highlight; + outline-offset: -(tokens.get('utility-gap-4')); } &.active { diff --git a/packages/styles/src/mixins/_index.scss b/packages/styles/src/mixins/_index.scss index 5db656187d..208705c310 100644 --- a/packages/styles/src/mixins/_index.scss +++ b/packages/styles/src/mixins/_index.scss @@ -10,6 +10,5 @@ @forward 'list'; @forward 'notification'; @forward 'scroll-shadows'; -@forward 'size'; @forward 'type'; @forward 'utilities'; diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss index 3d312d6ea1..34f6ed2196 100644 --- a/packages/styles/src/mixins/_notification.scss +++ b/packages/styles/src/mixins/_notification.scss @@ -60,7 +60,7 @@ tokens.$default-map: components.$post-banner; } &.no-icon { - min-height: calc(2 * #{$padding-y} + close.$close-size); + min-height: calc(2 * #{$padding-y} + #{close.$close-size}); padding-inline-start: $padding-x; &::before { diff --git a/packages/styles/src/mixins/_size.scss b/packages/styles/src/mixins/_size.scss deleted file mode 100644 index 51d27bfe0a..0000000000 --- a/packages/styles/src/mixins/_size.scss +++ /dev/null @@ -1,65 +0,0 @@ -@use 'sass:map'; -@use 'sass:string'; - -@use './../themes/bootstrap/core' as *; - -@use './../variables/spacing'; -@use './../functions/utilities'; - -@mixin bezel-small() { - padding: map.get(spacing.$post-sizes, 'mini') map.get(spacing.$post-sizes, 'regular'); -} - -@mixin bezel-small-regular() { - padding: map.get(spacing.$post-sizes, 'small-regular') map.get(spacing.$post-sizes, 'regular'); -} - -@mixin bezel-regular() { - padding: map.get(spacing.$post-sizes, 'regular'); -} - -@mixin bezel-bigger-regular() { - padding: map.get(spacing.$post-sizes, 'small-large'); -} - -@mixin bezel-medium() { - padding: map.get(spacing.$post-sizes, 'small-large') map.get(spacing.$post-sizes, 'large'); -} - -@mixin bezel-large() { - padding: map.get(spacing.$post-sizes, 'big'); -} - -@mixin bezel-big() { - padding: map.get(spacing.$post-sizes, 'bigger-big'); -} - -/** - * Generate responsive size properties for things like height, width, margin, padding, etc. - * @param $curve-size One of the curve sizes predefined at https://www.experience-hub.ch/document/2307#/grundlagen-web/abstaende - * @param $property Property key (height, width, padding, margin, top, etc.) - * @param $template Value template string used for shorthand declarations like padding ("$value auto" = padding: 1rem auto) - */ -@mixin responsive-size($curve-size: 'regular', $property-key: 'padding', $template: '$value') { - $curve: map.get(spacing.$size-curves, $curve-size); - - @if ($curve) { - $cache: ''; - - @each $key, $value in $curve { - @if ($key == 'xs') { - #{$property-key}: string.unquote(utilities.replace($template, '$value', $value)); - } @else { - // Don't write unnecessary media queries - @if ($cache != $value) { - @include media-breakpoint-up($key) { - #{$property-key}: string.unquote(utilities.replace($template, '$value', $value)); - } - } - } - $cache: $value; - } - } @else { - @warn "@mixin responsive-size: Can't find $curve-size: " + $curve-size; - } -} diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss index 4eb10fd3a0..c1709cfd2d 100644 --- a/packages/styles/src/mixins/_utilities.scss +++ b/packages/styles/src/mixins/_utilities.scss @@ -70,12 +70,6 @@ pointer-events: none; } -@mixin generate-utility-class($classname, $size, $property, $value) { - .#{$classname}-#{$size}-r { - #{$property}: $value !important; - } -} - @mixin high-contrast-mode() { @media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) { @content; diff --git a/packages/styles/src/variables/_animation.scss b/packages/styles/src/variables/_animation.scss index 48df5ee979..42489ca857 100644 --- a/packages/styles/src/variables/_animation.scss +++ b/packages/styles/src/variables/_animation.scss @@ -1,5 +1,9 @@ @use 'sass:map'; @use './spacing'; +@use '../functions/tokens'; +@use '../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; // Material Design - Motion Guidelines implementation // https://material.io/design/motion/ @@ -42,12 +46,12 @@ $transition-easing-bump-in: linear( ); // Distances -$transition-distance-xsmall: map.get(spacing.$post-sizes, 'micro') !default; -$transition-distance-small: map.get(spacing.$post-sizes, 'small-regular') !default; -$transition-distance-medium: map.get(spacing.$post-sizes, 'regular') !default; -$transition-distance-medium-md: map.get(spacing.$post-sizes, 'big') !default; -$transition-distance-large: map.get(spacing.$post-sizes, 'huge') !default; -$transition-distance-large-md: map.get(spacing.$post-sizes, 'giant') !default; +$transition-distance-xsmall: tokens.get('utility-gap-4') !default; +$transition-distance-small: tokens.get('utility-gap-12') !default; +$transition-distance-medium: tokens.get('utility-gap-16') !default; +$transition-distance-medium-md: tokens.get('utility-gap-32') !default; +$transition-distance-large: tokens.get('utility-gap-56') !default; +$transition-distance-large-md: tokens.get('utility-gap-80') !default; $transition-base-timing: $transition-time-default $transition-easing-default !default; $transition-base: all $transition-base-timing !default; diff --git a/packages/styles/src/variables/_spacing.scss b/packages/styles/src/variables/_spacing.scss index b4d8528415..dae648a9a7 100644 --- a/packages/styles/src/variables/_spacing.scss +++ b/packages/styles/src/variables/_spacing.scss @@ -16,137 +16,6 @@ $spacers: ( 5: $spacer * 3, ) !default; -// Post-Sizes -$size-hair: 1px !default; -$size-line: 2px !default; -$size-micro: 0.25rem !default; // ~4px -$size-mini: 0.5rem !default; // ~8px -$size-small-regular: 0.75rem !default; // ~12px -$size-regular: 1rem !default; // ~16px -$size-small-large: 1.25rem !default; // ~20px -$size-large: 1.5rem !default; // ~24px -$size-big: 2rem !default; // ~32px -$size-bigger-big: 2.5rem !default; // ~40px -$size-small-huge: 3rem !default; // ~48px -$size-huge: 3.5rem !default; // ~56px -$size-small-giant: 4.5rem !default; // ~72px -$size-giant: 5rem !default; // ~80px -$size-bigger-giant: 7rem !default; // ~112px - -$post-sizes: () !default; -$post-sizes: map.merge( - ( - 'hair': $size-hair, - 'line': $size-line, - 'micro': $size-micro, - 'mini': $size-mini, - 'small-regular': $size-small-regular, - 'regular': $size-regular, - 'small-large': $size-small-large, - 'large': $size-large, - 'big': $size-big, - 'bigger-big': $size-bigger-big, - 'small-huge': $size-small-huge, - 'huge': $size-huge, - 'small-giant': $size-small-giant, - 'giant': $size-giant, - 'bigger-giant': $size-bigger-giant, - ), - $post-sizes -); - -// Abstand Gross, Section -$size-curve-giant: ( - 'xs': $size-huge, - 'sm': $size-huge, - 'rg': $size-huge, - 'md': $size-giant, - 'lg': $size-giant, - 'xl': $size-giant, -) !default; - -// Abstand standard -$size-curve-huge: ( - 'xs': $size-big, - 'sm': $size-big, - 'rg': $size-big, - 'md': $size-bigger-big, - 'lg': $size-bigger-big, - 'xl': $size-huge, -) !default; - -// Abstand Section halb -$size-curve-bigger-big: ( - 'xs': $size-large, - 'sm': $size-large, - 'rg': $size-large, - 'md': $size-small-huge, - 'lg': $size-small-huge, - 'xl': $size-small-huge, -) !default; - -// Abstand Breadcrumb, Stepper -$size-curve-big: ( - 'xs': $size-small-large, - 'sm': $size-small-large, - 'rg': $size-small-large, - 'md': $size-big, - 'lg': $size-big, - 'xl': $size-bigger-big, -) !default; - -// H2 -$size-curve-large: ( - 'xs': $size-regular, - 'sm': $size-regular, - 'rg': $size-regular, - 'md': $size-small-large, - 'lg': $size-small-large, - 'xl': $size-big, -) !default; - -// Button -$size-curve-regular: ( - 'xs': $size-regular, - 'sm': $size-regular, - 'rg': $size-regular, - 'md': $size-large, - 'lg': $size-large, - 'xl': $size-large, -) !default; - -// Teaser -$size-curve-small: ( - 'xs': $size-small-regular, - 'sm': $size-regular, - 'rg': $size-regular, - 'md': $size-regular, - 'lg': $size-regular, - 'xl': $size-regular, -) !default; - -// Eingabefelder, p, h3, h4 -$size-curve-tiny: ( - 'xs': $size-small-regular, - 'sm': $size-small-regular, - 'rg': $size-small-regular, - 'md': $size-regular, - 'lg': $size-regular, - 'xl': $size-regular, -) !default; - -// List of all adaptive size curves -$size-curves: ( - 'giant': $size-curve-giant, - 'huge': $size-curve-huge, - 'bigger-big': $size-curve-bigger-big, - 'big': $size-curve-big, - 'large': $size-curve-large, - 'regular': $size-curve-regular, - 'small': $size-curve-small, - 'tiny': $size-curve-tiny, -) !default; - $responsive-spacing-properties: ( 'm': 'margin', 'mt': 'margin-top', diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss index 75272390f1..ce1b609e50 100644 --- a/packages/styles/src/variables/_type.scss +++ b/packages/styles/src/variables/_type.scss @@ -6,6 +6,11 @@ @use './components/paragraph'; @use './../functions/sizing'; +@use './../functions/tokens'; +@use './../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; + // Fonts // // Font, line-height, and color for body text, headings, and more. @@ -180,10 +185,10 @@ $text-muted: color.$gray-60; $blockquote-font-weight: $font-weight-bold !default; $blockquote-border-left: commons.$border-thick solid color.$black !default; -$blockquote-border-left-width-md: spacing.$size-micro !default; -$blockquote-padding-left: spacing.$size-small-regular !default; -$blockquote-margin-top: spacing.$size-large !default; -$blockquote-margin-y: spacing.$size-regular !default; +$blockquote-border-left-width-md: tokens.get('utility-gap-4') !default; +$blockquote-padding-left: tokens.get('utility-gap-12') !default; +$blockquote-margin-top: tokens.get('utility-gap-24') !default; +$blockquote-margin-y: tokens.get('utility-gap-16') !default; $blockquote-footer-font-size: math.div(1em * sizing.strip-unit($small-font-size), 100) !default; $blockquote-cite-font-weight: $font-weight-normal !default; diff --git a/packages/styles/src/variables/components/_badge.scss b/packages/styles/src/variables/components/_badge.scss index d4c5a14145..65f09893d3 100644 --- a/packages/styles/src/variables/components/_badge.scss +++ b/packages/styles/src/variables/components/_badge.scss @@ -5,6 +5,10 @@ @use './button'; @use './../../functions/sizing'; +@use './../../functions/tokens'; +@use './../../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; $badge-border-radius: 50rem; $badge-line-height: type.$line-height-copy; @@ -12,12 +16,12 @@ $badge-color: color.$white; $badge-bg: color.$error; $badge-border: color.$white solid commons.$border-thick; -$badge-height: spacing.$size-large; -$badge-height-sm: spacing.$size-regular; -$badge-height-empty: spacing.$size-mini; +$badge-height: tokens.get('utility-gap-24'); +$badge-height-sm: tokens.get('utility-gap-16'); +$badge-height-empty: tokens.get('utility-gap-8'); -$badge-padding-x: spacing.$size-mini; -$badge-padding-x-sm: spacing.$size-micro; +$badge-padding-x: tokens.get('utility-gap-8'); +$badge-padding-x-sm: tokens.get('utility-gap-4'); $badge-padding-x-empty: 0%; // needs a unit for the calculated min-width $badge-font-size: type.$font-size-12; diff --git a/packages/styles/src/variables/components/_button.scss b/packages/styles/src/variables/components/_button.scss index 1249905b40..5301a00a5c 100644 --- a/packages/styles/src/variables/components/_button.scss +++ b/packages/styles/src/variables/components/_button.scss @@ -10,9 +10,12 @@ @use '../../functions/tokens'; @use '../../tokens/components'; +@use '../../tokens/utilities'; tokens.$default-map: components.$post-button; +// TODO: Fix issue with dependencies and multiple calc + // Available button sizes except the default, which is md $btn-non-default-sizes: sm, lg !default; @@ -60,29 +63,29 @@ $btn-icon-size-map: ( // Old variables / Used elsewhere than on the v2 button component $input-btn-border-width-rem: sizing.px-to-rem($input-btn-border-width); -$input-btn-padding-y: spacing.$size-regular - $input-btn-border-width-rem !default; -$input-btn-padding-x: spacing.$size-small-large - $input-btn-border-width-rem !default; +$input-btn-padding-y: sizing.px-to-rem(16) - $input-btn-border-width-rem !default; +$input-btn-padding-x: sizing.px-to-rem(20) - $input-btn-border-width-rem !default; $input-btn-line-height: type.$line-height-copy !default; -$input-btn-padding-y-sm: spacing.$size-micro !default; -$input-btn-padding-x-sm: spacing.$size-regular !default; +$input-btn-padding-y-sm: 4px !default; +$input-btn-padding-x-sm: 16px !default; -$input-btn-padding-y-rg: spacing.$size-small-regular - $input-btn-border-width-rem !default; -$input-btn-padding-x-rg: spacing.$size-regular - $input-btn-border-width-rem !default; +$input-btn-padding-y-rg: sizing.px-to-rem(12) - $input-btn-border-width-rem !default; +$input-btn-padding-x-rg: sizing.px-to-rem(16) - $input-btn-border-width-rem !default; -$input-btn-padding-y-lg: spacing.$size-small-regular !default; -$input-btn-padding-x-lg: spacing.$size-regular !default; +$input-btn-padding-y-lg: 12px !default; // px value to avoid build errors +$input-btn-padding-x-lg: 16px !default; // px value to avoid bootstrap build errors $input-btn-focus-width: 0.125rem !default; // 2px $input-btn-focus-color: rgba(color.$gray-80, 0.25) !default; $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; $btn-height-sm: 2rem; -$btn-icon-size-sm: spacing.$size-regular !default; +$btn-icon-size-sm: tokens.get('utility-gap-16', utilities.$post-spacing) !default; $btn-font-size-rg: type.$font-size-14 !default; $btn-icon-size-rg: 1.125rem !default; $btn-height-md: 3rem; -$btn-icon-size-md: spacing.$size-small-large !default; +$btn-icon-size-md: tokens.get('utility-gap-20', utilities.$post-spacing) !default; $btn-icon-size-lg: 1.375rem !default; $old-btn-icon-size-map: ( 'sm': $btn-icon-size-sm, diff --git a/packages/styles/src/variables/components/_card.scss b/packages/styles/src/variables/components/_card.scss index e8836a87ab..8e4b3aab3b 100644 --- a/packages/styles/src/variables/components/_card.scss +++ b/packages/styles/src/variables/components/_card.scss @@ -4,6 +4,10 @@ @use './../type'; @use './../spacing'; @use './../../functions/sizing'; +@use '../../functions/tokens'; +@use '../../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; // Cards $card-font-size: type.$font-size-small !default; // Design System only @@ -14,8 +18,9 @@ $card-margin-top: sizing.calculate-single-box-shadow-size( commons.$box-shadow ) !default; // ensures the shadow is visible -$card-spacer-y: spacing.$size-small-large !default; // Design System 20px -$card-spacer-x: spacing.$size-regular !default; // Design System 16px +$card-spacer-y: 20px !default; // px value to avoid bootstrap build errors +$card-spacer-x: tokens.get('utility-gap-16') !default; + $card-border-width: commons.$border-width !default; $card-border-radius: commons.$border-width * 2 !default; // Design System $card-border-color: color.$gray-20 !default; // Design System diff --git a/packages/styles/src/variables/components/_chip.scss b/packages/styles/src/variables/components/_chip.scss index df2c9e4617..aa3ca00459 100644 --- a/packages/styles/src/variables/components/_chip.scss +++ b/packages/styles/src/variables/components/_chip.scss @@ -8,6 +8,10 @@ @use './../type'; @use './../../functions/sizing'; +@use '../../tokens/utilities'; +@use '../../functions/tokens'; + +tokens.$default-map: utilities.$post-spacing; $chip-color: color.$gray-80; $chip-bg: color.$white; @@ -17,8 +21,8 @@ $chip-border-radius: commons.$border-radius-pill; $chip-height: map.get(button.$btn-height-map, 'md'); $chip-max-width: 100%; -$chip-padding-x: spacing.$size-regular; -$chip-gap: spacing.$size-mini; +$chip-padding-x: tokens.get('utility-gap-16'); +$chip-gap: tokens.get('utility-gap-8'); $chip-font-size: type.$font-size-16; $chip-font-weight: type.$font-weight-normal; @@ -32,7 +36,7 @@ $chip-transition: $chip-height-sm: button.$btn-height-sm; $chip-gap-sm: sizing.px-to-rem(6px); $chip-font-size-sm: type.$font-size-14; -$chip-padding-x-sm: spacing.$size-small-regular; +$chip-padding-x-sm: tokens.get('utility-gap-12'); $chip-hover-color: color.$black; $chip-hover-bg: color.$gray-20; @@ -53,7 +57,7 @@ $chip-close-button-icon: 2043; $chip-close-button-border-width: commons.$border-width; $chip-close-button-border-radius: commons.$border-radius-round; $chip-close-button-border: $chip-close-button-border-width solid $chip-border-color; -$chip-close-button-height: spacing.$size-large; -$chip-close-button-height-sm: spacing.$size-regular; +$chip-close-button-height: tokens.get('utility-gap-24'); +$chip-close-button-height-sm: tokens.get('utility-gap-16'); -$chip-dismissable-padding-start: spacing.$size-mini; +$chip-dismissable-padding-start: tokens.get('utility-gap-8'); diff --git a/packages/styles/src/variables/components/_close.scss b/packages/styles/src/variables/components/_close.scss index c4e6a3d419..39f0535ab5 100644 --- a/packages/styles/src/variables/components/_close.scss +++ b/packages/styles/src/variables/components/_close.scss @@ -2,8 +2,12 @@ @use './../color'; @use './../spacing'; @use './../../functions/icons'; +@use './../../functions/tokens'; +@use './../../tokens/utilities'; -$close-size: spacing.$size-large !default; +tokens.$default-map: utilities.$post-spacing; + +$close-size: tokens.get('utility-gap-24') !default; $close-border-radius: button.$btn-border-radius !default; $close-color: color.$black !default; $close-hover-color: color.$black !default; @@ -11,9 +15,9 @@ $close-disabled-color: var(--post-gray-40) !default; $close-transition: button.$btn-transition !default; // DEPRECATED -$btn-close-width: spacing.$size-large !default; +$btn-close-width: tokens.get('utility-gap-24') !default; $btn-close-height: $btn-close-width !default; -$btn-close-padding-x: spacing.$size-regular !default; +$btn-close-padding-x: tokens.get('utility-gap-16') !default; $btn-close-color: color.$black !default; $btn-close-bg: url('#{icons.get-colored-svg-url('2043', $btn-close-color)}') !default; $btn-close-hcm-bg: url('#{icons.get-colored-svg-url('2043', color.$white)}') !default; diff --git a/packages/styles/src/variables/components/_datatable.scss b/packages/styles/src/variables/components/_datatable.scss index 2ee6321713..d38707b9a3 100644 --- a/packages/styles/src/variables/components/_datatable.scss +++ b/packages/styles/src/variables/components/_datatable.scss @@ -7,37 +7,41 @@ @use './../type'; @use './button'; @use './../../functions/icons'; +@use '../../functions/tokens'; +@use '../../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; $datatable-header-font-weight: type.$font-weight-bold; $datatable-header-unsorted-color: color.$gray-60; $datatable-cell-bg: color.$light; -$datatable-cell-padding-x: spacing.$size-regular; -$datatable-cell-padding-y: spacing.$size-mini; +$datatable-cell-padding-x: tokens.get('utility-gap-16'); +$datatable-cell-padding-y: tokens.get('utility-gap-8'); $datatable-cell-padding: $datatable-cell-padding-y $datatable-cell-padding-x; -$datatable-cell-margin: spacing.$size-line; +$datatable-cell-margin: tokens.get('utility-gap-2'); $datatable-inverted-cell-bg: color.$white; -$datatable-flush-border-width: spacing.$size-line; +$datatable-flush-border-width: tokens.get('utility-gap-2'); $datatable-flush-border-color: color.$gray-10; $datatable-flush-border: $datatable-flush-border-width solid $datatable-flush-border-color; -$datatable-footer-padding-x: spacing.$size-regular; +$datatable-footer-padding-x: tokens.get('utility-gap-16'); $datatable-footer-padding-y: button.$input-btn-focus-width; $datatable-footer-padding: $datatable-footer-padding-y $datatable-footer-padding-x; -$datatable-footer-separator-width: spacing.$size-line; +$datatable-footer-separator-width: tokens.get('utility-gap-2'); $datatable-footer-separator-color: color.$gray-10; $datatable-footer-separator: $datatable-flush-border-width solid $datatable-flush-border-color; -$datatable-row-count-input-width: spacing.$size-bigger-giant; +$datatable-row-count-input-width: tokens.get('utility-gap-112'); $datatable-button-margin: button.$btn-focus-width; $datatable-button-width: calc(100% - 2 * #{$datatable-button-margin}); $datatable-button-height: $datatable-button-width; $datatable-button-focus-shadow: button.$btn-focus-box-shadow; -$datatable-progressbar-height: spacing.$size-micro; +$datatable-progressbar-height: tokens.get('utility-gap-4'); $datatable-progressbar-backgroundcolor: color.$gray-10; $datatable-progressbar-activecolor: color.$yellow; diff --git a/packages/styles/src/variables/components/_form-check.scss b/packages/styles/src/variables/components/_form-check.scss index 3623b8676a..85eddf0d30 100644 --- a/packages/styles/src/variables/components/_form-check.scss +++ b/packages/styles/src/variables/components/_form-check.scss @@ -6,13 +6,17 @@ @use './../../functions/icons'; @use './../../functions/sizing'; @use './../../functions/forms' as forms-fn; +@use '../../tokens/utilities'; +@use '../../functions/tokens'; -$form-check-row-gap: spacing.$size-small-regular !default; -$form-check-column-gap: spacing.$size-mini !default; -$form-check-margin-bottom: spacing.$size-regular !default; -$form-check-inline-margin-right: spacing.$size-large !default; +tokens.$default-map: utilities.$post-spacing; + +$form-check-row-gap: tokens.get('utility-gap-12') !default; +$form-check-column-gap: tokens.get('utility-gap-8') !default; +$form-check-margin-bottom: tokens.get('utility-gap-16') !default; +$form-check-inline-margin-right: tokens.get('utility-gap-24') !default; $form-check-input-size: 1.375rem !default; -$form-check-input-size-sm: spacing.$size-regular !default; +$form-check-input-size-sm: tokens.get('utility-gap-16') !default; $form-check-input-border-width: forms.$input-border-width !default; $form-check-input-focus-box-shadow: forms.$input-focus-box-shadow !default; $form-check-input-disabled-svg-border-width: $form-check-input-border-width * 2; diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss index 4d3d685670..d6832822f4 100644 --- a/packages/styles/src/variables/components/_forms.scss +++ b/packages/styles/src/variables/components/_forms.scss @@ -8,6 +8,9 @@ @use './../spacing'; @use './../../functions/sizing'; +@use './../../functions/tokens'; +@use './../../tokens/utilities'; + // Forms // Used elsewhere than text input, textarea or select @@ -16,14 +19,14 @@ $input-padding-y: button.$input-btn-padding-y !default; $input-padding-x: button.$input-btn-padding-x !default; $input-line-height: type.$line-height-copy !default; -$input-padding-y-sm: button.$input-btn-padding-y-sm !default; +$input-padding-y-sm: sizing.px-to-rem(button.$input-btn-padding-y-sm) !default; $input-line-height-sm: type.$line-height-copy !default; $input-padding-y-rg: button.$input-btn-padding-y-rg !default; $input-padding-x-rg: button.$input-btn-padding-x-rg !default; $input-line-height-rg: type.$line-height-copy !default; -$input-padding-y-lg: button.$input-btn-padding-y-lg !default; +$input-padding-y-lg: sizing.px-to-rem(button.$input-btn-padding-y-lg) !default; $input-line-height-lg: type.$line-height-copy !default; $input-disabled-border-color: var(--post-gray-40); // Design System only @@ -33,7 +36,7 @@ $input-border-width: button.$input-btn-border-width !default; $input-focus-width: button.$input-btn-focus-width !default; $input-focus-box-shadow: none !default; -$input-focus-outline-thickness: spacing.$size-line; +$input-focus-outline-thickness: tokens.get('utility-gap-2', utilities.$post-spacing); $input-height-border: $input-border-width * 2 !default; diff --git a/packages/styles/src/variables/components/_modal.scss b/packages/styles/src/variables/components/_modal.scss index 8588f965f8..33eb2d2c74 100644 --- a/packages/styles/src/variables/components/_modal.scss +++ b/packages/styles/src/variables/components/_modal.scss @@ -7,21 +7,26 @@ @use './button'; +@use '../../tokens/utilities'; +@use '../../functions/tokens'; + +tokens.$default-map: utilities.$post-spacing; + // Modals // Padding applied to the modal footer -$modal-inner-padding: spacing.$size-regular !default; +$modal-inner-padding: tokens.get('utility-gap-16') !default; // Padding applied to the modal body -$modal-body-padding-y: spacing.$size-mini !default; -$modal-body-padding-x: spacing.$size-big !default; +$modal-body-padding-y: tokens.get('utility-gap-8') !default; +$modal-body-padding-x: tokens.get('utility-gap-32') !default; $modal-body-padding: $modal-body-padding-y $modal-body-padding-x !default; // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding $modal-footer-margin-between: 0.5rem !default; -$modal-dialog-margin: spacing.$size-small-regular !default; -$modal-dialog-margin-y-sm-up: spacing.$size-big !default; +$modal-dialog-margin: tokens.get('utility-gap-12') !default; +$modal-dialog-margin-y-sm-up: tokens.get('utility-gap-32') !default; $modal-title-line-height: type.$line-height-copy !default; @@ -43,7 +48,7 @@ $modal-header-border-color: commons.$border-color !default; $modal-footer-border-color: $modal-header-border-color !default; $modal-header-border-width: $modal-content-border-width !default; $modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding-y: spacing.$size-large !default; +$modal-header-padding-y: tokens.get('utility-gap-24') !default; $modal-header-padding-x: $modal-body-padding-x !default; $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility @@ -52,10 +57,10 @@ $modal-dialog-width-lg: 800px !default; $modal-dialog-width-md: 500px !default; $modal-dialog-width-sm: 300px !default; -$modal-xl: sizing.px-to-rem($modal-dialog-width-xl) - 2 * $modal-dialog-margin !default; -$modal-lg: sizing.px-to-rem($modal-dialog-width-lg) - 2 * $modal-dialog-margin !default; -$modal-md: sizing.px-to-rem($modal-dialog-width-md) - 2 * $modal-dialog-margin !default; -$modal-sm: sizing.px-to-rem($modal-dialog-width-sm) - 2 * $modal-dialog-margin !default; +$modal-xl: calc(sizing.px-to-rem($modal-dialog-width-xl) - 2 * #{$modal-dialog-margin}) !default; +$modal-lg: calc(sizing.px-to-rem($modal-dialog-width-lg) - 2 * #{$modal-dialog-margin}) !default; +$modal-md: calc(sizing.px-to-rem($modal-dialog-width-md) - 2 * #{$modal-dialog-margin}) !default; +$modal-sm: calc(sizing.px-to-rem($modal-dialog-width-sm) - 2 * #{$modal-dialog-margin}) !default; $modal-fade-transform: translate(0, -50px) !default; $modal-show-transform: none !default; @@ -63,6 +68,6 @@ $modal-transition: transform 0.3s ease-out !default; $modal-scale-transform: scale(1.02) !default; // Padding applied to the close button -$modal-btn-close-margin-y: spacing.$size-mini !default; -$modal-btn-close-margin-x: spacing.$size-regular !default; +$modal-btn-close-margin-y: tokens.get('utility-gap-8') !default; +$modal-btn-close-margin-x: tokens.get('utility-gap-16') !default; $modal-btn-close-margin: $modal-btn-close-margin-y $modal-btn-close-margin-x !default; diff --git a/packages/styles/src/variables/components/_navbar.scss b/packages/styles/src/variables/components/_navbar.scss index 78365061db..1f5d88e864 100644 --- a/packages/styles/src/variables/components/_navbar.scss +++ b/packages/styles/src/variables/components/_navbar.scss @@ -3,13 +3,16 @@ @use './../type'; @use './../components/button'; @use './../components/nav'; -@use './../../functions/utilities'; +@use './../../functions/utilities' as utilities-fx; + +@use '../../tokens/utilities'; +@use '../../functions/tokens'; // Bootstrap variables $navbar-padding-y: (spacing.$spacer * 0.5) !default; $navbar-padding-x: spacing.$spacer !default; -$navbar-nav-link-padding-x: spacing.$size-small-huge !default; +$navbar-nav-link-padding-x: tokens.get('utility-gap-48', utilities.$post-spacing) !default; $navbar-brand-font-size: type.$font-size-bigger-regular !default; $navbar-brand-height: $navbar-brand-font-size * type.$line-height-copy !default; @@ -25,7 +28,7 @@ $navbar-dark-hover-color: rgba(color.$white, 0.75) !default; $navbar-dark-active-color: color.$white !default; $navbar-dark-disabled-color: rgba(color.$white, 0.25) !default; -$navbar-dark-toggler-icon-bg: utilities.replace( +$navbar-dark-toggler-icon-bg: utilities-fx.replace( url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), '#', '%23' @@ -36,7 +39,7 @@ $navbar-light-color: rgba(color.$black, 0.5) !default; $navbar-light-hover-color: rgba(color.$black, 0.7) !default; $navbar-light-active-color: rgba(color.$black, 0.9) !default; $navbar-light-disabled-color: rgba(color.$black, 0.3) !default; -$navbar-light-toggler-icon-bg: utilities.replace( +$navbar-light-toggler-icon-bg: utilities-fx.replace( url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), '#', '%23' diff --git a/packages/styles/src/variables/components/_notification.scss b/packages/styles/src/variables/components/_notification.scss index 5e04f515a5..d99239e64b 100644 --- a/packages/styles/src/variables/components/_notification.scss +++ b/packages/styles/src/variables/components/_notification.scss @@ -5,10 +5,12 @@ @use './../spacing'; @use './../type'; @use '../../tokens/components'; +@use '../../tokens/utilities'; @use '../../functions/tokens'; tokens.$default-map: components.$post-banner; -$notification-body-gap: spacing.$size-micro !default; + +$notification-body-gap: tokens.get('utility-gap-4', utilities.$post-spacing) !default; $notification-font-weight: type.$font-weight-normal !default; $notification-link-font-weight: type.$font-weight-normal !default; @@ -52,8 +54,10 @@ $notification-hr-margin-block-map: () !default; $notification-hr-margin-block-map: map.merge( $notification-hr-margin-block-map, ( - 'banner': spacing.$size-mini spacing.$size-small-regular, - 'toast': spacing.$size-micro spacing.$size-small-regular, + 'banner': tokens.get('utility-gap-8', utilities.$post-spacing) + tokens.get('utility-gap-12', utilities.$post-spacing), + 'toast': tokens.get('utility-gap-4', utilities.$post-spacing) + tokens.get('utility-gap-12', utilities.$post-spacing), ) ); diff --git a/packages/styles/src/variables/components/_pagination.scss b/packages/styles/src/variables/components/_pagination.scss index 5bb76ab1e4..e23f7ee12c 100644 --- a/packages/styles/src/variables/components/_pagination.scss +++ b/packages/styles/src/variables/components/_pagination.scss @@ -3,15 +3,12 @@ @use './../type'; @use './../commons'; @use './button'; +@use '../../tokens/utilities'; +@use '../../functions/tokens'; -// Pagination +tokens.$default-map: utilities.$post-spacing; -$pagination-padding-y: spacing.$size-mini !default; -$pagination-padding-x: 0 !default; -$pagination-padding-y-sm: spacing.$size-micro !default; -$pagination-padding-x-sm: 0 !default; -$pagination-padding-y-lg: spacing.$size-small-regular !default; -$pagination-padding-x-lg: 0 !default; +// Pagination $pagination-line-height: 1.25 !default; $pagination-color: color.$gray-60 !default; @@ -35,8 +32,8 @@ $pagination-disabled-bg: color.$light !default; $pagination-disabled-border-color: color.$gray-10 !default; $pagination-height-border: $pagination-border-width * 2 !default; -$pagination-height-inner: (type.$font-size-base * $pagination-line-height) + - ($pagination-padding-y * 2) !default; -$pagination-height: calc(#{$pagination-height-inner} + #{$pagination-height-border}) !default; +$pagination-height: calc( + ((type.$font-size-base * $pagination-line-height) + (#{tokens.get('utility-gap-8')} * 2)) + #{$pagination-height-border} +) !default; $pagination-width: $pagination-height !default; diff --git a/packages/styles/src/variables/components/_spinners.scss b/packages/styles/src/variables/components/_spinners.scss index 7567fa52a8..3a8146b840 100644 --- a/packages/styles/src/variables/components/_spinners.scss +++ b/packages/styles/src/variables/components/_spinners.scss @@ -4,6 +4,11 @@ @use './../type'; @use './../../functions/sizing'; +@use './../../functions/tokens'; +@use './../../tokens/utilities'; + +tokens.$default-map: utilities.$post-spacing; + // Spinners $spinner-color-primary: color.$yellow !default; @@ -27,7 +32,7 @@ $spinner-size-map: ( // DEPRECATED $spinner-size-sm: type.$font-size-40 !default; -$spinner-border-width-sm: spacing.$size-micro !default; +$spinner-border-width-sm: tokens.get('utility-gap-4') !default; $spinner-size-xs: type.$font-size-16 !default; -$spinner-border-width-xs: spacing.$size-line !default; +$spinner-border-width-xs: tokens.get('utility-gap-2') !default; diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss index 60bab4b596..e141e3df44 100644 --- a/packages/styles/src/variables/components/_stepper.scss +++ b/packages/styles/src/variables/components/_stepper.scss @@ -5,17 +5,22 @@ @use './../../functions/icons' as icon-fn; -$stepper-bar-height: spacing.$size-micro; +@use '../../tokens/utilities'; +@use '../../functions/tokens'; + +tokens.$default-map: utilities.$post-spacing; + +$stepper-bar-height: tokens.get('utility-gap-4'); $stepper-bar-color: color.$gray-40; $stepper-bar-fill-color: color.$yellow; -$stepper-indicator-size: spacing.$size-bigger-big; -$stepper-indicator-border-width: spacing.$size-micro; +$stepper-indicator-size: tokens.get('utility-gap-40'); +$stepper-indicator-border-width: tokens.get('utility-gap-4'); $stepper-indicator-border-color: rgb(var(--post-bg-rgb, 255 255 255)); $stepper-indicator-font-weight: type.$font-weight-bold; $stepper-indicator-bg: color.$yellow; $stepper-indicator-color: color.$black; -$stepper-indicator-check-size: spacing.$size-large; +$stepper-indicator-check-size: tokens.get('utility-gap-24'); $stepper-indicator-transition: color animation.$transition-base-timing, background-color animation.$transition-base-timing; @@ -29,8 +34,8 @@ $stepper-indicator-check-icon: url('#{icon-fn.get-colored-svg-url('2105', $stepp $stepper-indicator-check-icon-size: $stepper-indicator-check-size; $stepper-link-line-height: type.$line-height-sm; -$stepper-link-gap: spacing.$size-mini; -$stepper-link-spacing: spacing.$size-regular; +$stepper-link-gap: tokens.get('utility-gap-8'); +$stepper-link-spacing: tokens.get('utility-gap-16'); $stepper-link-color: var(--post-gray-60); $stepper-link-current-color: var(--post-gray-80); diff --git a/packages/styles/src/variables/components/_subnavigation.scss b/packages/styles/src/variables/components/_subnavigation.scss index bf9c3f0c60..d40991e025 100644 --- a/packages/styles/src/variables/components/_subnavigation.scss +++ b/packages/styles/src/variables/components/_subnavigation.scss @@ -3,6 +3,10 @@ @use './../commons'; @use './../spacing'; @use './../../functions/sizing'; +@use '../../tokens/utilities'; +@use '../../functions/tokens'; + +tokens.$default-map: utilities.$post-spacing; // Subnavigation @@ -20,13 +24,11 @@ $subnavigation-height-xl: sizing.px-to-rem(72); $subnavigation-link-color: rgba(var(--post-contrast-color-rgb), 0.6); $subnavigation-link-color-hover: var(--post-contrast-color); -$subnavigation-link-underscore-height: map.get(spacing.$post-sizes, 'micro'); +$subnavigation-link-underscore-height: tokens.get('utility-gap-4'); $subnavigation-link-underscore-color-active: color.$yellow; $subnavigation-link-underscore-color-hover: rgba(var(--post-contrast-color-rgb), 0.4); -$subnavigation-link-padding-xs: map.get(spacing.$post-sizes, 'regular') - map.get(spacing.$post-sizes, 'small-regular'); -$subnavigation-link-padding-lg: map.get(spacing.$post-sizes, 'small-large') - map.get(spacing.$post-sizes, 'regular'); +$subnavigation-link-padding-xs: tokens.get('utility-gap-16') tokens.get('utility-gap-12'); +$subnavigation-link-padding-lg: tokens.get('utility-gap-20') tokens.get('utility-gap-16'); -$subnavigation-result-margin-left: map.get(spacing.$post-sizes, 'mini'); +$subnavigation-result-margin-left: tokens.get('utility-gap-8'); diff --git a/packages/styles/src/variables/components/_tables.scss b/packages/styles/src/variables/components/_tables.scss index 685041d26d..7c1aa688af 100644 --- a/packages/styles/src/variables/components/_tables.scss +++ b/packages/styles/src/variables/components/_tables.scss @@ -4,11 +4,16 @@ @use './../spacing'; @use './../type'; +@use '../../tokens/utilities'; +@use '../../functions/tokens'; + +tokens.$default-map: utilities.$post-spacing; + // Bootstrap variables -$table-cell-padding-y: spacing.$size-small-regular !default; -$table-cell-padding-x: spacing.$size-mini !default; -$table-cell-padding-y-sm: spacing.$size-mini !default; -$table-cell-padding-x-sm: spacing.$size-micro !default; +$table-cell-padding-y: tokens.get('utility-gap-12') !default; +$table-cell-padding-x: tokens.get('utility-gap-4') !default; +$table-cell-padding-y-sm: tokens.get('utility-gap-8') !default; +$table-cell-padding-x-sm: tokens.get('utility-gap-4') !default; $table-cell-vertical-align: top !default; $table-color: var(--post-contrast-color) !default; $table-bg: transparent !default; diff --git a/packages/styles/src/variables/components/_tag.scss b/packages/styles/src/variables/components/_tag.scss index a54518da39..4c034b76c6 100644 --- a/packages/styles/src/variables/components/_tag.scss +++ b/packages/styles/src/variables/components/_tag.scss @@ -1,19 +1,22 @@ @use './../color' as color; @use './../spacing' as spacing; @use './../type' as type; -@use '../../functions/sizing' as sizing; +@use '../../functions/tokens'; +@use '../../tokens/utilities'; -$tag-gap: spacing.$size-micro; +tokens.$default-map: utilities.$post-spacing; + +$tag-gap: tokens.get('utility-gap-4'); $tag-padding-y: 0; -$tag-padding-x: spacing.$size-mini; +$tag-padding-x: tokens.get('utility-gap-8'); $tag-max-width: 100%; -$tag-border-width: spacing.$size-hair; -$tag-border-radius: spacing.$size-micro; +$tag-border-width: tokens.get('utility-gap-1'); +$tag-border-radius: tokens.get('utility-gap-4'); $tag-font-size: type.$font-size-16; -$tag-line-height: spacing.$size-big - (sizing.px-to-rem($tag-border-width) * 2); +$tag-line-height: calc(tokens.get('utility-gap-32') - (#{$tag-border-width} * 2)); $tag-icon-size: $tag-font-size * 1.25; -$tag-sm-line-height: spacing.$size-large; +$tag-sm-line-height: tokens.get('utility-gap-24'); $tag-sm-icon-size: $tag-font-size; $tag-default-background: color.$gray-10; diff --git a/packages/styles/tests/mixins/index.test.scss b/packages/styles/tests/mixins/index.test.scss index acaf720c69..bac65e5f80 100644 --- a/packages/styles/tests/mixins/index.test.scss +++ b/packages/styles/tests/mixins/index.test.scss @@ -9,14 +9,6 @@ body { } @include mixins.focus-outline(); - @include mixins.bezel-small(); - @include mixins.bezel-small-regular(); - @include mixins.bezel-regular(); - @include mixins.bezel-bigger-regular(); - @include mixins.bezel-medium(); - @include mixins.bezel-large(); - @include mixins.bezel-big(); - @include mixins.font-curve('tiny'); @include mixins.font-smoothing(); @include mixins.font-smoothing-reset(); diff --git a/packages/styles/tests/mixins/size.test.scss b/packages/styles/tests/mixins/size.test.scss deleted file mode 100644 index 3c96e1d58b..0000000000 --- a/packages/styles/tests/mixins/size.test.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'src/mixins/size'; - -body { - @include size.bezel-small(); - @include size.bezel-small-regular(); - @include size.bezel-regular(); - @include size.bezel-bigger-regular(); - @include size.bezel-medium(); - @include size.bezel-large(); - @include size.bezel-big(); -} From 5b54cca85531100a1a2c603c7112d6b2a0c09f33 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Thu, 19 Dec 2024 09:32:31 +0100 Subject: [PATCH 2/4] clean up + changesets --- .changeset/fresh-files-crash.md | 7 ++++ .changeset/stale-guests-love.md | 5 +++ .../components/post-rating/post-rating.scss | 2 +- .../.storybook/styles/components/tabs.scss | 4 +-- .../src/shared/tile/tile.component.scss | 4 +-- .../icons/search/search-icons.styles.scss | 4 +-- .../stories/utilities/flex/flex.styles.scss | 2 +- packages/styles/src/components/datatable.scss | 2 +- .../styles/src/components/datepicker.scss | 2 +- packages/styles/src/components/dropdown.scss | 2 +- packages/styles/src/components/modal.scss | 4 +-- .../styles/src/components/product-card.scss | 6 ++-- packages/styles/src/components/stepper.scss | 35 +++++++------------ .../styles/src/components/subnavigation.scss | 2 +- .../src/components/tabs/_tab-title.scss | 2 +- packages/styles/src/mixins/_notification.scss | 2 +- .../src/variables/components/_button.scss | 16 ++++----- .../src/variables/components/_pagination.scss | 13 ++++++- .../styles/src/variables/components/_tag.scss | 2 +- 19 files changed, 64 insertions(+), 52 deletions(-) create mode 100644 .changeset/fresh-files-crash.md create mode 100644 .changeset/stale-guests-love.md diff --git a/.changeset/fresh-files-crash.md b/.changeset/fresh-files-crash.md new file mode 100644 index 0000000000..56ad7a873e --- /dev/null +++ b/.changeset/fresh-files-crash.md @@ -0,0 +1,7 @@ +--- +'@swisspost/design-system-documentation': patch +'@swisspost/design-system-components': patch +'@swisspost/design-system-styles': patch +--- + +Removed all usage of deprecated utility sizing classes. diff --git a/.changeset/stale-guests-love.md b/.changeset/stale-guests-love.md new file mode 100644 index 0000000000..eb7a80587d --- /dev/null +++ b/.changeset/stale-guests-love.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': major +--- + +Removed deprecated utility sizing and line-height classes as well as `responsive-size`, `generate-utility-class` and all `bezel-*` mixins. diff --git a/packages/components/src/components/post-rating/post-rating.scss b/packages/components/src/components/post-rating/post-rating.scss index a66dc12cf7..852a8100e1 100644 --- a/packages/components/src/components/post-rating/post-rating.scss +++ b/packages/components/src/components/post-rating/post-rating.scss @@ -10,7 +10,7 @@ display: flex; flex-wrap: wrap; overflow: hidden; - margin: 0 (-(tokens.get('utility-gap-4', utilities.$post-spacing))); + margin: 0 calc(tokens.get('utility-gap-4', utilities.$post-spacing) * -1); border-radius: post.$border-radius; .star { diff --git a/packages/documentation/.storybook/styles/components/tabs.scss b/packages/documentation/.storybook/styles/components/tabs.scss index f2dc55ba87..7943371d8b 100644 --- a/packages/documentation/.storybook/styles/components/tabs.scss +++ b/packages/documentation/.storybook/styles/components/tabs.scss @@ -61,9 +61,9 @@ tokens.$default-map: utilities.$post-spacing; display: block; content: ''; position: absolute; - top: calc(100% + #{tokens.get('utility-gap-16')}); + top: calc(100% + tokens.get('utility-gap-16')); left: 0; - right: calc(#{tokens.get('utility-gap-8')} * -1); + right: calc(tokens.get('utility-gap-8') * -1); border-top: post.$border-width dashed post.$border-color; } } diff --git a/packages/documentation/src/shared/tile/tile.component.scss b/packages/documentation/src/shared/tile/tile.component.scss index 8b73c5e591..f62c4e030d 100644 --- a/packages/documentation/src/shared/tile/tile.component.scss +++ b/packages/documentation/src/shared/tile/tile.component.scss @@ -37,7 +37,7 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2)); align-items: center; flex: 0 0 auto; padding: 0 tokens.get('utility-gap-4'); - height: calc((#{tokens.get('utility-gap-8')} * 2) + 2.2em); + height: calc((tokens.get('utility-gap-8') * 2) + 2.2em); background-color: post.$yellow; border-top-left-radius: inherit; border-top-right-radius: inherit; @@ -89,7 +89,7 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2)); height: $tile-rg-size; .tile--title { - height: calc((#{tokens.get('utility-gap-8')} * 1.5) + 2.2em); + height: calc((tokens.get('utility-gap-8') * 1.5) + 2.2em); ~ .tile--icon { ::slotted(img) { diff --git a/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss b/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss index 3f21053026..c85c6fe719 100644 --- a/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss @@ -13,7 +13,7 @@ tokens.$default-map: utilities.$post-spacing; position: relative; .form-control { - padding-right: calc(post.$input-height-lg); + padding-right: post.$input-height-lg; } .form-control-reset { @@ -26,7 +26,7 @@ tokens.$default-map: utilities.$post-spacing; post-icon { padding: post.$input-padding-y-lg; - width: calc(post.$input-height-lg); + width: post.$input-height-lg; } } } diff --git a/packages/documentation/src/stories/utilities/flex/flex.styles.scss b/packages/documentation/src/stories/utilities/flex/flex.styles.scss index 978a79b96b..fca112fcb4 100644 --- a/packages/documentation/src/stories/utilities/flex/flex.styles.scss +++ b/packages/documentation/src/stories/utilities/flex/flex.styles.scss @@ -27,7 +27,7 @@ tokens.$default-map: utilities.$post-spacing; .flex-doc-container { > * { align-self: stretch; - padding: tokens.get('utility-gap-8') calc(#{tokens.get('utility-gap-16')} * 0.5); + padding: tokens.get('utility-gap-8') calc(tokens.get('utility-gap-16') * 0.5); border-top: post.$border-width solid post.$border-color; flex: 0 0 50%; diff --git a/packages/styles/src/components/datatable.scss b/packages/styles/src/components/datatable.scss index 1a93e365e4..25a86b09c5 100644 --- a/packages/styles/src/components/datatable.scss +++ b/packages/styles/src/components/datatable.scss @@ -215,7 +215,7 @@ tokens.$default-map: utilities.$post-spacing; &:hover, &:focus-visible { outline: tokens.get('utility-gap-2') solid Highlight; - outline-offset: -(tokens.get('utility-gap-2')); + outline-offset: calc(tokens.get('utility-gap-2') * -1); } } diff --git a/packages/styles/src/components/datepicker.scss b/packages/styles/src/components/datepicker.scss index 21a992f907..fc41252901 100644 --- a/packages/styles/src/components/datepicker.scss +++ b/packages/styles/src/components/datepicker.scss @@ -161,7 +161,7 @@ span.ngb-dp-navigation-chevron { .form-floating > .ngb-dp-open, .form-control-lg ~ .ngb-dp-open { height: calc(#{forms.$form-floating-height} - #{forms.$input-border-width * 2}); - width: calc(forms.$input-height-inner-lg); + width: forms.$input-height-inner-lg; post-icon { width: datepicker.$ngb-dp-icon-size-lg; diff --git a/packages/styles/src/components/dropdown.scss b/packages/styles/src/components/dropdown.scss index 1697a98d86..5656e61fc3 100644 --- a/packages/styles/src/components/dropdown.scss +++ b/packages/styles/src/components/dropdown.scss @@ -50,7 +50,7 @@ tokens.$default-map: utilities.$post-spacing; &:hover, &:focus-visible { outline: tokens.get('utility-gap-2') solid Highlight; - outline-offset: -(tokens.get('utility-gap-2')); + outline-offset: calc(tokens.get('utility-gap-2') * -1); } } } diff --git a/packages/styles/src/components/modal.scss b/packages/styles/src/components/modal.scss index 668b53272e..d1e2a2ea05 100644 --- a/packages/styles/src/components/modal.scss +++ b/packages/styles/src/components/modal.scss @@ -44,7 +44,7 @@ post-ngb-modal-content { @include media-breakpoint-up(sm) { post-ngb-modal-content { // prevents the modal from exceeding the height of the screen - max-height: calc(100vh - (2 * #{modal.$modal-dialog-margin-y-sm-up})); + max-height: calc(100vh - (2 * modal.$modal-dialog-margin-y-sm-up)); } // Right and left margins are set to "auto" from the sm breakpoint @@ -58,7 +58,7 @@ post-ngb-modal-content { @include media-breakpoint-down(sm) { post-ngb-modal-content { // make the modal cover the full height available on small screens - height: calc(100vh - (2 * #{modal.$modal-dialog-margin})); + height: calc(100vh - (2 * modal.$modal-dialog-margin)); } .modal-body, diff --git a/packages/styles/src/components/product-card.scss b/packages/styles/src/components/product-card.scss index db4119cd37..35a8b34005 100644 --- a/packages/styles/src/components/product-card.scss +++ b/packages/styles/src/components/product-card.scss @@ -14,6 +14,8 @@ @use './../functions/tokens'; @use './../tokens/utilities'; +tokens.$default-map: utilities.$post-spacing; + .product-navigation { display: flex; flex-flow: column; @@ -60,10 +62,10 @@ } .card-body { - padding: tokens.get('utility-gap-16', utilities.$post-spacing); + padding: tokens.get('utility-gap-16'); @include media.min(md) { - padding: tokens.get('utility-gap-24', utilities.$post-spacing); + padding: tokens.get('utility-gap-24'); } } diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index f493925758..07e4653ae0 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -1,5 +1,3 @@ -@use 'sass:math'; - @use './../mixins/icons' as icons-mx; @use './../mixins/utilities' as utilities-mx; @@ -42,13 +40,13 @@ tokens.$default-map: utilities.$post-spacing; overflow: hidden; // the first column is half a step wide to make sure the separators are the same size even on small screens - grid-template-columns: calc(math.div(#{stepper.$stepper-indicator-size}, 2)); + grid-template-columns: calc(stepper.$stepper-indicator-size / 2); // all other columns are 1 fraction of the available space ase we don't know the number of steps grid-auto-columns: minmax(0, 1fr); // we use a padding and negative margin on the last step for the same reason we need the first column - padding-inline-end: calc(math.div(#{stepper.$stepper-indicator-size}, 2)); + padding-inline-end: calc(stepper.$stepper-indicator-size / 2); } .stepper-item { @@ -57,11 +55,11 @@ tokens.$default-map: utilities.$post-spacing; padding-inline-start: 0; &:not(:first-child) { - padding-inline-start: calc(math.div(#{stepper.$stepper-link-spacing}, 2)); + padding-inline-start: calc(stepper.$stepper-link-spacing / 2); } &:not(:last-child) { - padding-inline-end: calc(math.div(#{stepper.$stepper-link-spacing}, 2)); + padding-inline-end: calc(stepper.$stepper-link-spacing / 2); grid-column: span 2; } @@ -71,9 +69,7 @@ tokens.$default-map: utilities.$post-spacing; content: ''; display: block; position: absolute; - inset-block-start: calc( - math.div((#{stepper.$stepper-indicator-size} - #{stepper.$stepper-bar-height}), 2) - ); + inset-block-start: calc((stepper.$stepper-indicator-size - stepper.$stepper-bar-height) / 2); height: stepper.$stepper-bar-height; background-color: stepper.$stepper-bar-color; inset-inline: 0; @@ -125,7 +121,7 @@ tokens.$default-map: utilities.$post-spacing; .stepper-item:last-child > & { margin-inline-start: auto; margin-inline-end: calc( - -1 * math.div(#{stepper.$stepper-indicator-size}, 2) + stepper.$stepper-indicator-size / -2 ); // negative margin matching the container padding text-align: end; } @@ -179,9 +175,7 @@ tokens.$default-map: utilities.$post-spacing; @include icons-mx.icon(2105); display: block; position: absolute; - top: calc( - math.div((#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size), 2) - ); + top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); z-index: 1; height: stepper.$stepper-indicator-check-icon-size; width: stepper.$stepper-indicator-check-icon-size; @@ -189,20 +183,17 @@ tokens.$default-map: utilities.$post-spacing; color: stepper.$stepper-indicator-color; .stepper-item:first-child > & { - left: math.div( - (#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size), - 2 + left: calc( + (#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size) / 2 ); } .stepper-item:not(:first-child, :last-child) > & { - left: calc(50% - #{math.div(stepper.$stepper-indicator-check-icon-size, 2)}); + left: calc(50% - (stepper.$stepper-indicator-check-icon-size / 2)); } .stepper-item:last-child > & { - right: calc( - math.div((#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size), 2) - ); + right: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); } // show only for completed steps @@ -256,9 +247,7 @@ tokens.$default-map: utilities.$post-spacing; // progress bar &::before { grid-row: -1; - margin-block-start: calc( - math.div((#{stepper.$stepper-indicator-size} - #{stepper.$stepper-bar-height}), 2) - ); + margin-block-start: calc((stepper.$stepper-indicator-size - stepper.$stepper-bar-height) / 2); position: static; } diff --git a/packages/styles/src/components/subnavigation.scss b/packages/styles/src/components/subnavigation.scss index 7a7a316913..0f02c20ed9 100644 --- a/packages/styles/src/components/subnavigation.scss +++ b/packages/styles/src/components/subnavigation.scss @@ -78,7 +78,7 @@ $module-name: 'subnavigation'; &:hover, &:focus-visible { outline: tokens.get('utility-gap-2') solid Highlight; - outline-offset: -(tokens.get('utility-gap-4')); + outline-offset: calc(tokens.get('utility-gap-4') * -1); } } diff --git a/packages/styles/src/components/tabs/_tab-title.scss b/packages/styles/src/components/tabs/_tab-title.scss index 34d8091f37..e28d3be958 100644 --- a/packages/styles/src/components/tabs/_tab-title.scss +++ b/packages/styles/src/components/tabs/_tab-title.scss @@ -101,7 +101,7 @@ tokens.$default-map: utilities.$post-spacing; &:focus-within, &:focus-visible { outline: tokens.get('utility-gap-2') solid Highlight; - outline-offset: -(tokens.get('utility-gap-4')); + outline-offset: calc(tokens.get('utility-gap-4') * -1); } &.active { diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss index 34f6ed2196..3a191aac10 100644 --- a/packages/styles/src/mixins/_notification.scss +++ b/packages/styles/src/mixins/_notification.scss @@ -60,7 +60,7 @@ tokens.$default-map: components.$post-banner; } &.no-icon { - min-height: calc(2 * #{$padding-y} + #{close.$close-size}); + min-height: calc(2 * $padding-y + close.$close-size); padding-inline-start: $padding-x; &::before { diff --git a/packages/styles/src/variables/components/_button.scss b/packages/styles/src/variables/components/_button.scss index 5301a00a5c..4c5c9d6748 100644 --- a/packages/styles/src/variables/components/_button.scss +++ b/packages/styles/src/variables/components/_button.scss @@ -14,8 +14,6 @@ tokens.$default-map: components.$post-button; -// TODO: Fix issue with dependencies and multiple calc - // Available button sizes except the default, which is md $btn-non-default-sizes: sm, lg !default; @@ -63,18 +61,18 @@ $btn-icon-size-map: ( // Old variables / Used elsewhere than on the v2 button component $input-btn-border-width-rem: sizing.px-to-rem($input-btn-border-width); -$input-btn-padding-y: sizing.px-to-rem(16) - $input-btn-border-width-rem !default; -$input-btn-padding-x: sizing.px-to-rem(20) - $input-btn-border-width-rem !default; +$input-btn-padding-y: sizing.px-to-rem(16) - $input-btn-border-width-rem !default; // px value to avoid build errors +$input-btn-padding-x: sizing.px-to-rem(20) - $input-btn-border-width-rem !default; // px value to avoid build errors $input-btn-line-height: type.$line-height-copy !default; -$input-btn-padding-y-sm: 4px !default; -$input-btn-padding-x-sm: 16px !default; +$input-btn-padding-y-sm: 4px !default; // px value to avoid build errors +$input-btn-padding-x-sm: 16px !default; // px value to avoid build errors -$input-btn-padding-y-rg: sizing.px-to-rem(12) - $input-btn-border-width-rem !default; -$input-btn-padding-x-rg: sizing.px-to-rem(16) - $input-btn-border-width-rem !default; +$input-btn-padding-y-rg: sizing.px-to-rem(12) - $input-btn-border-width-rem !default; // px value to avoid build errors +$input-btn-padding-x-rg: sizing.px-to-rem(16) - $input-btn-border-width-rem !default; // px value to avoid build errors $input-btn-padding-y-lg: 12px !default; // px value to avoid build errors -$input-btn-padding-x-lg: 16px !default; // px value to avoid bootstrap build errors +$input-btn-padding-x-lg: 16px !default; // px value to avoid build errors $input-btn-focus-width: 0.125rem !default; // 2px $input-btn-focus-color: rgba(color.$gray-80, 0.25) !default; diff --git a/packages/styles/src/variables/components/_pagination.scss b/packages/styles/src/variables/components/_pagination.scss index e23f7ee12c..736bf986c5 100644 --- a/packages/styles/src/variables/components/_pagination.scss +++ b/packages/styles/src/variables/components/_pagination.scss @@ -9,6 +9,13 @@ tokens.$default-map: utilities.$post-spacing; // Pagination + +$pagination-padding-y: tokens.get('utility-gap-8') !default; +$pagination-padding-x: 0 !default; +$pagination-padding-y-sm: tokens.get('utility-gap-4') !default; +$pagination-padding-x-sm: 0 !default; +$pagination-padding-y-lg: tokens.get('utility-gap-12') !default; +$pagination-padding-x-lg: 0 !default; $pagination-line-height: 1.25 !default; $pagination-color: color.$gray-60 !default; @@ -32,8 +39,12 @@ $pagination-disabled-bg: color.$light !default; $pagination-disabled-border-color: color.$gray-10 !default; $pagination-height-border: $pagination-border-width * 2 !default; +$pagination-height-inner: calc( + (type.$font-size-base * $pagination-line-height) + ($pagination-padding-y * 2) +) !default; $pagination-height: calc( - ((type.$font-size-base * $pagination-line-height) + (#{tokens.get('utility-gap-8')} * 2)) + #{$pagination-height-border} + ((type.$font-size-base * $pagination-line-height) + (tokens.get('utility-gap-8') * 2)) + + $pagination-height-border ) !default; $pagination-width: $pagination-height !default; diff --git a/packages/styles/src/variables/components/_tag.scss b/packages/styles/src/variables/components/_tag.scss index 4c034b76c6..0234e5516e 100644 --- a/packages/styles/src/variables/components/_tag.scss +++ b/packages/styles/src/variables/components/_tag.scss @@ -13,7 +13,7 @@ $tag-max-width: 100%; $tag-border-width: tokens.get('utility-gap-1'); $tag-border-radius: tokens.get('utility-gap-4'); $tag-font-size: type.$font-size-16; -$tag-line-height: calc(tokens.get('utility-gap-32') - (#{$tag-border-width} * 2)); +$tag-line-height: calc(tokens.get('utility-gap-32') - ($tag-border-width * 2)); $tag-icon-size: $tag-font-size * 1.25; $tag-sm-line-height: tokens.get('utility-gap-24'); From 34403a76129f1c48af7cc40524bd2ecaf6cbdf4e Mon Sep 17 00:00:00 2001 From: leagrdv Date: Thu, 19 Dec 2024 16:14:43 +0100 Subject: [PATCH 3/4] try and fix popover test --- packages/components/cypress/fixtures/post-popover.test.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/cypress/fixtures/post-popover.test.html b/packages/components/cypress/fixtures/post-popover.test.html index 23d880fb52..e68fb0b6dc 100644 --- a/packages/components/cypress/fixtures/post-popover.test.html +++ b/packages/components/cypress/fixtures/post-popover.test.html @@ -4,6 +4,10 @@ Document + From 1306fc525f8ef882d6069fa905da9ec6fe8c1ce9 Mon Sep 17 00:00:00 2001 From: Lea Date: Thu, 19 Dec 2024 17:31:20 +0100 Subject: [PATCH 4/4] Update packages/components/cypress/fixtures/post-popover.test.html MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Oliver Schürch --- packages/components/cypress/fixtures/post-popover.test.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/cypress/fixtures/post-popover.test.html b/packages/components/cypress/fixtures/post-popover.test.html index e68fb0b6dc..94ba27b7be 100644 --- a/packages/components/cypress/fixtures/post-popover.test.html +++ b/packages/components/cypress/fixtures/post-popover.test.html @@ -5,7 +5,7 @@ Document