From a545c420473f9ce95f25a253e1e3916f165f18da Mon Sep 17 00:00:00 2001
From: venashial <venashial.levo@aleeas.com>
Date: Sun, 8 May 2022 12:40:10 -0700
Subject: [PATCH] Add secondary & tertiary buttons + Add utils index

---
 src/package/components/Avatar.svelte    |   1 -
 src/package/components/Button.svelte    | 237 ++++++++++++------------
 src/package/components/Slider.svelte    |   2 -
 src/package/components/TextInput.svelte |  44 +++--
 src/package/index.ts                    |   6 +-
 src/package/styles/themes/dark.postcss  |  12 +-
 src/package/styles/themes/light.postcss |   6 +-
 src/package/utils/index.ts              |   4 +
 src/routes/components/Button.md         |  20 +-
 src/routes/components/TextInput.md      |   3 +-
 10 files changed, 171 insertions(+), 164 deletions(-)
 create mode 100644 src/package/utils/index.ts

diff --git a/src/package/components/Avatar.svelte b/src/package/components/Avatar.svelte
index ae3c0cb9..9c756465 100644
--- a/src/package/components/Avatar.svelte
+++ b/src/package/components/Avatar.svelte
@@ -82,7 +82,6 @@
 
             &-lg {
                 --size: 9rem;
-                background-color: var(--color-brand-contrast);
             }
         }
 
diff --git a/src/package/components/Button.svelte b/src/package/components/Button.svelte
index 50917158..54215760 100644
--- a/src/package/components/Button.svelte
+++ b/src/package/components/Button.svelte
@@ -1,157 +1,148 @@
 <script lang="ts">
-  // TODO: sizes
-  // TODO: icon only buttons should have uniform padding
-  // TODO: Could be a class
+    // TODO: sizes
+    // TODO: icon only buttons should have uniform padding
+    // TODO: Could be a class
 
-  import { classCombine } from '../utils/classCombine';
+    import { classCombine } from '../utils/classCombine';
 
-  /** The element to be styled as a button */
-  export let as: 'button' | 'a' | 'summary' | 'input' = 'button';
-  export let href = '';
-  if (href) as = 'a';
+    /** The element to be styled as a button */
+    export let as: 'button' | 'a' | 'summary' | 'input' = 'button';
+    export let href = '';
+    if (href) as = 'a';
 
-  /** Use `value` if the button is an `<input`> */
-  export let value = '';
+    /** Use `value` if the button is an `<input`> */
+    export let value = '';
 
-  export let size: 'sm' | 'md' | 'lg' = 'md';
-  export let color:
-    | ''
-    | 'raised'
-    | 'primary'
-    | 'primary-light'
-    | 'danger'
-    | 'danger-light'
-    | 'transparent' = '';
+    export let size: 'sm' | 'md' | 'lg' = 'md';
+    export let color:
+        | ''
+        | 'raised'
+        | 'primary'
+        | 'primary-light'
+        | 'secondary'
+        | 'tertiary'
+        | 'danger'
+        | 'danger-light'
+        | 'transparent' = '';
 
-  /** Show notification badge in the upper right of button */
-  export let badge = false;
+    /** Show notification badge in the upper right of button */
+    export let badge = false;
 
-  export let disabled = false;
+    export let disabled = false;
 
