diff --git a/.changeset/bold-swans-join.md b/.changeset/bold-swans-join.md new file mode 100644 index 00000000..c20fcc89 --- /dev/null +++ b/.changeset/bold-swans-join.md @@ -0,0 +1,5 @@ +--- +"@duskit/components": patch +--- + +fix(components): fixed `Notification` and `Tabs` accessing `Button` internals in their CSS diff --git a/.changeset/every-ads-film.md b/.changeset/every-ads-film.md new file mode 100644 index 00000000..deabce24 --- /dev/null +++ b/.changeset/every-ads-film.md @@ -0,0 +1,5 @@ +--- +"@duskit/css": patch +--- + +Updated the `--interactive-action-naked-bg-hover-color` contract to use a non-transparent colour. diff --git a/packages/components/src/notification/Notification.css b/packages/components/src/notification/Notification.css index c5c8d09b..a429927d 100644 --- a/packages/components/src/notification/Notification.css +++ b/packages/components/src/notification/Notification.css @@ -80,18 +80,18 @@ flex: 1; } -.dusk-notification__header .dusk-button--variant--naked { - --interactive-action-naked-text-color: var(--_header-text); - --interactive-action-naked-bg-hover-color: color-mix( - in srgb, - var(--_header-text) 15%, - transparent +.dusk-notification__btn-mark-as-read, +.dusk-notification__btn-dismiss { + padding: min( + var(--feedback-box-compact-padding-block), + var(--feedback-box-compact-padding-inline) ); - --interactive-action-naked-text-hover-color: var(--_header-text); - - padding: 0; - border: 0; aspect-ratio: 1; + + &, + &:is(:enabled:hover, :enabled:active) { + color: var(--_header-text); + } } .dusk-notification__body { diff --git a/packages/components/src/tabs/Tabs.css b/packages/components/src/tabs/Tabs.css index dcc60d16..87d3fdac 100644 --- a/packages/components/src/tabs/Tabs.css +++ b/packages/components/src/tabs/Tabs.css @@ -8,8 +8,11 @@ gap: var(--interactive-control-compact-gap); } -.dusk-button.dusk-icon-button.dusk-tab-scroll-button { - padding: 0; +.dusk-tab-scroll-button { + padding: min( + var(--interactive-control-compact-padding-block), + var(--interactive-control-compact-padding-inline) + ); border: 0; } diff --git a/packages/css/src/3-categories/interactive.css b/packages/css/src/3-categories/interactive.css index 21db3c00..a7366429 100644 --- a/packages/css/src/3-categories/interactive.css +++ b/packages/css/src/3-categories/interactive.css @@ -79,7 +79,11 @@ /* Naked action */ --interactive-action-naked-bg-color: transparent; - --interactive-action-naked-bg-hover-color: transparent; + --interactive-action-naked-bg-hover-color: color-mix( + in srgb, + currentcolor 15%, + transparent + ); --interactive-action-naked-border-color: transparent; --interactive-action-naked-border-hover-color: transparent; --interactive-action-naked-text-color: currentcolor;