@hyvor/design 0.0.26 → 0.0.28

package/dist/components/Dark/DarkToggle.svelte

@@ -8,7 +8,7 @@ function handleClick() {
 
 <IconButton
     on:click={handleClick}
-    color="invisible"
+    variant="invisible"
 >
     {#if $dark}
         <IconMoonStarsFill size={18} />

package/dist/components/IconButton/IconButton.svelte

@@ -1,11 +1,21 @@
 <script>export let size = "medium";
 export let color = "accent";
+export let variant = "fill";
 export let as = "button";
+const sizes = {
+  small: 26,
+  medium: 30,
+  large: 36
+};
+size = (typeof size === "number" ? size : sizes[size]) + "px";
 </script>
 
 <svelte:element
     this={as}
-    class="button {size} {color}"
+    class="button {color} {variant}"    
+
+    style:width={size}
+    style:height={size}
     
     on:keyup
     on:keydown
@@ -47,42 +57,148 @@ export let as = "button";
   box-shadow: 0 0 0 calc(var(--local-hover-shadow-size) + 1px) var(--local-hover-shadow-color);
 }
 
-.button.small {
-  height: 26px;
-  width: 26px;
-}
-
-.button.medium {
-  height: 30px;
-  width: 30px;
-}
-
 .button.large {
-  height: 36px;
-  width: 36px;
   --local-hover-shadow-size: 3px;
 }
 
-.button.accent {
+.button.fill.accent {
   background-color: var(--accent);
   color: var(--accent-text);
   --local-hover-shadow-color: var(--accent-light);
 }
-.button.soft {
+.button.fill.gray {
+  background-color: var(--gray-light);
+  color: var(--gray-dark);
+  --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);
+  --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);
+  --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);
+  --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);
+  --local-hover-shadow-color: color-mix(in srgb, var(--orange-light) 40%, transparent);
+}
+.button.outline {
+  border: 1px solid;
+}
+.button.outline.accent {
+  border-color: var(--accent);
+  color: var(--accent);
+  --local-hover-shadow-color: var(--accent-light);
+}
+.button.outline.gray {
+  background-color: none;
+  border-color: var(--gray-dark);
+  color: var(--gray-dark);
+  --local-hover-shadow-color: var(--gray-light);
+}
+.button.outline.green {
+  background-color: none;
+  border-color: var(--green-dark);
+  color: var(--green-dark);
+  --local-hover-shadow-color: var(--green-light);
+}
+.button.outline.red {
+  background-color: none;
+  border-color: var(--red-dark);
+  color: var(--red-dark);
+  --local-hover-shadow-color: var(--red-light);
+}
+.button.outline.blue {
+  background-color: none;
+  border-color: var(--blue-dark);
+  color: var(--blue-dark);
+  --local-hover-shadow-color: var(--blue-light);
+}
+.button.outline.orange {
+  background-color: none;
+  border-color: var(--orange-dark);
+  color: var(--orange-dark);
+  --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);
-  --local-hover-shadow-color: #eee;
+  --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);
+  --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);
+  --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);
+  --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);
+  --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);
+  --local-hover-shadow-color: var(--orange-light);
 }
 .button.invisible {
   background-color: transparent;
   transition: 0.2s background-color;
 }
-.button.invisible:hover {
+.button.invisible.accent:hover {
   background-color: var(--accent-light);
   box-shadow: none !important;
+  color: var(--text-light);
 }
-.button.danger {
-  background-color: var(--red-dark);
-  color: var(--text-white);
-  --local-hover-shadow-color: var(--red-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);
 }</style>

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

@@ -2,8 +2,9 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        size?: "small" | "medium" | "large" | undefined;
-        color?: "danger" | "accent" | "soft" | "invisible" | undefined;
+        size?: number | "small" | "medium" | "large" | undefined;
+        color?: "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
+        variant?: "invisible" | "fill" | "outline" | "outline-fill" | undefined;
         as?: "button" | "a" | undefined;
     };
     events: {

package/dist/components/Loader/Loader.svelte

@@ -1,4 +1,5 @@
 <script>export let block = false;
+export let full = false;
 export let padding = "medium";
 export let size = "medium";
 export let color = "var(--accent)";
@@ -31,6 +32,7 @@ padding = typeof padding === "number" ? padding : paddings[padding];
 <div 
     class="loader"
     class:block
+    class:full
 
     style:--local-size={size + "px"}
     style:padding={block ? padding + "px" : undefined}
@@ -92,6 +94,19 @@ padding = typeof padding === "number" ? padding : paddings[padding];
   margin-top: 10px;
 }
 
