@hyvor/design 0.0.29 → 0.0.31

package/dist/components/Button/Button.svelte

@@ -2,12 +2,13 @@
 export let size = "medium";
 export let color = "accent";
 export let block = false;
+export let variant = "fill";
 export let align = "center";
 </script>
 
 <svelte:element 
     this={as}
-    class="button {size} {color} {align}"
+    class="button {size} {color} {variant} {align}"
     class:block={block}
 
     on:keyup
@@ -146,12 +147,172 @@ export let align = "center";
 }
 
 /* styles */
-.button.accent {
+/* .button.accent {
+    background-color: var(--accent);
+    color: var(--accent-text);
+    transition: .2s box-shadow;
+    --local-hover-shadow-color: var(--accent-light);
+} */
+.button.fill.accent {
   background-color: var(--accent);
   color: var(--accent-text);
   transition: 0.2s box-shadow;
   --local-hover-shadow-color: var(--accent-light);
 }
+.button.fill.gray {
+  background-color: var(--gray-light);
+  color: var(--gray-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: color-mix(in srgb, var(--gray-light) 40%, transparent);
+}
+.button.fill.green {
+  background-color: var(--green-light);
+  color: var(--green-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: color-mix(in srgb, var(--green-light) 40%, transparent);
+}
+.button.fill.red {
+  background-color: var(--red-light);
+  color: var(--red-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: color-mix(in srgb, var(--red-light) 40%, transparent);
+}
+.button.fill.blue {
+  background-color: var(--blue-light);
+  color: var(--blue-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: color-mix(in srgb, var(--blue-light) 40%, transparent);
+}
+.button.fill.orange {
+  background-color: var(--orange-light);
+  color: var(--orange-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: color-mix(in srgb, var(--orange-light) 40%, transparent);
+}
+.button.outline {
+  border: 1px solid;
+}
+.button.outline.accent {
+  background-color: transparent;
+  border-color: var(--accent);
+  color: var(--accent);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--accent-light);
+}
+.button.outline.gray {
+  background-color: transparent;
+  border-color: var(--gray-dark);
+  color: var(--gray-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--gray-light);
+}
+.button.outline.green {
+  background-color: transparent;
+  border-color: var(--green-dark);
+  color: var(--green-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--green-light);
+}
+.button.outline.red {
+  background-color: transparent;
+  border-color: var(--red-dark);
+  color: var(--red-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--red-light);
+}
+.button.outline.blue {
+  background-color: transparent;
+  border-color: var(--blue-dark);
+  color: var(--blue-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--blue-light);
+}
+.button.outline.orange {
+  background-color: transparent;
+  border-color: var(--orange-dark);
+  color: var(--orange-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--orange-light);
+}
+.button.outline-fill {
+  border: 1px solid;
+}
+.button.outline-fill.accent {
+  background-color: var(--accent-light);
+  border-color: var(--accent);
+  color: var(--accent);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: color-mix(in srgb, var(--accent-light) 40%, transparent);
+}
+.button.outline-fill.gray {
+  background-color: var(--gray-light);
+  border-color: var(--gray-dark);
+  color: var(--gray-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--gray-light);
+}
+.button.outline-fill.green {
+  background-color: var(--green-light);
+  border-color: var(--green-dark);
+  color: var(--green-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--green-light);
+}
+.button.outline-fill.red {
+  background-color: var(--red-light);
+  border-color: var(--red-dark);
+  color: var(--red-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--red-light);
+}
+.button.outline-fill.blue {
+  background-color: var(--blue-light);
+  border-color: var(--blue-dark);
+  color: var(--blue-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--blue-light);
+}
+.button.outline-fill.orange {
+  background-color: var(--orange-light);
+  border-color: var(--orange-dark);
+  color: var(--orange-dark);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--orange-light);
+}
+.button.invisible {
+  background-color: transparent;
+  transition: 0.2s background-color;
+}
+.button.invisible.accent:hover {
+  background-color: var(--accent-light);
+  box-shadow: none !important;
+  color: var(--text-light);
+}
+.button.invisible.gray:hover {
+  background-color: var(--gray-light);
+  box-shadow: none !important;
+  color: var(--gray-dark);
+}
+.button.invisible.green:hover {
+  background-color: var(--green-light);
+  box-shadow: none !important;
+  color: var(--green-dark);
+}
+.button.invisible.red:hover {
+  background-color: var(--red-light);
+  box-shadow: none !important;
+  color: var(--red-dark);
+}
+.button.invisible.blue:hover {
+  background-color: var(--blue-light);
+  box-shadow: none !important;
+  color: var(--blue-dark);
+}
+.button.invisible.orange:hover {
+  background-color: var(--orange-light);
+  box-shadow: none !important;
+  color: var(--orange-dark);
+}
 
 .button.soft {
   background-color: var(--accent-light);

package/dist/components/Button/Button.svelte.d.ts

@@ -4,8 +4,9 @@ declare const __propDef: {
         [x: string]: any;
         as?: "button" | "a" | undefined;
         size?: "small" | "medium" | "large" | "x-small" | undefined;
-        color?: "danger" | "accent" | "soft" | "light" | "invisible" | undefined;
+        color?: "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
         block?: boolean | undefined;
+        variant?: "fill" | "outline" | "invisible" | "outline-fill" | undefined;
         align?: "start" | "center" | undefined;
     };
     events: {

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -0,0 +1,42 @@
+<script>export let color = "#000000";
+export let size = 30;
+let inputEl;
+function handleClick() {
+  inputEl.click();
+}
+</script>
+
+<span>
+    <button
+        style:width="{size}px"
+        style:height="{size}px"
+        style:background-color={color}
+        on:click={handleClick}
+    ></button>
+
+    <input 
+        type="color" 
+        bind:value={color}
+        bind:this={inputEl}
+
+        on:change
+        on:input
+    />
+</span>
+
+<style>
+    span {
+        position: relative;
+    }
+    button {
+        border-radius: 50%;
+    }
+    input {
+        position: absolute;
+        left: 100%;
+        bottom: 50%;
+        transform: translate(0, 50%);
+        width: 0;
+        opacity: 0;
+    }
+</style>

package/dist/components/ColorPicker/ColorPicker.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        size?: number | undefined;
+    };
+    events: {
+        change: Event;
+        input: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColorPickerProps = typeof __propDef.props;
+export type ColorPickerEvents = typeof __propDef.events;
+export type ColorPickerSlots = typeof __propDef.slots;
+export default class ColorPicker extends SvelteComponent<ColorPickerProps, ColorPickerEvents, ColorPickerSlots> {
+}
+export {};

package/dist/components/IconButton/IconButton.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         size?: number | "small" | "medium" | "large" | undefined;
         color?: "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
-        variant?: "invisible" | "fill" | "outline" | "outline-fill" | undefined;
+        variant?: "fill" | "outline" | "invisible" | "outline-fill" | undefined;
         as?: "button" | "a" | undefined;
     };
     events: {

package/dist/components/Loader/Loader.svelte

@@ -9,7 +9,7 @@ export let size = "medium";
 export let state = "loading";
 export let duration = 2e3;
 $: {
-  if (state === "success" || state === "error") {
+  if (duration && (state === "success" || state === "error")) {
     setTimeout(() => {
       state = "none";
     }, duration);

package/dist/components/Loader/Loader.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         padding?: number | "none" | "small" | "medium" | "large" | undefined;
         size?: number | "small" | "medium" | "large" | undefined;
         state?: "none" | "error" | "success" | "loading" | undefined;
-        duration?: number | undefined;
+        duration?: number | null | undefined;
         color?: string | undefined;
         colorTrack?: string | undefined;
         invert?: boolean | undefined;

package/dist/components/SplitControl/SplitControl.svelte

@@ -57,17 +57,18 @@ export let caption = "";
   padding-top: 0;
   padding-left: 15px;
   border-left: 2px solid var(--accent-light);
+  margin-bottom: 15px;
 }
 
 .left {
   padding: 15px;
   flex: 1;
-  min-width: 200px;
 }
 
 .right {
   padding: 15px;
   flex: 3;
+  min-width: 0;
 }
 
 .caption-wrap {

package/dist/components/TextInput/TextInput.svelte

@@ -65,7 +65,7 @@ let input;
 .input-wrap {
   display: inline-flex;
   align-items: center;
-  height: 32px;
+  height: 30px;
   padding: 0 15px;
   border-radius: 20px;
   background: var(--input);
@@ -100,21 +100,21 @@ input:focus {
 
 .input-wrap.size-x-small {
   padding: 0 15px;
-  height: 26px;
+  height: 20px;
   font-size: 12px;
   --local-shadow-size: 1px;
 }
 
 .input-wrap.size-small {
   padding: 0 15px;
-  height: 30px;
+  height: 26px;
   font-size: 12px;
   --local-shadow-size: 1px;
 }
 
 .input-wrap.size-large {
   padding: 0 20px;
-  height: 40px;
+  height: 36px;
   font-size: 16px;
 }
 

package/dist/components/Tooltip/Tooltip.svelte

@@ -107,6 +107,7 @@ onMount(() => {
         padding: 8px 20px;
         border-radius: 20px;
         font-size: 14px;
+        z-index: 10000;
     }
 
     .tooltip:after {

package/dist/components/index.d.ts

@@ -10,6 +10,7 @@ export { default as ButtonGroup } from './Button/ButtonGroup.svelte';
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
+export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
 export { default as Dropdown } from './Dropdown/Dropdown.svelte';
 export { default as Divider } from './Divider/Divider.svelte';

package/dist/components/index.js

@@ -10,6 +10,7 @@ export { default as ButtonGroup } from './Button/ButtonGroup.svelte';
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
+export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
 export { default as Dropdown } from './Dropdown/Dropdown.svelte';
 export { default as Divider } from './Divider/Divider.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.29",
+	"version": "0.0.31",
 	"license": "MIT",
 	"private": false,
 	"scripts": {
@@ -28,9 +28,9 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "^4.0.0",
 		"@sveltejs/kit": "^2.0.0",
-		"sass": "^1.68.0"
+		"sass": "^1.68.0",
+		"svelte": "^4.0.0"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^3.0.0",
@@ -45,11 +45,11 @@
 	},
 	"dependencies": {
 		"@fontsource/readex-pro": "^5.0.8",
-		"highlight.js": "^11.9.0",
-		"@hyvor/icons": "^0.0.3"
+		"@hyvor/icons": "^0.0.3",
+		"highlight.js": "^11.9.0"
 	},
 	"type": "module",
 	"publishConfig": {
 		"access": "public"
 	}
-}
+}