reend-components 0.4.0 → 1.1.0

package/src/styles/variables.css

@@ -103,18 +103,22 @@
   /* ═══ SHADOWS ═══ */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
   --shadow-glow: 0 0 20px hsl(var(--primary) / 0.2);
 
   /* ═══ Z-INDEX ═══ */
+  --z-below: -1;
   --z-base: 0;
-  --z-dropdown: 10;
-  --z-sticky: 20;
-  --z-overlay: 30;
-  --z-modal: 40;
-  --z-popover: 50;
-  --z-toast: 60;
-  --z-tooltip: 70;
+  --z-raised: 1;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-header: 1000;
+  --z-overlay: 1500;
+  --z-modal: 2000;
+  --z-toast: 3000;
+  --z-tooltip: 4000;
+  --z-max: 9999;
 
   /* ═══ ANIMATION — EASING ═══ */
   --ease-default: cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -125,9 +129,191 @@
   /* ═══ ANIMATION — DURATION ═══ */
   --duration-instant: 100ms;
   --duration-fast: 150ms;
-  --duration-normal: 250ms;
-  --duration-slow: 400ms;
-  --duration-slower: 700ms;
+  --duration-normal: 300ms;
+  --duration-slow: 500ms;
+  --duration-slower: 800ms;
+
+  /* ═══ GLOW ═══ */
+  --ef-yellow-glow: rgba(255, 212, 41, 0.15);
+
+  /* ═══ SEMANTIC TEXT TOKENS ═══ */
+  --text-primary: hsl(0 0% 94.1%);
+  --text-secondary: hsl(0 0% 87.8%);
+  --text-tertiary: hsl(0 0% 80%);
+  --text-muted: hsl(0 0% 60%);
+  --text-placeholder: hsl(0 0% 40%);
+  --text-disabled: hsl(0 0% 26.7%);
+  --text-link: hsl(201 66% 58%);
+  --text-accent: hsl(48 100% 58%);
+  --text-error: hsl(355 100% 64%);
+  --text-success: hsl(145 67% 51%);
+
+  /* ═══ BORDER ALIASES (spec-named) ═══ */
+  --border-subtle: 0 0% 100% / 0.06;
+  --border-default: 0 0% 100% / 0.1;
+
+  /* ═══ FONT VARS ═══ */
+  --font-display: 'Bender', 'Orbitron', sans-serif;
+  --font-ui: 'Orbitron', monospace;
+  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
+  --font-body: 'Source Han Sans', 'Noto Sans SC', 'Inter', sans-serif;
+  --font-decorative: 'Morro', 'Bender', sans-serif;
+
+  /* ═══ SOFT COLORS ═══ */
+  --ef-red-soft: rgba(255, 71, 87, 0.1);
+  --ef-green-soft: rgba(46, 213, 115, 0.1);
+  --ef-orange-soft: rgba(255, 165, 2, 0.1);
+
+  /* ═══ OPACITY SCALE ═══ */
+  --opacity-overlay: 0.85;
+  --opacity-hover: 0.08;
+  --opacity-disabled: 0.38;
+  --opacity-border: 0.12;
+  --opacity-focus: 0.24;
+  --opacity-muted: 0.5;
+
+  /* ═══ GRADIENT TOKENS ═══ */
+  --ef-gradient-primary: linear-gradient(135deg, #ffd429 0%, #ffa502 100%);
+  --ef-gradient-overlay: linear-gradient(
+    180deg,
+    rgba(10, 10, 10, 0.9) 0%,
+    rgba(10, 10, 10, 0.4) 50%,
+    rgba(10, 10, 10, 0.95) 100%
+  );
+  --ef-gradient-line: linear-gradient(
+    90deg,
+    transparent 0%,
+    #ffd429 50%,
+    transparent 100%
+  );
+  --ef-gradient-card-hover: linear-gradient(
+    145deg,
+    rgba(255, 212, 41, 0.05) 0%,
+    transparent 60%
+  );
+  --ef-gradient-scanline: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(255, 255, 255, 0.015) 2px,
+    rgba(255, 255, 255, 0.015) 4px
+  );
+
+  /* ═══ CHART COLORS ═══ */
+  --chart-1: #ffd429;
+  --chart-2: #00e5ff;
+  --chart-3: #a55eea;
+  --chart-4: #2ed573;
+  --chart-5: #ffa502;
+  --chart-6: #4da8da;
+  --chart-7: #ff4757;
+  --chart-8: #7ec8e3;
+
+  /* ═══ BREAKPOINTS (reference only) ═══ */
+  --bp-mobile: 480px;
+  --bp-tablet: 768px;
+  --bp-laptop: 1024px;
+  --bp-desktop: 1280px;
+  --bp-wide: 1536px;
+
+  /* ═══ SAFE AREA INSETS (mobile notch / Dynamic Island) ═══ */
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-left: env(safe-area-inset-left, 0px);
+
+  /* ═══ DUAL ACCENT — v3.0 ═══ */
+  --ef-lime: 84 100% 63%; /* #CBFF40 */
+  --ef-lime-dark: 84 80% 42%; /* #72C41A */
+  --ef-lime-glow: rgba(203, 255, 64, 0.25);
+  --accent-active: 84 100% 63%;
+
+  /* ═══ GLOW SHADOWS (no Y-offset — website resmi style) ═══ */
+  --shadow-glow-sm: 0 0 6px rgba(0, 0, 0, 0.25);
+  --shadow-glow-md: 0 0 12px rgba(0, 0, 0, 0.35);
+  --shadow-glow-lg: 0 0 24px rgba(0, 0, 0, 0.5);
+  --shadow-accent: 0 0 16px hsl(var(--primary) / 0.35);
+
+  /* ═══ SPACING SCALE ═══ */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+  --space-32: 128px;
+
+  /* ═══ GRID / LAYOUT ═══ */
+  --container-max: 1280px;
+  --container-padding: 24px;
+  --grid-columns: 12;
+  --grid-gutter: 24px;
+  --content-narrow: 680px;
+  --content-default: 960px;
+  --content-wide: 1200px;
+
+  /* ═══ TYPE SCALE ═══ */
+  --type-display-xl-size: 72px;
+  --type-display-lg-size: 56px;
+  --type-h1-size: 48px;
+  --type-h2-size: 36px;
+  --type-h3-size: 28px;
+  --type-h4-size: 22px;
+  --type-body-lg-size: 18px;
+  --type-body-size: 16px;
+  --type-body-sm-size: 14px;
+  --type-caption-size: 12px;
+  --type-overline-size: 11px;
+  --lh-heading: 1;
+  --lh-display: 0.95;
+  --lh-body: 1.6;
+  --lh-caption: 1.4;
+
+  /* ═══ ICON SIZES ═══ */
+  --icon-xs: 16px;
+  --icon-sm: 20px;
+  --icon-md: 24px;
+  --icon-lg: 32px;
+  --icon-xl: 48px;
+  --icon-2xl: 64px;
+
+  /* ═══ ASPECT RATIOS ═══ */
+  --ratio-banner: 21 / 9;
+  --ratio-feature: 16 / 9;
+  --ratio-portrait: 3 / 4;
+  --ratio-cinematic: 21 / 9;
+
+  /* ═══ BACKGROUND DECORATIONS ═══ */
+  --bg-grid-size: 60px;
+  --bg-grid-color: rgba(255, 255, 255, 0.03);
+  --bg-glow-primary: radial-gradient(
+    ellipse 80% 50% at 50% 0%,
+    hsl(var(--primary) / 0.12) 0%,
+    transparent 70%
+  );
+  --bg-glow-lime: radial-gradient(
+    ellipse 80% 50% at 50% 0%,
+    hsl(var(--ef-lime) / 0.1) 0%,
+    transparent 70%
+  );
+  --bg-diagonal: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent 4px,
+    rgba(255, 255, 255, 0.02) 4px,
+    rgba(255, 255, 255, 0.02) 8px
+  );
+
+  /* ═══ CORNER BRACKET ═══ */
+  --bracket-size: 24px;
+  --bracket-width: 2px;
+  --bracket-color: hsl(var(--primary) / 0.4);
 }
 
 /* ═══ LIGHT MODE ═══ */
