Add secondary & tertiary buttons + Add utils index

src/package/components/Avatar.svelte

@@ -82,7 +82,6 @@
 
             &-lg {
                 --size: 9rem;
-                background-color: var(--color-brand-contrast);
             }
         }
 

src/package/components/Button.svelte

@@ -19,6 +19,8 @@
         | 'raised'
         | 'primary'
         | 'primary-light'
+        | 'secondary'
+        | 'tertiary'
         | 'danger'
         | 'danger-light'
         | 'transparent' = '';
@@ -56,43 +58,41 @@
         grid-gap: 14px;
         cursor: pointer;
         position: relative;
+        white-space: nowrap;
+
+        color: var(--color-bg-contrast);
 
         box-shadow: var(--shadow-inset-sm);
-
         background-color: var(--color-button-bg);
+
         border-radius: var(--rounded);
-    transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
+        transition: opacity 0.5s ease-in-out, filter 0.05s ease-in-out;
 
         &:hover {
-      background-color: var(--color-button-bg-hover);
+            filter: brightness(0.9);
         }
 
         &--color {
             &-raised {
                 background-color: var(--color-raised-bg);
-
-        &:hover {
-          background-color: var(--color-raised-bg-hover);
-        }
             }
 
             &-primary {
                 background-color: var(--color-brand);
                 color: var(--color-brand-contrast);
-
-        &:hover {
-          background-color: var(--color-brand-dark);
-        }
             }
 
             &-primary-light {
                 background-color: var(--color-brand-light);
-        transition: filter 0s ease-in-out;
-
-        &:hover {
-          background-color: var(--color-brand-light);
-          filter: brightness(0.9);
             }
+
+            &-secondary {
+                background-color: var(--color-secondary);
+                color: var(--color-brand-contrast);
+            }
+
+            &-tertiary {
+                background-color: var(--color-tertiary);
             }
 
             &-transparent {
@@ -103,20 +103,11 @@
             &-danger {
                 background-color: var(--color-badge-red-dot);
                 color: var(--color-brand-contrast);
-
-        &:hover {
-          background-color: var(--color-badge-red-text);
-        }
             }
 
             &-danger-light {
                 background-color: var(--color-popup-danger-bg);
                 color: var(--color-popup-danger-text);
-        transition: filter 0s ease-in-out;
-
-        &:hover {
-          filter: brightness(0.9);
-        }
             }
         }
 

src/package/components/Slider.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-    import type { SvelteComponent } from 'svelte';
-
     export let value: number;
     export let min: number;
     export let max: number;

src/package/components/TextInput.svelte

@@ -1,46 +1,56 @@
 <script lang="ts">
-    import type { SvelteComponent } from 'svelte'
+    import type { SvelteComponent } from 'svelte';
 
-    export let placeholder = ''
+    export let placeholder = '';
-    export let icon: SvelteComponent = ''
+    export let icon: SvelteComponent;
-    export let value = ''
+    export let value = '';
-    export let multiline = false
+    export let multiline = false;
-    export let id: string = undefined
+    export let id: string = undefined;
 </script>
 
 <div class="text-input">
     {#if multiline}
-        <textarea name={id} {placeholder} bind:value={value}/>
+        <textarea name={id} {placeholder} bind:value />
     {:else}
-        <input type="text" name={id} {placeholder} bind:value={value}/>
+        <input type="text" name={id} {placeholder} bind:value class:has-icon={icon} />
+        {#if icon}
+            <svelte:component this={icon} />
+        {/if}
     {/if}
 </div>
 
-
 <style lang="postcss">
     .text-input {
         display: flex;
         flex-direction: column;
         gap: 8px;
+        position: relative;
 
-        input, textarea {
+        input,
+        textarea {
             border-radius: var(--rounded-sm);
             box-shadow: var(--shadow-inset-sm);
             background-color: var(--color-button-bg);
             border: none;
-            padding: 0.25rem 0.75rem;
+            padding: 6px 14px;
             width: 20rem;
             max-width: 100%;
         }
 
-        &--fill {
-            width: 100%;
-            padding: 0.5rem 0.75rem;
-        }
-
-
         textarea {
             min-height: 2.5rem;
         }
+
+        :global(.icon) {
+            position: absolute;
+            display: flex;
+            height: 100%;
+            left: 14px;
+            opacity: 0.75;
+        }
+
+        input.has-icon {
+          padding-left: 40px;
+        }
     }
 </style>

src/package/index.ts

@@ -1,3 +1,5 @@
+/* COMPONENTS */
+
 export { default as Avatar } from './components/Avatar.svelte';
 
 export { default as Badge } from './components/Badge.svelte';
@@ -21,7 +23,3 @@ export { default as Select } from './components/Select.svelte';
 export { default as Slider } from './components/Slider.svelte';
 
 export { default as TextInput } from './components/TextInput.svelte';
-
-
-
-

src/package/styles/themes/dark.postcss

@@ -1,9 +1,12 @@
 .theme-dark {
     /* Brand colors */
-    --color-brand: hsl(155, 58%, 40%);
+    --color-brand: hsl(155, 58%, 45%);
     --color-brand-light: hsl(155, 54%, 30%);
     --color-brand-dark: hsl(155, 58%, 25%);
-    --color-brand-contrast: hsl(0, 0%, 100%);
+    --color-brand-contrast: hsl(0, 0%, 0%);
+
+    --color-secondary: hsl(231, 5%, 80%);
+    --color-tertiary: hsl(231, 3%, 45%);
 
     /* Shadows */
     --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
@@ -25,11 +28,10 @@
 
     /* Container colors */
     --color-bg: hsl(220, 13%, 15%);
+    --color-bg-contrast: hsl(0, 0%, 100%);
     --color-raised-bg: hsl(220, 13%, 25%);
-    --color-raised-bg-hover: hsl(220, 13%, 20%);
     --color-divider: hsl(220, 13%, 50%);
-    --color-button-bg: hsl(220, 13%, 35%);
+    --color-button-bg: hsl(220, 5%, 32%);
-    --color-button-bg-hover: hsl(220, 13%, 32%);
 
     /* Label colors */
     --color-badge-gray-text: hsl(0, 2%, 69%);

src/package/styles/themes/light.postcss

@@ -5,6 +5,9 @@
     --color-brand-dark: hsl(155, 58%, 38%);
     --color-brand-contrast: hsl(0, 0%, 100%);
 
+    --color-secondary: hsl(231, 5%, 45%);
+    --color-tertiary: hsl(231, 3%, 75%);
+
     /* Shadows */
     --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
     --shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
@@ -25,11 +28,10 @@
 
     /* Container colors */
     --color-bg: hsl(220, 13%, 91%);
+    --color-bg-contrast: hsl(0, 0%, 0%);
     --color-raised-bg: hsl(0, 0%, 100%);
-    --color-raised-bg-hover: hsl(220, 13%, 93%);
     --color-divider: hsl(220, 13%, 91%);
     --color-button-bg: hsl(220, 13%, 91%);
-    --color-button-bg-hover: hsl(0, 0%, 85%);
     --color-input-text-light: hsl(0, 0%, 94%);
 
     /* Label colors */

src/package/utils/index.ts

@@ -0,0 +1,4 @@
+export { ago } from './ago';
+export { simplify } from './number';
+export { Permissions } from './permissions';
+export { formatVersions } from './versions';

src/routes/components/Button.md

@@ -18,14 +18,16 @@
 </script>
 
 <div class="button-group">
-    <Button>Default button</Button>
+    <Button>Default</Button>
-    <Button color="raised">Raised button</Button>
+    <Button color="raised">Raised</Button>
-    <Button color="primary">Primary button</Button>
+    <Button color="primary">Primary</Button>
-    <Button color="primary-light">Light primary button</Button>
+    <Button color="primary-light">Light primary</Button>
-    <Button color="danger">Danger button</Button>
+    <Button color="secondary">Secondary</Button>
-    <Button color="danger-light">Light danger button</Button>
+    <Button color="tertiary">Tertiary</Button>
-    <Button color="transparent">Transparent button</Button>
+    <Button color="danger">Danger</Button>
-    <Button disabled>Disabled button</Button>
+    <Button color="danger-light">Light danger</Button>
+    <Button color="transparent">Transparent</Button>
+    <Button disabled>Disabled</Button>
 </div>
 ```
 

src/routes/components/TextInput.md

@@ -1,8 +1,9 @@
 ```svelte example raised
 <script lang="ts">
     import { TextInput } from "omorphia";
+    import IconSearch from 'virtual:icons/heroicons-outline/search'
 </script>
 
-<TextInput>Favorite color</TextInput>
 <TextInput placeholder="Enter another color..." />
+<TextInput icon={IconSearch} placeholder="Search..." />
 ```