@hyvor/design 0.0.27 → 0.0.29

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,6 +1,20 @@
-<script>export let block = false;
+<script>import {
+  IconCheckCircleFill,
+  IconXCircleFill
+} from "@hyvor/icons";
+export let block = false;
+export let full = false;
 export let padding = "medium";
 export let size = "medium";
+export let state = "loading";
+export let duration = 2e3;
+$: {
+  if (state === "success" || state === "error") {
+    setTimeout(() => {
+      state = "none";
+    }, duration);
+  }
+}
 export let color = "var(--accent)";
 export let colorTrack = "var(--accent-lightest)";
 export let invert = false;
@@ -31,6 +45,10 @@ padding = typeof padding === "number" ? padding : paddings[padding];
 <div 
     class="loader"
     class:block
+    class:full
+    class:success={state === 'success'}
+    class:error={state === 'error'}
+    
 
     style:--local-size={size + "px"}
     style:padding={block ? padding + "px" : undefined}
@@ -38,38 +56,54 @@ padding = typeof padding === "number" ? padding : paddings[padding];
 >
 
 
-    <span class="loader-wrap">
-        <svg>
-            <circle 
-                class="track"
-                cx="50%"
-                cy="50%"
-                r={r + "px"}
-                fill="none"
-                stroke-width={strokeWidth}
-                stroke={colorTrack}
-            ></circle>
-            <circle 
-                class="progress"
-                cx="50%"
-                cy="50%"
-                r={r + "px"}
-                fill="none"
-                stroke-width={strokeWidth}
-                stroke={color}
-                stroke-linecap="round"
-                stroke-dasharray={strokeDashArray}
-                stroke-dashoffset={strokeDashOffset}
-            ></circle>
-        </svg>
-    </span>
+    {#if state !== 'none'}
+        <span class="loader-wrap">
+
+            {#if state === 'loading'}
+                <svg>
+                    <circle 
+                        class="track"
+                        cx="50%"
+                        cy="50%"
+                        r={r + "px"}
+                        fill="none"
+                        stroke-width={strokeWidth}
+                        stroke={colorTrack}
+                    ></circle>
+                    <circle 
+                        class="progress"
+                        cx="50%"
+                        cy="50%"
+                        r={r + "px"}
+                        fill="none"
+                        stroke-width={strokeWidth}
+                        stroke={color}
+                        stroke-linecap="round"
+                        stroke-dasharray={strokeDashArray}
+                        stroke-dashoffset={strokeDashOffset}
+                    ></circle>
+                </svg>
+            {:else if state === 'success'}
+                <span class="success-icon">
+                    <IconCheckCircleFill  color="var(--green)" width={size} height={size} />
+                </span>
+            {:else if state === 'error'}
+                <span class="error-icon">
+                    <IconXCircleFill color="var(--red)" width={size} height={size} />
+                </span>
+            {/if}
+
+        </span>
+
+    {/if}
+        
 
     {#if $$slots.default}
         <div class="message">
             <slot></slot>
         </div>
     {/if}
-
+    
 </div>
 
 
@@ -92,6 +126,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);
@@ -100,6 +147,10 @@ padding = typeof padding === "number" ? padding : paddings[padding];
   position: relative;
 }
 
+.success-icon, .error-icon {
+  animation: scale 0.2s ease-in-out;
+}
+
 svg {
   width: inherit;
   height: inherit;
@@ -123,4 +174,14 @@ circle.progress {
   100% {
     transform: rotate(270deg);
   }
+}
+@keyframes scale {
+  0% {
+    transform: scale(0.5);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }</style>

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

@@ -3,8 +3,11 @@ 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;
+        state?: "none" | "error" | "success" | "loading" | undefined;
+        duration?: number | undefined;
         color?: string | undefined;
         colorTrack?: string | undefined;
         invert?: boolean | 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

@@ -92,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;
     };

package/dist/components/Textarea/Textarea.svelte

@@ -3,34 +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
-    on:input
+<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;
@@ -40,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

@@ -23,7 +23,10 @@ declare const __propDef: {
     } & {
         [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.27",
+	"version": "0.0.29",
 	"license": "MIT",
 	"private": false,
 	"scripts": {