Rebase main

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}
         >

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()}%`,
         );
     }
 }