cherry-styled-components 0.1.19 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +158 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +6 -3
  4. package/dist/styled-components/client-theme-provider.d.ts +35 -0
  5. package/dist/styled-components/client-theme-provider.js +103 -0
  6. package/dist/styled-components/index.d.ts +2 -0
  7. package/dist/styled-components/registry.js +1 -1
  8. package/dist/styled-components/theme-init.d.ts +19 -0
  9. package/dist/styled-components/theme-init.js +22 -0
  10. package/dist/styled-components/theme-provider.d.ts +1 -0
  11. package/dist/styled-components/theme-provider.js +15 -2
  12. package/dist/theme-toggle.d.ts +6 -0
  13. package/dist/theme-toggle.js +42 -0
  14. package/dist/utils/mixins.d.ts +17 -0
  15. package/dist/utils/mixins.js +27 -1
  16. package/package.json +5 -2
package/README.md CHANGED
@@ -28,6 +28,164 @@ To build the library for production, use the following command:
28
28
  npm run build
29
29
  ```
30
30
 
31
+ ## Theming
32
+
33
+ Cherry ships two theme providers:
34
+
35
+ - `CherryThemeProvider` - the original client-only provider. It resolves the theme from `localStorage` and the OS preference after mount. Simple, but in a server-rendered app the first paint is always the light theme.
36
+ - `ClientThemeProvider` - the SSR-aware provider for flash-free dark mode. The server resolves the `theme` cookie and passes `$initial`, so the first paint is already correct. On mount it reconciles against the cookie and OS preference (Safari and Firefox don't send color-scheme client hints, so their first server render can guess wrong) and swaps in place. Theme changes persist to the `theme` cookie and `localStorage` directly; no API route is needed.
37
+
38
+ Both providers expose `setTheme` and `toggleTheme` through `ThemeContext`, and the `ThemeToggle` component works under either.
39
+
40
+ A Next.js App Router setup looks like this:
41
+
42
+ ```tsx
43
+ // app/layout.tsx (server component)
44
+ import { cookies } from "next/headers";
45
+ import {
46
+ ClientThemeProvider,
47
+ StyledComponentsRegistry,
48
+ themeInitScript,
49
+ } from "cherry-styled-components";
50
+ import { theme, themeDark } from "./theme";
51
+
52
+ export default async function RootLayout({ children }) {
53
+ const cookieTheme = (await cookies()).get("theme")?.value;
54
+
55
+ return (
56
+ <html lang="en">
57
+ <head>
58
+ {/* Seeds the theme cookie and prevents the dark-mode flash in
59
+ browsers without color-scheme client hints. */}
60
+ <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
61
+ </head>
62
+ <body>
63
+ <StyledComponentsRegistry>
64
+ <ClientThemeProvider
65
+ theme={theme}
66
+ themeDark={themeDark}
67
+ $initial={cookieTheme === "dark" ? "dark" : "light"}
68
+ >
69
+ {children}
70
+ </ClientThemeProvider>
71
+ </StyledComponentsRegistry>
72
+ </body>
73
+ </html>
74
+ );
75
+ }
76
+ ```
77
+
78
+ For the best first-visit experience in Chrome, also opt into color-scheme client hints in your middleware so the very first server render matches the OS preference:
79
+
80
+ ```ts
81
+ // middleware.ts
82
+ res.headers.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
83
+ res.headers.set("Vary", "Sec-CH-Prefers-Color-Scheme");
84
+ res.headers.set("Critical-CH", "Sec-CH-Prefers-Color-Scheme");
85
+
86
+ const hint = req.headers.get("Sec-CH-Prefers-Color-Scheme");
87
+ if (!req.cookies.get("theme")?.value && hint) {
88
+ res.cookies.set("theme", hint === "dark" ? "dark" : "light", {
89
+ path: "/",
90
+ maxAge: 60 * 60 * 24 * 365,
91
+ sameSite: "lax",
92
+ });
93
+ }
94
+ ```
95
+
96
+ `resolveTheme(cookieValue, theme, themeDark)` is exported for other server code that needs the active theme object, e.g. `generateViewport` for the initial `theme-color`.
97
+
98
+ In a client-only app (like this repo's demo, see `src/main.tsx`), resolve the initial theme synchronously from the cookie, `localStorage`, or `matchMedia` before rendering and pass it as `$initial`.
99
+
100
+ ## Component Previews
101
+
102
+ The dev server ships with a preview route that renders a single component in isolation, centered on the page. It is meant for visual inspection and for taking automated screenshots (e.g. with Playwright).
103
+
104
+ With `npm run dev` running:
105
+
106
+ - `/preview` shows an index page linking to every available preview.
107
+ - `/preview/<name>` renders one component centered inside a wrapper with the stable selector `#preview-box`.
108
+
109
+ The route is handled in `src/main.tsx` and the previews live in `src/preview.tsx`. Both are part of the demo app only and are not included in the library build.
110
+
111
+ ### Available previews
112
+
113
+ | Name | Renders |
114
+ | ------------------ | ------------------------------------------------- |
115
+ | `accordion` | Card accordion, open by default |
116
+ | `accordion-inline` | Inline accordion variant, open by default |
117
+ | `avatar-dropzone` | Empty avatar dropzone, default size |
118
+ | `box` | Box surface with a placeholder block |
119
+ | `button` | Primary filled button |
120
+ | `button-secondary` | Secondary filled button |
121
+ | `button-tertiary` | Tertiary filled button |
122
+ | `button-outline` | Primary outline button |
123
+ | `checkbox` | Checked checkbox |
124
+ | `dropzone` | Block dropzone with prompt, browse, and hint text |
125
+ | `dropzone-inline` | Inline dropzone variant |
126
+ | `flex` | Flex row with three placeholder blocks |
127
+ | `grid` | Three-column grid with a full-width row |
128
+ | `icon` | Cherry icon at 48px |
129
+ | `icon-button` | Icon button with a settings icon |
130
+ | `input` | Text input with label and placeholder |
131
+ | `modal` | Modal, already open on a backdrop |
132
+ | `password` | Password field with label and placeholder |
133
+ | `radio` | Checked radio button |
134
+ | `range` | Range slider |
135
+ | `select` | Select with label |
136
+ | `textarea` | Textarea with label and value |
137
+ | `theme-toggle` | Pill-shaped sun/moon theme switch |
138
+ | `toast` | Success, error, and info toasts, fired on mount |
139
+ | `toggle` | Checked toggle |
140
+
141
+ Pure layout primitives with no visual output of their own (Container, Col, MaxWidth, Space) have no preview entry.
142
+
143
+ ### Forcing a theme
144
+
145
+ Append `?theme=dark` or `?theme=light` to any preview URL to force a theme:
146
+
147
+ ```
148
+ /preview/button?theme=dark
149
+ ```
150
+
151
+ The value is persisted to the `theme` cookie and `localStorage`, exactly like a `ThemeToggle` click, and the demo resolves it synchronously before the first render. It persists for subsequent navigations in the same browser context, so always pass the parameter explicitly when comparing themes to avoid leakage from a previous visit.
152
+
153
+ ### Taking screenshots
154
+
155
+ `scripts/screenshot-previews.cjs` captures every preview in both themes and writes the framed images used by the documentation site. With the dev server running in another terminal:
156
+
157
+ ```bash
158
+ pnpm run dev
159
+ pnpm run screenshots
160
+ ```
161
+
162
+ For each component it produces `<name>-light.png` and `<name>-dark.png` at 2x resolution (`deviceScaleFactor: 2`), then post-processes every image with sharp:
163
+
164
+ - Corners are rounded with the theme's `radius.lg` (12px, so 24px at 2x) and made transparent outside the radius.
165
+ - A 1px solid border is drawn in the theme's `grayLight` color: `#e5e7eb` for light, `#1a1a1a` for dark.
166
+
167
+ The border and radius are baked into the PNG rather than applied in CSS so that all images get the identical frame, including the two special captures:
168
+
169
+ - `modal` overlays the whole viewport, so it is captured as a full-page screenshot to include the backdrop. It is shot on a desktop-size viewport (1100px wide) so the modal's built-in `max-width: 500px` (active from the `lg` breakpoint) applies.
170
+ - `toast` renders in a corner outside `#preview-box`, so the toast list element is captured instead, with 40px of padding injected at capture time for breathing room.
171
+
172
+ Everything else is cropped to the `#preview-box` element. Animated previews (accordion, modal, toast) get a one-second settle delay before capture.
173
+
174
+ The script drives your installed Chrome through `playwright-core` (no browser download needed) and defaults can be overridden with env vars:
175
+
176
+ | Variable | Default |
177
+ | ------------- | -------------------------------------------------------------- |
178
+ | `PREVIEW_URL` | `http://localhost:5173/preview` |
179
+ | `OUT_DIR` | `../cherry-documentation/public/components` |
180
+ | `CHROME_PATH` | `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome` |
181
+
182
+ For one-off manual screenshots, target the `#preview-box` selector:
183
+
184
+ ```js
185
+ await page.goto("http://localhost:5173/preview/button?theme=light");
186
+ await page.locator("#preview-box").screenshot({ path: "button-light.png" });
187
+ ```
188
+
31
189
  ## Community
