From 989b89cad9921e4a9f9f0ab9682ffe35b31e4c72 Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Wed, 28 Jun 2023 13:30:12 +0200 Subject: [PATCH 1/8] feat: adding handler for 100+ percentage (#2043) --- .../components/progress-bar/progress-bar.tsx | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/components/src/components/progress-bar/progress-bar.tsx b/packages/components/src/components/progress-bar/progress-bar.tsx index 2c3a24593c..8a5f791c6c 100644 --- a/packages/components/src/components/progress-bar/progress-bar.tsx +++ b/packages/components/src/components/progress-bar/progress-bar.tsx @@ -113,15 +113,18 @@ export class ProgressBar { ) : ( )} - {!!this.showStatus && !this.hasError && this.percentage !== 100 && ( - - )} + {!!this.showStatus && + !this.hasError && + this.percentage <= 100 && + this.percentage !== 100 && ( + + )} {this.hasError ? (
@@ -129,7 +132,7 @@ export class ProgressBar { size={ICON_SIZE} >
- ) : this.percentage === 100 ? ( + ) : this.percentage >= 100 ? (
= 100 && `${prefix}completed` ); } } From e432efd6754d52bf0ed9a3fe9e28be11f954766a Mon Sep 17 00:00:00 2001 From: Arturo Castillo Delgado Date: Tue, 18 Jul 2023 15:05:32 +0200 Subject: [PATCH 2/8] feat: use new spacing tokens (#2059) --- packages/components/package.json | 2 +- .../src/components/breadcrumb/breadcrumb.css | 6 +- .../src/components/button/button.css | 34 +++--- .../src/components/callout/callout.css | 2 +- .../components/src/components/card/card.css | 2 +- .../chart-stack-card/chart-stack-card.css | 18 +-- .../checkbox-group/checkbox-group.css | 6 +- .../src/components/checkbox/checkbox.css | 36 +++--- .../components/src/components/chip/chip.css | 21 ++-- .../components/collapsible/collapsible.css | 14 +-- .../src/components/data-grid/data-grid.css | 44 +++---- .../components/date-picker/date-picker.css | 61 +++++----- .../src/components/divider/divider.css | 6 +- .../dropdown-select/dropdown-select.css | 27 ++--- .../src/components/dropdown/dropdown.css | 32 +++--- .../components/helper-text/helper-text.css | 2 +- .../components/src/components/input/input.css | 107 +++++++++--------- .../components/src/components/link/link.css | 4 +- .../src/components/list-item/list-item.css | 21 ++-- .../components/src/components/list/list.css | 2 +- .../loading-spinner/loading-spinner.css | 4 +- .../menu-flyout-item/menu-flyout-item.css | 19 ++-- .../menu-flyout-list/menu-flyout-list.css | 16 +-- .../components/src/components/modal/modal.css | 31 ++--- .../components/notification/notification.css | 12 +- .../src/components/pagination/pagination.css | 2 +- .../components/progress-bar/progress-bar.css | 8 +- .../radio-button-group/radio-button-group.css | 18 +-- .../components/radio-button/radio-button.css | 34 +++--- .../components/rating-stars/rating-stars.css | 8 +- .../src/components/segment/segment.css | 28 ++--- .../segmented-button/segmented-button.css | 10 +- .../components/sidebar-nav/sidebar-nav.css | 4 +- .../src/components/slider/slider.css | 7 +- .../src/components/switch/switch.css | 6 +- .../src/components/tab-header/tab-header.css | 2 +- .../src/components/tab-nav/tab-nav.css | 6 +- .../src/components/tab-panel/tab-panel.css | 2 +- .../components/src/components/table/table.css | 16 +-- .../components/src/components/tag/tag.css | 16 +-- .../telekom/app-footer/app-footer.css | 29 ++--- .../telekom/app-header/app-header.css | 18 +-- .../telekom/app-mega-menu/app-mega-menu.css | 8 +- .../app-navigation-main-mobile.css | 6 +- .../app-navigation-user-menu.css | 34 +++--- .../telekom/app-shell/app-shell.css | 2 +- .../components/telekom/nav-icon/nav-icon.css | 4 +- .../telekom/nav-segment/nav-segment.css | 2 +- .../telekom-footer-extended-navigation.css | 16 +-- .../telekom-footer/telekom-footer-content.css | 52 ++++----- .../telekom/telekom-footer/telekom-footer.css | 16 +-- .../telekom/telekom-header/telekom-header.css | 40 ++++--- .../telekom-mega-menu/telekom-mega-menu.css | 10 +- .../telekom-mobile-flyout-canvas.css | 13 ++- .../telekom-mobile-menu.css | 4 +- .../telekom-nav-item/telekom-nav-item.css | 52 ++++++--- .../telekom-nav-list/telekom-nav-list.css | 28 +++-- .../src/components/text-field/text-field.css | 24 ++-- .../src/components/textarea/textarea.css | 16 +-- .../components/src/components/toast/toast.css | 4 +- .../toggle-button/toggle-button.css | 20 ++-- .../components/toggle-group/toggle-group.css | 5 +- .../src/components/tooltip/tooltip.css | 3 +- packages/components/src/global/legacy.css | 72 ++++++++++++ packages/components/src/global/scale.css | 69 ++--------- yarn.lock | 10 +- 66 files changed, 681 insertions(+), 572 deletions(-) create mode 100644 packages/components/src/global/legacy.css diff --git a/packages/components/package.json b/packages/components/package.json index b09ba2aba4..88ce5b1684 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -71,7 +71,7 @@ "@duetds/date-picker": "1.2.0", "@floating-ui/dom": "^0.5.4", "@stencil/core": "^2.17.0", - "@telekom/design-tokens": "^1.0.0-beta.7", + "@telekom/design-tokens": "1.0.0-beta.8", "@telekom/scale-design-tokens": "^3.0.0-beta.136", "classnames": "^2.2.6", "stencil-inline-svg": "^1.0.1" diff --git a/packages/components/src/components/breadcrumb/breadcrumb.css b/packages/components/src/components/breadcrumb/breadcrumb.css index a3c6da2649..0407f4ade4 100644 --- a/packages/components/src/components/breadcrumb/breadcrumb.css +++ b/packages/components/src/components/breadcrumb/breadcrumb.css @@ -10,14 +10,14 @@ */ :host { - --spacing-left: calc(-1 * var(--telekom-spacing-unit-x2)); + --spacing-left: calc(-1 * var(--telekom-spacing-composition-space-04)); --font-size-list-item: var(--telekom-typography-font-size-caption); --color-separator: var(--telekom-color-text-and-icon-additional); - --spacing-y-item: var(--telekom-spacing-unit-x1); - --spacing-x-item: var(--telekom-spacing-unit-x2); + --spacing-y-item: var(--telekom-spacing-composition-space-03); + --spacing-x-item: var(--telekom-spacing-composition-space-04); --color-link: var(--telekom-color-text-and-icon-additional); --radius-link: var(--telekom-radius-standard); diff --git a/packages/components/src/components/button/button.css b/packages/components/src/components/button/button.css index 7c40cdc6f1..8609ed4628 100644 --- a/packages/components/src/components/button/button.css +++ b/packages/components/src/components/button/button.css @@ -11,11 +11,11 @@ :host { --width: auto; - --spacing-x-right: var(--telekom-spacing-unit-x5); - --spacing-x-left: var(--telekom-spacing-unit-x5); - --spacing-x-icon-only: var(--telekom-spacing-unit-x3); - --min-height: var(--telekom-spacing-unit-x11); - --min-width: var(--telekom-spacing-unit-x11); + --spacing-x-right: var(--telekom-spacing-composition-space-07); + --spacing-x-left: var(--telekom-spacing-composition-space-07); + --spacing-x-icon-only: var(--telekom-spacing-composition-space-05); + --min-height: var(--telekom-spacing-composition-space-13); + --min-width: var(--telekom-spacing-composition-space-13); --radius: var(--telekom-radius-standard); --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); @@ -23,17 +23,17 @@ --font-weight: var(--telekom-typography-font-weight-bold); --font-size: var(--telekom-typography-font-size-body); --line-height: var(--telekom-typography-line-spacing-tight); - --spacing-icon-x: var(--telekom-spacing-unit-x2); + --spacing-icon-x: var(--telekom-spacing-composition-space-04); --vertical-align: middle; /* size: small */ --font-size-small: var(--telekom-typography-font-size-caption); --line-height-small: 1.125rem; - --min-height-small: var(--telekom-spacing-unit-x8); - --spacing-x-right-small: var(--telekom-spacing-unit-x4); - --spacing-x-left-small: var(--telekom-spacing-unit-x4); - --spacing-x-icon-only-small: var(--telekom-spacing-unit-x0); - --spacing-icon-x-small: var(--telekom-spacing-unit-x1); + --min-height-small: var(--telekom-spacing-composition-space-10); + --spacing-x-right-small: var(--telekom-spacing-composition-space-06); + --spacing-x-left-small: var(--telekom-spacing-composition-space-06); + --spacing-x-icon-only-small: var(--telekom-spacing-composition-space-00); + --spacing-icon-x-small: var(--telekom-spacing-composition-space-03); /* variant: primary */ --radius-primary: var(--radius); @@ -46,7 +46,7 @@ /* variant: secondary */ --radius-secondary: var(--radius); - --border-width-secondary: var(--telekom-spacing-unit-x025); + --border-width-secondary: var(--telekom-spacing-composition-space-01); --background-secondary: transparent; --color-secondary: var(--telekom-color-text-and-icon-standard); --color-secondary-hover: var(--telekom-color-text-and-icon-standard); @@ -74,8 +74,8 @@ /* variant: ghost */ --radius-ghost: var(--radius); - --border-width-ghost: var(--telekom-spacing-unit-x025); - --spacing-x-ghost: var(--telekom-spacing-unit-x2); + --border-width-ghost: var(--telekom-spacing-composition-space-01); + --spacing-x-ghost: var(--telekom-spacing-composition-space-04); --color-ghost: var(--telekom-color-text-and-icon-primary-standard); --color-ghost-hover: var(--telekom-color-text-and-icon-primary-hovered); --color-ghost-active: var(--telekom-color-text-and-icon-primary-pressed); @@ -121,8 +121,8 @@ } .button:not(.button--disabled):focus { - outline: var(--telekom-spacing-unit-x05) solid var(--color-focus); - outline-offset: var(--telekom-spacing-unit-x025); + outline: var(--telekom-line-weight-highlight) solid var(--color-focus); + outline-offset: var(--telekom-spacing-composition-space-01); } .button.button--icon-before:not(.button--icon-only) ::slotted(*) { @@ -155,7 +155,7 @@ top: 0; left: 0; width: 100%; - border: var(--telekom-spacing-unit-x025) solid transparent; + border: var(--telekom-spacing-composition-space-01) solid transparent; height: 100%; content: ''; display: block; diff --git a/packages/components/src/components/callout/callout.css b/packages/components/src/components/callout/callout.css index 421b088c09..09f85e9a66 100644 --- a/packages/components/src/components/callout/callout.css +++ b/packages/components/src/components/callout/callout.css @@ -2,7 +2,7 @@ --position: absolute; --background: var(--telekom-color-ui-extra-strong); --color: var(--telekom-color-text-and-icon-inverted-standard); - --spacing: var(--telekom-spacing-unit-x8); + --spacing: var(--telekom-spacing-composition-space-10); --min-width: 6rem; --aspect-ratio: 1 / 1; --rotation: 0deg; diff --git a/packages/components/src/components/card/card.css b/packages/components/src/components/card/card.css index 64931fb000..e0dc2277e1 100644 --- a/packages/components/src/components/card/card.css +++ b/packages/components/src/components/card/card.css @@ -20,7 +20,7 @@ var(--telekom-color-functional-focus-standard); --box-shadow-active: var(--telekom-shadow-raised-pressed); - --spacing-body: var(--telekom-spacing-unit-x6); + --spacing-body: var(--telekom-spacing-composition-space-08); --spacing-body-slotted: 0; --spacing-body-slotted-interactive: 0; diff --git a/packages/components/src/components/chart-stack-card/chart-stack-card.css b/packages/components/src/components/chart-stack-card/chart-stack-card.css index efeb4950c2..beee6b66be 100644 --- a/packages/components/src/components/chart-stack-card/chart-stack-card.css +++ b/packages/components/src/components/chart-stack-card/chart-stack-card.css @@ -17,22 +17,22 @@ --scl-chart-stack-card-color: var(--telekom-color-additional-blue-600); } .chart-stack-card .header { - height: var(--telekom-spacing-unit-x6); + height: var(--telekom-spacing-composition-space-08); font-size: var(--telekom-typography-font-size-headline-3); font-weight: var(--telekom-typography-font-weight-extra-bold); line-height: var(--telekom-typography-line-spacing-tight); - margin-bottom: var(--telekom-spacing-unit-x6); + margin-bottom: var(--telekom-spacing-composition-space-08); } .chart-stack-card .bar { display: flex; justify-content: space-between; - margin-bottom: var(--telekom-spacing-unit-x4); + margin-bottom: var(--telekom-spacing-composition-space-06); } .chart-stack-card .bar__item { background-color: var(--scl-chart-stack-card-color); - height: var(--telekom-spacing-unit-x8); + height: var(--telekom-spacing-composition-space-10); flex: 1; } @@ -49,10 +49,10 @@ .chart-stack-card .legend { display: flex; flex-direction: column; - height: calc(var(--telekom-spacing-unit-x4) * 10); + height: calc(var(--telekom-spacing-composition-space-06) * 10); } .chart-stack-card .spacer { - padding: 0 var(--telekom-spacing-unit-x2); + padding: 0 var(--telekom-spacing-composition-space-04); } .chart-stack-card .legend .legend__row__item { display: flex; @@ -63,7 +63,7 @@ justify-content: space-between; } .chart-stack-card .legend .legend__row:last-child { - padding-bottom: var(--telekom-spacing-unit-x8); + padding-bottom: var(--telekom-spacing-composition-space-10); } .chart-stack-card .legend .legend__item { @@ -72,11 +72,11 @@ background-color: var(--scl-chart-stack-card-color); border-radius: 100%; align-self: center; - margin-right: var(--telekom-spacing-unit-x1); + margin-right: var(--telekom-spacing-composition-space-03); } .chart-stack-card .legend .legend__label { font-weight: var(--type-weight-bold); - font-size: var(--telekom-spacing-unit-x4); + font-size: var(--telekom-spacing-composition-space-06); line-height: 200%; } diff --git a/packages/components/src/components/checkbox-group/checkbox-group.css b/packages/components/src/components/checkbox-group/checkbox-group.css index 61c85bd988..29664eded0 100644 --- a/packages/components/src/components/checkbox-group/checkbox-group.css +++ b/packages/components/src/components/checkbox-group/checkbox-group.css @@ -1,13 +1,13 @@ :host, .checkbox-group { /* checkbox-group container */ - --spacing-left-container: var(--telekom-spacing-unit-x8); + --spacing-left-container: var(--telekom-spacing-composition-space-10); /* checkbox-group checkbox */ - --spacing-left-checkbox: var(--telekom-spacing-unit-x2); + --spacing-left-checkbox: var(--telekom-spacing-composition-space-04); /* slotted item */ - --spacing-top-slotted-item: var(--telekom-spacing-unit-x3); + --spacing-top-slotted-item: var(--telekom-spacing-composition-space-05); } .checkbox-group { diff --git a/packages/components/src/components/checkbox/checkbox.css b/packages/components/src/components/checkbox/checkbox.css index a44531d420..bd0e6f1b00 100644 --- a/packages/components/src/components/checkbox/checkbox.css +++ b/packages/components/src/components/checkbox/checkbox.css @@ -13,7 +13,7 @@ :host, scale-checkbox { - --spacing-x: var(--telekom-spacing-unit-x2); + --spacing-x: var(--telekom-spacing-composition-space-04); --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); --color-text: var(--telekom-color-text-and-icon-standard); @@ -28,13 +28,13 @@ scale-checkbox { --color-primary-active: var(--telekom-color-text-and-icon-standard); /*control*/ - --width-control: var(--telekom-spacing-unit-x5); - --height-control: var(--telekom-spacing-unit-x5); + --width-control: var(--telekom-spacing-composition-space-07); + --height-control: var(--telekom-spacing-composition-space-07); --transition-control: var(--transition); - --spacing-control: var(--telekom-spacing-unit-x05); - --spacing-left-control: var(--telekom-spacing-unit-x1); + --spacing-control: var(--telekom-spacing-composition-space-02); + --spacing-left-control: var(--telekom-spacing-composition-space-03); --radius-control: var(--telekom-radius-small); - --border-width-control: var(--telekom-spacing-unit-x025); + --border-width-control: var(--telekom-spacing-composition-space-01); /*helper-text*/ --transition-helper-text: var(--transition); @@ -54,8 +54,8 @@ scale-checkbox { --color-icon-checked-active: var( --telekom-color-text-and-icon-white-standard ); - --width-icon: var(--telekom-spacing-unit-x4); - --height-icon: var(--telekom-spacing-unit-x4); + --width-icon: var(--telekom-spacing-composition-space-06); + --height-icon: var(--telekom-spacing-composition-space-06); --stroke-width: var(--stroke-width-checkbox, 0.5px); } @@ -189,8 +189,8 @@ scale-checkbox [part='container']:active /* focus states */ scale-checkbox [part='input']:focus ~ [part='container'] [part='checkbox'] { - outline: var(--telekom-spacing-unit-x05) solid var(--color-focus); - outline-offset: var(--telekom-spacing-unit-x025); + outline: var(--telekom-spacing-composition-space-02) solid var(--color-focus); + outline-offset: var(--telekom-spacing-composition-space-01); } /* hover states */ @@ -235,7 +235,7 @@ scale-icon-alert-error { display: flex; justify-content: center; align-items: center; - margin-right: var(--telekom-spacing-unit-x1); + margin-right: var(--telekom-spacing-composition-space-03); } /* error states */ @@ -251,7 +251,8 @@ scale-checkbox.error [part='helper-text'] scale-icon-alert-error { /* :host(.error) [part='checkbox'], */ scale-checkbox.error [part='checkbox'] { - box-shadow: inset 0 0 0 var(--telekom-spacing-unit-x05) var(--color-error); + box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02) + var(--color-error); border: none; } @@ -259,30 +260,31 @@ scale-checkbox.error [part='input']:focus ~ [part='container'] [part='checkbox'] { - box-shadow: inset 0 0 0 var(--telekom-spacing-unit-x05) var(--color-error); + box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02) + var(--color-error); } scale-checkbox.error [part='checkbox']:hover { background-color: var(--telekom-color-ui-state-fill-hovered); - box-shadow: inset 0 0 0 var(--telekom-spacing-unit-x05) + box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02) var(--telekom-color-functional-danger-hovered); } scale-checkbox.error [part='checkbox']:active { background-color: var(--telekom-color-ui-state-fill-pressed); - box-shadow: inset 0 0 0 var(--telekom-spacing-unit-x05) + box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02) var(--telekom-color-functional-danger-pressed); } scale-checkbox.error:not(.checked) [part='container']:active [part='checkbox'] { background: var(--telekom-color-ui-state-fill-pressed); - box-shadow: inset 0 0 0 var(--telekom-spacing-unit-x05) + box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02) var(--telekom-color-functional-danger-pressed); } scale-checkbox.checked.error [part='container']:hover [part='checkbox'] { background-color: var(--telekom-color-primary-hovered); - box-shadow: inset 0 0 0 var(--telekom-spacing-unit-x05) + box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02) var(--telekom-color-functional-danger-hovered); } diff --git a/packages/components/src/components/chip/chip.css b/packages/components/src/components/chip/chip.css index 070d213063..fcb70553fd 100644 --- a/packages/components/src/components/chip/chip.css +++ b/packages/components/src/components/chip/chip.css @@ -29,10 +29,10 @@ /**TODO: colors unexplained in figma **/ .chip { box-sizing: border-box; - border: var(--telekom-spacing-unit-x025) solid transparent; + border: var(--telekom-spacing-composition-space-01) solid transparent; display: inline-flex; outline: none; - padding: 0 var(--telekom-spacing-unit-x3); + padding: 0 var(--telekom-spacing-composition-space-05); text-align: center; align-items: center; white-space: nowrap; @@ -48,7 +48,7 @@ } .chip.chip--selected.chip--type-dynamic { - padding-right: var(--telekom-spacing-unit-x1); + padding-right: var(--telekom-spacing-composition-space-03); } .chip.chip--selected.chip--type-dynamic button { @@ -87,8 +87,8 @@ .chip:not(.chip--disabled):not(.chip--type-dynamic):focus, .chip.chip--type-dynamic:not(.chip--selected):focus { - outline: var(--telekom-spacing-unit-x05) solid var(--color-focus); - outline-offset: var(--telekom-spacing-unit-x025); + outline: var(--telekom-spacing-composition-space-02) solid var(--color-focus); + outline-offset: var(--telekom-spacing-composition-space-01); } .chip:not(.chip--disabled):not(.chip--type-dynamic):hover, @@ -135,17 +135,18 @@ label **/ .chip-label { - padding: 0 var(--telekom-spacing-unit-x1) 0 var(--telekom-spacing-unit-x1); + padding: 0 var(--telekom-spacing-composition-space-03) 0 + var(--telekom-spacing-composition-space-03); font-weight: var(--telekom-typography-font-weight-bold); font-size: 1rem; line-height: 100%; } .chip--selected .chip-label { - padding-right: var(--telekom-spacing-unit-x2); + padding-right: var(--telekom-spacing-composition-space-04); } .chip--type-dynamic.chip--selected .chip-label { - padding-right: var(--telekom-spacing-unit-x1); + padding-right: var(--telekom-spacing-composition-space-03); } /** @@ -153,8 +154,8 @@ icon front (slot) **/ .chip slot[name='chip-icon']::slotted(*) { - padding-right: var(--telekom-spacing-unit-x1); - padding-top: var(--telekom-spacing-unit-x1); + padding-right: var(--telekom-spacing-composition-space-03); + padding-top: var(--telekom-spacing-composition-space-03); } /** diff --git a/packages/components/src/components/collapsible/collapsible.css b/packages/components/src/components/collapsible/collapsible.css index 82644a9b78..552c77ecc9 100644 --- a/packages/components/src/components/collapsible/collapsible.css +++ b/packages/components/src/components/collapsible/collapsible.css @@ -10,16 +10,16 @@ */ :host { - --spacing-y: var(--telekom-spacing-unit-x4); + --spacing-y: var(--telekom-spacing-composition-space-06); /* button */ --font-size-button: var(--telekom-typography-font-size-callout); --font-weight-button: var(--telekom-typography-font-weight-extra-bold); --line-height-button: var(--telekom-typography-line-spacing-standard); - --border-width-button: var(--telekom-spacing-unit-x05); + --border-width-button: var(--telekom-spacing-composition-space-02); --radius-button: var(--telekom-radius-small); --spacing-left-button: 0; - --spacing-left-button-text: var(--telekom-spacing-unit-x2); + --spacing-left-button-text: var(--telekom-spacing-composition-space-04); --color-button-hover: var(--telekom-color-text-and-icon-primary-hovered); --color-button-active: var(--telekom-color-text-and-icon-primary-pressed); --background-button-hover: none; @@ -27,10 +27,10 @@ var(--telekom-color-functional-focus-standard); /* content */ - --spacing-right-content: var(--telekom-spacing-unit-x12); + --spacing-right-content: var(--telekom-spacing-composition-space-14); --spacing-left-content: 34px; - --spacing-top-content: var(--telekom-spacing-unit-x4); - --spacing-bottom-content: var(--telekom-spacing-unit-x6); + --spacing-top-content: var(--telekom-spacing-composition-space-06); + --spacing-bottom-content: var(--telekom-spacing-composition-space-08); } .collapsible { @@ -43,7 +43,7 @@ left: 0; right: 0; width: 100%; - border: var(--telekom-spacing-unit-x025) solid transparent; + border: var(--telekom-spacing-composition-space-01) solid transparent; content: ''; display: block; position: absolute; diff --git a/packages/components/src/components/data-grid/data-grid.css b/packages/components/src/components/data-grid/data-grid.css index de86f9ddc0..59a07276da 100644 --- a/packages/components/src/components/data-grid/data-grid.css +++ b/packages/components/src/components/data-grid/data-grid.css @@ -89,8 +89,8 @@ display: flex; align-items: center; justify-content: flex-end; - padding-right: var(--telekom-spacing-unit-x4); - padding-left: var(--telekom-spacing-unit-x6); + padding-right: var(--telekom-spacing-composition-space-06); + padding-left: var(--telekom-spacing-composition-space-08); } .data-grid__heading { @@ -99,11 +99,11 @@ .data-grid__title-block ::slotted(*) { /* --spacing-x-actions-slotted */ - margin-left: var(--telekom-spacing-unit-x2); + margin-left: var(--telekom-spacing-composition-space-04); } .data-grid__settings-menu { - margin-left: var(--telekom-spacing-unit-x2); + margin-left: var(--telekom-spacing-composition-space-04); } .data-grid__scroll-container { @@ -131,7 +131,7 @@ min-height: 72px; } .data-grid--hide-menu .data-grid__title-block { - padding-right: var(--telekom-spacing-unit-x4); + padding-right: var(--telekom-spacing-composition-space-06); } /* Head block */ @@ -153,18 +153,18 @@ cursor: pointer; } .thead-sortable:focus { - box-shadow: inset 0 0 0 var(--telekom-spacing-unit-x05) + box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02) var(--telekom-color-functional-focus-standard); } .thead__cell { display: inline-flex; align-items: center; - height: var(--telekom-spacing-unit-x8); + height: var(--telekom-spacing-composition-space-10); text-align: left; user-select: none; position: relative; - padding: 0 var(--telekom-spacing-unit-x4); + padding: 0 var(--telekom-spacing-composition-space-06); color: var(--telekom-color-text-and-icon-additional); } @@ -214,10 +214,10 @@ .thead__divider { position: absolute; - right: calc(-1 * var(--telekom-spacing-unit-x2)); + right: calc(-1 * var(--telekom-spacing-composition-space-04)); bottom: 0px; height: 100%; - padding: 19px var(--telekom-spacing-unit-x2) 0px; + padding: 19px var(--telekom-spacing-composition-space-04) 0px; box-sizing: border-box; cursor: col-resize; z-index: 1; @@ -231,7 +231,7 @@ } .thead__cell:first-child { - padding-left: var(--telekom-spacing-unit-x6); + padding-left: var(--telekom-spacing-composition-space-08); } .thead__cell:focus { @@ -308,13 +308,13 @@ } .tbody__nested-cell { display: block; - padding: var(--telekom-spacing-unit-x4); + padding: var(--telekom-spacing-composition-space-06); margin: 0px; } .tbody__cell:first-of-type { - margin-left: var(--telekom-spacing-unit-x4); - /* padding-left: var(--telekom-spacing-unit-x6); */ + margin-left: var(--telekom-spacing-composition-space-06); + /* padding-left: var(--telekom-spacing-composition-space-08); */ } .tbody__nested-cell:first-child { @@ -378,7 +378,7 @@ flex-grow: 1; } .tbody__actions scale-button { - margin-right: var(--telekom-spacing-unit-x2); + margin-right: var(--telekom-spacing-composition-space-04); } .data-grid-progress-bar::part(progress-bar) { @@ -403,7 +403,7 @@ position: absolute; bottom: 0; line-height: 54px; - left: var(--telekom-spacing-unit-x6); + left: var(--telekom-spacing-composition-space-08); } .data-grid--hide-border:not(.data-grid--mobile) .info__pagination { @@ -443,8 +443,8 @@ display: block; position: relative; white-space: initial; - margin: 0 0 var(--telekom-spacing-unit-x2); - padding: var(--telekom-spacing-unit-x6); + margin: 0 0 var(--telekom-spacing-composition-space-04); + padding: var(--telekom-spacing-composition-space-08); border-radius: var(--telekom-radius-standard); background: var(--telekom-color-background-surface); border: 1px solid var(--telekom-color-ui-faint); @@ -454,7 +454,7 @@ } .data-grid--mobile .tbody__mobile-title { display: block; - margin-bottom: var(--telekom-spacing-unit-x2); + margin-bottom: var(--telekom-spacing-composition-space-04); } .data-grid--mobile .tbody__mobile-label { display: block; @@ -466,8 +466,8 @@ padding: 5px 0; margin: 0; /* 24 to match text component, otherwise will not be centered */ - min-height: var(--telekom-spacing-unit-x6); - line-height: var(--telekom-spacing-unit-x6); + min-height: var(--telekom-spacing-composition-space-08); + line-height: var(--telekom-spacing-composition-space-08); overflow: auto; overflow-x: hidden; } @@ -504,7 +504,7 @@ } .data-grid--mobile .tbody__nested-cell { padding: 0; - margin-bottom: var(--telekom-spacing-unit-x2); + margin-bottom: var(--telekom-spacing-composition-space-04); } .data-grid--mobile.data-grid--shade-alternate .tbody__row:nth-of-type(even) { background: var(--telekom-color-background-surface); diff --git a/packages/components/src/components/date-picker/date-picker.css b/packages/components/src/components/date-picker/date-picker.css index b0a7d227cc..24acf31a2a 100644 --- a/packages/components/src/components/date-picker/date-picker.css +++ b/packages/components/src/components/date-picker/date-picker.css @@ -29,9 +29,9 @@ duet-date-picker { --duet-z-index: 600; --duet-z-index-toggle: 2; - --spacing-x: var(--telekom-spacing-unit-x3); + --spacing-x: var(--telekom-spacing-composition-space-05); - --spacing-heading: 0 0 var(--telekom-spacing-unit-x4) 0; + --spacing-heading: 0 0 var(--telekom-spacing-composition-space-06) 0; --font-size-heading: var(--telekom-typography-font-size-body); --radius-day: var(--telekom-radius-standard); --font-size-day: var(--telekom-typography-font-size-body); @@ -47,14 +47,14 @@ duet-date-picker .duet-date__input { border: var(--telekom-line-weight-standard) solid var(--telekom-color-ui-border-standard); background-color: var(--telekom-color-ui-state-fill-standard); - padding: 1.125rem calc(2rem - var(--telekom-spacing-unit-x025)) 0.25rem - calc(var(--spacing-x) - var(--telekom-spacing-unit-x025)); - height: var(--telekom-spacing-unit-x11); + padding: 1.125rem calc(2rem - var(--telekom-spacing-composition-space-01)) + 0.25rem calc(var(--spacing-x) - var(--telekom-spacing-composition-space-01)); + height: var(--telekom-spacing-composition-space-13); font: var(--telekom-text-style-body); } duet-date-picker .duet-date__input:hover { - border: var(--telekom-spacing-unit-x025) solid + border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-hovered); background-color: var(--telekom-color-ui-state-fill-hovered); } @@ -73,7 +73,7 @@ duet-date-picker .duet-date__toggle { background: transparent; z-index: var(--duet-z-index-toggle); box-shadow: inset 1px 0 0 var(--telekom-color-ui-faint); - width: var(--telekom-spacing-unit-x11); + width: var(--telekom-spacing-composition-space-13); } duet-date-picker .duet-date__toggle:focus { @@ -124,7 +124,7 @@ duet-date-picker .duet-date__toggle:active scale-icon-content-calendar { font-weight: var(--telekom-typography-font-weight-bold); transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); - padding-left: var(--telekom-spacing-unit-x3); + padding-left: var(--telekom-spacing-composition-space-05); font-size: var(--telekom-typography-font-size-small); line-height: var(--telekom-typography-line-spacing-standard); color: var(--telekom-color-text-and-icon-functional-informational); @@ -157,18 +157,18 @@ duet-date-picker .duet-date__header { } duet-date-picker .duet-date__select { - height: var(--telekom-spacing-unit-x8); + height: var(--telekom-spacing-composition-space-10); } duet-date-picker .duet-date__prev, duet-date-picker .duet-date__next { - width: var(--telekom-spacing-unit-x8); - height: var(--telekom-spacing-unit-x8); + width: var(--telekom-spacing-composition-space-10); + height: var(--telekom-spacing-composition-space-10); } duet-date-picker .duet-date__day { - width: var(--telekom-spacing-unit-x11); - height: var(--telekom-spacing-unit-x11); + width: var(--telekom-spacing-composition-space-13); + height: var(--telekom-spacing-composition-space-13); } .scale-date-picker.scale-date-picker--focus .date-picker__label, @@ -179,7 +179,7 @@ duet-date-picker .duet-date__day { font: var(--telekom-text-style-small-bold); transform: translate( 0.75rem, - calc(0.25rem + var(--telekom-spacing-unit-x025)) + calc(0.25rem + var(--telekom-spacing-composition-space-01)) ); } @@ -192,7 +192,7 @@ duet-date-picker .duet-date__input:focus::placeholder { } duet-date-picker .duet-date__table { - margin-top: var(--telekom-spacing-unit-x2); + margin-top: var(--telekom-spacing-composition-space-04); } /* Error state */ @@ -200,11 +200,11 @@ duet-date-picker .duet-date__table { .scale-date-picker--status-error duet-date-picker .duet-date__input { margin-top: -1px; margin-bottom: -1px; - border: var(--telekom-spacing-unit-x05) solid + border: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-standard); } .scale-date-picker--status-error duet-date-picker .duet-date__input:hover { - border: var(--telekom-spacing-unit-x05) solid + border: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-hovered); } .scale-date-picker--status-error duet-date-picker .duet-date__input:focus { @@ -261,8 +261,8 @@ duet-date-picker .duet-date__dialog-content { border: none; box-shadow: var(--telekom-shadow-top); max-width: 324px; - padding: var(--telekom-spacing-unit-x2); - margin-top: var(--telekom-spacing-unit-x1); + padding: var(--telekom-spacing-composition-space-04); + margin-top: var(--telekom-spacing-composition-space-03); } duet-date-picker .duet-date__cell { @@ -270,7 +270,8 @@ duet-date-picker .duet-date__cell { } duet-date-picker .duet-date__mobile { margin-left: 0; - padding: var(--telekom-spacing-unit-x1) 0 var(--telekom-spacing-unit-x3) 0; + padding: var(--telekom-spacing-composition-space-03) 0 + var(--telekom-spacing-composition-space-05) 0; } duet-date-picker .duet-date__select { @@ -278,7 +279,7 @@ duet-date-picker .duet-date__select { } duet-date-picker .duet-date__select:nth-of-type(1) { - margin-right: var(--telekom-spacing-unit-x2); + margin-right: var(--telekom-spacing-composition-space-04); } duet-date-picker .duet-date__select-label { @@ -288,7 +289,7 @@ duet-date-picker .duet-date__select-label { duet-date-picker .duet-date__select-label svg { width: 16px; height: 16px; - margin-left: var(--telekom-spacing-unit-x2); + margin-left: var(--telekom-spacing-composition-space-04); } duet-date-picker .duet-date__select select:focus + .duet-date__select-label { @@ -308,7 +309,7 @@ duet-date-picker .duet-date__select select:active + .duet-date__select-label { duet-date-picker .duet-date__prev, duet-date-picker .duet-date__next { border-radius: var(--duet-radius); - margin-left: var(--telekom-spacing-unit-x05); + margin-left: var(--telekom-spacing-composition-space-02); } duet-date-picker .duet-date__prev:hover, @@ -335,7 +336,7 @@ duet-date-picker .duet-date__close:focus { } duet-date-picker .duet-date__table-header { - height: var(--telekom-spacing-unit-x12); + height: var(--telekom-spacing-composition-space-14); padding: 0; font-size: var(--font-size-table-header); font-weight: var(--font-weight-table-header); @@ -360,13 +361,13 @@ duet-date-picker .duet-date__day.is-disabled { duet-date-picker .duet-date__day.is-today::before { content: ''; display: inline-block; - width: var(--telekom-spacing-unit-x1); - height: var(--telekom-spacing-unit-x1); + width: var(--telekom-spacing-composition-space-03); + height: var(--telekom-spacing-composition-space-03); border-radius: var(--telekom-radius-standard); background-color: var(--telekom-color-primary-standard); opacity: 1; - left: var(--telekom-spacing-unit-x5); - top: var(--telekom-spacing-unit-x8); + left: var(--telekom-spacing-composition-space-07); + top: var(--telekom-spacing-composition-space-10); } duet-date-picker [aria-selected='true'] .duet-date__day.is-today::before, @@ -406,12 +407,12 @@ duet-date-picker .duet-date__day:hover::before { } duet-date-picker .scale-date-picker__popup-heading { - padding: var(--telekom-spacing-unit-x2); + padding: var(--telekom-spacing-composition-space-04); } scale-date-picker .has-helper-text scale-helper-text { display: block; - margin-top: var(--telekom-spacing-unit-x1); + margin-top: var(--telekom-spacing-composition-space-03); } @media (max-width: 35.9375em) and (orientation: landscape) { diff --git a/packages/components/src/components/divider/divider.css b/packages/components/src/components/divider/divider.css index e3463fbdc3..65dedd6034 100644 --- a/packages/components/src/components/divider/divider.css +++ b/packages/components/src/components/divider/divider.css @@ -12,11 +12,11 @@ :host { --width: 100%; --height: 100%; - --spacing: var(--telekom-spacing-unit-x3); + --spacing: var(--telekom-spacing-composition-space-05); /* FIXME this should be called --border-color */ --color: var(--telekom-color-ui-faint); - --border-width: var(--telekom-spacing-unit-x025); - --min-height-vertical: var(--telekom-spacing-unit-x6); + --border-width: var(--telekom-spacing-composition-space-01); + --min-height-vertical: var(--telekom-spacing-composition-space-08); width: var(--width); height: var(--height); diff --git a/packages/components/src/components/dropdown-select/dropdown-select.css b/packages/components/src/components/dropdown-select/dropdown-select.css index 72f8724713..63c2630570 100644 --- a/packages/components/src/components/dropdown-select/dropdown-select.css +++ b/packages/components/src/components/dropdown-select/dropdown-select.css @@ -1,24 +1,24 @@ :host { --font-weight: var(--telekom-typography-font-weight-bold); - --height: var(--telekom-spacing-unit-x11); + --height: var(--telekom-spacing-composition-space-13); --color: var(--telekom-color-text-and-icon-standard); --color-disabled: var(--telekom-color-text-and-icon-disabled); --background-disabled: none; --background-hover: var(--telekom-color-ui-state-fill-hovered); - --border: var(--telekom-spacing-unit-x025) solid + --border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard); --border-color-hover: var(--telekom-color-ui-border-hovered); --border-color-focus: var(--telekom-color-ui-border-hovered); --border-color-disabled: var(--telekom-color-ui-border-disabled); - --border-invalid: var(--telekom-spacing-unit-x05) solid + --border-invalid: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-hovered); --focus-outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard); - --spacing-x: var(--telekom-spacing-unit-x3); + --spacing-x: var(--telekom-spacing-composition-space-05); --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); --radius: var(--telekom-radius-standard); - --spacing-x-for-helper-text: var(--telekom-spacing-unit-x1); + --spacing-x-for-helper-text: var(--telekom-spacing-composition-space-03); /*combobox*/ --transition-combobox: var(--transition); @@ -27,11 +27,12 @@ 18px 32px 4px 12px (subtracting 1px from border) */ - --spacing-combobox: 1.125rem calc(2rem - var(--telekom-spacing-unit-x025)) - 0.25rem calc(0.75rem - var(--telekom-spacing-unit-x025)); + --spacing-combobox: 1.125rem + calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem + calc(0.75rem - var(--telekom-spacing-composition-space-01)); /*meta*/ - --spacing-y-meta: var(--telekom-spacing-unit-x1); + --spacing-y-meta: var(--telekom-spacing-composition-space-03); --color-meta: var(--telekom-color-text-and-icon-standard); /*icon*/ @@ -48,7 +49,7 @@ --transform-label: translate(var(--spacing-x), 0.875rem); --transform-label-animated: translate( var(--spacing-x), - calc(0.25rem + var(--telekom-spacing-unit-x025)) + calc(0.25rem + var(--telekom-spacing-composition-space-01)) ); /*listbox*/ @@ -230,7 +231,7 @@ box-shadow: var(--box-shadow-listbox); border-radius: var(--radius); padding: var(--radius) 0; - margin-top: var(--telekom-spacing-unit-x1); + margin-top: var(--telekom-spacing-composition-space-03); left: 0; position: absolute; top: 100%; @@ -273,12 +274,12 @@ [part~='option'][aria-selected='true'] scale-icon-action-checkmark { position: absolute; - right: var(--telekom-spacing-unit-x3); - top: var(--telekom-spacing-unit-x3); + right: var(--telekom-spacing-composition-space-05); + top: var(--telekom-spacing-composition-space-05); } [part~='option'] scale-dropdown-select-item::part(base) { - padding: var(--telekom-spacing-unit-x3); + padding: var(--telekom-spacing-composition-space-05); } /*helper-text*/ diff --git a/packages/components/src/components/dropdown/dropdown.css b/packages/components/src/components/dropdown/dropdown.css index 809f86347d..2c8c1b350a 100644 --- a/packages/components/src/components/dropdown/dropdown.css +++ b/packages/components/src/components/dropdown/dropdown.css @@ -11,20 +11,20 @@ scale-dropdown { --font-weight: var(--telekom-typography-font-weight-bold); - --height: var(--telekom-spacing-unit-x11); - --spacing-x: var(--telekom-spacing-unit-x3); - --spacing-dropdown: 18px var(--telekom-spacing-unit-x10) 5px + --height: var(--telekom-spacing-composition-space-13); + --spacing-x: var(--telekom-spacing-composition-space-05); + --spacing-dropdown: 18px var(--telekom-spacing-composition-space-12) 5px calc(var(--spacing-x) - 1px); --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); --radius: var(--telekom-radius-standard); - --border: var(--telekom-spacing-unit-x025) solid + --border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard); - --border-danger: var(--telekom-spacing-unit-x05) solid + --border-danger: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-standard); - --border-success: var(--telekom-spacing-unit-x05) solid + --border-success: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-success-standard); - --border-warning: var(--telekom-spacing-unit-x05) solid + --border-warning: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-warning-standard); --border-color-hover: var(--telekom-color-ui-border-hovered); --border-color-focus: var(--telekom-color-ui-border-hovered); @@ -35,18 +35,18 @@ scale-dropdown { --background-disabled: none; --color: var(--telekom-color-text-and-icon-standard); --background-color: var(--telekom-color-ui-state-fill-standard); - --margin-bottom-helper-text: var(--telekom-spacing-unit-x1); + --margin-bottom-helper-text: var(--telekom-spacing-composition-space-03); /*input*/ --transition-input: var(--transition); --font-size-input: var(--telekom-typography-font-size-body); /*meta*/ - --spacing-y-meta: var(--telekom-spacing-unit-x1); + --spacing-y-meta: var(--telekom-spacing-composition-space-03); --color-meta: var(--telekom-color-text-and-icon-standard); /*icon*/ - --height-icon: var(--telekom-spacing-unit-x5); + --height-icon: var(--telekom-spacing-composition-space-07); --color-icon: var(--telekom-color-text-and-icon-standard); --color-icon-hover: var(--telekom-color-text-and-icon-standard); --color-icon-active: var(--telekom-color-text-and-icon-standard); @@ -90,7 +90,8 @@ scale-dropdown { } .dropdown--hide-label .input__dropdown { - padding: 5px var(--telekom-spacing-unit-x10) 5px calc(var(--spacing-x) - 1px); + padding: 5px var(--telekom-spacing-composition-space-12) 5px + calc(var(--spacing-x) - 1px); } .dropdown--hide-label .input__label { @@ -187,13 +188,18 @@ scale-dropdown { font-size: var(--font-size-label); transform: translate( var(--spacing-x), - calc((var(--telekom-spacing-unit-x12) - var(--font-size-label)) / 2) + calc( + (var(--telekom-spacing-composition-space-14) - var(--font-size-label)) / 2 + ) ); font-weight: var(--font-weight-label); } .animated .input__label { - transform: translate(var(--spacing-x), var(--telekom-spacing-unit-x2)); + transform: translate( + var(--spacing-x), + var(--telekom-spacing-composition-space-04) + ); font-size: var(--font-size-label-focus); font-weight: var(--font-weight-label-focus); line-height: var(--telekom-typography-font-size-small); diff --git a/packages/components/src/components/helper-text/helper-text.css b/packages/components/src/components/helper-text/helper-text.css index 7c085fc9b3..34aaf6bebc 100644 --- a/packages/components/src/components/helper-text/helper-text.css +++ b/packages/components/src/components/helper-text/helper-text.css @@ -32,7 +32,7 @@ scale-icon-alert-success { display: flex; justify-content: center; align-items: center; - margin-right: var(--telekom-spacing-unit-x1); + margin-right: var(--telekom-spacing-composition-space-03); margin-top: 0.1666em; /* magic */ } diff --git a/packages/components/src/components/input/input.css b/packages/components/src/components/input/input.css index c20df27905..957b98963a 100644 --- a/packages/components/src/components/input/input.css +++ b/packages/components/src/components/input/input.css @@ -19,11 +19,12 @@ .input .input__input, .input .input__select { width: 100%; - height: var(--telekom-spacing-unit-x12); + height: var(--telekom-spacing-composition-space-14); margin: 0; display: flex; outline: none; - padding: var(--telekom-spacing-unit-x3) var(--telekom-spacing-unit-x3); + padding: var(--telekom-spacing-composition-space-05) + var(--telekom-spacing-composition-space-05); z-index: 1; box-sizing: border-box; transition: all var(--telekom-motion-duration-transition) @@ -40,7 +41,8 @@ resize: vertical; display: flex; outline: none; - padding: var(--telekom-spacing-unit-x3) var(--telekom-spacing-unit-x3); + padding: var(--telekom-spacing-composition-space-05) + var(--telekom-spacing-composition-space-05); z-index: 1; box-sizing: border-box; transition: all var(--telekom-motion-duration-transition) @@ -48,7 +50,7 @@ font-family: inherit; font-size: var(--telekom-typography-font-size-body); border-radius: var(--telekom-radius-standard); - border: var(--telekom-spacing-unit-x025) solid + border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard); } .input .input__select { @@ -63,7 +65,7 @@ transition: all var(--telekom-motion-duration-transition) cubic-bezier(var(--telekom-motion-easing-standard)); margin-left: auto; - padding-right: var(--telekom-spacing-unit-x3); + padding-right: var(--telekom-spacing-composition-space-05); justify-content: flex-end; font-size: var(--telekom-typography-font-size-small); line-height: var(--telekom-typography-line-spacing-standard); @@ -72,7 +74,7 @@ .input .input__helper-text { transition: all var(--telekom-motion-duration-transition) cubic-bezier(var(--telekom-motion-easing-standard)); - padding-left: var(--telekom-spacing-unit-x3); + padding-left: var(--telekom-spacing-composition-space-05); font-size: var(--telekom-typography-font-size-small); line-height: var(--telekom-typography-line-spacing-standard); color: var(--telekom-color-text-and-icon-functional-informational); @@ -80,7 +82,7 @@ .input .input__meta { display: flex; justify-content: space-between; - margin-top: var(--telekom-spacing-unit-x1); + margin-top: var(--telekom-spacing-composition-space-03); } .input:not(.input--disabled):hover .input__select-wrapper { --icon-color: var(--telekom-color-text-and-icon-primary-hovered, #f90984); @@ -99,7 +101,7 @@ .input:not(.input--disabled) .input__input:focus, .input:not(.input--disabled) .input__select:focus, .input:not(.input--disabled) .input__textarea:focus { - box-shadow: 0 0 0 var(--telekom-spacing-unit-x05) + box-shadow: 0 0 0 var(--telekom-spacing-composition-space-02) var(--telekom-color-functional-focus-standard); } .input:not(.input--disabled) .input__input:focus::placeholder, @@ -111,7 +113,7 @@ } .input .input__select-wrapper scale-icon { top: 50%; - right: var(--telekom-spacing-unit-x3); + right: var(--telekom-spacing-composition-space-05); position: absolute; transform: translateY(-50%); pointer-events: none; @@ -131,11 +133,12 @@ } .input--variant-animated .input__input, .input--variant-animated .input__select { - padding: var(--telekom-spacing-unit-x3) var(--telekom-spacing-unit-x3) 0 - calc(var(--telekom-spacing-unit-x3) - 1px); + padding: var(--telekom-spacing-composition-space-05) + var(--telekom-spacing-composition-space-05) 0 + calc(var(--telekom-spacing-composition-space-05) - 1px); } .input--variant-animated .input__textarea { - padding-top: var(--telekom-spacing-unit-x6); + padding-top: var(--telekom-spacing-composition-space-08); } .input--variant-animated .input__label { top: 0; @@ -150,10 +153,10 @@ font-size: var(--telekom-typography-font-size-body); /* previously: transform: translate(13px, calc((48px - 1rem) / 2)); */ transform: translate( - var(--telekom-spacing-unit-x3), + var(--telekom-spacing-composition-space-05), calc( ( - var(--telekom-spacing-unit-x12) - + var(--telekom-spacing-composition-space-14) - var(--telekom-typography-font-size-body) ) / 2 ) @@ -164,8 +167,8 @@ .input--variant-animated.animated .input__label { color: var(--telekom-color-text-and-icon-additional); transform: translate( - var(--telekom-spacing-unit-x3), - var(--telekom-spacing-unit-x2) + var(--telekom-spacing-composition-space-05), + var(--telekom-spacing-composition-space-04) ); transition: all var(--telekom-motion-duration-transition) cubic-bezier(var(--telekom-motion-easing-standard)); @@ -175,7 +178,7 @@ .input--status-error .input__input, .input--status-error .input__textarea, .input--status-error .input__select { - border: var(--telekom-spacing-unit-x05) solid + border: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-standard); } .input--status-error .input__helper-text { @@ -185,10 +188,10 @@ color: var(--telekom-color-text-and-icon-functional-danger); } .input--size-small .input__input { - height: var(--telekom-spacing-unit-x10); + height: var(--telekom-spacing-composition-space-12); } .input--size-small .input__select { - height: var(--telekom-spacing-unit-x10); + height: var(--telekom-spacing-composition-space-12); } .input--size-small .input__label { top: 0; @@ -206,10 +209,10 @@ calc((var(--input-small-height, 40px) - 1rem) / 2) ); */ transform: translate( - var(--telekom-spacing-unit-x3), + var(--telekom-spacing-composition-space-05), calc( ( - var(--telekom-spacing-unit-x10) - + var(--telekom-spacing-composition-space-12) - var(--telekom-typography-font-size-body) ) / 2 ) @@ -220,8 +223,8 @@ .input--size-small.animated .input__label { color: var(--telekom-color-text-and-icon-additional); transform: translate( - var(--telekom-spacing-unit-x3), - var(--telekom-spacing-unit-x1) + var(--telekom-spacing-composition-space-05), + var(--telekom-spacing-composition-space-03) ); transition: all var(--telekom-motion-duration-transition) cubic-bezier(var(--telekom-motion-easing-standard)); @@ -249,19 +252,19 @@ width: 100%; } .input--type-checkbox .input__helper-text { - padding-left: var(--telekom-spacing-unit-x8); + padding-left: var(--telekom-spacing-composition-space-10); } .input--type-checkbox label { color: var(--telekom-color-text-and-icon-standard); font-weight: var(--telekom-typography-font-weight-medium); } .input--type-checkbox .input__checkbox-container { - width: var(--telekom-spacing-unit-x4); - height: var(--telekom-spacing-unit-x4); + width: var(--telekom-spacing-composition-space-06); + height: var(--telekom-spacing-composition-space-06); display: flex; position: relative; align-items: center; - margin-right: var(--telekom-spacing-unit-x2); + margin-right: var(--telekom-spacing-composition-space-04); } .input--type-checkbox input:disabled ~ label { color: var(--telekom-color-ui-disabled); @@ -320,7 +323,7 @@ input:checked:not([disabled]) ~ .input__checkbox-container .input__checkbox-placeholder { - border: var(--telekom-spacing-unit-x025) solid + border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-primary-standard, #e20074); background: var(--telekom-color-primary-standard, #e20074); } @@ -334,7 +337,7 @@ input:focus ~ .input__checkbox-container .input__checkbox-placeholder { - box-shadow: 0 0 0 var(--telekom-spacing-unit-x05) + box-shadow: 0 0 0 var(--telekom-spacing-composition-space-02) var(--telekom-color-functional-focus-standard); } .input--type-checkbox @@ -391,22 +394,22 @@ color: var(--telekom-color-text-and-icon-primary-pressed, #cb0068); } .input--type-checkbox .input__checkbox-container .input__checkbox-placeholder { - width: var(--telekom-spacing-unit-x4); - height: var(--telekom-spacing-unit-x4); + width: var(--telekom-spacing-composition-space-06); + height: var(--telekom-spacing-composition-space-06); margin: 0; box-sizing: border-box; transition: all var(--telekom-motion-duration-transition) cubic-bezier(var(--telekom-motion-easing-standard)); border-radius: var(--telekom-radius-standard); - border: var(--telekom-spacing-unit-x025) solid + border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-text-and-icon-standard); background: var(--telekom-color-background-surface); } .input--type-checkbox .input__checkbox-container scale-icon { - top: calc(0.5 * var(--telekom-spacing-unit-x3)); - left: calc(0.5 * var(--telekom-spacing-unit-x3)); - width: var(--telekom-spacing-unit-x3); - height: var(--telekom-spacing-unit-x3); + top: calc(0.5 * var(--telekom-spacing-composition-space-05)); + left: calc(0.5 * var(--telekom-spacing-composition-space-05)); + width: var(--telekom-spacing-composition-space-05); + height: var(--telekom-spacing-composition-space-05); position: absolute; user-select: none; /* TODO this could removed once scale-icon is removed */ @@ -419,7 +422,7 @@ .input--type-checkbox.input--status-error .input__checkbox-container .input__checkbox-placeholder { - border: var(--telekom-spacing-unit-x05) solid + border: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-standard); } .input--type-radio { @@ -431,8 +434,8 @@ width: 100%; } .input--type-radio .input__helper-text { - margin-top: var(--telekom-spacing-unit-x1); - padding-left: var(--telekom-spacing-unit-x6); + margin-top: var(--telekom-spacing-composition-space-03); + padding-left: var(--telekom-spacing-composition-space-08); } .input--type-radio label { color: var(--telekom-color-text-and-icon-standard); @@ -441,8 +444,8 @@ font-weight: var(--telekom-typography-font-weight-medium); } .input--type-radio input { - width: var(--telekom-spacing-unit-x4); - height: var(--telekom-spacing-unit-x4); + width: var(--telekom-spacing-composition-space-06); + height: var(--telekom-spacing-composition-space-06); transition: all var(--telekom-motion-duration-transition) cubic-bezier(var(--telekom-motion-easing-standard)); border-radius: var(--telekom-radius-circle); @@ -450,7 +453,7 @@ background-color: #fff; border: var(--telekom-line-weight-standard) solid var(--telekom-color-ui-border-standard); - margin: 0 var(--telekom-spacing-unit-x2) 0 0; + margin: 0 var(--telekom-spacing-composition-space-04) 0 0; } .input--type-radio input:focus { outline: none; @@ -465,47 +468,47 @@ color: var(--telekom-color-text-and-icon-primary-hovered); } .input--type-radio input:active { - border: var(--telekom-spacing-unit-x2) solid + border: var(--telekom-spacing-composition-space-04) solid var(--telekom-color-primary-pressed); } .input--type-radio input:not(:checked):not([disabled]):active ~ label { color: var(--telekom-color-text-and-icon-primary-pressed); } .input--type-radio input:disabled { - border: var(--telekom-spacing-unit-x025) solid + border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-disabled); } .input--type-radio input:disabled ~ label { color: var(--telekom-color-text-and-icon-disabled); } .input--type-radio.input--status-error input { - border: var(--telekom-spacing-unit-x05) solid + border: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-standard); } .input--type-radio input:checked { - border: calc(0.5 * var(--telekom-spacing-unit-x3)) solid + border: calc(0.5 * var(--telekom-spacing-composition-space-05)) solid var(--telekom-color-primary-standard); } .input--type-radio input:checked:active { - border: calc(0.5 * var(--telekom-spacing-unit-x3)) solid + border: calc(0.5 * var(--telekom-spacing-composition-space-05)) solid var(--telekom-color-primary-pressed, #cb0068); } .input--type-radio input:checked:disabled { background: var(--telekom-color-ui-disabled); - border: calc(0.5 * var(--telekom-spacing-unit-x3)) solid + border: calc(0.5 * var(--telekom-spacing-composition-space-05)) solid var(--telekom-color-ui-border-disabled); } .input--type-radio input:checked:disabled ~ label { color: var(--telekom-color-text-and-icon-disabled); } .input__textarea-label-safety-background { - top: var(--telekom-spacing-unit-x05); - left: var(--telekom-spacing-unit-x05); - right: var(--telekom-spacing-unit-x05); + top: var(--telekom-spacing-composition-space-02); + left: var(--telekom-spacing-composition-space-02); + right: var(--telekom-spacing-composition-space-02); position: absolute; pointer-events: none; border-radius: var(--telekom-radius-standard); - height: var(--telekom-spacing-unit-x6); + height: var(--telekom-spacing-composition-space-08); background-color: var(--telekom-color-background-surface, #ffffff); } .input--disabled .input__textarea-label-safety-background { diff --git a/packages/components/src/components/link/link.css b/packages/components/src/components/link/link.css index 747f1cdd60..b0c7fa249b 100644 --- a/packages/components/src/components/link/link.css +++ b/packages/components/src/components/link/link.css @@ -17,7 +17,7 @@ :host { --font-weight: ; - --spacing-x-icon: var(--telekom-spacing-unit-x1); + --spacing-x-icon: var(--telekom-spacing-composition-space-03); --line-offset: 0.0625em; /* initial */ @@ -132,7 +132,7 @@ slot[name='icon']::slotted(*) { var(--line-thickness-initial) ); outline: var(--telekom-line-weight-highlight) solid var(--color-focus-outline); - outline-offset: var(--telekom-spacing-unit-x025); + outline-offset: var(--telekom-spacing-composition-space-01); border-radius: var(--telekom-radius-small); } diff --git a/packages/components/src/components/list-item/list-item.css b/packages/components/src/components/list-item/list-item.css index 7cb38a5d3a..1d28802e46 100644 --- a/packages/components/src/components/list-item/list-item.css +++ b/packages/components/src/components/list-item/list-item.css @@ -13,8 +13,10 @@ --display: block; --font-size: var(--telekom-typography-font-size-body); --line-height: var(--telekom-typography-line-spacing-standard); - --spacing-left: calc(0.5ch + var(--telekom-spacing-unit-x5)); - --spacing-left-nested: calc(0.5ch + var(--telekom-spacing-unit-x4)); + --spacing-left: calc(0.5ch + var(--telekom-spacing-composition-space-07)); + --spacing-left-nested: calc( + 0.5ch + var(--telekom-spacing-composition-space-06) + ); --font-marker-ordered: var(--telekom-text-style-body); --font-marker-ordered-nested: var(--telekom-text-style-small-bold); @@ -22,10 +24,11 @@ --telekom-typography-line-spacing-standard ); --spacing-top-marker-ordered-nested: calc( - var(--telekom-spacing-unit-x4) - var(--telekom-spacing-unit-x3) + var(--telekom-spacing-composition-space-06) - + var(--telekom-spacing-composition-space-05) ); - --spacing-right-no-marker: var(--telekom-spacing-unit-x2); + --spacing-right-no-marker: var(--telekom-spacing-composition-space-04); display: var(--display); } @@ -34,7 +37,7 @@ font-size: var(--font-size); line-height: var(--line-height); padding-left: var(--spacing-left); - margin-top: var(--telekom-spacing-unit-x1); + margin-top: var(--telekom-spacing-composition-space-03); } .list-item--nested { @@ -50,18 +53,18 @@ .list-item--unordered:before { top: 0.5em; - border: var(--telekom-spacing-unit-x025) solid currentColor; + border: var(--telekom-spacing-composition-space-01) solid currentColor; display: block; transform: scale(0.66); background: currentColor; box-sizing: border-box; border-radius: 50%; - width: var(--telekom-spacing-unit-x2); - height: var(--telekom-spacing-unit-x2); + width: var(--telekom-spacing-composition-space-04); + height: var(--telekom-spacing-composition-space-04); } .list-item--nested.list-item--unordered:before { - border: var(--telekom-spacing-unit-x025) solid currentColor; + border: var(--telekom-spacing-composition-space-01) solid currentColor; background: transparent; } diff --git a/packages/components/src/components/list/list.css b/packages/components/src/components/list/list.css index 822ca1e44a..bb12450b79 100644 --- a/packages/components/src/components/list/list.css +++ b/packages/components/src/components/list/list.css @@ -11,7 +11,7 @@ :host { --spacing-left: 0; - --spacing-left-nested: var(--telekom-spacing-unit-x2); + --spacing-left-nested: var(--telekom-spacing-composition-space-04); } .list { diff --git a/packages/components/src/components/loading-spinner/loading-spinner.css b/packages/components/src/components/loading-spinner/loading-spinner.css index f2a6794672..493d26779c 100644 --- a/packages/components/src/components/loading-spinner/loading-spinner.css +++ b/packages/components/src/components/loading-spinner/loading-spinner.css @@ -17,8 +17,8 @@ --color-circle-white-inner: var(--telekom-color-ui-regular); --color-text-white: var(--telekom-color-text-and-icon-white-standard); - --spacing-vertical: var(--telekom-spacing-unit-x3); - --spacing-horizontal: var(--telekom-spacing-unit-x4); + --spacing-vertical: var(--telekom-spacing-composition-space-05); + --spacing-horizontal: var(--telekom-spacing-composition-space-06); } .sr-only { diff --git a/packages/components/src/components/menu-flyout-item/menu-flyout-item.css b/packages/components/src/components/menu-flyout-item/menu-flyout-item.css index 95486ad68d..cf48326cbd 100644 --- a/packages/components/src/components/menu-flyout-item/menu-flyout-item.css +++ b/packages/components/src/components/menu-flyout-item/menu-flyout-item.css @@ -16,8 +16,8 @@ position: relative; outline-color: transparent; /* So outline is visible on the sides */ - padding-left: var(--telekom-spacing-unit-x05); - padding-right: var(--telekom-spacing-unit-x05); + padding-left: var(--telekom-spacing-composition-space-02); + padding-right: var(--telekom-spacing-composition-space-02); --_min-width: fit-content; --_min-width-moz: -moz-fit-content; @@ -36,14 +36,19 @@ line-height: 2.635em; /* calc here to account for the extra padding for the outline */ padding: 0 - calc(var(--telekom-spacing-unit-x6) - var(--telekom-spacing-unit-x05)); + calc( + var(--telekom-spacing-composition-space-08) - + var(--telekom-spacing-composition-space-02) + ); user-select: none; white-space: nowrap; border-radius: 0; cursor: pointer; color: var(--telekom-color-text-and-icon-standard); /* 10px relates to the PAD value in Menu component */ - max-width: calc(100vw - 2 * var(--telekom-spacing-unit-x6) - 2 * 10px); + max-width: calc( + 100vw - 2 * var(--telekom-spacing-composition-space-08) - 2 * 10px + ); overflow: hidden; min-width: var(--_min-width-moz); min-width: var(--_min-width); @@ -95,7 +100,7 @@ width: 0; background-color: var(--telekom-color-primary-standard); /* a11y: HCM */ - border-left: var(--telekom-spacing-unit-x05) solid transparent; + border-left: var(--telekom-spacing-composition-space-02) solid transparent; } .menu-flyout-item--active { @@ -125,7 +130,7 @@ .menu-flyout-item__check, slot[name='prefix']::slotted(:last-of-type) { - margin-right: var(--telekom-spacing-unit-x2); + margin-right: var(--telekom-spacing-composition-space-04); } .menu-flyout-item__check { @@ -144,5 +149,5 @@ slot[name='prefix']::slotted(:last-of-type) { .menu-flyout-item__cascade, slot[name='suffix']::slotted(:first-of-type) { - margin-left: var(--telekom-spacing-unit-x4); + margin-left: var(--telekom-spacing-composition-space-06); } diff --git a/packages/components/src/components/menu-flyout-list/menu-flyout-list.css b/packages/components/src/components/menu-flyout-list/menu-flyout-list.css index dc6976b9ab..8fd52e1f6d 100644 --- a/packages/components/src/components/menu-flyout-list/menu-flyout-list.css +++ b/packages/components/src/components/menu-flyout-list/menu-flyout-list.css @@ -67,7 +67,7 @@ .menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-right, .menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-left, .menu-flyout-list--direction-bottom-right { - top: calc(100% + var(--telekom-spacing-unit-x1)); + top: calc(100% + var(--telekom-spacing-composition-space-03)); left: 0; right: auto; bottom: auto; @@ -77,7 +77,7 @@ .menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-left, .menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-right, .menu-flyout-list--direction-bottom-left { - top: calc(100% + var(--telekom-spacing-unit-x1)); + top: calc(100% + var(--telekom-spacing-composition-space-03)); right: 0; left: auto; bottom: auto; @@ -87,7 +87,7 @@ .menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-right, .menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-left, .menu-flyout-list--direction-top-right { - bottom: calc(100% + var(--telekom-spacing-unit-x1)); + bottom: calc(100% + var(--telekom-spacing-composition-space-03)); left: 0; right: auto; top: auto; @@ -97,7 +97,7 @@ .menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-left, .menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-right, .menu-flyout-list--direction-top-left { - bottom: calc(100% + var(--telekom-spacing-unit-x1)); + bottom: calc(100% + var(--telekom-spacing-composition-space-03)); right: 0; left: auto; top: auto; @@ -105,7 +105,7 @@ .menu-flyout-list--flip-horizontal.menu-flyout-list--direction-left, .menu-flyout-list--direction-right { - left: calc(100% - var(--telekom-spacing-unit-x1)); + left: calc(100% - var(--telekom-spacing-composition-space-03)); top: -20px; right: auto; bottom: auto; @@ -113,7 +113,7 @@ .menu-flyout-list--flip-horizontal.menu-flyout-list--direction-right, .menu-flyout-list--direction-left { - right: calc(100% - var(--telekom-spacing-unit-x1)); + right: calc(100% - var(--telekom-spacing-composition-space-03)); top: -20px; left: auto; bottom: auto; @@ -129,12 +129,12 @@ left: 50%; } .menu-flyout-list__scroll-up-indicator { - top: var(--telekom-spacing-unit-x2); + top: var(--telekom-spacing-composition-space-04); border-bottom: 5px solid var(--telekom-color-ui-faint); border-top: 0; } .menu-flyout-list__scroll-down-indicator { - bottom: var(--telekom-spacing-unit-x2); + bottom: var(--telekom-spacing-composition-space-04); border-top: 5px solid var(--telekom-color-ui-faint); border-bottom: 0; } diff --git a/packages/components/src/components/modal/modal.css b/packages/components/src/components/modal/modal.css index f9f1bb1cb5..7531ff073a 100644 --- a/packages/components/src/components/modal/modal.css +++ b/packages/components/src/components/modal/modal.css @@ -10,13 +10,15 @@ */ :host { - --spacing-x: var(--telekom-spacing-unit-x4); + --spacing-x: var(--telekom-spacing-composition-space-06); --background-overlay: var( --telekom-color-background-backdrop, rgba(108, 108, 108, 0.7) ); - --max-height-window: calc(100vh - (2 * var(--telekom-spacing-unit-x20))); + --max-height-window: calc( + 100vh - (2 * var(--telekom-spacing-composition-space-19)) + ); --min-height-window: ; /* undefined by design */ --radius-window: var(--telekom-radius-large); --box-shadow-window: var(--telekom-shadow-top); @@ -32,19 +34,19 @@ */ --size-window-small: calc( (6 * var(--telekom-spacing-unit-x14, 3.5rem)) + - (5 * var(--telekom-spacing-unit-x8)) + (5 * var(--telekom-spacing-composition-space-10)) ); --size-window-default: calc( (8 * var(--telekom-spacing-unit-x14, 3.5rem)) + - (7 * var(--telekom-spacing-unit-x8)) + (7 * var(--telekom-spacing-composition-space-10)) ); --size-window-large: calc( (12 * var(--telekom-spacing-unit-x14, 3.5rem)) + - (11 * var(--telekom-spacing-unit-x8)) + (11 * var(--telekom-spacing-composition-space-10)) ); - --spacing-x-header: var(--telekom-spacing-unit-x6); - --spacing-y-header: var(--telekom-spacing-unit-x6); + --spacing-x-header: var(--telekom-spacing-composition-space-08); + --spacing-y-header: var(--telekom-spacing-composition-space-08); --border-bottom-header-has-scroll: var(--telekom-line-weight-standard) solid var(--telekom-color-ui-subtle); @@ -53,7 +55,7 @@ --font-size-heading: var(--telekom-typography-font-size-callout); --font-weight-heading: var(--telekom-typography-font-weight-extra-bold); - --spacing-close-button: var(--telekom-spacing-unit-x2); + --spacing-close-button: var(--telekom-spacing-composition-space-04); --radius-close-button: var(--telekom-radius-standard); --transition-close-button: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); @@ -63,13 +65,14 @@ --color-close-button-hover: var(--telekom-color-primary-hovered); --color-close-button-active: var(--telekom-color-primary-pressed); - --spacing-x-body-wrapper: var(--telekom-spacing-unit-x6); - --spacing-y-body: var(--telekom-spacing-unit-x6); + --spacing-x-body-wrapper: var(--telekom-spacing-composition-space-08); + --spacing-y-body: var(--telekom-spacing-composition-space-08); - --spacing-actions: var(--telekom-spacing-unit-x4) - var(--telekom-spacing-unit-x6) var(--telekom-spacing-unit-x6); + --spacing-actions: var(--telekom-spacing-composition-space-06) + var(--telekom-spacing-composition-space-08) + var(--telekom-spacing-composition-space-08); - --spacing-x-actions-slotted: var(--telekom-spacing-unit-x2); + --spacing-x-actions-slotted: var(--telekom-spacing-composition-space-04); --background-actions-has-scroll: var( --telekom-color-background-surface-subtle ); @@ -140,7 +143,7 @@ @media (max-height: 30em) { .modal__window { - max-height: calc(100vh - var(--telekom-spacing-unit-x6)); + max-height: calc(100vh - var(--telekom-spacing-composition-space-08)); } } diff --git a/packages/components/src/components/notification/notification.css b/packages/components/src/components/notification/notification.css index 3a83b5d72c..3dd3eba13c 100644 --- a/packages/components/src/components/notification/notification.css +++ b/packages/components/src/components/notification/notification.css @@ -13,9 +13,9 @@ --width: 100%; --width-toast: 25rem; --radius: var(--telekom-radius-standard); - --spacing-y: var(--telekom-spacing-unit-x4); - --spacing-y-inner: var(--telekom-spacing-unit-x2); - --spacing-x-aside: var(--telekom-spacing-unit-x12); + --spacing-y: var(--telekom-spacing-composition-space-06); + --spacing-y-inner: var(--telekom-spacing-composition-space-04); + --spacing-x-aside: var(--telekom-spacing-composition-space-14); --duration-in: var(--telekom-motion-duration-transition); --duration-out: var(--telekom-motion-duration-transition); @@ -93,7 +93,7 @@ --_shadow: var(--telekom-shadow-floating-standard); } [part~='type-toast'] { - --translate-x: var(--telekom-spacing-unit-x3); + --translate-x: var(--telekom-spacing-composition-space-05); --_shadow: var(--telekom-shadow-top); width: var(--width-toast); } @@ -147,8 +147,8 @@ [part='close-button'] { --color-ghost: var(--telekom-text-and-icon-standard); position: absolute; - right: var(--telekom-spacing-unit-x1); - top: var(--telekom-spacing-unit-x1); + right: var(--telekom-spacing-composition-space-03); + top: var(--telekom-spacing-composition-space-03); } @media screen and (forced-colors: active), (-ms-high-contrast: active) { diff --git a/packages/components/src/components/pagination/pagination.css b/packages/components/src/components/pagination/pagination.css index dde07d7930..e71e723c4b 100644 --- a/packages/components/src/components/pagination/pagination.css +++ b/packages/components/src/components/pagination/pagination.css @@ -28,7 +28,7 @@ /* FIXME is this needed? */ --stroke-svg-high-contrast: #fff; --width-button: 44px; - --padding-info: var(--telekom-spacing-unit-x2); + --padding-info: var(--telekom-spacing-composition-space-04); --height-button: 44px; --line-height-info: calc(var(--height-button) - 2px); } diff --git a/packages/components/src/components/progress-bar/progress-bar.css b/packages/components/src/components/progress-bar/progress-bar.css index d2165a2084..8b32c56ff2 100644 --- a/packages/components/src/components/progress-bar/progress-bar.css +++ b/packages/components/src/components/progress-bar/progress-bar.css @@ -25,7 +25,7 @@ --color-disabled: var(--telekom-color-text-and-icon-disabled); --progress-bar-outer-size: 6px; - --progress-bar-inner-size: var(--telekom-spacing-unit-x1); + --progress-bar-inner-size: var(--telekom-spacing-composition-space-03); --font-label: var(--telekom-text-style-ui); --color-label: var(--telekom-color-text-and-icon-standard); @@ -55,7 +55,7 @@ .progress-bar__label { display: block; - padding: var(--telekom-spacing-unit-x3) 0; + padding: var(--telekom-spacing-composition-space-05) 0; color: var(--color-label); font: var(--font-label); } @@ -99,7 +99,7 @@ } .progress-bar__status { - padding: var(--telekom-spacing-unit-x3) 0; + padding: var(--telekom-spacing-composition-space-05) 0; font: var(--font-label); font-variant-numeric: tabular-nums; } @@ -127,7 +127,7 @@ .progress-bar__status-description { color: var(--color-status-description); font: var(--font-status-description); - margin-top: var(--telekom-spacing-unit-x2); + margin-top: var(--telekom-spacing-composition-space-04); } .progress-bar__aria-live { diff --git a/packages/components/src/components/radio-button-group/radio-button-group.css b/packages/components/src/components/radio-button-group/radio-button-group.css index e5661c44b5..01c2785c19 100644 --- a/packages/components/src/components/radio-button-group/radio-button-group.css +++ b/packages/components/src/components/radio-button-group/radio-button-group.css @@ -8,8 +8,8 @@ --color-helper-text: var( --telekom-color-text-and-icon-functional-informational ); - --padding-bottom-helper-text: var(--telekom-spacing-unit-x2); - --margin-top-helper-text: var(--telekom-spacing-unit-x1); + --padding-bottom-helper-text: var(--telekom-spacing-composition-space-04); + --margin-top-helper-text: var(--telekom-spacing-composition-space-03); --font-size-helper-text: var(--telekom-typography-font-size-small); --font-weight-helper-text: var(--telekom-typography-font-weight-bold); @@ -18,8 +18,10 @@ --color-error-helper-text: var( --telekom-color-text-and-icon-functional-danger ); - --padding-bottom-error-helper-text: var(--telekom-spacing-unit-x2); - --margin-top-error-helper-text: var(--telekom-spacing-unit-x1); + --padding-bottom-error-helper-text: var( + --telekom-spacing-composition-space-04 + ); + --margin-top-error-helper-text: var(--telekom-spacing-composition-space-03); --font-weight-error-helper-text: var(--telekom-typography-font-weight-medium); --color-error-helper-text-hcm: var( --telekom-color-text-and-icon-white-standard @@ -29,11 +31,11 @@ /*title*/ --font-size-title: var(--font-size-label); --font-weight-title: var(--telekom-typography-font-weight-medium); - --padding-bottom-title: var(--telekom-spacing-unit-x1); - --margin-left-title: var(--telekom-spacing-unit-x05); + --padding-bottom-title: var(--telekom-spacing-composition-space-03); + --margin-left-title: var(--telekom-spacing-composition-space-02); /*slotted items*/ - --margin-top-slotted-item: var(--telekom-spacing-unit-x3); + --margin-top-slotted-item: var(--telekom-spacing-composition-space-05); margin-top: var(--margin-top-slotted-item); } @@ -91,5 +93,5 @@ .radio-button-group__helper-text scale-icon-alert-warning, .radio-button-group__helper-text scale-icon-alert-information, .radio-button-group__helper-text scale-icon-alert-error { - margin-right: var(--telekom-spacing-unit-x1); + margin-right: var(--telekom-spacing-composition-space-03); } diff --git a/packages/components/src/components/radio-button/radio-button.css b/packages/components/src/components/radio-button/radio-button.css index 538ddc328a..8f0a6396f8 100644 --- a/packages/components/src/components/radio-button/radio-button.css +++ b/packages/components/src/components/radio-button/radio-button.css @@ -30,9 +30,9 @@ scale-radio-button { --telekom-color-text-and-icon-functional-informational ); --spacing-left-helper-text: calc( - var(--width-control) + var(--telekom-spacing-unit-x2) + var(--width-control) + var(--telekom-spacing-composition-space-04) ); - --spacing-top-helper-text: var(--telekom-spacing-unit-x1); + --spacing-top-helper-text: var(--telekom-spacing-composition-space-03); --color-helper-text-error: var( --telekom-color-text-and-icon-functional-danger ); @@ -42,26 +42,30 @@ scale-radio-button { --color-label: var(--color-text); /*control*/ - --width-control: var(--telekom-spacing-unit-x5); - --height-control: var(--telekom-spacing-unit-x5); + --width-control: var(--telekom-spacing-composition-space-07); + --height-control: var(--telekom-spacing-composition-space-07); --transition-control: var(--transition); - --spacing-control: 0 var(--telekom-spacing-unit-x2) 0 0; + --spacing-control: 0 var(--telekom-spacing-composition-space-04) 0 0; --background-color-control: var(--telekom-color-ui-base); - --border-control: var(--telekom-spacing-unit-x025) solid + --border-control: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard); --line-height-helper-text: var(--telekom-typography-line-spacing-standard); - --border-control-checked: calc(0.25 * var(--telekom-spacing-unit-x3)) solid - var(--telekom-color-background-canvas); - --border-control-checked-disabled: calc(0.5 * var(--telekom-spacing-unit-x3)) + --border-control-checked: calc( + 0.25 * var(--telekom-spacing-composition-space-05) + ) + solid var(--telekom-color-background-canvas); + --border-control-checked-disabled: calc( + 0.5 * var(--telekom-spacing-composition-space-05) + ) solid var(--telekom-color-ui-border-disabled); --background-control-checked-disabled: none; - --border-control-active: var(--telekom-spacing-unit-x2) solid + --border-control-active: var(--telekom-spacing-composition-space-04) solid var(--telekom-color-primary-pressed); - --border-control-disabled: 0 0 0 var(--telekom-spacing-unit-x025) + --border-control-disabled: 0 0 0 var(--telekom-spacing-composition-space-01) var(--telekom-color-ui-border-disabled); - --border-control-error: var(--telekom-spacing-unit-x05) solid + --border-control-error: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-standard); - --box-shadow-control-focus: 0 0 0 var(--telekom-spacing-unit-x1) + --box-shadow-control-focus: 0 0 0 var(--telekom-spacing-composition-space-03) var(--color-focus); } @@ -94,7 +98,7 @@ scale-icon-alert-error { display: flex; justify-content: center; align-items: center; - margin-right: var(--telekom-spacing-unit-x1); + margin-right: var(--telekom-spacing-composition-space-03); } .radio-button--status-error .radio-button__helper-text { @@ -159,7 +163,7 @@ scale-icon-alert-error { .radio-button input:checked { border: var(--border-control-checked); background-color: var(--telekom-color-primary-standard); - box-shadow: 0 0 0 var(--telekom-spacing-unit-x025) + box-shadow: 0 0 0 var(--telekom-spacing-composition-space-01) var(--telekom-color-text-and-icon-primary-standard); } .radio-button input:checked:disabled { diff --git a/packages/components/src/components/rating-stars/rating-stars.css b/packages/components/src/components/rating-stars/rating-stars.css index c1cd105aa5..0dad05c20a 100644 --- a/packages/components/src/components/rating-stars/rating-stars.css +++ b/packages/components/src/components/rating-stars/rating-stars.css @@ -17,7 +17,7 @@ --stars-placeholder-color: var(--telekom-color-ui-border-standard); --stars-placeholder-hover-color: var(--telekom-color-ui-border-hovered); --stars-disabled-color: var(--telekom-color-text-and-icon-disabled); - --stars-spacing: var(--telekom-spacing-unit-x05); + --stars-spacing: var(--telekom-spacing-composition-space-02); --stars-transition: color var(--telekom-motion-duration-immediate); --stars-size: 24px; --label-font: var(--telekom-text-style-ui); @@ -82,7 +82,7 @@ input[type='range']::-webkit-slider-thumb { [part='wrapper'] { display: inline-flex; - border-radius: var(--telekom-spacing-unit-x1); + border-radius: var(--telekom-spacing-composition-space-03); margin-left: calc(-1 * var(--stars-spacing)); } @@ -97,12 +97,12 @@ input[type='range']::-webkit-slider-thumb { [part='label'] { font: var(--label-font); - margin-bottom: var(--telekom-spacing-unit-x2); + margin-bottom: var(--telekom-spacing-composition-space-04); white-space: nowrap; } [part='infotext'] { - margin-left: var(--telekom-spacing-unit-x2); + margin-left: var(--telekom-spacing-composition-space-04); display: flex; align-items: center; font: var(--infotext-font); diff --git a/packages/components/src/components/segment/segment.css b/packages/components/src/components/segment/segment.css index 32da001048..49b7c04896 100644 --- a/packages/components/src/components/segment/segment.css +++ b/packages/components/src/components/segment/segment.css @@ -13,7 +13,7 @@ /* not selected */ --background-color-selected: var(--telekom-color-ui-base); --button-radius: 6px; - --padding-top-bottom: var(--telekom-spacing-unit-x1); + --padding-top-bottom: var(--telekom-spacing-composition-space-03); --height: 28px; --font: var(--telekom-text-style-caption-bold); --label-disabled: var(--telekom-color-text-and-icon-disabled); @@ -75,13 +75,13 @@ } button.segment--small.segment--selected .segment--mask { - padding-left: var(--telekom-spacing-unit-x2); - padding-right: var(--telekom-spacing-unit-x3); + padding-left: var(--telekom-spacing-composition-space-04); + padding-right: var(--telekom-spacing-composition-space-05); } button.segment--icon-only.segment--small .segment--mask { - padding-left: var(--telekom-spacing-unit-x4); - padding-right: var(--telekom-spacing-unit-x4); + padding-left: var(--telekom-spacing-composition-space-06); + padding-right: var(--telekom-spacing-composition-space-06); } button.segment--small .segment--mask { @@ -98,8 +98,8 @@ button.segment--small .segment--mask { } button.segment--medium.segment--selected .segment--mask { - padding-left: var(--telekom-spacing-unit-x3); - padding-right: var(--telekom-spacing-unit-x4); + padding-left: var(--telekom-spacing-composition-space-05); + padding-right: var(--telekom-spacing-composition-space-06); } button.segment--medium .segment--mask { @@ -113,14 +113,14 @@ button.segment--medium .segment--mask { } button.segment--large.segment--selected .segment--mask { - padding-left: var(--telekom-spacing-unit-x4); - padding-right: var(--telekom-spacing-unit-x5); + padding-left: var(--telekom-spacing-composition-space-06); + padding-right: var(--telekom-spacing-composition-space-07); } button.segment--large .segment--mask { font: var(--font-large); - padding-left: var(--telekom-spacing-unit-x4); - padding-right: var(--telekom-spacing-unit-x5); + padding-left: var(--telekom-spacing-composition-space-06); + padding-right: var(--telekom-spacing-composition-space-07); } .segment--selected { @@ -176,9 +176,9 @@ button.segment--large .segment--mask { .segment:focus { box-shadow: var(--telekom-shadow-raised-standard); - outline: var(--telekom-spacing-unit-x05) solid + outline: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-focus-standard); - outline-offset: var(--telekom-spacing-unit-x025); + outline-offset: var(--telekom-spacing-composition-space-01); z-index: 40; position: relative; } @@ -196,7 +196,7 @@ button.segment--large .segment--mask { /* FIXME remove the hard-coded icon names */ .segment:not(.segment--icon-only) scale-icon-action-checkmark, .segment scale-icon-action-close { - margin-right: var(--telekom-spacing-unit-x1); + margin-right: var(--telekom-spacing-composition-space-03); } .segment:not(.segment--selected) scale-icon-action-checkmark { diff --git a/packages/components/src/components/segmented-button/segmented-button.css b/packages/components/src/components/segmented-button/segmented-button.css index f7dbef1968..12720a432b 100644 --- a/packages/components/src/components/segmented-button/segmented-button.css +++ b/packages/components/src/components/segmented-button/segmented-button.css @@ -28,7 +28,7 @@ background-color: var(--background-color); border: 0; border-radius: var(--radius); - padding: 0 var(--telekom-spacing-unit-x05); + padding: 0 var(--telekom-spacing-composition-space-02); width: fit-content; height: var(--height); display: inline-grid; @@ -40,20 +40,20 @@ .segmented-button--medium { height: var(--height-medium); - padding: 0 var(--telekom-spacing-unit-x05); + padding: 0 var(--telekom-spacing-composition-space-02); } .segmented-button--large { height: var(--height-large); - padding: 0 var(--telekom-spacing-unit-x05); + padding: 0 var(--telekom-spacing-composition-space-02); } .segmented-button--label { font-size: var(--telekom-typography-font-size-body); font-weight: var(--telekom-typography-font-weight-bold); - margin-bottom: var(--telekom-spacing-unit-x2); + margin-bottom: var(--telekom-spacing-composition-space-04); } .segmented-button--helper-text { - margin-top: var(--telekom-spacing-unit-x2); + margin-top: var(--telekom-spacing-composition-space-04); } diff --git a/packages/components/src/components/sidebar-nav/sidebar-nav.css b/packages/components/src/components/sidebar-nav/sidebar-nav.css index 80f52150b1..05db733ccc 100644 --- a/packages/components/src/components/sidebar-nav/sidebar-nav.css +++ b/packages/components/src/components/sidebar-nav/sidebar-nav.css @@ -11,8 +11,8 @@ :host { --max-width: 15rem; - --spacing-indent: var(--telekom-spacing-unit-x6); - --spacing-collapsible: var(--telekom-spacing-unit-x4); + --spacing-indent: var(--telekom-spacing-composition-space-08); + --spacing-collapsible: var(--telekom-spacing-composition-space-06); --opacity-chevron: 0; --left-current-border: 0; diff --git a/packages/components/src/components/slider/slider.css b/packages/components/src/components/slider/slider.css index 53e7a4b752..17c4e8be0a 100644 --- a/packages/components/src/components/slider/slider.css +++ b/packages/components/src/components/slider/slider.css @@ -14,8 +14,8 @@ --height-track: 6px; --background-track: var(--telekom-color-ui-faint); --radius-track: var(--telekom-radius-pill); - --spacing-track: var(--telekom-spacing-unit-x5) 0 - var(--telekom-spacing-unit-x4); + --spacing-track: var(--telekom-spacing-composition-space-07) 0 + var(--telekom-spacing-composition-space-06); --spacing-x-inner-track: 10px; --background-bar: var(--telekom-color-primary-standard); --radius-thumb: var(--telekom-radius-circle); @@ -105,7 +105,8 @@ } [part~='thumb'] { - --_border: 0 0 0 var(--telekom-spacing-unit-x025) var(--border-color-thumb); + --_border: 0 0 0 var(--telekom-spacing-composition-space-01) + var(--border-color-thumb); width: var(--size-thumb); height: var(--size-thumb); box-sizing: border-box; diff --git a/packages/components/src/components/switch/switch.css b/packages/components/src/components/switch/switch.css index e53e109e30..cf95c1cb91 100644 --- a/packages/components/src/components/switch/switch.css +++ b/packages/components/src/components/switch/switch.css @@ -18,7 +18,7 @@ scale-switch { --transition-easing: var(--telekom-motion-easing-standard); --shadow-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.24), 0 2px 4px 0 rgba(0, 0, 0, 0.24), 0 4px 12px 0 rgba(0, 0, 0, 0.26); - --spacing-x-label: var(--telekom-spacing-unit-x2); + --spacing-x-label: var(--telekom-spacing-composition-space-04); --font-label: var(--telekom-text-style-ui); --font-io-text: var(--telekom-text-style-small-bold); --color-label: var(--telekom-color-text-and-icon-standard); @@ -180,9 +180,9 @@ scale-switch { /* I don't like the ~ */ .switch--focus-visible-not-supported :focus ~ .switch__toggle, :focus-visible ~ .switch__toggle { - outline: var(--telekom-spacing-unit-x05) solid + outline: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-focus-standard); - outline-offset: var(--telekom-spacing-unit-x025); + outline-offset: var(--telekom-spacing-composition-space-01); } .switch__thumb { diff --git a/packages/components/src/components/tab-header/tab-header.css b/packages/components/src/components/tab-header/tab-header.css index 7abed2b2c8..8db6b6533e 100644 --- a/packages/components/src/components/tab-header/tab-header.css +++ b/packages/components/src/components/tab-header/tab-header.css @@ -18,7 +18,7 @@ --color-selected: var(--telekom-color-text-and-icon-primary-standard); --focus-outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard); - --spacing-right-slotted: var(--telekom-spacing-unit-x2); + --spacing-right-slotted: var(--telekom-spacing-composition-space-04); --color-disabled: var(--telekom-color-text-and-icon-disabled); --radius: var(--telekom-radius-standard); --font-size-large: var(--telekom-typography-font-size-callout); diff --git a/packages/components/src/components/tab-nav/tab-nav.css b/packages/components/src/components/tab-nav/tab-nav.css index ad2f05f0cf..b28b7ca3b7 100644 --- a/packages/components/src/components/tab-nav/tab-nav.css +++ b/packages/components/src/components/tab-nav/tab-nav.css @@ -11,8 +11,8 @@ :host { --tab-height: 3rem; - --tab-spacing-horizontal: var(--telekom-spacing-unit-x3); - --tab-spacing-vertical: var(--telekom-spacing-unit-x4); + --tab-spacing-horizontal: var(--telekom-spacing-composition-space-05); + --tab-spacing-vertical: var(--telekom-spacing-composition-space-06); --tab-radius: var(--telekom-radius-small); --tab-border-size: var(--telekom-line-weight-standard); --tab-border-size-selected: var(--telekom-line-weight-highlight); @@ -22,6 +22,6 @@ --tab-height-large: 3.25rem; - --tab-spacing-horizontal-large: var(--telekom-spacing-unit-x4); + --tab-spacing-horizontal-large: var(--telekom-spacing-composition-space-06); --tab-spacing-vertical-large: 0.875rem; } diff --git a/packages/components/src/components/tab-panel/tab-panel.css b/packages/components/src/components/tab-panel/tab-panel.css index 8c1e7f5067..cdd5f41b29 100644 --- a/packages/components/src/components/tab-panel/tab-panel.css +++ b/packages/components/src/components/tab-panel/tab-panel.css @@ -10,7 +10,7 @@ */ :host { - --spacing-top: var(--telekom-spacing-unit-x6); + --spacing-top: var(--telekom-spacing-composition-space-08); } .tab-panel { diff --git a/packages/components/src/components/table/table.css b/packages/components/src/components/table/table.css index 3f156e6abf..aed24b51ab 100644 --- a/packages/components/src/components/table/table.css +++ b/packages/components/src/components/table/table.css @@ -18,23 +18,25 @@ scale-table { --font-size: var(--telekom-typography-font-size-small); --font-weight: var(--telekom-typography-font-weight-bold); - --spacing-tbody-td: var(--telekom-spacing-unit-x4) - var(--telekom-spacing-unit-x2); - --border-bottom-tbody-td: var(--telekom-spacing-unit-x025) solid + --spacing-tbody-td: var(--telekom-spacing-composition-space-06) + var(--telekom-spacing-composition-space-04); + --border-bottom-tbody-td: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-faint); --background-tbody: var(--telekom-color-ui-state-fill-standard); --background-tbody-tr-hover: var(--telekom-color-ui-state-fill-hovered); --background-tfoot: var(--telekom-color-ui-state-fill-standard); - --border-bottom-tfoot-td: var(--telekom-spacing-unit-x025) solid + --border-bottom-tfoot-td: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-extra-strong); - --spacing-th-sortable: 0 var(--telekom-spacing-unit-x2) 0 0; + --spacing-th-sortable: 0 var(--telekom-spacing-composition-space-04) 0 0; --background-th-sortable-hover: var(--telekom-color-ui-subtle); --background-th-sortable-active: var(--telekom-color-ui-faint); - --box-shadow-th-sortable-focus: inset 0 0 0 var(--telekom-spacing-unit-x05) + --box-shadow-th-sortable-focus: inset 0 0 0 + var(--telekom-spacing-composition-space-02) var(--telekom-color-functional-focus-standard); --background-tr-striped: var(--telekom-color-ui-subtle); - --padding: var(--telekom-spacing-unit-x0) var(--telekom-spacing-unit-x2); + --padding: var(--telekom-spacing-composition-space-00) + var(--telekom-spacing-composition-space-04); } .table { display: block; diff --git a/packages/components/src/components/tag/tag.css b/packages/components/src/components/tag/tag.css index 4a4faf62c3..b8c4c10db5 100644 --- a/packages/components/src/components/tag/tag.css +++ b/packages/components/src/components/tag/tag.css @@ -23,12 +23,14 @@ --background-disabled: var(--telekom-color-ui-faint); --color-disabled: var(--telekom-color-text-and-icon-disabled); - --spacing-dismissable: var(--telekom-spacing-unit-x05) - var(--telekom-spacing-unit-x05) var(--telekom-spacing-unit-x05) - var(--telekom-spacing-unit-x1); - --spacing-dismissable-small: var(--telekom-spacing-unit-x05) - var(--telekom-spacing-unit-x05) var(--telekom-spacing-unit-x05) - var(--telekom-spacing-unit-x1); + --spacing-dismissable: var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-03); + --spacing-dismissable-small: var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-03); --height: 24px; --height-small: 20px; @@ -53,7 +55,7 @@ --height-button-dismissable-small: 16px; --width-button-dismissable-small: 16px; - --spacing-small: 0 var(--telekom-spacing-unit-x2); + --spacing-small: 0 var(--telekom-spacing-composition-space-04); --font-size-small: var(--telekom-typography-font-size-small); --line-height-small: var(--telekom-typography-line-spacing-loose); } diff --git a/packages/components/src/components/telekom/app-footer/app-footer.css b/packages/components/src/components/telekom/app-footer/app-footer.css index 034fb82b98..e2f31269b5 100644 --- a/packages/components/src/components/telekom/app-footer/app-footer.css +++ b/packages/components/src/components/telekom/app-footer/app-footer.css @@ -12,19 +12,19 @@ :host { --background: var(--telekom-color-background-surface-highlight); --color: var(--telekom-color-text-and-icon-white-standard); - --spacing-top: var(--telekom-spacing-unit-x8); - --spacing-bottom: var(--telekom-spacing-unit-x6); - --spacing-x: var(--telekom-spacing-unit-x6); + --spacing-top: var(--telekom-spacing-composition-space-10); + --spacing-bottom: var(--telekom-spacing-composition-space-08); + --spacing-x: var(--telekom-spacing-composition-space-08); --background-container: var(--telekom-color-background-canvas); --radius: var(--telekom-radius-large); --max-width: inherit; - --border-top-minimal: var(--telekom-spacing-unit-x025) solid + --border-top-minimal: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-faint); --color-minimal: var(--telekom-color-text-and-icon-additional); --background-minimal: var(--telekom-color-background-surface); - --spacing-angular: var(--telekom-spacing-unit-x6); - --spacing-minimal: var(--telekom-spacing-unit-x6); + --spacing-angular: var(--telekom-spacing-composition-space-08); + --spacing-minimal: var(--telekom-spacing-composition-space-08); --background-mask: var(--telekom-color-background-canvas); --radius-mask: 0 0 var(--telekom-radius-large) var(--telekom-radius-large); @@ -42,7 +42,7 @@ --telekom-typography-font-weight-medium ); - --spacing-navigation-standard: var(--telekom-spacing-unit-x2); + --spacing-navigation-standard: var(--telekom-spacing-composition-space-04); --color-navigation-standard-hover: var( --telekom-color-text-and-icon-white-standard ); @@ -52,7 +52,8 @@ --color-navigation-active-focus: var( --telekom-color-text-and-icon-primary-pressed ); - --box-shadow-navigation-focus: 0 0 0 var(--telekom-spacing-unit-x05) + --box-shadow-navigation-focus: 0 0 0 + var(--telekom-spacing-composition-space-02) var(--telekom-color-functional-focus-standard); --border-color-standard-hover: var( --telekom-color-text-and-icon-white-standard @@ -129,7 +130,7 @@ margin: calc(-1 * var(--spacing-navigation-standard)) 0; } .footer-navigation li span { - padding: var(--telekom-spacing-unit-x1) 0; + padding: var(--telekom-spacing-composition-space-03) 0; } .footer-navigation li a:hover { @@ -179,7 +180,7 @@ .footer-navigation svg { width: auto; - height: var(--telekom-spacing-unit-x4); + height: var(--telekom-spacing-composition-space-06); margin-right: var(--spacing-navigation-standard); } @@ -200,15 +201,15 @@ margin-bottom: var(--spacing-angular); } .footer-copyright { - margin-bottom: var(--telekom-spacing-unit-x4); + margin-bottom: var(--telekom-spacing-composition-space-06); } .footer-navigation ul { - line-height: var(--telekom-spacing-unit-x8); + line-height: var(--telekom-spacing-composition-space-10); } .footer-navigation li a { - padding: var(--telekom-spacing-unit-x1); + padding: var(--telekom-spacing-composition-space-03); margin: calc(-1 * var(--spacing-navigation-standard)) - calc(-1 * var(--telekom-spacing-unit-x1)); + calc(-1 * var(--telekom-spacing-composition-space-03)); } } diff --git a/packages/components/src/components/telekom/app-header/app-header.css b/packages/components/src/components/telekom/app-header/app-header.css index 334a308dbd..1768bcd4b1 100644 --- a/packages/components/src/components/telekom/app-header/app-header.css +++ b/packages/components/src/components/telekom/app-header/app-header.css @@ -10,11 +10,11 @@ */ scale-app-header { - --header-nav-height: var(--telekom-spacing-unit-x14); - --header-brand-height: var(--telekom-spacing-unit-x18); + --header-nav-height: var(--telekom-spacing-composition-space-16); + --header-brand-height: var(--telekom-spacing-composition-space-18); --header-border-radius: var(--telekom-radius-large); --header-transition-speed: var(--telekom-motion-duration-transition); - --header-brand-collapsed-height: var(--telekom-spacing-unit-x1); + --header-brand-collapsed-height: var(--telekom-spacing-composition-space-03); --header-max-width: inherit; --background: var(--telekom-color-primary-standard); @@ -29,7 +29,7 @@ scale-app-header { --background-nav-sticky: var(--telekom-color-background-surface); --background-header-sticky: var(--telekom-color-background-canvas); - --spacing-nav: 0 var(--telekom-spacing-unit-x4); + --spacing-nav: 0 var(--telekom-spacing-composition-space-06); } @keyframes keyframes-slideUp { from { @@ -243,7 +243,7 @@ scale-app-header { } .header .header__brand { height: var(--header-brand-height); - padding: 0 var(--telekom-spacing-unit-x6); + padding: 0 var(--telekom-spacing-composition-space-08); transition: height var(--header-transition-speed) ease-in-out; justify-content: space-between; } @@ -259,7 +259,7 @@ scale-app-header { } .header .header__nav { height: var(--header-nav-height); - padding: 0 var(--telekom-spacing-unit-x6); + padding: 0 var(--telekom-spacing-composition-space-08); position: relative; } .header .header__nav-logo { @@ -267,12 +267,12 @@ scale-app-header { opacity: 0; transition: none; font-weight: var(--telekom-typography-font-weight-bold); - margin-right: var(--telekom-spacing-unit-x4); + margin-right: var(--telekom-spacing-composition-space-06); pointer-events: none; } .header.header--sticky .header__nav-logo { pointer-events: all; - margin-right: var(--telekom-spacing-unit-x8); + margin-right: var(--telekom-spacing-composition-space-10); } .header scale-nav-main:first-child li { @@ -287,7 +287,7 @@ scale-app-header { list-style: none; transition: margin-left var(--header-transition-speed) ease-in-out; align-items: center; - margin-left: calc(-50px - var(--telekom-spacing-unit-x4)); + margin-left: calc(-50px - var(--telekom-spacing-composition-space-06)); } .header *[slot='menu-sector'], .header *[slot='menu-addon'], diff --git a/packages/components/src/components/telekom/app-mega-menu/app-mega-menu.css b/packages/components/src/components/telekom/app-mega-menu/app-mega-menu.css index 72a03c58bf..4c8959190c 100644 --- a/packages/components/src/components/telekom/app-mega-menu/app-mega-menu.css +++ b/packages/components/src/components/telekom/app-mega-menu/app-mega-menu.css @@ -12,8 +12,8 @@ app-mega-menu { --box-shadow: var(--telekom-shadow-top); --spacing-y: 2.125rem; - --spacing-right: var(--telekom-spacing-unit-x4); - --spacing-left: var(--telekom-spacing-unit-x6); + --spacing-right: var(--telekom-spacing-composition-space-06); + --spacing-left: var(--telekom-spacing-composition-space-08); --background: var(--telekom-color-background-surface); --color-selected: var(--telekom-color-text-and-icon-primary-standard); --color-hover: var(--telekom-color-text-and-icon-primary-hovered); @@ -25,7 +25,7 @@ app-mega-menu { --line-height-row-item: var(--telekom-typography-line-spacing-loose); --font-weight-row-item: var(--telekom-typography-font-weight-medium); --color-row-item: var(--telekom-color-text-and-icon-standard); - --spacing-bottom-row-item: var(--telekom-spacing-unit-x2); + --spacing-bottom-row-item: var(--telekom-spacing-composition-space-04); } .mega-menu { width: 100%; @@ -52,7 +52,7 @@ app-mega-menu { display: grid; grid-template-columns: repeat(5, minmax(min-content, 240px)); list-style: none; - padding-left: var(--telekom-spacing-unit-x8); + padding-left: var(--telekom-spacing-composition-space-10); } .mega-menu__row-title { diff --git a/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css b/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css index 1b1d8ef1d5..809f54529f 100644 --- a/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css +++ b/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css @@ -110,7 +110,7 @@ app-navigation-main-mobile { } .main-navigation-mobile__child-menu-current app-icon { - margin-right: var(--telekom-spacing-unit-x2); + margin-right: var(--telekom-spacing-composition-space-04); } .main-navigation-mobile__child-menu-current .icon-back { @@ -153,10 +153,10 @@ app-navigation-main-mobile { justify-content: space-between; align-items: center; border-bottom: var(--border-bottom); - margin-left: var(--telekom-spacing-unit-x16); + margin-left: var(--telekom-spacing-composition-space-17); box-sizing: border-box; } .main-navigation-mobile__child-menu-item-wrapper svg { - margin-right: var(--telekom-spacing-unit-x10); + margin-right: var(--telekom-spacing-composition-space-12); } diff --git a/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.css b/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.css index 554aee523a..252126f9cb 100644 --- a/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.css +++ b/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.css @@ -10,7 +10,7 @@ */ :host { - --border-width-divider: var(--telekom-spacing-unit-x025); + --border-width-divider: var(--telekom-spacing-composition-space-01); --color-divider: var(--telekom-color-ui-subtle); --color-menu-item-hover: var(--telekom-color-text-and-icon-primary-hovered); --color-menu-item-active: var(--telekom-color-text-and-icon-primary-pressed); @@ -25,28 +25,30 @@ } .app-navigation-user-menu__divider { - margin: var(--telekom-spacing-unit-x4) 0; + margin: var(--telekom-spacing-composition-space-06) 0; border: 0; border-top: var(--border-width-divider) solid var(--color-divider); } @media (min-width: 1040px) { .app-navigation-user-menu__user-info { - margin: var(--telekom-spacing-unit-x3) var(--telekom-spacing-unit-x6) 0 - var(--telekom-spacing-unit-x6); + margin: var(--telekom-spacing-composition-space-05) + var(--telekom-spacing-composition-space-08) 0 + var(--telekom-spacing-composition-space-08); } } @media (max-width: 1039px) { .app-navigation-user-menu__user-info { - margin: var(--telekom-spacing-unit-x6) var(--telekom-spacing-unit-x4) 0 - var(--telekom-spacing-unit-x4); + margin: var(--telekom-spacing-composition-space-08) + var(--telekom-spacing-composition-space-06) 0 + var(--telekom-spacing-composition-space-06); } } .app-navigation-user-menu__user-info--name { font: var(--telekom-text-style-heading-5); - margin-bottom: var(--telekom-spacing-unit-x1); + margin-bottom: var(--telekom-spacing-composition-space-03); } .app-navigation-user-menu__user-info--email { color: var(--telekom-color-text-and-icon-additional); @@ -56,7 +58,8 @@ .app-navigation-user-menu__item { display: flex; font: var(--telekom-text-style-heading-6); - padding: var(--telekom-spacing-unit-x2) var(--telekom-spacing-unit-x4); + padding: var(--telekom-spacing-composition-space-04) + var(--telekom-spacing-composition-space-06); border-radius: calc(var(--telekom-radius-small) / 2); color: var(--telekom-color-text-and-icon-standard); text-decoration: none; @@ -64,7 +67,8 @@ @media (min-width: 1040px) { .app-navigation-user-menu__item { - padding: var(--telekom-spacing-unit-x2) var(--telekom-spacing-unit-x6); + padding: var(--telekom-spacing-composition-space-04) + var(--telekom-spacing-composition-space-08); } } @@ -82,23 +86,25 @@ } .app-navigation-user-menu__item--icon-prefix { - margin-right: var(--telekom-spacing-unit-x2); + margin-right: var(--telekom-spacing-composition-space-04); } .app-navigation-user-menu__item--icon-suffix { - margin-left: var(--telekom-spacing-unit-x2); + margin-left: var(--telekom-spacing-composition-space-04); } .app-navigation-user-menu__button { - padding: var(--telekom-spacing-unit-x2) var(--telekom-spacing-unit-x4); + padding: var(--telekom-spacing-composition-space-04) + var(--telekom-spacing-composition-space-06); } @media (min-width: 1040px) { .app-navigation-user-menu__button { - padding: var(--telekom-spacing-unit-x2) var(--telekom-spacing-unit-x6); + padding: var(--telekom-spacing-composition-space-04) + var(--telekom-spacing-composition-space-08); } } @media (min-width: 1040px) { .app-navigation-user-menu { - padding-bottom: var(--telekom-spacing-unit-x1); + padding-bottom: var(--telekom-spacing-composition-space-03); } } diff --git a/packages/components/src/components/telekom/app-shell/app-shell.css b/packages/components/src/components/telekom/app-shell/app-shell.css index bf951eb166..23cf2ccdff 100644 --- a/packages/components/src/components/telekom/app-shell/app-shell.css +++ b/packages/components/src/components/telekom/app-shell/app-shell.css @@ -11,7 +11,7 @@ :host { --background: var(--telekom-color-background-canvas, #fff); - --spacing-x: var(--telekom-spacing-unit-x6); + --spacing-x: var(--telekom-spacing-composition-space-08); --min-height: 100vh; } diff --git a/packages/components/src/components/telekom/nav-icon/nav-icon.css b/packages/components/src/components/telekom/nav-icon/nav-icon.css index 6525c4b4f8..0b8fc0e8d6 100644 --- a/packages/components/src/components/telekom/nav-icon/nav-icon.css +++ b/packages/components/src/components/telekom/nav-icon/nav-icon.css @@ -10,12 +10,12 @@ */ scale-nav-icon { - --spacing-mobile: var(--telekom-spacing-unit-x0) 6px; + --spacing-mobile: var(--telekom-spacing-composition-space-00) 6px; --font-size-mobile: var(--telekom-typography-font-size-badge); --line-height-mobile: var(--telekom-typography-line-spacing-tight); --font-weight-mobile: var(--telekom-typography-font-weight-bold); - --spacing-desktop: 0 0 0 var(--telekom-spacing-unit-x4); + --spacing-desktop: 0 0 0 var(--telekom-spacing-composition-space-06); --font-size-desktop: var(--telekom-typography-font-size-small); --line-height-desktop: var(--telekom-typography-line-spacing-standard); diff --git a/packages/components/src/components/telekom/nav-segment/nav-segment.css b/packages/components/src/components/telekom/nav-segment/nav-segment.css index 7b969af2ab..f1c70560f1 100644 --- a/packages/components/src/components/telekom/nav-segment/nav-segment.css +++ b/packages/components/src/components/telekom/nav-segment/nav-segment.css @@ -12,7 +12,7 @@ scale-nav-segment { --transition: all 0.2s ease-in-out; --color: var(--telekom-color-text-and-icon-white-standard); - --spacing-y: var(--telekom-spacing-unit-x1); + --spacing-y: var(--telekom-spacing-composition-space-03); --font-size: var(--telekom-typography-font-size-caption); --font-weight: var(--telekom-typography-font-weight-extra-bold); --line-height: var(--telekom-typography-line-spacing-extra-tight); diff --git a/packages/components/src/components/telekom/telekom-footer-extended-navigation/telekom-footer-extended-navigation.css b/packages/components/src/components/telekom/telekom-footer-extended-navigation/telekom-footer-extended-navigation.css index abe11bb7d7..66028e9023 100644 --- a/packages/components/src/components/telekom/telekom-footer-extended-navigation/telekom-footer-extended-navigation.css +++ b/packages/components/src/components/telekom/telekom-footer-extended-navigation/telekom-footer-extended-navigation.css @@ -5,8 +5,8 @@ --telekom-color-background-surface-subtle ); --_max-width-container: var(--scl-grid-max-width, 1680px); - --spacing-x: var(--telekom-spacing-unit-x6); - --column-gap: var(--telekom-spacing-unit-x8); + --spacing-x: var(--telekom-spacing-composition-space-08); + --column-gap: var(--telekom-spacing-composition-space-10); --heading-color: var(--telekom-color-text-and-icon-standard); --heading-weight: var(--telekom-typography-font-weight-bold); @@ -42,7 +42,7 @@ [part~='telekom-footer-extended-navigation'] :where(a) { font: var(--telekom-text-style-body); color: var(--link-color); - margin-top: var(--telekom-spacing-unit-x5); + margin-top: var(--telekom-spacing-composition-space-07); border: none; } @@ -75,17 +75,17 @@ scale-telekom-footer-extended-navigation-column[expanded] { scale-telekom-footer-extended-navigation-column:last-of-type, scale-telekom-footer-extended-navigation-column[expanded]:last-of-type { border-bottom: none; - margin-bottom: var(--telekom-spacing-unit-x5); + margin-bottom: var(--telekom-spacing-composition-space-07); padding-bottom: 0; } scale-telekom-footer-extended-navigation-column:first-of-type { - margin-top: var(--telekom-spacing-unit-x5); + margin-top: var(--telekom-spacing-composition-space-07); } @media screen and (--md) { [part~='telekom-footer-extended-navigation'] :where(li:first-child) { - padding-top: var(--telekom-spacing-unit-x5); + padding-top: var(--telekom-spacing-composition-space-07); } [part~='extended-navigation-container'] { display: grid; @@ -97,8 +97,8 @@ scale-telekom-footer-extended-navigation-column:first-of-type { scale-telekom-footer-extended-navigation-column:first-of-type, scale-telekom-footer-extended-navigation-column:last-of-type, scale-telekom-footer-extended-navigation-column[expanded]:last-of-type { - margin-bottom: var(--telekom-spacing-unit-x12); - margin-top: var(--telekom-spacing-unit-x12); + margin-bottom: var(--telekom-spacing-composition-space-14); + margin-top: var(--telekom-spacing-composition-space-14); padding-bottom: 0; border-bottom: 0; } diff --git a/packages/components/src/components/telekom/telekom-footer/telekom-footer-content.css b/packages/components/src/components/telekom/telekom-footer/telekom-footer-content.css index 351b570363..18d482d28d 100644 --- a/packages/components/src/components/telekom/telekom-footer/telekom-footer-content.css +++ b/packages/components/src/components/telekom/telekom-footer/telekom-footer-content.css @@ -2,13 +2,13 @@ :host { --_max-width-container: none; - --_spacing-x-container: var(--telekom-spacing-unit-x4); + --_spacing-x-container: var(--telekom-spacing-composition-space-06); - --_nav-items-bottom-margin: var(--telekom-spacing-unit-x6); - --_nav-items-spacing: var(--telekom-spacing-unit-x3); + --_nav-items-bottom-margin: var(--telekom-spacing-composition-space-08); + --_nav-items-spacing: var(--telekom-spacing-composition-space-05); - --_logo-top-margin: var(--telekom-spacing-unit-x10); - --_logo-bottom-margin: var(--telekom-spacing-unit-x10); + --_logo-top-margin: var(--telekom-spacing-composition-space-12); + --_logo-bottom-margin: var(--telekom-spacing-composition-space-12); --_font-color: var(--telekom-color-text-and-icon-white-standard); --_font-size: var(--telekom-typography-font-size-caption); @@ -66,15 +66,15 @@ footer { color: var(--_font-color); display: flex; flex: 1 0 auto; - margin-bottom: var(--telekom-spacing-unit-x5); + margin-bottom: var(--telekom-spacing-composition-space-07); font-size: var(--_font-size); line-height: 140%; - margin-right: var(--telekom-spacing-unit-x5); + margin-right: var(--telekom-spacing-composition-space-07); } /* todo: should i use spacing token for logo size? */ [part~='app-logo'] { - --logo-size: var(--telekom-spacing-unit-x9); + --logo-size: var(--telekom-spacing-composition-space-11); } /* Leave this just in case? */ @@ -86,9 +86,9 @@ footer { @media screen and (--md) { :host { - --_logo-top-margin: var(--telekom-spacing-unit-x8); - --_logo-bottom-margin: var(--telekom-spacing-unit-x12); - --_nav-items-spacing: var(--telekom-spacing-unit-x4); + --_logo-top-margin: var(--telekom-spacing-composition-space-10); + --_logo-bottom-margin: var(--telekom-spacing-composition-space-14); + --_nav-items-spacing: var(--telekom-spacing-composition-space-06); } [part~='body'] { flex-direction: column; @@ -100,18 +100,18 @@ footer { align-items: center; } [part~='notice'] { - margin-bottom: var(--telekom-spacing-unit-x2); + margin-bottom: var(--telekom-spacing-composition-space-04); } } @media screen and (--lg) { :host { - --_logo-top-margin: var(--telekom-spacing-unit-x12); - --_logo-bottom-margin: var(--telekom-spacing-unit-x18); - --_nav-items-spacing: var(--telekom-spacing-unit-x6); - --_slim-padding: var(--telekom-spacing-unit-x6); + --_logo-top-margin: var(--telekom-spacing-composition-space-14); + --_logo-bottom-margin: var(--telekom-spacing-composition-space-18); + --_nav-items-spacing: var(--telekom-spacing-composition-space-08); + --_slim-padding: var(--telekom-spacing-composition-space-08); --_font-size: var(--telekom-typography-font-size-body); - --_spacing-x-container: var(--telekom-spacing-unit-x6); + --_spacing-x-container: var(--telekom-spacing-composition-space-08); } [part~='body'] { flex-direction: row; @@ -119,7 +119,7 @@ footer { /* todo: should i use spacing token for logo size? */ :host [part~='app-logo'] { - --logo-size: var(--telekom-spacing-unit-x11); + --logo-size: var(--telekom-spacing-composition-space-13); } :host [part~='notice'] { margin-bottom: 0; @@ -128,26 +128,26 @@ footer { @media screen and (--xl) { :host { - --_logo-top-margin: var(--telekom-spacing-unit-x14); - --_logo-bottom-margin: var(--telekom-spacing-unit-x20); - --_nav-items-bottom-margin: var(--telekom-spacing-unit-x8); - --_nav-items-spacing: var(--telekom-spacing-unit-x12); - --_slim-padding: var(--telekom-spacing-unit-x8); + --_logo-top-margin: var(--telekom-spacing-composition-space-16); + --_logo-bottom-margin: var(--telekom-spacing-composition-space-19); + --_nav-items-bottom-margin: var(--telekom-spacing-composition-space-10); + --_nav-items-spacing: var(--telekom-spacing-composition-space-14); + --_slim-padding: var(--telekom-spacing-composition-space-10); } /* todo: should i use spacing token for logo size? */ :host [part~='app-logo'] { - --logo-size: var(--telekom-spacing-unit-x12); + --logo-size: var(--telekom-spacing-composition-space-14); } } @media screen and (--2xl) { :host { --_max-width-container: var(--scl-grid-max-width, 1504px); - --_logo-top-margin: var(--telekom-spacing-unit-x18); + --_logo-top-margin: var(--telekom-spacing-composition-space-18); /* too bad spacing tokens don't go beyond 5 rem */ --_logo-bottom-margin: 96px; } /* todo: should i use spacing token for logo size? */ :host [part~='app-logo'] { - --logo-size: var(--telekom-spacing-unit-x14); + --logo-size: var(--telekom-spacing-composition-space-16); } } diff --git a/packages/components/src/components/telekom/telekom-footer/telekom-footer.css b/packages/components/src/components/telekom/telekom-footer/telekom-footer.css index 0d3fed92d3..288b7649eb 100644 --- a/packages/components/src/components/telekom/telekom-footer/telekom-footer.css +++ b/packages/components/src/components/telekom/telekom-footer/telekom-footer.css @@ -8,8 +8,8 @@ --background-footer: var(--telekom-color-ui-black); --background-footer-minimal: var(--telekom-color-background-canvas); - --_nav-items-bottom-margin: var(--telekom-spacing-unit-x6); - --_nav-items-spacing: var(--telekom-spacing-unit-x3); + --_nav-items-bottom-margin: var(--telekom-spacing-composition-space-08); + --_nav-items-spacing: var(--telekom-spacing-composition-space-05); } .scale-telekom-footer :where(ul), @@ -31,8 +31,8 @@ --background-footer: var(--background-footer-minimal); --_font-color: var(--telekom-color-text-and-icon-additional); --_display-logo: none; - --_navigation-container-padding: var(--telekom-spacing-unit-x4) 0 - var(--telekom-spacing-unit-x4) 0; + --_navigation-container-padding: var(--telekom-spacing-composition-space-06) 0 + var(--telekom-spacing-composition-space-06) 0; --_nav-items-bottom-margin: 0; } @@ -103,15 +103,15 @@ align-items: center; list-style: none; column-gap: var(--_nav-items-spacing); - row-gap: var(--telekom-spacing-unit-x1); + row-gap: var(--telekom-spacing-composition-space-03); } } @media screen and (--lg) { .scale-telekom-footer :where(ul), .scale-telekom-footer[type='minimal'] :where(ul) { - --_nav-items-spacing: var(--telekom-spacing-unit-x6); - row-gap: var(--telekom-spacing-unit-x2); + --_nav-items-spacing: var(--telekom-spacing-composition-space-08); + row-gap: var(--telekom-spacing-composition-space-04); } .scale-telekom-footer :where(a, span) { font: var(--font-large); @@ -121,6 +121,6 @@ @media screen and (--xl) { .scale-telekom-footer :where(ul), .scale-telekom-footer[type='minimal'] :where(ul) { - --_nav-items-spacing: var(--telekom-spacing-unit-x12); + --_nav-items-spacing: var(--telekom-spacing-composition-space-14); } } diff --git a/packages/components/src/components/telekom/telekom-header/telekom-header.css b/packages/components/src/components/telekom/telekom-header/telekom-header.css index a1bf6d95a3..1c7308059f 100644 --- a/packages/components/src/components/telekom/telekom-header/telekom-header.css +++ b/packages/components/src/components/telekom/telekom-header/telekom-header.css @@ -39,14 +39,14 @@ /* value matches scale-grid — ideally we'd have this in a global var *sigh* */ --_max-width-container: none; - --_spacing-x-container: var(--telekom-spacing-unit-x4); - --_column-gap-container: var(--telekom-spacing-unit-x8); + --_spacing-x-container: var(--telekom-spacing-composition-space-06); + --_column-gap-container: var(--telekom-spacing-composition-space-10); --_grid-template-columns-container: auto; --_grid-column-body: auto; --_spacing-left-body: 0; - --_spacing-right-top-app-name: var(--telekom-spacing-unit-x8); - --_spacing-right-bottom-app-name: var(--telekom-spacing-unit-x8); + --_spacing-right-top-app-name: var(--telekom-spacing-composition-space-10); + --_spacing-right-bottom-app-name: var(--telekom-spacing-composition-space-10); --_left-logo: 0; --_justify-content-bottom-body: end; @@ -83,7 +83,7 @@ --_grid-column-body: 3 / span 14; --_spacing-left-body: 0; --_spacing-right-bottom-app-name: 52px; - --_spacing-x-container: var(--telekom-spacing-unit-x6); + --_spacing-x-container: var(--telekom-spacing-composition-space-08); --_justify-content-bottom-body: space-between; @@ -92,10 +92,14 @@ :host([type='slim']) { --_animation-name: none; - --_spacing-right-bottom-app-name: var(--telekom-spacing-unit-x5); + --_spacing-right-bottom-app-name: var( + --telekom-spacing-composition-space-07 + ); } :host([type='slim'][scrolled]) { - --_spacing-right-bottom-app-name: var(--telekom-spacing-unit-x5); + --_spacing-right-bottom-app-name: var( + --telekom-spacing-composition-space-07 + ); } :host([type='slim']), :host([scrolled]) { @@ -110,7 +114,7 @@ --_display-top-app-name: none; --_display-bottom-app-name: block; - --_spacing-left-body: var(--telekom-spacing-unit-x4); + --_spacing-left-body: var(--telekom-spacing-composition-space-06); --scl-telekom-header-height: var(--_height); } :host([scrolled]) { @@ -138,7 +142,9 @@ --_height-logo-svg: 44px; --_height-top-bar: 0; --_height-bottom-bar: 84px; - --_spacing-right-bottom-app-name: var(--telekom-spacing-unit-x12); + --_spacing-right-bottom-app-name: var( + --telekom-spacing-composition-space-14 + ); --_spacing-left-body: 4px; } :host([type='slim'][scrolled]) { @@ -146,7 +152,9 @@ --_height-logo-svg: 40px; --_height-top-bar: 0; --_height-bottom-bar: 72px; - --_spacing-right-bottom-app-name: var(--telekom-spacing-unit-x13); + --_spacing-right-bottom-app-name: var( + --telekom-spacing-composition-space-15 + ); --_spacing-left-body: 0; } } @@ -158,7 +166,9 @@ --_height-logo-svg: 60px; --_height-top-bar: 30px; --_height-bottom-bar: 90px; - --_spacing-right-bottom-app-name: var(--telekom-spacing-unit-x10); + --_spacing-right-bottom-app-name: var( + --telekom-spacing-composition-space-12 + ); --_left-logo: var(--_spacing-x-container); @@ -182,7 +192,9 @@ --_display-bottom-app-name: block; --_spacing-left-body: 24px; - --_spacing-right-bottom-app-name: var(--telekom-spacing-unit-x12); + --_spacing-right-bottom-app-name: var( + --telekom-spacing-composition-space-14 + ); --scl-telekom-header-height: var(--_height); --scl-telekom-header-bottom-spacing: 36px; @@ -200,7 +212,9 @@ --_display-top-app-name: none; --_display-bottom-app-name: block; - --_spacing-right-bottom-app-name: var(--telekom-spacing-unit-x10); + --_spacing-right-bottom-app-name: var( + --telekom-spacing-composition-space-12 + ); --scl-telekom-header-height: var(--_height); } diff --git a/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu.css b/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu.css index 3dcb4940ca..9c4a749d9f 100644 --- a/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu.css +++ b/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu.css @@ -16,11 +16,11 @@ @import url('../../../global/custom-media.css'); .scale-telekom-mega-menu { - --spacing-y: var(--telekom-spacing-unit-x18); + --spacing-y: var(--telekom-spacing-composition-space-18); /* matches grid.css */ - --column-gap: var(--telekom-spacing-unit-x8); + --column-gap: var(--telekom-spacing-composition-space-10); --max-width-container: var(--scl-grid-max-width, 1504px); - --spacing-x: var(--telekom-spacing-unit-x6); + --spacing-x: var(--telekom-spacing-composition-space-08); --grid-template-columns: repeat(16, minmax(0, 1fr)); display: block; @@ -79,10 +79,10 @@ } .scale-telekom-mega-menu :where(li + li) { - margin-top: var(--telekom-spacing-unit-x5); + margin-top: var(--telekom-spacing-composition-space-07); } @media screen and (--lg) { .scale-telekom-mega-menu { - --spacing-x: var(--telekom-spacing-unit-x6); + --spacing-x: var(--telekom-spacing-composition-space-08); } } diff --git a/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/telekom-mobile-flyout-canvas.css b/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/telekom-mobile-flyout-canvas.css index 72fa8edead..79f46fac32 100644 --- a/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/telekom-mobile-flyout-canvas.css +++ b/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/telekom-mobile-flyout-canvas.css @@ -15,8 +15,9 @@ overflow-y: auto; --max-width: 572px; - --spacing: var(--telekom-spacing-unit-x5) var(--telekom-spacing-unit-x4) - var(--telekom-spacing-unit-x12); + --spacing: var(--telekom-spacing-composition-space-07) + var(--telekom-spacing-composition-space-06) + var(--telekom-spacing-composition-space-14); background: var(--telekom-color-background-surface); } @@ -48,7 +49,7 @@ [part~='close-button'] { position: absolute; - right: var(--telekom-spacing-unit-x4); + right: var(--telekom-spacing-composition-space-06); color: var(--telekom-color-text-and-icon-standard); } @@ -62,12 +63,12 @@ [part~='body'], slot[name='row']::slotted(*) { - margin-top: var(--telekom-spacing-unit-x6); + margin-top: var(--telekom-spacing-composition-space-08); } :host([type='subtle']) [part~='body'] { - margin-top: var(--telekom-spacing-unit-x4); + margin-top: var(--telekom-spacing-composition-space-06); } :host([type='subtle']) [part~='meta'] { - margin-top: var(--telekom-spacing-unit-x3); + margin-top: var(--telekom-spacing-composition-space-05); } diff --git a/packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.css b/packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.css index 43432caad3..0e9b3112c0 100644 --- a/packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.css +++ b/packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.css @@ -1,9 +1,9 @@ :host { - --spacing: var(--telekom-spacing-unit-x4); + --spacing: var(--telekom-spacing-composition-space-06); --background: var(--telekom-color-background-surface); --max-width: 572px; - --spacing-close-button: var(--telekom-spacing-unit-x2); + --spacing-close-button: var(--telekom-spacing-composition-space-04); --radius-close-button: var(--telekom-radius-standard); --transition-close-button: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); diff --git a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css index bcf085c0c6..cc8b6a86ec 100644 --- a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css +++ b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css @@ -32,8 +32,8 @@ } .scale-telekom-nav-item { - --_spacing-top-slotted-top: var(--telekom-spacing-unit-x5); - --_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x5); + --_spacing-top-slotted-top: var(--telekom-spacing-composition-space-07); + --_spacing-bottom-slotted-bottom: var(--telekom-spacing-composition-space-07); --_font-size-main-nav: var(--telekom-typography-font-size-body); --focus-outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard); @@ -43,45 +43,61 @@ @media screen and (--md) { .scale-telekom-nav-item { - --_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x5); + --_spacing-bottom-slotted-bottom: var( + --telekom-spacing-composition-space-07 + ); } } @media screen and (--lg) { .scale-telekom-nav-item { - --_spacing-top-slotted-top: var(--telekom-spacing-unit-x3); - --_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x4); + --_spacing-top-slotted-top: var(--telekom-spacing-composition-space-05); + --_spacing-bottom-slotted-bottom: var( + --telekom-spacing-composition-space-06 + ); } [scrolled] .scale-telekom-nav-item { - --_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x6); + --_spacing-bottom-slotted-bottom: var( + --telekom-spacing-composition-space-08 + ); } [type='slim'] .scale-telekom-nav-item, [type='slim'][scrolled] .scale-telekom-nav-item { - --_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x6); + --_spacing-bottom-slotted-bottom: var( + --telekom-spacing-composition-space-08 + ); } } @media screen and (--xl) { .scale-telekom-nav-item { - --_spacing-top-slotted-top: var(--telekom-spacing-unit-x3); - --_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x6); + --_spacing-top-slotted-top: var(--telekom-spacing-composition-space-05); + --_spacing-bottom-slotted-bottom: var( + --telekom-spacing-composition-space-08 + ); } [type='slim'] .scale-telekom-nav-item { --_spacing-bottom-slotted-bottom: calc( - var(--telekom-spacing-unit-x8) - 2px + var(--telekom-spacing-composition-space-10) - 2px ); } } @media screen and (--2xl) { .scale-telekom-nav-item { - --_spacing-top-slotted-top: var(--telekom-spacing-unit-x3); - --_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x8); + --_spacing-top-slotted-top: var(--telekom-spacing-composition-space-05); + --_spacing-bottom-slotted-bottom: var( + --telekom-spacing-composition-space-10 + ); --_font-size-main-nav: var(--telekom-typography-font-size-callout); } [type='slim'] .scale-telekom-nav-item, [type='slim'][scrolled-back] .scale-telekom-nav-item { - --_spacing-bottom-slotted-bottom: calc(var(--telekom-spacing-unit-x9)); + --_spacing-bottom-slotted-bottom: calc( + var(--telekom-spacing-composition-space-11) + ); } [type='slim'][scrolled] .scale-telekom-nav-item { - --_spacing-bottom-slotted-bottom: calc(var(--telekom-spacing-unit-x6)); + --_spacing-bottom-slotted-bottom: calc( + var(--telekom-spacing-composition-space-08) + ); } } @@ -181,7 +197,7 @@ > :where(a, button):hover:after { content: ''; width: 100%; - height: var(--telekom-spacing-unit-x05); + height: var(--telekom-spacing-composition-space-02); background: var(--telekom-color-text-and-icon-primary-hovered); display: block; position: absolute; @@ -222,7 +238,7 @@ > :where(a, button):active:after { content: ''; width: 100%; - height: var(--telekom-spacing-unit-x05); + height: var(--telekom-spacing-composition-space-02); background: var(--telekom-color-text-and-icon-primary-pressed); display: block; position: absolute; @@ -242,7 +258,7 @@ > :where(a, button):after { content: ''; width: 100%; - height: var(--telekom-spacing-unit-x1); + height: var(--telekom-spacing-composition-space-03); background: var(--telekom-color-text-and-icon-primary-standard); display: block; position: absolute; @@ -323,7 +339,7 @@ @media screen and (--lg) { .scale-telekom-nav-list[variant='meta-nav'] { - margin-right: var(--telekom-spacing-unit-x8); + margin-right: var(--telekom-spacing-composition-space-10); } .scale-telekom-nav-list[variant='lang-switcher'] diff --git a/packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.css b/packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.css index 49c8eeb787..89b3951754 100644 --- a/packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.css +++ b/packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.css @@ -27,11 +27,15 @@ --_spacing-x-slotted: var(--_spacing-x-slotted-main-nav, 24px); - --_spacing-x-slotted-meta-nav-external: var(--telekom-spacing-unit-x5); - --_spacing-x-slotted-meta-nav: var(--telekom-spacing-unit-x5); - --_spacing-x-slotted-lang-switcher: var(--telekom-spacing-unit-x2); - --_spacing-x-slotted-main-nav: var(--telekom-spacing-unit-x8); - --_spacing-x-slotted-functions: var(--telekom-spacing-unit-x6); + --_spacing-x-slotted-meta-nav-external: var( + --telekom-spacing-composition-space-07 + ); + --_spacing-x-slotted-meta-nav: var(--telekom-spacing-composition-space-07); + --_spacing-x-slotted-lang-switcher: var( + --telekom-spacing-composition-space-04 + ); + --_spacing-x-slotted-main-nav: var(--telekom-spacing-composition-space-10); + --_spacing-x-slotted-functions: var(--telekom-spacing-composition-space-08); display: flex; align-items: stretch; @@ -47,9 +51,11 @@ @media screen and (--xl) { .scale-telekom-nav-list { - --_spacing-x-slotted-main-nav: var(--telekom-spacing-unit-x12); - --_spacing-x-slotted-meta-nav: var(--telekom-spacing-unit-x5); - --_spacing-x-slotted-meta-nav-external: var(--telekom-spacing-unit-x5); + --_spacing-x-slotted-main-nav: var(--telekom-spacing-composition-space-14); + --_spacing-x-slotted-meta-nav: var(--telekom-spacing-composition-space-07); + --_spacing-x-slotted-meta-nav-external: var( + --telekom-spacing-composition-space-07 + ); } .scale-telekom-nav-list[debug] { @@ -59,7 +65,7 @@ @media screen and (--2xl) { .scale-telekom-nav-list { - --_spacing-x-slotted-main-nav: var(--telekom-spacing-unit-x14); + --_spacing-x-slotted-main-nav: var(--telekom-spacing-composition-space-16); } .scale-telekom-nav-list[debug] { @@ -74,11 +80,11 @@ --_spacing-x-slotted: var(--_spacing-x-slotted-meta-nav); } .scale-telekom-nav-list[variant='lang-switcher'] { - --_spacing-x-slotted: var(--telekom-spacing-unit-x6); + --_spacing-x-slotted: var(--telekom-spacing-composition-space-08); } @media screen and (--lg) { .scale-telekom-nav-list[variant='lang-switcher'] { - --_spacing-x-slotted: var(--telekom-spacing-unit-x2); + --_spacing-x-slotted: var(--telekom-spacing-composition-space-04); } } .scale-telekom-nav-list[variant='main-nav'] { diff --git a/packages/components/src/components/text-field/text-field.css b/packages/components/src/components/text-field/text-field.css index ea16e18be1..ca92dc0461 100644 --- a/packages/components/src/components/text-field/text-field.css +++ b/packages/components/src/components/text-field/text-field.css @@ -13,13 +13,13 @@ scale-text-field { --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); --radius: var(--telekom-radius-standard); - --border: var(--telekom-spacing-unit-x025) solid + --border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard); - --border-error: var(--telekom-spacing-unit-x05) solid + --border-error: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-standard); - --border-success: var(--telekom-spacing-unit-x05) solid + --border-success: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-success-standard); - --border-warning: var(--telekom-spacing-unit-x05) solid + --border-warning: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-warning-standard); --border-color-hover: var(--telekom-color-ui-border-hovered); --border-color-focus: var(--telekom-color-ui-border-hovered); @@ -29,7 +29,7 @@ scale-text-field { --focus-outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard); --height: 44px; - --spacing-x: var(--telekom-spacing-unit-x3); + --spacing-x: var(--telekom-spacing-composition-space-05); --color-disabled: var(--telekom-color-text-and-icon-disabled); --background-disabled: none; --border-color-readonly: var(--telekom-color-ui-border-disabled); @@ -39,7 +39,7 @@ scale-text-field { --font-weight-meta: var(--telekom-line-weight-bold); --font-size-meta: var(--telekom-typography-font-size-small); --line-height-meta: var(--telekom-typography-line-spacing-standard); - --spacing-y-meta: var(--telekom-spacing-unit-x1); + --spacing-y-meta: var(--telekom-spacing-composition-space-03); --color-meta: var(--telekom-color-text-and-icon-standard); --color-meta-error: var(--telekom-color-text-and-icon-functional-danger); @@ -48,11 +48,12 @@ scale-text-field { 18px 32px 4px 12px (subtracting 1px from border) */ - --spacing-control: 1.125rem calc(2rem - var(--telekom-spacing-unit-x025)) - 0.25rem calc(0.75rem - var(--telekom-spacing-unit-x025)); + --spacing-control: 1.125rem + calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem + calc(0.75rem - var(--telekom-spacing-composition-space-01)); --transition-control: var(--transition); --background-control: var(--telekom-color-ui-state-fill-standard); - --margin-bottom-control: var(--telekom-spacing-unit-x1); + --margin-bottom-control: var(--telekom-spacing-composition-space-03); /* counter */ --transition-counter: var(--transition); @@ -108,7 +109,8 @@ scale-text-field { } .text-field--hide-label .text-field__control { - padding: 5px var(--telekom-spacing-unit-x10) 5px calc(var(--spacing-x) - 1px); + padding: 5px var(--telekom-spacing-composition-space-12) 5px + calc(var(--spacing-x) - 1px); } .text-field--hide-label .text-field__label { @@ -187,7 +189,7 @@ scale-text-field { font: var(--telekom-text-style-small-bold); transform: translate( var(--spacing-x), - calc(0.25rem + var(--telekom-spacing-unit-x025)) + calc(0.25rem + var(--telekom-spacing-composition-space-01)) ); } .text-field--variant-danger .text-field__control { diff --git a/packages/components/src/components/textarea/textarea.css b/packages/components/src/components/textarea/textarea.css index e373583b37..73d1ca5db6 100644 --- a/packages/components/src/components/textarea/textarea.css +++ b/packages/components/src/components/textarea/textarea.css @@ -24,9 +24,11 @@ scale-textarea { --background-color-disabled: none; --focus-outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard); - --spacing-x-control: var(--telekom-spacing-unit-x3); - --spacing-bottom-control: var(--telekom-spacing-unit-x3); - --spacing-top-control: calc(1.125rem - var(--telekom-spacing-unit-x025)); + --spacing-x-control: var(--telekom-spacing-composition-space-05); + --spacing-bottom-control: var(--telekom-spacing-composition-space-05); + --spacing-top-control: calc( + 1.125rem - var(--telekom-spacing-composition-space-01) + ); --color-disabled: var(--telekom-color-text-and-icon-disabled); --background-disabled: transparent; --border-color-readonly: transparent; @@ -36,7 +38,7 @@ scale-textarea { --font-weight-meta: var(--telekom-typography-font-weight-bold); --font-size-meta: var(--telekom-typography-font-size-small); --line-height-meta: var(--telekom-typography-line-spacing-standard); - --spacing-y-meta: var(--telekom-spacing-unit-x1); + --spacing-y-meta: var(--telekom-spacing-composition-space-03); --color-meta: var(--telekom-color-text-and-icon-standard); --color-meta-error: var(--telekom-color-text-and-icon-functional-danger); @@ -45,8 +47,8 @@ scale-textarea { 18px 32px 4px 12px (subtracting 1px from border) */ - --spacing-control: 0 calc(2rem - var(--telekom-spacing-unit-x025)) 0.25rem - calc(0.75rem - var(--telekom-spacing-unit-x025)); + --spacing-control: 0 calc(2rem - var(--telekom-spacing-composition-space-01)) + 0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01)); --transition-control: var(--transition); --background-control: var(--telekom-color-ui-state-fill-standard); @@ -150,7 +152,7 @@ scale-textarea { font: var(--telekom-text-style-small-bold); transform: translate( var(--spacing-x-control), - calc(0.25rem + var(--telekom-spacing-unit-x025)) + calc(0.25rem + var(--telekom-spacing-composition-space-01)) ); } .textarea--status-error .textarea__wrapper { diff --git a/packages/components/src/components/toast/toast.css b/packages/components/src/components/toast/toast.css index 251838a65f..37dd513ff5 100644 --- a/packages/components/src/components/toast/toast.css +++ b/packages/components/src/components/toast/toast.css @@ -14,13 +14,13 @@ --radius: var(--telekom-radius-small); --background: var(--scl-color-background-standard); --box-shadow: var(--telekom-shadow-app-bar-top-raised); - --spacing: var(--telekom-spacing-unit-x4); + --spacing: var(--telekom-spacing-composition-space-06); /*header*/ --border-header: 1px solid var(--scl-color-grey-20); --font-size-header: var(--telekom-text-style-heading-4); --font-size-header-small: var(--telekom-typography-font-size-small); /*progress*/ - --height-progress: var(--telekom-spacing-unit-x05); + --height-progress: var(--telekom-spacing-composition-space-02); } .toast { width: var(--width); diff --git a/packages/components/src/components/toggle-button/toggle-button.css b/packages/components/src/components/toggle-button/toggle-button.css index cdf844b5a5..10c46128be 100644 --- a/packages/components/src/components/toggle-button/toggle-button.css +++ b/packages/components/src/components/toggle-button/toggle-button.css @@ -11,13 +11,13 @@ :host { --width: auto; - --spacing-x: var(--telekom-spacing-unit-x6); - --spacing-x-icon-only: var(--telekom-spacing-unit-x2); - --min-height: var(--telekom-spacing-unit-x6); - --height-xs: var(--telekom-spacing-unit-x6); - --height-small: var(--telekom-spacing-unit-x8); - --height-regular: var(--telekom-spacing-unit-x10); - --height-large: var(--telekom-spacing-unit-x12); + --spacing-x: var(--telekom-spacing-composition-space-08); + --spacing-x-icon-only: var(--telekom-spacing-composition-space-04); + --min-height: var(--telekom-spacing-composition-space-08); + --height-xs: var(--telekom-spacing-composition-space-08); + --height-small: var(--telekom-spacing-composition-space-10); + --height-regular: var(--telekom-spacing-composition-space-12); + --height-large: var(--telekom-spacing-composition-space-14); --radius: var(--telekom-radius-small); --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard), @@ -28,8 +28,8 @@ --font-size-large: var(--telekom-typography-font-size-body); --font-size-small: var(--telekom-typography-font-size-caption); --font-size-xs: var(--telekom-typography-font-size-small); - --line-height: var(--telekom-spacing-unit-x2); - --spacing-icon-x: var(--telekom-spacing-unit-x2); + --line-height: var(--telekom-spacing-composition-space-04); + --spacing-icon-x: var(--telekom-spacing-composition-space-04); --vertical-align: middle; --border-color: var(--telekom-color-ui-border-standard); --border-color-disabled: var(--telekom-color-ui-border-disabled); @@ -38,7 +38,7 @@ /* size: small */ --font-size-small: var(--telekom-typography-font-size-small); --line-height-small: var(--telekom-typography-line-spacing-standard); - --min-height-small: var(--telekom-spacing-unit-x8); + --min-height-small: var(--telekom-spacing-composition-space-10); /* variant: primary */ --radius-primary: var(--radius); diff --git a/packages/components/src/components/toggle-group/toggle-group.css b/packages/components/src/components/toggle-group/toggle-group.css index 980c29b920..7f7f69579b 100644 --- a/packages/components/src/components/toggle-group/toggle-group.css +++ b/packages/components/src/components/toggle-group/toggle-group.css @@ -1,8 +1,9 @@ :host { --border-color: var(--telekom-color-ui-border-standard); --border-color-disabled: var(--telekom-color-ui-border-disabled); - --border: var(--telekom-spacing-unit-x025) solid var(--border-color); - --border-disabled: var(--telekom-spacing-unit-x025) solid + --border: var(--telekom-spacing-composition-space-01) solid + var(--border-color); + --border-disabled: var(--telekom-spacing-composition-space-01) solid var(--border-color-disabled); --radius: var(--telekom-radius-standard); } diff --git a/packages/components/src/components/tooltip/tooltip.css b/packages/components/src/components/tooltip/tooltip.css index cc0341871b..5dfbc0b689 100644 --- a/packages/components/src/components/tooltip/tooltip.css +++ b/packages/components/src/components/tooltip/tooltip.css @@ -17,7 +17,8 @@ --font-weight: var(--telekom-typography-font-weight-regular); --font-size: var(--telekom-typography-font-size-body); --line-height: var(--telekom-typography-line-spacing-standard); - --spacing: var(--telekom-spacing-unit-x05) var(--telekom-spacing-unit-x2); + --spacing: var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-04); /* arrow */ --arrow-size: 12px; diff --git a/packages/components/src/global/legacy.css b/packages/components/src/global/legacy.css new file mode 100644 index 0000000000..df62f12707 --- /dev/null +++ b/packages/components/src/global/legacy.css @@ -0,0 +1,72 @@ +:root { + /* Can remove in v4 */ + --telekom-spacing-unit-base: 0.25rem; + --telekom-spacing-unit-x0: calc(var(--telekom-spacing-unit-base) * 0); + --telekom-spacing-unit-x025: calc(var(--telekom-spacing-unit-base) * 0.25); + --telekom-spacing-unit-x05: calc(var(--telekom-spacing-unit-base) * 0.5); + --telekom-spacing-unit-x1: calc(var(--telekom-spacing-unit-base) * 1); + --telekom-spacing-unit-x2: calc(var(--telekom-spacing-unit-base) * 2); + --telekom-spacing-unit-x3: calc(var(--telekom-spacing-unit-base) * 3); + --telekom-spacing-unit-x4: calc(var(--telekom-spacing-unit-base) * 4); + --telekom-spacing-unit-x5: calc(var(--telekom-spacing-unit-base) * 5); + --telekom-spacing-unit-x6: calc(var(--telekom-spacing-unit-base) * 6); + --telekom-spacing-unit-x7: calc(var(--telekom-spacing-unit-base) * 7); + --telekom-spacing-unit-x8: calc(var(--telekom-spacing-unit-base) * 8); + --telekom-spacing-unit-x9: calc(var(--telekom-spacing-unit-base) * 9); + --telekom-spacing-unit-x10: calc(var(--telekom-spacing-unit-base) * 10); + --telekom-spacing-unit-x11: calc(var(--telekom-spacing-unit-base) * 11); + --telekom-spacing-unit-x12: calc(var(--telekom-spacing-unit-base) * 12); + --telekom-spacing-unit-x13: calc(var(--telekom-spacing-unit-base) * 13); + --telekom-spacing-unit-x14: calc(var(--telekom-spacing-unit-base) * 14); + --telekom-spacing-unit-x15: calc(var(--telekom-spacing-unit-base) * 15); + --telekom-spacing-unit-x16: calc(var(--telekom-spacing-unit-base) * 16); + --telekom-spacing-unit-x17: calc(var(--telekom-spacing-unit-base) * 17); + --telekom-spacing-unit-x18: calc(var(--telekom-spacing-unit-base) * 18); + --telekom-spacing-unit-x19: calc(var(--telekom-spacing-unit-base) * 19); + --telekom-spacing-unit-x20: calc(var(--telekom-spacing-unit-base) * 20); +} + +/** + * Upgrade the legacy .scl-font-variant- to use the latest design values. + * @deprecated in v3 + * + * We don't create new classes for all --telekom-text-style tokens yet, because + * we want to figure out how a possible CSS framework would look like first… + */ +.scl-font-variant-body { + font: var(--telekom-text-style-body); +} +.scl-font-variant-body-short { + font: var(--telekom-text-style-body); + line-height: var(--telekom-typography-line-spacing-tight); +} +.scl-font-variant-body-large { + font: var(--telekom-text-style-lead-text); +} +.scl-font-variant-smaller { + font: var(--telekom-text-style-small); +} +.scl-font-variant-label { + font: var(--telekom-text-style-small); +} +.scl-font-variant-caption { + font: var(--telekom-text-style-caption); +} +.scl-font-variant-heading-6 { + font: var(--telekom-text-style-heading-6); +} +.scl-font-variant-heading-5 { + font: var(--telekom-text-style-heading-5); +} +.scl-font-variant-heading-4 { + font: var(--telekom-text-style-heading-4); +} +.scl-font-variant-heading-3 { + font: var(--telekom-text-style-heading-3); +} +.scl-font-variant-heading-2 { + font: var(--telekom-text-style-heading-2); +} +.scl-font-variant-heading-1 { + font: var(--telekom-text-style-heading-1); +} diff --git a/packages/components/src/global/scale.css b/packages/components/src/global/scale.css index 26dac5b2ea..832a49405e 100644 --- a/packages/components/src/global/scale.css +++ b/packages/components/src/global/scale.css @@ -30,6 +30,12 @@ */ @import '~@telekom/design-tokens/dist/telekom/css/telekom-design-tokens.all.css'; +/** + * Legacy stuff kept for backward-compat. + * Could be removed as majors are released. + */ +@import './legacy.css'; + /** * Styles for scale-grid and scale-grid-item are global * because one should be able to use the CSS only, without the custom elements being upgraded. @@ -38,7 +44,7 @@ /** * --telekom tokens have no z-index, by design, so we keep this here for now. - * + * */ :root { --scl-z-index-10: 10; @@ -48,73 +54,18 @@ --scl-z-index-50: 50; --scl-z-index-60: 60; --scl-z-index-70: 70; - /* temporary hard coded values, these will be added to design-tokens package */ - --telekom-color-functional-focus-standard: #2238df; - --telekom-color-functional-focus-inverted: #7d94f9; - --telekom-color-functional-focus-on-light-background: #2238df; - --telekom-color-functional-focus-on-dark-background: #7d94f9; -} - -[data-mode='dark'] { - --telekom-color-functional-focus-standard: #7d94f9; - --telekom-color-functional-focus-inverted: #2238df; } /** Thank you sholace.style */ .scl-toast-stack { position: fixed; - top: var(--telekom-spacing-unit-x4); - inset-inline-end: var(--telekom-spacing-unit-x4); + top: var(--telekom-spacing-composition-space-06); + inset-inline-end: var(--telekom-spacing-composition-space-06); z-index: var(--scl-z-index-70); z-index: 100; /* https://github.com/telekom/scale/pull/1767/files */ max-height: 100%; overflow: visible; display: flex; flex-direction: column; - gap: var(--telekom-spacing-unit-x2); -} - -/** - * Upgrade the legacy .scl-font-variant- to use the latest design values. - * @deprecated in v3 - * - * We don't create new classes for all --telekom-text-style tokens yet, because - * we want to figure out how a possible CSS framework would look like first… - */ -.scl-font-variant-body { - font: var(--telekom-text-style-body); -} -.scl-font-variant-body-short { - font: var(--telekom-text-style-body); - line-height: var(--telekom-typography-line-spacing-tight); -} -.scl-font-variant-body-large { - font: var(--telekom-text-style-lead-text); -} -.scl-font-variant-smaller { - font: var(--telekom-text-style-small); -} -.scl-font-variant-label { - font: var(--telekom-text-style-small); -} -.scl-font-variant-caption { - font: var(--telekom-text-style-caption); -} -.scl-font-variant-heading-6 { - font: var(--telekom-text-style-heading-6); -} -.scl-font-variant-heading-5 { - font: var(--telekom-text-style-heading-5); -} -.scl-font-variant-heading-4 { - font: var(--telekom-text-style-heading-4); -} -.scl-font-variant-heading-3 { - font: var(--telekom-text-style-heading-3); -} -.scl-font-variant-heading-2 { - font: var(--telekom-text-style-heading-2); -} -.scl-font-variant-heading-1 { - font: var(--telekom-text-style-heading-1); + gap: var(--telekom-spacing-composition-space-04); } diff --git a/yarn.lock b/yarn.lock index 02bfe3a5bb..adcb124366 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5768,16 +5768,16 @@ vue-docgen-loader "^1.5.0" webpack "4" +"@telekom/design-tokens@1.0.0-beta.8": + version "1.0.0-beta.8" + resolved "https://registry.yarnpkg.com/@telekom/design-tokens/-/design-tokens-1.0.0-beta.8.tgz#afee8cf9c3a1fafc2fed230ab02a5bb79c7abc97" + integrity sha512-8wVJyKXHjEyv7MZgAIGN0pUvZgI2wK5MGC5QxH/YSUgnp6baxC3iBaoMATfatt1krdBu7TGKwmHEdUOefJhQWA== + "@telekom/design-tokens@^1.0.0-beta.2": version "1.0.0-beta.2" resolved "https://registry.yarnpkg.com/@telekom/design-tokens/-/design-tokens-1.0.0-beta.2.tgz#b3e9eeef05417883315e509fb9a3686a89fa91b0" integrity sha512-FZ8XfT5drDPjpzYhHfJ7JIYumHeNN/C92aJIRILmD4052wNgUU7ormdD2rvTCprvvDFFQXwCDhrl+9kNEgtNLg== -"@telekom/design-tokens@^1.0.0-beta.7": - version "1.0.0-beta.7" - resolved "https://registry.yarnpkg.com/@telekom/design-tokens/-/design-tokens-1.0.0-beta.7.tgz#27ae7d6e96cfb198433fdfa0193bc94af65a802a" - integrity sha512-QwoE/7pcy8P5iLBeiK/VZQ9hcQ54BZPoKMWzKGjMzYeB4e0TKQer0rYHJg+eOO3Kg6B8v4hDVxMZK9KQ2ipvkw== - "@testing-library/jest-dom@^5.8.0": version "5.11.4" resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.11.4.tgz" From 3db8a8fad8f80a7e94831394fb5c37225f0e9562 Mon Sep 17 00:00:00 2001 From: felix-ico <97440128+felix-ico@users.noreply.github.com> Date: Wed, 19 Jul 2023 15:54:47 +0200 Subject: [PATCH 3/8] fix: a11y feedback (#2049) --- .../dropdown-select/dropdown-select.css | 27 +++++++++++++++++ .../dropdown-select/dropdown-select.tsx | 20 +++++++++++-- .../src/components/dropdown-select/readme.md | 30 ++++++++++--------- 3 files changed, 60 insertions(+), 17 deletions(-) diff --git a/packages/components/src/components/dropdown-select/dropdown-select.css b/packages/components/src/components/dropdown-select/dropdown-select.css index 63c2630570..9c3f1bcbdd 100644 --- a/packages/components/src/components/dropdown-select/dropdown-select.css +++ b/packages/components/src/components/dropdown-select/dropdown-select.css @@ -286,3 +286,30 @@ [part~='has-helper-text'] [part~='combobox-container'] { margin-bottom: var(--spacing-x-for-helper-text); } + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.hcm-disabled { + display: none; +} + +@media screen and (forced-colors: active), (-ms-high-contrast: active) { + [part='listbox-pad'] { + outline: var(--focus-outline); + outline-offset: -2px; + border-radius: var(--radius); + } + .hcm-disabled { + display: block; + } +} diff --git a/packages/components/src/components/dropdown-select/dropdown-select.tsx b/packages/components/src/components/dropdown-select/dropdown-select.tsx index a76cef35ae..c412c85358 100644 --- a/packages/components/src/components/dropdown-select/dropdown-select.tsx +++ b/packages/components/src/components/dropdown-select/dropdown-select.tsx @@ -204,6 +204,10 @@ export class DropdownSelect { @Prop() floatingStrategy: 'absolute' | 'fixed' = 'absolute'; /** (optional) to hide the label */ @Prop() hideLabelVisually?: boolean = false; + /** (optional) Screen reader text appended to the selected element */ + @Prop() ariaLabelSelected?: string = 'selected'; + /** (optional) Text displayed in high contrast mode only to indicate disabled state */ + @Prop() hcmLabelDisabled?: string = 'this field is disabled'; @Event({ eventName: 'scale-change' }) scaleChange!: EventEmitter; @Event({ eventName: 'scale-focus' }) scaleFocus!: EventEmitter; @@ -476,9 +480,14 @@ export class DropdownSelect { > {ItemElement} {value === this.value ? ( - +
+ + + {this.ariaLabelSelected} + +
) : null}
) @@ -506,8 +515,13 @@ export class DropdownSelect { )} + + {this.disabled && ( +
{this.hcmLabelDisabled}
+ )} ); diff --git a/packages/components/src/components/dropdown-select/readme.md b/packages/components/src/components/dropdown-select/readme.md index bd257e15dc..68ea780eba 100644 --- a/packages/components/src/components/dropdown-select/readme.md +++ b/packages/components/src/components/dropdown-select/readme.md @@ -7,20 +7,22 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | --------------------- | ---------------------------- | ------------------------------------------------------- | ----------------- | -| `comboboxId` | `combobox-id` | | `string` | `'combobox'` | -| `disabled` | `disabled` | | `boolean` | `undefined` | -| `floatingStrategy` | `floating-strategy` | | `"absolute" \| "fixed"` | `'absolute'` | -| `helperText` | `helper-text` | | `string` | `''` | -| `hideLabelVisually` | `hide-label-visually` | (optional) to hide the label | `boolean` | `false` | -| `invalid` | `invalid` | | `boolean` | `false` | -| `label` | `label` | | `string` | `undefined` | -| `name` | `name` | | `string` | `undefined` | -| `readonly` | `readonly` | | `boolean` | `undefined` | -| `transparent` | `transparent` | | `boolean` | `undefined` | -| `value` | `value` | | `any` | `undefined` | -| `variant` | `variant` | | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` | +| Property | Attribute | Description | Type | Default | +| ------------------- | --------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------- | -------------------------- | +| `ariaLabelSelected` | `aria-label-selected` | (optional) Screen reader text appended to the selected element | `string` | `'selected'` | +| `comboboxId` | `combobox-id` | | `string` | `'combobox'` | +| `disabled` | `disabled` | | `boolean` | `undefined` | +| `floatingStrategy` | `floating-strategy` | | `"absolute" \| "fixed"` | `'absolute'` | +| `hcmLabelDisabled` | `hcm-label-disabled` | (optional) Text displayed in high contrast mode only to indicate disabled state | `string` | `'this field is disabled'` | +| `helperText` | `helper-text` | | `string` | `''` | +| `hideLabelVisually` | `hide-label-visually` | (optional) to hide the label | `boolean` | `false` | +| `invalid` | `invalid` | | `boolean` | `false` | +| `label` | `label` | | `string` | `undefined` | +| `name` | `name` | | `string` | `undefined` | +| `readonly` | `readonly` | | `boolean` | `undefined` | +| `transparent` | `transparent` | | `boolean` | `undefined` | +| `value` | `value` | | `any` | `undefined` | +| `variant` | `variant` | | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` | ## Events From b8aea4b56c822e2b58a4b2622f9e486bd1687efc Mon Sep 17 00:00:00 2001 From: felix-ico <97440128+felix-ico@users.noreply.github.com> Date: Wed, 19 Jul 2023 15:55:26 +0200 Subject: [PATCH 4/8] Fix/a11y feedback (#2053) --- .../src/components/callout/callout.css | 6 +++++ .../components/src/components/modal/modal.tsx | 2 +- .../components/src/components/modal/readme.md | 24 +++++++++---------- .../components/notification/notification.tsx | 16 ++++++++++--- .../src/components/notification/readme.md | 4 +++- .../src/components/slider/slider.css | 6 +++++ .../notification/Notification.stories.mdx | 17 ++++++++++++- .../notification/ScaleNotification.vue | 3 ++- .../components/tooltip/ScaleTooltip.vue | 2 +- .../components/tooltip/Tooltip.stories.mdx | 2 +- 10 files changed, 61 insertions(+), 21 deletions(-) diff --git a/packages/components/src/components/callout/callout.css b/packages/components/src/components/callout/callout.css index 09f85e9a66..898b72856d 100644 --- a/packages/components/src/components/callout/callout.css +++ b/packages/components/src/components/callout/callout.css @@ -32,6 +32,12 @@ font: var(--font-medium); } +@media screen and (forced-colors: active), (-ms-high-contrast: active) { + [part='base'] { + border: 1px solid; + } +} + /* Color variants */ :host([variant='primary']) { diff --git a/packages/components/src/components/modal/modal.tsx b/packages/components/src/components/modal/modal.tsx index 5b7dce851d..33da93c769 100644 --- a/packages/components/src/components/modal/modal.tsx +++ b/packages/components/src/components/modal/modal.tsx @@ -56,7 +56,7 @@ export class Modal { /** (optional) Transition duration */ @Prop() duration?: number = 200; /** (optional) Label for close button */ - @Prop() closeButtonLabel?: string = 'Close Pop-up'; + @Prop() closeButtonLabel?: string = 'Close'; /** (optional) title for close button */ @Prop() closeButtonTitle?: string = 'Close'; /** (optional) hide close button */ diff --git a/packages/components/src/components/modal/readme.md b/packages/components/src/components/modal/readme.md index 444a0c5f74..cd097a555c 100644 --- a/packages/components/src/components/modal/readme.md +++ b/packages/components/src/components/modal/readme.md @@ -5,18 +5,18 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------------------- | ------------------------------- | ---------------------------------------------------------------------------------- | ------------------- | ---------------- | -| `alignActions` | `align-actions` | (optional) Alignment of action buttons | `"left" \| "right"` | `'right'` | -| `allowInjectingStyleToBody` | `allow-injecting-style-to-body` | (optional) allow to inject css style {overflow: hidden} to body when modal is open | `boolean` | `false` | -| `closeButtonLabel` | `close-button-label` | (optional) Label for close button | `string` | `'Close Pop-up'` | -| `closeButtonTitle` | `close-button-title` | (optional) title for close button | `string` | `'Close'` | -| `duration` | `duration` | (optional) Transition duration | `number` | `200` | -| `heading` | `heading` | Modal heading | `string` | `undefined` | -| `omitCloseButton` | `omit-close-button` | (optional) hide close button | `boolean` | `false` | -| `opened` | `opened` | (optional) If `true`, the Modal is open. | `boolean` | `false` | -| `size` | `size` | (optional) Modal size | `string` | `'default'` | -| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| --------------------------- | ------------------------------- | ---------------------------------------------------------------------------------- | ------------------- | ----------- | +| `alignActions` | `align-actions` | (optional) Alignment of action buttons | `"left" \| "right"` | `'right'` | +| `allowInjectingStyleToBody` | `allow-injecting-style-to-body` | (optional) allow to inject css style {overflow: hidden} to body when modal is open | `boolean` | `false` | +| `closeButtonLabel` | `close-button-label` | (optional) Label for close button | `string` | `'Close'` | +| `closeButtonTitle` | `close-button-title` | (optional) title for close button | `string` | `'Close'` | +| `duration` | `duration` | (optional) Transition duration | `number` | `200` | +| `heading` | `heading` | Modal heading | `string` | `undefined` | +| `omitCloseButton` | `omit-close-button` | (optional) hide close button | `boolean` | `false` | +| `opened` | `opened` | (optional) If `true`, the Modal is open. | `boolean` | `false` | +| `size` | `size` | (optional) Modal size | `string` | `'default'` | +| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | ## Events diff --git a/packages/components/src/components/notification/notification.tsx b/packages/components/src/components/notification/notification.tsx index 4eb135aa69..494975595d 100644 --- a/packages/components/src/components/notification/notification.tsx +++ b/packages/components/src/components/notification/notification.tsx @@ -62,9 +62,13 @@ export class Notification { /** (optional) `aria-live` of element */ @Prop() innerAriaLive?: string = 'assertive'; /** (optional) Label for close button */ - @Prop() closeButtonLabel?: string = 'Close Pop-up'; + @Prop() closeButtonLabel?: string = 'Close'; /** (optional) `title` for close button */ @Prop() closeButtonTitle?: string = 'Close'; + /** Default aria-level for heading */ + @Prop() headingLevel: number = 2; + /** (optional) string prepended to the heading */ + @Prop() ariaHeading?: string = 'Information'; /** (optional) Injected styles */ @Prop() styles?: string; @@ -149,7 +153,6 @@ export class Notification { render() { const IconTag = iconVariantNameMap[this.variant]; - return ( {this.styles && } @@ -170,7 +173,14 @@ export class Notification {
-
{this.heading}
+
+ {this.heading} +
{this.hasTextSlot && (
diff --git a/packages/components/src/components/notification/readme.md b/packages/components/src/components/notification/readme.md index 6b1327df11..c887f7a336 100644 --- a/packages/components/src/components/notification/readme.md +++ b/packages/components/src/components/notification/readme.md @@ -9,11 +9,13 @@ | Property | Attribute | Description | Type | Default | | ------------------ | -------------------- | --------------------------------------------------------- | ------------------------------------------------------- | ----------------- | -| `closeButtonLabel` | `close-button-label` | (optional) Label for close button | `string` | `'Close Pop-up'` | +| `ariaHeading` | `aria-heading` | (optional) string prepended to the heading | `string` | `'Information'` | +| `closeButtonLabel` | `close-button-label` | (optional) Label for close button | `string` | `'Close'` | | `closeButtonTitle` | `close-button-title` | (optional) `title` for close button | `string` | `'Close'` | | `delay` | `delay` | (optional) Time in milliseconds until it closes by itself | `number` | `undefined` | | `dismissible` | `dismissible` | (optional) Show the close button | `boolean` | `false` | | `heading` | `heading` | Heading | `string` | `undefined` | +| `headingLevel` | `heading-level` | Default aria-level for heading | `number` | `2` | | `innerAriaLive` | `inner-aria-live` | (optional) `aria-live` of element | `string` | `'assertive'` | | `opened` | `opened` | (optional) Visible | `boolean` | `undefined` | | `styles` | `styles` | (optional) Injected styles | `string` | `undefined` | diff --git a/packages/components/src/components/slider/slider.css b/packages/components/src/components/slider/slider.css index 17c4e8be0a..db02571317 100644 --- a/packages/components/src/components/slider/slider.css +++ b/packages/components/src/components/slider/slider.css @@ -137,6 +137,12 @@ border-radius: var(--telekom-radius-circle); } +@media screen and (forced-colors: active), (-ms-high-contrast: active) { + [part='step-mark'] { + border: 2px solid; + } +} + [part='meta'] { display: flex; justify-content: space-between; diff --git a/packages/storybook-vue/stories/components/notification/Notification.stories.mdx b/packages/storybook-vue/stories/components/notification/Notification.stories.mdx index b0bbe42973..ed8b58d8d3 100644 --- a/packages/storybook-vue/stories/components/notification/Notification.stories.mdx +++ b/packages/storybook-vue/stories/components/notification/Notification.stories.mdx @@ -51,6 +51,17 @@ import ScaleNotification from './ScaleNotification.vue'; type: 'text' } }, + headingLevel: { + control: { + type: 'number' + } + }, + ariaHeading: { + defaultValue: 'Information', + control: { + type: 'text' + } + }, closeButtonLabel: { control: { type: 'text' @@ -95,6 +106,7 @@ export const Template = (args, context) => ({ :variant="variant" :opened="opened" :dismissible="dismissible" + :aria-heading="ariaHeading" :delay="delay" :inner-aria-live="innerAriaLive" :close-button-label="closeButtonLabel" @@ -211,7 +223,8 @@ export const Template = (args, context) => ({ heading: 'Warning toast headline', type: 'toast', variant: 'warning', - text: 'Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.' + text: 'Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.', + ariaHeading: 'Warning' }}> {Template.bind({})} @@ -372,6 +385,7 @@ In order to "toast" a notification, append it to a div with the `.scl-toast-stac heading: 'Danger notification with icon and title', variant: 'danger', dismissible: false, + ariaHeading: 'Danger' }}> {Template.bind({})} @@ -392,6 +406,7 @@ In order to "toast" a notification, append it to a div with the `.scl-toast-stac heading: 'Warning notification with icon and title', variant: 'warning', dismissible: false, + ariaHeading: 'Warning' }}> {Template.bind({})} diff --git a/packages/storybook-vue/stories/components/notification/ScaleNotification.vue b/packages/storybook-vue/stories/components/notification/ScaleNotification.vue index 16f8ffe189..40b36ba336 100644 --- a/packages/storybook-vue/stories/components/notification/ScaleNotification.vue +++ b/packages/storybook-vue/stories/components/notification/ScaleNotification.vue @@ -16,7 +16,8 @@ export default { innerAriaLive: { type: String }, closeButtonLabel: { type: String }, closeButtonTitle: { type: String }, - styles: { type: String } + styles: { type: String }, + ariaHeading: { type: String } }, render() { return this.$slots.default diff --git a/packages/storybook-vue/stories/components/tooltip/ScaleTooltip.vue b/packages/storybook-vue/stories/components/tooltip/ScaleTooltip.vue index ad6fe996a5..38182953db 100644 --- a/packages/storybook-vue/stories/components/tooltip/ScaleTooltip.vue +++ b/packages/storybook-vue/stories/components/tooltip/ScaleTooltip.vue @@ -10,7 +10,7 @@ :flip="flip" > - Hover me + Hover me
diff --git a/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx b/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx index d9ff1cc963..af8e59dc98 100644 --- a/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx +++ b/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx @@ -254,6 +254,6 @@ export const FocusTemplate = (args, { argTypes }) => ({ ```html - Hover me + Hover me ``` From 537f932215578f866115a2599bb0c31d425bb04f Mon Sep 17 00:00:00 2001 From: felix-ico <97440128+felix-ico@users.noreply.github.com> Date: Wed, 19 Jul 2023 15:55:53 +0200 Subject: [PATCH 5/8] fix: avoid additional render (#2057) Co-authored-by: felixw --- .../storybook-vue/.storybook/sidebar-links-addon/register.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/storybook-vue/.storybook/sidebar-links-addon/register.js b/packages/storybook-vue/.storybook/sidebar-links-addon/register.js index 050523749e..4da383017d 100644 --- a/packages/storybook-vue/.storybook/sidebar-links-addon/register.js +++ b/packages/storybook-vue/.storybook/sidebar-links-addon/register.js @@ -53,7 +53,9 @@ addons.register('@telekom/scale-sidebar-links-addon', (api) => { if (!locale) { return; } - + if (!sidebarLinksContainer) { + return + } if (sidebarLinksContainer) { sidebarLinksContainer.remove(); } From 5125c54076308f87ae901ec0afb930a3c15686d3 Mon Sep 17 00:00:00 2001 From: felix-ico <97440128+felix-ico@users.noreply.github.com> Date: Fri, 21 Jul 2023 17:03:14 +0200 Subject: [PATCH 6/8] Fix/design tokens alignment (#2066) * fix: update tokens * docs: update css var snippets --- .../src/components/checkbox/checkbox.css | 2 +- .../components/collapsible/collapsible.css | 8 +-- .../components/date-picker/date-picker.css | 18 ++++--- .../accordion/Accordion.stories.mdx | 16 +++--- .../breadcrumb/Breadcrumb.stories.mdx | 6 +-- .../components/button/Button.stories.mdx | 28 +++++------ .../components/callout/Callout.stories.mdx | 6 +-- .../stories/components/card/Card.stories.mdx | 2 +- .../checkbox-group/CheckboxGroup.stories.mdx | 6 +-- .../components/checkbox/Checkbox.stories.mdx | 16 +++--- .../stories/components/chip/Chip.stories.mdx | 3 +- .../date-picker/DatePicker.stories.mdx | 4 +- .../components/divider/Divider.stories.mdx | 7 +-- .../DropdownSelect.stories.mdx | 23 +++++---- .../components/dropdown/DropDown.stories.mdx | 20 ++++---- .../flyout-menu/MenuFlyout.stories.mdx | 5 ++ .../stories/components/link/Link.stories.mdx | 2 +- .../stories/components/list/List.stories.mdx | 13 +++-- .../LoadingSpinner.stories.mdx | 26 ++++++++++ .../components/modal/Modal.stories.mdx | 31 ++++++------ .../NotificationBadge.stories.mdx | 28 +++++++++++ .../notification/Notification.stories.mdx | 16 ++++-- .../pagination/Pagination.stories.mdx | 27 ++++++++++ .../progress-bar/ProgressBar.stories.mdx | 2 +- .../RadioButtonGroup.stories.mdx | 46 ++++++++++-------- .../rating-stars/RatingStars.stories.mdx | 2 +- .../SegmentedButton.stories.mdx | 45 +++++++++++++++++ .../sidebar-navigation/SidebarNav.stories.mdx | 4 +- .../components/slider/Slider.stories.mdx | 4 +- .../components/switch/switch.stories.mdx | 4 +- .../tab-navigation/TabNav.stories.mdx | 10 ++-- .../components/table/Table.stories.mdx | 16 +++--- .../stories/components/tag/Tag.stories.mdx | 16 +++--- .../TelekomBrandHeader.stories.mdx | 2 +- .../components/text-area/TextArea.stories.mdx | 18 ++++--- .../text-field/TextField.stories.mdx | 19 ++++---- .../components/tooltip/Tooltip.stories.mdx | 29 +++++++++++ ...ec-js-date-picker-dark-standard-1-snap.png | Bin 24233 -> 24182 bytes ...c-js-date-picker-light-standard-1-snap.png | Bin 28250 -> 26331 bytes 39 files changed, 363 insertions(+), 167 deletions(-) diff --git a/packages/components/src/components/checkbox/checkbox.css b/packages/components/src/components/checkbox/checkbox.css index bd0e6f1b00..d8c2a22624 100644 --- a/packages/components/src/components/checkbox/checkbox.css +++ b/packages/components/src/components/checkbox/checkbox.css @@ -34,7 +34,7 @@ scale-checkbox { --spacing-control: var(--telekom-spacing-composition-space-02); --spacing-left-control: var(--telekom-spacing-composition-space-03); --radius-control: var(--telekom-radius-small); - --border-width-control: var(--telekom-spacing-composition-space-01); + --border-width-control: var(--telekom-line-weight-standard); /*helper-text*/ --transition-helper-text: var(--transition); diff --git a/packages/components/src/components/collapsible/collapsible.css b/packages/components/src/components/collapsible/collapsible.css index 552c77ecc9..352b125ddb 100644 --- a/packages/components/src/components/collapsible/collapsible.css +++ b/packages/components/src/components/collapsible/collapsible.css @@ -13,9 +13,7 @@ --spacing-y: var(--telekom-spacing-composition-space-06); /* button */ - --font-size-button: var(--telekom-typography-font-size-callout); - --font-weight-button: var(--telekom-typography-font-weight-extra-bold); - --line-height-button: var(--telekom-typography-line-spacing-standard); + --font: var(--telekom-text-style-heading-5); --border-width-button: var(--telekom-spacing-composition-space-02); --radius-button: var(--telekom-radius-small); --spacing-left-button: 0; @@ -67,9 +65,7 @@ padding-right: 0; padding-bottom: 0; background-color: transparent; - font-size: var(--font-size-button); - font-weight: var(--font-weight-button); - line-height: var(--line-height-button); + font: var(--font); border-width: var(--border-width-button); border-radius: var(--radius-button); padding-left: var(--spacing-left-button); diff --git a/packages/components/src/components/date-picker/date-picker.css b/packages/components/src/components/date-picker/date-picker.css index 24acf31a2a..70707602fa 100644 --- a/packages/components/src/components/date-picker/date-picker.css +++ b/packages/components/src/components/date-picker/date-picker.css @@ -141,7 +141,7 @@ duet-date-picker .duet-date__toggle:active scale-icon-content-calendar { var(--telekom-motion-easing-standard); pointer-events: none; font: var(--telekom-text-style-ui); - transform: translate(0.75rem, 0.875rem); + transform: translate(var(--telekom-spacing-composition-space-05), 0.875rem); } duet-date-picker .duet-date__input::placeholder { @@ -152,8 +152,9 @@ duet-date-picker .duet-date__input::placeholder { } duet-date-picker .duet-date__header { - margin-top: 8px; - margin-bottom: 8px; + margin-top: var(--telekom-spacing-composition-space-04); + margin-bottom: var(--telekom-spacing-composition-space-04); + font: var(--telekom-text-style-ui); } duet-date-picker .duet-date__select { @@ -200,11 +201,11 @@ duet-date-picker .duet-date__table { .scale-date-picker--status-error duet-date-picker .duet-date__input { margin-top: -1px; margin-bottom: -1px; - border: var(--telekom-spacing-composition-space-02) solid + border: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-danger-standard); } .scale-date-picker--status-error duet-date-picker .duet-date__input:hover { - border: var(--telekom-spacing-composition-space-02) solid + border: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-danger-hovered); } .scale-date-picker--status-error duet-date-picker .duet-date__input:focus { @@ -259,9 +260,12 @@ duet-date-picker .duet-date__table { duet-date-picker .duet-date__dialog-content { border: none; - box-shadow: var(--telekom-shadow-top); + box-shadow: var(--telekom-shadow-raised-standard); max-width: 324px; - padding: var(--telekom-spacing-composition-space-04); + padding: var(--telekom-spacing-composition-space-06) + var(--telekom-spacing-composition-space-04) + var(--telekom-spacing-composition-space-04) + var(--telekom-spacing-composition-space-04); margin-top: var(--telekom-spacing-composition-space-03); } diff --git a/packages/storybook-vue/stories/components/accordion/Accordion.stories.mdx b/packages/storybook-vue/stories/components/accordion/Accordion.stories.mdx index 59d578d261..c4b9da4e97 100644 --- a/packages/storybook-vue/stories/components/accordion/Accordion.stories.mdx +++ b/packages/storybook-vue/stories/components/accordion/Accordion.stories.mdx @@ -107,16 +107,14 @@ export const Template = (args, { argTypes }) => ({ ```css /* scale-collapsible */ :host { - --spacing-y: var(--telekom-spacing-unit-x4); + --spacing-y: var(--telekom-spacing-composition-space-06); /* button */ - --font-size-button: var(--telekom-typography-font-size-callout); - --font-weight-button: var(--telekom-typography-font-weight-extra-bold); - --line-height-button: var(--telekom-typography-line-spacing-standard); - --border-width-button: var(--telekom-spacing-unit-x05); + --font: var(--telekom-text-style-heading-5); + --border-width-button: var(--telekom-spacing-composition-space-02); --radius-button: var(--telekom-radius-small); --spacing-left-button: 0; - --spacing-left-button-text: var(--telekom-spacing-unit-x2); + --spacing-left-button-text: var(--telekom-spacing-composition-space-04); --color-button-hover: var(--telekom-color-text-and-icon-primary-hovered); --color-button-active: var(--telekom-color-text-and-icon-primary-pressed); --background-button-hover: none; @@ -124,10 +122,10 @@ export const Template = (args, { argTypes }) => ({ var(--telekom-color-functional-focus-standard); /* content */ - --spacing-right-content: var(--telekom-spacing-unit-x12); + --spacing-right-content: var(--telekom-spacing-composition-space-14); --spacing-left-content: 34px; - --spacing-top-content: var(--telekom-spacing-unit-x4); - --spacing-bottom-content: var(--telekom-spacing-unit-x6); + --spacing-top-content: var(--telekom-spacing-composition-space-06); + --spacing-bottom-content: var(--telekom-spacing-composition-space-08); } ``` diff --git a/packages/storybook-vue/stories/components/breadcrumb/Breadcrumb.stories.mdx b/packages/storybook-vue/stories/components/breadcrumb/Breadcrumb.stories.mdx index 56768d5bc9..9acb346740 100644 --- a/packages/storybook-vue/stories/components/breadcrumb/Breadcrumb.stories.mdx +++ b/packages/storybook-vue/stories/components/breadcrumb/Breadcrumb.stories.mdx @@ -75,14 +75,14 @@ export const Template = (args, { argTypes }) => ({ ```css :host { - --spacing-left: calc(-1 * var(--telekom-spacing-unit-x2)); + --spacing-left: calc(-1 * var(--telekom-spacing-composition-space-04)); --font-size-list-item: var(--telekom-typography-font-size-caption); --color-separator: var(--telekom-color-text-and-icon-additional); - --spacing-y-item: var(--telekom-spacing-unit-x1); - --spacing-x-item: var(--telekom-spacing-unit-x2); + --spacing-y-item: var(--telekom-spacing-composition-space-03); + --spacing-x-item: var(--telekom-spacing-composition-space-04); --color-link: var(--telekom-color-text-and-icon-additional); --radius-link: var(--telekom-radius-standard); diff --git a/packages/storybook-vue/stories/components/button/Button.stories.mdx b/packages/storybook-vue/stories/components/button/Button.stories.mdx index 4c494045c7..540c46e216 100644 --- a/packages/storybook-vue/stories/components/button/Button.stories.mdx +++ b/packages/storybook-vue/stories/components/button/Button.stories.mdx @@ -111,11 +111,11 @@ export const Template = (args, { argTypes }) => ({ ```css :host { --width: auto; - --spacing-x-right: var(--telekom-spacing-unit-x5); - --spacing-x-left: var(--telekom-spacing-unit-x5); - --spacing-x-icon-only: var(--telekom-spacing-unit-x3); - --min-height: var(--telekom-spacing-unit-x11); - --min-width: var(--telekom-spacing-unit-x11); + --spacing-x-right: var(--telekom-spacing-composition-space-07); + --spacing-x-left: var(--telekom-spacing-composition-space-07); + --spacing-x-icon-only: var(--telekom-spacing-composition-space-05); + --min-height: var(--telekom-spacing-composition-space-13); + --min-width: var(--telekom-spacing-composition-space-13); --radius: var(--telekom-radius-standard); --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); @@ -123,17 +123,17 @@ export const Template = (args, { argTypes }) => ({ --font-weight: var(--telekom-typography-font-weight-bold); --font-size: var(--telekom-typography-font-size-body); --line-height: var(--telekom-typography-line-spacing-tight); - --spacing-icon-x: var(--telekom-spacing-unit-x2); + --spacing-icon-x: var(--telekom-spacing-composition-space-04); --vertical-align: middle; /* size: small */ --font-size-small: var(--telekom-typography-font-size-caption); --line-height-small: 1.125rem; - --min-height-small: var(--telekom-spacing-unit-x8); - --spacing-x-right-small: var(--telekom-spacing-unit-x4); - --spacing-x-left-small: var(--telekom-spacing-unit-x4); - --spacing-x-icon-only-small: var(--telekom-spacing-unit-x0); - --spacing-icon-x-small: var(--telekom-spacing-unit-x1); + --min-height-small: var(--telekom-spacing-composition-space-10); + --spacing-x-right-small: var(--telekom-spacing-composition-space-06); + --spacing-x-left-small: var(--telekom-spacing-composition-space-06); + --spacing-x-icon-only-small: var(--telekom-spacing-composition-space-00); + --spacing-icon-x-small: var(--telekom-spacing-composition-space-03); /* variant: primary */ --radius-primary: var(--radius); @@ -146,7 +146,7 @@ export const Template = (args, { argTypes }) => ({ /* variant: secondary */ --radius-secondary: var(--radius); - --border-width-secondary: var(--telekom-spacing-unit-x025); + --border-width-secondary: var(--telekom-spacing-composition-space-01); --background-secondary: transparent; --color-secondary: var(--telekom-color-text-and-icon-standard); --color-secondary-hover: var(--telekom-color-text-and-icon-standard); @@ -174,8 +174,8 @@ export const Template = (args, { argTypes }) => ({ /* variant: ghost */ --radius-ghost: var(--radius); - --border-width-ghost: var(--telekom-spacing-unit-x025); - --spacing-x-ghost: var(--telekom-spacing-unit-x2); + --border-width-ghost: var(--telekom-spacing-composition-space-01); + --spacing-x-ghost: var(--telekom-spacing-composition-space-04); --color-ghost: var(--telekom-color-text-and-icon-primary-standard); --color-ghost-hover: var(--telekom-color-text-and-icon-primary-hovered); --color-ghost-active: var(--telekom-color-text-and-icon-primary-pressed); diff --git a/packages/storybook-vue/stories/components/callout/Callout.stories.mdx b/packages/storybook-vue/stories/components/callout/Callout.stories.mdx index e7a4af9d44..f1d6087d14 100644 --- a/packages/storybook-vue/stories/components/callout/Callout.stories.mdx +++ b/packages/storybook-vue/stories/components/callout/Callout.stories.mdx @@ -109,12 +109,12 @@ export const CANVAS_HEIGHT = 204 --position: absolute; --background: var(--telekom-color-ui-extra-strong); --color: var(--telekom-color-text-and-icon-inverted-standard); - --spacing: var(--telekom-spacing-unit-x8); + --spacing: var(--telekom-spacing-composition-space-10); --min-width: 6rem; - --aspect-ratio: 1; + --aspect-ratio: 1 / 1; --rotation: 0deg; - --font-standard: var(--telekom-text-style-body-bold); --font-small: var(--telekom-text-style-body-bold); + --font-medium: var(--telekom-text-style-body-bold); --font-large: var(--telekom-text-style-heading-1); } ``` diff --git a/packages/storybook-vue/stories/components/card/Card.stories.mdx b/packages/storybook-vue/stories/components/card/Card.stories.mdx index ac93ae713f..b402763dc7 100644 --- a/packages/storybook-vue/stories/components/card/Card.stories.mdx +++ b/packages/storybook-vue/stories/components/card/Card.stories.mdx @@ -116,7 +116,7 @@ export const Template = (args, { argTypes }) => ({ var(--telekom-color-functional-focus-standard); --box-shadow-active: var(--telekom-shadow-raised-pressed); - --spacing-body: var(--telekom-spacing-unit-x6); + --spacing-body: var(--telekom-spacing-composition-space-08); --spacing-body-slotted: 0; --spacing-body-slotted-interactive: 0; diff --git a/packages/storybook-vue/stories/components/checkbox-group/CheckboxGroup.stories.mdx b/packages/storybook-vue/stories/components/checkbox-group/CheckboxGroup.stories.mdx index 3664b6f876..3633e88920 100644 --- a/packages/storybook-vue/stories/components/checkbox-group/CheckboxGroup.stories.mdx +++ b/packages/storybook-vue/stories/components/checkbox-group/CheckboxGroup.stories.mdx @@ -48,13 +48,13 @@ import ScaleCheckboxGroup from './ScaleCheckboxGroup.vue'; ```css :host { /* checkbox-group container */ - --spacing-left-container: var(--telekom-spacing-unit-x8); + --spacing-left-container: var(--telekom-spacing-composition-space-10); /* checkbox-group checkbox */ - --spacing-left-checkbox: var(--telekom-spacing-unit-x2); + --spacing-left-checkbox: var(--telekom-spacing-composition-space-04); /* slotted item */ - --spacing-top-slotted-item: var(--telekom-spacing-unit-x3); + --spacing-top-slotted-item: var(--telekom-spacing-composition-space-05); } ``` diff --git a/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx b/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx index 504443b681..915a66902d 100644 --- a/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx +++ b/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx @@ -67,7 +67,7 @@ export const Template = (args, { argTypes }) => ({ ```css scale-checkbox { - --spacing-x: var(--telekom-spacing-unit-x2); + --spacing-x: var(--telekom-spacing-composition-space-04); --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); --color-text: var(--telekom-color-text-and-icon-standard); @@ -82,13 +82,13 @@ scale-checkbox { --color-primary-active: var(--telekom-color-text-and-icon-standard); /*control*/ - --width-control: var(--telekom-spacing-unit-x5); - --height-control: var(--telekom-spacing-unit-x5); + --width-control: var(--telekom-spacing-composition-space-07); + --height-control: var(--telekom-spacing-composition-space-07); --transition-control: var(--transition); - --spacing-control: var(--telekom-spacing-unit-x05); - --spacing-left-control: var(--telekom-spacing-unit-x1); + --spacing-control: var(--telekom-spacing-composition-space-02); + --spacing-left-control: var(--telekom-spacing-composition-space-03); --radius-control: var(--telekom-radius-small); - --border-width-control: var(--telekom-spacing-unit-x025); + --border-width-control: var(--telekom-line-weight-standard); /*helper-text*/ --transition-helper-text: var(--transition); @@ -108,8 +108,8 @@ scale-checkbox { --color-icon-checked-active: var( --telekom-color-text-and-icon-white-standard ); - --width-icon: var(--telekom-spacing-unit-x4); - --height-icon: var(--telekom-spacing-unit-x4); + --width-icon: var(--telekom-spacing-composition-space-06); + --height-icon: var(--telekom-spacing-composition-space-06); --stroke-width: var(--stroke-width-checkbox, 0.5px); } ``` diff --git a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx index 42d701f385..291abd2233 100644 --- a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx +++ b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx @@ -144,7 +144,8 @@ export const TemplateInteractive = (args, { argTypes }) => ({ ```css :host { - --height: 34px; + --height: 32px; + --font-size: var(--telekom-typography-font-size-body); --line-height: var(--telekom-typography-line-spacing-standard); --font-weight: var(--telekom-typography-font-weight-bold); diff --git a/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx b/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx index cac5209869..d43cb7f1b9 100644 --- a/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx +++ b/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx @@ -243,9 +243,9 @@ duet-date-picker { --duet-z-index: 600; --duet-z-index-toggle: 2; - --spacing-x: var(--telekom-spacing-unit-x3); + --spacing-x: var(--telekom-spacing-composition-space-05); - --spacing-heading: 0 0 var(--telekom-spacing-unit-x4) 0; + --spacing-heading: 0 0 var(--telekom-spacing-composition-space-06) 0; --font-size-heading: var(--telekom-typography-font-size-body); --radius-day: var(--telekom-radius-standard); --font-size-day: var(--telekom-typography-font-size-body); diff --git a/packages/storybook-vue/stories/components/divider/Divider.stories.mdx b/packages/storybook-vue/stories/components/divider/Divider.stories.mdx index e39f8fbf4d..5c654d4eac 100644 --- a/packages/storybook-vue/stories/components/divider/Divider.stories.mdx +++ b/packages/storybook-vue/stories/components/divider/Divider.stories.mdx @@ -51,10 +51,11 @@ export const Template = (args, { argTypes }) => ({ :host { --width: 100%; --height: 100%; - --spacing: var(--telekom-spacing-unit-x3); + --spacing: var(--telekom-spacing-composition-space-05); --color: var(--telekom-color-ui-faint); - --border-width: var(--telekom-spacing-unit-x025); - --min-height-vertical: var(--telekom-spacing-unit-x6); + --border-width: var(--telekom-spacing-composition-space-01); + --min-height-vertical: var(--telekom-spacing-composition-space-08); +} ``` For Shadow Parts, please inspect the element's #shadow. diff --git a/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx b/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx index 1c9fd8ef14..4ff2c6733f 100644 --- a/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx +++ b/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx @@ -84,34 +84,39 @@ export const Template = (args, { argTypes }) => ({ ```css :host { --font-weight: var(--telekom-typography-font-weight-bold); - --height: var(--telekom-spacing-unit-x11); + --height: var(--telekom-spacing-composition-space-13); --color: var(--telekom-color-text-and-icon-standard); --color-disabled: var(--telekom-color-text-and-icon-disabled); --background-disabled: none; --background-hover: var(--telekom-color-ui-state-fill-hovered); - --border: var(--telekom-spacing-unit-x025) solid + --border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard); --border-color-hover: var(--telekom-color-ui-border-hovered); --border-color-focus: var(--telekom-color-ui-border-hovered); --border-color-disabled: var(--telekom-color-ui-border-disabled); - --border-invalid: var(--telekom-spacing-unit-x05) solid + --border-invalid: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-hovered); --focus-outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard); - --spacing-x: var(--telekom-spacing-unit-x3); + --spacing-x: var(--telekom-spacing-composition-space-05); --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); --radius: var(--telekom-radius-standard); - --spacing-x-for-helper-text: var(--telekom-spacing-unit-x1); + --spacing-x-for-helper-text: var(--telekom-spacing-composition-space-03); /*combobox*/ --transition-combobox: var(--transition); --background-combobox: var(--telekom-color-ui-state-fill-standard); - --spacing-combobox: 1.125rem calc(2rem - var(--telekom-spacing-unit-x025)) - 0.25rem calc(0.75rem - var(--telekom-spacing-unit-x025)); + /* + 18px 32px 4px 12px + (subtracting 1px from border) + */ + --spacing-combobox: 1.125rem + calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem + calc(0.75rem - var(--telekom-spacing-composition-space-01)); /*meta*/ - --spacing-y-meta: var(--telekom-spacing-unit-x1); + --spacing-y-meta: var(--telekom-spacing-composition-space-03); --color-meta: var(--telekom-color-text-and-icon-standard); /*icon*/ @@ -128,7 +133,7 @@ export const Template = (args, { argTypes }) => ({ --transform-label: translate(var(--spacing-x), 0.875rem); --transform-label-animated: translate( var(--spacing-x), - calc(0.25rem + var(--telekom-spacing-unit-x025)) + calc(0.25rem + var(--telekom-spacing-composition-space-01)) ); /*listbox*/ diff --git a/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx b/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx index 21bb9e20d9..e8a48b3bc9 100644 --- a/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx +++ b/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx @@ -95,20 +95,20 @@ export const Template = (args, { argTypes }) => ({ ```css :host { --font-weight: var(--telekom-typography-font-weight-bold); - --height: var(--telekom-spacing-unit-x11); - --spacing-x: var(--telekom-spacing-unit-x3); - --spacing-dropdown: 18px var(--telekom-spacing-unit-x10) 5px + --height: var(--telekom-spacing-composition-space-13); + --spacing-x: var(--telekom-spacing-composition-space-05); + --spacing-dropdown: 18px var(--telekom-spacing-composition-space-12) 5px calc(var(--spacing-x) - 1px); --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); --radius: var(--telekom-radius-standard); - --border: var(--telekom-spacing-unit-x025) solid + --border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard); - --border-danger: var(--telekom-spacing-unit-x05) solid + --border-danger: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-standard); - --border-success: var(--telekom-spacing-unit-x05) solid + --border-success: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-success-standard); - --border-warning: var(--telekom-spacing-unit-x05) solid + --border-warning: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-warning-standard); --border-color-hover: var(--telekom-color-ui-border-hovered); --border-color-focus: var(--telekom-color-ui-border-hovered); @@ -119,18 +119,18 @@ export const Template = (args, { argTypes }) => ({ --background-disabled: none; --color: var(--telekom-color-text-and-icon-standard); --background-color: var(--telekom-color-ui-state-fill-standard); - --margin-bottom-helper-text: var(--telekom-spacing-unit-x1); + --margin-bottom-helper-text: var(--telekom-spacing-composition-space-03); /*input*/ --transition-input: var(--transition); --font-size-input: var(--telekom-typography-font-size-body); /*meta*/ - --spacing-y-meta: var(--telekom-spacing-unit-x1); + --spacing-y-meta: var(--telekom-spacing-composition-space-03); --color-meta: var(--telekom-color-text-and-icon-standard); /*icon*/ - --height-icon: var(--telekom-spacing-unit-x5); + --height-icon: var(--telekom-spacing-composition-space-07); --color-icon: var(--telekom-color-text-and-icon-standard); --color-icon-hover: var(--telekom-color-text-and-icon-standard); --color-icon-active: var(--telekom-color-text-and-icon-standard); diff --git a/packages/storybook-vue/stories/components/flyout-menu/MenuFlyout.stories.mdx b/packages/storybook-vue/stories/components/flyout-menu/MenuFlyout.stories.mdx index 84d737d3cc..aa21675fc8 100644 --- a/packages/storybook-vue/stories/components/flyout-menu/MenuFlyout.stories.mdx +++ b/packages/storybook-vue/stories/components/flyout-menu/MenuFlyout.stories.mdx @@ -105,6 +105,11 @@ import ScaleMenuFlyout from './ScaleMenuFlyout.vue'; --spacing-x-list: 0; } +:host(menu-flyout-item) { + --focus-outline: var(--telekom-line-weight-highlight) solid + var(--telekom-color-functional-focus-standard); +} + /* menu-flyout-divider */ :host(scale-menu-flyout-divider) { --color: var(--telekom-color-ui-faint); diff --git a/packages/storybook-vue/stories/components/link/Link.stories.mdx b/packages/storybook-vue/stories/components/link/Link.stories.mdx index ac81703294..dc26dddc58 100644 --- a/packages/storybook-vue/stories/components/link/Link.stories.mdx +++ b/packages/storybook-vue/stories/components/link/Link.stories.mdx @@ -124,7 +124,7 @@ export const Template = (args, { argTypes }) => ({ ```css :host { --font-weight: ; - --spacing-x-icon: var(--telekom-spacing-unit-x1); + --spacing-x-icon: var(--telekom-spacing-composition-space-03); --line-offset: 0.0625em; /* initial */ diff --git a/packages/storybook-vue/stories/components/list/List.stories.mdx b/packages/storybook-vue/stories/components/list/List.stories.mdx index 25b0d84dd8..97c3d65712 100644 --- a/packages/storybook-vue/stories/components/list/List.stories.mdx +++ b/packages/storybook-vue/stories/components/list/List.stories.mdx @@ -105,7 +105,7 @@ export const TemplateCustomIcon = (args) => ({ ```css :host { --spacing-left: 0; - --spacing-left-nested: var(--telekom-spacing-unit-x2); + --spacing-left-nested: var(--telekom-spacing-composition-space-04); } /* scale-list-item */ @@ -113,8 +113,10 @@ export const TemplateCustomIcon = (args) => ({ --display: block; --font-size: var(--telekom-typography-font-size-body); --line-height: var(--telekom-typography-line-spacing-standard); - --spacing-left: calc(0.5ch + var(--telekom-spacing-unit-x5)); - --spacing-left-nested: calc(0.5ch + var(--telekom-spacing-unit-x4)); + --spacing-left: calc(0.5ch + var(--telekom-spacing-composition-space-07)); + --spacing-left-nested: calc( + 0.5ch + var(--telekom-spacing-composition-space-06) + ); --font-marker-ordered: var(--telekom-text-style-body); --font-marker-ordered-nested: var(--telekom-text-style-small-bold); @@ -122,10 +124,11 @@ export const TemplateCustomIcon = (args) => ({ --telekom-typography-line-spacing-standard ); --spacing-top-marker-ordered-nested: calc( - var(--telekom-spacing-unit-x4) - var(--telekom-spacing-unit-x3) + var(--telekom-spacing-composition-space-06) - + var(--telekom-spacing-composition-space-05) ); - --spacing-right-no-marker: var(--telekom-spacing-unit-x2); + --spacing-right-no-marker: var(--telekom-spacing-composition-space-04); } ``` diff --git a/packages/storybook-vue/stories/components/loading-spinner/LoadingSpinner.stories.mdx b/packages/storybook-vue/stories/components/loading-spinner/LoadingSpinner.stories.mdx index e5d871b8e6..ef90e8bff5 100644 --- a/packages/storybook-vue/stories/components/loading-spinner/LoadingSpinner.stories.mdx +++ b/packages/storybook-vue/stories/components/loading-spinner/LoadingSpinner.stories.mdx @@ -85,6 +85,32 @@ export const Template = () => ({ ``` +### Scoped CSS variables + +```css +:host { + --size-outer-small: 24px; + --size-outer-large: 48px; + --size-inner-small: 24px; + --size-inner-large: 48px; + + --line-height-size-small: 24px; + --line-height-size-large: 48px; + + --font: var(--telekom-text-style-ui-bold); + + --color-circle-primary: var(--telekom-color-primary-standard); + --color-circle-primary-inner: var(--telekom-color-ui-subtle); + --color-text-primary: var(--telekom-color-text-and-icon-additional); + --color-circle-white: var(--telekom-color-ui-base); + --color-circle-white-inner: var(--telekom-color-ui-regular); + --color-text-white: var(--telekom-color-text-and-icon-white-standard); + + --spacing-vertical: var(--telekom-spacing-composition-space-05); + --spacing-horizontal: var(--telekom-spacing-composition-space-06); +} +``` + ## Small Size & Vertical Text (Primary) diff --git a/packages/storybook-vue/stories/components/modal/Modal.stories.mdx b/packages/storybook-vue/stories/components/modal/Modal.stories.mdx index 5ac016bf81..277ab75439 100644 --- a/packages/storybook-vue/stories/components/modal/Modal.stories.mdx +++ b/packages/storybook-vue/stories/components/modal/Modal.stories.mdx @@ -169,13 +169,15 @@ export const Template = (args, context) => ({ ```css :host { - --spacing-x: var(--telekom-spacing-unit-x4); + --spacing-x: var(--telekom-spacing-composition-space-06); --background-overlay: var( --telekom-color-background-backdrop, rgba(108, 108, 108, 0.7) ); - --max-height-window: calc(100vh - (2 * var(--telekom-spacing-unit-x20))); + --max-height-window: calc( + 100vh - (2 * var(--telekom-spacing-composition-space-19)) + ); --min-height-window: ; /* undefined by design */ --radius-window: var(--telekom-radius-large); --box-shadow-window: var(--telekom-shadow-top); @@ -191,19 +193,19 @@ export const Template = (args, context) => ({ */ --size-window-small: calc( (6 * var(--telekom-spacing-unit-x14, 3.5rem)) + - (5 * var(--telekom-spacing-unit-x8)) + (5 * var(--telekom-spacing-composition-space-10)) ); --size-window-default: calc( (8 * var(--telekom-spacing-unit-x14, 3.5rem)) + - (7 * var(--telekom-spacing-unit-x8)) + (7 * var(--telekom-spacing-composition-space-10)) ); --size-window-large: calc( (12 * var(--telekom-spacing-unit-x14, 3.5rem)) + - (11 * var(--telekom-spacing-unit-x8)) + (11 * var(--telekom-spacing-composition-space-10)) ); - --spacing-x-header: var(--telekom-spacing-unit-x6); - --spacing-y-header: var(--telekom-spacing-unit-x6); + --spacing-x-header: var(--telekom-spacing-composition-space-08); + --spacing-y-header: var(--telekom-spacing-composition-space-08); --border-bottom-header-has-scroll: var(--telekom-line-weight-standard) solid var(--telekom-color-ui-subtle); @@ -212,7 +214,7 @@ export const Template = (args, context) => ({ --font-size-heading: var(--telekom-typography-font-size-callout); --font-weight-heading: var(--telekom-typography-font-weight-extra-bold); - --spacing-close-button: var(--telekom-spacing-unit-x2); + --spacing-close-button: var(--telekom-spacing-composition-space-04); --radius-close-button: var(--telekom-radius-standard); --transition-close-button: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); @@ -222,16 +224,17 @@ export const Template = (args, context) => ({ --color-close-button-hover: var(--telekom-color-primary-hovered); --color-close-button-active: var(--telekom-color-primary-pressed); - --spacing-x-body-wrapper: var(--telekom-spacing-unit-x6); - --spacing-y-body: var(--telekom-spacing-unit-x6); + --spacing-x-body-wrapper: var(--telekom-spacing-composition-space-08); + --spacing-y-body: var(--telekom-spacing-composition-space-08); - --spacing-actions: var(--telekom-spacing-unit-x4) - var(--telekom-spacing-unit-x6) var(--telekom-spacing-unit-x6); + --spacing-actions: var(--telekom-spacing-composition-space-06) + var(--telekom-spacing-composition-space-08) + var(--telekom-spacing-composition-space-08); - --spacing-x-actions-slotted: var(--telekom-spacing-unit-x2); + --spacing-x-actions-slotted: var(--telekom-spacing-composition-space-04); --background-actions-has-scroll: var( --telekom-color-background-surface-subtle - ); + ); } ``` diff --git a/packages/storybook-vue/stories/components/notification-badge/NotificationBadge.stories.mdx b/packages/storybook-vue/stories/components/notification-badge/NotificationBadge.stories.mdx index 6043509f0f..927bb7b9a7 100644 --- a/packages/storybook-vue/stories/components/notification-badge/NotificationBadge.stories.mdx +++ b/packages/storybook-vue/stories/components/notification-badge/NotificationBadge.stories.mdx @@ -87,6 +87,34 @@ export const TextTemplate = (args, { argTypes }) => ({ ``` +### Scoped CSS variables + +```css +:host { + /*after-badge-slot*/ + --padding-type-text-after-badge-slot: 0 0 0 12px; + --padding-type-icon-after-badge-slot: 0 0 0 7px; + + /*notification-badge circle*/ + --background-color-circle: var(--telekom-color-primary-standard); + --color-circle: var(--telekom-color-text-and-icon-inverted-standard); + --font-size-circle: var(--telekom-typography-font-size-badge); + --font-weight-circle: bold; + --border-radius-circle: var(--telekom-radius-circle); + + /*border*/ + --color-notification-badge-border-focus: var( + --telekom-color-functional-focus-standard + ); + --color-notification-badge-border-hover: var( + --telekom-color-text-and-icon-primary-hovered + ); + --line-width-notification-badge-border-focus: 2px; + --padding-notification-badge-border: 8px 5px 0 5px; + --margin-notification-badge-border: -8px -5px 0 -5px; +} +``` + ## Badge without Label ### Icon diff --git a/packages/storybook-vue/stories/components/notification/Notification.stories.mdx b/packages/storybook-vue/stories/components/notification/Notification.stories.mdx index ed8b58d8d3..d733a6ff1a 100644 --- a/packages/storybook-vue/stories/components/notification/Notification.stories.mdx +++ b/packages/storybook-vue/stories/components/notification/Notification.stories.mdx @@ -169,11 +169,19 @@ export const Template = (args, context) => ({ ```css :host { --width: 100%; + --width-toast: 25rem; --radius: var(--telekom-radius-standard); - --spacing-y: var(--telekom-spacing-unit-x4); - --spacing-y-inner: var(--telekom-spacing-unit-x2); - --spacing-x-aside: var(--telekom-spacing-unit-x12); - --spacing-outer-toast: var(--telekom-spacing-unit-x4); + --spacing-y: var(--telekom-spacing-composition-space-06); + --spacing-y-inner: var(--telekom-spacing-composition-space-04); + --spacing-x-aside: var(--telekom-spacing-composition-space-14); + + --duration-in: var(--telekom-motion-duration-transition); + --duration-out: var(--telekom-motion-duration-transition); + --easing-in: var(--telekom-motion-easing-enter); + --easing-out: var(--telekom-motion-easing-exit); + --translate-x: 0; + --translate-y: 0; + --translate-z: 0; } ``` diff --git a/packages/storybook-vue/stories/components/pagination/Pagination.stories.mdx b/packages/storybook-vue/stories/components/pagination/Pagination.stories.mdx index 299a4a627b..259598b831 100644 --- a/packages/storybook-vue/stories/components/pagination/Pagination.stories.mdx +++ b/packages/storybook-vue/stories/components/pagination/Pagination.stories.mdx @@ -177,6 +177,33 @@ export const TemplateEmbedded = (args, { argTypes }) => ({ > ``` +### Scoped CSS variables + +```css +:host { + --color: var(--telekom-color-text-and-icon-standard); + --radius: var(--telekom-radius-standard); + --font-size: var(--telekom-typography-font-size-small); + --border: 1px solid var(--telekom-color-ui-faint); + --color-hover: var(--telekom-color-text-and-icon-primary-hovered); + --color-active: var(--telekom-color-text-and-icon-primary-pressed); + --color-button: var(--telekom-color-ui-subtle); + --border-button: var(--border); + --focus-outline: var(--telekom-line-weight-highlight) solid + var(--telekom-color-functional-focus-standard); + --radius-first-prompt: var(--radius) 0 0 var(--radius); + --radius-last-prompt: 0 var(--radius) var(--radius) 0; + --radius-first-prompt-stack: 0 0 0 var(--radius); + --radius-last-prompt-stack: 0 0 var(--radius) 0; + --stroke-svg: var(--telekom-color-ui-extra-strong); + --stroke-svg-high-contrast: #fff; + --width-button: 44px; + --padding-info: var(--telekom-spacing-composition-space-04); + --height-button: 44px; + --line-height-info: calc(var(--height-button) - 2px); +} +``` + ## Hidden Borders diff --git a/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx b/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx index bba81e493a..26e5d4b641 100644 --- a/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx +++ b/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx @@ -169,7 +169,7 @@ export const TemplateCustomColor = (args, { argTypes }) => ({ --color-disabled: var(--telekom-color-text-and-icon-disabled); --progress-bar-outer-size: 6px; - --progress-bar-inner-size: var(--telekom-spacing-unit-x1); + --progress-bar-inner-size: var(--telekom-spacing-composition-space-03); --font-label: var(--telekom-text-style-ui); --color-label: var(--telekom-color-text-and-icon-standard); diff --git a/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx b/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx index a67db3b535..2909e317da 100644 --- a/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx +++ b/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx @@ -103,8 +103,8 @@ export const Template = (args, context) => ({ --color-helper-text: var( --telekom-color-text-and-icon-functional-informational ); - --padding-bottom-helper-text: var(--telekom-spacing-unit-x2); - --margin-top-helper-text: var(--telekom-spacing-unit-x1); + --padding-bottom-helper-text: var(--telekom-spacing-composition-space-04); + --margin-top-helper-text: var(--telekom-spacing-composition-space-03); --font-size-helper-text: var(--telekom-typography-font-size-small); --font-weight-helper-text: var(--telekom-typography-font-weight-bold); @@ -113,8 +113,10 @@ export const Template = (args, context) => ({ --color-error-helper-text: var( --telekom-color-text-and-icon-functional-danger ); - --padding-bottom-error-helper-text: var(--telekom-spacing-unit-x2); - --margin-top-error-helper-text: var(--telekom-spacing-unit-x1); + --padding-bottom-error-helper-text: var( + --telekom-spacing-composition-space-04 + ); + --margin-top-error-helper-text: var(--telekom-spacing-composition-space-03); --font-weight-error-helper-text: var(--telekom-typography-font-weight-medium); --color-error-helper-text-hcm: var( --telekom-color-text-and-icon-white-standard @@ -124,11 +126,11 @@ export const Template = (args, context) => ({ /*title*/ --font-size-title: var(--font-size-label); --font-weight-title: var(--telekom-typography-font-weight-medium); - --padding-bottom-title: var(--telekom-spacing-unit-x1); - --margin-left-title: var(--telekom-spacing-unit-x05); + --padding-bottom-title: var(--telekom-spacing-composition-space-03); + --margin-left-title: var(--telekom-spacing-composition-space-02); /*slotted items*/ - --margin-top-slotted-item: var(--telekom-spacing-unit-x3); + --margin-top-slotted-item: var(--telekom-spacing-composition-space-05); } scale-radio-button { @@ -152,9 +154,9 @@ scale-radio-button { --telekom-color-text-and-icon-functional-informational ); --spacing-left-helper-text: calc( - var(--width-control) + var(--telekom-spacing-unit-x2) + var(--width-control) + var(--telekom-spacing-composition-space-04) ); - --spacing-top-helper-text: var(--telekom-spacing-unit-x1); + --spacing-top-helper-text: var(--telekom-spacing-composition-space-03); --color-helper-text-error: var( --telekom-color-text-and-icon-functional-danger ); @@ -164,26 +166,30 @@ scale-radio-button { --color-label: var(--color-text); /*control*/ - --width-control: var(--telekom-spacing-unit-x5); - --height-control: var(--telekom-spacing-unit-x5); + --width-control: var(--telekom-spacing-composition-space-07); + --height-control: var(--telekom-spacing-composition-space-07); --transition-control: var(--transition); - --spacing-control: 0 var(--telekom-spacing-unit-x2) 0 0; + --spacing-control: 0 var(--telekom-spacing-composition-space-04) 0 0; --background-color-control: var(--telekom-color-ui-base); - --border-control: var(--telekom-spacing-unit-x025) solid + --border-control: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard); --line-height-helper-text: var(--telekom-typography-line-spacing-standard); - --border-control-checked: calc(0.25 * var(--telekom-spacing-unit-x3)) solid - var(--telekom-color-background-canvas); - --border-control-checked-disabled: calc(0.5 * var(--telekom-spacing-unit-x3)) + --border-control-checked: calc( + 0.25 * var(--telekom-spacing-composition-space-05) + ) + solid var(--telekom-color-background-canvas); + --border-control-checked-disabled: calc( + 0.5 * var(--telekom-spacing-composition-space-05) + ) solid var(--telekom-color-ui-border-disabled); --background-control-checked-disabled: none; - --border-control-active: var(--telekom-spacing-unit-x2) solid + --border-control-active: var(--telekom-spacing-composition-space-04) solid var(--telekom-color-primary-pressed); - --border-control-disabled: 0 0 0 var(--telekom-spacing-unit-x025) + --border-control-disabled: 0 0 0 var(--telekom-spacing-composition-space-01) var(--telekom-color-ui-border-disabled); - --border-control-error: var(--telekom-spacing-unit-x05) solid + --border-control-error: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-standard); - --box-shadow-control-focus: 0 0 0 var(--telekom-spacing-unit-x1) + --box-shadow-control-focus: 0 0 0 var(--telekom-spacing-composition-space-03) var(--color-focus); } ``` diff --git a/packages/storybook-vue/stories/components/rating-stars/RatingStars.stories.mdx b/packages/storybook-vue/stories/components/rating-stars/RatingStars.stories.mdx index aa52d8cc81..a877b5aff5 100644 --- a/packages/storybook-vue/stories/components/rating-stars/RatingStars.stories.mdx +++ b/packages/storybook-vue/stories/components/rating-stars/RatingStars.stories.mdx @@ -178,7 +178,7 @@ export const Template = (args, { argTypes }) => ({ --stars-placeholder-color: var(--telekom-color-ui-border-standard); --stars-placeholder-hover-color: var(--telekom-color-ui-border-hovered); --stars-disabled-color: var(--telekom-color-text-and-icon-disabled); - --stars-spacing: var(--telekom-spacing-unit-x05); + --stars-spacing: var(--telekom-spacing-composition-space-02); --stars-transition: color var(--telekom-motion-duration-immediate); --stars-size: 24px; --label-font: var(--telekom-text-style-ui); diff --git a/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx b/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx index e72e213cae..6e52838578 100644 --- a/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx +++ b/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx @@ -206,6 +206,51 @@ export const InvalidTemplate = (args, { argTypes }) => ({ ``` +### Scoped CSS variables + +```css +:host { + --background-color: var(--telekom-color-ui-faint); + --radius: var(--telekom-radius-standard); + --height: 32px; + + /* medium styles */ + --height-medium: 40px; + + /* large styles */ + --height-large: 44px; +} + +:host(scale-segmented) { + /* not selected */ + --background-color-selected: var(--telekom-color-ui-base); + --button-radius: 6px; + --padding-top-bottom: var(--telekom-spacing-composition-space-03); + --height: 28px; + --font: var(--telekom-text-style-caption-bold); + --label-disabled: var(--telekom-color-text-and-icon-disabled); + --transition: all var(--telekom-motion-duration-transition) + var(--telekom-motion-easing-standard); + --color: var(--telekom-color-text-and-icon-standard); + + --color-selected: var(--telekom-color-text-and-icon-primary-standard); + + /* medium styles */ + --font-medium: var(--telekom-text-style-ui-bold); + --height-medium: 36px; + + /* large styles */ + --font-large: var(--telekom-text-style-ui-bold); + --height-large: 40px; + + /* hover styles */ + --background-color-hover: var(--telekom-color-ui-state-fill-hovered); + + /* active styles */ + --background-color-active: var(--telekom-color-ui-state-fill-pressed); +} +``` + ## Multi Select diff --git a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx b/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx index da2f0a83cd..56b197d87a 100644 --- a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx +++ b/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx @@ -158,8 +158,8 @@ export const Template = (args, { argTypes }) => ({ /* sidebar-nav */ :host { --max-width: 15rem; - --spacing-indent: var(--telekom-spacing-unit-x6); - --spacing-collapsible: var(--telekom-spacing-unit-x4); + --spacing-indent: var(--telekom-spacing-composition-space-08); + --spacing-collapsible: var(--telekom-spacing-composition-space-06); --opacity-chevron: 0; --left-current-border: 0; diff --git a/packages/storybook-vue/stories/components/slider/Slider.stories.mdx b/packages/storybook-vue/stories/components/slider/Slider.stories.mdx index d634b4456e..fc3a3dbc2e 100644 --- a/packages/storybook-vue/stories/components/slider/Slider.stories.mdx +++ b/packages/storybook-vue/stories/components/slider/Slider.stories.mdx @@ -92,8 +92,8 @@ export const Template = (args, { argTypes }) => ({ --height-track: 6px; --background-track: var(--telekom-color-ui-faint); --radius-track: var(--telekom-radius-pill); - --spacing-track: var(--telekom-spacing-unit-x5) 0 - var(--telekom-spacing-unit-x4); + --spacing-track: var(--telekom-spacing-composition-space-07) 0 + var(--telekom-spacing-composition-space-06); --spacing-x-inner-track: 10px; --background-bar: var(--telekom-color-primary-standard); --radius-thumb: var(--telekom-radius-circle); diff --git a/packages/storybook-vue/stories/components/switch/switch.stories.mdx b/packages/storybook-vue/stories/components/switch/switch.stories.mdx index c433561b12..1e5bebfefa 100644 --- a/packages/storybook-vue/stories/components/switch/switch.stories.mdx +++ b/packages/storybook-vue/stories/components/switch/switch.stories.mdx @@ -70,10 +70,10 @@ export const Template = (args, { argTypes }) => ({ --transition-easing: var(--telekom-motion-easing-standard); --shadow-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.24), 0 2px 4px 0 rgba(0, 0, 0, 0.24), 0 4px 12px 0 rgba(0, 0, 0, 0.26); - --spacing-x-label: var(--telekom-spacing-unit-x2); + --spacing-x-label: var(--telekom-spacing-composition-space-04); --font-label: var(--telekom-text-style-ui); --font-io-text: var(--telekom-text-style-small-bold); - --color-label: var(--telekom-color-text-and-icon-standard); + --color-label: var(--telekom-color-text-and-icon-standard); } ``` diff --git a/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx b/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx index c4b6caac03..af0fca6517 100644 --- a/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx +++ b/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx @@ -99,8 +99,8 @@ export const Template = (args, { argTypes }) => ({ ```css :host { --tab-height: 3rem; - --tab-spacing-horizontal: var(--telekom-spacing-unit-x3); - --tab-spacing-vertical: var(--telekom-spacing-unit-x4); + --tab-spacing-horizontal: var(--telekom-spacing-composition-space-05); + --tab-spacing-vertical: var(--telekom-spacing-composition-space-06); --tab-radius: var(--telekom-radius-small); --tab-border-size: var(--telekom-line-weight-standard); --tab-border-size-selected: var(--telekom-line-weight-highlight); @@ -110,7 +110,7 @@ export const Template = (args, { argTypes }) => ({ --tab-height-large: 3.25rem; - --tab-spacing-horizontal-large: var(--telekom-spacing-unit-x4); + --tab-spacing-horizontal-large: var(--telekom-spacing-composition-space-06); --tab-spacing-vertical-large: 0.875rem; } @@ -123,7 +123,7 @@ export const Template = (args, { argTypes }) => ({ --color-selected: var(--telekom-color-text-and-icon-primary-standard); --focus-outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard); - --spacing-right-slotted: var(--telekom-spacing-unit-x2); + --spacing-right-slotted: var(--telekom-spacing-composition-space-04); --color-disabled: var(--telekom-color-text-and-icon-disabled); --radius: var(--telekom-radius-standard); --font-size-large: var(--telekom-typography-font-size-callout); @@ -131,7 +131,7 @@ export const Template = (args, { argTypes }) => ({ /* tab-panel */ :host { - --spacing-top: var(--telekom-spacing-unit-x6); + --spacing-top: var(--telekom-spacing-composition-space-08); } ``` diff --git a/packages/storybook-vue/stories/components/table/Table.stories.mdx b/packages/storybook-vue/stories/components/table/Table.stories.mdx index 2d9c5bf8d8..dc72ef02e6 100644 --- a/packages/storybook-vue/stories/components/table/Table.stories.mdx +++ b/packages/storybook-vue/stories/components/table/Table.stories.mdx @@ -238,23 +238,25 @@ scale-table { --font-size: var(--telekom-typography-font-size-small); --font-weight: var(--telekom-typography-font-weight-bold); - --spacing-tbody-td: var(--telekom-spacing-unit-x4) - var(--telekom-spacing-unit-x2); - --border-bottom-tbody-td: var(--telekom-spacing-unit-x025) solid + --spacing-tbody-td: var(--telekom-spacing-composition-space-06) + var(--telekom-spacing-composition-space-04); + --border-bottom-tbody-td: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-faint); --background-tbody: var(--telekom-color-ui-state-fill-standard); --background-tbody-tr-hover: var(--telekom-color-ui-state-fill-hovered); --background-tfoot: var(--telekom-color-ui-state-fill-standard); - --border-bottom-tfoot-td: var(--telekom-spacing-unit-x025) solid + --border-bottom-tfoot-td: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-extra-strong); - --spacing-th-sortable: 0 var(--telekom-spacing-unit-x2) 0 0; + --spacing-th-sortable: 0 var(--telekom-spacing-composition-space-04) 0 0; --background-th-sortable-hover: var(--telekom-color-ui-subtle); --background-th-sortable-active: var(--telekom-color-ui-faint); - --box-shadow-th-sortable-focus: inset 0 0 0 var(--telekom-spacing-unit-x05) + --box-shadow-th-sortable-focus: inset 0 0 0 + var(--telekom-spacing-composition-space-02) var(--telekom-color-functional-focus-standard); --background-tr-striped: var(--telekom-color-ui-subtle); - --padding: var(--telekom-spacing-unit-x0) var(--telekom-spacing-unit-x2); + --padding: var(--telekom-spacing-composition-space-00) + var(--telekom-spacing-composition-space-04); } ``` diff --git a/packages/storybook-vue/stories/components/tag/Tag.stories.mdx b/packages/storybook-vue/stories/components/tag/Tag.stories.mdx index 1e04493e3d..272cd1b6d4 100644 --- a/packages/storybook-vue/stories/components/tag/Tag.stories.mdx +++ b/packages/storybook-vue/stories/components/tag/Tag.stories.mdx @@ -171,12 +171,14 @@ export const TemplateInteractive = (args, { argTypes }) => ({ --background-disabled: var(--telekom-color-ui-faint); --color-disabled: var(--telekom-color-text-and-icon-disabled); - --spacing-dismissable: var(--telekom-spacing-unit-x05) - var(--telekom-spacing-unit-x05) var(--telekom-spacing-unit-x05) - var(--telekom-spacing-unit-x1); - --spacing-dismissable-small: var(--telekom-spacing-unit-x05) - var(--telekom-spacing-unit-x05) var(--telekom-spacing-unit-x05) - var(--telekom-spacing-unit-x1); + --spacing-dismissable: var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-03); + --spacing-dismissable-small: var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-03); --height: 24px; --height-small: 20px; @@ -201,7 +203,7 @@ export const TemplateInteractive = (args, { argTypes }) => ({ --height-button-dismissable-small: 16px; --width-button-dismissable-small: 16px; - --spacing-small: 0 var(--telekom-spacing-unit-x2); + --spacing-small: 0 var(--telekom-spacing-composition-space-04); --font-size-small: var(--telekom-typography-font-size-small); --line-height-small: var(--telekom-typography-line-spacing-loose); } diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx index 07741016a4..5611b86cf9 100644 --- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx +++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx @@ -145,7 +145,7 @@ scale-telekom-nav-list { scale-telekom-nav-item { --focus-outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard); - --color: var(--telekom-color-text-and-icon-standard); + --color: var(--telekom-color-text-and-icon-standard); } ``` diff --git a/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx b/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx index 03c16a99d6..64637c058e 100644 --- a/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx +++ b/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx @@ -103,9 +103,11 @@ scale-textarea { --background-color-disabled: none; --focus-outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard); - --spacing-x-control: var(--telekom-spacing-unit-x3); - --spacing-bottom-control: var(--telekom-spacing-unit-x3); - --spacing-top-control: calc(1.125rem - var(--telekom-spacing-unit-x025)); + --spacing-x-control: var(--telekom-spacing-composition-space-05); + --spacing-bottom-control: var(--telekom-spacing-composition-space-05); + --spacing-top-control: calc( + 1.125rem - var(--telekom-spacing-composition-space-01) + ); --color-disabled: var(--telekom-color-text-and-icon-disabled); --background-disabled: transparent; --border-color-readonly: transparent; @@ -115,13 +117,17 @@ scale-textarea { --font-weight-meta: var(--telekom-typography-font-weight-bold); --font-size-meta: var(--telekom-typography-font-size-small); --line-height-meta: var(--telekom-typography-line-spacing-standard); - --spacing-y-meta: var(--telekom-spacing-unit-x1); + --spacing-y-meta: var(--telekom-spacing-composition-space-03); --color-meta: var(--telekom-color-text-and-icon-standard); --color-meta-error: var(--telekom-color-text-and-icon-functional-danger); /*control*/ - --spacing-control: 0 calc(2rem - var(--telekom-spacing-unit-x025)) 0.25rem - calc(0.75rem - var(--telekom-spacing-unit-x025)); + /* + 18px 32px 4px 12px + (subtracting 1px from border) + */ + --spacing-control: 0 calc(2rem - var(--telekom-spacing-composition-space-01)) + 0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01)); --transition-control: var(--transition); --background-control: var(--telekom-color-ui-state-fill-standard); diff --git a/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx b/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx index 25cd57bb4b..a989a68f21 100644 --- a/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx +++ b/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx @@ -187,13 +187,13 @@ scale-text-field { --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); --radius: var(--telekom-radius-standard); - --border: var(--telekom-spacing-unit-x025) solid + --border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard); - --border-error: var(--telekom-spacing-unit-x05) solid + --border-error: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-standard); - --border-success: var(--telekom-spacing-unit-x05) solid + --border-success: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-success-standard); - --border-warning: var(--telekom-spacing-unit-x05) solid + --border-warning: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-warning-standard); --border-color-hover: var(--telekom-color-ui-border-hovered); --border-color-focus: var(--telekom-color-ui-border-hovered); @@ -203,7 +203,7 @@ scale-text-field { --focus-outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard); --height: 44px; - --spacing-x: var(--telekom-spacing-unit-x3); + --spacing-x: var(--telekom-spacing-composition-space-05); --color-disabled: var(--telekom-color-text-and-icon-disabled); --background-disabled: none; --border-color-readonly: var(--telekom-color-ui-border-disabled); @@ -213,16 +213,17 @@ scale-text-field { --font-weight-meta: var(--telekom-line-weight-bold); --font-size-meta: var(--telekom-typography-font-size-small); --line-height-meta: var(--telekom-typography-line-spacing-standard); - --spacing-y-meta: var(--telekom-spacing-unit-x1); + --spacing-y-meta: var(--telekom-spacing-composition-space-03); --color-meta: var(--telekom-color-text-and-icon-standard); --color-meta-error: var(--telekom-color-text-and-icon-functional-danger); /* control */ - --spacing-control: 1.125rem calc(2rem - var(--telekom-spacing-unit-x025)) - 0.25rem calc(0.75rem - var(--telekom-spacing-unit-x025)); + --spacing-control: 1.125rem + calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem + calc(0.75rem - var(--telekom-spacing-composition-space-01)); --transition-control: var(--transition); --background-control: var(--telekom-color-ui-state-fill-standard); - --margin-bottom-control: var(--telekom-spacing-unit-x1); + --margin-bottom-control: var(--telekom-spacing-composition-space-03); /* counter */ --transition-counter: var(--transition); diff --git a/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx b/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx index af8e59dc98..cec4808025 100644 --- a/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx +++ b/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx @@ -136,6 +136,35 @@ export const FocusTemplate = (args, { argTypes }) => ({ ``` +### Scoped CSS variables + +```css +:host { + /* tooltip */ + --radius: var(--telekom-radius-small); + --background: var(--telekom-color-background-surface-highlight); + --color: var(--telekom-color-text-and-icon-white-standard); + --font-weight: var(--telekom-typography-font-weight-regular); + --font-size: var(--telekom-typography-font-size-body); + --line-height: var(--telekom-typography-line-spacing-standard); + --spacing: var(--telekom-spacing-composition-space-02) + var(--telekom-spacing-composition-space-04); + + /* arrow */ + --arrow-size: 12px; + + /* tooltip hide */ + --transition-delay-hide: var(--telekom-motion-duration-instant); + --transition-duration-hide: var(--telekom-motion-duration-immediate); + --transition-timing-function-hide: var(--telekom-motion-easing-standard); + + /* tooltip show */ + --transition-duration-show: var(--telekom-motion-duration-immediate); + --transition-timing-function-show: var(--telekom-motion-easing-standard); + --z-index: var(--scl-z-index-70); +} +``` + ## Placement ### Left diff --git a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-dark-standard-1-snap.png index c0196c451c05b77d59ae4b746a4edeaae2a5024b..da26a53483603796c29a8b516dce8d04b3d883a0 100644 GIT binary patch literal 24182 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 literal 24233 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 diff --git a/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/date-picker-visual-spec-js-date-picker-light-standard-1-snap.png index df7a0a614cfd8a59c1ad0a56158cf0dbdb123950..134bf25ac529bede1ddab2614c4fbbac6a6e081a 100644 GIT binary patch literal 26331 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 RE5AUddb;|#taD0e0sutfS?>S< literal 28250 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 R=f*eC?I&;ND#wuP{{{6FeEa|a From f793fb23da66a4535c543944c28c7d880399d80d Mon Sep 17 00:00:00 2001 From: felix-ico <97440128+felix-ico@users.noreply.github.com> Date: Fri, 21 Jul 2023 17:04:02 +0200 Subject: [PATCH 7/8] Docs/update usage texts (#2064) * docs: update usage text --- packages/storybook-vue/.storybook/preview.js | 1 - .../1_setup/2_scale-for-designers/Figma.png | Bin 0 -> 1402 bytes .../1_setup/2_scale-for-designers/Sketch.png | Bin 0 -> 2131 bytes .../dropdown-select/Dropdown_select.png | Bin 0 -> 16788 bytes .../Dropdown_select_elements.png | Bin 0 -> 25930 bytes .../stories/AboutScale.stories.mdx | 22 ------- .../storybook-vue/stories/AboutScale_de.md | 35 ---------- .../storybook-vue/stories/AboutScale_en.md | 35 ---------- packages/storybook-vue/stories/Index_de.md | 30 +++++---- packages/storybook-vue/stories/Index_en.md | 30 +++++---- .../stories/components/callout/callout.md | 4 -- .../stories/components/callout/callout_de.md | 4 -- .../stories/components/chip/Chip.stories.mdx | 4 +- .../stories/components/chip/chip.md | 6 +- .../stories/components/chip/chip_de.md | 6 +- .../DropdownSelect.stories.mdx | 4 +- .../dropdown-select/dropdown-select.md | 57 ++++++++++++++-- .../dropdown-select/dropdown-select_de.md | 53 +++++++++++++-- .../components/dropdown/DropDown.stories.mdx | 2 +- .../notification-badge/notification-badge.md | 4 ++ .../notification-badge_de.md | 4 ++ .../notification/Notification.stories.mdx | 16 +++-- .../components/notification/notification.md | 6 +- .../notification/notification_de.md | 6 +- .../components/tooltip/Tooltip.stories.mdx | 4 +- .../stories/components/tooltip/tooltip.md | 6 +- .../stories/components/tooltip/tooltip_de.md | 6 +- .../stories/new_release/SketchLibrary_de.md | 59 ++++------------- .../stories/new_release/SketchLibrary_en.md | 59 ++++------------- .../GettingStartedForDesigners_de.md | 55 ++++++++-------- .../GettingStartedForDesigners_en.md | 61 +++++++++--------- packages/storybook-vue/translations.json | 4 +- packages/visual-tests/src/chip.visual.spec.js | 2 +- .../visual-tests/src/dropdown.visual.spec.js | 9 ++- .../src/notification.visual.spec.js | 2 +- .../visual-tests/src/tooltip.visual.spec.js | 2 +- 36 files changed, 259 insertions(+), 339 deletions(-) create mode 100644 packages/storybook-vue/public/assets/1_setup/2_scale-for-designers/Figma.png create mode 100644 packages/storybook-vue/public/assets/1_setup/2_scale-for-designers/Sketch.png create mode 100644 packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select.png create mode 100644 packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select_elements.png delete mode 100644 packages/storybook-vue/stories/AboutScale.stories.mdx delete mode 100644 packages/storybook-vue/stories/AboutScale_de.md delete mode 100644 packages/storybook-vue/stories/AboutScale_en.md diff --git a/packages/storybook-vue/.storybook/preview.js b/packages/storybook-vue/.storybook/preview.js index cef2a18e19..fa2c23edfa 100644 --- a/packages/storybook-vue/.storybook/preview.js +++ b/packages/storybook-vue/.storybook/preview.js @@ -40,7 +40,6 @@ export const parameters = { storySort: { order: [ 'Scale Design System', - 'About Scale', 'FAQ', 'New Release', ['Release Notes', 'Sketch Library Update'], diff --git a/packages/storybook-vue/public/assets/1_setup/2_scale-for-designers/Figma.png b/packages/storybook-vue/public/assets/1_setup/2_scale-for-designers/Figma.png new file mode 100644 index 0000000000000000000000000000000000000000..c0cbf88e22934665d651341f659d2c1201490bf4 GIT binary patch literal 1402 zcma)6Yd8}M03FweA$c!K9?Sbt-j7{2TZ}9g&A5u2$A})*EJ=)zxz^`djVd?~x4UH;!6_s2QsJLl&)-*>Wo(H;tN2ju_&fC9=Bf!WodJ?xX- zWrv3_$z74X?1>`)03ek;NC0T1n!BL{0pkG&G>&U8?HZ{lm=6p9Xt@L04g&%J!2Ku$ z%>SCi3OxiL9HIGK9GxF|p^wsXA#Q4BGS_^rOCfp?)O2RG3k0;EXx+LZ7?ZNxKr7t} z5z^7Vh<7KJ2Yc@Ml5CNcWu3ZhwG*R7#02jP&Tk<;1ve{EE~j*j)TRpNSHuQmKhiNl z<4JSd2H1`_nYchlFLM&FapExxX%dPlT%vYT(uz?I!wP@|RDP>#gh0eveR+rjc%w{v zl)@XG5XId%*cFRn+GC!=n|k#Rx$ zYe5?%n#;0_6XV;jtR2t^oIsR>{9(23lxY7T;alxDmpTQUV{2J9!}F`f3$s?2D40sJ zeoJPIeuoM&1=>rAId7DpWrkQ?x zfSrZFrx@sM&)h~_(%=~$y9iDb{*eyJPrvDG%X1h1pf?O>O$pNRzs`Uzd1#^qi?NXh zYP$u2U0Uu7yu?sl#roz-W{9FCBY9i?`X=LqW9iQNIgXygHNHGNIX#$Kvh_u>I?MIM zug^+cHOjH94{8IC^K#Z!6`2@q@)5=ULr=b>vI)auc*m(Mq0BEsdG#e*R)tM(L%^o68{$MYd1$-U0i@`2GBRbCc)g4x{llXzxTMB&>4dwug~Cr{nfJkG#P+Hjy0 z15jLYlN&IJicM(qB0qBcEbFeupt}2#PXcihh)3+ny(w(z&*g167B%d_+u%~l^?HKg zcj08LT-}gK(B*JzXDgA|6sj07)Y?TGKQB!a)(%+uBKZrp58aL{?an&Q*C?m3S1sLu z*4UTnz$TBT8hLJv6w1gz!VfZZEs_TdNxSpTF>Ah+mQ$d5F|n_QFx=UBj3FDq@+XFG zu#~x&$@4mjg=WFjyBm#eRIinr{bHyRZmdd)-YcK=KBH{a=tbE4OM=#iuOr5zJ6FMp zHK3o34KE=p{HeuDy8R;inZT|h2&^FdNUO`;q6#i@EG1p6r)-0g)*Jac=4^J{`@Zer zG9XA&tXE9wU~6%vQdG%?>1!nE38CF4cv{K3TP(!btdRY~Q14J2}=aWVU>a8$S!qkgM*`WvZ8F zTWIzYe;3*NKOI;zir;L=aWW-$N%fPKoL&(=CHJ}iH7p9sFbS&LnkMxd<2tl01#(Nv zNycx?ilxN){1qrSeaEnacQZdhx9GQ#e4sZe@Ne_JT={|iRZgxYHwxJsYpPQZQ sfZVB`IX%0b2N@1R*ZZjd`!Crk0P8%)z`ipZCc9S&Kq1kHMtEr2zkh6#82|tP literal 0 HcmV?d00001 diff --git a/packages/storybook-vue/public/assets/1_setup/2_scale-for-designers/Sketch.png b/packages/storybook-vue/public/assets/1_setup/2_scale-for-designers/Sketch.png new file mode 100644 index 0000000000000000000000000000000000000000..57d47cd6282893b875eb6e0604fdbe4c2ea8e11f GIT binary patch literal 2131 zcmV-Z2(0&sP)l##8M-mTv*feg|;> z5{Rg^CUT+Zi5DTNtiC8>8{Urp^+ZG-3unH8c;&A(uH-_apcX`py#N!hb#069e9i>_ z5v)iGpMJNDO#&sPg2z|SGO@n`Con;x2j9uODZceFz~Ud^f~fW~L_6ODD(Fs{w=OWj z&wvw9>@CNoH%AY=>8xJkF~#iIsGt#i?mDzC9c6o~0y)(QCg@?d?;-hp*lqj;VfQ7c zR)-jm?f!M3fJE@t4@bG^P$d=|#ols^9khawT=ZjZL>Go4z*=yu+i?5B>fQ(i*AZJ# zn{X%k?F;Q=wZu;Fbls*BJQ~s$TOdS_hJb{DdgoV)dTuT_;oGbW6nm?o*a8%NE0O4_ zGHF}SjRo)2?IZ~|m=bMbIU94ZEo>jr#uvewDD|$jG@6m%U3Hs~2rp`e9|tlTPqKX; z0&*Mykjyjpt9gfbzAeoCmP-FM{I#f*(y3FtmoH01Xa`opShyeC#h(3 zdxv%cj1!~?P56nK_*@bHd`h{V7YmMWo9|x*B~%@b&8SVUL$8R&Us7*&DFy*v&zENk z?^h^z>!;KCbz2vH$$mV)8RZ($?4s;2qA@QP8#7mMUbm;e1Z9d&nxa3_OR)tgI(8w8 z`Yr>5po~I2mkX|1x4ZV1Be+R3$~6v}T}AagTX3DaokUi{Llj$3B)UP%Ij^2)3T|At zvmB1isLgMLDYgJb$LE;U>@w+q=G5~wf@|090(jSsq8a5HY<6uv3}i^^dAHyubz6|p zDdd^A3}OogAIWZZ8TN>>>iPeIo7Qa!yfx~g8RZ&mb`f5XrR#Y|aO=FCZ~^aGjO>Tf z!debpeHWXx+EhK~f>YLQZ_OyzB%58fONWViUbCv(N!XKGH)0F$SXv9r;lG0|SkGa6 z7t|KMJ`K$qU`=JB0)tzo0sj6B)*Fjc6=>Z7YpN?}AzHq1IllYR0f^^|8!ttSKf`t! zz*RdXO=j@B7r~lncq5FTJkJ`c5ATM?p>sgNyqod9o_vW7|Sv{{kwTc7P4@*P-;-x*IhdJ^abq?dc7jv#EvX zD>LPGxvjfVJJb-hTytC21FGx+==7`ys8VK^+qhd8wkk2Kbj1hbV%A$im9n}V`%E_O z9$}hQbE-q`nkE)~n~YvYm)p3T$3Lc79)+v+7!^%3df8l#?p`sx;7-Rs8A^jdxTC>+ zZ-EJAa=EFyv*Mo&)y*JVJN*;&i+1twT}#lc7D3FEY9=A-mk=hrl#qXop6UcZ%*0;o zfy-6hZ5#h&IQiZ})d_%wDgQ24aW_T$li@^gL}dcNx6AnpT;T43M<+?*pA2V$BPtUB zzFgi^I8jr^Kk5Gi9HKG-;LGK>PMPQKieV>I7pH_Rb3&S#ZtFE+D;#F`2OG{niC~BAI zjjZXcv{T|;a0FMmvs${;E|-lx$ObKa&=bM)CIF~hE_1i9_$Q+$f+MmC0CYLUAbi$7 ze8xW+Jrf*}O#m!T*?n|H=5C+yPexA#M`RNKHZIS4tnc_IqvwJnSrY)JAJEEjcQ4|f zj35L@vL*mbT%LXm?lTmzkzfQz(h~saRGs0Ww7aQR+9?T2@T|C~v*4U`x5=QT4}uaL zNykOi5xJzhsaM)52~Kb%9T!zxo^&_$N;@S%3XWi099g~mE^>L&-7Z$zDG63^B-zr< zbGaC%ceT<^Nzj5LA}-2YEr4d|o`j+nP=xkg3C*1faqckN&urhT8THhXk7{B}L zx${9Mk}OImIMV#}QyvBDyN*EFD5cL$Vz255@oh002ov JPDHLkV1mt|`!@gp literal 0 HcmV?d00001 diff --git a/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select.png b/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select.png new file mode 100644 index 0000000000000000000000000000000000000000..9d97bc0a20a70a5f39b41b32f0fc5375d416191b GIT binary patch literal 16788 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 G`2PV57`}}F literal 0 HcmV?d00001 diff --git a/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select_elements.png b/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select_elements.png new file mode 100644 index 0000000000000000000000000000000000000000..567385ce65b621197e5eebc95fc0a76bd9359f1d GIT binary patch literal 25930 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 { - const locale = context && context.globals && context.globals.locale; - return ( - - {locale && ( - - )} - - ); - }, - }, - }} -/> diff --git a/packages/storybook-vue/stories/AboutScale_de.md b/packages/storybook-vue/stories/AboutScale_de.md deleted file mode 100644 index 1f4f1aa664..0000000000 --- a/packages/storybook-vue/stories/AboutScale_de.md +++ /dev/null @@ -1,35 +0,0 @@ -# Über Scale - -Mit Scale kannst du Produkte und Services konsistent gestalten, prototypisieren und bauen. - -## Produktionsfertige UI-Komponenten für Design und Entwicklung - -Das Scale Design System stellt Komponenten für Design und Code zur Verfügung. Das erleichtert und optimiert die Zusammenarbeit zwischen Design und Entwicklung und schafft freie Ressourcen im Design-Prozess. - -## Immer auf dem aktuellen Stand - -Die Assets und Code-Komponenten basieren alle auf derselben Quelle. Somit sind sie immer synchron und auf dem neuesten Stand. Verwendest du das bereitgestellte Standard-Theme, ist dein UI-Design von Brand & Design automatisch freigegeben. - -## Kompatibel mit populären Frameworks - -Die Assets sind für Sketch entwickelt, die Code-Komponenten für die wichtigsten Frontend-Frameworks wie Vue, React und Angular. Du kannst sie auch als reine Web-Komponenten nutzen. [Hier erfährst du mehr über Web-Komponenten.](https://webcomponents.org) - -## Für die beste User Experience - -Mit Scale sparst du Zeit – und zwar im gesamten Design- und Entwicklungsprozess: bei der Gestaltung von User Interfaces, der Markenausrichtung, der Design-Übergabe, dem Prototyping, der Frontend-Entwicklung und den Tests. Damit hast du mehr Zeit, die Produkte und Services an den Nutzer\*innen auszurichten und Komponenten zu erstellen, die deinem spezifischen Anwendungsfall entsprechen. - -## Verwende, was du benötigst - -Bei Scale hast du die Wahl: Du kannst die Komponenten entweder als Grundlage für dein gesamtes UI-Design verwenden oder nur mit bestimmten Komponenten arbeiten. - -## Barrierefreiheit „out of the box“ - -Die Komponenten von Scale erfüllen die technischen Anforderungen für das Level AA der Barrierefreiheit. Sie sind ebenso für kundenbezogene Produkte wie für interne Anwendungen geeignet. - -## Kollaboration im gesamten Unternehmen - -Als Designer\*in oder Entwickler\*in kannst du dazu beitragen, Scale zu verbessern. Schicke uns deine neuen oder verbesserten Komponenten, um sie mit deinen Kolleg\*innen in Scale zu teilen. - -## Benutzerdefinierte Themes - -Du kannst alle Scale Komponenten individualisieren. Mit den benutzerdefinierten Themes passt du Scale an dein spezifisches Produkt, deine Marke, deine Nutzer\*innen und deine Anwendungsfälle an. Damit hast du auch die Möglichkeit, mit Scale Produkte oder Services für Drittmarken zu entwickeln. diff --git a/packages/storybook-vue/stories/AboutScale_en.md b/packages/storybook-vue/stories/AboutScale_en.md deleted file mode 100644 index df8ea0d8c3..0000000000 --- a/packages/storybook-vue/stories/AboutScale_en.md +++ /dev/null @@ -1,35 +0,0 @@ -# About Scale - -The Scale design system is a new way for teams to design, prototype and build products. - -## Production-ready UI components for design and development - -Scale provides matching design assets and frontend code components. This facilitates collaboration between design and development teams and frees up considerable resources in product design processes. - -## Always in sync - -Design assets and code components in Scale are based on a single source of truth. As such, they are always in sync and up to date. Using the default theme provided means the visual design is approved by Brand and Design. - -## Production ready for popular frameworks - -Scale design assets are built to work in Sketch, while the code components are compatible with major frontend frameworks like Vue, React, and Angular (or even as "vanilla" web components). [Learn more about web components.](https://webcomponents.org) - -## Enabling best-in-class experiences - -Scale helps save time during UI design, brand alignment, design hand-off, prototyping, frontend development, and testing. The time saved can create space to solve specific challenges for the user and build custom components matching your individual product use case. - -## Use some or all of our components - -With Scale the choice is yours: you can either use it as the basis for your entire product UI design or pick specific elements to use in your frontend. - -## Accessibility out of the box - -Scale components fulfill the technical requirements for providing an AA accessibility level, making them safe to use for internal as well as client-facing web development projects. - -## Collaboration throughout the enterprise - -Scale enables designers and developers to contribute to the community and make both new and improved components available to everyone using the design system. - -## Full theming capabilities - -Scale allows theming for all its components. By using overwrites or custom themes, you can adjust styles to your specific product, brand, audience, and use case. You can even use it to provide services for third-party brands. diff --git a/packages/storybook-vue/stories/Index_de.md b/packages/storybook-vue/stories/Index_de.md index 6e5ab84230..157df5af6f 100644 --- a/packages/storybook-vue/stories/Index_de.md +++ b/packages/storybook-vue/stories/Index_de.md @@ -1,25 +1,29 @@ -## Design & Code sind eins +
-Scale ist das digitale Designsystem der Telekom für Produkte und Services. Mit Scale erstellst du mit Leichtigkeit brandkonforme Interfaces. Mit 32+ produktionsfertigen Komponenten in Code und Design, einer zentral zugänglichen Bibliothek und umfassender Dokumentation enthält Scale alles, was du dafür benötigst. Scale ist derzeit eine Open Beta. +### Scale ist das digitale Design System der Telekom -[Scale entdecken](./?path=/story/about-scale--page) +Scale ist Teil von Brand & Design. Alle Komponenten sind markenkonform und helfen, ein kohärentes Markenerlebnis zu schaffen. -## Scale für Designer\*innen +### Code und Design für konsistente Produkte -Verwende die Scale Komponenten, um mit Sketch digitale Interfaces für eine herausragende User Experience zu gestalten. +Das auf unserer Markenidentität basierende Designsystem hilft dir, konsistente Produkte zu entwickeln. So stärkst du die Marke Telekom. -[Erste Schritte für Designer\*innen](./?path=/docs/setup-info-getting-started-for-designers--page) +### Barrierefreiheit „out of the box“ -## Scale für Entwickler\*innen +Die Komponenten von Scale erfüllen die technischen Anforderungen für das Level AA der Barrierefreiheit. Sie sind ebenso für kundenbezogene Produkte wie für interne Anwendungen geeignet. -Setze die Scale Web-Komponenten in HTML und den gängigen Frameworks wie Angular, React und Vue ein. +### Kompatibel mit den relevanten Frameworks und Design Tools -[Erste Schritte für Entwickler\*innen](./?path=/docs/setup-info-getting-started-for-developers--page) +Die UI Libraries gibt es im Figma- und Sketchformat. Die Code Komponenten kannst du als reine Web-Komponenten oder in den Frameworks Vue, React und Angular verwenden. -## Du hast noch Fragen? +### Für die beste User Experience -In unseren [FAQ](./?path=/story/faq--page) findest du viele nützliche Antworten. Du kannst uns auch [hier Feedback geben.](./?path=/story/contact-your-feedback--page) +Mit Scale sparst du Zeit – und zwar im gesamten Design- und Entwicklungsprozess: bei der Gestaltung von User Interfaces, beim Prototyping, der Design-Übergabe, der Frontend-Entwicklung und im Freigabeprozess mit Brand & Design. So bleibt mehr Zeit für spezifische Funktionen und Lösungen. -## Du möchtest mitmachen? +### Flexibilität und Skalierbarkeit durch Design Tokens -Erfahre hier, wie du [an Scale mitwirken](./?path=/story/contact-contributing-to-scale--page) kannst. Wir freuen uns über deine Ideen. +Durch die Verwendung von Design Tokens ist Scale besonders anpassungsfähig. Änderungen und Erweiterungen lassen sich schnell umsetzen. Auch weitere Themes für bspw. Drittmarken sind schnell erstellt. + +### Für bessere Kollaboration + +Ein Designsytsem fördert die Zusammenarbeit zwischen Teams und Stakeholdern. Es schafft eine gemeinsame Grundlage, auf die alle Beteiligten gemeinsam aufbauen können. Als Designer*in oder Entwickler*in kannst du dazu beitragen, Scale zu verbessern. Schicke uns deine neuen oder verbesserten Komponenten, um sie mit deinen Kolleg\*innen in Scale zu teilen. diff --git a/packages/storybook-vue/stories/Index_en.md b/packages/storybook-vue/stories/Index_en.md index edc6850f4b..921334807b 100644 --- a/packages/storybook-vue/stories/Index_en.md +++ b/packages/storybook-vue/stories/Index_en.md @@ -1,25 +1,29 @@ -## Design and code are one +
-Scale is the Telekom Digital Design System for products and experiences. It helps you build your online products faster and create superior experiences with ease. With 32+ production-ready components in code and design, a centrally accessible library and comprehensive documentation, Scale gives you everything you need to make it happen. Scale is currently an open beta. +### Scale is the Telekom Digital Design System -[Learn more about Scale](./?path=/story/about-scale--page) +Scale is a part of Brand & Design. All components are brand compliant and help create a coherent brand experience. -## Scale for designers +### Code and design for consistent products -Designers use Scale components to build outstanding digital experiences in Sketch. +Based on our brand identity, the Scale design system helps you develop consistent products. This is how you contribute to strengthening the Telekom brand. -[Get started for Designers](./?path=/docs/setup-info-getting-started-for-designers--page) +### Accessibility out of the box -## Scale for developers +Scale components meet the technical requirements for the accessibility level AA. They are just as suitable for customer-focused products as they are for internal use cases. -Developers use Scale web components in HTML, Angular, React and Vue Interfaces. +### Compatible with the relevant framework and design tools -[Get started for Developers](./?path=/docs/setup-info-getting-started-for-developers--page) +The UI libraries are available in Figma and Sketch. You can use the code components as pure web components or in the framework for Vue, React, and Angular. -## Any questions? +### For the best user experience -Review our [FAQ](./?path=/story/faq--page) or [Leave feedback.](./?path=/story/contact-your-feedback--page) +Scale saves you time throughout the entire design and development process: for the design of user interfaces, prototyping, design handover, front-end development, and in the approval process with Brand & Design. This leaves more time to create specific features and functionality. -## Contribute to Scale +### Flexibility and scalability through design tokens -Read about [contributing to Scale.](./?path=/story/contact-contributing-to-scale--page) +By including design tokens, Scale is particularly adaptable. Changes and additions can be implemented quickly. Other themes for third-party brands can also be created quickly. + +### For better collaboration + +A design system encourages collaboration between teams and stakeholders. It creates a common foundation on which everyone can build together. As a designer or developer, you can help improve Scale. Send us your new or improved components to share with your colleagues in Scale. diff --git a/packages/storybook-vue/stories/components/callout/callout.md b/packages/storybook-vue/stories/components/callout/callout.md index 54fbfdea7c..963baa5f4c 100644 --- a/packages/storybook-vue/stories/components/callout/callout.md +++ b/packages/storybook-vue/stories/components/callout/callout.md @@ -4,7 +4,3 @@
A Callout Component provides a way for users to highlight important content visually. - -## Beta Component - -This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future. diff --git a/packages/storybook-vue/stories/components/callout/callout_de.md b/packages/storybook-vue/stories/components/callout/callout_de.md index e75a0c833d..c4eae16219 100644 --- a/packages/storybook-vue/stories/components/callout/callout_de.md +++ b/packages/storybook-vue/stories/components/callout/callout_de.md @@ -4,7 +4,3 @@ Eine Callout Component bietet die Möglichkeit, wichtigen Inhalt für den Nutzer visuell hervorzuheben. - -## Beta-Komponente - -Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenke, dass sie möglicherweise noch nicht alle Qualitätskontrollmaßnahmen durchlaufen hat und noch keine WCAG-Zertifizierung zur Barrierefreiheit vorliegt. In Zukunft kann es zu Änderungen an dieser Komponente kommen. diff --git a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx index 291abd2233..2b36cfcb87 100644 --- a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx +++ b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx @@ -9,7 +9,7 @@ import ScaleChip from './ScaleChip.vue'; import { action } from '@storybook/addon-actions'; ({ }} >

Chip

- Beta Component + Accessible AA ## Standard diff --git a/packages/storybook-vue/stories/components/chip/chip.md b/packages/storybook-vue/stories/components/chip/chip.md index 8e30287582..fe45da91ee 100644 --- a/packages/storybook-vue/stories/components/chip/chip.md +++ b/packages/storybook-vue/stories/components/chip/chip.md @@ -1,6 +1,6 @@

Chip

- Beta Component + Accessible AA
Chips are contextual components that allow users to filter content or trigger actions. @@ -93,10 +93,6 @@ Add an icon if it makes it easier for users to understand the function of the ch - Chips arranged horizontally are often located above the content they refer to. - Word the label as precisely as possible. -## Beta components - -This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future. - ## Related components [Tag](?path=/usage/components-tag--standard), diff --git a/packages/storybook-vue/stories/components/chip/chip_de.md b/packages/storybook-vue/stories/components/chip/chip_de.md index ca30ab9d69..882f01c388 100644 --- a/packages/storybook-vue/stories/components/chip/chip_de.md +++ b/packages/storybook-vue/stories/components/chip/chip_de.md @@ -1,6 +1,6 @@

Chip

- Beta Component + Accessible AA
Chips sind kontextabhängige Komponenten mit denen Nutzer\*innen Inhalte filtern oder Aktionen auslösen können. @@ -89,10 +89,6 @@ Füge ein Icon hinzu, wenn Nutzer\*innen die Funktion des Chips dadurch leichter - Horizontal angeordnete Chips befinden sich häufig oberhalb vom Inhalt auf den sie sich beziehen. - Formuliere das Label so präzise wie möglich. -## Beta-Komponente - -Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenke, dass sie möglicherweise noch nicht alle Qualitätskontrollmaßnahmen durchlaufen hat und noch keine WCAG-Zertifizierung zur Barrierefreiheit vorliegt. In Zukunft kann es zu Änderungen an dieser Komponente kommen. - ## Verwandte Komponenten [Tag](?path=/usage/components-tag--standard), diff --git a/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx b/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx index 4ff2c6733f..03b19a041d 100644 --- a/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx +++ b/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx @@ -3,7 +3,7 @@ import ScaleDropdownSelect from './ScaleDropdownSelect.vue'; import { action } from '@storybook/addon-actions'; @@ -52,7 +52,7 @@ export const Template = (args, { argTypes }) => ({ }} >

Dropdown Select

- Beta Component + Accessible AA ## Standard diff --git a/packages/storybook-vue/stories/components/dropdown-select/dropdown-select.md b/packages/storybook-vue/stories/components/dropdown-select/dropdown-select.md index 5a4d8a8d44..08f112efe0 100644 --- a/packages/storybook-vue/stories/components/dropdown-select/dropdown-select.md +++ b/packages/storybook-vue/stories/components/dropdown-select/dropdown-select.md @@ -1,17 +1,64 @@

Dropdown Select

- Beta Component + Accessible AA
-The Dropdown Select is a new version of the [dropdown](?path=/docs/components-dropdown--standard) component. The dropdown menu is now an integrated part and is no longer generated by the browser as before. This makes the component less error-prone. In particular, errors that could occur when switching between light and dark modes are now avoided. +With a dropdown, users select a single option from a collapsible list of available options. -## Beta components +## General -This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future. +The dropdown temporarily displays a selection list. Thus, the dropdown helps save space when there are multiple options to choose from. + +![Image Name](assets/3_components/dropdown-select/Dropdown_select.png) + +### When to use + +Use a dropdown when users: + +- can select options within a form, +- should only select one of the options, or +- should filter or sort content. + +### When not to use + +Don’t use dropdowns, when users: + +- should only have a few options (radio buttons may be better and they do not hide the content from the user), +- should have a lot of choices (an input field with auto-fill is more helpful and time saving for the user), +- should have several selectable options (use checkboxes instead), or +- should navigate (use a navigation component like the sidebar navigation). + +## Elements + +![Image Name](assets/3_components/dropdown-select/Dropdown_select_elements.png) + +### Label (1) + +The label clearly indicates what kind of options the dropdown provides. + +### Icon (2) + +The direction of the arrow indicates whether the dropdown menu is open or closed. + +### Information (3) (Optional) + +Additional information can help clarify the content or purpose of a dropdown. + +### Error (4) + +If users have to select an option, submitting a form without a selection will result in an error message. If the dropdown already has an informational text, the error text will temporarily take its place. + +### Label and Value (5) + +When a Value from the dropdown is selected, it takes the place of the Label and the Label collapses into a smaller size. + +### Dropdown menu (6) + +The dropdown menu contains the available options or groups of options. ## Related components -[Dropdown, ](?path=/docs/components-dropdown--standard) [Checkbox, ](?path=/usage/components-checkbox--standard) [Switch, ](?path=/usage/components-switch--standard) [Radio Button](?path=/usage/components-radio-button--standard) +[Date Picker](?path=/usage/components-date-picker--standard) diff --git a/packages/storybook-vue/stories/components/dropdown-select/dropdown-select_de.md b/packages/storybook-vue/stories/components/dropdown-select/dropdown-select_de.md index 7a0b6bf100..14abbbb7b3 100644 --- a/packages/storybook-vue/stories/components/dropdown-select/dropdown-select_de.md +++ b/packages/storybook-vue/stories/components/dropdown-select/dropdown-select_de.md @@ -1,17 +1,60 @@

Dropdown Select

- Beta Component + Accessible AA
-Das Dropdown Select ist eine neue Version der [Dropdown-Komponente](?path=/docs/components-dropdown--standard). Das Dropdown-Menü ist nun ein integrierter Bestandteil der Komponente und wird nicht mehr wie in der bestehenden Version vom Browser generiert. Dadurch ist die Komponente weniger fehleranfällig. Insbesondere Fehler, die beim Switch zwischen Light- und Dark Mode entstehen konnten, werden nun vermieden. +Mit einem Dropdown wählen Nutzer\*innen eine Option aus einer Liste aus. -## Beta-Komponente +## Allgemein -Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenke, dass sie möglicherweise noch nicht alle Qualitätskontrollmaßnahmen durchlaufen hat und noch keine WCAG-Zertifizierung zur Barrierefreiheit vorliegt. In Zukunft kann es zu Änderungen an dieser Komponente kommen. +Die Auswahlliste des Dropdowns wird temporär angezeigt. Das macht ein Dropdown zu einer platzsparenden Lösung, wenn viele Optionen zur Auswahl stehen. + +![Image Name](assets/3_components/dropdown-select/Dropdown_select.png) + +### Verwende ein Dropdown, wenn + +- innerhalb eines Formulars Optionen zur Auswahl stehen, +- Nutzer\*innen nur eine der Optionen auswählen sollen oder +- Nutzer\*innen Inhalte filtern oder sortieren müssen. + +### Verwende Dropdowns besser nicht, wenn + +- du nur sehr wenige Optionen anbieten möchtest (Radio-Buttons sind hier eventuell die bessere Wahl), +- du sehr viele Auswahlmöglichkeiten anbieten möchtest (ein Eingabefeld mit automatischer Vervollständigung ist hilfreicher), +- Nutzer\*innen mehrere Auswahlmöglichkeiten haben sollen (Checkboxen sind in dem Fall sinnvoller) oder +- Nutzer\*innen navigieren sollen (hier ist eine Navigationskomponente wie bspw. die Sidebar-Navigation geeigneter). + +## Elemente + +![Image Name](assets/3_components/dropdown-select/Dropdown_select_elements.png) + +### Label (1) + +Das Label beschreibt eindeutig, welche Art von Optionen das Dropdown enthält. + +### Icon (2) + +Der Pfeil zeigt durch seine Ausrichtung an, ob das Dropdown-Menü geöffnet oder geschlossen ist. + +### Information (3) (Optional) + +Eine zusätzliche Information kann helfen, den Inhalt oder Zweck eines Dropdowns zu verdeutlichen. + +### Fehlermeldung (4) + +Wenn die Auswahl einer Option für Nutzer\*innen verpflichtend ist, führt das Absenden eines Formulars ohne getätigte Auswahl zu einer Fehlermeldung. Besitzt das Dropdown bereits einen Informationstext, wird dieser kurzzeitig überschrieben. + +### Label und Wert (5) + +Wenn ein Wert aus der Dropdown-Liste ausgewählt wird, nimmt er den Platz des Labels ein und das Label verkleinert sich. + +### Dropdown menu (6) + +Das Dropdown Menü beinhaltet die verfügbaren Optionen oder Optionsgruppen. ## Verwandte Komponenten -[Dropdown, ](?path=/docs/components-dropdown--standard) [Checkbox, ](?path=/usage/components-checkbox--standard) [Switch, ](?path=/usage/components-switch--standard) [Radio Button](?path=/usage/components-radio-button--standard) +[Date Picker](?path=/usage/components-date-picker--standard) diff --git a/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx b/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx index e8a48b3bc9..4f6dea162e 100644 --- a/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx +++ b/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx @@ -3,7 +3,7 @@ import ScaleDropDown from './ScaleDropDown.vue'; import { action } from '@storybook/addon-actions'; Notification Badge Beta Component + +## Beta Component + +This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future. diff --git a/packages/storybook-vue/stories/components/notification-badge/notification-badge_de.md b/packages/storybook-vue/stories/components/notification-badge/notification-badge_de.md index 49fbc183ec..9059356678 100644 --- a/packages/storybook-vue/stories/components/notification-badge/notification-badge_de.md +++ b/packages/storybook-vue/stories/components/notification-badge/notification-badge_de.md @@ -2,3 +2,7 @@

Notification Badge

Beta Component + +## Beta Component + +This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future. diff --git a/packages/storybook-vue/stories/components/notification/Notification.stories.mdx b/packages/storybook-vue/stories/components/notification/Notification.stories.mdx index d733a6ff1a..fe61a250fc 100644 --- a/packages/storybook-vue/stories/components/notification/Notification.stories.mdx +++ b/packages/storybook-vue/stories/components/notification/Notification.stories.mdx @@ -9,7 +9,7 @@ import { action } from '@storybook/addon-actions'; import ScaleNotification from './ScaleNotification.vue'; ({ }} >

Notification

- Beta Component + Accessible AA ## Standard @@ -211,6 +211,7 @@ export const Template = (args, context) => ({ heading: 'Success notification with icon, title and close', type: 'banner', variant: 'success', + ariaHeading: 'Success:' }}> {Template.bind({})} @@ -232,7 +233,7 @@ export const Template = (args, context) => ({ type: 'toast', variant: 'warning', text: 'Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.', - ariaHeading: 'Warning' + ariaHeading: 'Warning:' }}> {Template.bind({})} @@ -353,6 +354,7 @@ In order to "toast" a notification, append it to a div with the `.scl-toast-stac heading: 'Success notification with icon and title', variant: 'success', dismissible: false, + ariaHeading: 'Success:' }}> {Template.bind({})} @@ -393,7 +395,7 @@ In order to "toast" a notification, append it to a div with the `.scl-toast-stac heading: 'Danger notification with icon and title', variant: 'danger', dismissible: false, - ariaHeading: 'Danger' + ariaHeading: 'Danger:' }}> {Template.bind({})} @@ -414,7 +416,7 @@ In order to "toast" a notification, append it to a div with the `.scl-toast-stac heading: 'Warning notification with icon and title', variant: 'warning', dismissible: false, - ariaHeading: 'Warning' + ariaHeading: 'Warning:' }}> {Template.bind({})} diff --git a/packages/storybook-vue/stories/components/notification/notification.md b/packages/storybook-vue/stories/components/notification/notification.md index 14708d8ac3..e4683739ca 100644 --- a/packages/storybook-vue/stories/components/notification/notification.md +++ b/packages/storybook-vue/stories/components/notification/notification.md @@ -1,6 +1,6 @@

Notification

- Beta Component + Accessible AA
Notifications give users feedback about the status of the system or an action. @@ -114,7 +114,3 @@ Center banner notifications above the page content. Position inline notifications in the appropriate page area. ![Image Name](assets/3_components/notifications/position_inline.png) - -## Beta component - -This component is still in the beta phase. When testing it, keep in mind that it might not have gone through all quality control checks, and it might not yet have WCAG accessibility certification. This component might change in the future. diff --git a/packages/storybook-vue/stories/components/notification/notification_de.md b/packages/storybook-vue/stories/components/notification/notification_de.md index 1f3027c972..8cdf1269a9 100644 --- a/packages/storybook-vue/stories/components/notification/notification_de.md +++ b/packages/storybook-vue/stories/components/notification/notification_de.md @@ -1,6 +1,6 @@

Notification

- Beta Component + Accessible AA
Notifications geben Nutzer\*innen Feedback über den Status des Systems oder einer Aktion. @@ -110,7 +110,3 @@ Banner Notifications sitzen zentriert oberhalb des Seiteninhalts. Positioniere Inline Notifications im entsprechenden Seitenbereich. ![Image Name](assets/3_components/notifications/position_inline.png) - -## Beta-Komponente - -Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenke, dass sie möglicherweise noch nicht alle Qualitätskontrollmaßnahmen durchlaufen hat und noch keine WCAG-Zertifizierung zur Barrierefreiheit vorliegt. In Zukunft kann es zu Änderungen an dieser Komponente kommen. diff --git a/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx b/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx index cec4808025..e234397220 100644 --- a/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx +++ b/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx @@ -8,7 +8,7 @@ import { import ScaleTooltip from './ScaleTooltip.vue'; ({ }} >

Tooltip

- Beta Component + Accessible AA ## Standard diff --git a/packages/storybook-vue/stories/components/tooltip/tooltip.md b/packages/storybook-vue/stories/components/tooltip/tooltip.md index 7f6d0d3194..a50cbeb17a 100644 --- a/packages/storybook-vue/stories/components/tooltip/tooltip.md +++ b/packages/storybook-vue/stories/components/tooltip/tooltip.md @@ -1,6 +1,6 @@

Tooltip

- Beta Component + Accessible AA
Tooltips provide additional information or a definition for an element to help users interact with it. @@ -42,7 +42,3 @@ The container is gray by default. If you want to use a different color, make sur
Text (2)
The text contains a short, simple and precise description. - -## Beta components - -This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future. diff --git a/packages/storybook-vue/stories/components/tooltip/tooltip_de.md b/packages/storybook-vue/stories/components/tooltip/tooltip_de.md index f0941e888e..d1eb430b36 100644 --- a/packages/storybook-vue/stories/components/tooltip/tooltip_de.md +++ b/packages/storybook-vue/stories/components/tooltip/tooltip_de.md @@ -1,6 +1,6 @@

Tooltip

- Beta Component + Accessible AA
Ein Tooltip vermittelt eine zusätzliche Information oder Definition zu einem Element und dient Nutzer*innen als Hilfestellung. @@ -38,7 +38,3 @@ Der Container ist standardmäßig grau. Setzt du eine andere Farbe ein, stelle e
Text (2)
Der Text enthält eine möglichst kurze, einfache und präzise Beschreibung oder Definition. - -## Beta-Komponente - -Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenke, dass sie möglicherweise noch nicht alle Qualitätskontrollmaßnahmen durchlaufen hat und noch keine WCAG-Zertifizierung zur Barrierefreiheit vorliegt. In Zukunft kann es zu Änderungen an dieser Komponente kommen. diff --git a/packages/storybook-vue/stories/new_release/SketchLibrary_de.md b/packages/storybook-vue/stories/new_release/SketchLibrary_de.md index 0ded0fa58d..15b3665f4e 100644 --- a/packages/storybook-vue/stories/new_release/SketchLibrary_de.md +++ b/packages/storybook-vue/stories/new_release/SketchLibrary_de.md @@ -1,58 +1,25 @@ -# Aktualisierung der Sketch Library +# New: Scale Figma Libraries -## Update 27.10.2022 +{alt} -Einige Varianten unserer Komponenten wurden entfernt (siehe [Update History](./?path=/docs/update-history-design--page)). In bestehenden Layouts werden die Symbole weiterhin als Teil der Library angezeigt, auch wenn sie nicht mehr verfügbar sind. Bitte halte deine Layouts aktuell, indem du die verwendeten Elemente über „Replace with“ erneut verknüpfst. So geht's: +Für alle Designer\*innen, die bereits mit Figma arbeiten, stellen wir nun auch Figma Libraries zur Verfügung. -### 1. Prüfe dein Dokument nach entfernten Symbolen +

Telekom Scale Components Light

-Die folgenden Komponenten werden nicht mehr unterstützt. Prüfe am besten, ob du eine davon verwendest. +

Telekom Scale Components Dark

-| Komponente | Alte Variantengröße | Neuer Variantenname | Ersetzen durch | -| --------------- | ------------------- | ------------------- | -------------- | -| Textfield | Small | ❌ | Standard | -| | Large | Standard | – | -| Dropdown | Small | ❌ | Standard | -| | Large | Standard | – | -| Dropdown Select | Small | ❌ | Standard | -| | Large | Standard | – | -| Date Picker | Small | ❌ | Standard | -| | Large | Standard | – | -| Pagination | Small | ❌ | Standard | -| | Large | Standard | – | -| Table | Small | Standard | – | -| | Large | ❌ | Standard | +## Light und Dark Mode -### 2. Ersetze die alten Symbole +Scale beinhaltet für Light und Dark Mode jeweils eine eigene Library. So kannst du dein Interface entweder im hellen oder dunklen Modus gestalten. Ein Wechsel ist jederzeit per Knopfdruck möglich, sodass du die Wirkung im jeweils anderen Modus beurteilen kannst. Aber auch ohne zusätzliche Designs kann das Entwicklungsteam den anderen Modus aktivieren. -In Sketch lassen sich verwendete Komponenten einfach durch Symbole austauschen. Markiere dafür das zu überschreibende Element und klicke im Menü unter „Layer“ ➔ „Replace with“. Wähle dann „Telekom Scale Components“ und suche nach dem entsprechenden Symbol. +## Prototype - +Jede interaktive Komponente ist bereits mit Prototyp-Funktion gebaut. So kannst du noch schneller Prototypen erstellen und dein Produkt testen. -## Release 19.04.2022 mit Dark Mode +## Dokumentation -Scale enthält nun alle Komponenten auch in einer [Dark Mode](./?path=/docs/guidelines-light-and-dark-mode--page)-Variante. Darüber hinaus wurde der Light Mode optimiert. Beide Varianten sind als zwei separate Libraries verfügbar. Du kannst jederzeit den verwendeten Modus wechseln, indem du die eine Library mit der anderen ersetzt. +Jede Komponente beinhaltet eine Kurzbeschreibung und einen Link zur ausführlicheren Dokumentation auf der jeweiligen Usage Page der Scale Website. -## Wichtig für existierende Projekte +## Updates -Um die Neuerungen vollumfänglich nutzen zu können, sollten deine Komponenten und Farben mit der Library verknüpft sein. Insbesondere selbst definierte Farben bleiben vom Update unberührt. Um unerwünschte Auswirkungen durch die Aktualisierung zu vermeiden, stellen wir bei diesem Release eine neue Library zur Verfügung und bitten dich darum, dein Projekt vorab kurz zu prüfen. - -## Bereite dein Projekt optimal auf das Update vor - -### 1. Prüfe dein Layout auf abgetrennte Komponenten - -Das ist wichtig, da diese sonst nicht über das Update aktualisiert werden können. In Sketch kannst du Instanzen, Gruppen oder Ebenen mit Symbolen aus Libraries ersetzen. Wähle hierzu das zu überschreibende Objekt aus und klicke dann im Menü auf „Layer” und „Replace with”. - - - -### 2. Stelle sicher, dass deine Elemente mit Farben aus der Library verknüpft sind - -Klicke auf eine Ebene und wähle danach „Fill“ und/oder „Border“ im Inspector-Panel aus, um zu erkennen, ob eine Farbe individuell gewählt ist oder ob sie aus der vorgegebenen Farbauswahl der Library stammt. Für die volle Funktionsfähigkeit der Library müssen die korrekten Farb-Tokens angewendet werden. Erfahre mehr in unserer Guideline zu den Design Tokens. - - - -## So setzt du die Library auf die vorherige Version zurück - -Lade die vorherige Version erneut herunter und klicke in Sketch auf die Mitteilung in der oberen rechten Ecke. Es öffnet sich ein Flyout mit der Option „Components Update Available“. Durch Klick auf diese Option wird dein Layout auf die vorherige Version zurückgesetzt. - -

Telekom Scale Components

+Mit einer Pro Lizenz von Figma erhältst du sogar ganz automatisch künftige Updates. Gehe dafür in die Library zur Seite “Getting started” und hinterlasse deine E-Mail Adresse in dem dafür vorgesehenen Bereich. Wir laden dich dann zur Library ein. diff --git a/packages/storybook-vue/stories/new_release/SketchLibrary_en.md b/packages/storybook-vue/stories/new_release/SketchLibrary_en.md index 12ccdd55f5..0a023896e7 100644 --- a/packages/storybook-vue/stories/new_release/SketchLibrary_en.md +++ b/packages/storybook-vue/stories/new_release/SketchLibrary_en.md @@ -1,58 +1,25 @@ -# Update Sketch Library +# New: Scale Figma Libraries -## Update 27.10.2022 +{alt} -Some of our component variants have been removed (see [update history](./?path=/docs/update-history-design--page)). In existing layouts, the symbols will continue to appear as part of the library even if they’re no longer available. Please keep your layouts up to date by re-linking the elements with the Replace With function. Here’s how to do it: +We now also provide Figma libraries for all designers who already work with Figma. -### 1. Check your document for removed symbols +

Telekom Scale Components Light

-The following components are no longer supported. It's best to check if you're using one of them. +

Telekom Scale Components Dark

-| Component | Previous variant size | New variant name | Replaced with | -| --------------- | --------------------- | ---------------- | ------------- | -| Text Field | Small | ❌ | Standard | -| | Large | Standard | – | -| Dropdown | Small | ❌ | Standard | -| | Large | Standard | – | -| Dropdown Select | Small | ❌ | Standard | -| | Large | Standard | – | -| Date Picker | Small | ❌ | Standard | -| | Large | Standard | – | -| Pagination | Small | ❌ | Standard | -| | Large | Standard | – | -| Table | Small | Standard | – | -| | Large | ❌ | Standard | +## Light and dark mode -### 2. Replace the old symbols +Scale contains its own library for light and dark mode. This way, you can design your interface in either light or dark mode. It’s possible to change this anytime at the push of a button, so you can assess a given effect in the other mode. But even without additional designs, the development team can activate the other mode. -Components used in Sketch are easily replaced with symbols. To do this, select the element to overwrite and click in the menu under Layer ➔ Replace With. Then select Telekom Scale Components and look for the corresponding symbol. +## Prototype - +Each interactive component is already built with prototype functionality. This helps test prototypes and your product even faster. -## Dark mode release 19.04.2022 +## Documentation -Scale now includes all components for [dark mode](./?path=/docs/guidelines-light-and-dark-mode--page). In addition, we've optimized light mode. There is a separate library for each mode. You can change the mode used at any time by replacing one library with the other. +Each component includes a short description and a link to the detailed documentation on the respective usage page of the Scale website. -## Important for existing projects +## Updates -To take full advantage of the new features, your components and colors should be linked to the library. Especially self-defined colors remain unaffected by the update. In order to avoid unwanted effects of the update, we provide a new library with this release and ask you to briefly check your project beforehand. - -## How to best prepare your project for the update - -### 1. Check your layout for detached components - -This is important; otherwise they can’t update via the library update. In Sketch, you can replace instances, groups, or layers with symbols from libraries. To do this, select the object you want to overwrite and then click Menu → Layer → Replace with. - - - -### 2. Make sure your elements are linked to colors from the library - -By clicking on a layer and then selecting Fill and/or Border in the inspector panel, you can see whether a color is individually selected or whether it comes from the selected default library color. The correct color tokens must be applied for the library to be fully functional. [Find out more in our Design Tokens guideline](./?path=/docs/guidelines-design-tokens--page) - - - -## Reverting back to the previous version of the library - -Download the previous version and replace the new version. In Sketch, click the notification in the top-right corner. A flyout opens with the option: Components update available. This option will revert your layout back to the previous version. - -

Telekom Scale Components

+With a Pro license from Figma, you will automatically receive future updates. To get this, go to “Getting started” in the library and leave your email address in the space provided. We will then invite you to the library. diff --git a/packages/storybook-vue/stories/setup_and_info/GettingStartedForDesigners_de.md b/packages/storybook-vue/stories/setup_and_info/GettingStartedForDesigners_de.md index 541dbea3fe..a2c60145fd 100644 --- a/packages/storybook-vue/stories/setup_and_info/GettingStartedForDesigners_de.md +++ b/packages/storybook-vue/stories/setup_and_info/GettingStartedForDesigners_de.md @@ -1,57 +1,56 @@ # Erste Schritte für Designer\*innen -Mit Scale entwickelst du ästhetische, intuitive und barrierefreie Produkte und Services – einfach und effizient. Die Komponenten-Library enthält alles, was du dafür benötigst. +Mit Scale entwickelst du markenkonforme, intuitive und barrierefreie Produkte und Services – einfach und effizient. Die Komponenten-Library enthält alles, was du dafür benötigst. -## 1. Installiere Sketch +## 1. Installiere TeleNeo -Um mit der Scale Design System Library zu arbeiten, benötigst du die aktuelle Version von Sketch. +Die folgende Schrift gehört zu den Marken- und Design-Assets der Telekom. Sie ist nicht Open Source und darf nicht frei verwendet werden. Für eine kommerzielle Nutzung ist die ausdrückliche Zustimmung der Deutschen Telekom erforderlich. -## 2. Lade und installiere die TeleNeo Schrift +[Download TeleNeo](https://www.brand-design.telekom.com/asset/font-0-teleneo/) -> Bitte beachte: Die folgende Schrift gehört zu den Marken- und Design-Assets der Telekom. Sie ist **nicht Open Source** und **darf nicht frei verwendet werden**. Für eine kommerzielle Nutzung ist die ausdrückliche Zustimmung der Deutschen Telekom erforderlich. +## 2. Aktiviere die Komponenten-Libraries in deinem Design Tool -TeleNeo ist die Telekom Hausschrift. +
-[Download TeleNeo](https://www.brand-design.telekom.com/asset/font-0-teleneo/) +### Light und Dark Mode -## 3. Importiere die Scale Sketch Library +Scale beinhaltet für Light und Dark Mode jeweils eine eigene Library. So kannst du dein Interface entweder im hellen oder dunklen Modus gestalten. Ein Wechsel ist jederzeit per Knopfdruck möglich, sodass du die Wirkung im jeweils anderen Modus beurteilen kannst. Aber auch ohne zusätzliche Designs kann das Entwicklungsteam den anderen Modus aktivieren. -> Bitte beachte: Die folgenden Komponenten enthalten Marken- und Design-Assets der Telekom – beispielsweise Logos, die Farbe Magenta, die Schrift, Icons sowie Footer und Header. Die Komponenten sind **nicht Open Source** und dürfen **nicht frei verwendet werden**. Für eine kommerzielle Nutzung ist die ausdrückliche Zustimmung der Deutschen Telekom erforderlich. +### Figma Libraries -Jetzt musst du nur noch die Scale Sketch Library mit den Komponenten importieren: +{alt} -

Telekom Scale Components (Light)

+

Telekom Scale Components Light

+

Telekom Scale Components Dark

-

Telekom Scale Components (Dark)

+Übrigens: Mit einer Pro Lizenz von Figma erhältst du sogar ganz automatisch künftige Updates. Gehe dafür in die Library zur Seite “Getting started” und hinterlasse deine E-Mail Adresse in dem dafür vorgesehenen Bereich. Wir laden dich dann zur Library ein. -  +
-Im Folgenden erfährst du, wie das geht: +### Sketch Libraries -### Import der Sketch Library +{alt} -Klicke zunächst auf den obigen Link. Fragt dich dein Browser nach einem Programm, mit dem du den Link öffnen möchtest, dann wähle Sketch aus. +

Telekom Scale Components (Light)

-Danach solltest du die Library in Sketch unter "Sketch → Preferences → Libraries" finden. +

Telekom Scale Components (Dark)

-![Scale for Designers](assets/1_setup/2_scale-for-designers/preferences.png) +Wichtiger Hinweis: das aktuellste Release beinhaltet kein Update der Sketch Library. -### Zugriff auf die Komponenten in Sketch +
-Wähle "Insert → Symbols", aus und gehe mit der Maus auf die Scale Sketch Library. Dort siehst du eine Liste aller Komponenten. Gehst du mit der Maus über eine Komponente, siehst du zusätzliche Varianten und Zustände. Wenn du eine Auswahl getroffen hast, kannst du die entsprechende Komponente einfach auf dein Artboard ziehen. +### Rechtliche Hinweise -![Scale for Designers](assets/1_setup/2_scale-for-designers/insert.png) +Die Deutsche Telekom behält sich alle Rechte an der Marke Telekom vor. Für jede Nutzung, die nicht explizit für die Telekom bestimmt ist, muss das Telekom Theme komplett ersetzt werden. -### Benutzung der Komponenten +## Designdokumentationen -Zu jeder Komponente gibt es ausführliche Informationen zur Verwendung sowie unterschiedliche Varianten. Gehe dazu einfach in der linken Seitenleiste zur gewünschten Komponente und wähle dort die Registerkarte „Usage“ (1) aus. +Zu jeder Komponente gibt es ausführliche Informationen zur Verwendung sowie zu den unterschiedlichen Varianten. Gehe dazu einfach in der linken Seitenleiste zur gewünschten Komponente und wähle dort die Registerkarte „Usage“ (1) aus. ![Scale for Designers](assets/1_setup/2_scale-for-designers/storybook-Usage-tab.png) -## 4. Wir freuen uns auf dein Feedback - -Mit deinem [Feedback](./?path=/story/contact-your-feedback--page) können wir Scale noch besser machen. Du kannst auch deine Designs mit uns teilen, damit alle davon profitieren können. +
-## Brauchst du Hilfe bei Sketch? +# Dein Feedback ist willkommen! -Sketch bietet sehr gute Tutorials und Hilfe-Dokumente an. +Mit deinem Feedback können wir Scale noch besser machen. Du kannst auch deine Designs mit uns teilen, damit alle davon profitieren können.
Du erreichst das Scale Team unter [contact@brand-design.telekom.com](mailto:contact@brand-design.telekom.com). diff --git a/packages/storybook-vue/stories/setup_and_info/GettingStartedForDesigners_en.md b/packages/storybook-vue/stories/setup_and_info/GettingStartedForDesigners_en.md index d5e5942e4f..a2f68f2931 100644 --- a/packages/storybook-vue/stories/setup_and_info/GettingStartedForDesigners_en.md +++ b/packages/storybook-vue/stories/setup_and_info/GettingStartedForDesigners_en.md @@ -1,58 +1,59 @@ -# Getting Started for Designers +# Getting started for designers -Quickly create beautiful, intuitive, and accessible experiences. The Scale components kit contains all the resources you need to get started. +With Scale, you can develop brand-compliant, intuitive, and accessible products and services – in a simple and efficient way. The component library contains everything you need to do this. -## 1. Install Sketch +## 1. Install TeleNeo -To work with the design system components, you need the latest version of Sketch. +The following font is part of the Telekom brand and design assets. It is not open source and may not be used freely. The express consent of Deutsche Telekom is required for commercial use. -## 2. Download and install the TeleNeo font +[Download TeleNeo](https://www.brand-design.telekom.com/asset/font-0-teleneo/) -> Please note that the following font is a part of Telekom brand and design assets and is **not open source** and **not available for free use**. Commercial usage requires Deutsche Telekom's express permission. +## 2. Activate the component libraries in your design tool -TeleNeo is the Telekom company font: +
-[Download TeleNeo](https://www.brand-design.telekom.com/asset/font-0-teleneo/) +### Light and dark mode -## 3. Import the Components Kit +r +Scale contains its own library for light and dark mode. This way, you can design your interface in either light or dark mode. It’s possible to change this anytime at the push of a button, so you can assess a given effect in the other mode. But even without additional designs, the development team can activate the other mode. -> Please note that the following components make use of Telekom brand and design assets — including but not limited to the logos, the color magenta, the typeface and icons, as well as the footer and header components — and are **not open source** and **not available for free use**. They require Deutsche Telekom's express permission for use in commerce. +### Figma libraries -Scale components exist as a Sketch library: +{alt} -

Telekom Scale Components (Light)

+

Telekom Scale Components Light

-

Telekom Scale Components (Dark)

+

Telekom Scale Components Dark

-  +By the way, with a Pro license from Figma, you will automatically receive future updates. To get this, go to “Getting started” in the library and leave your email address in the space provided. We will then invite you to the library. -### Importing the components library +
-If your browser prompts you to choose an application, confirm to open the link in Sketch. +### Sketch libraries -The library should now show up in "Sketch → Preferences → Libraries". +{alt} -![Scale for Designers](assets/1_setup/2_scale-for-designers/preferences.png) +

Telekom Scale Components (Light)

-### Accessing the components in Sketch +

Telekom Scale Components (Dark)

-Select "Insert → Symbols", find the Scale Sketch library, and hover over it. Then you will see a list of all components. Move the mouse to a component to display further variants and states. After making your selection, simply drag the corresponding component onto your artboard. +Important note: the latest release doesn’t include an update of the Sketch library. -![Scale for Designers](assets/1_setup/2_scale-for-designers/insert.png) +
-### Component usage +### Legal notes -This site provides you with information on the components Scale currently offers, as well as their variants and how to use them. -Just navigate to the component you want to learn more about in the left sidebar and select the "Usage" (1) tab in Storybook. +Deutsche Telekom reserves all rights to the Telekom brand. The Telekom theme must be completely replaced for any usage that is not explicitly intended for the Telekom. -![Scale for Designers](assets/1_setup/2_scale-for-designers/storybook-Usage-tab.png) +## Design documentation -## 4. Leave feedback +For each component, there is detailed information on its usage as well as on the different variants. To access this, simply go to the desired component in the left sidebar and select the Usage tab (1). -Find out how to provide [feedback](./?path=/story/contact-your-feedback--page) and make Scale better for everyone. +![Scale for Designers](assets/1_setup/2_scale-for-designers/storybook-Usage-tab.png) -Share your designs so we can learn from each other. +
-## Get help with Sketch +# Your feedback is welcome! -Sketch provides outstanding tutorials and help docs. +With your feedback, we can make Scale even better. You can also share your designs with us so everyone can benefit from them. +Feel free to reach out to the Scale team at [contact@brand-design.telekom.com](mailto:contact@brand-design.telekom.com). diff --git a/packages/storybook-vue/translations.json b/packages/storybook-vue/translations.json index 9ea1f783b5..89791f1e3c 100644 --- a/packages/storybook-vue/translations.json +++ b/packages/storybook-vue/translations.json @@ -31,8 +31,8 @@ }, { "elementSelector": "#new-release-sketch-library-update--page", - "en": "Update Sketch Library", - "de": "Update Sketch Library" + "en": "New: Scale Figma Libraries", + "de": "Neu: Scale Figma Libraries" }, { "elementSelector": "#setup-info-getting-started-for-designers--page", diff --git a/packages/visual-tests/src/chip.visual.spec.js b/packages/visual-tests/src/chip.visual.spec.js index 2902d015ed..25f4c8ad39 100644 --- a/packages/visual-tests/src/chip.visual.spec.js +++ b/packages/visual-tests/src/chip.visual.spec.js @@ -16,7 +16,7 @@ describe('Chip', () => { ['dynamic-selection-standard'], ['dynamic-selection-outline'], ])('%p', async (variant) => { - await global.runSetup(`beta-components-chip--${variant}`); + await global.runSetup(`components-chip--${variant}`); await global.page.waitFor(3000); await global.visualCheck(); }); diff --git a/packages/visual-tests/src/dropdown.visual.spec.js b/packages/visual-tests/src/dropdown.visual.spec.js index f93516f08c..1d9a90fef2 100644 --- a/packages/visual-tests/src/dropdown.visual.spec.js +++ b/packages/visual-tests/src/dropdown.visual.spec.js @@ -1,7 +1,10 @@ describe('Dropdown', () => { describe.each(['light', 'dark'])('%p', (mode) => { beforeAll(async () => { - await global.runColorSetup('components-dropdown--standard', mode); + await global.runColorSetup( + 'deprecated-components-dropdown--standard', + mode + ); }); // screenshots of stories test.each([ @@ -13,7 +16,7 @@ describe('Dropdown', () => { ['with-custom-icon'], ])('%p', async (variant) => { await page.goto( - `http://host.docker.internal:3123/iframe.html?id=components-dropdown--${variant}&viewMode=story` + `http://host.docker.internal:3123/iframe.html?id=deprecated-components-dropdown--${variant}&viewMode=story` ); await page.waitForSelector('html.hydrated'); const previewHtml = await page.$('body'); @@ -32,7 +35,7 @@ describe('Dropdown', () => { }); // hover, active, focus test.each([['standard']])('%p', async (variant) => { - await global.runSetup(`components-dropdown--${variant}`); + await global.runSetup(`deprecated-components-dropdown--${variant}`); const dropdown = await global.page.evaluateHandle( `document.querySelector("#root > scale-dropdown .input__dropdown")` diff --git a/packages/visual-tests/src/notification.visual.spec.js b/packages/visual-tests/src/notification.visual.spec.js index 2591f21f4f..3b5ff032f5 100644 --- a/packages/visual-tests/src/notification.visual.spec.js +++ b/packages/visual-tests/src/notification.visual.spec.js @@ -13,7 +13,7 @@ describe('Notification', () => { ['danger'], ['warning'], ])('%p', async (variant) => { - await global.runSetup(`beta-components-notification--${variant}`); + await global.runSetup(`components-notification--${variant}`); await global.visualCheck(); }); }); diff --git a/packages/visual-tests/src/tooltip.visual.spec.js b/packages/visual-tests/src/tooltip.visual.spec.js index a8cf8d82e1..49b53ee564 100644 --- a/packages/visual-tests/src/tooltip.visual.spec.js +++ b/packages/visual-tests/src/tooltip.visual.spec.js @@ -4,7 +4,7 @@ describe('Tooltip', () => { await global.runColorSetup('components-tooltip--standard', mode); }); test.each([['standard']])('%p', async (variant) => { - await global.runSetup(`beta-components-tooltip--${variant}`); + await global.runSetup(`components-tooltip--${variant}`); const button = await global.page.evaluateHandle( 'document.querySelector("#root > div > scale-tooltip > scale-button")' ); From e75bda034437794fb65f2be1d41ac78397ad17f3 Mon Sep 17 00:00:00 2001 From: felixw Date: Fri, 21 Jul 2023 17:09:01 +0200 Subject: [PATCH 8/8] chore(release): publish --- CHANGELOG.md | 18 ++++++++++++++++++ lerna.json | 2 +- packages/components-angular/CHANGELOG.md | 8 ++++++++ packages/components-angular/package.json | 2 +- packages/components-react/CHANGELOG.md | 8 ++++++++ packages/components-react/package.json | 2 +- packages/components-vue/CHANGELOG.md | 8 ++++++++ packages/components-vue/package.json | 2 +- packages/components/CHANGELOG.md | 17 +++++++++++++++++ packages/components/package.json | 4 ++-- packages/design-tokens/CHANGELOG.md | 8 ++++++++ packages/design-tokens/package.json | 2 +- packages/storybook-vue/CHANGELOG.md | 11 +++++++++++ packages/storybook-vue/package.json | 6 +++--- packages/visual-tests/CHANGELOG.md | 8 ++++++++ packages/visual-tests/package.json | 2 +- 16 files changed, 97 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6002087ed6..c8096228d3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,24 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [3.0.0-beta.137](https://github.com/telekom/scale/compare/v3.0.0-beta.136...v3.0.0-beta.137) (2023-07-21) + + +### Bug Fixes + +* a11y feedback ([#2049](https://github.com/telekom/scale/issues/2049)) ([3db8a8f](https://github.com/telekom/scale/commit/3db8a8fad8f80a7e94831394fb5c37225f0e9562)) +* avoid additional render ([#2057](https://github.com/telekom/scale/issues/2057)) ([537f932](https://github.com/telekom/scale/commit/537f932215578f866115a2599bb0c31d425bb04f)) + + +### Features + +* adding handler for 100+ percentage ([#2043](https://github.com/telekom/scale/issues/2043)) ([989b89c](https://github.com/telekom/scale/commit/989b89cad9921e4a9f9f0ab9682ffe35b31e4c72)) +* use new spacing tokens ([#2059](https://github.com/telekom/scale/issues/2059)) ([e432efd](https://github.com/telekom/scale/commit/e432efd6754d52bf0ed9a3fe9e28be11f954766a)) + + + + + # [3.0.0-beta.136](https://github.com/telekom/scale/compare/v3.0.0-beta.135...v3.0.0-beta.136) (2023-06-27) diff --git a/lerna.json b/lerna.json index b9376329e2..1df4d9e5ea 100644 --- a/lerna.json +++ b/lerna.json @@ -7,7 +7,7 @@ "--pure-lockfile" ], "useWorkspaces": true, - "version": "3.0.0-beta.136", + "version": "3.0.0-beta.137", "command": { "version": { "allowBranch": "main" diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md index b4d07041eb..0751d51784 100644 --- a/packages/components-angular/CHANGELOG.md +++ b/packages/components-angular/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [3.0.0-beta.137](https://github.com/telekom/scale/compare/v3.0.0-beta.136...v3.0.0-beta.137) (2023-07-21) + +**Note:** Version bump only for package @telekom/scale-components-angular + + + + + # [3.0.0-beta.136](https://github.com/telekom/scale/compare/v3.0.0-beta.135...v3.0.0-beta.136) (2023-06-27) **Note:** Version bump only for package @telekom/scale-components-angular diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json index 574284846c..b920f99f7e 100644 --- a/packages/components-angular/package.json +++ b/packages/components-angular/package.json @@ -1,6 +1,6 @@ { "name": "@telekom/scale-components-angular", - "version": "3.0.0-beta.136", + "version": "3.0.0-beta.137", "description": "Angular specific wrapper for @telekom/scale-components", "license": "MPL-2.0", "homepage": "https://github.com/telekom/scale", diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md index 23ee6d07b7..72e12be5f2 100644 --- a/packages/components-react/CHANGELOG.md +++ b/packages/components-react/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [3.0.0-beta.137](https://github.com/telekom/scale/compare/v3.0.0-beta.136...v3.0.0-beta.137) (2023-07-21) + +**Note:** Version bump only for package @telekom/scale-components-react + + + + + # [3.0.0-beta.136](https://github.com/telekom/scale/compare/v3.0.0-beta.135...v3.0.0-beta.136) (2023-06-27) diff --git a/packages/components-react/package.json b/packages/components-react/package.json index 2612761920..95913bffa6 100755 --- a/packages/components-react/package.json +++ b/packages/components-react/package.json @@ -1,7 +1,7 @@ { "name": "@telekom/scale-components-react", "sideEffects": false, - "version": "3.0.0-beta.136", + "version": "3.0.0-beta.137", "description": "React proxy for @telekom/scale-components", "license": "MPL-2.0", "homepage": "https://github.com/telekom/scale", diff --git a/packages/components-vue/CHANGELOG.md b/packages/components-vue/CHANGELOG.md index 126aa0b136..1c597a6d5d 100644 --- a/packages/components-vue/CHANGELOG.md +++ b/packages/components-vue/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [3.0.0-beta.137](https://github.com/telekom/scale/compare/v3.0.0-beta.136...v3.0.0-beta.137) (2023-07-21) + +**Note:** Version bump only for package @telekom/scale-components-vue + + + + + # [3.0.0-beta.136](https://github.com/telekom/scale/compare/v3.0.0-beta.135...v3.0.0-beta.136) (2023-06-27) **Note:** Version bump only for package @telekom/scale-components-vue diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json index 24dcac71ac..faf6c4ab49 100644 --- a/packages/components-vue/package.json +++ b/packages/components-vue/package.json @@ -1,7 +1,7 @@ { "name": "@telekom/scale-components-vue", "sideEffects": false, - "version": "3.0.0-beta.136", + "version": "3.0.0-beta.137", "description": "Vue specific wrapper for @telekom/scale-components", "license": "MPL-2.0", "homepage": "https://github.com/telekom/scale", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1792770a84..4b64054f07 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,6 +3,23 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [3.0.0-beta.137](https://github.com/telekom/scale/compare/v3.0.0-beta.136...v3.0.0-beta.137) (2023-07-21) + + +### Bug Fixes + +* a11y feedback ([#2049](https://github.com/telekom/scale/issues/2049)) ([3db8a8f](https://github.com/telekom/scale/commit/3db8a8fad8f80a7e94831394fb5c37225f0e9562)) + + +### Features + +* adding handler for 100+ percentage ([#2043](https://github.com/telekom/scale/issues/2043)) ([989b89c](https://github.com/telekom/scale/commit/989b89cad9921e4a9f9f0ab9682ffe35b31e4c72)) +* use new spacing tokens ([#2059](https://github.com/telekom/scale/issues/2059)) ([e432efd](https://github.com/telekom/scale/commit/e432efd6754d52bf0ed9a3fe9e28be11f954766a)) + + + + + # [3.0.0-beta.136](https://github.com/telekom/scale/compare/v3.0.0-beta.135...v3.0.0-beta.136) (2023-06-27) diff --git a/packages/components/package.json b/packages/components/package.json index 88ce5b1684..726cf5738d 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@telekom/scale-components", - "version": "3.0.0-beta.136", + "version": "3.0.0-beta.137", "description": "Scale is the digital design system for Telekom products and experiences.", "homepage": "https://github.com/telekom/scale", "repository": { @@ -72,7 +72,7 @@ "@floating-ui/dom": "^0.5.4", "@stencil/core": "^2.17.0", "@telekom/design-tokens": "1.0.0-beta.8", - "@telekom/scale-design-tokens": "^3.0.0-beta.136", + "@telekom/scale-design-tokens": "^3.0.0-beta.137", "classnames": "^2.2.6", "stencil-inline-svg": "^1.0.1" } diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index ead6cdf105..1502601443 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [3.0.0-beta.137](https://github.com/telekom/scale/compare/v3.0.0-beta.136...v3.0.0-beta.137) (2023-07-21) + +**Note:** Version bump only for package @telekom/scale-design-tokens + + + + + # [3.0.0-beta.136](https://github.com/telekom/scale/compare/v3.0.0-beta.135...v3.0.0-beta.136) (2023-06-27) **Note:** Version bump only for package @telekom/scale-design-tokens diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index c18607e052..590fc4c4f1 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@telekom/scale-design-tokens", - "version": "3.0.0-beta.136", + "version": "3.0.0-beta.137", "type": "module", "description": "Design Tokens for the Scale Design System", "homepage": "https://github.com/telekom/scale", diff --git a/packages/storybook-vue/CHANGELOG.md b/packages/storybook-vue/CHANGELOG.md index 3b5100a234..2e8189dd9d 100644 --- a/packages/storybook-vue/CHANGELOG.md +++ b/packages/storybook-vue/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [3.0.0-beta.137](https://github.com/telekom/scale/compare/v3.0.0-beta.136...v3.0.0-beta.137) (2023-07-21) + + +### Bug Fixes + +* avoid additional render ([#2057](https://github.com/telekom/scale/issues/2057)) ([537f932](https://github.com/telekom/scale/commit/537f932215578f866115a2599bb0c31d425bb04f)) + + + + + # [3.0.0-beta.136](https://github.com/telekom/scale/compare/v3.0.0-beta.135...v3.0.0-beta.136) (2023-06-27) **Note:** Version bump only for package @telekom/scale-storybook-vue diff --git a/packages/storybook-vue/package.json b/packages/storybook-vue/package.json index 6113272642..6ac92035bf 100644 --- a/packages/storybook-vue/package.json +++ b/packages/storybook-vue/package.json @@ -2,7 +2,7 @@ "homepage": "https://telekom.github.io/scale", "name": "@telekom/scale-storybook-vue", "private": true, - "version": "3.0.0-beta.136", + "version": "3.0.0-beta.137", "main": "index.js", "license": "MPL-2.0", "devDependencies": { @@ -32,8 +32,8 @@ "dependencies": { "@storybook/addon-viewport": "^6.4.22", "@telekom/design-tokens": "^1.0.0-beta.2", - "@telekom/scale-components": "^3.0.0-beta.136", - "@telekom/scale-components-vue": "^3.0.0-beta.136" + "@telekom/scale-components": "^3.0.0-beta.137", + "@telekom/scale-components-vue": "^3.0.0-beta.137" }, "scripts": { "prestart": "rm -rf node_modules/.cache/ && yes | cp -a ../components/dist/scale-components/fonts/* public/fonts/ && yes | cp -a ../components/dist/scale-components/scale-components.css public/", diff --git a/packages/visual-tests/CHANGELOG.md b/packages/visual-tests/CHANGELOG.md index 7689a17f63..6eeb8131bd 100644 --- a/packages/visual-tests/CHANGELOG.md +++ b/packages/visual-tests/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [3.0.0-beta.137](https://github.com/telekom/scale/compare/v3.0.0-beta.136...v3.0.0-beta.137) (2023-07-21) + +**Note:** Version bump only for package @telekom/scale-visual-tests + + + + + # [3.0.0-beta.136](https://github.com/telekom/scale/compare/v3.0.0-beta.135...v3.0.0-beta.136) (2023-06-27) **Note:** Version bump only for package @telekom/scale-visual-tests diff --git a/packages/visual-tests/package.json b/packages/visual-tests/package.json index 80625749eb..ce2201706e 100644 --- a/packages/visual-tests/package.json +++ b/packages/visual-tests/package.json @@ -1,7 +1,7 @@ { "name": "@telekom/scale-visual-tests", "private": true, - "version": "3.0.0-beta.136", + "version": "3.0.0-beta.137", "main": "index.js", "license": "MPL-2.0", "scripts": {