From 6d8507c9c09a45e2a23e2d3c2728d3592f5842c4 Mon Sep 17 00:00:00 2001
From: Aaron Geiger <aaron@geigr.dev>
Date: Mon, 3 Jun 2024 02:00:45 +0200
Subject: [PATCH] Rebase main

---
 liberica/src/components/lila/button.tsx | 14 +++++++-------
 liberica/src/lib/theme.ts               |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/liberica/src/components/lila/button.tsx b/liberica/src/components/lila/button.tsx
index acf9bfa..4943abf 100644
--- a/liberica/src/components/lila/button.tsx
+++ b/liberica/src/components/lila/button.tsx
@@ -1,19 +1,19 @@
-const BUTTON_BASE =
+const BASE =
     "select-none transition-all font-sans disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ";
 
 export const BUTTON_VARIANTS = {
-    filled: BUTTON_BASE + "bg-secondary text-contrast rounded-xl font-bold",
+    filled: BASE + "bg-secondary text-contrast rounded-xl font-bold",
     tonal:
-        BUTTON_BASE +
+        BASE +
         "bg-muted/10 text-contrast rounded-xl font-bold hover:bg-muted/20 animate-entry text-text",
-    text: BUTTON_BASE + " py-0 px-0 font-bold uppercase text-primary",
+    text: BASE + " py-0 px-0 font-bold uppercase text-primary",
 };
 
 export const BUTTON_SIZES = {
     sm: "py-1 px-4 text-xs",
     md: "py-2 px-5 text-xs",
     lg: "py-2.5 px-7 text-sm",
-    wide: "w-full py-1 text-xs",
+    "sm-wide": "w-full py-1 text-xs",
 };
 
 export type ButtonVariant = keyof typeof BUTTON_VARIANTS;
@@ -31,9 +31,9 @@ export function BaseButton(props: ButtonProps) {
     return (
         <button
             className={
-                BUTTON_SIZES[props.size ?? "md"] +
+                BUTTON_VARIANTS[props.variant] +
                 " " +
-                BUTTON_VARIANTS[props.variant]
+                BUTTON_SIZES[props.size ?? "sm"]
             }
             {...props}
         >
diff --git a/liberica/src/lib/theme.ts b/liberica/src/lib/theme.ts
index 9f4ae61..763c6a1 100644
--- a/liberica/src/lib/theme.ts
+++ b/liberica/src/lib/theme.ts
@@ -18,7 +18,7 @@ export function applyTheme(theme: Theme) {
         const { h, s, l } = HexToHSL(color as string);
         style.setProperty(
             `--color-${name}`,
-            `${h.toString()} ${s.toString()} ${l.toString()}`,
+            `${h.toString()} ${s.toString()}% ${l.toString()}%`,
         );
     }
 }