Skip to content

Commit 84e8797

Browse files
koculukoculu
committed
Renew theme toggle.
1 parent ba9d92d commit 84e8797

21 files changed

Lines changed: 292 additions & 404 deletions

File tree

‎frontend/docs/component-documentation-plan.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
| Charts | BarChart, LineChart, DoughnutChart | Reactive data, presentation controls, empty data, accessible values, series/segment contracts |
2323
| Large data | VirtualList, VariableVirtualList, VirtualTable, VariableVirtualTable | Real scrolling, typed row components, fixed versus measured heights, table headers, empty states |
2424
| Interaction helpers | TabPane, ModalTrigger, ToastHost | Parent composition, keyboard interactions, actual dialogs, timed and persistent notifications |
25-
| Site integration | SiteLogo, SiteFooter, TopBar, NavMenu, NavList, PageLinks, PageToc, SearchBox, ThemeSwitcher, SignIn, Consent | Real site context, scoped previews where global runtime requires isolation, configuration and runtime prerequisites |
25+
| Site integration | SiteLogo, SiteFooter, TopBar, NavMenu, NavList, PageLinks, PageToc, SearchBox, ThemeToggle, SignIn, Consent | Real site context, scoped previews where global runtime requires isolation, configuration and runtime prerequisites |
2626
| Browser entry points | RegorApp, PageScript | Working local entry points, automatic relative source resolution, module loading and lifecycle boundaries |
2727

2828
The existing Btn, BtnLink, BtnGroup, BtnGroupDropDown, Badge, Tabs and Modal guides remain the reference standard. NavItem and ModalStore are internal registered implementation components; document their contracts with NavList and Modal rather than presenting them as independent public markup APIs.

‎frontend/purestack.studio/components/index.mdx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -746,16 +746,13 @@ These pages use the standard PureStack doc template, navigation, page TOC, compo
746746
></Panel
747747
>
748748
<Panel tone="neutral" bodyClass="p-3"
749-
><h3 class="mt-0">Theme<wbr/>Switcher</h3>
750-
<p>
751-
A compact native button that switches between the themes configured for
752-
the site.
753-
</p>
749+
><h3 class="mt-0">Theme<wbr/>Toggle</h3>
750+
<p>One icon button that flips the site between its light and dark themes.</p>
754751
<BtnLink
755-
href="/components/site/theme-switcher/"
752+
href="/components/site/theme-toggle/"
756753
tone="accent"
757754
variant="link"
758-
>Explore Theme<wbr/>Switcher</BtnLink
755+
>Explore Theme<wbr/>Toggle</BtnLink
759756
></Panel
760757
>
761758
<Panel tone="neutral" bodyClass="p-3"

‎frontend/purestack.studio/components/site/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Connect pages with navigation, search and branding, then add theme, account and
2929
<Panel tone="neutral" bodyClass="p-3"><h3 class="mt-0">Page<wbr/>Links</h3><p>Previous and next navigation for a reading sequence, with explicit destinations or SSG-derived neighbors.</p><BtnLink href="/components/site/page-links/" tone="accent" variant="link">Explore Page<wbr/>Links</BtnLink></Panel>
3030
<Panel tone="neutral" bodyClass="p-3"><h3 class="mt-0">Page<wbr/>Toc</h3><p>A linked document outline with nested section entries and standard doc-layout controls.</p><BtnLink href="/components/site/page-toc/" tone="accent" variant="link">Explore Page<wbr/>Toc</BtnLink></Panel>
3131
<Panel tone="neutral" bodyClass="p-3"><h3 class="mt-0">Search<wbr/>Box</h3><p>Search the built site with a native input and Pagefind-powered results.</p><BtnLink href="/components/site/search-box/" tone="accent" variant="link">Explore Search<wbr/>Box</BtnLink></Panel>
32-
<Panel tone="neutral" bodyClass="p-3"><h3 class="mt-0">Theme<wbr/>Switcher</h3><p>A compact native button that switches between the themes configured for the site.</p><BtnLink href="/components/site/theme-switcher/" tone="accent" variant="link">Explore Theme<wbr/>Switcher</BtnLink></Panel>
32+
<Panel tone="neutral" bodyClass="p-3"><h3 class="mt-0">Theme<wbr/>Toggle</h3><p>One icon button that flips the site between its light and dark themes.</p><BtnLink href="/components/site/theme-toggle/" tone="accent" variant="link">Explore Theme<wbr/>Toggle</BtnLink></Panel>
3333
<Panel tone="neutral" bodyClass="p-3"><h3 class="mt-0">Sign<wbr/>In</h3><p>An account-menu entry point with signed-in and signed-out presentation, optional avatars and replaceable destinations.</p><BtnLink href="/components/site/sign-in/" tone="accent" variant="link">Explore Sign<wbr/>In</BtnLink></Panel>
3434
<Panel tone="neutral" bodyClass="p-3"><h3 class="mt-0">Consent</h3><p>A consent banner and preference panel driven by the site’s categories, policy version and service configuration.</p><BtnLink href="/components/site/consent/" tone="accent" variant="link">Explore Consent</BtnLink></Panel>
3535
</Grid>

