funuicss 2.7.6 → 2.7.7

package/ui/ScrollInView/ScrollInView.d.ts

@@ -0,0 +1,72 @@
+import React, { ReactNode } from 'react';
+declare const animationVariants: {
+    'fade-up': {
+        hidden: {
+            opacity: number;
+            y: number;
+        };
+        visible: {
+            opacity: number;
+            y: number;
+        };
+    };
+    'fade-down': {
+        hidden: {
+            opacity: number;
+            y: number;
+        };
+        visible: {
+            opacity: number;
+            y: number;
+        };
+    };
+    'fade-in': {
+        hidden: {
+            opacity: number;
+        };
+        visible: {
+            opacity: number;
+        };
+    };
+    'zoom-in': {
+        hidden: {
+            scale: number;
+            opacity: number;
+        };
+        visible: {
+            scale: number;
+            opacity: number;
+        };
+    };
+    'slide-left': {
+        hidden: {
+            x: number;
+            opacity: number;
+        };
+        visible: {
+            x: number;
+            opacity: number;
+        };
+    };
+    'slide-right': {
+        hidden: {
+            x: number;
+            opacity: number;
+        };
+        visible: {
+            x: number;
+            opacity: number;
+        };
+    };
+};
+interface ScrollInViewProps {
+    children: ReactNode;
+    animationType?: keyof typeof animationVariants;
+    delay?: number;
+    duration?: number;
+    threshold?: number;
+    once?: boolean;
+    className?: string;
+}
+declare const ScrollInView: React.FC<ScrollInViewProps>;
+export default ScrollInView;

package/ui/ScrollInView/ScrollInView.js

@@ -0,0 +1,70 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var framer_motion_1 = require("framer-motion");
+var react_intersection_observer_1 = require("react-intersection-observer");
+var animationVariants = {
+    'fade-up': { hidden: { opacity: 0, y: 40 }, visible: { opacity: 1, y: 0 } },
+    'fade-down': { hidden: { opacity: 0, y: -40 }, visible: { opacity: 1, y: 0 } },
+    'fade-in': { hidden: { opacity: 0 }, visible: { opacity: 1 } },
+    'zoom-in': { hidden: { scale: 0.9, opacity: 0 }, visible: { scale: 1, opacity: 1 } },
+    'slide-left': { hidden: { x: 40, opacity: 0 }, visible: { x: 0, opacity: 1 } },
+    'slide-right': { hidden: { x: -40, opacity: 0 }, visible: { x: 0, opacity: 1 } },
+};
+var ScrollInView = function (_a) {
+    var children = _a.children, _b = _a.animationType, animationType = _b === void 0 ? 'fade-up' : _b, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.duration, duration = _d === void 0 ? 0.6 : _d, _e = _a.threshold, threshold = _e === void 0 ? 0.2 : _e, _f = _a.once, once = _f === void 0 ? false : _f, _g = _a.className, className = _g === void 0 ? '' : _g;
+    var controls = (0, framer_motion_1.useAnimation)();
+    var _h = (0, react_intersection_observer_1.useInView)({
+        threshold: threshold,
+        triggerOnce: once,
+    }), ref = _h[0], inView = _h[1];
+    (0, react_1.useEffect)(function () {
+        if (inView) {
+            controls.start('visible');
+        }
+        else if (!once) {
+            controls.start('hidden');
+        }
+    }, [inView, once, controls]);
+    var variants = animationVariants[animationType] || animationVariants['fade-up'];
+    return (react_1.default.createElement(framer_motion_1.motion.div, { ref: ref, variants: variants, initial: "hidden", animate: controls, transition: {
+            delay: delay,
+            duration: duration,
+            ease: [0.25, 1, 0.5, 1], // Natural cubic bezier
+        }, className: className }, children));
+};
+exports.default = ScrollInView;

