From 57fd8548ab7209b08693a6d9cb0afbb5cd8fd0df Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sat, 9 Jul 2022 13:59:13 +0200 Subject: [PATCH] better semantics --- .../designer/features/topbar/menu/menu.tsx | 6 +-- .../{theme.$option.ts => theme.$setting.ts} | 6 +-- apps/designer/app/shared/theme/shared.ts | 4 +- .../designer/app/shared/theme/theme.server.ts | 8 ++-- apps/designer/app/shared/theme/theme.ts | 40 +++++++++---------- 5 files changed, 32 insertions(+), 32 deletions(-) rename apps/designer/app/routes/rest/{theme.$option.ts => theme.$setting.ts} (62%) diff --git a/apps/designer/app/designer/features/topbar/menu/menu.tsx b/apps/designer/app/designer/features/topbar/menu/menu.tsx index d28b8b896e..f549529b5e 100644 --- a/apps/designer/app/designer/features/topbar/menu/menu.tsx +++ b/apps/designer/app/designer/features/topbar/menu/menu.tsx @@ -20,7 +20,7 @@ import { useIsPublishDialogOpen, } from "~/designer/shared/nano-states"; import { isFeatureEnabled } from "~/shared/feature-flags"; -import { getThemeOption, setThemeOption } from "~/shared/theme"; +import { getThemeSetting, setThemeSetting } from "~/shared/theme"; const menuItemCss = { display: "flex", @@ -37,7 +37,7 @@ const textCss = { const ThemeMenuItem = () => { if (isFeatureEnabled("theme") === false) return null; - const currentOption = getThemeOption(); + const currentOption = getThemeSetting(); const labels = { light: "Light", dark: "Dark", @@ -59,7 +59,7 @@ const ThemeMenuItem = () => { checked={currentOption === option} css={menuItemCss} onSelect={() => { - setThemeOption(option); + setThemeSetting(option); }} > {labels[option]} diff --git a/apps/designer/app/routes/rest/theme.$option.ts b/apps/designer/app/routes/rest/theme.$setting.ts similarity index 62% rename from apps/designer/app/routes/rest/theme.$option.ts rename to apps/designer/app/routes/rest/theme.$setting.ts index 384e703391..dd705c8198 100644 --- a/apps/designer/app/routes/rest/theme.$option.ts +++ b/apps/designer/app/routes/rest/theme.$setting.ts @@ -2,9 +2,9 @@ import { json, type LoaderFunction } from "@remix-run/node"; import { themeCookieParser } from "~/shared/theme/index.server"; export const loader: LoaderFunction = async ({ params }) => { - const { option } = params; + const { setting } = params; const headers = { - "Set-Cookie": await themeCookieParser.serialize(option), + "Set-Cookie": await themeCookieParser.serialize(setting), }; - return json({ option }, { headers }); + return json({ setting }, { headers }); }; diff --git a/apps/designer/app/shared/theme/shared.ts b/apps/designer/app/shared/theme/shared.ts index e415297314..4860713b97 100644 --- a/apps/designer/app/shared/theme/shared.ts +++ b/apps/designer/app/shared/theme/shared.ts @@ -1,5 +1,5 @@ -export type ThemeName = "dark" | "light"; +export type ColorScheme = "dark" | "light"; -export type ThemeOption = ThemeName | "system"; +export type ThemeSetting = ColorScheme | "system"; export const cookieNamespace = "theme"; diff --git a/apps/designer/app/shared/theme/theme.server.ts b/apps/designer/app/shared/theme/theme.server.ts index 40f5d44c4c..d072f0bb0f 100644 --- a/apps/designer/app/shared/theme/theme.server.ts +++ b/apps/designer/app/shared/theme/theme.server.ts @@ -1,14 +1,14 @@ import { createCookie } from "@remix-run/node"; -import { cookieNamespace, type ThemeName, type ThemeOption } from "./shared"; +import { cookieNamespace, type ColorScheme, type ThemeSetting } from "./shared"; export const themeCookieParser = createCookie(cookieNamespace); export const getServerTheme = async ( request: Request -): Promise<{ system?: ThemeName; option?: ThemeOption }> => { +): Promise<{ system?: ColorScheme; option?: ThemeSetting }> => { const system = (request.headers.get("Sec-CH-Prefers-Color-Scheme") ?? - undefined) as ThemeName | undefined; - const option: ThemeOption = + undefined) as ColorScheme | undefined; + const option: ThemeSetting = (await themeCookieParser.parse(request.headers.get("Cookie"))) ?? undefined; return { system, option }; }; diff --git a/apps/designer/app/shared/theme/theme.ts b/apps/designer/app/shared/theme/theme.ts index f87aa7e098..fae431a5e9 100644 --- a/apps/designer/app/shared/theme/theme.ts +++ b/apps/designer/app/shared/theme/theme.ts @@ -1,30 +1,30 @@ import { useLoaderData } from "@remix-run/react"; import { darkTheme } from "~/shared/design-system"; -import { type ThemeName, type ThemeOption } from "./shared"; +import { type ColorScheme, type ThemeSetting } from "./shared"; -// User selected theme option. -let option: ThemeOption = "dark"; +// User selected theme setting. +let setting: ThemeSetting = "dark"; // Current systeme theme. -let system: ThemeName; +let system: ColorScheme; const subscribeSystemTheme = () => { if (typeof matchMedia === "undefined") return; const query = matchMedia("(prefers-color-scheme: light)"); - const getTheme = (query: MediaQueryList | MediaQueryListEvent) => + const getColorScheme = (query: MediaQueryList | MediaQueryListEvent) => query.matches ? "light" : "dark"; - system = getTheme(query); + system = getColorScheme(query); query.addEventListener("change", (queryEvent) => { - system = getTheme(queryEvent); + system = getColorScheme(queryEvent); setDomProps(); }); }; subscribeSystemTheme(); -export const getThemeOption = (): ThemeOption => { - return option; +export const getThemeSetting = (): ThemeSetting => { + return setting; }; // @todo todo switch to light by default once ready @@ -32,19 +32,19 @@ export const defaultTheme = "dark"; const selectTheme = ({ system = defaultTheme, - option, + setting, }: { - system: ThemeName; - option?: ThemeOption; -}): ThemeName => { - if (option === "system") { + system: ColorScheme; + setting?: ThemeSetting; +}): ColorScheme => { + if (setting === "system") { return system; } - return option || defaultTheme; + return setting || defaultTheme; }; const getThemeProps = () => { - const theme = selectTheme({ option, system }); + const theme = selectTheme({ setting, system }); if (theme === "dark") { // We need to call it so that vars get injected!!! darkTheme.toString(); @@ -61,15 +61,15 @@ const setDomProps = () => { document.documentElement.style.colorScheme = props.style.colorScheme; }; -export const setThemeOption = (nextOption: ThemeOption) => { - option = nextOption; +export const setThemeSetting = (nextsetting: ThemeSetting) => { + setting = nextsetting; setDomProps(); - fetch(`/rest/theme/${option}`); + fetch(`/rest/theme/${setting}`); }; export const useThemeProps = () => { const data = useLoaderData(); - if (data.theme.option) option = data.theme.option; + if (data.theme.setting) setting = data.theme.setting; if (data.theme.system) system = data.theme.system; return getThemeProps(); };