Skip to content

NTP: Styling tweaks #2101

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 11 commits into from
Dec 15, 2025
Merged

NTP: Styling tweaks #2101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b8c2c26
Adjust tooltip and Customize drawer to fit Canvas -> Secondary -> Ter…
noisysocks Dec 12, 2025
1962752
Use --ds variable for SuggestionsList badge
noisysocks Dec 12, 2025
90d8a1e
Make dismiss buttons consistent and use use --ds colors
noisysocks Dec 12, 2025
2cbf026
Use --ds colors in NextSteps
noisysocks Dec 12, 2025
837f98b
Customizer drawer separator should have decoration color
noisysocks Dec 12, 2025
913781c
Use --ds colors in ShowHide and Customize button
noisysocks Dec 12, 2025
a7dad3b
Fix focus ring and restore it to black/white
noisysocks Dec 12, 2025
678a2e7
Merge branch 'main' into randerson/ntp-styling-tweaks
noisysocks Dec 12, 2025
78d1e05
Updated snapshots via workflow
github-actions[bot] Dec 12, 2025
07e7d02
Merge branch 'main' into randerson/ntp-styling-tweaks
noisysocks Dec 14, 2025
6d015a7
Fix: Improve focus styling for favorites and next steps
cursoragent 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.
2 changes: 1 addition & 1 deletion special-pages/pages/new-tab/app/components/App.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ body[data-animate-background="true"] {

.aside {
color: var(--ds-color-theme-text-primary);
background: var(--ds-color-theme-surface-tertiary);
background: var(--ds-color-theme-surface-secondary);
grid-area: aside;
height: 100vh;
z-index: 1;
Expand Down
37 changes: 6 additions & 31 deletions special-pages/pages/new-tab/app/components/DismissButton.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
padding: 0;
line-height: 1;
background-color: transparent;
color: var(--ds-color-theme-text-secondary);
color: var(--ds-color-theme-icons-secondary);
border: none;
border-radius: 50%;
transition: all .3s;
Expand All @@ -19,47 +19,22 @@
transform: translateX(-50%) translateY(-50%);
}

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

&:active {
background-color: var(--color-black-at-18);
color: var(--ds-color-theme-text-primary);
&:active:not(:disabled) {
background-color: var(--ds-color-theme-control-fill-secondary);
}

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

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

&:focus-visible {
box-shadow: var(--focus-ring);
outline: none;
}

[data-theme=dark] & {
&:hover {
background-color: var(--color-black-at-9);
}

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

&:disabled {
color: var(--color-white-at-12);
opacity: 0.8;
}

&:disabled:hover {
cursor: not-allowed;
background-color: var(--color-white-at-12);
}
}
}
10 changes: 6 additions & 4 deletions special-pages/pages/new-tab/app/components/Popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { h } from 'preact';
import { useEffect, useId, useRef } from 'preact/hooks';
import { useTypedTranslationWith } from '../types.js';
import { Cross } from './Icons.js';
import { DismissButton } from './DismissButton.jsx';
import styles from './Popover.module.css';

/**
Expand Down Expand Up @@ -44,9 +44,11 @@ export function Popover({ title, badge, onClose, children }) {
/>
</svg>
<div class={styles.content}>
<button class={styles.closeButton} onClick={onClose} aria-label={t('ntp_popover_close_button')}>
<Cross />
</button>
<DismissButton
className={styles.closeButton}
onClick={onClose}
buttonProps={{ 'aria-label': t('ntp_popover_close_button') }}
/>
<h3 id={titleId} class={styles.heading}>
{badge && <span class={styles.badge}>{badge}</span>}
<span class={styles.title}>{title}</span>
Expand Down
23 changes: 5 additions & 18 deletions special-pages/pages/new-tab/app/components/Popover.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,27 +23,9 @@
}

.closeButton {
background: none;
border-radius: 100%;
border: none;
color: var(--ds-color-theme-icons-primary);
cursor: pointer;
padding: 0;
position: absolute;
right: var(--sp-4);
top: var(--sp-4);

&:hover {
background: rgba(0, 0, 0, 0.06); /* @todo: dark mode? */
}

&:active {
background: rgba(0, 0, 0, 0.12); /* @todo: dark mode? */
}

&:focus-visible {
box-shadow: var(--focus-ring);
}
}

.heading {
Expand Down Expand Up @@ -86,6 +68,11 @@
&:active {
color: var(--ds-color-theme-accent-tertiary);
}

&:focus-visible {
box-shadow: var(--focus-ring);
outline: none;
}
}
}

Expand Down
19 changes: 4 additions & 15 deletions special-pages/pages/new-tab/app/components/ShowHide.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,24 +104,13 @@
}

&:hover {
background-color: var(--color-black-at-6);
background-color: var(--ds-color-theme-control-fill-secondary);
border-color: var(--ds-color-theme-control-border-secondary);
}

&:active {
background-color: var(--color-black-at-12);
}

[data-theme=dark] & {
border-color: var(--color-white-at-9);

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

&:active {
background-color: var(--color-white-at-12);
}
background-color: var(--ds-color-theme-control-fill-tertiary);
border-color: var(--ds-color-theme-control-border-tertiary);
}
}

Expand Down
12 changes: 3 additions & 9 deletions special-pages/pages/new-tab/app/components/Tooltip/Tooltip.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
}

.tooltipContainer:focus-visible {
outline: 2px solid var(--color-blue-50);
outline: 2px solid var(--ds-color-theme-accent-primary);
outline-offset: 2px;
}

