funuicss 2.6.1 → 2.6.3

package/ui/alert/Alert.js

@@ -78,11 +78,11 @@ function Alert(_a) {
         react_1.default.createElement("div", __assign({ style: __assign({ animation: "".concat(duration || '0.3', "s ").concat(animation || 'ScaleUp') }, style), className: "text-".concat(type, "800 alert ").concat(card ? 'card' : '', " ").concat(flat ? 'flat' : '', " ").concat(raised ? 'raised' : '', " ").concat(outlined
                 ? "outline-".concat(type, "500")
                 : "".concat(variant || (standard ? "top-".concat(type) : "".concat(type, "200") + " outline-".concat(type, "300 "))), " ").concat(funcss || '', " ").concat(fullWidth ? 'width-100-p' : '') }, rest),
-            react_1.default.createElement("div", { className: "alert-icon" }, !isLoading ? (react_1.default.createElement("div", { className: "text-".concat(type), style: { lineHeight: "0" } },
+            react_1.default.createElement("div", { className: "alert-icon" }, !isLoading ? (react_1.default.createElement("div", { className: "text-".concat(type, "900"), style: { lineHeight: "0" } },
                 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" },
+                type === 'error' && react_1.default.createElement(pi_1.PiX, null))) : (react_1.default.createElement("span", { 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

@@ -87,14 +87,14 @@ export default function Alert({
       >
         <div className="alert-icon">
           {!isLoading ? (
-            <div className={`text-${type}`} style={{lineHeight:"0"}}>
+            <div className={`text-${type}900`} style={{lineHeight:"0"}}>
               {type === 'success' && <PiCheckCircleDuotone />}
               {type === 'info' && <PiInfo />}
               {type === 'warning' && <PiWarning />}
               {type === 'error' && <PiX />}
             </div>
           ) : (
-            <span className="rotate">
+            <span className="rotate"  style={{lineHeight:"0"}}>
               <PiSpinner />
             </span>
           )}

package/ui/drop/Dropdown.d.ts

@@ -13,6 +13,12 @@ interface DropdownProps {
     hoverable?: boolean;
     openOnHover?: boolean;
     className?: string;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
 }
 declare const Dropdown: React.FC<DropdownProps>;
 export default Dropdown;

package/ui/drop/Dropdown.js

@@ -36,7 +36,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var Dropdown = function (_a) {
-    var _b = _a.direction, direction = _b === void 0 ? 'dropdown' : _b, _c = _a.position, position = _c === void 0 ? 'left' : _c, button = _a.button, items = _a.items, _d = _a.hoverable, hoverable = _d === void 0 ? true : _d, _e = _a.openOnHover, openOnHover = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? '' : _f;
+    var _b = _a.direction, direction = _b === void 0 ? 'dropdown' : _b, _c = _a.position, position = _c === void 0 ? 'left' : _c, button = _a.button, items = _a.items, _d = _a.hoverable, hoverable = _d === void 0 ? true : _d, _e = _a.openOnHover, openOnHover = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? '' : _f, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight;
     var containerRef = (0, react_1.useRef)(null);
     var _g = (0, react_1.useState)(false), open = _g[0], setOpen = _g[1];
     var containerClass = "".concat(direction, " ").concat(position, " ").concat(className).trim();
@@ -55,7 +55,15 @@ var Dropdown = function (_a) {
     var showMenu = openOnHover || open;
     return (react_1.default.createElement("div", { ref: containerRef, className: containerClass, onMouseEnter: function () { return openOnHover && setOpen(true); }, onMouseLeave: function () { return openOnHover && setOpen(false); } },
         react_1.default.createElement("div", { className: "drop-button", onClick: function () { return !openOnHover && setOpen(!open); }, style: { cursor: !openOnHover ? 'pointer' : undefined } }, button),
-        react_1.default.createElement("div", { className: menuClass, style: { display: showMenu ? 'block' : 'none' } }, items.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "drop-item", onClick: function () {
+        react_1.default.createElement("div", { className: menuClass, style: {
+                display: showMenu ? 'block' : 'none',
+                width: width,
+                minWidth: minWidth,
+                maxWidth: maxWidth,
+                height: height,
+                minHeight: minHeight,
+                maxHeight: maxHeight,
+            } }, items.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "drop-item hoverable", onClick: function () {
                 var _a;
                 (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
                 if (!openOnHover)

package/ui/drop/Dropdown.tsx

@@ -17,6 +17,12 @@ interface DropdownProps {
   hoverable?: boolean;
   openOnHover?: boolean;
   className?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
 }
 
 const Dropdown: React.FC<DropdownProps> = ({
@@ -27,6 +33,12 @@ const Dropdown: React.FC<DropdownProps> = ({
   hoverable = true,
   openOnHover = true,
   className = '',
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
@@ -66,12 +78,20 @@ const Dropdown: React.FC<DropdownProps> = ({
 
       <div
         className={menuClass}
-        style={{ display: showMenu ? 'block' : 'none' }}
+        style={{
+          display: showMenu ? 'block' : 'none',
+          width,
+          minWidth,
+          maxWidth,
+          height,
+          minHeight,
+          maxHeight,
+        }}
       >
         {items.map((item, index) => (
           <div
             key={index}
-            className="drop-item"
+            className="drop-item hoverable"
             onClick={() => {
               item.onClick?.();
               if (!openOnHover) setOpen(false);
@@ -86,3 +106,4 @@ const Dropdown: React.FC<DropdownProps> = ({
 };
 
 export default Dropdown;
+

package/ui/specials/Circle.js

@@ -59,8 +59,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Circle;
 var React = __importStar(require("react"));
 function Circle(_a) {
-    var _b = _a.size, size = _b === void 0 ? 2 : _b, funcss = _a.funcss, _c = _a.bg, bg = _c === void 0 ? 'lighter' : _c, 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: " ".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: {
+    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: {
             width: "".concat(size + "rem" || '2.3rem'),
             height: "".concat(size + "rem" || '2.3rem'),
         }, key: key, onClick: onClick }, rest),

package/ui/specials/Circle.tsx

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

package/ui/theme/darkenUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const getDarkenAmount: (variable: string) => number;
+export declare const darkenToRgba: (hex: string, darkenAmount: number, alpha?: number) => string;

package/ui/theme/darkenUtils.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darkenToRgba = exports.getDarkenAmount = void 0;
+var tinycolor2_1 = __importDefault(require("tinycolor2"));
+var getDarkenAmount = function (variable) {
+    if (variable.includes('50'))
+        return 5;
+    if (variable.includes('100'))
+        return 10;
+    if (variable.includes('200'))
+        return 15;
+    if (variable.includes('300'))
+        return 20;
+    if (variable.includes('400'))
+        return 25;
+    return 20;
+};
+exports.getDarkenAmount = getDarkenAmount;
+var darkenToRgba = function (hex, darkenAmount, alpha) {
+    if (alpha === void 0) { alpha = 1; }
+    var color = (0, tinycolor2_1.default)(hex).darken(darkenAmount).toRgb();
+    return "rgba(".concat(color.r, ", ").concat(color.g, ", ").concat(color.b, ", ").concat(alpha, ")");
+};
+exports.darkenToRgba = darkenToRgba;

package/ui/theme/darkenUtils.ts

@@ -0,0 +1,15 @@
+import tinycolor from 'tinycolor2';
+
+export const getDarkenAmount = (variable: string): number => {
+  if (variable.includes('50')) return 5;
+  if (variable.includes('100')) return 10;
+  if (variable.includes('200')) return 15;
+  if (variable.includes('300')) return 20;
+  if (variable.includes('400')) return 25;
+  return 20;
+};
+
+export const darkenToRgba = (hex: string, darkenAmount: number, alpha = 1): string => {
+  const color = tinycolor(hex).darken(darkenAmount).toRgb();
+  return `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
+};

package/ui/theme/theme.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface ThemeProviderProps {
-    theme: 'light' | 'dark';
+    theme: 'light' | 'dark' | 'dark-blue' | 'light-gray';
     children: React.ReactNode;
 }
 declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/ui/theme/theme.js

@@ -35,27 +35,29 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var themes_1 = require("./themes");
+var darkenUtils_1 = require("./darkenUtils");
 var ThemeProvider = function (_a) {
     var theme = _a.theme, children = _a.children;
     (0, react_1.useEffect)(function () {
         var root = document.documentElement;
-        var lightTheme = {
-            '--page-bg': '#FFFFFF',
-            '--text-color': '#000000',
-        };
-        var darkTheme = {
-            '--page-bg': '#121212',
-            '--text-color': '#FFFFFF',
-            '--raiseThemes': 'rgba(32, 32, 32, 0.8)',
-            '--raiseOpaque': 'rgba(32, 32, 32, 0.94)',
-            '--borderColor': '#333333',
-            '--lighter': '#101010',
-        };
-        var selectedTheme = theme === 'dark' ? darkTheme : lightTheme;
+        var selectedTheme = themes_1.themes[theme] || themes_1.themes.light;
+        // Apply selected theme variables
         Object.entries(selectedTheme).forEach(function (_a) {
             var key = _a[0], value = _a[1];
             root.style.setProperty(key, value);
         });
+        // Apply darkened RGBA versions (for dark themes only)
+        if (theme === 'dark' || theme === 'dark-blue') {
+            themes_1.colorVarsToDarken.forEach(function (varName) {
+                var original = getComputedStyle(root).getPropertyValue(varName).trim();
+                if (original) {
+                    var darkAmount = (0, darkenUtils_1.getDarkenAmount)(varName);
+                    var rgba = (0, darkenUtils_1.darkenToRgba)(original, darkAmount, 0.9);
+                    root.style.setProperty(varName, rgba);
+                }
+            });
+        }
     }, [theme]);
     return (react_1.default.createElement("div", { className: "theme-".concat(theme), style: {
             backgroundColor: 'var(--page-bg)',

package/ui/theme/theme.tsx

@@ -1,34 +1,34 @@
 'use client';
 import React, { useEffect } from 'react';
+import { colorVarsToDarken, themes } from './themes';
+import { getDarkenAmount, darkenToRgba } from './darkenUtils';
 
 interface ThemeProviderProps {
-  theme: 'light' | 'dark';
+  theme: 'light' | 'dark' | 'dark-blue' | 'light-gray';
   children: React.ReactNode;
 }
 
 const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {
   useEffect(() => {
     const root = document.documentElement;
+    const selectedTheme = themes[theme] || themes.light;
 
-    const lightTheme = {
-      '--page-bg': '#FFFFFF',
-      '--text-color': '#000000',
-    };
-
-    const darkTheme = {
-      '--page-bg': '#121212',
-      '--text-color': '#FFFFFF',
-      '--raiseThemes': 'rgba(32, 32, 32, 0.8)',
-      '--raiseOpaque': 'rgba(32, 32, 32, 0.94)',
-      '--borderColor': '#333333',
-      '--lighter': '#101010',
-    };
-
-    const selectedTheme = theme === 'dark' ? darkTheme : lightTheme;
-
+    // Apply selected theme variables
     Object.entries(selectedTheme).forEach(([key, value]) => {
       root.style.setProperty(key, value);
     });
+
+    // Apply darkened RGBA versions (for dark themes only)
+    if (theme === 'dark' || theme === 'dark-blue') {
+      colorVarsToDarken.forEach((varName) => {
+        const original = getComputedStyle(root).getPropertyValue(varName).trim();
+        if (original) {
+          const darkAmount = getDarkenAmount(varName);
+          const rgba = darkenToRgba(original, darkAmount, 0.9);
+          root.style.setProperty(varName, rgba);
+        }
+      });
+    }
   }, [theme]);
 
   return (

package/ui/theme/themes.d.ts

@@ -0,0 +1,106 @@
+export declare const colorVarsToDarken: string[];
+export declare const darkerDefaults: {
+    '--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;
+};
+export declare const themes: {
+    light: {
+        '--page-bg': string;
+        '--text-color': string;
+    };
+    dark: {
+        '--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;
+        '--raiseThemes': string;
+        '--raiseOpaque': string;
+        '--borderColor': string;
+        '--lighter': string;
+        '--linkColor': string;
+        '--cardBg': string;
+        '--card': string;
+    };
+    'dark-blue': {
+        '--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;
+        '--lighter': string;
+        '--linkColor': string;
+        '--accent': string;
+        '--cardBg': string;
+        '--card': string;
+    };
+    'light-gray': {
+        '--page-bg': string;
+        '--text-color': string;
+        '--text-muted': string;
+        '--raiseThemes': string;
+        '--raiseOpaque': string;
+        '--borderColor': string;
+        '--lighter': string;
+        '--linkColor': string;
+        '--accent': string;
+        '--cardBg': string;
+        '--card': string;
+    };
+};

package/ui/theme/themes.js

@@ -0,0 +1,63 @@
+"use strict";
+// components/ThemeProvider/themes.ts
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themes = exports.darkerDefaults = exports.colorVarsToDarken = void 0;
+exports.colorVarsToDarken = [
+    '--primary50', '--primary100', '--primary200', '--primary300', '--primary400',
+    '--secondary50', '--secondary100', '--secondary200', '--secondary300', '--secondary400',
+    '--accent50', '--accent100', '--accent200', '--accent300', '--accent400',
+];
+exports.darkerDefaults = {
+    '--success50': '#c1dbc7',
+    '--success100': '#b0d1b3',
+    '--success200': '#92bb97',
+    '--success300': '#6aa375',
+    '--success400': '#3f864e',
+    '--warning50': '#e6dcd4',
+    '--warning100': '#e6d1bb',
+    '--warning200': '#e2b783',
+    '--warning300': '#e09b59',
+    '--warning400': '#d57627',
+    '--info50': '#c1d3e6',
+    '--info100': '#b3c8e0',
+    '--info200': '#91b3d4',
+    '--info300': '#5a9bcb',
+    '--info400': '#2f85c3',
+    '--error50': '#e6cfcf',
+    '--error100': '#e6bebe',
+    '--error200': '#e29e9e',
+    '--error300': '#da7373',
+    '--error400': '#cc4646',
+};
+exports.themes = {
+    light: {
+        '--page-bg': '#FFFFFF',
+        '--text-color': '#000000',
+    },
+    dark: __assign({ '--page-bg': '#1E1E1E', '--text-color': '#FFFFFF', '--raiseThemes': 'rgba(32, 32, 32, 0.5)', '--raiseOpaque': 'rgba(32, 32, 32, 0.8)', '--borderColor': '#4a4a4a', '--lighter': '#2a2a2a', '--linkColor': '#9ab', '--cardBg': '#1e1e1e', '--card': "4px 4px 6px #141414, -4px -4px 6px #272727" }, exports.darkerDefaults),
+    'dark-blue': __assign({ '--page-bg': '#0d1b2a', '--text-color': '#f0f4f8', '--text-muted': '#a9bcd0', '--raiseThemes': 'rgba(13, 27, 42, 0.5)', '--raiseOpaque': 'rgba(13, 27, 42, 0.8)', '--borderColor': '#1e3249', '--lighter': '#1b2c3f', '--linkColor': '#56ccf2', '--accent': '#66d9ef', '--cardBg': '#0d1b2a', '--card': "4px 4px 6px #08121d, -4px -4px 6px #15273b" }, exports.darkerDefaults),
+    'light-gray': {
+        '--page-bg': '#e8e8e8',
+        '--text-color': '#2a2a2a',
+        '--text-muted': '#777777',
+        '--raiseThemes': 'rgba(255, 255, 255, 0.6)',
+        '--raiseOpaque': 'rgba(255, 255, 255, 0.94)',
+        '--borderColor': '#d0d0d0',
+        '--lighter': '#f4f4f4',
+        '--linkColor': '#202020',
+        '--accent': '#4a90e2',
+        '--cardBg': '#e8e8e8',
+        '--card': "8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff",
+    }
+};

package/ui/theme/themes.ts

@@ -0,0 +1,79 @@
+// components/ThemeProvider/themes.ts
+
+export const colorVarsToDarken = [
+  '--primary50', '--primary100', '--primary200', '--primary300', '--primary400',
+  '--secondary50', '--secondary100', '--secondary200', '--secondary300', '--secondary400',
+  '--accent50', '--accent100', '--accent200', '--accent300', '--accent400',
+];
+
+export const darkerDefaults = {
+  '--success50': '#c1dbc7',
+  '--success100': '#b0d1b3',
+  '--success200': '#92bb97',
+  '--success300': '#6aa375',
+  '--success400': '#3f864e',
+
+  '--warning50': '#e6dcd4',
+  '--warning100': '#e6d1bb',
+  '--warning200': '#e2b783',
+  '--warning300': '#e09b59',
+  '--warning400': '#d57627',
+
+  '--info50': '#c1d3e6',
+  '--info100': '#b3c8e0',
+  '--info200': '#91b3d4',
+  '--info300': '#5a9bcb',
+  '--info400': '#2f85c3',
+
+  '--error50': '#e6cfcf',
+  '--error100': '#e6bebe',
+  '--error200': '#e29e9e',
+  '--error300': '#da7373',
+  '--error400': '#cc4646',
+};
+
+export const themes = {
+  light: {
+    '--page-bg': '#FFFFFF',
+    '--text-color': '#000000',
+  },
+  dark: {
+    '--page-bg': '#1E1E1E',
+    '--text-color': '#FFFFFF',
+    '--raiseThemes': 'rgba(32, 32, 32, 0.5)',
+    '--raiseOpaque': 'rgba(32, 32, 32, 0.8)',
+    '--borderColor': '#4a4a4a',
+    '--lighter': '#2a2a2a',
+    '--linkColor': '#9ab',
+    '--cardBg': '#1e1e1e',
+    '--card': `4px 4px 6px #141414, -4px -4px 6px #272727`,
+    ...darkerDefaults,
+  },
+  'dark-blue': {
+    '--page-bg': '#0d1b2a',
+    '--text-color': '#f0f4f8',
+    '--text-muted': '#a9bcd0',
+    '--raiseThemes': 'rgba(13, 27, 42, 0.5)',
+    '--raiseOpaque': 'rgba(13, 27, 42, 0.8)',
+    '--borderColor': '#1e3249',
+    '--lighter': '#1b2c3f',
+    '--linkColor': '#56ccf2',
+    '--accent': '#66d9ef',
+    '--cardBg': '#0d1b2a',
+    '--card': `4px 4px 6px #08121d, -4px -4px 6px #15273b`,
+    ...darkerDefaults,
+  },
+  'light-gray': {
+    '--page-bg': '#e8e8e8',
+    '--text-color': '#2a2a2a',
+    '--text-muted': '#777777',
+    '--raiseThemes': 'rgba(255, 255, 255, 0.6)',
+    '--raiseOpaque': 'rgba(255, 255, 255, 0.94)',
+    '--borderColor': '#d0d0d0',
+    '--lighter': '#f4f4f4',
+    '--linkColor': '#202020',
+    '--accent': '#4a90e2',
+    '--cardBg': '#e8e8e8',
+    '--card': `8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff`,
+  }
+};

package/ui/video/Video.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface VideoProps {
+    src: string;
+    poster?: string;
+    onDuration?: (duration: number) => void;
+    isPause?: boolean;
+    className?: string;
+    autoPlay?: boolean;
+}
+export default function Video({ src, poster, onDuration, isPause, className, autoPlay, ...rest }: VideoProps): React.JSX.Element;
+export {};