@galaxy-io/dls 1.2.4 → 1.2.6
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.
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface GalaxyLogomarkAnimationProps {
|
|
2
|
+
height?: number | string;
|
|
3
|
+
isDark?: boolean;
|
|
4
|
+
isPaused?: boolean;
|
|
5
|
+
speed?: number;
|
|
6
|
+
}
|
|
7
|
+
declare const GalaxyLogomarkAnimation: ({ height, isDark, isPaused, speed, }: GalaxyLogomarkAnimationProps) => import("react").JSX.Element;
|
|
8
|
+
export default GalaxyLogomarkAnimation;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { GalaxyTheme } from "../theme/constants.js";
|
|
2
|
+
import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
|
|
3
|
+
import { getCssSizeValue } from "../utils/linaria.js";
|
|
4
|
+
import galaxy_animation_default from "../assets/models/galaxy-animation.js";
|
|
5
|
+
/* empty css */
|
|
6
|
+
import { styled } from "@linaria/react";
|
|
7
|
+
import { match } from "ts-pattern";
|
|
8
|
+
import { useEffect, useRef } from "react";
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
import Lottie from "lottie-react/build/index.es.js";
|
|
11
|
+
//#region src/icons/GalaxyLogomarkAnimation.tsx
|
|
12
|
+
var _exp2 = () => ({ $height }) => $height;
|
|
13
|
+
var _exp3 = () => ({ $fill }) => $fill;
|
|
14
|
+
var GalaxyLogomarkAnimationWrapper = /*#__PURE__*/ styled("div")({
|
|
15
|
+
name: "GalaxyLogomarkAnimationWrapper",
|
|
16
|
+
class: "gm80o9u",
|
|
17
|
+
propsAsIs: false,
|
|
18
|
+
vars: {
|
|
19
|
+
"gm80o9u-0": [_exp2()],
|
|
20
|
+
"gm80o9u-1": [_exp3()]
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
var GalaxyLogomarkAnimation = ({ height = 32, isDark, isPaused = false, speed = 1 }) => {
|
|
24
|
+
const lottieRef = useRef(null);
|
|
25
|
+
const { theme, activeTheme } = useGalaxyTheme();
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
lottieRef.current?.setSpeed(speed);
|
|
28
|
+
}, [speed, isPaused]);
|
|
29
|
+
const fill = isDark ? match(activeTheme).with(GalaxyTheme.DARK, () => theme.color.icon.primaryAlt).with(GalaxyTheme.LIGHT, () => theme.color.icon.primary).exhaustive() : theme.color.icon.primary;
|
|
30
|
+
return /* @__PURE__ */ jsx(GalaxyLogomarkAnimationWrapper, {
|
|
31
|
+
$height: getCssSizeValue(height),
|
|
32
|
+
$fill: fill,
|
|
33
|
+
children: /* @__PURE__ */ jsx(Lottie, {
|
|
34
|
+
lottieRef,
|
|
35
|
+
animationData: galaxy_animation_default,
|
|
36
|
+
loop: !isPaused,
|
|
37
|
+
autoplay: !isPaused
|
|
38
|
+
})
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
//#endregion
|
|
42
|
+
export { GalaxyLogomarkAnimation as default };
|
package/dist/styles.css
CHANGED
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
.h1gstj4e{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
|
|
53
53
|
.s12p8yma{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:0 2px;min-width:16px;height:16px;background-color:var(--s12p8yma-0);border:0.5px solid var(--s12p8yma-1);border-radius:4px;color:var(--s12p8yma-2);font-size:var(--s12p8yma-3);line-height:var(--s12p8yma-4);font-weight:var(--s12p8yma-5);font-family:var(--s12p8yma-6);}
|
|
54
54
|
.c17zkoob{width:var(--c17zkoob-0);height:var(--c17zkoob-0);}
|
|
55
|
+
.gm80o9u{width:var(--gm80o9u-0);height:var(--gm80o9u-0);}.gm80o9u >div{width:100%;height:100%;}.gm80o9u svg{display:block;}.gm80o9u svg>g path{fill:var(--gm80o9u-1);}
|
|
55
56
|
.cythikj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;cursor:var(--cythikj-0);opacity:var(--cythikj-1);}
|
|
56
57
|
.c1f4v2sg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:var(--c1f4v2sg-0);height:var(--c1f4v2sg-0);border-radius:4px;border:0.5px solid var(--c1f4v2sg-1);background-color:var(--c1f4v2sg-2);-webkit-transition:border-color 0.075s ease-in-out,background-color 0.075s ease-in-out;transition:border-color 0.075s ease-in-out,background-color 0.075s ease-in-out;}.c1f4v2sg:hover{border-color:var(--c1f4v2sg-3);}
|
|
57
58
|
.s1i18c6k{color:var(--s1i18c6k-0);font-size:var(--s1i18c6k-1);font-weight:var(--s1i18c6k-2);line-height:var(--s1i18c6k-3);letter-spacing:var(--s1i18c6k-4);padding-left:var(--s1i18c6k-5);}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@galaxy-io/dls",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.6",
|
|
4
4
|
"description": "Galaxy Design Language System",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
|
@@ -216,6 +216,7 @@
|
|
|
216
216
|
"d3-scale": "^4.0.2",
|
|
217
217
|
"d3-shape": "^3.2.0",
|
|
218
218
|
"framer-motion": "^12.40.0",
|
|
219
|
+
"lottie-react": "^2.4.1",
|
|
219
220
|
"re-resizable": "^6.11.2",
|
|
220
221
|
"react-hotkeys-hook": "^5.3.2",
|
|
221
222
|
"react-intersection-observer": "^10.0.3",
|