@netless/fastboard-ui 0.3.2-canary.5 → 0.3.3

package/src/components/Icons/Balloon.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-    d="M19 7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2v3l2.414-2.414A2 2 0 0 1 12.828 16H17a2 2 0 0 0 2-2V7Z"
-    class="fastboard-icon-stroke-color"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M19 7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2v3l2.414-2.414A2 2 0 0 1 12.828 16H17a2 2 0 0 0 2-2V7Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/BalloonBolded.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.75"
-    d="M19 7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2v3l2.414-2.414A2 2 0 0 1 12.828 16H17a2 2 0 0 0 2-2V7Z"
-    class="fastboard-icon-stroke-color"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.75"
+    d="M19 7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2v3l2.414-2.414A2 2 0 0 1 12.828 16H17a2 2 0 0 0 2-2V7Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Circle.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <rect
-    width="16"
-    height="16"
-    x="4"
-    y="4"
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-    rx="8"
-    class="fastboard-icon-stroke-color"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <rect
+    width="16"
+    height="16"
+    x="4"
+    y="4"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    rx="8"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/CircleBolded.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <rect
-    width="16"
-    height="16"
-    x="4"
-    y="4"
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.75"
-    rx="8"
-    class="fastboard-icon-stroke-color"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <rect
+    width="16"
+    height="16"
+    x="4"
+    y="4"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.75"
+    rx="8"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Clean.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    fill="#5D6066"
-    d="M9.754 11.99c0 1.856-.711 3.62-1.96 4.951l-.151.155h1.403l.855-.853h.707l.853.853h2.635l.094-.064a6.237 6.237 0 0 0 2.559-4.781l.005-.26h1a7.237 7.237 0 0 1-2.994 5.862l-.229.16-.277.083h-3l-.353-.146-.647-.647-.646.647-.354.146h-3l-.286-.91.214-.148a6.237 6.237 0 0 0 2.567-4.787l.005-.26h1Zm4.772-6.502v2l.35.039a2.98 2.98 0 0 1 2.644 2.78l.006.181h-8a2.98 2.98 0 0 1 2.65-2.961l.35-.039v-2h2Z"
-    class="fastboard-icon-fill-color"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    fill="#5D6066"
+    d="M9.754 11.99c0 1.856-.711 3.62-1.96 4.951l-.151.155h1.403l.855-.853h.707l.853.853h2.635l.094-.064a6.237 6.237 0 0 0 2.559-4.781l.005-.26h1a7.237 7.237 0 0 1-2.994 5.862l-.229.16-.277.083h-3l-.353-.146-.647-.647-.646.647-.354.146h-3l-.286-.91.214-.148a6.237 6.237 0 0 0 2.567-4.787l.005-.26h1Zm4.772-6.502v2l.35.039a2.98 2.98 0 0 1 2.644 2.78l.006.181h-8a2.98 2.98 0 0 1 2.65-2.961l.35-.039v-2h2Z"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/Clear.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-    d="m17.95 4.636-2.83 2.828-1.413-1.414a2 2 0 0 0-2.829 0l-.707.707 7.071 7.071.707-.707a2 2 0 0 0 0-2.828l-1.414-1.414 2.829-2.829-1.415-1.414Zm-1.415 9.9-5.656 5.656-.707-.707 1.767-3.182-3.182 1.768.707-2.121-2.121.707 1.768-3.182-3.182 1.768.707-2.122-2.121.707-.707-.707 5.656-5.657"
-    class="fastboard-icon-stroke-color"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="m17.95 4.636-2.83 2.828-1.413-1.414a2 2 0 0 0-2.829 0l-.707.707 7.071 7.071.707-.707a2 2 0 0 0 0-2.828l-1.414-1.414 2.829-2.829-1.415-1.414Zm-1.415 9.9-5.656 5.656-.707-.707 1.767-3.182-3.182 1.768.707-2.121-2.121.707 1.768-3.182-3.182 1.768.707-2.122-2.121.707-.707-.707 5.656-5.657"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Click.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-    d="M10 18 6 6l12 4-6 2-2 6Z"
-    class="fastboard-icon-stroke-color"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M10 18 6 6l12 4-6 2-2 6Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/ClickFilled.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path fill="#5D6066" d="M10 18 6 6l12 4-6 2-2 6Z" class="fastboard-icon-fill-color" />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path fill="#5D6066" d="M10 18 6 6l12 4-6 2-2 6Z" class="fastboard-icon-fill-color" />
+</svg>

