Skip to content

Commit 3e7df8b

Browse files
ifahimrezaclaude
ifahimreza
and
claude
committed
Light-only: adopt @plugpress/ui v0.2.0, remove theme toggle
The design system dropped dark mode in v0.2.0, so Saddle removes its theme toggle and stays light: drop the useTheme hook + the ThemeIcon button (App + TopBar), and the server-rendered data-pp-theme / saddle_admin_theme boot in PHP (keeping the pp-scope body class). Tokens already alias --pp-*, so the app is light-only automatically. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 parent 0f32d35 commit 3e7df8b

8 files changed

Lines changed: 28 additions & 106 deletions

File tree

‎admin/build/index.asset.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-element', 'wp-i18n'), 'version' => '56d080aeafe3fb671f91');
1+
<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-element', 'wp-i18n'), 'version' => 'ed6b5eb5eb199d9db251');

‎admin/build/index.js‎

Lines changed: 15 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎admin/src/App.jsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
* forms. All the protocol machinery stays out of sight.
1010
*/
1111
import { useState, useEffect, useCallback, useRef } from '@wordpress/element';
12-
import { useTheme } from '@plugpress/ui';
1312
import { Spinner, Notice } from './ui';
1413
import { __, sprintf, _n } from '@wordpress/i18n';
1514
import { api } from './api';
@@ -120,17 +119,6 @@ export default function App() {
120119
const [ tab, setTabState ] = useState( tabFromHash );
121120
const [ wizardOpen, setWizardOpen ] = useState( false );
122121

123-
// Theme cycles system → dark → light via the design-system hook, which sets
124-
// data-pp-theme on <body> (so portaled surfaces inherit it) and persists the
125-
// choice best-effort in the background.
126-
const { theme, cycle: cycleTheme } = useTheme( {
127-
initial: window.saddleData?.theme || 'system',
128-
persist: ( next ) =>
129-
api( 'settings', { method: 'POST', data: { theme: next } } ).catch(
130-
() => {}
131-
),
132-
} );
133-
134122
// Navigating writes the hash; state follows the hashchange event, so
135123
// back/forward and direct #links all land in the same code path.
136124
const setTab = ( name ) => {
@@ -288,8 +276,6 @@ export default function App() {
288276
paused={ paused }
289277
onTogglePause={ togglePause }
290278
pausing={ pausing }
291-
theme={ theme }
292-
onCycleTheme={ cycleTheme }
293279
/>
294280

295281
{ ! wizardOpen && <ForeignNotices /> }

‎admin/src/components/TopBar.jsx‎

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,10 @@
22
* Slim, persistent top bar: brand, the current safety status in plain words,
33
* and the three-section nav. Calm and quiet — the status is the point.
44
*/
5-
import { __, sprintf } from '@wordpress/i18n';
5+
import { __ } from '@wordpress/i18n';
66
import { Button } from '../ui';
77
import { levelFor } from '../api';
8-
import { ThemeIcon, BrandMark } from './icons';
9-
10-
const THEME_LABELS = {
11-
system: __( 'System theme', 'saddle' ),
12-
light: __( 'Light theme', 'saddle' ),
13-
dark: __( 'Dark theme', 'saddle' ),
14-
};
8+
import { BrandMark } from './icons';
159

1610
export default function TopBar( {
1711
tier,
@@ -21,8 +15,6 @@ export default function TopBar( {
2115
paused,
2216
onTogglePause,
2317
pausing,
24-
theme,
25-
onCycleTheme,
2618
} ) {
2719
const level = levelFor( tier );
2820
let tone = level.key === 'read' ? 'safe' : 'active';
@@ -62,23 +54,6 @@ export default function TopBar( {
6254
: __( 'Pause', 'saddle' ) }
6355
</Button>
6456
) }
65-
{ onCycleTheme && (
66-
<button
67-
type="button"
68-
className="saddle-top__theme"
69-
onClick={ onCycleTheme }
70-
title={ sprintf(
71-
/* translators: %s: current theme label. */
72-
__( '%s — click to change', 'saddle' ),
73-
THEME_LABELS[ theme ] || THEME_LABELS.system
74-
) }
75-
aria-label={
76-
THEME_LABELS[ theme ] || THEME_LABELS.system
77-
}
78-
>
79-
<ThemeIcon mode={ theme } />
80-
</button>
81-
) }
8257
</div>
8358
</div>
8459

‎admin/src/style.scss‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,14 @@
22
* Saddle admin styles — calm, modern, person-first.
33
*
44
* Powered by the PlugPress design system (@plugpress/ui): every --s-* token
5-
* aliases a shared --pp-* token (below), so Saddle rides the DS palette and
6-
* dark mode. Monochrome with semantic color reserved for status. Dark mode is
7-
* driven by the DS data-pp-theme attribute the TopBar toggle flips live via
8-
* the useTheme hook. See DESIGN-ALIGNMENT.md.
5+
* aliases a shared --pp-* token (below), so Saddle rides the DS palette.
6+
* Monochrome with semantic color reserved for status. Light-only (the design
7+
* system dropped dark mode in v0.2.0). See DESIGN-ALIGNMENT.md.
98
*/
109

11-
// Every --s-* token now aliases a shared design-system --pp-* token, so
12-
// Saddle's whole stylesheet rides the DS palette and its dark mode. Theming is
13-
// driven by the DS data-pp-theme attribute (set on <body> by useTheme), which
14-
// flips the --pp-* values — the aliases below follow automatically. The old
15-
// s-palette-light/dark mixins and saddle-theme-* classes are retired.
10+
// Every --s-* token aliases a shared design-system --pp-* token, so Saddle's
11+
// whole stylesheet rides the DS palette. The old s-palette-light/dark mixins
12+
// and saddle-theme-* classes are retired.
1613
//
1714
// Requires the page body to carry .pp-scope and .saddle-app to carry .pp-app
1815
// (both are applied) so the --pp-* tokens resolve here.

‎includes/admin/class-saddle-settings.php‎

Lines changed: 2 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -67,14 +67,6 @@ private static function menu_icon() {
6767
*/
6868
private static $notice_buffer_level = 0;
6969

70-
/**
71-
* The current user's admin theme (system|light|dark), for the pre-paint
72-
* theme boot. Set in enqueue_assets, consumed by print_theme_boot.
73-
*
74-
* @var string
75-
*/
76-
private static $theme = 'system';
77-
7870
/**
7971
* On Saddle's screen only: capture other plugins' admin notices instead of
8072
* letting them pile above the app.
@@ -129,24 +121,6 @@ public static function end_notice_capture() {
129121
echo '<div id="saddle-foreign-notices" hidden>' . $html . '</div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
130122
}
131123

132-
/**
133-
* Print the pre-paint theme attribute on <body>.
134-
*
135-
* Runs at the top of the admin content (in_admin_header), before the app
136-
* bundle (footer) and before #saddle-root paints, so the design-system
137-
* tokens resolve to the right theme with no flash.
138-
*/
139-
public static function print_theme_boot() {
140-
$screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;
141-
if ( ! $screen || $screen->id !== self::$hook_suffix ) {
142-
return;
143-
}
144-
printf(
145-
'<script>document.body.dataset.ppTheme=%s;</script>',
146-
wp_json_encode( self::$theme )
147-
);
148-
}
149-
150124
/**
151125
* Render the mount point for the React app.
152126
*/
@@ -233,24 +207,16 @@ function () {
233207
wp_set_script_translations( 'saddle-admin', 'saddle' );
234208

235209
$current_user = wp_get_current_user();
236-
$theme = (string) get_user_meta( get_current_user_id(), 'saddle_admin_theme', true );
237-
$theme = in_array( $theme, array( 'light', 'dark' ), true ) ? $theme : 'system';
238-
self::$theme = $theme;
239210

240-
// The design system reads its --pp-* tokens from a .pp-scope ancestor,
241-
// so the page body carries it (portaled overlays inherit the tokens too).
211+
// The design system (light-only) reads its --pp-* tokens from a .pp-scope
212+
// ancestor, so the page body carries it (portaled overlays inherit too).
242213
add_filter(
243214
'admin_body_class',
244215
static function ( $classes ) {
245216
return $classes . ' pp-scope';
246217
}
247218
);
248219

249-
// Set data-pp-theme on <body> before the app paints, so an explicit
250-
// light/dark choice (or a system user's OS preference) never flashes the
251-
// other theme. The useTheme hook keeps it in sync after mount.
252-
add_action( 'in_admin_header', array( __CLASS__, 'print_theme_boot' ) );
253-
254220
wp_add_inline_script(
255221
'saddle-admin',
256222
'window.saddleData = ' . wp_json_encode(
@@ -268,7 +234,6 @@ static function ( $classes ) {
268234
// Environment facts so the UI can warn before a connect fails.
269235
'appPasswords' => function_exists( 'wp_is_application_passwords_available' ) ? (bool) wp_is_application_passwords_available() : true,
270236
'ssl' => is_ssl(),
271-
'theme' => $theme,
272237
// Where WordPress itself lists these credentials — linked
273238
// from the Connect tab for transparency.
274239
'profileUrl' => esc_url_raw( admin_url( 'profile.php#application-passwords-section' ) ),

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,6 @@
2424
"grunt-contrib-copy": "^1.0.0"
2525
},
2626
"dependencies": {
27-
"@plugpress/ui": "github:plugpressco/plugpress-ui#v0.1.0"
27+
"@plugpress/ui": "github:plugpressco/plugpress-ui#v0.2.0"
2828
}
2929
}

0 commit comments

Comments
 (0)