Prepare for NPM + Cloudflare pages

src/lib/components/elements/Pagination.svelte

@@ -23,15 +23,18 @@
 
 {#if count > 1}
     <div class="pagination">
-        <Button icon={IconArrowLeft} color="raised" on:click={() => dispatch('change', page - 1)} disabled={page <= 1} title="Last page"/>
+        <Button color="raised" on:click={() => dispatch('change', page - 1)} disabled={page <= 1} title="Last page"><IconArrowLeft height="20px" />
+        </Button>
         {#each options as option}
             {#if option === '-'}
                 <IconMinus class="pagination__dash" />
             {:else}
-                <Button label={option} color={option === page ? 'brand' : 'raised'} on:click={() => dispatch('change', option)} evenPadding={true} />
+                <Button color={option === page ? 'primary' : 'raised'} on:click={() => dispatch('change', option)} evenPadding={true}>{option}</Button>
             {/if}
         {/each}
-        <Button icon={IconArrowRight} color="raised" on:click={() => dispatch('change', page + 1)} disabled={page >= count} title="Next page" />
+        <Button color="raised" on:click={() => dispatch('change', page + 1)} disabled={page >= count} title="Next page">
+            <IconArrowRight height="20px" />
+        </Button>
     </div>
 {/if}
 

src/lib/components/elements/buttons/Button.svelte

@@ -7,7 +7,7 @@
     export let value: string;
 
     export let size: 'sm' | 'md' | 'lg' = 'md'
-    export let color: 'outline' | 'primary' | 'danger';
+    export let color: 'raised' | 'primary' | 'danger';
 
     let className = `btn btn--${size}`;
     className += color && (` btn--${color}`)
@@ -33,7 +33,9 @@
   /* Base button styles */
   .btn {
       position: relative;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       padding: 5px var(--spacer-3);
       font-size: var(--body-font-size);
       font-weight: var(--font-weight-semibold);
@@ -62,11 +64,9 @@
           opacity: 0.75;
       }
 
-      /*
     .icon {
-      margin-right: $spacer-1;
+      margin-right: var(--spacer-1);
       color: var(--color-fg-muted);
-      vertical-align: text-bottom;
 
       &:only-child {
         margin-right: 0;
@@ -82,10 +82,9 @@
     }
 
     .dropdown-caret {
-      margin-left: $spacer-1;
+      margin-left: var(--spacer-1);
       opacity: 0.8;
     }
-  */
   }
 
   /* Default button */
@@ -124,7 +123,7 @@
       background-color: var(--color-btn-bg);
       border-color: var(--color-btn-border);
 
-      .octicon {
+      :global(.icon) {
         color: var(--color-primer-fg-disabled);
       }
     }
@@ -166,7 +165,7 @@
       background-color: var(--color-btn-primary-disabled-bg);
       border-color: var(--color-btn-primary-disabled-border);
 
-      .octicon {
+      :global(.icon) {
         color: var(--color-btn-primary-disabled-text);
       }
     }
@@ -183,7 +182,7 @@
       background-color: var(--color-btn-primary-counter-bg);
     }
 
-    .octicon {
+    :global(.icon) {
       color: var(--color-btn-primary-icon);
     }
   }
@@ -203,7 +202,7 @@
         background-color: var(--color-btn-outline-hover-counter-bg);
       }
 
-      .octicon {
+      :global(.icon) {
         color: inherit;
       }
     }
@@ -245,7 +244,7 @@
   .btn--danger {
     color: var(--color-btn-danger-text);
 
-    .octicon {
+    :global(.icon) {
       color: var(--color-btn-danger-icon);
     }
 
@@ -260,7 +259,7 @@
         background-color: var(--color-btn-danger-hover-counter-bg);
       }
 
-      .octicon {
+      :global(.icon) {
         color: var(--color-btn-danger-hover-icon);
       }
     }
@@ -286,7 +285,7 @@
         background-color: var(--color-btn-danger-disabled-counter-bg);
       }
 
-      .octicon {
+      :global(.icon) {
         color: var(--color-btn-danger-disabled-text);
       }
     }
@@ -306,21 +305,12 @@
   .btn--sm {
     padding: 3px 12px;
     font-size: var(--font-0);
-    line-height: 20px;
-
-      /*
-    .octicon {
-      vertical-align: text-top;
-    }
-    */
   }
 
   .btn--lg {
-    /* padding: $em-spacer-6 1.5em; */
-    /* line-height: $lh-default; */
-
-    font-size: var(--font-2);
-    border-radius: 0.5em;
+    font-size: var(--font-size-large);
+    padding: 8px 16px;
+    border-radius: var(--radii-3);
   }
 
   /* Full-width button */

src/lib/styles/themes/light.postcss

@@ -0,0 +1,3 @@
+.theme-light {
+
+}

src/lib/styles/themes/old.postcss

@@ -1,4 +1,4 @@
-.light-theme {
+.theme-light {
     --color-canvas-default-transparent: rgba(255, 255, 255, 0);
     --color-page-header-bg: #f6f8fa;
     --color-marketing-icon-primary: #218bff;
@@ -426,7 +426,7 @@
     --color-scale-coral-9: #510901;
 }
 
-.dark-theme {
+.theme-dark {
     --color-canvas-default-transparent: rgba(255, 255, 255, 0);
     --color-page-header-bg: #f6f8fa;
     --color-marketing-icon-primary: #218bff;
@@ -1283,11 +1283,11 @@
 }
 
 [data-color-mode=light] {
-    @extend .light-theme;
+    @extend .theme-light;
 }
 
 [data-color-mode=dark] {
-    @extend .dark-theme;
+    @extend .theme-dark;
 }
 
 [data-color-mode=dark-dimmed] {

src/lib/styles/variables/borders.postcss

@@ -5,9 +5,9 @@
   --border: var(--border-width) var(--border-style);
 
   /* Radii */
-  --radii-1: 4px;
-  --radii-2: 6px;
-  --radii-3: 8px;
+  --radii-1: 8px;
+  --radii-2: 10px;
+  --radii-3: 12px;
   --radii-max: 100px;
   --radii: var(--radii-2);
 }

src/lib/styles/variables/typography.postcss

@@ -17,17 +17,16 @@
   --h5-size: 14px;
   --h6-size: 12px;
 
+  --font-size-large: 17px;
   --font-size-small: 12px;
+  --font-size-normal: 14px;
+  --body-line-height: --lh-default;
 
   /* Line heights */
   --lh-condensed-ultra: 1;
   --lh-condensed: 1.25;
   --lh-default: 1.5;
 
-  /* The base body size */
-  --body-font-size: 14px;
-  --body-line-height: --lh-default;
-
   /* Font weights */
   --font-weight-light: 300;
   --font-weight-normal: 400;
@@ -37,5 +36,4 @@
   /* Font stacks */
   --body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-
 }

src/routes/_internal/components/Header.svelte

@@ -21,11 +21,13 @@
 </script>
 
 <header class="header" bind:this={headerElement}>
-    <OmorphiaLogo height="32px" width="auto"/>
+    <OmorphiaLogo height="32px" width="32px"/>
     <div class="header__title">Omorphia</div>
     <div class="header__links">
         <a href="https://modrinth.com">Modrinth.com</a>
         <span class="spacer-dot"></span>
+        <a href="https://www.npmjs.com/package/omorphia">NPM</a>
+        <span class="spacer-dot"></span>
         <a href="https://rewrite.modrinth.com/discord"><IconChat /></a>
         <a href="https://github.com/modrinth/omorphia"><IconLogoGithub /></a>
     </div>