32
190
 
33
191
  For help, discussion about best practices, or any other conversation that would benefit from being searchable:
package/dist/index.d.ts CHANGED
@@ -19,5 +19,6 @@ export * from './range';
19
19
  export * from './select';
20
20
  export * from './space';
21
21
  export * from './textarea';
22
+ export * from './theme-toggle';
22
23
  export * from './toast';
23
24
  export * from './toggle';
package/dist/index.js CHANGED
@@ -1,11 +1,13 @@
1
- import { StyledComponentsRegistry } from "./styled-components/registry.js";
2
1
  import { GlobalStyles } from "./utils/global.js";
3
2
  import { IconArrow, IconCalendar, IconCheck } from "./utils/icons.js";
4
3
  import { breakpoints, colors, colorsDark, fontSizes, fonts, lineHeights, mq, shadows, shadowsDark, spacing, theme, themeDark } from "./utils/theme.js";
5
- import { formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
4
+ import { errorInteractiveStyles, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
6
5
  import { createTypographyStyle, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText } from "./utils/typography.js";
7
6
  import { useOnClickOutside } from "./utils/use-on-click-outside.js";
8
7
  import { CherryThemeProvider, ThemeContext } from "./styled-components/theme-provider.js";
8
+ import { ClientThemeProvider } from "./styled-components/client-theme-provider.js";
9
+ import { StyledComponentsRegistry } from "./styled-components/registry.js";
10
+ import { createThemeInitScript, resolveTheme, themeInitScript } from "./styled-components/theme-init.js";
9
11
  import { Icon } from "./icon.js";
10
12
  import { Accordion } from "./accordion.js";
11
13
  import { Dropzone, matchesAccept } from "./dropzone.js";
@@ -25,6 +27,7 @@ import { Range } from "./range.js";
25
27
  import { Select, StyledIconWrapper } from "./select.js";
26
28
  import { Space } from "./space.js";
27
29
  import { Textarea } from "./textarea.js";
30
+ import { ThemeToggle } from "./theme-toggle.js";
28
31
  import { StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications } from "./toast.js";
29
32
  import { Toggle } from "./toggle.js";
30
- export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconArrow, IconButton, IconCalendar, IconCheck, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotifications, Textarea, ThemeContext, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createTypographyStyle, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, useOnClickOutside, useToastNotifications };
33
+ export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconArrow, IconButton, IconCalendar, IconCheck, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotifications, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, errorInteractiveStyles, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, resolveTheme, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, useOnClickOutside, useToastNotifications };
package/dist/styled-components/client-theme-provider.d.ts ADDED
@@ -0,0 +1,35 @@
1
+ import { default as React } from 'react';
2
+ import { Theme } from '../utils';
3
+ export interface ClientThemeProviderProps {
4
+ children: React.ReactNode;
5
+ theme: Theme;
6
+ themeDark?: Theme;
7
+ /**
8
+ * The theme the server resolved from the `theme` cookie for the first
9
+ * render. Omit in client-only apps and resolve it before mounting instead.
10
+ */
11
+ $initial?: "light" | "dark";
12
+ /**
13
+ * Keeps a `theme-color` meta tag in sync with the active theme so browser
14
+ * chrome (e.g. the iOS Safari status bar) matches the page. Pass the name
15
+ * of the theme color to track, or false to disable. A key (not a function)
16
+ * so it stays serializable across the server/client component boundary.
17
+ * Defaults to "light".
18
+ */
19
+ $themeColor?: keyof Theme["colors"] | false;
20
+ /**
21
+ * Renders Cherry's GlobalStyles for the active theme. Pass false when the
22
+ * app provides its own global styles.
23
+ */
24
+ $globalStyles?: boolean;
25
+ }
26
+ /**
27
+ * SSR-aware theme provider. Renders with the server-resolved theme on the
28
+ * first paint (no dark-mode flash), reconciles it against the `theme` cookie
29
+ * and OS preference on mount (Safari/Firefox don't send client hints, so
30
+ * their first server render can guess wrong), and exposes setTheme /
31
+ * toggleTheme through ThemeContext. Theme changes persist to the `theme`
32
+ * cookie and localStorage; no API route is needed.
33
+ */
34
+ declare function ClientThemeProvider({ children, theme, themeDark, $initial, $themeColor, $globalStyles, }: ClientThemeProviderProps): React.JSX.Element;
35
+ export { ClientThemeProvider };
package/dist/styled-components/client-theme-provider.js ADDED
@@ -0,0 +1,103 @@
1
+ "use client";
2
+ "use client";
3
+ import { GlobalStyles } from "../utils/global.js";
4
+ import { ThemeContext } from "./theme-provider.js";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+ import { useEffect, useMemo, useState } from "react";
7
+ import { ThemeProvider } from "styled-components";
8
+ //#region src/lib/styled-components/client-theme-provider.tsx
9
+ var THEME_COOKIE_MAX_AGE = 3600 * 24 * 365;
10
+ function readThemeCookie() {
11
+ const cookie = document.cookie.split(";").map((c) => c.trim()).find((c) => c.startsWith("theme="));
12
+ const value = cookie ? cookie.split("=")[1] : void 0;
13
+ return value === "dark" ? "dark" : value === "light" ? "light" : void 0;
14
+ }
15
+ function persistTheme(value) {
16
+ document.cookie = `theme=${value};path=/;max-age=${THEME_COOKIE_MAX_AGE};SameSite=Lax`;
17
+ try {
18
+ if (typeof localStorage !== "undefined") localStorage.theme = value;
19
+ } catch {}
20
+ }
21
+ function removeThemeInitStyle() {
22
+ const el = document.getElementById("__theme-init");
23
+ if (el) el.remove();
24
+ }
25
+ /**
26
+ * SSR-aware theme provider. Renders with the server-resolved theme on the
27
+ * first paint (no dark-mode flash), reconciles it against the `theme` cookie
28
+ * and OS preference on mount (Safari/Firefox don't send client hints, so
29
+ * their first server render can guess wrong), and exposes setTheme /
30
+ * toggleTheme through ThemeContext. Theme changes persist to the `theme`
31
+ * cookie and localStorage; no API route is needed.
32
+ */ function ClientThemeProvider({ children, theme, themeDark, $initial = "light", $themeColor = "light", $globalStyles = true }) {
33
+ const initialTheme = $initial === "dark" && themeDark ? themeDark : theme;
34
+ const [overrideTheme, setOverrideTheme] = useState(null);
35
+ const effectiveTheme = useMemo(() => overrideTheme ?? initialTheme, [overrideTheme, initialTheme]);
36
+ useEffect(() => {
37
+ if (!themeDark) {
38
+ removeThemeInitStyle();
39
+ return;
40
+ }
41
+ try {
42
+ let cookieValue = readThemeCookie();
43
+ if (!cookieValue && typeof localStorage !== "undefined") {
44
+ const stored = localStorage.theme;
45
+ if (stored === "dark" || stored === "light") {
46
+ persistTheme(stored);
47
+ cookieValue = stored;
48
+ }
49
+ }
50
+ if (!cookieValue) {
51
+ cookieValue = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
52
+ persistTheme(cookieValue);
53
+ }
54
+ const wantDark = cookieValue === "dark";
55
+ if (initialTheme.isDark !== wantDark) {
56
+ setOverrideTheme(wantDark ? themeDark : theme);
57
+ return;
58
+ }
59
+ } catch {}
60
+ removeThemeInitStyle();
61
+ }, []);
62
+ useEffect(() => {
63
+ if (overrideTheme) removeThemeInitStyle();
64
+ }, [overrideTheme]);
65
+ useEffect(() => {
66
+ document.documentElement.classList.toggle("dark", effectiveTheme.isDark);
67
+ }, [effectiveTheme.isDark]);
68
+ useEffect(() => {
69
+ if (!$themeColor) return;
70
+ const background = effectiveTheme.colors[$themeColor];
71
+ let meta = document.querySelector("meta[name=\"theme-color\"]");
72
+ if (!meta) {
73
+ meta = document.createElement("meta");
74
+ meta.name = "theme-color";
75
+ document.head.appendChild(meta);
76
+ }
77
+ meta.removeAttribute("media");
78
+ meta.content = background;
79
+ document.querySelectorAll("meta[name=\"theme-color\"][media]").forEach((m) => m.remove());
80
+ }, [effectiveTheme, $themeColor]);
81
+ const setTheme = (action) => {
82
+ const next = typeof action === "function" ? action(effectiveTheme) : action;
83
+ setOverrideTheme(next);
84
+ persistTheme(next.isDark ? "dark" : "light");
85
+ };
86
+ const toggleTheme = () => {
87
+ if (!themeDark) return;
88
+ setTheme(effectiveTheme.isDark ? theme : themeDark);
89
+ };
90
+ const GlobalStylesComponent = $globalStyles ? GlobalStyles(effectiveTheme) : null;
91
+ return /*#__PURE__*/ jsx(ThemeProvider, {
92
+ theme: effectiveTheme,
93
+ children: /*#__PURE__*/ jsxs(ThemeContext.Provider, {
94
+ value: {
95
+ setTheme,
96
+ toggleTheme
97
+ },
98
+ children: [GlobalStylesComponent && /*#__PURE__*/ jsx(GlobalStylesComponent, {}), children]
99
+ })
100
+ });
101
+ }
102
+ //#endregion
103
+ export { ClientThemeProvider };
package/dist/styled-components/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
+ export * from './client-theme-provider';
1
2
  export * from './registry';
