From d5afecaaf18b835e4294743d1283feb49bdbb55c Mon Sep 17 00:00:00 2001
From: DTCurrie <devintcurrie@gmail.com>
Date: Mon, 28 Aug 2023 15:46:14 -0400
Subject: [PATCH] Add plugins to tailwind theme in core, move scrollbar styles
 to new utility classes

---
 packages/core/plugins.ts                      | 87 +++++++++++++++++++
 .../core/src/lib/select/select-menu.svelte    | 24 +----
 packages/core/svelte.config.js                |  1 +
 packages/core/tailwind.config.ts              |  2 +
 packages/core/theme.ts                        |  4 +-
 5 files changed, 94 insertions(+), 24 deletions(-)
 create mode 100644 packages/core/plugins.ts

diff --git a/packages/core/plugins.ts b/packages/core/plugins.ts
new file mode 100644
index 000000000..c3684aca5
--- /dev/null
+++ b/packages/core/plugins.ts
@@ -0,0 +1,87 @@
+import plugin from 'tailwindcss/plugin';
+import type { OptionalConfig } from 'tailwindcss/types/config';
+
+export const plugins = [
+  plugin(({ addUtilities, matchUtilities, theme }) => {
+    addUtilities({
+      '.scrollbar-thin': {
+        'scrollbar-width': 'thin',
+      },
+    });
+
+    matchUtilities(
+      {
+        scrollbar: (value: string) => ({
+          scrollbarColor: value,
+        }),
+      },
+      { values: theme('colors') ?? {} }
+    );
+
+    matchUtilities(
+      {
+        'scrollbar-w': (value: string) => ({
+          '&::-webkit-scrollbar': {
+            width: value,
+          },
+        }),
+      },
+      { values: theme('spacing') ?? {} }
+    );
+
+    matchUtilities(
+      {
+        'scrollbar-track': (value: string) => ({
+          '&::-webkit-scrollbar-track': {
+            background: value,
+          },
+        }),
+      },
+      { values: theme('colors') ?? {} }
+    );
+
+    matchUtilities(
+      {
+        'scrollbar-thumb': (value: string) => ({
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: value,
+          },
+        }),
+      },
+      { values: theme('colors') ?? {} }
+    );
+
+    matchUtilities(
+      {
+        'scrollbar-thumb-border': (value: string) => ({
+          '&::-webkit-scrollbar-thumb': {
+            borderRadius: value,
+          },
+        }),
+      },
+      { values: theme('borderRadius') ?? {} }
+    );
+
+    matchUtilities(
+      {
+        'scrollbar-thumb-border': (value: string) => ({
+          '&::-webkit-scrollbar-thumb': {
+            borderWidth: value,
+          },
+        }),
+      },
+      { values: theme('borderWidth') ?? {} }
+    );
+
+    matchUtilities(
+      {
+        'scrollbar-thumb-border': (value: string) => ({
+          '&::-webkit-scrollbar-thumb': {
+            borderColor: value,
+          },
+        }),
+      },
+      { values: theme('borderColor') ?? {} }
+    );
+  }),
+] satisfies OptionalConfig['plugins'];
diff --git a/packages/core/src/lib/select/select-menu.svelte b/packages/core/src/lib/select/select-menu.svelte
index 2f3946212..12b27f24a 100644
--- a/packages/core/src/lib/select/select-menu.svelte
+++ b/packages/core/src/lib/select/select-menu.svelte
@@ -28,7 +28,7 @@ export let heading = '';
   {/if}
   <ul
     role="menu"
-    class="select-menu flex max-h-36 flex-col overflow-y-auto"
+    class="scrollbar-thin scrollbar-black scrollbar-w-1.5 scrollbar-track-transparent scrollbar-thumb-black scrollbar-thumb-border-0 scrollbar-thumb-border-transparent flex max-h-36 flex-col overflow-y-auto"
     tabindex="-1"
     bind:this={element}
     on:mouseleave
@@ -50,25 +50,3 @@ export let heading = '';
     </button>
   {/if}
 </div>
-
-<style>
-/* TODO: Move these do tailwind classes */
-.select-menu::-webkit-scrollbar {
-  width: 6px;
-}
-
-.select-menu::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.select-menu::-webkit-scrollbar-thumb {
-  background-color: black;
-  border-radius: 0;
-  border: 0 solid transparent;
-}
-
-.select-menu {
-  scrollbar-width: thin;
-  scrollbar-color: black transparent;
-}
-</style>
diff --git a/packages/core/svelte.config.js b/packages/core/svelte.config.js
index 6faff0352..a15c26974 100644
--- a/packages/core/svelte.config.js
+++ b/packages/core/svelte.config.js
@@ -23,6 +23,7 @@ const config = {
           '../postcss.config.js',
           '../svelte.config.js',
           '../tailwind.config.ts',
+          '../plugins.ts',
           '../theme.ts',
         ],
       }),
diff --git a/packages/core/tailwind.config.ts b/packages/core/tailwind.config.ts
index c14e7c6f7..02fa121f5 100644
--- a/packages/core/tailwind.config.ts
+++ b/packages/core/tailwind.config.ts
@@ -1,8 +1,10 @@
 import type { Config } from 'tailwindcss';
 import { theme } from './theme';
+import { plugins } from './plugins';
 
 export default {
   content: ['./src/**/*.{ts,svelte}'],
+  plugins,
   theme,
   variants: {
     extend: {},
diff --git a/packages/core/theme.ts b/packages/core/theme.ts
index bba701d24..cfb640ea5 100644
--- a/packages/core/theme.ts
+++ b/packages/core/theme.ts
@@ -1,3 +1,5 @@
+import type { OptionalConfig } from 'tailwindcss/types/config';
+
 export const theme = {
   extend: {
     fontFamily: {
@@ -59,4 +61,4 @@ export const theme = {
       'expand-vertical': 'max-height,visibility',
     },
   },
-};
+} satisfies OptionalConfig['theme'];