1 files changed, 51 insertions, 0 deletions
diff --git a/src/lib/index.ts b/src/lib/index.ts
new file mode 100644
index 0000000..a961354
--- /dev/null
+++ b/src/lib/index.ts
@@ -0,0 +1,51 @@
+// place files you want to import through the `$lib` alias in this folder.
+export type ButtonColours = {
+  fg: string;
+  fgDisabled: string;
+  bg: string;
+  bgActive: string;
+  bgHover: string;
+};
+export const S = {
+  card_bg: 'bg-[#ffffff]/20' as const,
+  shadow_large: 'shadow-[0_5px_25px_-3px_#00000077]' as const,
+  window:
+    'outline-[1.5px] outline-[#313135] rounded-xl flex flex-row items-stretch justify-stretch max-h-full' as const,
+  window_sidepanel: 'bg-[#28282C] rounded-l-xl p-2 pt-0 min-w-48' as const,
+  window_content: 'bg-[#1D1D20] rounded-r-xl p-2 pt-0 flex-1' as const,
+  window_content_fullscreen:
+    'bg-[#1D1D20] rounded-xl p-2 pt-0 flex-1 max-w-[100%]' as const,
+  window_topbar:
+    'box-border min-h-[3.5rem] px-1 py-2 font-bold flex items-center justify-center gap-2 sticky top-0 bg-inherit z-50' as const,
+  button(colours: 'primary' | 'secondary' | ButtonColours) {
+    switch (colours) {
+      case 'primary':
+        colours = {
+          fg: '#dedede',
+          fgDisabled: '#2e3436',
+          bg: '#3584E4',
+          bgActive: '#2A6AB8',
+          bgHover: '#4990E7',
+        };
+        break;
+      case 'secondary':
+        colours = {
+          fg: '#dedede',
+          fgDisabled: '#2e3436',
+          bg: '#0000',
+          bgActive: '#dedede22',
+          bgHover: '#dedede11',
+        };
+        break;
+    }
+    colours = colours as ButtonColours;
+    return `transition-all disabled:grayscale disabled:text-[${colours.fgDisabled}] not-disabled:text-[${colours.fg}] not-disabled:bg-[${colours.bg}] not-disabled:hover:bg-[${colours.bgHover}] not-disabled:active:bg-[${colours.bgActive}] flex items-center justify-center p-2 rounded-xl outline-2 outline-[#0000] not-disabled:focus:outline-[#4C82C999]`;
+  },
+  input:
+    'transition-all bg-[#2E2E32] not-disabled:not-focus:not-active:hover:bg-[#dedede11] p-2 outline-2 outline-[#0000] not-disabled:focus:outline-[#4C82C999]' as const,
+  heading: [
+    //
+    'text-2xl font-bold',
+    'text-lg',
+  ] as const,
+};