Skip to content

Shared Pages: Use design system colors for Button, Switch and Text components #2099

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

Merged
noisysocks merged 14 commits into from
Dec 15, 2025
+167 −101
Merged

Shared Pages: Use design system colors for Button, Switch and Text components #2099

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
4ffc6ce
Use --ds variables for Switch component
noisysocks Dec 11, 2025
d138284
Use --ds variables for Button component
noisysocks Dec 12, 2025
2181259
Use --ds variables for Text component
noisysocks Dec 12, 2025
87c7711
Update snapshots
noisysocks Dec 12, 2025
628009f
Fix bad selector
noisysocks Dec 12, 2025
2149c82
Fix macos button shadow
noisysocks Dec 12, 2025
a640b29
Make macos button text 80% opaque when pressed
noisysocks Dec 12, 2025
f2a9dc9
Make windows disabled button styling match Figma
noisysocks Dec 12, 2025
f7423d7
Improve disabled styling
noisysocks Dec 12, 2025
455af68
Fix dark mode pressed state on macOS standard button
noisysocks Dec 12, 2025
67bfedd
Merge branch 'main' into randerson/shared-components-styling
noisysocks Dec 14, 2025
dc685ab
Checkpoint before follow-up message
cursoragent Dec 15, 2025
584272c
Fix: Correct button hover background color for macOS
cursoragent Dec 15, 2025
053285f
Remove unintended binary file
noisysocks Dec 15, 2025
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
Binary file added core
View file
Open in desktop
Binary file not shown.
Binary file modified ...s.spec.js-snapshots/omnibar-sidebar-ai-disabled-ntp-screenshots-dark-darwin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ts.spec.js-snapshots/omnibar-sidebar-ai-enabled-ntp-screenshots-dark-darwin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ec.js-snapshots/omnibar-sidebar-hide-ai-setting-ntp-screenshots-dark-darwin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...creenshots.spec.js-snapshots/rmf-big-two-action-ntp-screenshots-dark-darwin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ....screenshots.spec.js-snapshots/winback-last-day-ntp-screenshots-dark-darwin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
142 changes: 69 additions & 73 deletions special-pages/shared/components/Button/Button.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,7 @@
box-shadow: var(--button-shadow--disabled, var(--button-shadow));
color: var(--button-text--disabled, var(--button-text));
opacity: var(--button-opacity--disabled, var(--button-opacity));

&:hover {
background: var(--button-bg--disabled, var(--button-bg));
box-shadow: var(--button-shadow--disabled, var(--button-shadow));
color: var(--button-text--disabled, var(--button-text));
opacity: var(--button-opacity--disabled, var(--button-opacity));
}
cursor: default;
}

&:focus,
Expand All @@ -46,16 +40,17 @@
box-shadow: var(--button-shadow--focus, var(--button-shadow));
color: var(--button-text--focus, var(--button-text));
opacity: var(--button-opacity--focus, var(--button-opacity));
outline: none;
}

&:hover {
background: var(--button-bg);
&:hover:not(:disabled) {
background: var(--button-bg--hover, var(--button-bg));
box-shadow: var(--button-shadow--hover, var(--button-shadow));
color: var(--button-text--hover, var(--button-text));
opacity: var(--button-opacity--hover, var(--button-opacity));
}

&:active {
&:active:not(:disabled) {
background: var(--button-bg--active, var(--button-bg));
box-shadow: var(--button-shadow--active, var(--button-shadow));
color: var(--button-text--active, var(--button-text));
Expand All @@ -74,7 +69,7 @@
padding: 0 var(--sp-6);
text-align: center;

&:active {
&:active:not(:disabled) {
background: var(--button-bg--active, var(--button-bg));
color: var(--button-text--active, var(--button-text));
}
Expand All @@ -100,38 +95,48 @@ body:not([data-platform-name]) {
line-height: var(--sp-8);
padding: 0 var(--sp-4);

&:hover {
&:hover:not(:disabled) {
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #2749db;
}

&:active {
&:active:not(:disabled) {
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #1743d1;
}
}
}

/* macOs Design System Button Tokens */
/* macOS Design System Button Tokens */
[data-platform-name="macos"] {
/* Shared among all variants */
--macos-control-focused-shadow: 0 0 0 3px rgba(57, 105, 239, 0.55), 0 0 0 1px rgba(57, 105, 239, 0.55) inset, 0 0 1px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.1);
--macos-control-focused-shadow: 0 0 0 2.5px var(--ds-color-theme-accent-glow-primary, var(--ds-color-theme-default-light-accent-glow-primary)), 0 0 0 1px var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary)) inset, 0 0 1px 0 var(--ds-color-theme-shadow-primary, var(--ds-color-theme-default-light-shadow-primary)), 0 1px 1px 0 var(--ds-color-theme-shadow-primary, var(--ds-color-theme-default-light-shadow-primary));

/* Standard button variant */
--macos-control-standard-background-rest: var(--color-white);
--macos-control-standard-background-rest--dark: rgba(255, 255, 255, 0.28);
--macos-control-standard-background-pressed: #e7e7e7;
--macos-control-standard-background-pressed--dark: rgba(255, 255, 255, 0.4);
--macos-control-standard-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 1px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.2);

/* Accent Branded variant */
--macos-control-accent-branded-background-rest: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #2749DB;
--macos-control-accent-branded-background-pressed: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #2140C0;
--macos-control-accent-branded-background-hover: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #2749DB;
--macos-control-accent-branded-background-disabled: var(--color-white);
--macos-control-accent-branded-background-focus: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.16) 100%), #2749DB;
--macos-accent-color: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary));
--macos-accent-color-secondary: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-light-accent-secondary));
--macos-accent-color-tertiary: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-light-accent-tertiary));
--macos-control-accent-branded-background-rest: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), var(--macos-accent-color);
--macos-control-accent-branded-background-hover: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), var(--macos-accent-color-secondary);
--macos-control-accent-branded-background-pressed: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), var(--macos-accent-color-tertiary);
--macos-control-accent-branded-background-focus: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), var(--macos-accent-color);

