@flikk/ui 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/utils/colorUtils.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Shared semantic color type and common color maps.
+ *
+ * Components with extra colors extend locally:
+ *   export type SpinnerColor = SemanticColor | 'dark';
+ */
+export type SemanticColor = "neutral" | "primary" | "secondary" | "success" | "warning" | "danger";
+/**
+ * Background colors for semantic colors.
+ * neutral uses neutral-400; others use their base variable.
+ */
+export declare const semanticBgColors: Record<SemanticColor, string>;
+/**
+ * Text colors for semantic colors.
+ * neutral uses text-primary; others use their base variable.
+ */
+export declare const semanticTextColors: Record<SemanticColor, string>;
+/**
+ * Spinner border colors for semantic colors.
+ * Each value is the atomic pair: border color + transparent top.
+ * neutral uses --color-border; others use their base variable.
+ */
+export declare const semanticSpinnerColors: Record<SemanticColor, string>;

package/dist/utils/colorUtils.js

@@ -0,0 +1,45 @@
+/**
+ * Shared semantic color type and common color maps.
+ *
+ * Components with extra colors extend locally:
+ *   export type SpinnerColor = SemanticColor | 'dark';
+ */
+/**
+ * Background colors for semantic colors.
+ * neutral uses neutral-400; others use their base variable.
+ */
+const semanticBgColors = {
+    neutral: "bg-[var(--color-neutral-400)]",
+    primary: "bg-[var(--color-primary)]",
+    secondary: "bg-[var(--color-secondary)]",
+    success: "bg-[var(--color-success)]",
+    warning: "bg-[var(--color-warning)]",
+    danger: "bg-[var(--color-danger)]",
+};
+/**
+ * Text colors for semantic colors.
+ * neutral uses text-primary; others use their base variable.
+ */
+const semanticTextColors = {
+    neutral: "text-[var(--color-text-primary)]",
+    primary: "text-[var(--color-primary)]",
+    secondary: "text-[var(--color-secondary)]",
+    success: "text-[var(--color-success)]",
+    warning: "text-[var(--color-warning)]",
+    danger: "text-[var(--color-danger)]",
+};
+/**
+ * Spinner border colors for semantic colors.
+ * Each value is the atomic pair: border color + transparent top.
+ * neutral uses --color-border; others use their base variable.
+ */
+const semanticSpinnerColors = {
+    neutral: "border-[var(--color-border)] border-t-transparent",
+    primary: "border-[var(--color-primary)] border-t-transparent",
+    secondary: "border-[var(--color-secondary)] border-t-transparent",
+    success: "border-[var(--color-success)] border-t-transparent",
+    warning: "border-[var(--color-warning)] border-t-transparent",
+    danger: "border-[var(--color-danger)] border-t-transparent",
+};
+
+export { semanticBgColors, semanticSpinnerColors, semanticTextColors };

package/dist/utils/index.d.ts

@@ -13,3 +13,4 @@ export * from "./stateMachine";
 export * from "./formValidation";
 export { calculateVelocity, clampScroll, detectScrollDirection, isReducedMotion, lerp, calculateScrollProgress, normalizeWheelDelta, isScrollable, getMaxScroll, throttle, } from './smoothScrollUtils';
 export { PerformanceMonitor, usePerformanceMonitor } from './performanceMonitor';
+export { type SemanticColor, semanticBgColors, semanticTextColors, semanticSpinnerColors, } from './colorUtils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.9",
   "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/styles/theme.css

@@ -15,6 +15,22 @@
   --color-primary: var(--color-primary-600);
   --color-primary-contrast: var(--color-neutral-50);
 
+  /* Secondary color palette - Tailwind v4 gray */
+  --color-secondary-50: oklch(0.984 0.003 247.858);
+  --color-secondary-100: oklch(0.968 0.007 247.896);
+  --color-secondary-200: oklch(0.929 0.013 255.508);
+  --color-secondary-300: oklch(0.869 0.022 252.894);
+  --color-secondary-400: oklch(0.704 0.04 256.788);
+  --color-secondary-500: oklch(0.554 0.046 257.417);
+  --color-secondary-600: oklch(0.446 0.043 257.281);
+  --color-secondary-700: oklch(0.372 0.044 257.287);
+  --color-secondary-800: oklch(0.279 0.041 260.031);
+  --color-secondary-900: oklch(0.208 0.042 265.755);
+  --color-secondary-950: oklch(0.129 0.042 264.695);
+
+  --color-secondary: var(--color-secondary-600);
+  --color-secondary-contrast: var(--color-neutral-50);
+
   /* 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);
@@ -120,10 +136,6 @@
   --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
@@ -188,10 +200,6 @@
   --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);
@@ -210,10 +218,6 @@
   --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;
@@ -250,11 +254,6 @@
   --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 */
 
@@ -300,6 +299,7 @@
   --shadow-color-success: var(--color-success);
   --shadow-color-warning: var(--color-warning);
   --shadow-color-danger: var(--color-danger);
+  --shadow-color-secondary: var(--color-secondary);
 }
 
 /* ============================================
@@ -329,12 +329,14 @@
     --color-success: var(--color-success-400);
     --color-warning: var(--color-warning-400);
     --color-danger: var(--color-danger-400);
+    --color-secondary: var(--color-secondary-400);
 
     /* Contrast colors for filled variants on semantic backgrounds */
     --color-primary-contrast: var(--color-neutral-50);
     --color-danger-contrast: var(--color-neutral-50);
     --color-success-contrast: var(--color-neutral-50);
     --color-warning-contrast: var(--color-neutral-50);
+    --color-secondary-contrast: var(--color-neutral-50);
 
     /* Background colors - dark equivalents */
     --color-surface: oklch(14.5% 0 0);