Small buttons update (#1608)

- use cva(class-variance-authority) for variants;
- ~~made all buttons full rounded.~~

package.json

@@ -30,6 +30,7 @@
     "astro": "^5.1.2",
     "astro-icon": "^1.1.5",
     "astro-seo": "^0.8.4",
+    "class-variance-authority": "^0.7.1",
     "htmx.org": "^2.0.4",
     "markdown-it": "^14.0.0",
     "node-html-parser": "^7.0.1",

src/components/ui/Button.astro

@@ -1,9 +1,30 @@
 ---
-import SHA from './SHA.astro';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-interface Props {
-  color?: 'orange' | 'green' | 'lightblue' | 'semidarkblue';
-  size?: 'sm' | 'lg' | 'lg-full' | 'sm-mobfull';
+import SHA from '@/components/ui/SHA.astro';
+import Link from '@/components/util/Link.astro';
+
+export const buttonVariants = cva(
+  'font-bold text-white drop-shadow transition-colors text-center',
+  {
+    variants: {
+      color: {
+        orange: 'bg-nix-orange hover:bg-nix-orange-hover',
+        lightblue: 'bg-nix-blue-light hover:bg-nix-blue-light-hover',
+        semidarkblue: 'bg-nix-blue-dark hover:bg-nix-blue-dark-hover',
+        green: 'bg-nix-green hover:bg-nix-green-hover',
+      },
+      size: {
+        sm: 'px-10 py-2.5 rounded-3xl',
+        'sm-mobfull': 'px-8 py-2.5 rounded-3xl md:w-auto w-full',
+        lg: 'px-10 py-2.5 rounded-2xl md:px-14 md:py-4 w-full md:w-auto',
+        'lg-full': 'px-10 py-4 rounded-2xl block',
+      },
+    },
+  },
+);
+
+interface Props extends VariantProps<typeof buttonVariants> {
   href?: string | null;
   type?: 'button' | 'submit' | 'reset';
   classList?: string[];
@@ -13,20 +34,6 @@ interface Props {
   label?: string;
 }
 
-const colorMap = {
-  orange: 'bg-nix-orange',
-  lightblue: 'bg-nix-blue-light',
-  semidarkblue: 'bg-nix-blue-dark',
-  green: 'bg-nix-green',
-};
-
-const sizeMap = {
-  sm: 'px-10 py-2.5 rounded-3xl text-center',
-  'sm-mobfull': 'px-8 py-2.5 rounded-3xl md:w-auto w-full text-center',
-  lg: 'px-10 py-2.5 md:px-14 md:py-4 rounded-full md:rounded-2xl text-center w-full md:w-auto',
-  'lg-full': 'text-center py-4 block rounded-2xl',
-};
-
 const {
   color = 'orange',
   size = 'sm',
@@ -38,27 +45,29 @@ const {
   shaText = '',
   label,
 } = Astro.props;
-
-const localClassList = `${colorMap[color]} font-bold ${sizeMap[size]} text-white drop-shadow`;
 ---
 
 {
   href ? (
     <>
-      <a
+      <Link
         href={href}
-        class:list={['!text-white !no-underline', localClassList, classList]}
+        class:list={[
+          '!text-white !no-underline',
+          buttonVariants({ color, size }),
+          classList,
+        ]}
       >
         {label || <slot />}
-      </a>
+      </Link>
       {shaHref && (
         <SHA href={shaHref} classList={shaClassList}>
           {shaText}
         </SHA>
       )}
     </>
   ) : (
-    <button type={type} class={localClassList}>
+    <button type={type} class={buttonVariants({ color, size })}>
       <slot />
     </button>
   )

tailwind.config.cjs

@@ -64,18 +64,23 @@ module.exports = {
         extralight: '#f2f8fd', // nixlighterblue
         lighter: '#e6ecf5', // nixlighterblue-dimmed
         light: '#7ebae4', // nixlightblue
+        'light-hover': '#69a6d1',
         DEFAULT: '#5277c3', // nixdarkblue
+        hover: '#466cb9',
         dark: '#405D99', // nixsemidarkblue
+        'dark-hover': '#4e73bc',
         darker: '#27385d', // nixdarkerblue
       },
       'nix-orange': {
         lighter: '#fff5e1', // nixlightorange
         DEFAULT: '#ffab0d', // nixorange
+        hover: '#ec9d0c',
         dark: '#ff8657', // nixdarkorange
         darker: '#cc3900', // nixdarkerorange
       },
       'nix-green': {
         DEFAULT: '#6ad541', // nixgreen
+        hover: '#64c53d',
         dark: '#51ba29', // nixdarkgreen
       },
       gray: colors.gray,