package/ui/ScrollInView/ScrollInView.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import React, { ReactNode, useEffect } from 'react';
+import { motion, useAnimation } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
+
+const animationVariants = {
+  'fade-up': { hidden: { opacity: 0, y: 40 }, visible: { opacity: 1, y: 0 } },
+  'fade-down': { hidden: { opacity: 0, y: -40 }, visible: { opacity: 1, y: 0 } },
+  'fade-in': { hidden: { opacity: 0 }, visible: { opacity: 1 } },
+  'zoom-in': { hidden: { scale: 0.9, opacity: 0 }, visible: { scale: 1, opacity: 1 } },
+  'slide-left': { hidden: { x: 40, opacity: 0 }, visible: { x: 0, opacity: 1 } },
+  'slide-right': { hidden: { x: -40, opacity: 0 }, visible: { x: 0, opacity: 1 } },
+};
+
+interface ScrollInViewProps {
+  children: ReactNode;
+  animationType?: keyof typeof animationVariants;
+  delay?: number;
+  duration?: number;
+  threshold?: number;
+  once?: boolean;
+  className?: string;
+}
+
+const ScrollInView: React.FC<ScrollInViewProps> = ({
+  children,
+  animationType = 'fade-up',
+  delay = 0,
+  duration = 0.6,
+  threshold = 0.2,
+  once = false,
+  className = '',
+}) => {
+  const controls = useAnimation();
+  const [ref, inView] = useInView({
+    threshold,
+    triggerOnce: once,
+  });
+
+  useEffect(() => {
+    if (inView) {
+      controls.start('visible');
+    } else if (!once) {
+      controls.start('hidden');
+    }
+  }, [inView, once, controls]);
+
+  const variants = animationVariants[animationType] || animationVariants['fade-up'];
+
+  return (
+    <motion.div
+      ref={ref}
+      variants={variants}
+      initial="hidden"
+      animate={controls}
+      transition={{
+        delay,
+        duration,
+        ease: [0.25, 1, 0.5, 1], // Natural cubic bezier
+      }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default ScrollInView;

package/ui/accordion/Accordion.d.ts

@@ -3,6 +3,7 @@ interface AccordionProps {
     items: {
         title: string;
         content: React.ReactNode;
+        icon?: React.ReactNode;
     }[];
     allowMultiple?: boolean;
     defaultOpenIndexes?: number[];

package/ui/accordion/Accordion.js

@@ -42,17 +42,22 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
+var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var AccordionItem = function (_a) {
-    var title = _a.title, content = _a.content, isOpen = _a.isOpen, onToggle = _a.onToggle, _b = _a.itemClass, itemClass = _b === void 0 ? '' : _b, _c = _a.titleClass, titleClass = _c === void 0 ? '' : _c, _d = _a.iconClass, iconClass = _d === void 0 ? '' : _d, _e = _a.contentClass, contentClass = _e === void 0 ? '' : _e, _f = _a.activeClass, activeClass = _f === void 0 ? '' : _f;
+    var icon = _a.icon, title = _a.title, content = _a.content, isOpen = _a.isOpen, onToggle = _a.onToggle, _b = _a.itemClass, itemClass = _b === void 0 ? '' : _b, _c = _a.titleClass, titleClass = _c === void 0 ? '' : _c, _d = _a.iconClass, iconClass = _d === void 0 ? '' : _d, _e = _a.contentClass, contentClass = _e === void 0 ? '' : _e, _f = _a.activeClass, activeClass = _f === void 0 ? '' : _f;
     return (react_1.default.createElement("div", { className: "accordion-item ".concat(itemClass, " ").concat(isOpen ? activeClass : '') },
-        react_1.default.createElement("button", { className: "accordion-header ".concat(titleClass), onClick: onToggle },
-            react_1.default.createElement("span", null, title),
-            react_1.default.createElement("span", { className: iconClass }, isOpen ? (react_1.default.createElement("span", { className: "animated slide-up" },
-                react_1.default.createElement(pi_1.PiCaretUp, null))) : (react_1.default.createElement("span", { className: "animated slide-down" },
-                react_1.default.createElement(pi_1.PiCaretDown, null))))),
+        react_1.default.createElement("div", { className: "accordion-header ".concat(titleClass), onClick: onToggle },
+            react_1.default.createElement(RowFlex_1.default, { alignItems: 'center', gap: 0.6 },
+                icon && react_1.default.createElement("div", { style: { lineHeight: 0 } }, icon),
+                react_1.default.createElement("div", { className: 'col fit' }, title)),
+            react_1.default.createElement("div", { style: { lineHeight: 0 }, className: "".concat(iconClass, " ").concat(isOpen ? "accordion-rotated" : "") },
+                react_1.default.createElement(pi_1.PiCaretDown, null))),
         react_1.default.createElement("div", { className: "accordion-content ".concat(contentClass, " ").concat(isOpen ? 'open' : '') },
             react_1.default.createElement("div", { className: "accordion-inner" }, content))));
 };
@@ -75,6 +80,6 @@ var Accordion = function (_a) {
             setOpenIndexes(openIndexes.includes(index) ? [] : [index]);
         }
     };
-    return (react_1.default.createElement("div", { className: "accordion" }, items.map(function (item, index) { return (react_1.default.createElement(AccordionItem, { key: index, index: index, title: item.title, content: item.content, isOpen: openIndexes.includes(index), onToggle: function () { return toggleIndex(index); }, itemClass: itemClass, titleClass: titleClass, iconClass: iconClass, contentClass: contentClass, activeClass: activeClass })); })));
+    return (react_1.default.createElement("div", { className: "accordion" }, items.map(function (item, index) { return (react_1.default.createElement(AccordionItem, { key: index, index: index, icon: item.icon, title: item.title, content: item.content, isOpen: openIndexes.includes(index), onToggle: function () { return toggleIndex(index); }, itemClass: itemClass, titleClass: titleClass, iconClass: iconClass, contentClass: contentClass, activeClass: activeClass })); })));
 };
 exports.default = Accordion;

package/ui/accordion/Accordion.tsx

@@ -1,6 +1,7 @@
 'use client';
 import React, { useState } from 'react';
 import { PiCaretDown, PiCaretUp } from 'react-icons/pi';
+import RowFlex from '../specials/RowFlex';
 
 interface AccordionItemProps {
   title: string;
@@ -8,7 +9,7 @@ interface AccordionItemProps {
   isOpen?: boolean;
   onToggle?: () => void;
   index?: number;
-
+  icon?: React.ReactNode;
   // Customization
   itemClass?: string;
   titleClass?: string;
@@ -18,6 +19,7 @@ interface AccordionItemProps {
 }
 
 const AccordionItem: React.FC<AccordionItemProps> = ({
+  icon,
   title,
   content,
   isOpen,
@@ -30,20 +32,17 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 }) => {
   return (
     <div className={`accordion-item ${itemClass} ${isOpen ? activeClass : ''}`}>
-      <button className={`accordion-header ${titleClass}`} onClick={onToggle}>
-        <span>{title}</span>
-        <span className={iconClass}>
-          {isOpen ? (
-            <span className="animated slide-up">
-              <PiCaretUp />
-            </span>
-          ) : (
-            <span className="animated slide-down">
-              <PiCaretDown />
-            </span>
-          )}
-        </span>
-      </button>
+      <div className={`accordion-header ${titleClass}`} onClick={onToggle}>
+       <RowFlex alignItems='center' gap={0.6}>
+        {
+          icon && <div style={{lineHeight:0}}>{icon}</div>
+        }
+       <div className='col fit'>{title}</div>
+       </RowFlex>
+        <div style={{lineHeight:0}} className={`${iconClass} ${isOpen ? "accordion-rotated" : ""}`}>
+          <PiCaretDown />
+        </div>
+      </div>
       <div className={`accordion-content ${contentClass} ${isOpen ? 'open' : ''}`}>
         <div className="accordion-inner">{content}</div>
       </div>
@@ -55,6 +54,7 @@ interface AccordionProps {
   items: {
     title: string;
     content: React.ReactNode;
+    icon?: React.ReactNode;
   }[];
   allowMultiple?: boolean; // ✅ NEW
   defaultOpenIndexes?: number[]; // optional
@@ -99,6 +99,7 @@ const Accordion: React.FC<AccordionProps> = ({
         <AccordionItem
           key={index}
           index={index}
+          icon={item.icon}
           title={item.title}
           content={item.content}
           isOpen={openIndexes.includes(index)}

package/ui/alert/Alert.js

@@ -82,7 +82,7 @@ function Alert(_a) {
                 type === 'success' && react_1.default.createElement(pi_1.PiCheckCircleDuotone, null),
                 type === 'info' && react_1.default.createElement(pi_1.PiInfo, null),
                 type === 'warning' && react_1.default.createElement(pi_1.PiWarning, null),
-                type === 'error' && react_1.default.createElement(pi_1.PiX, null))) : (react_1.default.createElement("span", { className: "rotate", style: { lineHeight: "0" } },
+                type === 'error' && react_1.default.createElement(pi_1.PiX, null))) : (react_1.default.createElement("div", { className: "rotate", style: { lineHeight: "0" } },
                 react_1.default.createElement(pi_1.PiSpinner, null)))),
             react_1.default.createElement("div", { className: "alert-text" }, message || children))));
 }

package/ui/alert/Alert.tsx

@@ -94,9 +94,9 @@ export default function Alert({
               {type === 'error' && <PiX />}
             </div>
           ) : (
-            <span className="rotate"  style={{lineHeight:"0"}}>
+            <div className="rotate"  style={{lineHeight:"0"}}>
               <PiSpinner />
-            </span>
+            </div>
           )}
         </div>
         <div className="alert-text">{message || children}</div>

package/ui/avatar/Avatar.d.ts

@@ -3,9 +3,11 @@ import * as React from 'react';
 interface AvatarProps {
     funcss?: string;
     children?: ReactNode;
-    size?: string;
+    size?: number;
     bg?: string;
+    bordered?: boolean;
+    color?: string;
     content?: ReactNode;
 }
-export default function Avatar({ funcss, children, size, bg, content, }: AvatarProps): React.JSX.Element;
+export default function Avatar({ funcss, children, size, bordered, bg, content, color }: AvatarProps): React.JSX.Element;
 export {};

package/ui/avatar/Avatar.js

@@ -37,10 +37,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Avatar;
 var React = __importStar(require("react"));
 function Avatar(_a) {
-    var funcss = _a.funcss, children = _a.children, size = _a.size, bg = _a.bg, content = _a.content;
-    return (React.createElement("div", { className: "avatar ".concat(funcss || '', " ").concat(bg || ''), style: {
-            width: "".concat(size || '2.3rem'),
-            height: "".concat(size || '2.3rem'),
+    var funcss = _a.funcss, children = _a.children, _b = _a.size, size = _b === void 0 ? 2 : _b, _c = _a.bordered, bordered = _c === void 0 ? true : _c, bg = _a.bg, content = _a.content, color = _a.color;
+    return (React.createElement("div", { className: "\n        animated \n        fade-in \n        avatar \n        ".concat(funcss || '', " \n        ").concat(bg || 'lighter', " \n        ").concat(bordered ? 'border' : '', "\n      ").concat("text-".concat(color), "\n      "), style: {
+            width: "".concat(size, "rem"),
+            height: "".concat(size, "rem"),
         } },
-        React.createElement(React.Fragment, null, content ? content : children)));
+        React.createElement(React.Fragment, null, content || children)));
 }

package/ui/avatar/Avatar.tsx

@@ -4,27 +4,39 @@ import * as React from 'react'
 interface AvatarProps {
   funcss?: string;
   children?: ReactNode;
-  size?: string;
+  size?: number;
   bg?: string;
+  bordered?:boolean ,
+  color?: string,
   content?: ReactNode;
 }
 
 export default function Avatar({
   funcss,
   children,
-  size,
+  size = 2,
+  bordered = true,
   bg,
   content,
+  color 
 }: AvatarProps) {
   return (
     <div
-      className={`avatar ${funcss || ''} ${bg || ''}`}
+      className={`
+        animated 
+        fade-in 
+        avatar 
+        ${funcss || ''} 
+        ${bg || 'lighter'} 
+        ${bordered ? 'border' : ''}
+      ${`text-${color}`}
+      `}
       style={{
-        width: `${size || '2.3rem'}`,
-        height: `${size || '2.3rem'}`,
+        width: `${size}rem`,
+        height: `${size}rem`,
       }}
     >
-      <>{content ? content : children}</>
+      <>{content || children}</>
     </div>
   );
 }

package/ui/specials/Circle.js

@@ -60,7 +60,7 @@ exports.default = Circle;
 var React = __importStar(require("react"));
 function Circle(_a) {
     var _b = _a.size, size = _b === void 0 ? 2 : _b, funcss = _a.funcss, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, bordered = _a.bordered, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick", "bordered"]);
-    return (React.createElement("div", __assign({ className: " animated fade-in ".concat(bordered ? "border" : "", " pointer avatar ").concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || '', " ").concat(hoverable ? 'hoverable' : ''), style: {
+    return (React.createElement("div", __assign({ className: " animated fade-in ".concat(bordered ? "border" : "", " pointer avatar ").concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || 'lighter', " ").concat(hoverable ? 'hoverable' : ''), style: {
             width: "".concat(size + "rem" || '2.3rem'),
             height: "".concat(size + "rem" || '2.3rem'),
         }, key: key, onClick: onClick }, rest),

package/ui/specials/Circle.tsx

@@ -32,7 +32,7 @@ export default function Circle({
 }: Circle_Props) {
   return (
       <div
-        className={` animated fade-in ${bordered ? "border" : ""} pointer avatar ${funcss || ''} ${`text-` + color?.trim() || ''} ${raised ? "raised" : ''} ${bg || ''} ${
+        className={` animated fade-in ${bordered ? "border" : ""} pointer avatar ${funcss || ''} ${`text-` + color?.trim() || ''} ${raised ? "raised" : ''} ${bg || 'lighter'} ${
           hoverable ? 'hoverable' : ''
         }`}
         style={{

package/ui/theme/theme.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface ThemeProviderProps {
-    theme: 'light' | 'dark' | 'dark-blue' | 'light-gray';
+    theme: 'light' | 'dark' | 'dark-blue' | 'light-gray' | 'pastel-green' | 'warm-orange' | 'frosted-glass' | 'midnight-purple' | 'cyber-metal';
     children: React.ReactNode;
 }
 declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/ui/theme/theme.js

@@ -48,7 +48,7 @@ var ThemeProvider = function (_a) {
             root.style.setProperty(key, value);
         });
         // Apply darkened RGBA versions (for dark themes only)
-        if (theme === 'dark' || theme === 'dark-blue') {
+        if (theme === 'dark' || theme === 'dark-blue' || theme === 'midnight-purple' || theme === 'cyber-metal') {
             themes_1.colorVarsToDarken.forEach(function (varName) {
                 var original = getComputedStyle(root).getPropertyValue(varName).trim();
                 if (original) {

package/ui/theme/theme.tsx

@@ -4,7 +4,7 @@ import { colorVarsToDarken, themes } from './themes';
 import { getDarkenAmount, darkenToRgba } from './darkenUtils';
 
 interface ThemeProviderProps {
-  theme: 'light' | 'dark' | 'dark-blue' | 'light-gray';
+  theme: 'light' | 'dark' | 'dark-blue' | 'light-gray' | 'pastel-green' | 'warm-orange' | 'frosted-glass' | 'midnight-purple' | 'cyber-metal';
   children: React.ReactNode;
 }
 
@@ -19,7 +19,7 @@ const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {
     });
 
     // Apply darkened RGBA versions (for dark themes only)
-    if (theme === 'dark' || theme === 'dark-blue') {
+    if (theme === 'dark' || theme === 'dark-blue' || theme === 'midnight-purple' || theme === 'cyber-metal') {
       colorVarsToDarken.forEach((varName) => {
         const original = getComputedStyle(root).getPropertyValue(varName).trim();
         if (original) {

package/ui/theme/themes.d.ts

@@ -52,6 +52,7 @@ export declare const themes: {
         '--raiseThemes': string;
         '--raiseOpaque': string;
         '--borderColor': string;
+        '--borderRgb': string;
         '--lighter': string;
         '--linkColor': string;
         '--cardBg': string;
@@ -84,6 +85,7 @@ export declare const themes: {
         '--raiseThemes': string;
         '--raiseOpaque': string;
         '--borderColor': string;
+        '--borderRgb': string;
         '--lighter': string;
         '--linkColor': string;
         '--accent': string;
@@ -97,6 +99,117 @@ export declare const themes: {
         '--raiseThemes': string;
         '--raiseOpaque': string;
         '--borderColor': string;
+        '--borderRgb': string;
+        '--lighter': string;
+        '--linkColor': string;
+        '--accent': string;
+        '--cardBg': string;
+        '--card': string;
+    };
+    'pastel-green': {
+        '--page-bg': string;
+        '--text-color': string;
+        '--text-muted': string;
+        '--raiseThemes': string;
+        '--raiseOpaque': string;
+        '--borderColor': string;
+        '--borderRgb': string;
+        '--lighter': string;
+        '--linkColor': string;
+        '--accent': string;
+        '--cardBg': string;
+        '--card': string;
+    };
+    'warm-orange': {
+        '--page-bg': string;
+        '--text-color': string;
+        '--text-muted': string;
+        '--raiseThemes': string;
+        '--raiseOpaque': string;
+        '--borderColor': string;
+        '--borderRgb': string;
+        '--lighter': string;
+        '--linkColor': string;
+        '--accent': string;
+        '--cardBg': string;
+        '--card': string;
+    };
+    'frosted-glass': {
+        '--page-bg': string;
+        '--text-color': string;
+        '--text-muted': string;
+        '--raiseThemes': string;
+        '--raiseOpaque': string;
+        '--borderColor': string;
+        '--borderRgb': string;
+        '--lighter': string;
+        '--linkColor': string;
+        '--accent': string;
+        '--cardBg': string;
+        '--card': string;
+    };
+    'midnight-purple': {
+        '--success50': string;
+        '--success100': string;
+        '--success200': string;
+        '--success300': string;
+        '--success400': string;
+        '--warning50': string;
+        '--warning100': string;
+        '--warning200': string;
+        '--warning300': string;
+        '--warning400': string;
+        '--info50': string;
+        '--info100': string;
+        '--info200': string;
+        '--info300': string;
+        '--info400': string;
+        '--error50': string;
+        '--error100': string;
+        '--error200': string;
+        '--error300': string;
+        '--error400': string;
+        '--page-bg': string;
+        '--text-color': string;
+        '--text-muted': string;
+        '--raiseThemes': string;
+        '--raiseOpaque': string;
+        '--borderColor': string;
+        '--borderRgb': string;
+        '--lighter': string;
+        '--linkColor': string;
+        '--accent': string;
+        '--cardBg': string;
+        '--card': string;
+    };
+    'cyber-metal': {
+        '--success50': string;
+        '--success100': string;
+        '--success200': string;
+        '--success300': string;
+        '--success400': string;
+        '--warning50': string;
+        '--warning100': string;
+        '--warning200': string;
+        '--warning300': string;
+        '--warning400': string;
+        '--info50': string;
+        '--info100': string;
+        '--info200': string;
+        '--info300': string;
+        '--info400': string;
+        '--error50': string;
+        '--error100': string;
+        '--error200': string;
+        '--error300': string;
+        '--error400': string;
+        '--page-bg': string;
+        '--text-color': string;
+        '--text-muted': string;
+        '--raiseThemes': string;
+        '--raiseOpaque': string;
+        '--borderColor': string;
+        '--borderRgb': string;
         '--lighter': string;
         '--linkColor': string;
         '--accent': string;