soliq-design-system 1.0.2 → 1.0.4

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.
Files changed (5) hide show
  1. package/dist/ThemeToggleTransition/ThemeToggleTransition.d.ts +3 -4
  2. package/dist/ThemeToggleTransition/ThemeToggleTransition.js +7 -21
  3. package/dist/ThemeToggleTransition/ThemeToggleTransition.styles.d.ts +1 -1
  4. package/dist/ThemeToggleTransition/ThemeToggleTransition.styles.js +4 -32
  5. package/package.json +1 -1
package/dist/ThemeToggleTransition/ThemeToggleTransition.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  type ThemeMode = "light" | "dark";
2
- type InitialTheme = ThemeMode | "auto";
3
2
  export interface ThemeToggleTransitionProps {
4
- initialTheme?: InitialTheme;
3
+ initialTheme?: ThemeMode;
5
4
  className?: string;
6
- onThemeChange?: (theme: ThemeMode) => void;
5
+ onChange?: (theme: ThemeMode) => void;
7
6
  }
8
- export declare function ThemeToggleTransition({ initialTheme, className, onThemeChange }: ThemeToggleTransitionProps): import("react").JSX.Element;
7
+ export declare function ThemeToggleTransition({ initialTheme, className, onChange }: ThemeToggleTransitionProps): import("react").JSX.Element;
9
8
  export {};
package/dist/ThemeToggleTransition/ThemeToggleTransition.js CHANGED
@@ -3,10 +3,10 @@ import { useEffect, useMemo, useRef, useState } from "react";
3
3
  import moonIconUrl from "../assets/images/moon.svg";
4
4
  import sunIconUrl from "../assets/images/sun.svg";
5
5
  import { styles } from "./ThemeToggleTransition.styles";
