@minidev.fun/ui 1.0.1

package/src/lib/utils.ts

@@ -0,0 +1,26 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merges class names with Tailwind CSS conflict resolution.
+ * Combines `clsx` (conditional classes) + `tailwind-merge` (deduplication).
+ *
+ * @param inputs - Class values: strings, arrays, objects, or conditionals
+ * @returns Merged and deduplicated class string
+ *
+ * @example
+ * ```tsx
+ * // Conditional classes
+ * cn("px-4 py-2", isActive && "bg-primary", className)
+ *
+ * // Tailwind conflict resolution (last wins)
+ * cn("text-red-500", "text-blue-500") // → "text-blue-500"
+ * cn("px-4 py-2", "px-8") // → "px-8 py-2"
+ *
+ * // Objects and arrays
+ * cn({ "opacity-50": disabled }, ["flex", "items-center"])
+ * ```
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/variants.ts

@@ -0,0 +1,242 @@
+/**
+ * @internal
+ * Shared CVA variants used by menu and typography components.
+ * Not exported publicly - use component props instead:
+ *   - Menu styling: <DropdownMenuItem variant="destructive">
+ *   - Typography: <Text color="muted" size="sm">
+ */
+
+import { cva } from "class-variance-authority";
+
+/**
+ * Shared menu item variants for DropdownMenuItem, ContextMenuItem, and MenubarItem.
+ * Provides consistent styling across all menu-style components.
+ */
+export const menuItemVariants = cva(
+  "gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground",
+        destructive:
+          "text-destructive focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive *:[svg]:text-destructive",
+        success:
+          "text-success focus:bg-success/10 dark:focus:bg-success/20 focus:text-success *:[svg]:text-success",
+        warning:
+          "text-warning focus:bg-warning/10 dark:focus:bg-warning/20 focus:text-warning *:[svg]:text-warning",
+        info: "text-info focus:bg-info/10 dark:focus:bg-info/20 focus:text-info *:[svg]:text-info",
+      },
+      inset: {
+        true: "pl-8",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      inset: false,
+    },
+  },
+);
+
+/** Variant options for menu items: default, destructive, success, warning, info */
+export type MenuItemVariant =
+  | "default"
+  | "destructive"
+  | "success"
+  | "warning"
+  | "info";
+
+/**
+ * Typography color variants shared across Title, Text, Code, ListItem, and Blockquote components.
+ * Provides semantic color options for consistent text styling.
+ *
+ * @example
+ * ```tsx
+ * import { typographyColorVariants } from "@minidev.fun/ui/lib/variants"
+ * import { cn } from "@minidev.fun/ui/lib/utils"
+ *
+ * <span className={cn(typographyColorVariants({ color: "muted" }))}>
+ *   Secondary text
+ * </span>
+ * ```
+ */
+export const typographyColorVariants = cva("", {
+  variants: {
+    color: {
+      primary: "text-primary",
+      default: "text-foreground",
+      muted: "text-muted-foreground",
+      subtle: "text-subtle-foreground",
+      destructive: "text-destructive",
+      success: "text-success",
+      warning: "text-warning",
+      info: "text-info",
+    },
+  },
+  defaultVariants: {
+    color: "default",
+  },
+});
+
+/** Semantic color options for typography: default, muted, subtle, destructive, success, warning, info */
+export type TypographyColor =
+  | "default"
+  | "primary"
+  | "muted"
+  | "subtle"
+  | "destructive"
+  | "success"
+  | "warning"
+  | "info";
+
+/**
+ * Title order-based size defaults (only used when size prop is not specified).
+ * Maps heading levels (h1-h6) to responsive font sizes.
+ *
+ * @example
+ * ```tsx
+ * // order: 1 → "text-3xl md:text-4xl lg:text-5xl"
+ * // order: 6 → "text-sm md:text-base lg:text-lg"
+ * ```
+ */
+export const titleOrderSizeVariants = cva("", {
+  variants: {
+    order: {
+      1: "text-3xl md:text-4xl lg:text-5xl",
+      2: "text-2xl md:text-3xl lg:text-4xl",
+      3: "text-xl md:text-2xl lg:text-3xl",
+      4: "text-lg md:text-xl lg:text-2xl",
+      5: "text-base md:text-lg lg:text-xl",
+      6: "text-sm md:text-base lg:text-lg",
+    },
+  },
+});
+
+/**
+ * Title order-based style defaults (weight, tracking, leading).
+ * Provides appropriate font-weight and line-height for each heading level.
+ *
+ * @example
+ * ```tsx
+ * // order: 1 → "font-bold tracking-tight leading-[1.1]"
+ * // order: 6 → "font-medium leading-normal"
+ * ```
+ */
+export const titleOrderStyleVariants = cva("", {
+  variants: {
+    order: {
+      1: "font-bold tracking-tight leading-[1.1]",
+      2: "font-semibold tracking-tight leading-[1.2]",
+      3: "font-semibold tracking-tight leading-[1.25]",
+      4: "font-semibold leading-[1.3]",
+      5: "font-medium leading-[1.4]",
+      6: "font-medium leading-normal",
+    },
+  },
+  defaultVariants: {
+    order: 2,
+  },
+});
+
+/**
+ * Title component variants for explicit size and weight overrides.
+ * Use when you need to override the order-based defaults.
+ *
+ * @example
+ * ```tsx
+ * import { titleVariants } from "@minidev.fun/ui/lib/variants"
+ * import { cn } from "@minidev.fun/ui/lib/utils"
+ *
+ * <h2 className={cn(titleVariants({ size: "4xl", weight: "bold" }))}>
+ *   Large Bold Title
+ * </h2>
+ * ```
+ */
+export const titleVariants = cva("", {
+  variants: {
+    size: {
+      xs: "text-xs leading-4",
+      sm: "text-sm leading-5",
+      base: "text-base leading-6",
+      lg: "text-lg leading-7",
+      xl: "text-xl leading-7 tracking-tight",
+      "2xl": "text-2xl leading-8 tracking-tight",
+      "3xl": "text-3xl leading-9 tracking-tight",
+      "4xl": "text-4xl leading-10 tracking-tighter",
+      "5xl": "text-5xl leading-[1.1] tracking-tighter",
+      "6xl": "text-6xl leading-[1.1] tracking-tighter",
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+    },
+  },
+});
+
+/** Heading level 1-6, maps to h1-h6 elements */
+export type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;
+
+/** Font size options from xs to 6xl */
+export type TitleSize =
+  | "xs"
+  | "sm"
+  | "base"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl"
+  | "5xl"
+  | "6xl";
+
+/** Font weight options: normal, medium, semibold, bold */
+export type TitleWeight = "normal" | "medium" | "semibold" | "bold";
+
+/**
+ * Text component variants with auto-scaling line-height and letter-spacing.
+ * Provides consistent paragraph and body text styling.
+ *
+ * @example
+ * ```tsx
+ * import { textVariants } from "@minidev.fun/ui/lib/variants"
+ * import { cn } from "@minidev.fun/ui/lib/utils"
+ *
+ * <p className={cn(textVariants({ size: "lg", weight: "medium", align: "center" }))}>
+ *   Centered large text
+ * </p>
+ * ```
+ */
+export const textVariants = cva("", {
+  variants: {
+    size: {
+      xs: "text-xs leading-4",
+      sm: "text-sm leading-5",
+      base: "text-base leading-6",
+      lg: "text-lg leading-7",
+      xl: "text-xl leading-7 tracking-tight",
+      "2xl": "text-2xl leading-8 tracking-tighter",
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+    },
+    transform: {
+      uppercase: "uppercase tracking-wider",
+      lowercase: "lowercase",
+      capitalize: "capitalize",
+    },
+  },
+  defaultVariants: {
+    size: "base",
+  },
+});

