Skip to content

feat(button): adopt outline flat style as the default look #2746

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
vladjerca wants to merge 1 commit into
base: main
Choose a base branch
from
+72 −36
Draft

feat(button): adopt outline flat style as the default look #2746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 38 additions & 31 deletions projects/client/src/lib/components/buttons/ActionButton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,11 @@
$bg: var(--color-background-#{$color});
$fg: var(--color-foreground-#{$color});

// Stable per-colour accent, immune to the hover fg/bg var-swap.
:global(#{$base}[data-color=#{$color}]) {
--accent-action-button: #{$bg};
}

@include variant-styles($base, $color, primary, $bg, $fg);
@include variant-styles($base, $color, secondary, $fg, $bg);

Expand Down Expand Up @@ -145,7 +150,7 @@
align-items: center;
flex-shrink: 0;

border-radius: var(--border-radius-m);
border-radius: var(--border-radius-l);
background-color: var(--color-background-action-button);
color: var(--color-foreground-action-button);

Expand Down Expand Up @@ -177,18 +182,42 @@
display: none;
}

// Flat is an outline matching the labelled buttons: accent ring + accent
// icon, primary heavier than secondary, colour-shift hover, no glow.
:global(#{$b}[data-style=flat][data-variant=primary]#{$on}) {
background-color: color-mix(in srgb, var(--accent-action-button) 14%, transparent);
color: var(--accent-action-button);
border: var(--border-thickness-xs) solid
color-mix(in srgb, var(--accent-action-button) 65%, transparent);
}
Comment on lines +185 to +192

@gemini-code-assist gemini-code-assist Bot Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Similar to the labelled buttons, the flat action button style now introduces a border. Since border-color is not included in the base transition properties of the action button, the border color changes will snap instantly on hover and active states.

We should override the transition-property for flat action buttons to include border-color to ensure smooth transitions.

  :global(#{$b}[data-style=flat]) {
    transition-property:
      background-color, color, box-shadow, transform, outline, outline-offset, border-color;
  }

  // Flat is an outline matching the labelled buttons: accent ring + accent
  // icon, primary heavier than secondary, colour-shift hover, no glow.
  :global(#{$b}[data-style=flat][data-variant=primary]#{$on}) {
    background-color: color-mix(in srgb, var(--accent-action-button) 14%, transparent);
    color: var(--accent-action-button);
    border: var(--border-thickness-xs) solid
      color-mix(in srgb, var(--accent-action-button) 65%, transparent);
  }

Comment on lines +190 to +192

@gemini-code-assist gemini-code-assist Bot Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Since the new flat style introduces an outline border whose color changes on hover and active states, border-color should transition smoothly. However, border-color is currently missing from the base transition-property list (defined around line 158). This causes the border color to snap instantly instead of transitioning smoothly alongside the background and text colors.

Please update the base transition-property list around line 158 to include border-color:

    transition-property:
      background-color, color, border-color, box-shadow, transform, outline, outline-offset;

Comment on lines +185 to +192

@gemini-code-assist gemini-code-assist Bot Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Since the new flat style introduces a border that changes color on hover and active states, we should include border-color in the transition properties. Currently, border-color is not transitioned, which causes the border color to change instantly while the background and other properties transition smoothly.

  // Flat is an outline matching the labelled buttons: accent ring + accent
  // icon, primary heavier than secondary, colour-shift hover, no glow.
  :global(#{$b}[data-style=flat]) {
    transition-property: background-color, color, border-color, box-shadow, transform, outline, outline-offset;
  }

  :global(#{$b}[data-style=flat][data-variant=primary]#{$on}) {
    background-color: color-mix(in srgb, var(--accent-action-button) 14%, transparent);
    color: var(--accent-action-button);
    border: var(--border-thickness-xs) solid
      color-mix(in srgb, var(--accent-action-button) 65%, transparent);
  }


:global(#{$b}[data-style=flat][data-variant=secondary]#{$on}) {
background-color: transparent;
color: var(--accent-action-button);
border: var(--border-thickness-xxs) solid
color-mix(in srgb, var(--accent-action-button) 30%, transparent);
}

@include for-mouse {
:global(#{$b}:hover#{$on}) {
box-shadow: 0 var(--ni-2) var(--ni-8) var(--ni-neg-2)
color-mix(
in srgb,
var(--color-background-action-button) 50%,
transparent
);
:global(#{$b}[data-style=flat][data-variant=primary]:hover#{$on}) {
background-color: color-mix(in srgb, var(--accent-action-button) 26%, transparent);
border-color: color-mix(in srgb, var(--accent-action-button) 95%, transparent);
}

:global(#{$b}[data-style=flat][data-variant=secondary]:hover#{$on}) {
background-color: color-mix(in srgb, var(--accent-action-button) 16%, transparent);
border-color: color-mix(in srgb, var(--accent-action-button) 60%, transparent);
}
}

:global(#{$b}:active#{$on}) {
:global(#{$b}[data-style=flat]:active#{$on}) {
transform: scale(0.92);
background-color: color-mix(in srgb, var(--accent-action-button) 36%, transparent);
border-color: var(--accent-action-button);
box-shadow: none;
}

:global(#{$b}[data-style=ghost]:active#{$on}) {
transform: scale(0.92);
box-shadow: none;
}
Expand All @@ -208,28 +237,6 @@
margin: var(--ni-4);
}

:global(#{$b}[data-variant=secondary]:not([data-style=ghost])#{$on}) {
background-color: color-mix(
in srgb,
var(--color-foreground-action-button) 5%,
transparent
);
border: var(--border-thickness-xxs) solid
color-mix(
in srgb,
var(--color-foreground-action-button) 50%,
transparent
);
color: var(--color-text-primary);
}

@include for-mouse {
:global(#{$b}[data-variant=secondary]:not([data-style=ghost])#{$on}:hover) {
background-color: var(--color-background-action-button);
color: var(--color-foreground-action-button);
}
}

:global(#{$b}[data-style=ghost]) {
background-color: transparent;
}
Expand Down
39 changes: 34 additions & 5 deletions projects/client/src/lib/components/buttons/Button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,12 @@
$bg: var(--color-background-#{$color});
$fg: var(--color-foreground-#{$color});

// Stable per-colour accent, immune to the hover fg/bg var-swap below.
// The outline flat style leans on this so its ring/text stay the accent.
:global(#{$base}[data-color=#{$color}]) {
--accent-button: #{$bg};
}

@include variant-styles($base, $color, primary, $bg, $fg);
@include variant-styles($base, $color, secondary, $fg, $bg);

Expand Down Expand Up @@ -251,7 +257,7 @@
:global(#{$b}:active[disabled]) {
height: var(--button-height);
box-sizing: border-box;
border-radius: var(--border-radius-m);
border-radius: var(--border-radius-l);

@gemini-code-assist gemini-code-assist Bot Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The default button radius has been updated to var(--border-radius-l) for a rounder, more tactile feel. However, the small button size ([data-size=small] around line 239) still explicitly overrides the border-radius using calc(var(--border-radius-m) * 0.8).

To maintain visual consistency across all button sizes under the new design language, please update the small button's border-radius around line 239 to scale from var(--border-radius-l) instead:

  border-radius: calc(var(--border-radius-l) * 0.8);

}

:global(#{$b}::before) {
Expand Down Expand Up @@ -344,16 +350,39 @@
outline: var(--border-thickness-xxs) solid var(--color-foreground);
}

// Flat is an outline: no heavy fill, accent ring + accent text. Primary
// leans heavier (thicker ring + a tint of fill); secondary is a quiet
// hairline ring. Hover/press are pure colour shifts - no lift, no glow.
:global(#{$b}[data-style=flat][data-variant=primary]#{$on}) {
background: color-mix(in srgb, var(--accent-button) 14%, transparent);
color: var(--accent-button);
border: var(--border-thickness-xs) solid
color-mix(in srgb, var(--accent-button) 65%, transparent);
}
Comment on lines +353 to +361

@gemini-code-assist gemini-code-assist Bot Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Since the flat button style now introduces a border, the border color changes on hover and active states. However, border-color is not included in the base transition properties of the button, which causes the border color to snap instantly while the background and text color transition smoothly.

We should override the transition-property for flat buttons to include border-color so that all visual states transition smoothly.

  :global(#{$b}[data-style=flat]) {
    transition-property:
      box-shadow, outline, outline-offset, padding, transform, color,
      background, text-decoration, border-color;
  }

  // Flat is an outline: no heavy fill, accent ring + accent text. Primary
  // leans heavier (thicker ring + a tint of fill); secondary is a quiet
  // hairline ring. Hover/press are pure colour shifts - no lift, no glow.
  :global(#{$b}[data-style=flat][data-variant=primary]#{$on}) {
    background: color-mix(in srgb, var(--accent-button) 14%, transparent);
    color: var(--accent-button);
    border: var(--border-thickness-xs) solid
      color-mix(in srgb, var(--accent-button) 65%, transparent);
  }

Comment on lines +359 to +361

@gemini-code-assist gemini-code-assist Bot Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Similar to the action button, the new flat style introduces an outline border whose color changes on hover and active states. Since border-color is missing from the base transition-property list (defined around line 177), the border color will snap instantly rather than transitioning smoothly.

Please update the base transition-property list around line 177 to include border-color:

    transition-property:
      box-shadow, outline, outline-offset, padding, transform, color,
      background, border-color, text-decoration;

Comment on lines +353 to +361

@gemini-code-assist gemini-code-assist Bot Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Since the new flat style introduces a border that changes color on hover and active states, we should include border-color in the transition properties. Currently, border-color is not transitioned, which causes the border color to change instantly while the background and other properties transition smoothly.

  // Flat is an outline: no heavy fill, accent ring + accent text. Primary
  // leans heavier (thicker ring + a tint of fill); secondary is a quiet
  // hairline ring. Hover/press are pure colour shifts - no lift, no glow.
  :global(#{$b}[data-style=flat]) {
    transition-property: box-shadow, outline, outline-offset, padding, transform, color, background, text-decoration, border-color;
  }

  :global(#{$b}[data-style=flat][data-variant=primary]#{$on}) {
    background: color-mix(in srgb, var(--accent-button) 14%, transparent);
    color: var(--accent-button);
    border: var(--border-thickness-xs) solid
      color-mix(in srgb, var(--accent-button) 65%, transparent);
  }


:global(#{$b}[data-style=flat][data-variant=secondary]#{$on}) {
background: transparent;
color: var(--accent-button);
border: var(--border-thickness-xxs) solid
color-mix(in srgb, var(--accent-button) 30%, transparent);
}

@include for-mouse {
:global(#{$b}[data-style=flat]:hover#{$on}) {
box-shadow: 0 var(--ni-4) var(--ni-12) var(--ni-neg-2)
color-mix(in srgb, var(--color-background-button) 45%, transparent);
transform: translateY(calc(var(--ni-1) * -1));
:global(#{$b}[data-style=flat][data-variant=primary]:hover#{$on}) {
background: color-mix(in srgb, var(--accent-button) 26%, transparent);
border-color: color-mix(in srgb, var(--accent-button) 95%, transparent);
}

:global(#{$b}[data-style=flat][data-variant=secondary]:hover#{$on}) {
background: color-mix(in srgb, var(--accent-button) 16%, transparent);
border-color: color-mix(in srgb, var(--accent-button) 60%, transparent);
}
}

:global(#{$b}[data-style=flat]:active#{$on}) {
transform: scale(calc(var(--scale-factor-button) * 0.97));
background: color-mix(in srgb, var(--accent-button) 36%, transparent);
border-color: var(--accent-button);
box-shadow: none;
}

Expand Down