Fix theme

deminearchiver · Jun 3, 2024 · 6de09cf · 6de09cf
1 parent 45a347b
commit 6de09cf
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 118 deletions.
diff --git a/app/src/components/header/Header.astro b/app/src/components/header/Header.astro
@@ -81,7 +81,7 @@ const destinations = dynamicToStatic(Astro.url, getDestinations());
           <RssFeedIcon />
       </IconButton>
       <Search client:only="solid-js" />
-      <ThemeSelect client:load />
+      <ThemeSelect client:only="solid-js" />
     </div>
   </div>
 </header>

diff --git a/app/src/components/theme/theme-select.css.ts b/app/src/components/theme/theme-select.css.ts
@@ -3,64 +3,133 @@ import { THEME } from "../../styles/theme";
 import { splashTheme } from "@material/solid/components/splash";
 import { recipe } from "@vanilla-extract/recipes";
 
-export const themeSelectStyle = recipe({
-  base: {
-    WebkitTapHighlightColor: "transparent",
-    cursor: "pointer",
-
-
-    position: "relative",
-    width: "fit-content",
-
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "16px",
-
-    fontFamily: THEME.text.body.large.family,
-    fontSize: THEME.text.body.large.size,
-    fontWeight: THEME.text.body.large.weight,
-    lineHeight: THEME.text.body.large.lineHeight,
-    letterSpacing: THEME.text.body.large.letterSpacing,
-
-    vars: {
-      [splashTheme.hoverColor]: THEME.color.onSurface,
-      [splashTheme.pressedColor]: THEME.color.onSurface,
-    }
+// export const themeSelectStyle = recipe({
+//   base: {
+//     WebkitTapHighlightColor: "transparent",
+//     cursor: "pointer",
+
+
+//     position: "relative",
+//     width: "fit-content",
+
+//     display: "flex",
+//     alignItems: "center",
+//     justifyContent: "center",
+//     gap: "16px",
+
+//     fontFamily: THEME.text.body.large.family,
+//     fontSize: THEME.text.body.large.size,
+//     fontWeight: THEME.text.body.large.weight,
+//     lineHeight: THEME.text.body.large.lineHeight,
+//     letterSpacing: THEME.text.body.large.letterSpacing,
+
+//     vars: {
+//       [splashTheme.hoverColor]: THEME.color.onSurface,
+//       [splashTheme.pressedColor]: THEME.color.onSurface,
+//     }
+//   },
+//   variants: {
+//     wide: {
+//       false: {
+//         borderRadius: 9999,
+//         padding: "8px 16px",
+//         marginInlineEnd: 16,
+//       },
+//       true: {
+//         justifyContent: "space-between",
+//         minWidth: 220,
+//         height: "100%",
+//         borderRadius: 0,
+//         padding: "0px 24px",
+//       },
+//     },
+//   },
+// });
+
+// export const themeSelectControlStyle = recipe({
+//   variants: {
+//     contained: {
+//       false: {
+//         marginInlineEnd: 16,
+//       },
+//     }
+//   }
+// });
+
+// export const themeSelectLabelStyle = style({
+//   display: "flex",
+//   flexDirection: "column",
+//   alignItems: "flex-start",
+//   justifyContent: "center",
+// });
+
+// export const themeSelectSubtitleStyle = style({
+//   fontFamily: THEME.text.body.medium.family,
+//   fontSize: THEME.text.body.medium.size,
+//   fontWeight: THEME.text.body.medium.weight,
+//   lineHeight: THEME.text.body.medium.lineHeight,
+//   letterSpacing: THEME.text.body.medium.letterSpacing,
+//   color: THEME.color.onSurfaceVariant,
+// });
+export const themeSelectStyle = style({
+  WebkitTapHighlightColor: "transparent",
+  cursor: "pointer",
+
+
+  position: "relative",
+  width: "fit-content",
+
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "16px",
+
+  fontFamily: THEME.text.body.large.family,
+  fontSize: THEME.text.body.large.size,
+  fontWeight: THEME.text.body.large.weight,
+  lineHeight: THEME.text.body.large.lineHeight,
+  letterSpacing: THEME.text.body.large.letterSpacing,
+  marginInlineEnd: 16,
+
+  vars: {
+    [splashTheme.hoverColor]: THEME.color.onSurface,
+    [splashTheme.pressedColor]: THEME.color.onSurface,
   },
-  variants: {
-    wide: {
-      false: {
-        borderRadius: 9999,
-        padding: "8px 16px",
-        marginInlineEnd: 16,
-      },
-      true: {
-        justifyContent: "space-between",
-        minWidth: 220,
-        height: "100%",
-        borderRadius: 0,
-        padding: "0px 24px",
-      },
+  "@media": {
+    "only screen and (min-width: 600px)": {
+      borderRadius: 9999,
+      padding: "8px 16px",
+    },
+    "only screen and (min-width: 1200px)": {
+      justifyContent: "space-between",
+      minWidth: 220,
+      height: "100%",
+      borderRadius: 0,
+      padding: "0px 24px",
+      marginInlineEnd: 0,
     },
   },
 });
 
-export const themeSelectControlStyle = recipe({
-  variants: {
-    contained: {
-      false: {
-        marginInlineEnd: 16,
-      },
-    }
-  }
+export const themeSelectSplashStyle = style({
+  "@media": {
+    "only screen and (max-width: 599px)": {
+      display: "none",
+    },
+  },
 });
 
+
 export const themeSelectLabelStyle = style({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "flex-start",
-  justifyContent: "center",
+  display: "none",
+  "@media": {
+    "only screen and (min-width: 600px)": {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      justifyContent: "center",
+    },
+  },
 });
 
 export const themeSelectSubtitleStyle = style({
@@ -70,4 +139,10 @@ export const themeSelectSubtitleStyle = style({
   lineHeight: THEME.text.body.medium.lineHeight,
   letterSpacing: THEME.text.body.medium.letterSpacing,
   color: THEME.color.onSurfaceVariant,
+
+  "@media": {
+    "only screen and (max-width: 1199px)": {
+      display: "none",
+    },
+  },
 });
diff --git a/app/src/components/theme/theme-select.tsx b/app/src/components/theme/theme-select.tsx
@@ -11,7 +11,7 @@ import { Switch as Match, Match as When } from "solid-js";
 
 import { Switch } from "@material/solid/components/switch";
 import { isServer, type Falsy, type FalsyValue } from "@solid-primitives/utils";
-import { themeSelectControlStyle, themeSelectLabelStyle, themeSelectStyle, themeSelectSubtitleStyle } from "./theme-select.css";
+import { themeSelectLabelStyle, themeSelectSplashStyle, themeSelectStyle, themeSelectSubtitleStyle } from "./theme-select.css";
 import { Splash } from "@material/solid/components/splash";
 
 import { createBreakpoint } from "@material/solid/utils";
@@ -20,14 +20,6 @@ type Theme = "light" | "dark";
 
 const STORAGE_KEY = "theme_auto";
 
-
-const themeFromPrefersDark = (prefersDark: boolean, inverse: boolean = false) => {
-  return inverse
-    ? prefersDark ? "light" : "dark"
-    : prefersDark ? "dark" : "light";
-}
-
-
 export interface ThemeSelectProps {
   type?: "small" | "medium" | "large";
 }
@@ -37,64 +29,41 @@ export const ThemeSelect: Component<ThemeSelectProps> = (props) => {
 
   const [useAuto, setUseAuto] = makePersisted(
     createSignal(true),
-    { name: STORAGE_KEY, },
+    { name: STORAGE_KEY },
   );
 
   const prefersDark = createPrefersDark(true);
 
   const theme = createMemo<Theme>(() => {
-    return themeFromPrefersDark(prefersDark(), !useAuto())
+    return !useAuto()
+    ? prefersDark() ? "light" : "dark"
+    : prefersDark() ? "dark" : "light";
   });
 
-  const breakpoint = createBreakpoint("compact");
-
   createEffect(() => {
     document.documentElement.dataset.theme = theme();
   });
 
-  const showLarge = createMemo(() => {
-    return (props.type && props.type !== "small") || breakpoint.gt("compact");
-  });
-  const showWide = () =>
-    (!props.type && breakpoint.gte("extraLarge")) || (props.type === "large");
-
-  const Control: Component = () => (
-    <Switch
-      class={themeSelectControlStyle({
-        contained: showLarge(),
-      })}
-      selected={useAuto()}
-      onChanged={value => void setUseAuto(value)}
-      title="Theme">
-        <ThemeIcon theme={theme()} />
-    </Switch>
-  );
-
   const label = createMemo(
     () => `${useAuto() ? "Auto" : "Inverse"} (${theme()})`
   );
-
   return (
     <>
-      <Show
-        when={showLarge()}
-        fallback={<Control />}>
-          <label
-            ref={ref as HTMLLabelElement}
-            class={themeSelectStyle({
-              wide: showWide(),
-            })}
-            title={label()}>
-              <Splash for={ref} />
-              <div class={themeSelectLabelStyle}>
-                <p>Theme</p>
-                <Show when={showWide()}>
-                  <p class={themeSelectSubtitleStyle}>{label()}</p>
-                </Show>
-              </div>
-              <Control />
-          </label>
-      </Show>
+      <label
+        ref={ref as HTMLLabelElement}
+        class={themeSelectStyle}>
+          <Splash class={themeSelectSplashStyle} for={ref} />
+          <div class={themeSelectLabelStyle}>
+            <p>Theme</p>
+            <p class={themeSelectSubtitleStyle}>{label()}</p>
+          </div>
+          <Switch
+            selected={useAuto()}
+            onChanged={setUseAuto}
+            title="Theme">
+              <ThemeIcon theme={theme()} />
+          </Switch>
+      </label>
     </>
   );
 }

diff --git a/packages/material/solid/components/switch/switch.css.ts b/packages/material/solid/components/switch/switch.css.ts
@@ -62,14 +62,14 @@ export const switchTrackStyle = recipe({
     },
   },
   variants: {
-    state: {
-      unselected: {
+    selected: {
+      false: {
         "::before": {
           backgroundColor: THEME.color.surfaceContainerHighest,
           border: `2px solid ${THEME.color.outline}`,
         },
       },
-      selected: {
+      true: {
         "::before": {
           backgroundColor: THEME.color.primary,
         },
@@ -90,11 +90,11 @@ export const switchHandleContainerStyle = recipe({
     borderRadius: "inherit",
   },
   variants: {
-    state: {
-      unselected: {
+    selected: {
+      false: {
         marginInlineEnd: 52 - 32,
       },
-      selected: {
+      true: {
         marginInlineStart: 52 - 32,
       },
     },
@@ -174,11 +174,11 @@ export const switchIconsStyle = recipe({
     placeContent: "center",
   },
   variants: {
-    state: {
-      unselected: {
+    selected: {
+      false: {
         color: THEME.color.surfaceContainerHighest,
       },
-      selected: {
+      true: {
         color: THEME.color.onPrimaryContainer,
       },
     }

diff --git a/packages/material/solid/components/switch/switch.tsx b/packages/material/solid/components/switch/switch.tsx
@@ -1,4 +1,4 @@
-import { type Component, type JSX, createSignal, splitProps, createMemo, type ParentComponent, children } from "solid-js";
+import { type Component, type JSX, createSignal, splitProps, createMemo, type ParentComponent, children, createEffect } from "solid-js";
 import { switchDisabledStyle, switchHandleContainerStyle, switchHandleStyle, switchIconsStyle, switchInputStyle, switchSelectedStyle, switchStyle, switchTrackStyle, switchUnselectedStyle } from "./switch.css";
 import { Splash } from "../splash";
 import { resolveFirst } from "@solid-primitives/refs";
@@ -29,9 +29,6 @@ export const Switch: ParentComponent<SwitchProps> = (props) => {
 
   let inputRef!: HTMLInputElement;
 
-  // const state = () => selected() ? "selected" : "unselected";
-  const state = createMemo(() => props.selected ? "selected" : "unselected");
-
   return (
     <div
       class={clsx(switchStyle, localProps.class)}
@@ -59,12 +56,12 @@ export const Switch: ParentComponent<SwitchProps> = (props) => {
         type="checkbox"
         aria-hidden="true" />
       <div class={switchTrackStyle({
-        state: state(),
+        selected: props.selected,
       })}>
         <div
           class={
             switchHandleContainerStyle({
-              state: state(),
+              selected: props.selected,
             })
           }>
             <div
@@ -92,7 +89,7 @@ export const Switch: ParentComponent<SwitchProps> = (props) => {
                 selected: props.selected,
                 icon: !!resolved(),
               })}>
-                <div class={switchIconsStyle({ state: state() })}>
+                <div class={switchIconsStyle({ selected: props.selected })}>
                   {resolved()}
               </div>
             </div>