@flikk/ui 1.0.0-beta.4 → 1.0.0-beta.6

package/src/styles/theme.css

@@ -0,0 +1,366 @@
+@theme {
+  /* Primary color palette - full 50-950 range */
+  --color-primary-50: oklch(0.962 0.018 272.314);
+  --color-primary-100: oklch(0.93 0.034 272.788);
+  --color-primary-200: oklch(0.87 0.065 274.039);
+  --color-primary-300: oklch(0.785 0.115 274.713);
+  --color-primary-400: oklch(0.673 0.182 276.935);
+  --color-primary-500: oklch(0.585 0.233 277.117);
+  --color-primary-600: oklch(0.511 0.262 276.966);
+  --color-primary-700: oklch(0.457 0.24 277.023);
+  --color-primary-800: oklch(0.398 0.195 277.366);
+  --color-primary-900: oklch(0.359 0.144 278.697);
+  --color-primary-950: oklch(0.257 0.09 281.288);
+
+  --color-primary: var(--color-primary-600);
+
+  /* Danger/Error color palette - full 50-950 range */
+  --color-danger-50: oklch(0.971 0.013 17.38);
+  --color-danger-100: oklch(0.936 0.032 17.717);
+  --color-danger-200: oklch(0.885 0.062 18.334);
+  --color-danger-300: oklch(0.808 0.114 19.571);
+  --color-danger-400: oklch(0.704 0.191 22.216);
+  --color-danger-500: oklch(0.637 0.237 25.331);
+  --color-danger-600: oklch(0.577 0.245 27.325);
+  --color-danger-700: oklch(0.505 0.213 27.518);
+  --color-danger-800: oklch(0.444 0.177 26.899);
+  --color-danger-900: oklch(0.396 0.141 25.723);
+  --color-danger-950: oklch(0.258 0.092 26.042);
+
+  --color-danger: var(--color-danger-600);
+
+  /* Success color palette - Tailwind v4 green */
+  --color-success-50: oklch(0.982 0.018 155.826);
+  --color-success-100: oklch(0.962 0.044 156.743);
+  --color-success-200: oklch(0.925 0.084 155.995);
+  --color-success-300: oklch(0.871 0.15 154.449);
+  --color-success-400: oklch(0.792 0.209 151.711);
+  --color-success-500: oklch(0.723 0.219 149.579);
+  --color-success-600: oklch(0.627 0.194 149.214);
+  --color-success-700: oklch(0.527 0.154 150.069);
+  --color-success-800: oklch(0.448 0.119 151.328);
+  --color-success-900: oklch(0.393 0.095 152.535);
+  --color-success-950: oklch(0.266 0.065 152.934);
+
+  --color-success: var(--color-success-600);
+
+  /* Warning color palette - full 50-950 range */
+  --color-warning-50: oklch(0.987 0.022 95.277);
+  --color-warning-100: oklch(0.962 0.059 95.617);
+  --color-warning-200: oklch(0.924 0.12 95.746);
+  --color-warning-300: oklch(0.879 0.169 91.605);
+  --color-warning-400: oklch(0.828 0.189 84.429);
+  --color-warning-500: oklch(0.769 0.188 70.08);
+  --color-warning-600: oklch(0.666 0.179 58.318);
+  --color-warning-700: oklch(0.555 0.163 48.998);
+  --color-warning-800: oklch(0.473 0.137 46.201);
+  --color-warning-900: oklch(0.414 0.112 45.904);
+  --color-warning-950: oklch(0.279 0.077 45.635);
+
+  --color-warning: var(--color-warning-600);
+
+  /* text color */
+  --color-text-primary: var(--color-neutral-950);
+  --color-text-secondary: var(--color-neutral-800);
+  --color-text-placeholder: var(--color-neutral-400);
+  --color-text-muted: var(--color-neutral-500);
+  --color-text-disabled: var(--color-neutral-400);
+  --color-text-inverse: var(--color-neutral-50);
+
+  /* generic colors */
+  --color-border: oklch(90% 0 0);
+  --color-border-secondary: oklch(87% 0 0);
+  --color-surface: oklch(100% 0 0);
+  --color-chart-track: rgba(0, 0, 0, 0.06);
+  --color-background: oklch(98.5% 0.002 247.839);
+  --color-background-secondary: oklch(95% 0.002 247.839);
+  --color-background-tertiary: oklch(90% 0.002 247.839);
+  --color-background-quaternary: oklch(85% 0.002 247.839);
+  --color-background-quinary: oklch(80% 0.002 247.839);
+  --color-background-disabled: var(--color-neutral-100);
+
+  --color-neutral-50: oklch(98.5% 0 0);
+  --color-neutral-100: oklch(97% 0 0);
+  --color-neutral-200: oklch(92.2% 0 0);
+  --color-neutral-300: oklch(87% 0 0);
+  --color-neutral-400: oklch(70.8% 0 0);
+  --color-neutral-500: oklch(55.6% 0 0);
+  --color-neutral-600: oklch(43.9% 0 0);
+  --color-neutral-700: oklch(37.1% 0 0);
+  --color-neutral-800: oklch(26.9% 0 0);
+  --color-neutral-900: oklch(20.5% 0 0);
+  --color-neutral-950: oklch(14.5% 0 0);
+
+  /* Font family variables */
+  --font-family-base: "Geist", sans-serif;
+  --font-cursive: "Birthstone", cursive;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --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-label-pb: 0.5rem; /* 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-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 */
+
+  /* Text sizing for form elements */
+  --form-text-sm: 0.75rem; /* 12px = text-xs in Tailwind */
+  --form-text-md: 0.875rem; /* 14px = text-sm in Tailwind */
+  --form-text-lg: 1rem; /* 16px = text-lg 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 */
+
+  /* Forms & Controls (1x base = 8px) */
+  --form-radius: var(--radius-base);
+
+  /* Overlays (1.5x base = 12px) */
+  --dropdown-radius: calc(var(--radius-base) * 1.5);
+  --tooltip-radius: var(--radius-base);
+  --codeblock-radius: calc(var(--radius-base) * 1.5);
+  --popover-radius: calc(var(--radius-base) * 1.5);
+
+  /* Feedback surfaces */
+  --alert-radius: calc(var(--radius-base) * 1.5);
+  --toast-radius: calc(var(--radius-base) * 2);
+  --drawer-radius: calc(var(--radius-base) * 2);
+  --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);
+
+  /* Special shapes - not part of scale */
+  --segmented-radius: var(--form-radius);
+  --avatar-radius: 50%;
+
+  /* Focus ring styling */
+  --form-focus-ring-width: 2px;
+  --form-focus-ring-offset: -1px;
+  --form-focus-ring-opacity: 0.1;
+
+  /* Outline/border styling */
+  --form-outline-width: 1px;
+  --form-outline-focused-width: 2px;
+
+  /* Button variables - inheriting from form variables */
+  --button-radius: var(--form-radius);
+  --button-min-h-sm: var(--form-min-h-sm);
+  --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 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 sizes */
+  --button-icon-size-sm: var(--form-min-h-sm);
+  --button-icon-size-md: var(--form-min-h-md);
+  --button-icon-size-lg: var(--form-min-h-lg);
+
+  /* Button font size */
+  --button-text-size-sm: var(--form-text-sm);
+  --button-text-size-md: var(--form-text-md);
+  --button-text-size-lg: var(--form-text-lg);
+
+  /* Badge variables */
+  --badge-radius: var(--form-radius);
+
+  /* Segmented variables - now defined in radius system above */
+  --segmented-min-h-sm: var(--form-min-h-sm);
+  --segmented-min-h-md: var(--form-min-h-md);
+  --segmented-min-h-lg: var(--form-min-h-lg);
+
+  /* Segmented padding */
+  --segmented-px-sm: var(--form-px-sm);
+  --segmented-px-md: var(--form-px-md);
+  --segmented-px-lg: var(--form-px-lg);
+
+  --segmented-py-sm: var(--form-py-sm);
+  --segmented-py-md: var(--form-py-md);
+  --segmented-py-lg: var(--form-py-lg);
+
+  /* Segmented text size */
+  --segmented-text-size-sm: var(--form-text-sm);
+  --segmented-text-size-md: var(--form-text-md);
+  --segmented-text-size-lg: var(--form-text-md);
+
+  /* Segmented sliding background */
+  --segmented-active-bg: #ffffff;
+  --segmented-active-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+  /* Glass effect variables */
+  --glass-layer-padding: 0.5px;
+  --glass-layer-border-width: 0.5px;
+  --glass-layer-inner-offset: 1.5px;
+
+  /* Glass effect gradient variables */
+  --glass-gradient-outer: linear-gradient(
+    to bottom,
+    rgba(250, 250, 250, 0.8) 0%,
+    rgba(229, 229, 229, 0.8) 30%,
+    rgba(242, 242, 242, 0.8) 70%,
+    rgba(250, 250, 250, 0.8) 100%
+  );
+  --glass-gradient-inner: linear-gradient(
+    to bottom,
+    rgba(242, 242, 242, 0.8) 0%,
+    rgba(250, 250, 250, 0.8) 100%
+  );
+
+  /* Chat message variables */
+  --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-text-xs: 0.75rem; /* 12px = text-xs in Tailwind */
+  --avatar-text-sm: 0.875rem; /* 14px = text-sm in Tailwind */
+  --avatar-text-md: 1rem; /* 16px = text-base in Tailwind */
+  --avatar-text-lg: 1.125rem; /* 18px = text-lg in Tailwind */
+  --avatar-text-xl: 1.25rem; /* 20px = text-xl in Tailwind */
+
+  /* Avatar radius - now defined in radius system above */
+
+  /* Carousel Variables */
+  --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 */
+
+  /* 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;
+
+  /* NavItem variables */
+  --nav-item-radius: var(--radius-base);
+  --nav-item-min-h: 2.5rem; /* 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 */
+
+  /* Modal and Drawer */
+  --overlay-bg: rgba(0, 0, 0, 0.65);
+  --overlay-blur: 2px;
+  --color-scale-background: oklch(0% 0 0); /* backdrop behind scaled content */
+  /* Modal radius - now defined in radius system above */
+
+  /* Shadow color presets for utility generation */
+  --shadow-color-primary: var(--color-primary);
+  --shadow-color-success: var(--color-success);
+  --shadow-color-warning: var(--color-warning);
+  --shadow-color-danger: var(--color-danger);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   Add .dark class to <html> or a parent container
+   to enable dark mode. All CSS variable-based
+   components will automatically adapt.
+
+   IMPORTANT: Dark mode overrides MUST be in @layer theme
+   (not @layer base) for proper cascade priority in Tailwind v4.
+   This ensures CSS variable overrides take precedence over
+   Tailwind's generated theme styles.
+   ============================================ */
+@layer theme {
+  .dark {
+    /* Text colors - inverted for dark backgrounds */
+
+    --color-text-primary: var(--color-neutral-50);
+    --color-text-secondary: var(--color-neutral-400);
+    --color-text-placeholder: var(--color-neutral-600);
+    --color-text-muted: var(--color-neutral-500);
+    --color-text-disabled: var(--color-neutral-400);
+    --color-text-inverse: var(--color-neutral-950);
+
+    /* Base theme colors */
+    --color-primary: var(--color-primary-400);
+    --color-success: var(--color-success-400);
+    --color-warning: var(--color-warning-400);
+    --color-danger: var(--color-danger-400);
+
+    /* Background colors - dark equivalents */
+    --color-surface: oklch(14.5% 0 0);
+    --color-background: oklch(14.5% 0 0);
+    --color-background-secondary: oklch(18% 0 0);
+    --color-background-tertiary: oklch(22% 0 0);
+    --color-background-quaternary: oklch(26% 0 0);
+    --color-background-quinary: oklch(30% 0 0);
+    --color-background-disabled: var(--color-neutral-800);
+
+    /* Scale backdrop */
+    --color-scale-background: oklch(8% 0 0);
+
+    /* Border - darker for dark mode */
+    --color-border: oklch(30% 0 0 / 0.8);
+    --color-border-secondary: oklch(35% 0 0 / 0.8);
+    --color-chart-track: rgba(255, 255, 255, 0.05);
+
+    /* Glass effect gradients - dark mode */
+    --glass-gradient-outer: linear-gradient(
+      135deg,
+      var(--color-background-tertiary) 0%,
+      var(--color-background-secondary) 30%,
+      var(--color-background) 70%,
+      var(--color-background-tertiary) 100%
+    );
+    --glass-gradient-inner: linear-gradient(
+      to bottom,
+      var(--color-background-secondary) 0%,
+      var(--color-background) 100%
+    );
+
+    /* Scrollbar - dark mode */
+    --ui-scrollbar-thumb-rest: rgba(75, 85, 99, 0.3);
+    --ui-scrollbar-thumb-active: rgb(75 85 99);
+    --ui-scrollbar-track-rest: transparent;
+    --ui-scrollbar-track-active: rgba(55, 65, 81, 0.1);
+  }
+}

package/src/theme-plugin.css

@@ -0,0 +1,11 @@
+@source "../dist";
+@import "./global.scss";
+
+@theme {
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+}