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

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.6",
+  "version": "1.0.0-beta.8",
   "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

@@ -13,6 +13,23 @@
   --color-primary-950: oklch(0.257 0.09 281.288);
 
   --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);
@@ -28,6 +45,7 @@
   --color-danger-950: oklch(0.258 0.092 26.042);
 
   --color-danger: var(--color-danger-600);
+  --color-danger-contrast: var(--color-neutral-50);
 
   /* Success color palette - Tailwind v4 green */
   --color-success-50: oklch(0.982 0.018 155.826);
@@ -43,6 +61,7 @@
   --color-success-950: oklch(0.266 0.065 152.934);
 
   --color-success: var(--color-success-600);
+  --color-success-contrast: var(--color-neutral-50);
 
   /* Warning color palette - full 50-950 range */
   --color-warning-50: oklch(0.987 0.022 95.277);
@@ -58,6 +77,7 @@
   --color-warning-950: oklch(0.279 0.077 45.635);
 
   --color-warning: var(--color-warning-600);
+  --color-warning-contrast: var(--color-neutral-50);
 
   /* text color */
   --color-text-primary: var(--color-neutral-950);
@@ -296,6 +316,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);
 }
 
 /* ============================================
@@ -325,6 +346,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);