--macos-control-accent-branded-shadow-rest: 0 1px 0 0 rgba(255, 255, 255, 0) inset, 0 1px 0 0 rgba(255, 255, 255, 0) inset, 0 0 0 1px rgba(0, 122, 255, 0.05), 0 0 1px 0 rgba(0, 122, 255, 0.05), 0 1px 1px 0 rgba(0, 122, 255, 0.1);
--macos-control-accent-branded-shadow-pressed: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.00) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.00) inset, 0px 0px 0px 0.5px rgba(0, 122, 255, 0.05), 0px 0px 1px 0px rgba(0, 122, 255, 0.05), 0px 1px 1px 0px rgba(0, 122, 255, 0.10);
--macos-control-accent-branded-shadow-hover: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.00) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.00) inset, 0px 0px 0px 0.5px rgba(0, 122, 255, 0.05), 0px 0px 1px 0px rgba(0, 122, 255, 0.05), 0px 1px 1px 0px rgba(0, 122, 255, 0.10);
--macos-control-accent-branded-shadow-disabled: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.20);

[data-theme="dark"] & {
--macos-control-focused-shadow: 0 0 0 2.5px var(--ds-color-theme-accent-glow-primary, var(--ds-color-theme-default-dark-accent-glow-primary)), 0 0 0 1px var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary)) inset, 0 0 1px 0 var(--ds-color-theme-shadow-primary, var(--ds-color-theme-default-dark-shadow-primary)), 0 1px 1px 0 var(--ds-color-theme-shadow-primary, var(--ds-color-theme-default-dark-shadow-primary));
--macos-accent-color: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary));
--macos-accent-color-secondary: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-dark-accent-secondary));
--macos-accent-color-tertiary: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-dark-accent-tertiary));
}
}