@@ -147,7 +333,6 @@
   --ef-yellow: 42 90% 42%;
   --ef-yellow-dark: 42 85% 30%;
 
-  /* Accent colors adjusted for light mode readability */
   --ef-blue-light: 196 50% 55%;
   --ef-blue-dark: 202 56% 30%;
   --ef-cyan: 186 80% 35%;
@@ -196,9 +381,60 @@
 
   /* Shadow adjustments for light mode */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.08);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.08);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.12), 0 4px 6px -4px rgb(0 0 0 / 0.08);
+  --shadow-md:
+    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.08);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.12), 0 4px 6px -4px rgb(0 0 0 / 0.08);
   --shadow-glow: 0 0 20px hsl(var(--primary) / 0.25);
+  --shadow-glow-sm: 0 0 6px rgba(0, 0, 0, 0.1);
+  --shadow-glow-md: 0 0 12px rgba(0, 0, 0, 0.15);
+  --shadow-glow-lg: 0 0 24px rgba(0, 0, 0, 0.2);
+  --shadow-accent: 0 0 16px hsl(var(--primary) / 0.25);
+
+  --ef-lime: 84 90% 38%;
+  --ef-lime-dark: 84 80% 28%;
+  --ef-lime-glow: rgba(100, 160, 0, 0.2);
+  --accent-active: 84 90% 38%;
+  --bg-grid-color: rgba(0, 0, 0, 0.04);
+  --bg-glow-primary: radial-gradient(
+    ellipse 80% 50% at 50% 0%,
+    hsl(var(--primary) / 0.1) 0%,
+    transparent 70%
+  );
+  --bg-glow-lime: radial-gradient(
+    ellipse 80% 50% at 50% 0%,
+    hsl(var(--ef-lime) / 0.08) 0%,
+    transparent 70%
+  );
+  --bg-diagonal: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent 4px,
+    rgba(0, 0, 0, 0.015) 4px,
+    rgba(0, 0, 0, 0.015) 8px
+  );
+  --bracket-color: hsl(var(--primary) / 0.35);
+
+  /* Semantic text tokens — light mode */
+  --text-primary: hsl(0 0% 8%);
+  --text-secondary: hsl(0 0% 20%);
+  --text-tertiary: hsl(0 0% 35%);
+  --text-muted: hsl(0 0% 45%);
+  --text-placeholder: hsl(0 0% 55%);
+  --text-disabled: hsl(0 0% 65%);
+  --text-link: hsl(202 56% 35%);
+  --text-accent: hsl(42 90% 42%);
+  --text-error: hsl(355 85% 48%);
+  --text-success: hsl(145 60% 38%);
+
+  /* ef-gradient-scanline — dark lines on light surfaces */
+  --ef-gradient-scanline: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.04) 2px,
+    rgba(0, 0, 0, 0.04) 4px
+  );
 }
 
 /* ═══ BASE STYLES ═══ */

