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/cypress/fixtures/post-popover.test.html b/packages/components/cypress/fixtures/post-popover.test.html
index 23d880fb52..94ba27b7be 100644
--- a/packages/components/cypress/fixtures/post-popover.test.html
+++ b/packages/components/cypress/fixtures/post-popover.test.html
@@ -4,6 +4,10 @@
Document
+
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..852a8100e1 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 calc(tokens.get('utility-gap-4', utilities.$post-spacing) * -1);
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..7943371d8b 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..f62c4e030d 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..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
@@ -1,8 +1,12 @@
-@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 {
@@ -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..fca112fcb4 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..25a86b09c5 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: calc(tokens.get('utility-gap-2') * -1);
}
}
@@ -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/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..5656e61fc3 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: calc(tokens.get('utility-gap-2') * -1);
}
}
}
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..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/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..35a8b34005 100644
--- a/packages/styles/src/components/product-card.scss
+++ b/packages/styles/src/components/product-card.scss
@@ -9,7 +9,12 @@
@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';
+
+tokens.$default-map: utilities.$post-spacing;
.product-navigation {
display: flex;
@@ -57,7 +62,11 @@
}
.card-body {
- @include size-mixin.responsive-size(regular);
+ padding: tokens.get('utility-gap-16');
+
+ @include media.min(md) {
+ padding: tokens.get('utility-gap-24');
+ }
}
.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..07e4653ae0 100644
--- a/packages/styles/src/components/stepper.scss
+++ b/packages/styles/src/components/stepper.scss
@@ -1,18 +1,29 @@
-@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 +31,7 @@
}
.stepper {
- @include utilities.reset-list;
+ @include utilities-mx.reset-list;
// start a counter for the step numbers
counter-reset: step-index;
@@ -29,13 +40,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(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(stepper.$stepper-indicator-size / 2);
}
.stepper-item {
@@ -44,11 +55,11 @@
padding-inline-start: 0;
&:not(:first-child) {
- padding-inline-start: math.div(stepper.$stepper-link-spacing, 2);
+ padding-inline-start: calc(stepper.$stepper-link-spacing / 2);
}
&:not(:last-child) {
- padding-inline-end: math.div(stepper.$stepper-link-spacing, 2);
+ padding-inline-end: calc(stepper.$stepper-link-spacing / 2);
grid-column: span 2;
}
@@ -58,7 +69,7 @@
content: '';
display: block;
position: absolute;
- inset-block-start: 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;
@@ -109,7 +120,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(
+ stepper.$stepper-indicator-size / -2
+ ); // negative margin matching the container padding
text-align: end;
}
@@ -162,7 +175,7 @@
@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((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;
@@ -170,21 +183,17 @@
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: 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
@@ -195,11 +204,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,10 +247,7 @@
// progress bar
&::before {
grid-row: -1;
- margin-block-start: 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;
}
@@ -291,7 +297,7 @@
}
}
-@include utilities.high-contrast-mode {
+@include utilities-mx.high-contrast-mode {
.stepper-item {
&::before,
&::after {
@@ -332,7 +338,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 +350,7 @@
color: Canvas;
}
- @include utilities.focus-hover-style-custom() {
+ @include utilities-mx.focus-hover-style-custom() {
&::before {
background-color: Highlight;
color: HighlightText;
@@ -357,7 +363,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..0f02c20ed9 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: calc(tokens.get('utility-gap-4') * -1);
}
}
@@ -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..e28d3be958 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: calc(tokens.get('utility-gap-4') * -1);
}
&.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..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/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 71cc9442aa..910b02a29a 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..4c5c9d6748 100644
--- a/packages/styles/src/variables/components/_button.scss
+++ b/packages/styles/src/variables/components/_button.scss
@@ -10,6 +10,7 @@
@use '../../functions/tokens';
@use '../../tokens/components';
+@use '../../tokens/utilities';
tokens.$default-map: components.$post-button;
@@ -60,29 +61,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; // 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: spacing.$size-micro !default;
-$input-btn-padding-x-sm: spacing.$size-regular !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: 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; // 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: 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 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 739415c0d9..05b9f2ea36 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: icons.get-colored-svg-url(2043, $btn-close-color);
$_btn-close-hcm-bg: icons.get-colored-svg-url(2043, color.$white);
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..736bf986c5 100644
--- a/packages/styles/src/variables/components/_pagination.scss
+++ b/packages/styles/src/variables/components/_pagination.scss
@@ -3,14 +3,18 @@
@use './../type';
@use './../commons';
@use './button';
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
// Pagination
-$pagination-padding-y: spacing.$size-mini !default;
+$pagination-padding-y: tokens.get('utility-gap-8') !default;
$pagination-padding-x: 0 !default;
-$pagination-padding-y-sm: spacing.$size-micro !default;
+$pagination-padding-y-sm: tokens.get('utility-gap-4') !default;
$pagination-padding-x-sm: 0 !default;
-$pagination-padding-y-lg: spacing.$size-small-regular !default;
+$pagination-padding-y-lg: tokens.get('utility-gap-12') !default;
$pagination-padding-x-lg: 0 !default;
$pagination-line-height: 1.25 !default;
@@ -35,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: (type.$font-size-base * $pagination-line-height) +
- ($pagination-padding-y * 2) !default;
-$pagination-height: calc(#{$pagination-height-inner} + #{$pagination-height-border}) !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
+) !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..0234e5516e 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();
-}