From c88fe0e2df1c17e4a4a8dacb61740cc7b4822c28 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Thu, 29 Aug 2024 17:46:34 +0200 Subject: [PATCH 1/3] refactor: use text mixins less invasive WIP --- src/elements/core/styles/mixins/typo.scss | 6 +- src/elements/tabs/tab-label/tab-label.scss | 101 ++++++++++----------- 2 files changed, 52 insertions(+), 55 deletions(-) diff --git a/src/elements/core/styles/mixins/typo.scss b/src/elements/core/styles/mixins/typo.scss index 45207fba16..1605ea7061 100644 --- a/src/elements/core/styles/mixins/typo.scss +++ b/src/elements/core/styles/mixins/typo.scss @@ -88,12 +88,12 @@ // ---------------------------------------------------------------------------------------------------- // Typo: Text Style Mixins // ---------------------------------------------------------------------------------------------------- -@mixin text { +@mixin text($font-size: var(--sbb-text-font-size), $font-weight: normal) { font-family: var(--sbb-typo-font-family); - font-weight: normal; + font-weight: $font-weight; line-height: var(--sbb-typo-line-height-body-text); letter-spacing: var(--sbb-typo-letter-spacing-body-text); - font-size: var(--sbb-text-font-size); + font-size: $font-size; } @mixin text--bold { diff --git a/src/elements/tabs/tab-label/tab-label.scss b/src/elements/tabs/tab-label/tab-label.scss index bf9d0a352a..93cc768cd4 100644 --- a/src/elements/tabs/tab-label/tab-label.scss +++ b/src/elements/tabs/tab-label/tab-label.scss @@ -20,6 +20,7 @@ ); --sbb-tab-label-animation-easing: var(--sbb-animation-easing); --sbb-tab-label-amount-color: var(--sbb-color-metal); + --sbb-tab-label-font-size: var(--sbb-font-size-text-m); display: inline-block; max-width: 100%; @@ -40,6 +41,11 @@ :host([data-size='s']) { --sbb-tab-label-height: var(--sbb-size-element-xs); --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs); + --sbb-tab-label-font-size: var(--sbb-font-size-text-s); +} + +:host([data-size='xl']) { + --sbb-tab-label-font-size: var(--sbb-font-size-text-xl); } :host([disabled]) { @@ -83,20 +89,34 @@ --sbb-tab-label-color: var(--sbb-color-charcoal); } +// Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. +:host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) { + --sbb-tab-label-focus-visible-display: block; +} + +:host([data-has-divider]) { + --sbb-tab-label-divider-display: block; +} + +:host(:not([data-slot-names~='icon'], [icon-name])) { + --sbb-tab-label-icon-display: flex; +} + +:host(:not([data-slot-names~='amount'], [amount])) { + --sbb-tab-label-amount-display: flex; +} + .sbb-tab-label__wrapper { position: relative; - // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. - :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & { - &::before { - content: ''; - position: absolute; - display: block; - inset: calc((var(--sbb-focus-outline-width) + var(--sbb-focus-outline-offset)) * -1); - border: var(--sbb-focus-outline-width) solid var(--sbb-focus-outline-color); - border-radius: var(--sbb-border-radius-2x); - z-index: 1; - } + &::before { + content: ''; + position: absolute; + display: var(--sbb-tab-label-focus-visible-display, none); + inset: calc((var(--sbb-focus-outline-width) + var(--sbb-focus-outline-offset)) * -1); + border: var(--sbb-focus-outline-width) solid var(--sbb-focus-outline-color); + border-radius: var(--sbb-border-radius-2x); + z-index: 1; } } @@ -114,16 +134,15 @@ color: var(--sbb-tab-label-icon-color); // Show a border under the tab-group and between flex rows when the tab titles wrap to a new line - :host([data-has-divider]) & { - &::after { - content: ''; - position: absolute; - inset-inline-start: 0; - inset-block-end: 0; - width: var(--sbb-tab-group-width); - height: var(--sbb-border-width-1x); - background-color: var(--sbb-color-cloud); - } + &::after { + content: ''; + position: absolute; + display: var(--sbb-tab-label-divider-display, none); + inset-inline-start: 0; + inset-block-end: 0; + width: var(--sbb-tab-group-width); + height: var(--sbb-border-width-1x); + background-color: var(--sbb-color-cloud); } &::before { @@ -150,51 +169,29 @@ text-decoration: var(--sbb-tab-label-text-decoration); } +.sbb-tab-label__text, +.sbb-tab-label__amount { + @include sbb.text($font-size: var(--sbb-tab-label-font-size)); + @include sbb.font-smoothing; +} + .sbb-tab-label__icon { - display: flex; + display: var(--sbb-tab-label-icon-display, none); flex-shrink: 0; color: var(--sbb-tab-label-color); transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing); - - :host(:not([data-slot-names~='icon'], [icon-name])) & { - display: none; - } } .sbb-tab-label__text { color: var(--sbb-tab-label-color); transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing); - @include sbb.font-smoothing; @include sbb.ellipsis; - @include sbb.text-m--bold; - - :host([data-size='s']) & { - @include sbb.text-s--bold; - } - - :host([data-size='xl']) & { - @include sbb.text-xl--bold; - } + @include sbb.text--bold; } .sbb-tab-label__amount { - display: flex; + display: var(--sbb-tab-label-amount-display, none); color: var(--sbb-tab-label-amount-color); transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing); - - @include sbb.text-m--regular; - @include sbb.font-smoothing; - - :host(:not([data-slot-names~='amount'], [amount])) & { - display: none; - } - - :host([data-size='s']) & { - @include sbb.text-s--regular; - } - - :host([data-size='xl']) & { - @include sbb.text-xl--regular; - } } From fcd6234c06be6396667cf2503a9b95e3bb9b302a Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 2 Sep 2024 07:57:04 +0200 Subject: [PATCH 2/3] fix: fix selectors --- src/elements/tabs/tab-label/tab-label.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/elements/tabs/tab-label/tab-label.scss b/src/elements/tabs/tab-label/tab-label.scss index 93cc768cd4..8c112e80c7 100644 --- a/src/elements/tabs/tab-label/tab-label.scss +++ b/src/elements/tabs/tab-label/tab-label.scss @@ -98,11 +98,11 @@ --sbb-tab-label-divider-display: block; } -:host(:not([data-slot-names~='icon'], [icon-name])) { +:host(:is([data-slot-names~='icon'], [icon-name])) { --sbb-tab-label-icon-display: flex; } -:host(:not([data-slot-names~='amount'], [amount])) { +:host(:is([data-slot-names~='amount'], [amount])) { --sbb-tab-label-amount-display: flex; } From 1787b4a130190ee58fb291a47268465909e46f5e Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 2 Sep 2024 16:09:55 +0200 Subject: [PATCH 3/3] refactor: version 2 --- src/elements/core/host.ts | 1 + src/elements/core/host/box-sizing.scss | 3 +++ src/elements/core/host/host.ts | 2 ++ src/elements/core/host/typo.scss | 9 +++++++++ src/elements/core/styles/mixins/typo.scss | 8 +++++--- src/elements/tabs/tab-label/tab-label.scss | 8 +++----- src/elements/tabs/tab-label/tab-label.ts | 3 ++- 7 files changed, 25 insertions(+), 9 deletions(-) create mode 100644 src/elements/core/host.ts create mode 100644 src/elements/core/host/box-sizing.scss create mode 100644 src/elements/core/host/host.ts create mode 100644 src/elements/core/host/typo.scss diff --git a/src/elements/core/host.ts b/src/elements/core/host.ts new file mode 100644 index 0000000000..9556a7269c --- /dev/null +++ b/src/elements/core/host.ts @@ -0,0 +1 @@ +export * from './host/host.js'; diff --git a/src/elements/core/host/box-sizing.scss b/src/elements/core/host/box-sizing.scss new file mode 100644 index 0000000000..3f9d585b86 --- /dev/null +++ b/src/elements/core/host/box-sizing.scss @@ -0,0 +1,3 @@ +@use '../styles/mixins/helpers'; + +@include helpers.box-sizing; diff --git a/src/elements/core/host/host.ts b/src/elements/core/host/host.ts new file mode 100644 index 0000000000..81e564c61e --- /dev/null +++ b/src/elements/core/host/host.ts @@ -0,0 +1,2 @@ +export { default as boxSizingStyles } from './box-sizing.scss?lit&inline'; +export { default as typoStyles } from './typo.scss?lit&inline'; diff --git a/src/elements/core/host/typo.scss b/src/elements/core/host/typo.scss new file mode 100644 index 0000000000..58a3146826 --- /dev/null +++ b/src/elements/core/host/typo.scss @@ -0,0 +1,9 @@ +@use '../styles/mixins/typo'; + +:host { + @include typo.text($exclude-font-size: true); +} + +* { + letter-spacing: var(--sbb-typo-letter-spacing-body-text); +} diff --git a/src/elements/core/styles/mixins/typo.scss b/src/elements/core/styles/mixins/typo.scss index 1605ea7061..420d93d6a5 100644 --- a/src/elements/core/styles/mixins/typo.scss +++ b/src/elements/core/styles/mixins/typo.scss @@ -88,12 +88,14 @@ // ---------------------------------------------------------------------------------------------------- // Typo: Text Style Mixins // ---------------------------------------------------------------------------------------------------- -@mixin text($font-size: var(--sbb-text-font-size), $font-weight: normal) { +@mixin text($exclude-font-size: false) { font-family: var(--sbb-typo-font-family); - font-weight: $font-weight; + font-weight: normal; line-height: var(--sbb-typo-line-height-body-text); letter-spacing: var(--sbb-typo-letter-spacing-body-text); - font-size: $font-size; + @if not($exclude-font-size) { + font-size: var(--sbb-text-font-size); + } } @mixin text--bold { diff --git a/src/elements/tabs/tab-label/tab-label.scss b/src/elements/tabs/tab-label/tab-label.scss index 8c112e80c7..a02f2c53d4 100644 --- a/src/elements/tabs/tab-label/tab-label.scss +++ b/src/elements/tabs/tab-label/tab-label.scss @@ -1,8 +1,5 @@ @use '../../core/styles' as sbb; -// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. -@include sbb.box-sizing; - :host { --sbb-tab-label-height: var(--sbb-size-element-m); --sbb-tab-label-color: var(--sbb-color-granite); @@ -132,6 +129,7 @@ cursor: var(--sbb-tab-label-cursor); transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing); color: var(--sbb-tab-label-icon-color); + @include sbb.text--bold; // Show a border under the tab-group and between flex rows when the tab titles wrap to a new line &::after { @@ -171,7 +169,7 @@ .sbb-tab-label__text, .sbb-tab-label__amount { - @include sbb.text($font-size: var(--sbb-tab-label-font-size)); + font-size: var(--sbb-tab-label-font-size); @include sbb.font-smoothing; } @@ -187,11 +185,11 @@ transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing); @include sbb.ellipsis; - @include sbb.text--bold; } .sbb-tab-label__amount { display: var(--sbb-tab-label-amount-display, none); color: var(--sbb-tab-label-amount-color); transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing); + font-weight: normal; } diff --git a/src/elements/tabs/tab-label/tab-label.ts b/src/elements/tabs/tab-label/tab-label.ts index 51133d3e97..c8473aa9e2 100644 --- a/src/elements/tabs/tab-label/tab-label.ts +++ b/src/elements/tabs/tab-label/tab-label.ts @@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js'; import { html, unsafeStatic } from 'lit/static-html.js'; import { slotState } from '../../core/decorators.js'; +import { boxSizingStyles, typoStyles } from '../../core/host.js'; import { SbbDisabledMixin } from '../../core/mixins.js'; import { SbbIconNameMixin } from '../../icon.js'; import type { SbbTitleLevel } from '../../title.js'; @@ -20,7 +21,7 @@ import style from './tab-label.scss?lit&inline'; @customElement('sbb-tab-label') @slotState() export class SbbTabLabelElement extends SbbDisabledMixin(SbbIconNameMixin(LitElement)) { - public static override styles: CSSResultGroup = style; + public static override styles: CSSResultGroup = [boxSizingStyles, typoStyles, style]; /** * The level will correspond to the heading tag generated in the title.