chromia 0.0.29 → 0.0.31
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,77 @@
|
|
|
1
|
+
<script>export let color = "#000";
|
|
2
|
+
export let gradient = {
|
|
3
|
+
colors: ["", ""],
|
|
4
|
+
direction: "bottom"
|
|
5
|
+
};
|
|
6
|
+
export let size = "1rem";
|
|
7
|
+
export let weight = 1;
|
|
8
|
+
const getGradientDirection = (direction) => {
|
|
9
|
+
switch (direction) {
|
|
10
|
+
case "top":
|
|
11
|
+
return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
|
|
12
|
+
case "right":
|
|
13
|
+
return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
|
|
14
|
+
case "bottom":
|
|
15
|
+
return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
|
|
16
|
+
case "left":
|
|
17
|
+
return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
|
|
18
|
+
default:
|
|
19
|
+
return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
{#if gradient.colors[1] !== ""}
|
|
25
|
+
<svg
|
|
26
|
+
width="12"
|
|
27
|
+
height="12"
|
|
28
|
+
viewBox="0 0 14 12"
|
|
29
|
+
fill="none"
|
|
30
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
31
|
+
style="width: {size}; height: {size};"
|
|
32
|
+
>
|
|
33
|
+
<path
|
|
34
|
+
d="M3.63552 1.39719L0.59961 4.47419M0.59961 4.47419L3.63552 7.55118M0.59961 4.47419L10.1381 4.47419C11.9394 4.47419 13.3996 5.93441 13.3996 7.73569V7.73569C13.3996 9.53697 11.9394 10.9972 10.1381 10.9972L6.99961 10.9972"
|
|
35
|
+
stroke="url(#grad-Pen)"
|
|
36
|
+
stroke-width={weight}
|
|
37
|
+
stroke-linecap="round"
|
|
38
|
+
stroke-linejoin="round"
|
|
39
|
+
/>
|
|
40
|
+
|
|
41
|
+
<defs>
|
|
42
|
+
<linearGradient
|
|
43
|
+
id="grad-Pen"
|
|
44
|
+
x1={getGradientDirection(gradient.direction).x1}
|
|
45
|
+
y1={getGradientDirection(gradient.direction).y1}
|
|
46
|
+
x2={getGradientDirection(gradient.direction).x2}
|
|
47
|
+
y2={getGradientDirection(gradient.direction).y2}
|
|
48
|
+
>
|
|
49
|
+
<stop
|
|
50
|
+
offset="0%"
|
|
51
|
+
style="stop-color:{gradient.colors[0]};stop-opacity:1"
|
|
52
|
+
/>
|
|
53
|
+
<stop
|
|
54
|
+
offset="100%"
|
|
55
|
+
style="stop-color:{gradient.colors[1]};stop-opacity:1"
|
|
56
|
+
/>
|
|
57
|
+
</linearGradient>
|
|
58
|
+
</defs>
|
|
59
|
+
</svg>
|
|
60
|
+
{:else}
|
|
61
|
+
<svg
|
|
62
|
+
width="12"
|
|
63
|
+
height="12"
|
|
64
|
+
viewBox="0 0 14 12"
|
|
65
|
+
fill="none"
|
|
66
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
67
|
+
style="width: {size}; height: {size};"
|
|
68
|
+
>
|
|
69
|
+
<path
|
|
70
|
+
d="M3.63552 1.39719L0.59961 4.47419M0.59961 4.47419L3.63552 7.55118M0.59961 4.47419L10.1381 4.47419C11.9394 4.47419 13.3996 5.93441 13.3996 7.73569V7.73569C13.3996 9.53697 11.9394 10.9972 10.1381 10.9972L6.99961 10.9972"
|
|
71
|
+
stroke={color}
|
|
72
|
+
stroke-width={weight}
|
|
73
|
+
stroke-linecap="round"
|
|
74
|
+
stroke-linejoin="round"
|
|
75
|
+
/>
|
|
76
|
+
</svg>
|
|
77
|
+
{/if}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
color?: string | undefined;
|
|
5
|
+
gradient?:
|
|
6
|
+
| {
|
|
7
|
+
colors: [string, string];
|
|
8
|
+
direction: "top" | "right" | "bottom" | "left";
|
|
9
|
+
}
|
|
10
|
+
| undefined;
|
|
11
|
+
size?: string | undefined;
|
|
12
|
+
weight?: number | undefined;
|
|
13
|
+
};
|
|
14
|
+
events: {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
};
|
|
17
|
+
slots: {};
|
|
18
|
+
};
|
|
19
|
+
export type BackArrowIconProps = typeof __propDef.props;
|
|
20
|
+
export type BackArrowIconEvents = typeof __propDef.events;
|
|
21
|
+
export type BackArrowIconSlots = typeof __propDef.slots;
|
|
22
|
+
export default class BackArrowIcon extends SvelteComponent<
|
|
23
|
+
BackArrowIconProps,
|
|
24
|
+
BackArrowIconEvents,
|
|
25
|
+
BackArrowIconSlots
|
|
26
|
+
> {}
|
|
27
|
+
export {};
|
|
@@ -29,7 +29,7 @@ const getGradientDirection = (direction) => {
|
|
|
29
29
|
fill="none"
|
|
30
30
|
>
|
|
31
31
|
<path
|
|
32
|
-
d="
|
|
32
|
+
d="M8.40236 12.4323L8.95906 11.8083C9.64213 11.0428 10.8677 11.1423 11.4183 12.008C11.9312 12.8145 13.0455 12.9674 13.7567 12.3288L14.7658 11.4228M1.23413 12.6025L4.50862 11.9428C4.68245 11.9077 4.84206 11.8221 4.96742 11.6967L12.2977 4.36243C12.6491 4.01078 12.6489 3.44079 12.2971 3.08945L10.7443 1.53839C10.3927 1.18719 9.82302 1.18743 9.47172 1.53892L2.1407 8.87396C2.01559 8.99914 1.93017 9.15843 1.89511 9.33191L1.23413 12.6025Z"
|
|
33
33
|
stroke="url(#grad-edit)"
|
|
34
34
|
stroke-width={weight}
|
|
35
35
|
stroke-linecap="round"
|
|
@@ -57,16 +57,18 @@ const getGradientDirection = (direction) => {
|
|
|
57
57
|
{:else}
|
|
58
58
|
<svg
|
|
59
59
|
xmlns="http://www.w3.org/2000/svg"
|
|
60
|
+
width={size}
|
|
61
|
+
height={size}
|
|
60
62
|
style="width: {size}; height: {size};"
|
|
61
63
|
viewBox="0 0 24 24"
|
|
62
64
|
fill="none"
|
|
63
65
|
>
|
|
64
66
|
<path
|
|
65
|
-
d="
|
|
67
|
+
d="M8.40236 12.4323L8.95906 11.8083C9.64213 11.0428 10.8677 11.1423 11.4183 12.008C11.9312 12.8145 13.0455 12.9674 13.7567 12.3288L14.7658 11.4228M1.23413 12.6025L4.50862 11.9428C4.68245 11.9077 4.84206 11.8221 4.96742 11.6967L12.2977 4.36243C12.6491 4.01078 12.6489 3.44079 12.2971 3.08945L10.7443 1.53839C10.3927 1.18719 9.82302 1.18743 9.47172 1.53892L2.1407 8.87396C2.01559 8.99914 1.93017 9.15843 1.89511 9.33191L1.23413 12.6025Z"
|
|
66
68
|
stroke={color}
|
|
67
69
|
stroke-width={weight}
|
|
68
|
-
stroke-linecap="round"
|
|
69
70
|
stroke-linejoin="round"
|
|
71
|
+
stroke-linecap="round"
|
|
70
72
|
/>
|
|
71
73
|
</svg>
|
|
72
74
|
{/if}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<script>export let color = "#000";
|
|
2
|
+
export let gradient = {
|
|
3
|
+
colors: ["", ""],
|
|
4
|
+
direction: "bottom"
|
|
5
|
+
};
|
|
6
|
+
export let size = "1rem";
|
|
7
|
+
export let weight = 1;
|
|
8
|
+
const getGradientDirection = (direction) => {
|
|
9
|
+
switch (direction) {
|
|
10
|
+
case "top":
|
|
11
|
+
return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
|
|
12
|
+
case "right":
|
|
13
|
+
return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
|
|
14
|
+
case "bottom":
|
|
15
|
+
return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
|
|
16
|
+
case "left":
|
|
17
|
+
return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
|
|
18
|
+
default:
|
|
19
|
+
return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
{#if gradient.colors[1] !== ""}
|
|
25
|
+
<svg
|
|
26
|
+
width="12"
|
|
27
|
+
height="12"
|
|
28
|
+
viewBox="0 0 12 12"
|
|
29
|
+
fill="none"
|
|
30
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
31
|
+
style="width: {size}; height: {size};"
|
|
32
|
+
>
|
|
33
|
+
<path
|
|
34
|
+
d="M6.87156 10.5703C6.94557 10.9883 7.03986 11.5155 7.13878 12.0609M8.59227 10.4944C8.51176 10.924 8.40711 11.4823 8.29869 12.0609M5.38503 7.973L4.7129 7.98666L4.64921 9.9488L10.6862 9.83847L10.6421 7.86613L9.54674 7.88839M5.38503 7.973C6.26029 6.60612 6.15107 5.86424 5.24316 4.57M5.38503 7.973L9.54674 7.88839M9.54674 7.88839C8.86568 7.4395 8.75384 5.11605 9.57041 4.47557M3.41104 9.14425C2.573 9.55212 2.06683 10.0819 2.06683 10.6609C2.06683 11.9496 4.57403 12.9942 7.66683 12.9942C10.7596 12.9942 13.2668 11.9496 13.2668 10.6609C13.2715 10.0318 12.6955 9.4639 11.7501 9.04873M4.56194 4.59306C4.69552 4.57175 8.69739 4.46986 10.6816 4.42159C10.703 3.77551 10.7144 2.4719 10.5893 2.42611C10.4642 2.38032 6.56897 2.51952 4.637 2.59485L4.56194 4.59306Z"
|
|
35
|
+
stroke="url(#grad-Pen)"
|
|
36
|
+
stroke-width={weight}
|
|
37
|
+
stroke-linecap="round"
|
|
38
|
+
stroke-linejoin="round"
|
|
39
|
+
/>
|
|
40
|
+
|
|
41
|
+
<defs>
|
|
42
|
+
<linearGradient
|
|
43
|
+
id="grad-Pen"
|
|
44
|
+
x1={getGradientDirection(gradient.direction).x1}
|
|
45
|
+
y1={getGradientDirection(gradient.direction).y1}
|
|
46
|
+
x2={getGradientDirection(gradient.direction).x2}
|
|
47
|
+
y2={getGradientDirection(gradient.direction).y2}
|
|
48
|
+
>
|
|
49
|
+
<stop
|
|
50
|
+
offset="0%"
|
|
51
|
+
style="stop-color:{gradient.colors[0]};stop-opacity:1"
|
|
52
|
+
/>
|
|
53
|
+
<stop
|
|
54
|
+
offset="100%"
|
|
55
|
+
style="stop-color:{gradient.colors[1]};stop-opacity:1"
|
|
56
|
+
/>
|
|
57
|
+
</linearGradient>
|
|
58
|
+
</defs>
|
|
59
|
+
</svg>
|
|
60
|
+
{:else}
|
|
61
|
+
<svg
|
|
62
|
+
width="12"
|
|
63
|
+
height="12"
|
|
64
|
+
viewBox="0 0 12 12"
|
|
65
|
+
fill="none"
|
|
66
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
67
|
+
style="width: {size}; height: {size};"
|
|
68
|
+
>
|
|
69
|
+
<path
|
|
70
|
+
d="M6.87156 10.5703C6.94557 10.9883 7.03986 11.5155 7.13878 12.0609M8.59227 10.4944C8.51176 10.924 8.40711 11.4823 8.29869 12.0609M5.38503 7.973L4.7129 7.98666L4.64921 9.9488L10.6862 9.83847L10.6421 7.86613L9.54674 7.88839M5.38503 7.973C6.26029 6.60612 6.15107 5.86424 5.24316 4.57M5.38503 7.973L9.54674 7.88839M9.54674 7.88839C8.86568 7.4395 8.75384 5.11605 9.57041 4.47557M3.41104 9.14425C2.573 9.55212 2.06683 10.0819 2.06683 10.6609C2.06683 11.9496 4.57403 12.9942 7.66683 12.9942C10.7596 12.9942 13.2668 11.9496 13.2668 10.6609C13.2715 10.0318 12.6955 9.4639 11.7501 9.04873M4.56194 4.59306C4.69552 4.57175 8.69739 4.46986 10.6816 4.42159C10.703 3.77551 10.7144 2.4719 10.5893 2.42611C10.4642 2.38032 6.56897 2.51952 4.637 2.59485L4.56194 4.59306Z"
|
|
71
|
+
stroke={color}
|
|
72
|
+
stroke-width={weight}
|
|
73
|
+
stroke-linecap="round"
|
|
74
|
+
stroke-linejoin="round"
|
|
75
|
+
/>
|
|
76
|
+
</svg>
|
|
77
|
+
{/if}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
color?: string | undefined;
|
|
5
|
+
gradient?:
|
|
6
|
+
| {
|
|
7
|
+
colors: [string, string];
|
|
8
|
+
direction: "top" | "right" | "bottom" | "left";
|
|
9
|
+
}
|
|
10
|
+
| undefined;
|
|
11
|
+
size?: string | undefined;
|
|
12
|
+
weight?: number | undefined;
|
|
13
|
+
};
|
|
14
|
+
events: {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
};
|
|
17
|
+
slots: {};
|
|
18
|
+
};
|
|
19
|
+
export type PinnedIconProps = typeof __propDef.props;
|
|
20
|
+
export type PinnedIconEvents = typeof __propDef.events;
|
|
21
|
+
export type PinnedIconSlots = typeof __propDef.slots;
|
|
22
|
+
export default class PinnedIcon extends SvelteComponent<
|
|
23
|
+
PinnedIconProps,
|
|
24
|
+
PinnedIconEvents,
|
|
25
|
+
PinnedIconSlots
|
|
26
|
+
> {}
|
|
27
|
+
export {};
|