refactor(CSS): project wide refactoring and cleanup

src/components/Button.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+
+  import type { Snippet } from "svelte";
+  import { phosphorIcon } from "@data/icons";
+  import Icon from "@iconify/svelte";
+
+
+  interface Props {
+    children: Snippet;
+    style?: 'mauve' | 'peach' | 'blue' | 'green' | 'transparent';
+    small?: boolean;
+    phIconName?: string;
+    disabled?: boolean;
+  }
+
+  let { children, style, small, phIconName, disabled }: Props = $props();
+
+
+  let phIcon = $state({
+    body: "",
+    width: 0,
+    height: 0
+  });
+
+  let phIconSize = $state(24);
+
+  if (phIconName != null) phIcon = phosphorIcon(phIconName);
+  if (small) phIconSize = 16;
+
+
+</script>
+
+
+
+<button {disabled}
+  class="
+    btn
+    {style == null ? 'btn-default' : ''}
+    {style == 'mauve' ? 'btn-mauve' : ''}
+    {style == 'peach' ? 'btn-peach' : ''}
+    {style == 'green' ? 'btn-green' : ''}
+    {style == 'blue' ? 'btn-blue' : ''}
+    {style == 'transparent' ? 'btn-transparent' : ''}
+    {phIconName != null ? 'btn-has-icon' : ''}
+    {small ? 'btn-small' : ''}
+  "
+>
+  {#if phIconName != null}
+    <Icon
+      width={phIconSize}
+      height={phIconSize}
+      icon={{
+        body: phIcon.body,
+        width: phIcon.width,
+        height: phIcon.height,
+      }}
+    />
+  {/if}
+  {@render children()}
+</button>
+
+
+
+<style lang="scss">
+
+@use "../styles/utils";
+
+  :global(.btn-group) {
+    display: flex;
+    gap: var(--space-xs);
+    flex-wrap: wrap;
+  }
+
+  .btn {
+    @include utils.containerPadding(xs-y);
+
+    border-radius: 9999px;
+    border: none;
+    background-color: var(--surface0);
+
+    font-size: 1.6rem;
+    font-weight: 500;
+    color: var(--text);
+
+    transition: all 350ms ease-in-out;
+    cursor: pointer;
+
+    &-small {
+      @include utils.containerPadding(xxs);
+      border-radius: var(--border-radius-normal);
+    }
+
+    &-transparent {
+      background-color: transparent;
+    }
+
+    &-transparent:hover,
+    &-transparent:focus {
+      background-color: color-mix(in srgb, transparent, var(--text) 10%);
+    }
+
+    &-has-icon {
+      display: flex;
+      align-items: center;
+      gap: var(--space-xs);
+    }
+
+    &-peach,
+    &-mauve,
+    &-green,
+    &-blue {
+      background-size: 150% 100%;
+      background-position: top left;
+      font-weight: 600;
+      color: var(--inverted-text);
+
+      &:hover,
+      &:focus {
+        background-position: top right;
+      }
+    }
+
+    &-peach {
+      background-color: var(--peach);
+      background-image: linear-gradient(120deg, var(--peach), var(--red));
+    }
+
+    &-mauve {
+      background-color: var(--mauve);
+      background-image: linear-gradient(120deg, var(--pink), var(--mauve));
+    }
+
+    &-green {
+      background-color: var(--green);
+      background-image: linear-gradient(120deg, var(--teal), var(--green));
+    }
+
+    &-blue {
+      background-color: var(--blue);
+      background-image: linear-gradient(120deg, var(--blue), var(--sky));
+    }
+  }
+
+  .btn {
+    transition: background-position 350ms ease-in-out;
+  }
+
+</style>

src/data/icons.ts

@@ -10,7 +10,7 @@ const phIcons = phIconsJson as IconifyJSONIconsData;
 
 const DEFAULT_VIEWBOX = 16;
 
-const phosphorIcon = (name: string) => {
+export const phosphorIcon = (name: string) => {
   const icon = phIcons.icons[name];
   return {
     body: icon.body,

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
 import Landing from "@layouts/Landing.astro";
+import Button from "@components/Button.svelte";
 import LaptopIllustration from "./_components/LaptopIllustration.astro";
-import { Icon } from "astro-icon/components";
 ---
 
 <Landing
@@ -12,28 +12,16 @@ import { Icon } from "astro-icon/components";
     <p>A community-driven color scheme meant for coding, designing, and much more!</p>
     <div class="btn-group">
       <a href="/ports">
-        <button class="btn btn-has-icon btn-peach">
-          <Icon name="ph:cube-fill" width={24} height={24} />
-          Discover Ports
-        </button>
+        <Button style="peach" phIconName="cube-fill"> Discover Ports </Button>
       </a>
       <a href="/palette">
-        <button class="btn btn-has-icon btn-mauve">
-          <Icon name="ph:palette-fill" width={24} height={24} />
-          Explore Colors
-        </button>
+        <Button style="mauve" phIconName="palette-fill"> Explore Palettes </Button>
       </a>
       <a href="/community">
-        <button class="btn btn-has-icon btn-green">
-          <Icon name="ph:users-three-fill" width={24} height={24} />
-          View Community
-        </button>
+        <Button style="green" phIconName="users-three-fill"> View Community </Button>
       </a>
       <a href="/blog">
-        <button class="btn btn-has-icon btn-blue">
-          <Icon name="ph:article-fill" width={24} height={24} />
-          Read Blog
-        </button>
+        <Button style="blue" phIconName="article-fill"> Read Blog </Button>
       </a>
     </div>
   </div>

src/pages/palette/_components/CopyToClipboardButton.svelte

@@ -29,7 +29,7 @@
   };
 </script>
 
-<button class="btn btn-small btn-transparent {stateClass}" onclick={copyToClipboard}>
+<button class="btn {stateClass}" onclick={copyToClipboard}>
   <span class="copy-icon">
     <svg width="12" height="12" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
       {#if stateClass == "success"}
@@ -49,11 +49,26 @@
 </button>
 
 <style lang="scss">
-  button {
-    font-size: 80%;
+
+  @use "../../../styles/utils";
+
+
+  .btn {
+    @include utils.containerPadding(xxs);
+
+    border-radius: var(--border-radius-normal);
+    border: none;
+    background-color: transparent;
+
     font-family: monospace;
+    font-size: 1.4rem;
+    font-weight: 500;
+    color: var(--text);
     white-space: pre;
 
+    transition: all 150ms ease-in-out;
+    cursor: pointer;
+
     svg path {
       fill: currentColor;
     }

src/styles/global.scss

@@ -4,4 +4,3 @@
 @use "./scaffolding";
 
 @use "./tables";
-@use "./buttons";