-  let className: string;
-  $: className = classCombine([
-    'button',
-    `button--size-${size}`,
-    `button--color-${color}`,
-    badge && 'has-badge',
-  ]);
+    let className: string;
+    $: className = classCombine([
+        'button',
+        `button--size-${size}`,
+        `button--color-${color}`,
+        badge && 'has-badge',
+    ]);
 </script>
 
 {#if as === 'a'}
-  <a class={className} {href} {disabled} on:click>
-    <slot />
-  </a>
+    <a class={className} {href} {disabled} on:click>
+        <slot />
+    </a>
 {:else}
-  <svelte:element this={as} class={className} {disabled} on:click>
-    <slot />
-  </svelte:element>
+    <svelte:element this={as} class={className} {disabled} on:click>
+        <slot />
+    </svelte:element>
 {/if}
 
 <style lang="postcss">
-  .button {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0.25rem 1rem;
-    grid-gap: 14px;
-    cursor: pointer;
-    position: relative;
+    .button {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding: 0.25rem 1rem;
+        grid-gap: 14px;
+        cursor: pointer;
+        position: relative;
+        white-space: nowrap;
 
-    box-shadow: var(--shadow-inset-sm);
+        color: var(--color-bg-contrast);
 
-    background-color: var(--color-button-bg);
-    border-radius: var(--rounded);
-    transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
+        box-shadow: var(--shadow-inset-sm);
+        background-color: var(--color-button-bg);
 
-    &:hover {
-      background-color: var(--color-button-bg-hover);
-    }
-
-    &--color {
-      &-raised {
-        background-color: var(--color-raised-bg);
+        border-radius: var(--rounded);
+        transition: opacity 0.5s ease-in-out, filter 0.05s ease-in-out;
 
         &:hover {
-          background-color: var(--color-raised-bg-hover);
+            filter: brightness(0.9);
         }
-      }
 
-      &-primary {
-        background-color: var(--color-brand);
-        color: var(--color-brand-contrast);
+        &--color {
+            &-raised {
+                background-color: var(--color-raised-bg);
+            }
 
-        &:hover {
-          background-color: var(--color-brand-dark);
+            &-primary {
+                background-color: var(--color-brand);
+                color: var(--color-brand-contrast);
+            }
+
+            &-primary-light {
+                background-color: var(--color-brand-light);
+            }
+
+            &-secondary {
+                background-color: var(--color-secondary);
+                color: var(--color-brand-contrast);
+            }
+
+            &-tertiary {
+                background-color: var(--color-tertiary);
+            }
+
+            &-transparent {
+                background-color: transparent;
+                box-shadow: none;
+            }
+
+            &-danger {
+                background-color: var(--color-badge-red-dot);
+                color: var(--color-brand-contrast);
+            }
+
+            &-danger-light {
+                background-color: var(--color-popup-danger-bg);
+                color: var(--color-popup-danger-text);
+            }
         }
-      }
 
-      &-primary-light {
-        background-color: var(--color-brand-light);
-        transition: filter 0s ease-in-out;
+        &:disabled {
+            opacity: 50%;
+            cursor: not-allowed;
+            filter: grayscale(50%);
 
-        &:hover {
-          background-color: var(--color-brand-light);
-          filter: brightness(0.9);
+            /* Not ideal, but preventing events being fired needs to be implemented */
+            pointer-events: none;
         }
-      }
 
-      &-transparent {
-        background-color: transparent;
-        box-shadow: none;
-      }
-
-      &-danger {
-        background-color: var(--color-badge-red-dot);
-        color: var(--color-brand-contrast);
-
-        &:hover {
-          background-color: var(--color-badge-red-text);
+        &--pad-even {
+            padding: 0.5rem;
+            font-size: 1rem;
+            line-height: 0;
+            min-width: 2rem;
+            min-height: 2rem;
+            justify-content: center;
         }
-      }
 
-      &-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);
+        &.has-badge::after {
+            content: '';
+            width: 0.5rem;
+            height: 0.5rem;
+            border-radius: var(--rounded-max);
+            background-color: var(--color-brand);
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
         }
-      }
-    }
 
-    &:disabled {
-      opacity: 50%;
-      cursor: not-allowed;
-      filter: grayscale(50%);
-
-      /* Not ideal, but preventing events being fired needs to be implemented */
-      pointer-events: none;
+        /* Only child doesn't work as intended because text is passed through as `innerText` */
+        :global(.icon:only-child) {
+            margin: 4px -7px;
+        }
     }
-
-    &--pad-even {
-      padding: 0.5rem;
-      font-size: 1rem;
-      line-height: 0;
-      min-width: 2rem;
-      min-height: 2rem;
-      justify-content: center;
-    }
-
-    &.has-badge::after {
-      content: '';
-      width: 0.5rem;
-      height: 0.5rem;
-      border-radius: var(--rounded-max);
-      background-color: var(--color-brand);
-      position: absolute;
-      top: 0.5rem;
-      right: 0.5rem;
-    }
-
-    /* Only child doesn't work as intended because text is passed through as `innerText` */
-    :global(.icon:only-child) {
-      margin: 4px -7px;
-    }
-  }
 </style>
diff --git a/src/package/components/Slider.svelte b/src/package/components/Slider.svelte
index 0f60948a..1e39fe34 100644
--- a/src/package/components/Slider.svelte
+++ b/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;
diff --git a/src/package/components/TextInput.svelte b/src/package/components/TextInput.svelte
index 61f08c6c..945eb7be 100644
--- a/src/package/components/TextInput.svelte
+++ b/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 icon: SvelteComponent = ''
-    export let value = ''
-    export let multiline = false
-    export let id: string = undefined
+    export let placeholder = '';
+    export let icon: SvelteComponent;
+    export let value = '';
+    export let multiline = false;
+    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>
diff --git a/src/package/index.ts b/src/package/index.ts
index d8b43b26..58fb6c43 100644
--- a/src/package/index.ts
+++ b/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';
-
-
-
-
diff --git a/src/package/styles/themes/dark.postcss b/src/package/styles/themes/dark.postcss
index 4475eee2..2a56cccf 100644
--- a/src/package/styles/themes/dark.postcss
+++ b/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-hover: hsl(220, 13%, 32%);
+    --color-button-bg: hsl(220, 5%, 32%);
 
     /* Label colors */
     --color-badge-gray-text: hsl(0, 2%, 69%);
diff --git a/src/package/styles/themes/light.postcss b/src/package/styles/themes/light.postcss
index 04b5febd..af2811cc 100644
--- a/src/package/styles/themes/light.postcss
+++ b/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 */
diff --git a/src/package/utils/index.ts b/src/package/utils/index.ts
new file mode 100644
index 00000000..ec9a630a
--- /dev/null
+++ b/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';
\ No newline at end of file
diff --git a/src/routes/components/Button.md b/src/routes/components/Button.md
index fd6fe387..a1b9bb90 100644
--- a/src/routes/components/Button.md
+++ b/src/routes/components/Button.md
@@ -18,14 +18,16 @@
 </script>
 
 <div class="button-group">
-    <Button>Default button</Button>
-    <Button color="raised">Raised button</Button>
-    <Button color="primary">Primary button</Button>
-    <Button color="primary-light">Light primary button</Button>
-    <Button color="danger">Danger button</Button>
-    <Button color="danger-light">Light danger button</Button>
-    <Button color="transparent">Transparent button</Button>
-    <Button disabled>Disabled button</Button>
+    <Button>Default</Button>
+    <Button color="raised">Raised</Button>
+    <Button color="primary">Primary</Button>
+    <Button color="primary-light">Light primary</Button>
+    <Button color="secondary">Secondary</Button>
+    <Button color="tertiary">Tertiary</Button>
+    <Button color="danger">Danger</Button>
+    <Button color="danger-light">Light danger</Button>
+    <Button color="transparent">Transparent</Button>
+    <Button disabled>Disabled</Button>
 </div>
 ```
 
@@ -42,4 +44,4 @@
     <Button color="primary"><IconDownload /></Button>
     <Button><IconHeart /> Follow mod </Button>
 </div>
-```
\ No newline at end of file
+```
diff --git a/src/routes/components/TextInput.md b/src/routes/components/TextInput.md
index 0e1b8429..9cbf5f8d 100644
--- a/src/routes/components/TextInput.md
+++ b/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..." />
 ```