Expand All @@ -17,11 +17,11 @@
left: calc(100% + 8px);
padding: 8px 16px;
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.98);
background-color: var(--ds-color-theme-surface-tertiary);
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.20);
font-size: 12px;
line-height: 15px;
color: var(--color-black-at-96);
color: var(--ds-color-theme-text-primary);
white-space: normal;
width: 236px;
z-index: 1000;
Expand All @@ -33,12 +33,6 @@
}
}

/* Dark mode styles */
[data-theme="dark"] .tooltip {
background-color: rgb(71, 71, 71);
color: var(--color-white-at-96);
}

@keyframes tooltipFadeIn {
from {
opacity: 0;
Expand Down
3 changes: 2 additions & 1 deletion special-pages/pages/new-tab/app/customizer/components/BrowserThemeSection.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@

&:focus-visible {
box-shadow: var(--focus-ring-primary);
outline: none;
}

&:active {
Expand Down Expand Up @@ -73,4 +74,4 @@
border: 1px solid var(--color-white-at-9);
background: var(--color-gray-80);
}
}
}
19 changes: 4 additions & 15 deletions special-pages/pages/new-tab/app/customizer/components/Customizer.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,30 +17,19 @@
gap: calc(6 * var(--px-in-rem));
color: var(--ds-color-theme-text-primary);

[data-theme=dark] & {
border-color: var(--color-white-at-9);
}

&:focus-visible {
box-shadow: var(--focus-ring);
outline: none;
}

&:hover {
background-color: var(--color-black-at-6);
border-color: var(--color-black-at-18);
[data-theme=dark] & {
background-color: var(--color-white-at-18);
border-color: var(--color-white-at-36);
}
background-color: var(--ds-color-theme-control-fill-secondary);
border-color: var(--ds-color-theme-control-border-secondary);
}

&:active {
background-color: var(--color-white-at-12);
[data-theme=dark] & {
background-color: var(--color-white-at-24);
border-color: var(--color-white-at-50);
}
background-color: var(--ds-color-theme-control-fill-tertiary);
border-color: var(--ds-color-theme-control-border-tertiary);
}

&[data-kind="drawer"][aria-expanded="true"] {
Expand Down
24 changes: 9 additions & 15 deletions special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,18 +37,14 @@
position: relative;
flex-shrink: 0;

color: var(--color-black-at-84);
background-color: var(--color-black-at-9);
&:hover {
background-color: var(--color-black-at-18);
background-color: var(--ds-color-theme-control-fill-primary);

&:hover:not(:disabled) {
background-color: var(--ds-color-theme-control-fill-secondary);
}

[data-theme="dark"] & {
color: var(--color-white-at-84);
background-color: var(--color-white-at-9);
&:hover {
background-color: var(--color-white-at-18);
}
&:active:not(:disabled) {
background-color: var(--ds-color-theme-control-fill-tertiary);
}
}
.backBtn {
Expand Down Expand Up @@ -76,7 +72,7 @@
width: 100%;
}
.borderedSection {
border-top: 1px solid var(--ds-color-theme-container-border-primary);
border-top: 1px solid var(--ds-color-theme-surface-decoration-primary);
padding-top: calc(18 * var(--px-in-rem))
}
.sectionBody {
Expand Down Expand Up @@ -257,10 +253,8 @@
color: var(--ds-color-theme-accent-primary);
margin-bottom: var(--sp-3);

&:focus {
outline: none;
}
&:focus-visible {
text-decoration: underline;
box-shadow: var(--focus-ring);
outline: none;
}
}
7 changes: 3 additions & 4 deletions special-pages/pages/new-tab/app/favorites/components/Favorites.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,9 @@
margin-bottom: var(--sp-4);
}

&:hover {
[data-show-hide] {
opacity: 1;
}
&:hover [data-show-hide],
& [data-show-hide]:focus-within {
opacity: 1;
}
}

Expand Down
46 changes: 9 additions & 37 deletions special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,56 +57,29 @@
transition: opacity .3s ease-out;

&:active {
background-color: var(--color-black-at-6);
background-color: var(--ds-color-theme-control-fill-tertiary);
opacity: 0;
}
}

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

&:active {
background-color: var(--ds-color-theme-accent-primary);
color: var(--ds-color-theme-accent-content-primary);
&:active:not(:disabled) {
background-color: var(--ds-color-theme-control-fill-tertiary);
}

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

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

&:focus-visible {
box-shadow: var(--focus-ring);
outline: none;
}

[data-theme=dark] & {
&.supressActiveStateForSwitchToConfirmationText {
&:active {
background-color: var(--color-black-at-9);
}
}

&:hover:not(:active) {
background-color: var(--color-black-at-9);
}

&:disabled {
color: var(--color-white-at-12);
opacity: 0.8;
}

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

.confirmation {
Expand Down Expand Up @@ -149,10 +122,9 @@
opacity: 0;
}

&:hover {
[data-show-hide] {
opacity: 1;
}
&:hover [data-show-hide],
& [data-show-hide]:focus-within {
opacity: 1;
}
}

Expand Down
2 changes: 1 addition & 1 deletion special-pages/pages/new-tab/app/omnibar/components/SuggestionsList.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
}

.badge {
background: var(--color-white-at-30); /* @fixme: Should use a --ntp theme variable for this. This pill design differs from Figma, though */
background: var(--ds-color-theme-accent-secondary);
}
}

Expand Down
Loading
Loading