soliq-design-system 1.0.6 → 1.0.7
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.
|
@@ -1 +1 @@
|
|
|
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, 1), 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%,
|
|
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, 1), 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%, rgb(255 239 219), 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: 80px;\n height: 80px;\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";
|
|
@@ -87,7 +87,7 @@ export const styles = `
|
|
|
87
87
|
|
|
88
88
|
.soliq-theme-transition-overlay[data-target="light"] {
|
|
89
89
|
background:
|
|
90
|
-
radial-gradient(circle at 50% 45%,
|
|
90
|
+
radial-gradient(circle at 50% 45%, rgb(255 239 219), rgba(255, 244, 224, 0.92) 58%),
|
|
91
91
|
linear-gradient(145deg, rgba(255, 249, 236, 0.98), rgba(255, 224, 191, 0.9) 56%, rgba(255, 200, 154, 0.84));
|
|
92
92
|
}
|
|
93
93
|
|
|
@@ -206,8 +206,8 @@ export const styles = `
|
|
|
206
206
|
}
|
|
207
207
|
|
|
208
208
|
.soliq-theme-transition-overlay__icon {
|
|
209
|
-
width:
|
|
210
|
-
height:
|
|
209
|
+
width: 80px;
|
|
210
|
+
height: 80px;
|
|
211
211
|
color: #d8c1aa;
|
|
212
212
|
display: block;
|
|
213
213
|
object-fit: contain;
|