6
- export function ThemeToggleTransition({ initialTheme = "auto", className, onThemeChange }) {
6
+ export function ThemeToggleTransition({ initialTheme = "light", className, onChange }) {
7
7
  const reduceMotion = useMemo(() => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, []);
8
- const [theme, setTheme] = useState("light");
9
- const [targetTheme, setTargetTheme] = useState("light");
8
+ const [theme, setTheme] = useState(initialTheme);
9
+ const [targetTheme, setTargetTheme] = useState(initialTheme);
10
10
  const [isTransitioning, setIsTransitioning] = useState(false);
11
11
  const [isClosing, setIsClosing] = useState(false);
12
12
  const timersRef = useRef([]);
@@ -21,15 +21,8 @@ export function ThemeToggleTransition({ initialTheme = "auto", className, onThem
21
21
  ], []);
22
22
  const userClass = className ? ` ${className}` : "";
23
23
  useEffect(() => {
24
- const root = document.documentElement;
25
- const resolvedTheme = initialTheme === "auto"
26
- ? window.matchMedia("(prefers-color-scheme: dark)").matches
27
- ? "dark"
28
- : "light"
29
- : initialTheme;
30
- setTheme(resolvedTheme);
31
- setTargetTheme(resolvedTheme);
32
- root.setAttribute("data-soliq-theme", resolvedTheme);
24
+ setTheme(initialTheme);
25
+ setTargetTheme(initialTheme);
33
26
  }, [initialTheme]);
34
27
  useEffect(() => {
35
28
  return () => {
@@ -37,9 +30,6 @@ export function ThemeToggleTransition({ initialTheme = "auto", className, onThem
37
30
  timersRef.current = [];
38
31
  };
39
32
  }, []);
40
- const applyTheme = (nextTheme) => {
41
- document.documentElement.setAttribute("data-soliq-theme", nextTheme);
42
- };
43
33
  const clearTimers = () => {
44
34
  timersRef.current.forEach((timerId) => window.clearTimeout(timerId));
45
35
  timersRef.current = [];
@@ -52,17 +42,13 @@ export function ThemeToggleTransition({ initialTheme = "auto", className, onThem
52
42
  if (reduceMotion) {
53
43
  setTheme(nextTheme);
54
44
  setTargetTheme(nextTheme);
55
- applyTheme(nextTheme);
56
- onThemeChange?.(nextTheme);
45
+ onChange?.(nextTheme);
57
46
  return;
58
47
  }
59
48
  clearTimers();
60
49
  setTargetTheme(nextTheme);
61
50
  setIsTransitioning(true);
62
51
  setIsClosing(false);
63
- timersRef.current.push(window.setTimeout(() => {
64
- applyTheme(nextTheme);
65
- }, 420));
66
52
  timersRef.current.push(window.setTimeout(() => {
67
53
  setIsClosing(true);
68
54
  }, 1520));
@@ -70,7 +56,7 @@ export function ThemeToggleTransition({ initialTheme = "auto", className, onThem
70
56
  setTheme(nextTheme);
71
57
  setIsTransitioning(false);
72
58
  setIsClosing(false);
73
- onThemeChange?.(nextTheme);
59
+ onChange?.(nextTheme);
74
60
  }, 1940));
75
61
  };
76
62
  const buttonTheme = isTransitioning ? targetTheme : theme;
package/dist/ThemeToggleTransition/ThemeToggleTransition.styles.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const styles = "\n:root {\n --soliq-theme-bg: #f8fafc;\n --soliq-theme-surface: #ffffff;\n --soliq-theme-text: #0f172a;\n --soliq-theme-subtle: #64748b;\n --soliq-theme-accent: #d8c1aa;\n --soliq-theme-glow: rgba(11, 79, 138, 0.24);\n --soliq-theme-sunrise-1: #ffd7a1;\n --soliq-theme-sunrise-2: #ffb36b;\n --soliq-theme-sunrise-3: #ff8f7c;\n --soliq-theme-sunrise-4: #ffdcb4;\n}\n\n:root[data-soliq-theme=\"dark\"] {\n --soliq-theme-bg: #020f25;\n --soliq-theme-surface: #0c1d38;\n --soliq-theme-text: #d7e5f4;\n --soliq-theme-subtle: #8ba3c3;\n --soliq-theme-accent: #d8c1aa;\n --soliq-theme-glow: rgba(94, 143, 205, 0.26);\n}\n\nbody {\n background: var(--soliq-theme-bg);\n color: var(--soliq-theme-text);\n transition: background-color 900ms cubic-bezier(0.22, 1, 0.36, 1), color 900ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.soliq-theme-toggle {\n position: relative;\n z-index: 1;\n display: inline-block;\n width: 46px;\n height: 25px;\n border: 0;\n border-radius: 999px;\n padding: 0;\n background: #d1d5db;\n color: #ffffff;\n cursor: pointer;\n transition: background-color 260ms ease, transform 160ms ease;\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);\n}\n\n.soliq-theme-toggle[data-theme=\"light\"] {\n background: #d1d5db;\n}\n\n.soliq-theme-toggle[data-theme=\"dark\"] {\n background: #bfc4cc;\n}\n\n.soliq-theme-toggle:hover {\n transform: translateY(-1px);\n}\n\n.soliq-theme-toggle:active {\n transform: translateY(0);\n}\n\n.soliq-theme-toggle:focus-visible {\n outline: 2px solid rgba(11, 79, 138, 0.38);\n outline-offset: 2px;\n}\n\n.soliq-theme-toggle__icon-wrap {\n position: absolute;\n top: 2px;\n left: 2px;\n width: 21px;\n height: 21px;\n border-radius: 999px;\n display: grid;\n place-items: center;\n background: #fde68a;\n box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);\n transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), background-color 280ms ease;\n}\n\n.soliq-theme-toggle[data-theme=\"dark\"] .soliq-theme-toggle__icon-wrap {\n transform: translateX(21px);\n background: #f8fafc;\n}\n\n.soliq-theme-toggle[data-theme=\"light\"] .soliq-theme-toggle__icon-wrap {\n transform: translateX(0);\n background: #fde68a;\n}\n\n.soliq-theme-toggle__icon {\n width: 12px;\n height: 12px;\n display: block;\n object-fit: contain;\n}\n\n.soliq-theme-transition-overlay {\n position: fixed;\n inset: 0;\n z-index: 10000;\n display: grid;\n place-items: center;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n animation: overlay-fade-in 340ms ease forwards;\n}\n\n.soliq-theme-transition-overlay[data-target=\"dark\"] {\n background:\n radial-gradient(circle at 50% 46%, rgba(11, 48, 96, 0.28), rgba(2, 15, 37, 0.93) 64%),\n linear-gradient(145deg, rgba(3, 18, 41, 0.86), rgba(1, 7, 22, 0.96));\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] {\n background:\n radial-gradient(circle at 50% 45%, rgba(255, 194, 116, 0.4), rgba(255, 244, 224, 0.92) 58%),\n linear-gradient(145deg, rgba(255, 249, 236, 0.98), rgba(255, 224, 191, 0.9) 56%, rgba(255, 200, 154, 0.84));\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__veil {\n background: radial-gradient(circle at 50% 50%, rgba(255, 195, 118, 0.45), transparent 58%);\n}\n\n.soliq-theme-transition-overlay__veil {\n position: absolute;\n inset: 0;\n opacity: 0;\n background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.24), transparent 55%);\n animation: veil-breath 1240ms ease-out 90ms both;\n}\n\n.soliq-theme-transition-overlay__wave {\n position: absolute;\n width: 44vmax;\n height: 44vmax;\n border-radius: 50%;\n border: 1px solid rgba(216, 193, 170, 0.5);\n mix-blend-mode: screen;\n}\n\n.soliq-theme-transition-overlay__wave--1 {\n animation: overlay-wave-1 1580ms cubic-bezier(0.22, 1, 0.36, 1) 20ms both;\n}\n\n.soliq-theme-transition-overlay__wave--2 {\n width: 38vmax;\n height: 38vmax;\n border-color: rgba(139, 163, 195, 0.5);\n animation: overlay-wave-2 1480ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;\n}\n\n.soliq-theme-transition-overlay__wave--3 {\n width: 50vmax;\n height: 50vmax;\n border-color: rgba(255, 255, 255, 0.3);\n animation: overlay-wave-3 1720ms cubic-bezier(0.22, 1, 0.36, 1) 220ms both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__wave--1 {\n border-color: rgba(255, 171, 86, 0.56);\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__wave--2 {\n border-color: rgba(255, 147, 124, 0.45);\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__wave--3 {\n border-color: rgba(255, 220, 177, 0.52);\n}\n\n.soliq-theme-transition-overlay__flare {\n position: absolute;\n width: 58vmax;\n height: 58vmax;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(216, 193, 170, 0.22), transparent 66%);\n filter: blur(4px);\n opacity: 0;\n animation: flare-pulse 1300ms ease-out 150ms both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__flare {\n background: radial-gradient(circle, rgba(255, 167, 82, 0.34), transparent 68%);\n}\n\n.soliq-theme-transition-overlay__icon-shell {\n position: relative;\n width: 142px;\n height: 142px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n border: none;\n box-shadow: none;\n animation: icon-shell-in 780ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;\n}\n\n.soliq-theme-transition-overlay__icon-shell[data-target=\"dark\"] {\n border: none;\n}\n\n.soliq-theme-transition-overlay__icon-shell[data-target=\"light\"] {\n border: none;\n}\n\n.soliq-theme-transition-overlay__orbit {\n position: absolute;\n border-radius: 50%;\n border: 1px dashed rgba(255, 255, 255, 0.28);\n opacity: 0;\n}\n\n.soliq-theme-transition-overlay__orbit--a {\n width: 166px;\n height: 166px;\n animation: orbit-spin-a 1400ms linear 120ms both;\n}\n\n.soliq-theme-transition-overlay__orbit--b {\n width: 194px;\n height: 194px;\n border-color: rgba(216, 193, 170, 0.3);\n animation: orbit-spin-b 1600ms linear 160ms both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__orbit--a {\n border-color: rgba(255, 189, 114, 0.46);\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__orbit--b {\n border-color: rgba(255, 155, 124, 0.36);\n}\n\n.soliq-theme-transition-overlay__icon {\n width: 50px;\n height: 50px;\n color: #d8c1aa;\n display: block;\n object-fit: contain;\n filter: drop-shadow(0 6px 18px rgba(216, 193, 170, 0.35));\n animation: icon-pop 860ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;\n}\n\n.soliq-theme-transition-overlay__status {\n position: absolute;\n bottom: max(9vh, 74px);\n margin: 0;\n font-size: 13px;\n letter-spacing: 0.28em;\n text-transform: uppercase;\n font-weight: 600;\n color: color-mix(in srgb, var(--soliq-theme-text) 84%, transparent);\n opacity: 0;\n animation: status-in 820ms ease 380ms both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__status {\n color: rgba(131, 74, 36, 0.85);\n}\n\n.soliq-theme-transition-overlay__sparkles {\n position: absolute;\n inset: 0;\n}\n\n.soliq-theme-transition-overlay__sparkle {\n position: absolute;\n left: var(--spark-x);\n top: var(--spark-y);\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: color-mix(in srgb, var(--soliq-theme-accent) 75%, #ffffff);\n box-shadow: 0 0 12px color-mix(in srgb, var(--soliq-theme-accent) 75%, transparent);\n opacity: 0;\n transform: scale(0.2);\n animation: sparkle-in 940ms ease-out var(--spark-delay) both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__sparkle {\n background: rgba(255, 163, 88, 0.95);\n box-shadow: 0 0 14px rgba(255, 167, 96, 0.65);\n}\n\n.soliq-theme-transition-overlay--closing {\n animation: overlay-fade-out 420ms ease forwards;\n}\n\n@keyframes overlay-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes overlay-fade-out {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n\n@keyframes veil-breath {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.82;\n }\n}\n\n@keyframes overlay-wave-1 {\n from {\n transform: scale(0.2);\n opacity: 0.7;\n }\n to {\n transform: scale(1.55);\n opacity: 0;\n }\n}\n\n@keyframes overlay-wave-2 {\n from {\n transform: scale(0.15);\n opacity: 0.68;\n }\n to {\n transform: scale(1.62);\n opacity: 0;\n }\n}\n\n@keyframes overlay-wave-3 {\n from {\n transform: scale(0.1);\n opacity: 0.62;\n }\n to {\n transform: scale(1.5);\n opacity: 0;\n }\n}\n\n@keyframes icon-shell-in {\n from {\n opacity: 0;\n transform: translateY(-16px) scale(0.88);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n@keyframes icon-pop {\n from {\n opacity: 0;\n transform: scale(0.75) rotate(-16deg);\n }\n to {\n opacity: 1;\n transform: scale(1) rotate(0deg);\n }\n}\n\n@keyframes flare-pulse {\n 0% {\n opacity: 0;\n transform: scale(0.4);\n }\n 40% {\n opacity: 0.8;\n }\n 100% {\n opacity: 0;\n transform: scale(1.3);\n }\n}\n\n@keyframes orbit-spin-a {\n 0% {\n opacity: 0;\n transform: scale(0.7) rotate(0deg);\n }\n 25% {\n opacity: 0.55;\n }\n 100% {\n opacity: 0;\n transform: scale(1) rotate(180deg);\n }\n}\n\n@keyframes orbit-spin-b {\n 0% {\n opacity: 0;\n transform: scale(0.6) rotate(0deg);\n }\n 32% {\n opacity: 0.48;\n }\n 100% {\n opacity: 0;\n transform: scale(1) rotate(-160deg);\n }\n}\n\n@keyframes status-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes sparkle-in {\n 0% {\n opacity: 0;\n transform: scale(0.2);\n }\n 30% {\n opacity: 1;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(0.45);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body,\n .soliq-theme-toggle,\n .soliq-theme-transition-overlay,\n .soliq-theme-transition-overlay__veil,\n .soliq-theme-transition-overlay__wave,\n .soliq-theme-transition-overlay__flare,\n .soliq-theme-transition-overlay__icon-shell,\n .soliq-theme-transition-overlay__orbit,\n .soliq-theme-transition-overlay__icon {\n animation: none !important;\n transition: none !important;\n }\n\n .soliq-theme-transition-overlay__status,\n .soliq-theme-transition-overlay__sparkle {\n animation: none !important;\n opacity: 1;\n transform: none;\n }\n}\n";
1
+ export declare const styles = "\n.soliq-theme-toggle {\n position: relative;\n z-index: 1;\n display: inline-block;\n width: 46px;\n height: 25px;\n border: 0;\n border-radius: 999px;\n padding: 0;\n background: #d1d5db;\n color: #ffffff;\n cursor: pointer;\n transition: background-color 260ms ease, transform 160ms ease;\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);\n}\n\n.soliq-theme-toggle[data-theme=\"light\"] {\n background: #d1d5db;\n}\n\n.soliq-theme-toggle[data-theme=\"dark\"] {\n background: #bfc4cc;\n}\n\n.soliq-theme-toggle:hover {\n transform: translateY(-1px);\n}\n\n.soliq-theme-toggle:active {\n transform: translateY(0);\n}\n\n.soliq-theme-toggle:focus-visible {\n outline: 2px solid rgba(11, 79, 138, 0.38);\n outline-offset: 2px;\n}\n\n.soliq-theme-toggle__icon-wrap {\n position: absolute;\n top: 2px;\n left: 2px;\n width: 21px;\n height: 21px;\n border-radius: 999px;\n display: grid;\n place-items: center;\n background: #fde68a;\n box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);\n transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), background-color 280ms ease;\n}\n\n.soliq-theme-toggle[data-theme=\"dark\"] .soliq-theme-toggle__icon-wrap {\n transform: translateX(21px);\n background: #f8fafc;\n}\n\n.soliq-theme-toggle[data-theme=\"light\"] .soliq-theme-toggle__icon-wrap {\n transform: translateX(0);\n background: #fde68a;\n}\n\n.soliq-theme-toggle__icon {\n width: 12px;\n height: 12px;\n display: block;\n object-fit: contain;\n}\n\n.soliq-theme-transition-overlay {\n position: fixed;\n inset: 0;\n z-index: 2147483646;\n display: grid;\n place-items: center;\n pointer-events: none;\n opacity: 0;\n overflow: hidden;\n animation: overlay-fade-in 340ms ease forwards;\n}\n\n.soliq-theme-transition-overlay[data-target=\"dark\"] {\n background:\n radial-gradient(circle at 50% 46%, rgba(11, 48, 96, 0.28), rgba(2, 15, 37, 0.93) 64%),\n linear-gradient(145deg, rgba(3, 18, 41, 0.86), rgba(1, 7, 22, 0.96));\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] {\n background:\n radial-gradient(circle at 50% 45%, rgba(255, 194, 116, 0.4), rgba(255, 244, 224, 0.92) 58%),\n linear-gradient(145deg, rgba(255, 249, 236, 0.98), rgba(255, 224, 191, 0.9) 56%, rgba(255, 200, 154, 0.84));\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__veil {\n background: radial-gradient(circle at 50% 50%, rgba(255, 195, 118, 0.45), transparent 58%);\n}\n\n.soliq-theme-transition-overlay__veil {\n position: absolute;\n inset: 0;\n opacity: 0;\n background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.24), transparent 55%);\n animation: veil-breath 1240ms ease-out 90ms both;\n}\n\n.soliq-theme-transition-overlay__wave {\n position: absolute;\n width: 44vmax;\n height: 44vmax;\n border-radius: 50%;\n border: 1px solid rgba(216, 193, 170, 0.5);\n mix-blend-mode: screen;\n}\n\n.soliq-theme-transition-overlay__wave--1 {\n animation: overlay-wave-1 1580ms cubic-bezier(0.22, 1, 0.36, 1) 20ms both;\n}\n\n.soliq-theme-transition-overlay__wave--2 {\n width: 38vmax;\n height: 38vmax;\n border-color: rgba(139, 163, 195, 0.5);\n animation: overlay-wave-2 1480ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;\n}\n\n.soliq-theme-transition-overlay__wave--3 {\n width: 50vmax;\n height: 50vmax;\n border-color: rgba(255, 255, 255, 0.3);\n animation: overlay-wave-3 1720ms cubic-bezier(0.22, 1, 0.36, 1) 220ms both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__wave--1 {\n border-color: rgba(255, 171, 86, 0.56);\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__wave--2 {\n border-color: rgba(255, 147, 124, 0.45);\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__wave--3 {\n border-color: rgba(255, 220, 177, 0.52);\n}\n\n.soliq-theme-transition-overlay__flare {\n position: absolute;\n width: 58vmax;\n height: 58vmax;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(216, 193, 170, 0.22), transparent 66%);\n filter: blur(4px);\n opacity: 0;\n animation: flare-pulse 1300ms ease-out 150ms both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__flare {\n background: radial-gradient(circle, rgba(255, 167, 82, 0.34), transparent 68%);\n}\n\n.soliq-theme-transition-overlay__icon-shell {\n position: relative;\n width: 142px;\n height: 142px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n border: none;\n box-shadow: none;\n animation: icon-shell-in 780ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;\n}\n\n.soliq-theme-transition-overlay__icon-shell[data-target=\"dark\"] {\n border: none;\n}\n\n.soliq-theme-transition-overlay__icon-shell[data-target=\"light\"] {\n border: none;\n}\n\n.soliq-theme-transition-overlay__orbit {\n position: absolute;\n border-radius: 50%;\n border: 1px dashed rgba(255, 255, 255, 0.28);\n opacity: 0;\n}\n\n.soliq-theme-transition-overlay__orbit--a {\n width: 166px;\n height: 166px;\n animation: orbit-spin-a 1400ms linear 120ms both;\n}\n\n.soliq-theme-transition-overlay__orbit--b {\n width: 194px;\n height: 194px;\n border-color: rgba(216, 193, 170, 0.3);\n animation: orbit-spin-b 1600ms linear 160ms both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__orbit--a {\n border-color: rgba(255, 189, 114, 0.46);\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__orbit--b {\n border-color: rgba(255, 155, 124, 0.36);\n}\n\n.soliq-theme-transition-overlay__icon {\n width: 50px;\n height: 50px;\n color: #d8c1aa;\n display: block;\n object-fit: contain;\n filter: drop-shadow(0 6px 18px rgba(216, 193, 170, 0.35));\n animation: icon-pop 860ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;\n}\n\n.soliq-theme-transition-overlay__status {\n position: absolute;\n bottom: max(9vh, 74px);\n margin: 0;\n font-size: 13px;\n letter-spacing: 0.28em;\n text-transform: uppercase;\n font-weight: 600;\n color: rgba(15, 23, 42, 0.84);\n opacity: 0;\n animation: status-in 820ms ease 380ms both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__status {\n color: rgba(131, 74, 36, 0.85);\n}\n\n.soliq-theme-transition-overlay__sparkles {\n position: absolute;\n inset: 0;\n}\n\n.soliq-theme-transition-overlay__sparkle {\n position: absolute;\n left: var(--spark-x);\n top: var(--spark-y);\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: rgba(216, 193, 170, 0.9);\n box-shadow: 0 0 12px rgba(216, 193, 170, 0.7);\n opacity: 0;\n transform: scale(0.2);\n animation: sparkle-in 940ms ease-out var(--spark-delay) both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__sparkle {\n background: rgba(255, 163, 88, 0.95);\n box-shadow: 0 0 14px rgba(255, 167, 96, 0.65);\n}\n\n.soliq-theme-transition-overlay--closing {\n animation: overlay-fade-out 420ms ease forwards;\n}\n\n@keyframes overlay-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes overlay-fade-out {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n\n@keyframes veil-breath {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.82;\n }\n}\n\n@keyframes overlay-wave-1 {\n from {\n transform: scale(0.2);\n opacity: 0.7;\n }\n to {\n transform: scale(1.55);\n opacity: 0;\n }\n}\n\n@keyframes overlay-wave-2 {\n from {\n transform: scale(0.15);\n opacity: 0.68;\n }\n to {\n transform: scale(1.62);\n opacity: 0;\n }\n}\n\n@keyframes overlay-wave-3 {\n from {\n transform: scale(0.1);\n opacity: 0.62;\n }\n to {\n transform: scale(1.5);\n opacity: 0;\n }\n}\n\n@keyframes icon-shell-in {\n from {\n opacity: 0;\n transform: translateY(-16px) scale(0.88);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n@keyframes icon-pop {\n from {\n opacity: 0;\n transform: scale(0.75) rotate(-16deg);\n }\n to {\n opacity: 1;\n transform: scale(1) rotate(0deg);\n }\n}\n\n@keyframes flare-pulse {\n 0% {\n opacity: 0;\n transform: scale(0.4);\n }\n 40% {\n opacity: 0.8;\n }\n 100% {\n opacity: 0;\n transform: scale(1.3);\n }\n}\n\n@keyframes orbit-spin-a {\n 0% {\n opacity: 0;\n transform: scale(0.7) rotate(0deg);\n }\n 25% {\n opacity: 0.55;\n }\n 100% {\n opacity: 0;\n transform: scale(1) rotate(180deg);\n }\n}\n\n@keyframes orbit-spin-b {\n 0% {\n opacity: 0;\n transform: scale(0.6) rotate(0deg);\n }\n 32% {\n opacity: 0.48;\n }\n 100% {\n opacity: 0;\n transform: scale(1) rotate(-160deg);\n }\n}\n\n@keyframes status-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes sparkle-in {\n 0% {\n opacity: 0;\n transform: scale(0.2);\n }\n 30% {\n opacity: 1;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(0.45);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n body,\n .soliq-theme-toggle,\n .soliq-theme-transition-overlay,\n .soliq-theme-transition-overlay__veil,\n .soliq-theme-transition-overlay__wave,\n .soliq-theme-transition-overlay__flare,\n .soliq-theme-transition-overlay__icon-shell,\n .soliq-theme-transition-overlay__orbit,\n .soliq-theme-transition-overlay__icon {\n animation: none !important;\n transition: none !important;\n }\n\n .soliq-theme-transition-overlay__status,\n .soliq-theme-transition-overlay__sparkle {\n animation: none !important;\n opacity: 1;\n transform: none;\n }\n}\n";
package/dist/ThemeToggleTransition/ThemeToggleTransition.styles.js CHANGED
@@ -1,32 +1,4 @@
1
1
  export const styles = `
2
- :root {
3
- --soliq-theme-bg: #f8fafc;
4
- --soliq-theme-surface: #ffffff;
5
- --soliq-theme-text: #0f172a;
6
- --soliq-theme-subtle: #64748b;
7
- --soliq-theme-accent: #d8c1aa;
8
- --soliq-theme-glow: rgba(11, 79, 138, 0.24);
9
- --soliq-theme-sunrise-1: #ffd7a1;
10
- --soliq-theme-sunrise-2: #ffb36b;
11
- --soliq-theme-sunrise-3: #ff8f7c;
12
- --soliq-theme-sunrise-4: #ffdcb4;
13
- }
14
-
15
- :root[data-soliq-theme="dark"] {
16
- --soliq-theme-bg: #020f25;
17
- --soliq-theme-surface: #0c1d38;
18
- --soliq-theme-text: #d7e5f4;
19
- --soliq-theme-subtle: #8ba3c3;
20
- --soliq-theme-accent: #d8c1aa;
21
- --soliq-theme-glow: rgba(94, 143, 205, 0.26);
22
- }
23
-
24
- body {
25
- background: var(--soliq-theme-bg);
26
- color: var(--soliq-theme-text);
27
- transition: background-color 900ms cubic-bezier(0.22, 1, 0.36, 1), color 900ms cubic-bezier(0.22, 1, 0.36, 1);
28
- }
29
-
30
2
  .soliq-theme-toggle {
31
3
  position: relative;
32
4
  z-index: 1;
@@ -98,7 +70,7 @@ body {
98
70
  .soliq-theme-transition-overlay {
99
71
  position: fixed;
100
72
  inset: 0;
101
- z-index: 10000;
73
+ z-index: 2147483646;
102
74
  display: grid;
103
75
  place-items: center;
104
76
  pointer-events: none;
@@ -251,7 +223,7 @@ body {
251
223
  letter-spacing: 0.28em;
252
224
  text-transform: uppercase;
253
225
  font-weight: 600;
254
- color: color-mix(in srgb, var(--soliq-theme-text) 84%, transparent);
226
+ color: rgba(15, 23, 42, 0.84);
255
227
  opacity: 0;
256
228
  animation: status-in 820ms ease 380ms both;
257
229
  }
@@ -272,8 +244,8 @@ body {
272
244
  width: 7px;
273
245
  height: 7px;
274
246
  border-radius: 50%;
275
- background: color-mix(in srgb, var(--soliq-theme-accent) 75%, #ffffff);
276
- box-shadow: 0 0 12px color-mix(in srgb, var(--soliq-theme-accent) 75%, transparent);
247
+ background: rgba(216, 193, 170, 0.9);
248
+ box-shadow: 0 0 12px rgba(216, 193, 170, 0.7);
277
249
  opacity: 0;
278
250
  transform: scale(0.2);
279
251
  animation: sparkle-in 940ms ease-out var(--spark-delay) both;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "soliq-design-system",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "private": false,
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",