package/src/components/Icons/Diamond.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    class="fastboard-icon-stroke-color"
-    d="M4.222 12 12 4.222 19.778 12 12 19.778z"
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    class="fastboard-icon-stroke-color"
+    d="M4.222 12 12 4.222 19.778 12 12 19.778z"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+  />
+</svg>

package/src/components/Icons/Down.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    class="fastboard-icon-stroke-color"
-    d="m16 10-2 2-2 2-2-2-2-2"
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    class="fastboard-icon-stroke-color"
+    d="m16 10-2 2-2 2-2-2-2-2"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+  />
+</svg>

package/src/components/Icons/Eraser.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-    d="M13.414 4.929a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L12 17.656a4 4 0 0 1-5.657 0L4.93 16.244a2 2 0 0 1 0-2.829l8.485-8.485ZM12 6.343 17.657 12m-1.414-7.071-2.829 2.828m4.243-1.414-2.829 2.829m4.243-1.415-2.828 2.829"
-    class="fastboard-icon-stroke-color"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M13.414 4.929a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L12 17.656a4 4 0 0 1-5.657 0L4.93 16.244a2 2 0 0 1 0-2.829l8.485-8.485ZM12 6.343 17.657 12m-1.414-7.071-2.829 2.828m4.243-1.414-2.829 2.829m4.243-1.415-2.828 2.829"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/EraserFilled.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    fill="#5D6066"
-    fill-rule="evenodd"
-    d="M16.242 4.929a2 2 0 0 0-2.828 0L4.93 13.414a2 2 0 0 0 0 2.829l1.414 1.414a4 4 0 0 0 5.657 0l5.215-5.215-5.657-5.657.884-.884 5.657 5.657.972-.972a2 2 0 0 0 0-2.829l-2.83-2.827Z"
-    clip-rule="evenodd"
-    class="fastboard-icon-fill-color"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    fill="#5D6066"
+    fill-rule="evenodd"
+    d="M16.242 4.929a2 2 0 0 0-2.828 0L4.93 13.414a2 2 0 0 0 0 2.829l1.414 1.414a4 4 0 0 0 5.657 0l5.215-5.215-5.657-5.657.884-.884 5.657 5.657.972-.972a2 2 0 0 0 0-2.829l-2.83-2.827Z"
+    clip-rule="evenodd"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/Icons.scss

@@ -1,20 +1,20 @@
-@import "../theme.scss";
-
-@each $name, $theme in $themes {
-  .fastboard-icon.#{$name} {
-    .fastboard-icon-stroke-color {
-      stroke: read($theme, "color");
-    }
-    .fastboard-icon-fill-color {
-      fill: read($theme, "color");
-    }
-    &.is-active {
-      .fastboard-icon-stroke-color {
-        stroke: read($theme, "active-color");
-      }
-      .fastboard-icon-fill-color {
-        fill: read($theme, "active-color");
-      }
-    }
-  }
-}
+@import "../theme.scss";
+
+@each $name, $theme in $themes {
+  .fastboard-icon.#{$name} {
+    .fastboard-icon-stroke-color {
+      stroke: read($theme, "color");
+    }
+    .fastboard-icon-fill-color {
+      fill: read($theme, "color");
+    }
+    &.is-active {
+      .fastboard-icon-stroke-color {
+        stroke: read($theme, "active-color");
+      }
+      .fastboard-icon-fill-color {
+        fill: read($theme, "active-color");
+      }
+    }
+  }
+}

package/src/components/Icons/Left.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    d="m14 8-2 2-2 2 2 2 2 2"
-    class="fastboard-icon-stroke-color"
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    d="m14 8-2 2-2 2 2 2 2 2"
+    class="fastboard-icon-stroke-color"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+  />
+</svg>

package/src/components/Icons/Line.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-    d="M5 19 19 5"
-    class="fastboard-icon-stroke-color"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M5 19 19 5"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/LineBolded.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.75"
-    d="M5 19 19 5"
-    class="fastboard-icon-stroke-color"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.75"
+    d="M5 19 19 5"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Loading.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path fill="#5D6066" d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z" class="fastboard-icon-fill-color" />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path fill="#5D6066" d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z" class="fastboard-icon-fill-color" />
+</svg>

package/src/components/Icons/Minus.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    d="M5 12h14"
-    class="fastboard-icon-stroke-color"
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    d="M5 12h14"
+    class="fastboard-icon-stroke-color"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+  />
+</svg>

package/src/components/Icons/Pause.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path fill="#5D6066" d="M14 19h4V5h-4M6 19h4V5H6v14z" class="fastboard-icon-fill-color" />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path fill="#5D6066" d="M14 19h4V5h-4M6 19h4V5H6v14z" class="fastboard-icon-fill-color" />
+</svg>