+.loader.full {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.loader.full .message {
+  margin-top: 10px;
+}
+
 .loader-wrap {
   display: inline-flex;
   width: var(--local-size);

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

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         block?: boolean | undefined;
+        full?: boolean | undefined;
         padding?: number | "none" | "small" | "medium" | "large" | undefined;
         size?: number | "small" | "medium" | "large" | undefined;
         color?: string | undefined;

package/dist/components/Modal/Modal.svelte

@@ -36,7 +36,7 @@ export let closeOnEscape = true;
 
                 <div class="close-wrap">
                     <IconButton
-                        color="invisible"
+                        variant="invisible"
                         on:click={() => show = false}
                     >
                         <IconX size={25} />

package/dist/components/TextInput/TextInput.svelte

@@ -40,6 +40,7 @@ let input;
         on:mouseenter
         on:mouseleave
         on:change
+        on:input
     />
 
     {#if $$slots.end}
@@ -91,11 +92,19 @@ input {
   background: transparent;
   padding: 0;
   margin: 0;
+  color: inherit;
 }
 input:focus {
   outline: none;
 }
 
+.input-wrap.size-x-small {
+  padding: 0 15px;
+  height: 26px;
+  font-size: 12px;
+  --local-shadow-size: 1px;
+}
+
 .input-wrap.size-small {
   padding: 0 15px;
   height: 30px;

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

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         state?: "default" | "error" | "success" | "warning" | undefined;
-        size?: "small" | "medium" | "large" | undefined;
+        size?: "small" | "medium" | "large" | "x-small" | undefined;
         block?: boolean | undefined;
         value?: any;
     };
@@ -18,6 +18,7 @@ declare const __propDef: {
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
         change: Event;
+        input: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Textarea/Textarea.svelte

@@ -3,33 +3,62 @@ export let block = false;
 export let rows = 5;
 export let cols = 40;
 export let state = "default";
+let input;
 </script>
 
-<textarea 
-    bind:value={value}
 
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:change
+<span class="input-wrap state-{state}" 
+    class:block
+    on:click={() => input.focus()}
+    on:keydown={(e) => {
+        if (e.key === 'Enter') {
+            input.blur();
+        }
+    }}
+    role="textbox"
+    tabindex="0"   
+>
 
-    {rows}
-    {cols}
+    {#if $$slots.start}
+        <span class="slot start" 
+            
+        >
+            <slot name="start" />
+        </span>
+    {/if}
 
-    {...$$restProps}
+    <textarea 
+        bind:value={value}
+        bind:this={input}
+        
 
-    class:block
-    class="state-{state}"
+        on:keyup
+        on:keydown
+        on:keypress
+        on:focus
+        on:blur
+        on:click
+        on:mouseover
+        on:mouseenter
+        on:mouseleave
+        on:change
+        on:input
+
+        {rows}
+        {cols}
+
+        {...$$restProps}
     
-></textarea>
+    ></textarea>
+
+    {#if $$slots.end}
+        <span class="slot end">
+            <slot name="end" />
+        </span>
+    {/if}
+</span>
 
-<style>textarea {
+<style>.input-wrap {
   padding: 10px 15px;
   background-color: var(--input);
   transition: 0.2s box-shadow;
@@ -39,40 +68,73 @@ export let state = "default";
   border: none;
   transition: 0.2s box-shadow;
   max-width: 100%;
+  color: inherit;
+  display: inline-flex;
+  resize: vertical;
+  overflow: auto;
+  align-items: flex-start;
+  justify-content: center;
   --local-shadow-size: 2px;
 }
-
-textarea:focus {
+.input-wrap:focus-within {
+  outline: 0;
   box-shadow: 0 0 0 var(--local-shadow-size) var(--accent-light);
 }
 
-textarea.block {
+.input-wrap.block {
   display: block;
   width: 100%;
   resize: vertical;
 }
 
-textarea:focus-visible {
+.input-wrap:focus-visible {
   outline: 0;
 }
 
-textarea.state-error {
+.input-wrap.state-error {
   box-shadow: 0 0 0 var(--local-shadow-size) var(--red-light);
 }
-textarea.state-error:focus {
+.input-wrap.state-error:focus-within {
   box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--red-light);
 }
 
-textarea.state-success {
+.input-wrap.state-success {
   box-shadow: 0 0 0 2px var(--green-light);
 }
-textarea.state-success:focus {
+.input-wrap.state-success:focus-within {
   box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--green-light);
 }
 
-textarea.state-warning {
+.input-wrap.state-warning {
   box-shadow: 0 0 0 2px var(--orange-light);
 }
-textarea.state-warning:focus {
+.input-wrap.state-warning:focus-within {
   box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--orange-light);
+}
+
+.input-wrap .slot {
+  padding: 0 10px;
+}
+
+.input-wrap .slot.start {
+  margin-right: 10px;
+}
+
+.input-wrap .slot.end {
+  margin-left: 10px;
+}
+
+.input-wrap textarea {
+  flex: 1;
+  width: 100%;
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  resize: none;
+}
+.input-wrap textarea:focus {
+  outline: none;
 }</style>

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

@@ -19,10 +19,14 @@ declare const __propDef: {
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
         change: Event;
+        input: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        start: {};
+        end: {};
+    };
 };
 export type TextareaProps = typeof __propDef.props;
 export type TextareaEvents = typeof __propDef.events;

package/dist/marketing/Footer/Footer.svelte

@@ -44,7 +44,7 @@ function handleCopy() {
                         <Tooltip text={emailCopied ? "Copied!" : "Copy email"} position="top">
                             <IconButton 
                                 size="small" 
-                                color="invisible" 
+                                variant="invisible" 
                                 on:click={handleCopy}
                                 on:mouseleave={() => emailCopied = false}
                             >

package/dist/marketing/Header/Header.svelte

@@ -66,7 +66,7 @@ export let darkToggle = true;
 		<span class="mobile-nav-wrap">
 			<Dropdown align="end" width={300}>
 				<IconButton 
-					color="invisible" 
+					variant="invisible" 
 					slot="trigger"
 				>
 					<IconList size={18} />

package/dist/variables.scss

@@ -47,7 +47,7 @@
     --hover: #fafafa;
 	--link: #1d85d2;
 
-    --input: #e6e6e6;
+    --input: #f3f3f3;
     --input-hover: #ccc; /* checkbox/radio */
 
     --box-shadow: 0 0 30px #0000000d;
@@ -75,6 +75,8 @@
     --link: #7cb6e1;
     --hover: #232323;
 
+    --input: #333;
+
 }
 
 $breakpoint-xs: 320px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.26",
+	"version": "0.0.28",
 	"license": "MIT",
 	"private": false,
 	"scripts": {