‎frontend/purestack.studio/components/site/theme-switcher/theme-switcher.mdx‎

Lines changed: 0 additions & 100 deletions
This file was deleted.

‎frontend/purestack.studio/components/site/theme-toggle/theme-toggle.mdx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
---
2+
title: ThemeToggle
3+
description: "One icon button that flips the site between its light and dark themes."
4+
template: doc
5+
layout:
6+
showNav: true
7+
showToc: true
8+
showFooter: false
9+
nav:
10+
order: 85
11+
icon: tabler:components
12+
---
13+
14+
# Theme<wbr/>Toggle
15+
16+
One icon button that flips the site between its light and dark themes.
17+
18+
<Badge tone="accent" variant="surface">ThemeToggle</Badge>
19+
20+
[View source](https://github.com/PureStackStudio/PureStack/blob/main/packages/ts-components/src/standard/themeToggle/themeToggle.ts) · [API reference](#api-reference)
21+
22+
23+
24+
## Flip the theme
25+
26+
The sun shows in the light theme and the moon in the dark one. Press it and the glyphs turn into each other.
27+
28+
<Tabs group="theme-toggle-sample-1" selectedTab="theme-toggle-sample-1-preview" ariaLabel="Flip the theme example" tone="neutral" variant="surface" tabVariant="underline">
29+
<TabPane id="theme-toggle-sample-1-preview" label="Preview">
30+
<Flex align="center" wrap="true">
31+
<ThemeToggle />
32+
<span>Switch between the light and dark studio skins.</span>
33+
</Flex>
34+
</TabPane>
35+
<TabPane id="theme-toggle-sample-1-source-0" label="theme-control.mdx">
36+
```html
37+
<Flex align="center" wrap="true">
38+
<ThemeToggle />
39+
<span>Switch between the light and dark studio skins.</span>
40+
</Flex>
41+
```
42+
</TabPane>
43+
</Tabs>
44+
45+
## In a settings row
46+
47+
The toggle sits beside a visible setting label as easily as it sits in a header.
48+
49+
<Tabs group="theme-toggle-sample-2" selectedTab="theme-toggle-sample-2-preview" ariaLabel="In a settings row example" tone="neutral" variant="surface" tabVariant="underline">
50+
<TabPane id="theme-toggle-sample-2-preview" label="Preview">
51+
<Panel bodyClass="p-3">
52+
<Flex align="center" justify="between">
53+
<div>
54+
<strong>Appearance</strong>
55+
<p class="mb-0">Choose the skin that is comfortable for you.</p>
56+
</div>
57+
<ThemeToggle />
58+
</Flex>
59+
</Panel>
60+
</TabPane>
61+
<TabPane id="theme-toggle-sample-2-source-0" label="appearance-setting.mdx">
62+
```html
63+
<Panel bodyClass="p-3">
64+
<Flex align="center" justify="between">
65+
<div>
66+
<strong>Appearance</strong>
67+
<p class="mb-0">Choose the skin that is comfortable for you.</p>
68+
</div>
69+
<ThemeToggle />
70+
</Flex>
71+
</Panel>
72+
```
73+
</TabPane>
74+
</Tabs>
75+
76+
## Behavior and accessibility
77+
78+
ThemeToggle is a native button labelled “Dark theme”. The theme runtime keeps `aria-pressed` in step with the active theme, so assistive technology announces whether dark is on. The glyphs are decorative and hidden from the accessibility tree.
79+
80+
Each theme stylesheet decides which glyph is visible, so the right one shows on first paint without waiting for script. The turn animates only after the runtime settles the first theme, and it is switched off for visitors who prefer reduced motion.
81+
82+
## API reference
83+
84+
<div class="api-overview">
85+
<p class="text-eyebrow">ThemeToggle contract</p>
86+
<p>ThemeToggle has no public props. Available themes and stylesheet URLs come from the site’s theme setup.</p>
87+
</div>
88+
89+
This component has no public props.
90+
91+
### Composition
92+
93+
<div class="api-contract">
94+
<p>No slots. Register defineThemeToggleComponents and the Icon family. SSG includes the theme runtime, which binds every element marked data-theme-toggle; outside SSG initialize buildThemeSwitchScript with the configured theme names and matching data-theme stylesheets.</p>
95+
</div>
96+
97+
98+
99+
## Related components
100+
101+
- [TopBar](/components/site/top-bar/)
102+
- [SignIn](/components/site/sign-in/)

‎frontend/purestack.studio/components/site/top-bar/top-bar.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@ TopBar renders a fixed doc-nav-toggle ID and should appear once per document. It
293293
<div class="api-contract">
294294
<p>
295295
No slots. Register defineTopBarComponents and the selected logo component,
296-
SearchBox, ThemeSwitcher, SignIn, Flex and Icon families. Standard SSG
296+
SearchBox, ThemeToggle, SignIn, Flex and Icon families. Standard SSG
297297
registration provides these dependencies.
298298
</p>
299299
</div>
@@ -304,5 +304,5 @@ TopBar renders a fixed doc-nav-toggle ID and should appear once per document. It
304304

305305
- [SiteLogo](/components/site/site-logo/)
306306
- [SearchBox](/components/site/search-box/)
307-
- [ThemeSwitcher](/components/site/theme-switcher/)
307+
- [ThemeToggle](/components/site/theme-toggle/)
308308
- [SignIn](/components/site/sign-in/)

‎frontend/purestack.studio/guides/themes.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Add this to `siteConfig.json`:
3232
}
3333
```
3434

35-
The generator writes `assets/site.css` for light and `assets/site.dark.css` for dark. Its theme switcher uses the configured theme list and remembers a visitor's choice. Try the [ThemeSwitcher example](/components/site/theme-switcher/) on this site.
35+
The generator writes `assets/site.css` for light and `assets/site.dark.css` for dark. Its theme toggle uses the configured theme list and remembers a visitor's choice. Try the [ThemeToggle example](/components/site/theme-toggle/) on this site.
3636

3737
## Create a skin
3838

‎packages/ts-components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@
119119
"SiteLogo",
120120
"TabPane",
121121
"Tabs",
122-
"ThemeSwitcher",
122+
"ThemeToggle",
123123
"ToastHost",
124124
"TopBar",
125125
"VariableVirtualList",

‎packages/ts-components/src/defineComponents.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import { defineSearchComponents } from './standard/searchBox/searchBox'
3333
import { defineSectionHeaderComponents } from './standard/sectionHeader/sectionHeader'
3434
import { defineSignInComponents } from './standard/signIn/signIn'
3535
import { defineTabsComponents } from './standard/tabs/tabs'
36-
import { defineThemeSwitcherComponents } from './standard/themeSwitcher/themeSwitcher'
36+
import { defineThemeToggleComponents } from './standard/themeToggle/themeToggle'
3737
import { defineToastComponents } from './standard/toast/toastHost'
3838
import { defineTopBarComponents } from './standard/topBar/topBar'
3939
import { defineVariableVirtualTableComponents } from './standard/virtualList/variableVirtualTable'
@@ -68,7 +68,7 @@ export function defineComponents(getSvgIcon: GetSvgIcon) {
6868
...defineClassicLogoComponents(),
6969
...defineModalComponents(),
7070
...defineTopBarComponents(),
71-
...defineThemeSwitcherComponents(),
71+
...defineThemeToggleComponents(),
7272
...defineToastComponents(),
7373
...defineVirtualListComponents(),
7474
...defineVirtualTableComponents(),

‎packages/ts-components/src/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -246,8 +246,9 @@ export { registerSignInStyles } from './standard/signIn/signInStyle'
246246
export type { TabPane, Tabs } from './standard/tabs/tabs'
247247
export { defineTabsComponents } from './standard/tabs/tabs'
248248
export { registerTabsStyles } from './standard/tabs/tabsStyle'
249-
export { defineThemeSwitcherComponents } from './standard/themeSwitcher/themeSwitcher'
250-
export { registerThemeSwitcherStyles } from './standard/themeSwitcher/themeSwitcherStyle'
249+
export type { ThemeToggle } from './standard/themeToggle/themeToggle'
250+
export { defineThemeToggleComponents } from './standard/themeToggle/themeToggle'
251+
export { registerThemeToggleStyles } from './standard/themeToggle/themeToggleStyle'
251252
export type { ToastHost } from './standard/toast/toastHost'
252253
export { defineToastComponents } from './standard/toast/toastHost'
253254
export type { ToastItem } from './standard/toast/toastStore'

0 commit comments

Comments
 (0)