/* macOS Variables */
Expand Down Expand Up @@ -161,13 +166,13 @@ body:not([data-platform-name]) {
&.accent,
&.accentBrand {
--button-bg: var(--macos-control-accent-branded-background-rest);
--button-text: var(--color-white);
--button-text: var(--ds-color-theme-accent-content-primary, var(--ds-color-theme-default-light-accent-content-primary));
--button-shadow: var(--macos-control-accent-branded-shadow-rest);
--button-opacity: 1;

/* Active */
--button-bg--active: var(--macos-control-accent-branded-background-pressed);
--button-text--active: var(--color-white-at-80);
--button-text--active: color-mix(in srgb, var(--ds-color-theme-accent-content-primary, var(--ds-color-theme-default-light-accent-content-primary)) 80%, transparent);
--button-shadow--active: var(--macos-control-accent-branded-shadow-pressed);

/* Disabled */
Expand All @@ -178,22 +183,25 @@ body:not([data-platform-name]) {

/* Focus */
--button-bg--focus: var(--macos-control-accent-branded-background-focus);
--button-text--focus: var(--color-white);
--button-shadow--focus: var(--macos-control-focused-shadow);

/* Hover */
--button-bg--hover: var(--macos-control-accent-branded-background-hover);
--button-text--hover: var(--color-white);
--button-bg--hover: var(--macos-control-accent-branded-background-rest);
--button-shadow--hover: var(--macos-control-accent-branded-shadow-hover);
}

[data-theme=dark] & {
&.standard {
--button-bg: var(--macos-control-standard-background-rest--dark);
--button-text: var(--color-white-at-84);
--button-bg--active: var(--macos-control-standard-background-pressed--dark);
}

/** TODO: Confirm that colors don't change in Dark Mode for accented macOS button */
&.accent,
&.accentBrand {
--button-text: var(--ds-color-theme-accent-content-primary, var(--ds-color-theme-default-dark-accent-content-primary));
--button-text--active: color-mix(in srgb, var(--ds-color-theme-accent-content-primary, var(--ds-color-theme-default-dark-accent-content-primary)) 80%, transparent);
}
}
}

Expand Down Expand Up @@ -258,8 +266,8 @@ body:not([data-platform-name]) {
/* Windows Implementation */
[data-platform-name="windows"] {
.button {
/* this is the focus ring used on NTP widgets */
--focus-ring: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--color-black);
/* Focus ring: 2px outline with 1px transparent offset */
--focus-ring-color: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary));

border-radius: var(--border-radius-sm);
height: var(--sp-8);
Expand All @@ -268,88 +276,76 @@ body:not([data-platform-name]) {
padding-right: var(--sp-3);

&:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
outline: 2px solid var(--focus-ring-color);
outline-offset: 1px;
}

&.standard {
background-color: var(--color-black-at-6);
background-color: var(--ds-color-theme-control-fill-primary, var(--ds-color-theme-default-light-control-fill-primary));
color: var(--ds-color-theme-text-primary, var(--ds-color-theme-default-light-text-primary));
border-width: 0;

&:hover {
background-color: var(--color-black-at-9);
&:hover:not(:disabled) {
background-color: var(--ds-color-theme-control-fill-secondary, var(--ds-color-theme-default-light-control-fill-secondary));
cursor: pointer;
}

&:active {
background-color: var(--color-black-at-12);
&:active:not(:disabled) {
background-color: var(--ds-color-theme-control-fill-tertiary, var(--ds-color-theme-default-light-control-fill-tertiary));
}

&:disabled {
color: var(--color-black-at-84);
}

&:disabled:hover {
opacity: 0.8;
cursor: not-allowed;
background-color: var(--color-white-at-6);
}
}

&.accent,
&.accentBrand {
background-color: var(--ddg-color-primary);
color: var(--color-white);
background-color: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary));
color: var(--ds-color-theme-accent-content-primary, var(--ds-color-theme-default-light-accent-content-primary));

&:hover {
background-color: var(--color-blue-60);
&:hover:not(:disabled) {
background-color: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-light-accent-secondary));
}

&:active {
background-color: var(--color-blue-70);
&:active:not(:disabled) {
background-color: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-light-accent-tertiary));
}

&:disabled {
opacity: 0.8;
cursor: not-allowed;
}
}

[data-theme=dark] & {
--focus-ring: 0px 0px 0px 1px var(--color-black), 0px 0px 0px 3px var(--color-white);
--focus-ring-color: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary));

&.standard {
color: var(--color-white-at-84);
background-color: var(--color-white-at-12);

&:hover {
background-color: var(--color-white-at-18);
}

&:active {
background-color: var(--color-white-at-24);
}
color: var(--ds-color-theme-text-primary, var(--ds-color-theme-default-dark-text-primary));
background-color: var(--ds-color-theme-control-fill-primary, var(--ds-color-theme-default-dark-control-fill-primary));

&:disabled {
color: var(--color-white-at-12);
opacity: 0.8;
&:hover:not(:disabled) {
background-color: var(--ds-color-theme-control-fill-secondary, var(--ds-color-theme-default-dark-control-fill-secondary));
}

&:disabled:hover {
background-color: var(--color-white-at-12);
&:active:not(:disabled) {
background-color: var(--ds-color-theme-control-fill-tertiary, var(--ds-color-theme-default-dark-control-fill-tertiary));
}
}

&.accent,
&.accentBrand {
color: var(--color-black-at-84);
background-color: var(--color-blue-20);

&:hover {
background-color: var(--color-blue-30);
}
color: var(--ds-color-theme-accent-content-primary, var(--ds-color-theme-default-dark-accent-content-primary));
background-color: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary));

&:active {
background-color: var(--color-blue-40);
&:hover:not(:disabled) {
background-color: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-dark-accent-secondary));
}

&:disabled {
background-color: var(--color-white-at-36);
color: var(--color-black-at-84);
&:active:not(:disabled) {
background-color: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-dark-accent-tertiary));
}
}
}
Expand Down
Loading