package/src/tailwind-preset.ts

@@ -27,7 +27,10 @@ const reendPreset: Partial<Config> = {
         body: ["Source Han Sans", "Noto Sans SC", "Inter", "sans-serif"],
       },
       colors: {
-        border: "hsl(var(--border))",
+        border: {
+          DEFAULT: "hsl(var(--border))",
+          strong: "hsl(var(--border-strong))",
+        },
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
         background: "hsl(var(--background))",
@@ -74,6 +77,8 @@ const reendPreset: Partial<Config> = {
           "pure-white": "hsl(var(--ef-pure-white))",
           yellow: "hsl(var(--ef-yellow))",
           "yellow-dark": "hsl(var(--ef-yellow-dark))",
+          lime: "hsl(var(--ef-lime))",
+          "lime-dark": "hsl(var(--ef-lime-dark))",
           blue: "hsl(var(--ef-blue))",
           "blue-light": "hsl(var(--ef-blue-light))",
           "blue-dark": "hsl(var(--ef-blue-dark))",
@@ -92,6 +97,25 @@ const reendPreset: Partial<Config> = {
           hover: "hsl(var(--surface-hover))",
           active: "hsl(var(--surface-active))",
         },
+        chart: {
+          1: "var(--chart-1)",
+          2: "var(--chart-2)",
+          3: "var(--chart-3)",
+          4: "var(--chart-4)",
+          5: "var(--chart-5)",
+          6: "var(--chart-6)",
+          7: "var(--chart-7)",
+          8: "var(--chart-8)",
+        },
+      },
+      // ─── Opacity scale ────────────────────────────────────────────────────
+      opacity: {
+        overlay: "var(--opacity-overlay)",
+        hover: "var(--opacity-hover)",
+        disabled: "var(--opacity-disabled)",
+        border: "var(--opacity-border)",
+        focus: "var(--opacity-focus)",
+        muted: "var(--opacity-muted)",
       },
       borderRadius: {
         lg: "var(--radius)",
@@ -104,25 +128,32 @@ const reendPreset: Partial<Config> = {
         md: "var(--shadow-md)",
         lg: "var(--shadow-lg)",
         glow: "var(--shadow-glow)",
+        "glow-sm": "var(--shadow-glow-sm)",
+        "glow-md": "var(--shadow-glow-md)",
+        "glow-lg": "var(--shadow-glow-lg)",
+        accent: "var(--shadow-accent)",
       },
       // ─── Z-Index scale matching CSS vars ────────────────────────────────
       zIndex: {
+        below: "-1",
         base: "0",
-        dropdown: "10",
-        sticky: "20",
-        overlay: "30",
-        modal: "40",
-        popover: "50",
-        toast: "60",
-        tooltip: "70",
+        raised: "1",
+        dropdown: "100",
+        sticky: "200",
+        header: "1000",
+        overlay: "1500",
+        modal: "2000",
+        toast: "3000",
+        tooltip: "4000",
+        max: "9999",
       },
       // ─── Transition durations matching CSS vars ──────────────────────────
       transitionDuration: {
         instant: "100ms",
         fast: "150ms",
-        normal: "250ms",
-        slow: "400ms",
-        slower: "700ms",
+        normal: "300ms",
+        slow: "500ms",
+        slower: "800ms",
       },
       // ─── Transition easing matching CSS vars ─────────────────────────────
       transitionTimingFunction: {
@@ -131,6 +162,83 @@ const reendPreset: Partial<Config> = {
         sharp: "cubic-bezier(0.4, 0, 0.2, 1)",
         smooth: "cubic-bezier(0.45, 0, 0.55, 1)",
       },
+      // ─── Type scale (v3.0) ───────────────────────────────────────────────
+      fontSize: {
+        "display-xl": [
+          "var(--type-display-xl-size,72px)",
+          { lineHeight: "var(--lh-display,0.95)" },
+        ],
+        "display-lg": [
+          "var(--type-display-lg-size,56px)",
+          { lineHeight: "var(--lh-display,0.95)" },
+        ],
+        h1: [
+          "var(--type-h1-size,48px)",
+          { lineHeight: "var(--lh-heading,1.0)" },
+        ],
+        h2: [
+          "var(--type-h2-size,36px)",
+          { lineHeight: "var(--lh-heading,1.0)" },
+        ],
+        h3: [
+          "var(--type-h3-size,28px)",
+          { lineHeight: "var(--lh-heading,1.0)" },
+        ],
+        h4: [
+          "var(--type-h4-size,22px)",
+          { lineHeight: "var(--lh-heading,1.0)" },
+        ],
+        "body-lg": [
+          "var(--type-body-lg-size,18px)",
+          { lineHeight: "var(--lh-body,1.6)" },
+        ],
+        body: [
+          "var(--type-body-size,16px)",
+          { lineHeight: "var(--lh-body,1.6)" },
+        ],
+        "body-sm": [
+          "var(--type-body-sm-size,14px)",
+          { lineHeight: "var(--lh-body,1.6)" },
+        ],
+        caption: [
+          "var(--type-caption-size,12px)",
+          { lineHeight: "var(--lh-caption,1.4)" },
+        ],
+        overline: [
+          "var(--type-overline-size,11px)",
+          { lineHeight: "1.2", letterSpacing: "0.12em" },
+        ],
+      },
+      // ─── Line heights (v3.0) ─────────────────────────────────────────────
+      lineHeight: {
+        heading: "var(--lh-heading, 1.0)",
+        display: "var(--lh-display, 0.95)",
+        body: "var(--lh-body, 1.6)",
+        caption: "var(--lh-caption, 1.4)",
+      },
+      // ─── Aspect ratios (v3.0) ────────────────────────────────────────────
+      aspectRatio: {
+        banner: "21 / 9",
+        feature: "16 / 9",
+        portrait: "3 / 4",
+        cinematic: "21 / 9",
+      },
+      // ─── Spacing tokens (v3.0 reference) ────────────────────────────────
+      spacing: {
+        "space-1": "var(--space-1,  4px)",
+        "space-2": "var(--space-2,  8px)",
+        "space-3": "var(--space-3,  12px)",
+        "space-4": "var(--space-4,  16px)",
+        "space-5": "var(--space-5,  20px)",
+        "space-6": "var(--space-6,  24px)",
+        "space-8": "var(--space-8,  32px)",
+        "space-10": "var(--space-10, 40px)",
+        "space-12": "var(--space-12, 48px)",
+        "space-16": "var(--space-16, 64px)",
+        "space-20": "var(--space-20, 80px)",
+        "space-24": "var(--space-24, 96px)",
+        "space-32": "var(--space-32, 128px)",
+      },
       // ─── Keyframes ───────────────────────────────────────────────────────
       keyframes: {
         "accordion-down": {
@@ -149,10 +257,26 @@ const reendPreset: Partial<Config> = {
           from: { opacity: "0", transform: "translateY(16px)" },
           to: { opacity: "1", transform: "translateY(0)" },
         },
+        fadeInDown: {
+          from: { opacity: "0", transform: "translateY(-16px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
         slideInRight: {
-          from: { opacity: "0", transform: "translateX(-10px)" },
+          from: { opacity: "0", transform: "translateX(-24px)" },
           to: { opacity: "1", transform: "translateX(0)" },
         },
+        scaleIn: {
+          from: { opacity: "0", transform: "scale(0.92)" },
+          to: { opacity: "1", transform: "scale(1)" },
+        },
+        rotate: {
+          from: { transform: "rotate(0deg)" },
+          to: { transform: "rotate(360deg)" },
+        },
+        loadingDot: {
+          "0%, 80%, 100%": { opacity: "0.2", transform: "scale(0.8)" },
+          "40%": { opacity: "1", transform: "scale(1)" },
+        },
         slideDown: {
           from: { transform: "scaleY(0)", opacity: "0" },
           to: { transform: "scaleY(1)", opacity: "1" },
@@ -193,13 +317,32 @@ const reendPreset: Partial<Config> = {
           to: { opacity: "1", transform: "translateY(0)" },
         },
         "dialog-in": {
-          from: { opacity: "0", scale: "0.96" },
-          to: { opacity: "1", scale: "1" },
+          from: { opacity: "0", transform: "translate(-50%, -48%) scale(0.96)" },
+          to: { opacity: "1", transform: "translate(-50%, -50%) scale(1)" },
+        },
+        "switch-thumb-spin": {
+          from: { transform: "rotate(0deg)" },
+          to: { transform: "rotate(360deg)" },
         },
         "frequency-bar": {
           "0%": { transform: "scaleY(0.15)" },
           "100%": { transform: "scaleY(1)" },
         },
+        slideUp: {
+          from: { transform: "translateY(100%)", opacity: "0" },
+          to: { transform: "translateY(0)", opacity: "1" },
+        },
+        shake: {
+          "0%, 100%": { transform: "translateX(0)" },
+          "20%, 60%": { transform: "translateX(-4px)" },
+          "40%, 80%": { transform: "translateX(4px)" },
+        },
+        particleDrift: {
+          "0%":   { transform: "translate(0, 0)" },
+          "33%":  { transform: "translate(2px, -3px)" },
+          "66%":  { transform: "translate(-2px, 2px)" },
+          "100%": { transform: "translate(0, 0)" },
+        },
       },
       // ─── Animation utilities ─────────────────────────────────────────────
       animation: {
@@ -207,18 +350,27 @@ const reendPreset: Partial<Config> = {
         "accordion-up": "accordion-up 0.2s ease-out",
         "fade-in": "fadeIn 0.3s ease forwards",
         "fade-in-up": "fadeInUp 0.4s var(--ease-default, ease) forwards",
-        "slide-in-right": "slideInRight 0.3s var(--ease-smooth, ease) forwards",
+        "fade-in-down": "fadeInDown 0.4s var(--ease-default, ease) forwards",
+        "slide-in-right": "slideInRight 0.4s var(--ease-default, ease) forwards",
+        "scale-in": "scaleIn 0.3s var(--ease-default, ease) forwards",
+        rotate: "rotate 1s linear infinite",
+        "loading-dot": "loadingDot 1.4s ease-in-out infinite both",
         "slide-down": "slideDown 0.3s ease forwards",
         glitch: "glitch 3s infinite",
         "cursor-blink": "cursorBlink 1s step-end infinite",
         "diamond-spin": "diamondSpin 0.8s linear infinite",
+        "switch-spin": "switch-thumb-spin 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both",
         "pulse-glow": "pulseGlow 2s ease-in-out infinite",
         "scan-line": "scanLine 2s linear infinite",
         skeleton: "skeletonShimmer 1.5s infinite",
         shrink: "shrink 5s linear forwards",
         "count-up": "countUp 0.4s var(--ease-default, ease) forwards",
-        "dialog-in": "dialog-in 0.2s var(--ease-default, ease) forwards",
+        "dialog-in": "dialog-in 0.3s var(--ease-default, ease) forwards",
         "frequency-bar": "frequency-bar 0.8s ease-in-out infinite alternate",
+        "slide-up": "slideUp 0.3s var(--ease-sharp, ease) forwards",
+        shake: "shake 0.4s var(--ease-sharp, ease)",
+        "slide-up": "slideUp 0.3s var(--ease-sharp, ease) forwards",
+        "particle-drift": "particleDrift 3s ease-in-out infinite",
       },
     },
   },
@@ -294,6 +446,36 @@ const reendPreset: Partial<Config> = {
           ".text-glow-yellow": {
             "text-shadow": "0 0 20px hsl(var(--primary) / 0.3)",
           },
+          ".glow-lime": {
+            "box-shadow": "0 0 20px hsl(var(--ef-lime) / 0.2)",
+          },
+          ".text-glow-lime": {
+            "text-shadow": "0 0 16px hsl(var(--ef-lime) / 0.4)",
+          },
+        });
+
+        addUtilities({
+          ".bg-grid-pattern": {
+            "background-image":
+              "linear-gradient(var(--bg-grid-color,rgba(255,255,255,0.03)) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid-color,rgba(255,255,255,0.03)) 1px, transparent 1px)",
+            "background-size":
+              "var(--bg-grid-size,60px) var(--bg-grid-size,60px)",
+          },
+          ".bg-radial-glow": {
+            "background-image": "var(--bg-glow-primary)",
+            "background-repeat": "no-repeat",
+            "background-position": "center top",
+            "background-size": "100% 600px",
+          },
+          ".bg-radial-glow-lime": {
+            "background-image": "var(--bg-glow-lime)",
+            "background-repeat": "no-repeat",
+            "background-position": "center top",
+            "background-size": "100% 600px",
+          },
+          ".bg-diagonal-lines": {
+            "background-image": "var(--bg-diagonal)",
+          },
         });
 
         addUtilities({