@domicile-desktop/component-library 0.0.0-alpha-9a495c52e127 → 0.0.0-alpha-9d6540b568d0
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.
package/package.json
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
"dependencies": {
|
|
3
3
|
"@base-ui/react": "^1.8.0",
|
|
4
4
|
"@cprussin/option-result": "^2.0.1",
|
|
5
|
-
"@domicile-desktop/sdk": "0.0.0-alpha-
|
|
6
|
-
"@domicile-desktop/system-apps": "0.0.0-alpha-
|
|
5
|
+
"@domicile-desktop/sdk": "0.0.0-alpha-9d6540b568d0",
|
|
6
|
+
"@domicile-desktop/system-apps": "0.0.0-alpha-9d6540b568d0",
|
|
7
7
|
"@phosphor-icons/react": "^2.1.10"
|
|
8
8
|
},
|
|
9
9
|
"description": "React components and the Panda CSS design system that Domicile's shells are built from.",
|
|
@@ -105,5 +105,5 @@
|
|
|
105
105
|
"test:unit": "bun test"
|
|
106
106
|
},
|
|
107
107
|
"type": "module",
|
|
108
|
-
"version": "0.0.0-alpha-
|
|
108
|
+
"version": "0.0.0-alpha-9d6540b568d0"
|
|
109
109
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { SunIcon } from "@phosphor-icons/react/dist/ssr/Sun";
|
|
1
|
+
import { CircleHalfIcon } from "@phosphor-icons/react/dist/ssr/CircleHalf";
|
|
3
2
|
|
|
4
3
|
import { css, cx } from "../../styled-system/css";
|
|
5
4
|
import type { ThemeControl } from "./ThemeProvider";
|
|
@@ -22,6 +21,9 @@ type Props = {
|
|
|
22
21
|
/**
|
|
23
22
|
* A dark/light theme toggle for the shell's chrome.
|
|
24
23
|
*
|
|
24
|
+
* The icon is a half-filled circle, mirrored per theme, so it stays distinct
|
|
25
|
+
* from the brightness readout's sun.
|
|
26
|
+
*
|
|
25
27
|
* There is no "system" option because Domicile is the system. A click asks
|
|
26
28
|
* the compositor for the change; the page repaints when the answer arrives.
|
|
27
29
|
* Throws when no `ThemeProvider` is mounted above it.
|
|
@@ -37,17 +39,17 @@ export const ThemeSwitch = ({ useTheme: useThemeHook = useTheme }: Props) => {
|
|
|
37
39
|
title={LABELS[theme]}
|
|
38
40
|
type="button"
|
|
39
41
|
>
|
|
40
|
-
<span aria-hidden className={cx(slotStyles,
|
|
41
|
-
<
|
|
42
|
+
<span aria-hidden className={cx(slotStyles, lightSlotStyles)}>
|
|
43
|
+
<CircleHalfIcon mirrored size={16} weight="fill" />
|
|
42
44
|
</span>
|
|
43
|
-
<span aria-hidden className={cx(slotStyles,
|
|
44
|
-
<
|
|
45
|
+
<span aria-hidden className={cx(slotStyles, darkSlotStyles)}>
|
|
46
|
+
<CircleHalfIcon size={16} weight="fill" />
|
|
45
47
|
</span>
|
|
46
48
|
</button>
|
|
47
49
|
);
|
|
48
50
|
};
|
|
49
51
|
|
|
50
|
-
// A circular window holding the
|
|
52
|
+
// A circular window holding the light and dark slots.
|
|
51
53
|
//
|
|
52
54
|
// Sets no `color` so the icons inherit their surroundings' text color. The
|
|
53
55
|
// toggle often sits in a white bar over the wallpaper, which does not change
|
|
@@ -105,7 +107,7 @@ const slotStyles = css({
|
|
|
105
107
|
// The `color-mix` is repeated inline because Panda only extracts static
|
|
106
108
|
// literals. A shared const would silently emit no rule.
|
|
107
109
|
|
|
108
|
-
const
|
|
110
|
+
const lightSlotStyles = css({
|
|
109
111
|
"[data-theme-mode=dark] &": {
|
|
110
112
|
color: "color-mix(in oklab, currentcolor 40%, transparent)",
|
|
111
113
|
transform: "translateY(100%)",
|
|
@@ -116,7 +118,7 @@ const sunSlotStyles = css({
|
|
|
116
118
|
},
|
|
117
119
|
});
|
|
118
120
|
|
|
119
|
-
const
|
|
121
|
+
const darkSlotStyles = css({
|
|
120
122
|
"[data-theme-mode=dark] &": {
|
|
121
123
|
color: "currentcolor",
|
|
122
124
|
transform: "translateY(0)",
|