| 9 | const cool = (l: number) => `oklch(${l}% 0.015 260)`; |
| 10 | |
| 11 | export function App() { |
| 12 | const [theme, setTheme] = useState<"dark" | "auto" | "light">("auto"); |
| 13 | return ( |
| 14 | <div className={theme}> |
| 15 | <div |
| 16 | style={pipe( |
| 17 | { |
| 18 | minHeight: "100dvh", |
| 19 | display: "flex", |
| 20 | flexDirection: "column", |
| 21 | alignItems: "center", |
| 22 | justifyContent: "center", |
| 23 | gap: 24, |
| 24 | padding: 32, |
| 25 | boxSizing: "border-box", |
| 26 | background: warm(93), |
| 27 | fontFamily: "sans-serif", |
| 28 | }, |
| 29 | on(dark, { |
| 30 | background: cool(11), |
| 31 | }), |
| 32 | )} |
| 33 | > |
| 34 | <article |
| 35 | style={pipe( |
| 36 | { |
| 37 | display: "flex", |
| 38 | maxWidth: 460, |
| 39 | width: "100%", |
| 40 | background: warm(99), |
| 41 | border: `1px solid ${warm(84)}`, |
| 42 | borderRadius: 6, |
| 43 | boxShadow: "0 2px 10px oklch(0% 0 0 / 0.07)", |
| 44 | overflow: "hidden", |
| 45 | cursor: "default", |
| 46 | }, |
| 47 | on("&:hover", { |
| 48 | boxShadow: "0 8px 28px oklch(0% 0 0 / 0.13)", |
| 49 | }), |
| 50 | on(and("&:hover", not("@media (prefers-reduced-motion: reduce)")), { |
| 51 | transform: "translateY(-4px)", |
| 52 | }), |
| 53 | on(not("@media (prefers-reduced-motion: reduce)"), { |
| 54 | transition: "transform 0.2s ease, box-shadow 0.2s ease", |
| 55 | }), |
| 56 | on(dark, { |
| 57 | background: cool(17), |
| 58 | border: `1px solid ${cool(27)}`, |
| 59 | boxShadow: "0 2px 10px oklch(0% 0 0 / 0.35)", |
| 60 | }), |
| 61 | on(and("&:hover", dark), { |
| 62 | boxShadow: "0 8px 28px oklch(0% 0 0 / 0.55)", |
| 63 | }), |
| 64 | )} |
| 65 | > |
| 66 | {/* Portrait */} |
| 67 | <div style={{ flexShrink: 0, width: 150, alignSelf: "stretch" }}> |
| 68 | <Portrait /> |