3
+ export * from './theme-init';
2
4
  export * from './theme-provider';
package/dist/styled-components/registry.js CHANGED
@@ -2,8 +2,8 @@
2
2
  "use client";
3
3
  import { Fragment, jsx } from "react/jsx-runtime";
4
4
  import { useState } from "react";
5
- import { useServerInsertedHTML } from "next/navigation";
6
5
  import { ServerStyleSheet, StyleSheetManager } from "styled-components";
6
+ import { useServerInsertedHTML } from "next/navigation";
7
7
  //#region src/lib/styled-components/registry.tsx
8
8
  function StyledComponentsRegistry({ children }) {
9
9
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
package/dist/styled-components/theme-init.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import { Theme } from '../utils';
2
+ /**
3
+ * Blocking script for the document <head>. On a first visit from a browser
4
+ * that doesn't send Sec-CH-Prefers-Color-Scheme (Safari, Firefox), it seeds
5
+ * the `theme` cookie from the OS preference and, when dark, hides the body
6
+ * behind a `#__theme-init` style so the light server render never flashes.
7
+ * ClientThemeProvider removes that style once the corrected theme has
8
+ * committed on the client. Pass your dark theme's page background so the
9
+ * brief pre-hydration frame matches it.
10
+ */
11
+ export declare function createThemeInitScript(darkBackground?: string): string;
12
+ /** createThemeInitScript() with the default dark background (#000). */
13
+ export declare const themeInitScript: string;
14
+ /**
15
+ * Resolves a `theme` cookie value ("light" | "dark") to a theme object.
16
+ * Meant for server code: read the cookie, resolve, pass the result to
17
+ * ClientThemeProvider via $initial (or use it for viewport theme-color).
18
+ */
19
+ export declare function resolveTheme(cookieValue: string | undefined, theme: Theme, themeDark?: Theme): Theme;
package/dist/styled-components/theme-init.js ADDED
@@ -0,0 +1,22 @@
1
+ //#region src/lib/styled-components/theme-init.ts
2
+ /**
3
+ * Blocking script for the document <head>. On a first visit from a browser
4
+ * that doesn't send Sec-CH-Prefers-Color-Scheme (Safari, Firefox), it seeds
5
+ * the `theme` cookie from the OS preference and, when dark, hides the body
6
+ * behind a `#__theme-init` style so the light server render never flashes.
7
+ * ClientThemeProvider removes that style once the corrected theme has
8
+ * committed on the client. Pass your dark theme's page background so the
9
+ * brief pre-hydration frame matches it.
10
+ */ function createThemeInitScript(darkBackground = "#000") {
11
+ return `(function(){try{var c=document.cookie.split(";").find(function(s){return s.trim().startsWith("theme=")});if(!c){var d=window.matchMedia&&window.matchMedia("(prefers-color-scheme:dark)").matches;document.cookie="theme="+(d?"dark":"light")+";path=/;max-age=31536000;SameSite=Lax";if(d){var s=document.createElement("style");s.id="__theme-init";s.textContent="html{background:${darkBackground}!important;color-scheme:dark}body{visibility:hidden}";document.head.appendChild(s)}}}catch(e){}})();`;
12
+ }
13
+ /** createThemeInitScript() with the default dark background (#000). */ var themeInitScript = createThemeInitScript();
14
+ /**
15
+ * Resolves a `theme` cookie value ("light" | "dark") to a theme object.
16
+ * Meant for server code: read the cookie, resolve, pass the result to
17
+ * ClientThemeProvider via $initial (or use it for viewport theme-color).
18
+ */ function resolveTheme(cookieValue, theme, themeDark) {
19
+ return cookieValue === "dark" && themeDark ? themeDark : theme;
20
+ }
21
+ //#endregion
22
+ export { createThemeInitScript, resolveTheme, themeInitScript };
package/dist/styled-components/theme-provider.d.ts CHANGED
@@ -2,6 +2,7 @@ import { default as React } from 'react';
2
2
  import { Theme } from '../utils';
3
3
  interface ThemeContextProps {
4
4
  setTheme: React.Dispatch<React.SetStateAction<Theme>>;
5
+ toggleTheme: () => void;
5
6
  }
6
7
  export declare const ThemeContext: React.Context<ThemeContextProps>;
7
8
  declare function CherryThemeProvider({ children, theme, themeDark, }: {
package/dist/styled-components/theme-provider.js CHANGED
@@ -5,7 +5,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
5
5
  import { createContext, useEffect, useState } from "react";
6
6
  import { ThemeProvider } from "styled-components";
7
7
  //#region src/lib/styled-components/theme-provider.tsx
8
- var ThemeContext = /*#__PURE__*/ createContext({ setTheme: () => {} });
8
+ var ThemeContext = /*#__PURE__*/ createContext({
9
+ setTheme: () => {},
10
+ toggleTheme: () => {}
11
+ });
9
12
  function CherryThemeProvider({ children, theme, themeDark }) {
10
13
  const [currentTheme, setTheme] = useState(theme);
11
14
  useEffect(() => {
@@ -18,11 +21,21 @@ function CherryThemeProvider({ children, theme, themeDark }) {
18
21
  setTheme(theme);
19
22
  }
20
23
  }, [theme, themeDark]);
24
+ const toggleTheme = () => {
25
+ if (!themeDark) return;
26
+ const next = currentTheme.isDark ? theme : themeDark;
27
+ setTheme(next);
28
+ localStorage.theme = next.isDark ? "dark" : "light";
29
+ document.documentElement.classList.toggle("dark", next.isDark);
30
+ };
21
31
  const GlobalStylesComponent = GlobalStyles(currentTheme);
22
32
  return /*#__PURE__*/ jsx(ThemeProvider, {
23
33
  theme: currentTheme,
24
34
  children: /*#__PURE__*/ jsxs(ThemeContext.Provider, {
25
- value: { setTheme },
35
+ value: {
36
+ setTheme,
37
+ toggleTheme
38
+ },
26
39
  children: [/*#__PURE__*/ jsx(GlobalStylesComponent, {}), children]
27
40
  })
28
41
  });
package/dist/theme-toggle.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { default as React } from 'react';
2
+ export interface ThemeToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
3
+ $hidden?: boolean;
4
+ }
5
+ declare const ThemeToggle: React.ForwardRefExoticComponent<ThemeToggleProps & React.RefAttributes<HTMLButtonElement>>;
6
+ export { ThemeToggle };
package/dist/theme-toggle.js ADDED
@@ -0,0 +1,42 @@
1
+ "use client";
2
+ "use client";
3
+ import { resetButton } from "./utils/mixins.js";
4
+ import { ThemeContext } from "./styled-components/theme-provider.js";
5
+ import { Icon } from "./icon.js";
6
+ import { jsx, jsxs } from "react/jsx-runtime";
7
+ import { forwardRef, useContext } from "react";
8
+ import styled, { css } from "styled-components";
9
+ import { rgba } from "polished";
10
+ //#region src/lib/theme-toggle.tsx
11
+ var StyledThemeToggle = styled.button.withConfig({
12
+ displayName: "theme-toggle__StyledThemeToggle",
13
+ componentId: "sc-cc0c1ca5-0"
14
+ })([
15
+ ``,
16
+ ` width:56px;height:30px;border-radius:30px;display:flex;position:relative;margin:auto 0;transform:scale(1);background:`,
17
+ `;border:1px solid `,
18
+ `;transition:all 0.3s ease;&::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:`,
19
+ `;transition:all 0.3s ease;z-index:1;`,
20
+ `}`,
21
+ ` & svg{width:16px;height:16px;object-fit:contain;margin:auto;transition:all 0.3s ease;position:relative;z-index:2;}& .lucide-sun{transform:translateX(1px);}& svg[stroke]{stroke:`,
22
+ `;}&:hover{transform:scale(1.05);color:`,
23
+ `;& svg[stroke]{stroke:`,
24
+ `;}}&:active{transform:scale(0.97);}`
25
+ ], resetButton, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => rgba(theme.colors.primaryLight, .2), ({ theme }) => theme.isDark && css([`transform:translateX(26px);`]), ({ $hidden }) => $hidden && css([`display:none;`]), ({ theme }) => theme.colors.primary, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark);
26
+ function LocalThemeToggle({ onClick, ...props }, ref) {
27
+ const { toggleTheme } = useContext(ThemeContext);
28
+ return /*#__PURE__*/ jsxs(StyledThemeToggle, {
29
+ type: "button",
30
+ "aria-label": "Toggle Theme",
31
+ ...props,
32
+ onClick: (event) => {
33
+ toggleTheme();
34
+ onClick?.(event);
35
+ },
36
+ ref,
37
+ children: [/*#__PURE__*/ jsx(Icon, { name: "Sun" }), /*#__PURE__*/ jsx(Icon, { name: "MoonStar" })]
38
+ });
39
+ }
40
+ var ThemeToggle = /*#__PURE__*/ forwardRef(LocalThemeToggle);
41
+ //#endregion
42
+ export { ThemeToggle };
package/dist/utils/mixins.d.ts CHANGED
@@ -1,4 +1,21 @@
1
1
  import { Breakpoints, Theme } from './theme';
2
+ /**
3
+ * Hover/focus/active affordance for interactive surfaces (cards, tiles,
4
+ * links-as-blocks): a transparent 1px border that picks up the primary color
5
+ * on hover, with a soft focus ring. Pair with resetButton for clickable
6
+ * elements that aren't Buttons.
7
+ */
8
+ export declare const interactiveStyles: import('styled-components').RuleSet<NoInfer<{
9
+ theme: Theme;
10
+ }>>;
11
+ /**
12
+ * The destructive-action sibling of interactiveStyles: identical
13
+ * hover/focus/active border + ring behavior, but in the theme error red (the
14
+ * same red the $error Button uses). Use for delete/remove affordances.
15
+ */
16
+ export declare const errorInteractiveStyles: import('styled-components').RuleSet<NoInfer<{
17
+ theme: Theme;
18
+ }>>;
2
19
  export declare const resetButton: import('styled-components').RuleSet<object>;
3
20
  export declare const resetInput: import('styled-components').RuleSet<object>;
4
21
  export declare const fullWidthStyles: (fullWidth?: boolean) => import('styled-components').RuleSet<object> | undefined;
package/dist/utils/mixins.js CHANGED
@@ -2,7 +2,33 @@
2
2
  "use client";
3
3
  import { mq } from "./theme.js";
4
4
  import { css } from "styled-components";
5
+ import { rgba } from "polished";
5
6
  //#region src/lib/utils/mixins.tsx
7
+ /**
8
+ * Hover/focus/active affordance for interactive surfaces (cards, tiles,
9
+ * links-as-blocks): a transparent 1px border that picks up the primary color
10
+ * on hover, with a soft focus ring. Pair with resetButton for clickable
11
+ * elements that aren't Buttons.
12
+ */ var interactiveStyles = css([
13
+ `transition:all 0.3s ease;border:solid 1px transparent;box-shadow:0 0 0 0px `,
14
+ `;@media (hover:hover){&:hover{border-color:`,
15
+ `;}}&:focus{border-color:`,
16
+ `;box-shadow:0 0 0 4px `,
17
+ `;}&:active{box-shadow:0 0 0 2px `,
18
+ `;}`
19
+ ], ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight);
20
+ /**
21
+ * The destructive-action sibling of interactiveStyles: identical
22
+ * hover/focus/active border + ring behavior, but in the theme error red (the
23
+ * same red the $error Button uses). Use for delete/remove affordances.
24
+ */ var errorInteractiveStyles = css([
25
+ `transition:all 0.3s ease;border:solid 1px transparent;box-shadow:0 0 0 0px `,
26
+ `;@media (hover:hover){&:hover{border-color:`,
27
+ `;}}&:focus{border-color:`,
28
+ `;box-shadow:0 0 0 4px `,
29
+ `;}&:active{box-shadow:0 0 0 2px `,
30
+ `;}`
31
+ ], ({ theme }) => theme.colors.error, ({ theme }) => theme.colors.error, ({ theme }) => theme.colors.error, ({ theme }) => rgba(theme.colors.error, .3), ({ theme }) => rgba(theme.colors.error, .3));
6
32
  var resetButton = css([`box-sizing:border-box;appearance:none;border:none;background:none;padding:0;margin:0;cursor:pointer;outline:none;`]);
7
33
  var resetInput = css([`cursor:text;min-width:100px;`]);
8
34
  var fullWidthStyles = (fullWidth) => {
@@ -58,4 +84,4 @@ var generateDirectionStyles = (size, direction) => css([
58
84
  `;}`
59
85
  ], mq(size), direction && `${direction}`);
60
86
  //#endregion
61
- export { formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles };
87
+ export { errorInteractiveStyles, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, statusBorderStyles };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cherry-styled-components",
3
- "version": "0.1.19",
3
+ "version": "0.2.0",
4
4
  "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
5
5
  "private": false,
6
6
  "type": "module",
@@ -38,7 +38,8 @@
38
38
  "scripts": {
39
39
  "dev": "vite dev",
40
40
  "build": "vite build",
41
- "format": "prettier --write ."
41
+ "format": "prettier --write .",
42
+ "screenshots": "node scripts/screenshot-previews.cjs"
42
43
  },
43
44
  "dependencies": {
44
45
  "lucide-react": "^1.23.0",
@@ -58,10 +59,12 @@
58
59
  "eslint-plugin-react-hooks": "^7.1.1",
59
60
  "eslint-plugin-react-refresh": "^0.5.3",
60
61
  "next": "^16.2.10",
62
+ "playwright-core": "^1.61.1",
61
63
  "prettier": "^3.9.4",
62
64
  "react": "^19.2.7",
63
65
  "react-dom": "^19.2.7",
64
66
  "rollup-plugin-preserve-directives": "^0.4.0",
67
+ "sharp": "^0.35.3",
65
68
  "styled-components": "^6.4.3",
66
69
  "typescript": "^6.0.3",
67
70
  "vite": "^8.1.3",