feat(button): adopt outline flat style as the default look - #2746
feat(button): adopt outline flat style as the default look#2746vladjerca wants to merge 1 commit into
Conversation
Make the redesigned look the app-wide default: flat buttons become an outline (accent ring + accent text/icon, primary heavier than secondary) instead of a solid fill, with a rounder radius and colour-shift hover/press (no lift, no glow). A swap-immune --accent-button/--accent-action-button is derived per colour so the outline survives the hover fg/bg var-swap. Ghost, underlined and disabled states keep their baseline behaviour.
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request updates the application's design system by standardizing the default button appearance to an outline-based style. The changes focus on improving visual consistency and tactile feedback by refining border radii, simplifying interaction states, and establishing a clear primary/secondary hierarchy across both standard and action buttons. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize the Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counterproductive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request updates the application's design system by standardizing the default button appearance to an outline-based style. The changes aim to modernize the UI by adopting a cleaner, more tactile aesthetic while ensuring consistent interaction states across both standard and action buttons. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize the Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counterproductive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new "flat" outline style for both Button and ActionButton components, utilizing a stable per-color accent variable to maintain consistent text and border colors during hover state swaps. It also updates the border radius of these buttons from medium to large. The review feedback highlights that since a border is introduced, border-color should be added to the transition properties of both components to prevent the border color from snapping instantly on hover and active states.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| // 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); | ||
| } |
There was a problem hiding this comment.
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);
}
| // 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); | ||
| } |
There was a problem hiding this comment.
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);
}
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request updates the application's button design system to adopt an 'outline' style as the default look. By moving away from solid fills, the new design provides a cleaner, more modern aesthetic with improved visual hierarchy and tactile feedback. The changes standardize the button appearance across both standard and action buttons while ensuring consistent behavior for hover and active states. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize the Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counterproductive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
There was a problem hiding this comment.
Code Review
This pull request introduces a new 'flat' outline style variant for both ActionButton and Button components, featuring custom hover and active states. It also updates the default border-radius of these buttons from medium to large. The review feedback suggests adding border-color to the base transition properties in both components to ensure smooth visual transitions for the new outline borders. Additionally, it recommends updating the small button size's border-radius calculation to scale from the new large border-radius variable for design consistency.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| border: var(--border-thickness-xs) solid | ||
| color-mix(in srgb, var(--accent-action-button) 65%, transparent); | ||
| } |
There was a problem hiding this comment.
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;| border: var(--border-thickness-xs) solid | ||
| color-mix(in srgb, var(--accent-button) 65%, transparent); | ||
| } |
There was a problem hiding this comment.
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;| height: var(--button-height); | ||
| box-sizing: border-box; | ||
| border-radius: var(--border-radius-m); | ||
| border-radius: var(--border-radius-l); |
There was a problem hiding this comment.
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);
There was a problem hiding this comment.
Code Review
This pull request introduces a new flat outline style for both ActionButton and Button components, featuring accent rings and text with distinct primary and secondary variants. It also updates the border radius to a larger size and establishes stable per-color accent variables to prevent issues during hover state swaps. The reviewer suggests adding border-color to the transition properties for the new flat style in both components to ensure smooth transitions during hover and active states.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| // 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); | ||
| } |
There was a problem hiding this comment.
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);
}
| // 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); | ||
| } |
There was a problem hiding this comment.
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);
}
d6ed106 to
637bdc2
Compare
2 participants
What
Makes the redesigned button look the app-wide default (builds on the bits-ui port from #2733).
--border-radius-l) for a more tactile feel.--accent-button/--accent-action-buttonis derived per colour so the outline's ring/text survive the existing hover fg/bg var-swap.The 5 explored variants (aurora/glass/elevated/outline/tactile) and the design-system toggle were scaffolding; this PR ships only the chosen merge ("outline + tactile radius"). The DS buttons page is unchanged from main.
Notes
solidstyle rather than reverting the default.Test
deno task check: 0 errors / 0 warningsdeno task test:unit(buttons): 24 passed