From 84e24e1df83806a139f4b402336cf1c8ada58d67 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 22 Jul 2025 18:28:08 +0200 Subject: Various fixes --- src/objects/_action-button.vars.scss | 2 +- src/objects/_card.scss | 31 +++++++++++++++++++------------ src/objects/_card.vars.scss | 6 ++++++ src/objects/_checkbox.vars.scss | 2 +- src/objects/_emoji.vars.scss | 2 +- src/objects/_popover.vars.scss | 9 +++------ src/objects/_radio.vars.scss | 2 +- src/objects/_side-nav.vars.scss | 2 +- src/objects/_switch.vars.scss | 2 +- src/objects/_tabbar.vars.scss | 2 +- src/objects/_table.vars.scss | 2 +- src/objects/_thumbnail.vars.scss | 2 +- 12 files changed, 37 insertions(+), 27 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss index 84bb415..10d345b 100644 --- a/src/objects/_action-button.vars.scss +++ b/src/objects/_action-button.vars.scss @@ -52,7 +52,7 @@ $default-theme-override: () !default; $default-theme: map.deep-merge(( --bg-color: props.get(core.$theme, --bg-l2), --label-color: props.get(core.$theme, --text), - --border-color: props.get(core.$theme, --border-mute) props.get(core.$theme, --border-mute) props.get(core.$theme, --border), + --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), --shadow-color: props.get(core.$theme, --shadow), --hover: ( diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 6b80e2f..966bcd0 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -14,7 +14,6 @@ position: relative; display: flex; flex-direction: column; - background-clip: content-box; background-color: props.get(vars.$bg-color); border: props.get(vars.$border-width) solid transparent; border-color: props.get(vars.$border-color); @@ -42,19 +41,31 @@ } } + @include bem.modifier('borderless') { + border-color: props.get(vars.$bg-color); + + @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + &:hover, + &:active { + border-color: props.get(vars.$hover--bg-color); + } + } + } + @include bem.elem('avatar') { margin-block-start: props.get(vars.$pad-b); margin-inline-start: props.get(vars.$pad-i); } @include bem.elem('image') { - position: relative; - display: block; - flex: 0 0 auto; - inline-size: 100%; - overflow: hidden; - object-fit: cover; - transition: background-color .2s, transform .2s, opacity .2s; + position: relative; + display: block; + flex: 0 0 auto; + inline-size: calc(100% + 2 * props.get(vars.$border-width)); + margin: calc(-1 * props.get(vars.$border-width)); + overflow: hidden; + object-fit: cover; + transition: background-color .2s, transform .2s, opacity .2s; &:first-child { border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); @@ -121,7 +132,6 @@ margin-inline: 0; background-color: transparent; border: 0; - box-shadow: none; @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { &:hover, @@ -141,7 +151,6 @@ margin: 0; outline: none; border: 0; - box-shadow: none; @include bem.elem('image') { margin: calc(-1 * props.get(vars.$key-focus--border-width)); @@ -179,8 +188,6 @@ @include bem.modifier('thumbnail') { @include bem.elem('image') { - inline-size: calc(100% + 2 * props.get(vars.$border-width)); - margin: calc(-1 * props.get(vars.$border-width)); border-radius: props.get(vars.$rounding); } diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss index c5bbc0d..592182e 100644 --- a/src/objects/_card.vars.scss +++ b/src/objects/_card.vars.scss @@ -14,10 +14,16 @@ $image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad- $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; +$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l2--x)) !default; +$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l2--y)) !default; +$shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l2--blur)) !default; +$shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l2--grow)) !default; + $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$shadow-color: props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default; $bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; $border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default; $divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss index aee26e6..25a0d3d 100644 --- a/src/objects/_checkbox.vars.scss +++ b/src/objects/_checkbox.vars.scss @@ -7,7 +7,7 @@ $label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125)) $border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default; $pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default; $pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default; -$rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding--sm)) !default; $spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default; $key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss index fbfb935..073f88b 100644 --- a/src/objects/_emoji.vars.scss +++ b/src/objects/_emoji.vars.scss @@ -4,7 +4,7 @@ $size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; $pad: props.def(--o-emoji--pad, .3em) !default; -$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding--sm)) !default; $zoom: props.def(--o-emoji--zoom, 3) !default; $valign: props.def(--o-emoji--valign, -.25em) !default; diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss index 451cc18..e560d1b 100644 --- a/src/objects/_popover.vars.scss +++ b/src/objects/_popover.vars.scss @@ -14,9 +14,6 @@ $shadow-y: props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) ! $shadow-blur: props.def(--o-popover--shadow-blur, props.get(core.$shadow--l2--blur)) !default; $shadow-grow: props.def(--o-popover--shadow-grow, props.get(core.$shadow--l2--grow)) !default; -$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; -$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border-mute) props.get(core.$theme, --border-mute) props.get(core.$theme, --border), 'color') !default; - -$shadow-color: props.def(--o-popover--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default; - -$border-color-dark: props.def(--o-popover--border-color, props.get(core.$theme, --border-mute), 'dark') !default; +$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; +$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), 'color') !default; +$shadow-color: props.def(--o-popover--shadow-color, props.get(core.$theme, --shadow), 'color') !default; diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss index 51ea581..b18ae2b 100644 --- a/src/objects/_radio.vars.scss +++ b/src/objects/_radio.vars.scss @@ -7,7 +7,7 @@ $label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) ! $border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default; $pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default; $pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default; -$rounding: props.def(--o-radio--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-radio--rounding, props.get(core.$rounding--sm)) !default; $spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default; $key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss index 122dba6..711b2a7 100644 --- a/src/objects/_side-nav.vars.scss +++ b/src/objects/_side-nav.vars.scss @@ -8,7 +8,7 @@ $separator: props.def(--o-side-nav--separator, props.get(core.$size--200 $item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; $item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default; -$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding)) !default; +$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default; $item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; $item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss index 85596af..10489a5 100644 --- a/src/objects/_switch.vars.scss +++ b/src/objects/_switch.vars.scss @@ -8,7 +8,7 @@ $label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) ! $border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default; $pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default; $pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default; -$rounding: props.def(--o-switch--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-switch--rounding, props.get(core.$rounding--sm)) !default; $spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default; $key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss index f4486d6..4095629 100644 --- a/src/objects/_tabbar.vars.scss +++ b/src/objects/_tabbar.vars.scss @@ -4,7 +4,7 @@ @use '../core.vars' as core; $block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default; -$rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !default; $spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default; $tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default; diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss index d1d53d7..b8d8093 100644 --- a/src/objects/_table.vars.scss +++ b/src/objects/_table.vars.scss @@ -4,7 +4,7 @@ $pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; $pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default; -$rounding: props.def(--o-table--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-table--rounding, props.get(core.$rounding--sm)) !default; $border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default; $heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default; diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss index ba8cebe..60bf2e9 100644 --- a/src/objects/_thumbnail.vars.scss +++ b/src/objects/_thumbnail.vars.scss @@ -4,7 +4,7 @@ @use '../core.vars' as core; $size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default; -$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default; $spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default; -- cgit v1.2.3-70-g09d2