@fakhrirafiki/theme-engine 0.4.0 → 0.4.2

package/README.md

@@ -219,9 +219,24 @@ If you run multiple apps on the same domain, override the keys:
 
 After importing `@fakhrirafiki/theme-engine/styles`, you can use semantic tokens like:
 
-- `bg-background`, `text-foreground`, `border-border`
-- `bg-primary`, `text-primary-foreground`
-- `bg-accent-success`, `text-accent-danger`, etc (if your presets include the `accent-*` variables)
+| Category | Tailwind class examples | Backed by preset CSS variables | Notes |
+| --- | --- | --- | --- |
+| Surfaces | `bg-background`, `text-foreground` | `--background`, `--foreground` | Base app background + text |
+| Cards | `bg-card`, `text-card-foreground` | `--card`, `--card-foreground` | Cards / panels |
+| Popovers | `bg-popover`, `text-popover-foreground` | `--popover`, `--popover-foreground` | Popovers / dropdowns |
+| Brand / actions | `bg-primary`, `text-primary-foreground` | `--primary`, `--primary-foreground` | Primary buttons / highlights |
+| Secondary | `bg-secondary`, `text-secondary-foreground` | `--secondary`, `--secondary-foreground` | Secondary UI surfaces |
+| Muted | `bg-muted`, `text-muted-foreground` | `--muted`, `--muted-foreground` | Subtle backgrounds / helper text |
+| Accent | `bg-accent`, `text-accent-foreground` | `--accent`, `--accent-foreground` | Emphasis (not status colors) |
+| Destructive | `bg-destructive`, `text-destructive-foreground` | `--destructive`, `--destructive-foreground` | Danger actions |
+| Borders / focus | `border-border`, `border-input`, `ring-ring` | `--border`, `--input`, `--ring` | Also used by `outline-ring/50` in `tailwind.css` |
+| Charts | `bg-chart-1`, `text-chart-2` | `--chart-1` ... `--chart-5` | Data viz palettes |
+| Sidebar | `bg-sidebar`, `text-sidebar-foreground`, `bg-sidebar-primary`, `border-sidebar-border` | `--sidebar-*` | Handy for dashboard layouts |
+| Status accents | `bg-accent-success`, `text-accent-danger-foreground` | `--accent-<name>`, `--accent-<name>-foreground` | Optional: only if your preset defines `accent-*` variables |
+| Radius scale | `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl` | `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl` | Derived from `--radius` |
+| Tracking scale | `tracking-tighter`, `tracking-wide` | `--tracking-*` | Derived from `--letter-spacing` |
+| Fonts | `font-sans`, `font-serif`, `font-mono` | `--font-sans`, `--font-serif`, `--font-mono` | Set in `base.css`, overridable by presets |
+| Shadows | `shadow-sm`, `shadow-md`, `shadow-xl` | `--shadow-*` | Shadow scale derived from `--shadow-*` knobs |
 
 ## Troubleshooting
 

package/dist/index.d.mts

@@ -356,7 +356,7 @@ interface UnifiedThemeContextValue {
     customPresets: Record<string, TweakCNThemePreset>;
 }
 type CustomPresetsRecord$1 = Record<string, TweakCNThemePreset>;
-type CustomPresetId$1<TCustomPresets> = TCustomPresets extends CustomPresetsRecord$1 ? Extract<keyof TCustomPresets, string> : never;
+type CustomPresetId$1<TCustomPresets> = TCustomPresets extends CustomPresetsRecord$1 ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
 type PresetId<TCustomPresets> = BuiltInPresetId | CustomPresetId$1<TCustomPresets>;
 /**
  * Props for the UnifiedThemeProvider component.
@@ -493,7 +493,7 @@ declare const ThemeToggle: react.ForwardRefExoticComponent<ThemeToggleProps & re
 declare const ThemePresetButtons: ({ animation: animationOverrides, layout: layoutOverrides, renderPreset, renderColorBox, className, categories, maxPresets, showBuiltIn, showCustom, }: ThemePresetButtonsProps) => react_jsx_runtime.JSX.Element;
 
 type CustomPresetsRecord = Record<string, TweakCNThemePreset>;
-type CustomPresetId<TCustomPresets> = TCustomPresets extends CustomPresetsRecord ? Extract<keyof TCustomPresets, string> : never;
+type CustomPresetId<TCustomPresets> = TCustomPresets extends CustomPresetsRecord ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
 type ThemePresetId<TCustomPresets extends CustomPresetsRecord | undefined = undefined> = BuiltInPresetId | CustomPresetId<TCustomPresets>;
 type LooseString = string & {};
 /**

package/dist/index.d.ts

@@ -356,7 +356,7 @@ interface UnifiedThemeContextValue {
     customPresets: Record<string, TweakCNThemePreset>;
 }
 type CustomPresetsRecord$1 = Record<string, TweakCNThemePreset>;
-type CustomPresetId$1<TCustomPresets> = TCustomPresets extends CustomPresetsRecord$1 ? Extract<keyof TCustomPresets, string> : never;
+type CustomPresetId$1<TCustomPresets> = TCustomPresets extends CustomPresetsRecord$1 ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
 type PresetId<TCustomPresets> = BuiltInPresetId | CustomPresetId$1<TCustomPresets>;
 /**
  * Props for the UnifiedThemeProvider component.
@@ -493,7 +493,7 @@ declare const ThemeToggle: react.ForwardRefExoticComponent<ThemeToggleProps & re
 declare const ThemePresetButtons: ({ animation: animationOverrides, layout: layoutOverrides, renderPreset, renderColorBox, className, categories, maxPresets, showBuiltIn, showCustom, }: ThemePresetButtonsProps) => react_jsx_runtime.JSX.Element;
 
 type CustomPresetsRecord = Record<string, TweakCNThemePreset>;
-type CustomPresetId<TCustomPresets> = TCustomPresets extends CustomPresetsRecord ? Extract<keyof TCustomPresets, string> : never;
+type CustomPresetId<TCustomPresets> = TCustomPresets extends CustomPresetsRecord ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
 type ThemePresetId<TCustomPresets extends CustomPresetsRecord | undefined = undefined> = BuiltInPresetId | CustomPresetId<TCustomPresets>;
 type LooseString = string & {};
 /**

package/dist/index.js

@@ -4621,8 +4621,8 @@ var ColorBox = ({ color, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
-      className: (0, import_clsx2.clsx)("w-3 h-3 rounded-sm border border-black/20", className),
-      style: { backgroundColor: formatColor(color, "hsl") }
+      className: (0, import_clsx2.clsx)("theme-color-box", className),
+      style: { backgroundColor: formatColor(color, "hex"), width: 12, height: 12 }
     }
   );
 };

package/dist/index.mjs

@@ -4578,8 +4578,8 @@ var ColorBox = ({ color, className }) => {
   return /* @__PURE__ */ jsx4(
     "div",
     {
-      className: clsx2("w-3 h-3 rounded-sm border border-black/20", className),
-      style: { backgroundColor: formatColor(color, "hsl") }
+      className: clsx2("theme-color-box", className),
+      style: { backgroundColor: formatColor(color, "hex"), width: 12, height: 12 }
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fakhrirafiki/theme-engine",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Elegant theming system with smooth transitions, custom presets, semantic accent colors, and complete shadcn/ui support for modern React applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",