@flikk/ui 1.0.0-beta.13 → 1.0.0-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.14",
   "description": "A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. Follows the shadcn philosophy with complete className override support.",
   "type": "module",
   "main": "dist/index.js",

package/src/global.scss

@@ -579,6 +579,7 @@
 html,
 body {
   font-family: var(--font-family-base);
+  font-size: 14px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

package/src/styles/theme.css

@@ -121,27 +121,27 @@
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
 
-  /* Form element variables with explicit values that match Tailwind's scale */
-  --form-min-h-sm: 2rem; /* 32px = h-8 in Tailwind */
-  --form-min-h-md: 2.5rem; /* 40px = h-10 in Tailwind */
-  --form-min-h-lg: 3rem; /* 48px = h-12 in Tailwind */
+  /* Form element variables — fixed px so they don't scale with root font-size */
+  --form-min-h-sm: 32px; /* h-8 in Tailwind */
+  --form-min-h-md: 40px; /* h-10 in Tailwind */
+  --form-min-h-lg: 48px; /* h-12 in Tailwind */
 
-  --form-label-pb: 0.5rem; /* 8px = pb-2 in Tailwind */
+  --form-label-pb: 8px; /* pb-2 in Tailwind */
 
-  --form-px-sm: 0.75rem; /* 12px = px-3 in Tailwind */
-  --form-px-md: 0.875rem; /* 14px = px-3.5 in Tailwind */
-  --form-px-lg: 1rem; /* 16px = px-4 in Tailwind */
+  --form-px-sm: 12px; /* px-3 in Tailwind */
+  --form-px-md: 14px; /* px-3.5 in Tailwind */
+  --form-px-lg: 16px; /* px-4 in Tailwind */
 
-  --form-py-sm: 0.5rem; /* 0.5rem 8px = py-1 in Tailwind */
-  --form-py-md: 0.625rem; /* 0.625rem 10px = py-2 in Tailwind */
-  --form-py-lg: 0.75rem; /* 0.75rem 12px = py-3 in Tailwind */
+  --form-py-sm: 8px; /* py-1 in Tailwind */
+  --form-py-md: 10px; /* py-2 in Tailwind */
+  --form-py-lg: 12px; /* py-3 in Tailwind */
 
   /* ============================================
      BORDER RADIUS SYSTEM
      Change --radius-base to adjust the entire UI.
      Individual --*-radius variables can be overridden independently.
      ============================================ */
-  --radius-base: 0.5rem; /* 8px - Base radius token */
+  --radius-base: 8px; /* Base radius token */
 
   /* Forms & Controls (1x base = 8px) */
   --form-radius: var(--radius-base);
@@ -159,8 +159,8 @@
   --metric-radius: calc(var(--radius-base) * 2);
 
   /* Surfaces (3x base = 24px) */
-  --card-radius: calc(var(--radius-base) * 3);
-  --modal-radius: calc(var(--radius-base) * 3);
+  --card-radius: calc(var(--radius-base) * 2);
+  --modal-radius: calc(var(--radius-base) * 2);
 
   /* Special shapes - not part of scale */
   --segmented-radius: var(--form-radius);
@@ -181,18 +181,18 @@
   --button-min-h-md: var(--form-min-h-md);
   --button-min-h-lg: var(--form-min-h-lg);
 
-  /* Button padding */
-  --button-px-sm: 0.75rem; /* 12px */
-  --button-py-sm: 0; /* 6px */
-  --button-px-md: 0.875rem; /* 14px */
-  --button-py-md: 0; /* 10px */
-  --button-px-lg: 1.25rem; /* 20px */
-  --button-py-lg: 0; /* 12px */
+  /* Button padding — fixed px */
+  --button-px-sm: 12px;
+  --button-py-sm: 0;
+  --button-px-md: 14px;
+  --button-py-md: 0;
+  --button-px-lg: 20px;
+  --button-py-lg: 0;
 
-  /* Button icon-only padding */
-  --button-icon-p-sm: 0.375rem; /* 6px */
-  --button-icon-p-md: 0.5rem; /* 8px */
-  --button-icon-p-lg: 0.625rem; /* 10px */
+  /* Button icon-only padding — fixed px */
+  --button-icon-p-sm: 6px;
+  --button-icon-p-md: 8px;
+  --button-icon-p-lg: 10px;
 
   /* Button icon-only sizes */
   --button-icon-size-sm: var(--form-min-h-sm);
@@ -244,12 +244,12 @@
   --chat-bubble-border-sender: rgba(255, 255, 255, 0.4);
   --chat-bubble-border-receiver: rgba(255, 255, 255, 1);
 
-  /* Avatar variables */
-  --avatar-size-xs: 1.5rem; /* 24px = size-6 in Tailwind */
-  --avatar-size-sm: 2rem; /* 32px = size-8 in Tailwind */
-  --avatar-size-md: 2.5rem; /* 40px = size-10 in Tailwind */
-  --avatar-size-lg: 3rem; /* 48px = size-12 in Tailwind */
-  --avatar-size-xl: 4rem; /* 64px = size-16 in Tailwind */
+  /* Avatar variables — fixed px */
+  --avatar-size-xs: 24px; /* size-6 in Tailwind */
+  --avatar-size-sm: 32px; /* size-8 in Tailwind */
+  --avatar-size-md: 40px; /* size-10 in Tailwind */
+  --avatar-size-lg: 48px; /* size-12 in Tailwind */
+  --avatar-size-xl: 64px; /* size-16 in Tailwind */
 
   /* Avatar radius - now defined in radius system above */
 
@@ -257,32 +257,32 @@
   --carousel-container-width: 100%; /* Full width container */
   --carousel-slide-width: 66vw; /* Default slide width - can be overridden */
   --carousel-slide-height: 44rem; /* 384px = h-96 */
-  --carousel-slide-gap: 1rem; /* 16px gap between slides */
-  --carousel-controls-size: 3rem; /* 48px control button size */
-  --carousel-controls-offset: 1rem; /* Distance from edge */
+  --carousel-slide-gap: 16px; /* gap between slides */
+  --carousel-controls-size: 48px; /* control button size */
+  --carousel-controls-offset: 16px; /* distance from edge */
 
   /* Popover variables - radius now defined in radius system above */
   --popover-shadow:
     0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --popover-border-width: 1px;
   --popover-backdrop-opacity: 0.5;
-  --popover-offset-sm: 0.5rem;
-  --popover-offset-md: 0.5rem;
-  --popover-offset-lg: 0.75rem;
-  --popover-max-width-sm: 16rem;
-  --popover-max-width-md: 24rem;
-  --popover-max-width-lg: 32rem;
-  --popover-padding-sm: 0.75rem;
-  --popover-padding-md: 0.75rem;
-  --popover-padding-lg: 1rem;
+  --popover-offset-sm: 8px;
+  --popover-offset-md: 8px;
+  --popover-offset-lg: 12px;
+  --popover-max-width-sm: 256px;
+  --popover-max-width-md: 384px;
+  --popover-max-width-lg: 512px;
+  --popover-padding-sm: 12px;
+  --popover-padding-md: 12px;
+  --popover-padding-lg: 16px;
 
   /* NavItem variables */
   --nav-item-radius: var(--radius-base);
-  --nav-item-min-h: 2.5rem; /* 40px = h-10 in Tailwind */
+  --nav-item-min-h: 40px; /* h-10 in Tailwind */
 
-  /* NavItem padding */
-  --nav-item-px: 0.75rem; /* 12px = px-3 in Tailwind */
-  --nav-item-py: 0.625rem; /* 10px = py-2.5 in Tailwind */
+  /* NavItem padding — fixed px */
+  --nav-item-px: 12px; /* px-3 in Tailwind */
+  --nav-item-py: 10px; /* py-2.5 in Tailwind */
 
   /* Modal and Drawer */
   --overlay-bg: rgba(0, 0, 0, 0.65);
@@ -321,7 +321,7 @@
     --color-text-inverse: var(--color-neutral-950);
 
     /* Base theme colors */
-    --color-primary: var(--color-primary-400);
+    --color-primary: var(--color-primary-600);
     --color-success: var(--color-success-400);
     --color-warning: var(--color-warning-400);
     --color-danger: var(--color-danger-400);