From 35b9d7aeff3cefa0fb0b8cc7e3a00017738d4eb4 Mon Sep 17 00:00:00 2001 From: michal-sanoma Date: Fri, 8 May 2026 20:14:49 +0200 Subject: [PATCH 1/7] chore(paginator): low contrast + selected state --- packages/components/button/src/button.scss | 7 ++-- .../components/paginator/src/paginator.scss | 36 +++++++++++-------- 2 files changed, 25 insertions(+), 18 deletions(-) diff --git a/packages/components/button/src/button.scss b/packages/components/button/src/button.scss index 21c806067a..83447e26c4 100644 --- a/packages/components/button/src/button.scss +++ b/packages/components/button/src/button.scss @@ -232,12 +232,13 @@ button { appearance: none; background: color-mix( in srgb, - var(--_bg-color), - var(--_bg-mix-color) calc(100% * var(--_bg-opacity)) + var(--sl-button-bg-color, var(--_bg-color)), + var(--sl-button-bg-mix-color, var(--_bg-mix-color)) + calc(100% * var(--sl-button-bg-opacity, var(--_bg-opacity))) ); border: var(--sl-size-borderWidth-action) solid var(--sl-color-border-secondary-bold); border-radius: var(--sl-size-borderRadius-default); - color: var(--sl-color-foreground-secondary-bold); + color: var(--sl-button-color, var(--sl-color-foreground-secondary-bold)); cursor: pointer; display: inline-flex; font: inherit; diff --git a/packages/components/paginator/src/paginator.scss b/packages/components/paginator/src/paginator.scss index 5f33014066..ff74a24aa9 100644 --- a/packages/components/paginator/src/paginator.scss +++ b/packages/components/paginator/src/paginator.scss @@ -30,11 +30,24 @@ } .page { + --sl-button-bg-color: transparent; + --sl-button-bg-mix-color: var(--sl-color-background-neutral-interactive-plain); + --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-idle); + --sl-button-color: var(--sl-color-foreground-neutral-bold); + box-sizing: border-box; color: var(--sl-color-foreground-neutral-bold); flex-shrink: 0; inline-size: calc(1lh + (var(--sl-size-100) * 2)); padding-inline: 0; + + &:hover { + --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-hover); + } + + &:active { + --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-active); + } } :host([size='sm']) { @@ -50,30 +63,23 @@ } .current { - --_bg-color: var(--sl-color-background-selected-subtle); - --_bg-mix-color: var(--sl-color-background-primary-interactive-plain); - --_bg-opacity: var(--sl-opacity-interactive-plain-idle); - - color: var(--sl-color-foreground-primary-bold); + --sl-button-bg-color: var(--sl-color-background-primary-bold); + --sl-button-bg-mix-color: var(--sl-color-background-primary-interactive-bold); + --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-idle); + --sl-button-color: var(--sl-color-foreground-primary-onBold); &:hover { - --_bg-opacity: var(--sl-opacity-interactive-plain-hover); + --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-hover); } &:active { - --_bg-opacity: var(--sl-opacity-interactive-plain-active); + --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-active); } } :host([emphasis='bold']) .current { - --_bg-color: var(--sl-color-background-selected-bold); - --_bg-mix-color: var(--sl-color-background-selected-interactive-bold); - - color: var(--sl-color-foreground-primary-onBold); -} - -:host([emphasis='bold']) .current:not(:hover, :active) { - --_bg-opacity: var(--sl-opacity-interactive-bold-idle); + --sl-button-bg-color: var(--sl-color-background-primary-bold); + --sl-button-bg-mix-color: var(--sl-color-background-primary-interactive-bold); } .wrapper { From ad31d1d6076751400c335b35fd42dbaee40f82d2 Mon Sep 17 00:00:00 2001 From: michal-sanoma Date: Thu, 21 May 2026 16:19:53 +0200 Subject: [PATCH 2/7] chore(paginator): low contrast + selected state --- .../components/paginator/src/paginator.scss | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/components/paginator/src/paginator.scss b/packages/components/paginator/src/paginator.scss index ff74a24aa9..eeb131c251 100644 --- a/packages/components/paginator/src/paginator.scss +++ b/packages/components/paginator/src/paginator.scss @@ -63,10 +63,10 @@ } .current { - --sl-button-bg-color: var(--sl-color-background-primary-bold); - --sl-button-bg-mix-color: var(--sl-color-background-primary-interactive-bold); + --sl-button-bg-color: var(--sl-color-background-selected-subtle); + --sl-button-bg-mix-color: var(--sl-color-background-primary-interactive-plain); --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-idle); - --sl-button-color: var(--sl-color-foreground-primary-onBold); + --sl-button-color: var(--sl-color-foreground-primary-bold); &:hover { --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-hover); @@ -78,8 +78,18 @@ } :host([emphasis='bold']) .current { - --sl-button-bg-color: var(--sl-color-background-primary-bold); - --sl-button-bg-mix-color: var(--sl-color-background-primary-interactive-bold); + --sl-button-bg-color: var(--sl-color-background-selected-bold); + --sl-button-bg-mix-color: var(--sl-color-background-selected-interactive-bold); + --sl-button-color: var(--sl-color-foreground-primary-onBold); + --sl-button-bg-opacity: var(--sl-opacity-interactive-bold-idle); + + &:hover { + --sl-button-bg-opacity: var(--sl-opacity-interactive-bold-hover); + } + + &:active { + --sl-button-bg-opacity: var(--sl-opacity-interactive-bold-active); + } } .wrapper { From 6f16aeedda376c32473070c08274cc0517cced00 Mon Sep 17 00:00:00 2001 From: michal-sanoma Date: Thu, 21 May 2026 17:20:47 +0200 Subject: [PATCH 3/7] chore(paginator): low contrast + selected state --- .changeset/solid-badgers-fall.md | 10 ++++++++++ packages/components/button/src/button.scss | 3 +++ packages/components/paginator/src/paginator.scss | 1 - 3 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 .changeset/solid-badgers-fall.md diff --git a/.changeset/solid-badgers-fall.md b/.changeset/solid-badgers-fall.md new file mode 100644 index 0000000000..fbd21eca8b --- /dev/null +++ b/.changeset/solid-badgers-fall.md @@ -0,0 +1,10 @@ +--- +'@sl-design-system/paginator': patch +'@sl-design-system/button': patch +--- + +Fix paginator page-state styling and align selected/non-selected interaction states with design tokens. + +Paginator now drives page button colors via dedicated `--sl-button-*` CSS variables, including hover/active state opacity differences for subtle vs bold emphasis. + +Button now supports these external style overrides in its background/color rendering with safe fallbacks to internal defaults, enabling parent components (such as paginator) to control state styling without breaking existing behavior. diff --git a/packages/components/button/src/button.scss b/packages/components/button/src/button.scss index 6c4e0c4419..5bcd2fd95f 100644 --- a/packages/components/button/src/button.scss +++ b/packages/components/button/src/button.scss @@ -230,6 +230,9 @@ button { align-items: center; appearance: none; + + // Allows parent components (e.g. paginator) to drive button interaction colors via --sl-button-*, + // while keeping the internal defaults as fallback. background: color-mix( in srgb, var(--sl-button-bg-color, var(--_bg-color)), diff --git a/packages/components/paginator/src/paginator.scss b/packages/components/paginator/src/paginator.scss index eeb131c251..008b65addc 100644 --- a/packages/components/paginator/src/paginator.scss +++ b/packages/components/paginator/src/paginator.scss @@ -36,7 +36,6 @@ --sl-button-color: var(--sl-color-foreground-neutral-bold); box-sizing: border-box; - color: var(--sl-color-foreground-neutral-bold); flex-shrink: 0; inline-size: calc(1lh + (var(--sl-size-100) * 2)); padding-inline: 0; From 3bdc1856c7e49b0391bcae18996213d64344521b Mon Sep 17 00:00:00 2001 From: michal-sanoma Date: Fri, 22 May 2026 15:31:44 +0200 Subject: [PATCH 4/7] chore(paginator): low contrast + selected state --- packages/components/button/src/button.scss | 10 +++++++- .../components/paginator/src/paginator.scss | 24 ++++++------------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/packages/components/button/src/button.scss b/packages/components/button/src/button.scss index 5bcd2fd95f..5c0485863b 100644 --- a/packages/components/button/src/button.scss +++ b/packages/components/button/src/button.scss @@ -109,7 +109,7 @@ } :host(:is(:not([fill]), [fill='ghost'], [fill='link'], [fill='solid'])) button { - border-color: transparent; + border-color: var(--sl-button-border-color, transparent); } :host([fill='ghost']) button { @@ -262,10 +262,18 @@ button { } &:hover { + --sl-button-bg-opacity: var( + --sl-button-bg-opacity-hover, + var(--sl-opacity-interactive-bold-hover) + ); --_bg-opacity: var(--sl-opacity-interactive-bold-hover); } &:active { + --sl-button-bg-opacity: var( + --sl-button-bg-opacity-active, + var(--sl-opacity-interactive-bold-active) + ); --_bg-opacity: var(--sl-opacity-interactive-bold-active); } diff --git a/packages/components/paginator/src/paginator.scss b/packages/components/paginator/src/paginator.scss index 008b65addc..1899e7fcc1 100644 --- a/packages/components/paginator/src/paginator.scss +++ b/packages/components/paginator/src/paginator.scss @@ -62,33 +62,23 @@ } .current { - --sl-button-bg-color: var(--sl-color-background-selected-subtle); + --sl-button-bg-color: transparent; --sl-button-bg-mix-color: var(--sl-color-background-primary-interactive-plain); --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-idle); + --sl-button-bg-opacity-hover: var(--sl-opacity-interactive-plain-hover); + --sl-button-bg-opacity-active: var(--sl-opacity-interactive-plain-active); + --sl-button-border-color: var(--sl-color-border-selected); --sl-button-color: var(--sl-color-foreground-primary-bold); - - &:hover { - --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-hover); - } - - &:active { - --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-active); - } } :host([emphasis='bold']) .current { --sl-button-bg-color: var(--sl-color-background-selected-bold); --sl-button-bg-mix-color: var(--sl-color-background-selected-interactive-bold); + --sl-button-border-color: transparent; --sl-button-color: var(--sl-color-foreground-primary-onBold); --sl-button-bg-opacity: var(--sl-opacity-interactive-bold-idle); - - &:hover { - --sl-button-bg-opacity: var(--sl-opacity-interactive-bold-hover); - } - - &:active { - --sl-button-bg-opacity: var(--sl-opacity-interactive-bold-active); - } + --sl-button-bg-opacity-hover: var(--sl-opacity-interactive-bold-hover); + --sl-button-bg-opacity-active: var(--sl-opacity-interactive-bold-active); } .wrapper { From 89e2e3399d8ab8ac0344410f951469d1b6f08905 Mon Sep 17 00:00:00 2001 From: michal-sanoma Date: Fri, 22 May 2026 15:40:41 +0200 Subject: [PATCH 5/7] chore(paginator): low contrast + selected state --- packages/components/paginator/src/paginator.scss | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/components/paginator/src/paginator.scss b/packages/components/paginator/src/paginator.scss index 1899e7fcc1..a569909d34 100644 --- a/packages/components/paginator/src/paginator.scss +++ b/packages/components/paginator/src/paginator.scss @@ -33,20 +33,14 @@ --sl-button-bg-color: transparent; --sl-button-bg-mix-color: var(--sl-color-background-neutral-interactive-plain); --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-idle); + --sl-button-bg-opacity-hover: var(--sl-opacity-interactive-plain-hover); + --sl-button-bg-opacity-active: var(--sl-opacity-interactive-plain-active); --sl-button-color: var(--sl-color-foreground-neutral-bold); box-sizing: border-box; flex-shrink: 0; inline-size: calc(1lh + (var(--sl-size-100) * 2)); padding-inline: 0; - - &:hover { - --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-hover); - } - - &:active { - --sl-button-bg-opacity: var(--sl-opacity-interactive-plain-active); - } } :host([size='sm']) { From 273128f120f12ce92d90357b3b95c18b0e24b648 Mon Sep 17 00:00:00 2001 From: michal-sanoma Date: Fri, 22 May 2026 15:48:56 +0200 Subject: [PATCH 6/7] chore(paginator): low contrast + selected state --- packages/components/button/src/button.scss | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/components/button/src/button.scss b/packages/components/button/src/button.scss index 5c0485863b..a27f5d96e2 100644 --- a/packages/components/button/src/button.scss +++ b/packages/components/button/src/button.scss @@ -262,18 +262,12 @@ button { } &:hover { - --sl-button-bg-opacity: var( - --sl-button-bg-opacity-hover, - var(--sl-opacity-interactive-bold-hover) - ); + --sl-button-bg-opacity: var(--sl-button-bg-opacity-hover, var(--_bg-opacity)); --_bg-opacity: var(--sl-opacity-interactive-bold-hover); } &:active { - --sl-button-bg-opacity: var( - --sl-button-bg-opacity-active, - var(--sl-opacity-interactive-bold-active) - ); + --sl-button-bg-opacity: var(--sl-button-bg-opacity-active, var(--_bg-opacity)); --_bg-opacity: var(--sl-opacity-interactive-bold-active); } From 6642fd847082b7f5fb6cff39ace8af8d7bba6ce8 Mon Sep 17 00:00:00 2001 From: michal-sanoma Date: Tue, 26 May 2026 19:36:56 +0200 Subject: [PATCH 7/7] chore(paginator): low contrast + selected state --- packages/components/paginator/src/paginator.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/paginator/src/paginator.scss b/packages/components/paginator/src/paginator.scss index a569909d34..b1c43819a0 100644 --- a/packages/components/paginator/src/paginator.scss +++ b/packages/components/paginator/src/paginator.scss @@ -66,8 +66,8 @@ } :host([emphasis='bold']) .current { - --sl-button-bg-color: var(--sl-color-background-selected-bold); - --sl-button-bg-mix-color: var(--sl-color-background-selected-interactive-bold); + --sl-button-bg-color: var(--sl-color-background-primary-bold); + --sl-button-bg-mix-color: var(--sl-color-background-primary-interactive-bold); --sl-button-border-color: transparent; --sl-button-color: var(--sl-color-foreground-primary-onBold); --sl-button-bg-opacity: var(--sl-opacity-interactive-bold-idle);