@domicile-desktop/component-library 0.0.0-alpha-40b5a0fb8a55 → 0.0.0-alpha-db7f02b3f03f

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-40b5a0fb8a55",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-40b5a0fb8a55",
+    "@domicile-desktop/sdk": "0.0.0-alpha-db7f02b3f03f",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-db7f02b3f03f",
     "@phosphor-icons/react": "^2.1.10"
   },
   "description": "React components and the Panda CSS design system that Domicile's shells are built from.",
@@ -106,5 +106,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-40b5a0fb8a55"
+  "version": "0.0.0-alpha-db7f02b3f03f"
 }

package/src/ThemeSwitch/ThemeSwitch.tsx

@@ -1,4 +1,5 @@
-import { CircleHalfIcon } from "@phosphor-icons/react/dist/ssr/CircleHalf";
+import { MoonIcon } from "@phosphor-icons/react/dist/ssr/Moon";
+import { SunIcon } from "@phosphor-icons/react/dist/ssr/Sun";
 
 import { css, cx } from "../../styled-system/css";
 import type { ThemeControl } from "./ThemeProvider";
@@ -21,9 +22,6 @@ type Props = {
 /**
  * A dark/light theme toggle for the shell's chrome.
  *
- * The icon is a half-filled circle, mirrored per theme, so it stays distinct
- * from the brightness readout's sun.
- *
  * There is no "system" option because Domicile is the system. A click asks
  * the compositor for the change; the page repaints when the answer arrives.
  * Throws when no `ThemeProvider` is mounted above it.
@@ -39,25 +37,26 @@ export const ThemeSwitch = ({ useTheme: useThemeHook = useTheme }: Props) => {
       title={LABELS[theme]}
       type="button"
     >
-      <span aria-hidden className={cx(slotStyles, lightSlotStyles)}>
-        <CircleHalfIcon mirrored size={16} weight="fill" />
+      <span aria-hidden className={cx(slotStyles, sunSlotStyles)}>
+        <SunIcon size={16} weight="fill" />
       </span>
-      <span aria-hidden className={cx(slotStyles, darkSlotStyles)}>
-        <CircleHalfIcon size={16} weight="fill" />
+      <span aria-hidden className={cx(slotStyles, moonSlotStyles)}>
+        <MoonIcon size={16} weight="fill" />
       </span>
     </button>
   );
 };
 
-// A circular window holding the light and dark slots.
+// A circular window holding the sun and moon slots.
 //
 // Sets no `color` so the icons inherit their surroundings' text color. The
 // toggle often sits in a white bar over the wallpaper, which does not change
 // with the theme; a `foreground` color would turn black there in light mode.
+// The hover tint mixes `currentcolor` for the same reason, matching the bar's
+// other buttons.
 const buttonStyles = css({
   _hover: {
-    backgroundColor:
-      "color-mix(in oklab, {colors.foreground} 10%, transparent)",
+    backgroundColor: "color-mix(in oklab, currentcolor 16%, transparent)",
   },
   backgroundColor: "transparent",
   blockSize: 7,
@@ -107,7 +106,7 @@ const slotStyles = css({
 // The `color-mix` is repeated inline because Panda only extracts static
 // literals. A shared const would silently emit no rule.
 
-const lightSlotStyles = css({
+const sunSlotStyles = css({
   "[data-theme-mode=dark] &": {
     color: "color-mix(in oklab, currentcolor 40%, transparent)",
     transform: "translateY(100%)",
@@ -118,7 +117,7 @@ const lightSlotStyles = css({
   },
 });
 
-const darkSlotStyles = css({
+const moonSlotStyles = css({
   "[data-theme-mode=dark] &": {
     color: "currentcolor",
     transform: "translateY(0)",