package/src/styles/styles.css

@@ -0,0 +1,102 @@
+/* Base CSS - Shared infrastructure for all themes
+ *
+ * This file contains:
+ * - Tailwind CSS imports
+ * - @theme block mapping CSS variables to Tailwind utilities
+ * - Base layer styles
+ * - Component backdrop-filter rules
+ *
+ * Usage:
+ *   @import "@minidev.fun/ui/styles";
+ *   @import "@minidev.fun/ui/themes/minidev-sunset";
+ */
+
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* Tell Tailwind to scan @minidev.fun/ui src files for class names */
+@source "../**/*.{js,jsx,ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Map CSS custom properties to Tailwind theme variables */
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --radius-4.5xl: calc(var(--radius) + 2rem);
+  --radius-5xl: calc(var(--radius) + 2.5rem);
+  --radius-6xl: calc(var(--radius) + 3rem);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-subtle-foreground: var(--subtle-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --font-sans: var(--font-family);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply font-sans bg-background text-foreground;
+  }
+  :root {
+    /* Resizable panel animation easing - override in theme or component */
+    --resizable-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
+
+/* Surface blur effect - value comes from theme's --surface-blur variable */
+[data-slot="card"],
+[data-slot="toast"],
+[data-slot="popover-content"],
+[data-slot="hover-card-content"],
+[data-slot="dialog-content"],
+[data-slot="alert-dialog-content"],
+[data-slot="sheet-content"],
+[data-slot="drawer-content"],
+[data-slot="dropdown-menu-content"],
+[data-slot="context-menu-content"],
+[data-slot="menubar-content"],
+[data-slot="navigation-menu-popup"],
+[data-slot="combobox-content"],
+[data-slot="select-content"],
+[data-slot="command"] {
+  backdrop-filter: blur(var(--surface-blur));
+}

package/src/styles/themes/first-light.css

@@ -0,0 +1,341 @@
+/* First Light Theme
+ *
+ * Hand-drawn wireframe aesthetic with wobbly SVG filters,
+ * offset shadows, and the Architects Daughter handwriting font.
+ *
+ * Usage:
+ *   @import "@minidev.fun/ui/styles";
+ *   @import "@minidev.fun/ui/themes/first-light";
+ *
+ *   // Add FirstLightFilters component once in your layout
+ *   import { FirstLightFilters } from "@minidev.fun/ui/first-light";
+ *   <FirstLightFilters />
+ *
+ * For Storybook/runtime switching, add .theme-first-light class to <html>
+ */
+
+@import "@fontsource/architects-daughter/400.css";
+
+/* ============================================
+   FIRST LIGHT THEME - Variables
+   ============================================ */
+
+:root,
+html.theme-first-light {
+  --font-family: "Architects Daughter", cursive;
+  --radius: 0;
+  --surface-blur: 4px;
+
+  /* Paper and ink colors */
+  --background: #fafaf8;
+  --foreground: #1a1a1a;
+
+  /* Cards & Popovers - subtle transparency */
+  --card: oklch(1 0 0 / 90%);
+  --card-foreground: #1a1a1a;
+  --popover: oklch(1 0 0 / 90%);
+  --popover-foreground: #1a1a1a;
+
+  /* Strong black borders for hand-drawn look */
+  --border: rgba(0, 0, 0, 0.7);
+  --input: rgba(0, 0, 0, 0.1);
+  --ring: rgba(0, 0, 0, 0.5);
+
+  /* Primary - pencil/ink */
+  --primary: #1a1a1a;
+  --primary-foreground: #ffffff;
+
+  /* Secondary - light paper */
+  --secondary: #f5f5f0;
+  --secondary-foreground: #1a1a1a;
+
+  /* Muted - faded ink */
+  --muted: #f0f0eb;
+  --muted-foreground: #666666;
+  --subtle-foreground: #888888;
+
+  /* Accent - highlighter yellow */
+  --accent: #fff3b0;
+  --accent-foreground: #1a1a1a;
+
+  /* Semantic colors - marker style */
+  --destructive: #e53935;
+  --success: #43a047;
+  --warning: #fb8c00;
+  --info: #1e88e5;
+
+  /* Charts - grayscale */
+  --chart-1: #1a1a1a;
+  --chart-2: #666666;
+  --chart-3: #999999;
+  --chart-4: #cccccc;
+  --chart-5: #e0e0e0;
+
+  /* Sidebar */
+  --sidebar: #f5f5f0;
+  --sidebar-foreground: #1a1a1a;
+  --sidebar-primary: #1a1a1a;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #fff3b0;
+  --sidebar-accent-foreground: #1a1a1a;
+  --sidebar-border: rgba(0, 0, 0, 0.5);
+  --sidebar-ring: rgba(0, 0, 0, 0.3);
+
+  /* First Light-specific shadows */
+  --first-light-shadow: 3px 3px 0px rgba(0, 0, 0, 0.15);
+  --first-light-shadow-hover: 2px 2px 0px rgba(0, 0, 0, 0.15);
+  --first-light-shadow-active: 0px 0px 0px rgba(0, 0, 0, 0.15);
+}
+
+/* Dark mode - Chalkboard */
+.dark,
+html.theme-first-light.dark {
+  --background: #1e2a1e;
+  --foreground: #e8e8e8;
+
+  --card: oklch(0.22 0.02 140 / 90%);
+  --card-foreground: #e8e8e8;
+  --popover: oklch(0.22 0.02 140 / 90%);
+  --popover-foreground: #e8e8e8;
+
+  --border: rgba(255, 255, 255, 0.6);
+  --input: rgba(255, 255, 255, 0.1);
+  --ring: rgba(255, 255, 255, 0.4);
+
+  --primary: #e8e8e8;
+  --primary-foreground: #1e2a1e;
+
+  --secondary: #3a4a3a;
+  --secondary-foreground: #e8e8e8;
+
+  --muted: #3a4a3a;
+  --muted-foreground: #a0a0a0;
+  --subtle-foreground: #808080;
+
+  --accent: #e8d44d;
+  --accent-foreground: #1e2a1e;
+
+  --destructive: #ff6b6b;
+  --success: #69db7c;
+  --warning: #ffd43b;
+  --info: #74c0fc;
+
+  --chart-1: #e8e8e8;
+  --chart-2: #a0a0a0;
+  --chart-3: #808080;
+  --chart-4: #606060;
+  --chart-5: #404040;
+
+  --sidebar: #2a3a2a;
+  --sidebar-foreground: #e8e8e8;
+  --sidebar-primary: #e8e8e8;
+  --sidebar-primary-foreground: #1e2a1e;
+  --sidebar-accent: #e8d44d;
+  --sidebar-accent-foreground: #1e2a1e;
+  --sidebar-border: rgba(255, 255, 255, 0.4);
+  --sidebar-ring: rgba(255, 255, 255, 0.2);
+
+  --first-light-shadow: 3px 3px 0px rgba(0, 0, 0, 0.4);
+  --first-light-shadow-hover: 2px 2px 0px rgba(0, 0, 0, 0.4);
+  --first-light-shadow-active: 0px 0px 0px rgba(0, 0, 0, 0.4);
+}
+
+/* ============================================
+   FIRST LIGHT THEME - Component Styles
+   ============================================ */
+
+/* Apply first-light filter to containers and interactive elements
+ * NOTE: These styles ONLY apply when .theme-first-light is active.
+ * For standalone first-light.css import, :root gets first-light variables
+ * but component styles need .theme-first-light class for Storybook compatibility.
+ */
+.theme-first-light [data-slot="card"],
+.theme-first-light [data-slot="alert"],
+.theme-first-light [data-slot="button"],
+.theme-first-light [data-slot="input"],
+.theme-first-light [data-slot="textarea"],
+.theme-first-light [data-slot="select-trigger"],
+.theme-first-light [data-slot="separator"],
+.theme-first-light [data-slot="dialog-content"],
+.theme-first-light [data-slot="alert-dialog-content"],
+.theme-first-light [data-slot="sheet-content"],
+.theme-first-light [data-slot="drawer-content"],
+.theme-first-light [data-slot="popover-content"],
+.theme-first-light [data-slot="hover-card-content"],
+.theme-first-light [data-slot="dropdown-menu-content"],
+.theme-first-light [data-slot="context-menu-content"],
+.theme-first-light [data-slot="menubar-content"],
+.theme-first-light [data-slot="navigation-menu-popup"],
+.theme-first-light [data-slot="combobox-content"],
+.theme-first-light [data-slot="select-content"],
+.theme-first-light [data-slot="command"],
+.theme-first-light [data-sonner-toast] {
+  filter: url(#first-light-filter);
+  box-shadow: var(--first-light-shadow);
+}
+
+/* Reset filter on children so text stays crisp */
+.theme-first-light [data-slot="card"] > *,
+.theme-first-light [data-slot="alert"] > *,
+.theme-first-light [data-slot="dialog-content"] > *,
+.theme-first-light [data-slot="alert-dialog-content"] > *,
+.theme-first-light [data-slot="sheet-content"] > *,
+.theme-first-light [data-slot="drawer-content"] > *,
+.theme-first-light [data-slot="popover-content"] > *,
+.theme-first-light [data-slot="hover-card-content"] > *,
+.theme-first-light [data-slot="dropdown-menu-content"] > *,
+.theme-first-light [data-slot="context-menu-content"] > *,
+.theme-first-light [data-slot="menubar-content"] > *,
+.theme-first-light [data-slot="navigation-menu-popup"] > *,
+.theme-first-light [data-slot="combobox-content"] > *,
+.theme-first-light [data-slot="select-content"] > *,
+.theme-first-light [data-slot="command"] > * {
+  filter: none;
+}
+
+/* Button hover/active states */
+.theme-first-light [data-slot="button"]:hover {
+  transform: translate(1px, 1px);
+  box-shadow: var(--first-light-shadow-hover);
+}
+
+.theme-first-light [data-slot="button"]:active {
+  transform: translate(2px, 2px);
+  box-shadow: var(--first-light-shadow-active);
+}
+
+/* ============================================
+   FIRST LIGHT THEME - Toast Colors
+   ============================================ */
+
+/* Light mode: pastel backgrounds with dark text */
+.theme-first-light:not(.dark) [data-sonner-toast] {
+  --success-bg: oklch(from var(--success) 0.92 0.05 h / 90%);
+  --success-text: oklch(from var(--success) 0.25 c h);
+  --success-border: var(--success);
+  --error-bg: oklch(from var(--destructive) 0.92 0.05 h / 90%);
+  --error-text: oklch(from var(--destructive) 0.35 c h);
+  --error-border: var(--destructive);
+  --warning-bg: oklch(from var(--warning) 0.92 0.05 h / 90%);
+  --warning-text: oklch(from var(--warning) 0.35 c h);
+  --warning-border: var(--warning);
+  --info-bg: oklch(from var(--info) 0.92 0.05 h / 90%);
+  --info-text: oklch(from var(--info) 0.3 c h);
+  --info-border: var(--info);
+}
+
+/* Dark mode: darker backgrounds with light text */
+.theme-first-light.dark [data-sonner-toast] {
+  --success-bg: oklch(from var(--success) 0.25 c h / 90%);
+  --success-border: oklch(from var(--success) l c h / 50%);
+  --error-bg: oklch(from var(--destructive) 0.25 c h / 90%);
+  --error-border: oklch(from var(--destructive) l c h / 50%);
+  --warning-bg: oklch(from var(--warning) 0.3 c h / 90%);
+  --warning-border: oklch(from var(--warning) l c h / 50%);
+  --info-bg: oklch(from var(--info) 0.25 c h / 90%);
+  --info-border: oklch(from var(--info) l c h / 50%);
+}
+
+/* ============================================
+   FIRST LIGHT THEME - Utility Classes
+   ============================================ */
+
+.first-light-paper {
+  background:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
+  background-size: 20px 20px;
+  background-color: var(--background);
+}
+
+.dark .first-light-paper {
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+  background-size: 20px 20px;
+  background-color: var(--background);
+}
+
+.first-light-lined {
+  background: repeating-linear-gradient(
+    transparent,
+    transparent 27px,
+    rgba(0, 0, 0, 0.1) 28px
+  );
+  background-color: var(--background);
+}
+
+.dark .first-light-lined {
+  background: repeating-linear-gradient(
+    transparent,
+    transparent 27px,
+    rgba(255, 255, 255, 0.1) 28px
+  );
+  background-color: var(--background);
+}
+
+.first-light-highlight {
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 0, 0.3),
+    rgba(255, 255, 0, 0.4),
+    rgba(255, 255, 0, 0.3)
+  );
+  padding: 0.1em 0.2em;
+}
+
+.dark .first-light-highlight {
+  background: linear-gradient(
+    to right,
+    rgba(232, 212, 77, 0.3),
+    rgba(232, 212, 77, 0.4),
+    rgba(232, 212, 77, 0.3)
+  );
+}
+
+.first-light-underline {
+  position: relative;
+  display: inline-block;
+}
+
+.first-light-underline::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: 2px;
+  background: currentColor;
+  transform: scaleX(1.02) rotate(-0.5deg);
+  opacity: 0.7;
+}
+
+.first-light-scribble {
+  position: relative;
+}
+
+.first-light-scribble::after {
+  content: "";
+  position: absolute;
+  left: -2px;
+  bottom: -4px;
+  width: calc(100% + 4px);
+  height: 3px;
+  background-image: repeating-linear-gradient(
+    90deg,
+    currentColor 0px,
+    currentColor 4px,
+    transparent 4px,
+    transparent 8px
+  );
+  opacity: 0.6;
+  transform: rotate(-0.5deg);
+}
+
+.first-light-light {
+  filter: url(#first-light-filter-light);
+}
+
+.first-light-heavy {
+  filter: url(#first-light-filter-heavy);
+}