funuicss 2.5.14 → 2.6.1

package/ui/sidebar/SideBar.js

@@ -1,15 +1,5 @@
 "use strict";
-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);
-};
+'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);
@@ -43,44 +33,99 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SideBar;
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
+var Text_1 = __importDefault(require("../text/Text"));
+var navigation_1 = require("next/navigation");
 function SideBar(_a) {
-    var funcss = _a.funcss, position = _a.position, glassy = _a.glassy, header = _a.header, open = _a.open, content = _a.content, close = _a.close, footer = _a.footer, fixed = _a.fixed, rest = __rest(_a, ["funcss", "position", "glassy", "header", "open", "content", "close", "footer", "fixed"]);
-    if (open) {
-        return (React.createElement("aside", __assign({ className: "fun_side_bar_wrapper ".concat(fixed ? "fixed_sidebar" : "", " ").concat(glassy ? "glassy" : "") }, rest),
-            React.createElement("div", { className: "\n            fun_sidebar_content ".concat(funcss || "", " ").concat(position || "", " \n            ") },
-                React.createElement(RowFlex_1.default, { justify: 'space-between' },
-                    header &&
-                        React.createElement("div", { className: "col fit" },
-                            " ",
-                            header,
-                            " "),
-                    close && React.createElement("div", { className: "close_sidebar" },
-                        close,
-                        " ")),
-                content &&
-                    React.createElement("div", null, content),
-                footer &&
-                    React.createElement("div", null, footer))));
-    }
-    else {
-        return React.createElement(React.Fragment, null);
-    }
+    var _b;
+    var _c = _a.funcss, funcss = _c === void 0 ? '' : _c, _d = _a.position, position = _d === void 0 ? 'left' : _d, _e = _a.open, open = _e === void 0 ? false : _e, header = _a.header, content = _a.content, footer = _a.footer, _f = _a.top, top = _f === void 0 ? 0 : _f, _g = _a.sidebarWidth, sidebarWidth = _g === void 0 ? 250 : _g, _h = _a.sidebarCss, sidebarCss = _h === void 0 ? '' : _h, _j = _a.bodyCss, bodyCss = _j === void 0 ? '' : _j, _k = _a.links, links = _k === void 0 ? [] : _k, children = _a.children, onClose = _a.onClose;
+    var _l = (0, react_1.useState)(false), isMobile = _l[0], setIsMobile = _l[1];
+    var _m = (0, react_1.useState)(open), internalOpen = _m[0], setInternalOpen = _m[1];
+    var _o = (0, react_1.useState)('0px'), appBarHeight = _o[0], setAppBarHeight = _o[1];
+    var pathname = (0, navigation_1.usePathname)();
+    var sidebarRef = (0, react_1.useRef)(null);
+    var updateIsMobile = (0, react_1.useCallback)(function () {
+        setIsMobile(window.innerWidth <= 992);
+    }, []);
+    (0, react_1.useEffect)(function () {
+        updateIsMobile();
+        window.addEventListener('resize', updateIsMobile);
+        return function () { return window.removeEventListener('resize', updateIsMobile); };
+    }, [updateIsMobile]);
+    // Sync internal state with prop changes
+    (0, react_1.useEffect)(function () {
+        setInternalOpen(open);
+    }, [open]);
+    (0, react_1.useEffect)(function () {
+        var appBar = document.querySelector('#appBar');
+        if (appBar) {
+            setAppBarHeight("".concat(appBar.offsetHeight, "px"));
+        }
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (!isMobile || !internalOpen)
+            return;
+        var handleOutsideClick = function (e) {
+            if (sidebarRef.current && !sidebarRef.current.contains(e.target)) {
+                handleClose();
+            }
+        };
+        document.addEventListener('mousedown', handleOutsideClick);
+        document.addEventListener('touchstart', handleOutsideClick);
+        return function () {
+            document.removeEventListener('mousedown', handleOutsideClick);
+            document.removeEventListener('touchstart', handleOutsideClick);
+        };
+    }, [isMobile, internalOpen]);
+    var handleClose = function () {
+        setInternalOpen(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    var groupedLinks = links.reduce(function (acc, link) {
+        acc[link.section] = acc[link.section] || [];
+        acc[link.section].push(link);
+        return acc;
+    }, {});
+    var isOverlay = isMobile;
+    return (react_1.default.createElement("div", { className: "sidebar-container ".concat(isOverlay ? '' : 'with-content') },
+        internalOpen && (react_1.default.createElement("aside", { role: "complementary", ref: sidebarRef, className: "sidebar ".concat(funcss, " ").concat(sidebarCss, "  ").concat(isOverlay ? 'nav_overlay' : ''), style: (_b = {
+                    width: isOverlay ? '100%' : "".concat(sidebarWidth, "px"),
+                    height: "calc(100vh - ".concat(appBarHeight || top || '0px', ")"),
+                    position: 'fixed',
+                    top: appBarHeight || top
+                },
+                _b[position] = 0,
+                _b.padding = '1rem',
+                _b) },
+            react_1.default.createElement(RowFlex_1.default, { justify: "space-between", funcss: "pl-2 pr-2" }, header && react_1.default.createElement("div", null, header)),
+            react_1.default.createElement("section", { className: "sidebar-body mt-3" },
+                links.length > 0 && (react_1.default.createElement("nav", { className: "sidebar-links" }, Object.entries(groupedLinks).map(function (_a) {
+                    var section = _a[0], sectionLinks = _a[1];
+                    return (react_1.default.createElement("div", { key: section, className: "sidebar-section mb-2 bt pt-2 pb-2" },
+                        react_1.default.createElement(Text_1.default, { size: "sm", funcss: "opacity-5 p-1 pl-2 pr-2" }, section),
+                        sectionLinks.map(function (link) {
+                            var isActive = pathname === link.uri;
+                            return (react_1.default.createElement("a", { onClick: handleClose, key: link.uri, href: link.uri },
+                                react_1.default.createElement("div", { className: "p-1 pl-2 pr-2 sidebar-link  ".concat(isActive ? 'primary50 outline-primary200' : 'hoverable') },
+                                    react_1.default.createElement("span", { style: { lineHeight: 0 } }, link.icon),
+                                    react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
+                        })));
+                }))),
+                content),
+            footer && react_1.default.createElement("footer", { className: "sidebar-footer mt-2" }, footer))),
+        react_1.default.createElement("main", { className: "main-content ".concat(bodyCss), style: {
+                flex: 1,
+                marginLeft: position === 'left' && !isOverlay && internalOpen ? "".concat(sidebarWidth, "px") : 0,
+                marginRight: position === 'right' && !isOverlay && internalOpen ? "".concat(sidebarWidth, "px") : 0,
+                overflowY: 'auto',
+                height: '100vh',
+                paddingTop: appBarHeight || top,
+                transition: 'margin 0.3s ease',
+            } }, children)));
 }

package/ui/sidebar/SideBar.tsx

@@ -1,62 +1,189 @@
-import { ReactNode, useState, useEffect } from 'react';
-import * as React from 'react'
+'use client';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  ReactNode,
+  useCallback,
+} from 'react';
 import RowFlex from '../specials/RowFlex';
+import Text from '../text/Text';
+import { usePathname } from 'next/navigation';
+import { PiX } from 'react-icons/pi';
 
+interface SideBarLink {
+  uri: string;
+  icon: React.ReactNode;
+  text: string;
+  section: string;
+}
 
-interface FunLoaderProps {
+interface SideBarProps {
   funcss?: string;
-  position?: "left" | "right";
-  glassy?: boolean;
-  open?:boolean
-  header?: ReactNode ,
-  content?: ReactNode ,
-  close?: ReactNode ,
-  footer?: ReactNode ,
-  fixed?:boolean
+  position?: 'left' | 'right';
+  open?: boolean;
+  header?: ReactNode;
+  content?: ReactNode;
+  footer?: ReactNode;
+  top?: number;
+  sidebarWidth?: number;
+  sidebarCss?: string;
+  bodyCss?: string;
+  links?: SideBarLink[];
+  children?: ReactNode;
+  onClose?: () => void;
 }
 
 export default function SideBar({
-  funcss,
-  position ,
-  glassy ,
-  header ,
-  open ,
-  content ,
-  close,
-  footer ,
-  fixed,
-  ...rest
-}: FunLoaderProps) {
-
-
-  
-  if(open){
-    return (
-        <aside className={`fun_side_bar_wrapper ${fixed ? "fixed_sidebar" : ""} ${glassy ? "glassy" : ""}`} {...rest}>
-            <div className={`
-            fun_sidebar_content ${funcss || ""} ${position || ""} 
-            `} 
-           >
-              <RowFlex justify='space-between'>
-             {
-                    header && 
-                    <div className="col fit"> {header} </div>
-                }
-              {close && <div className="close_sidebar">{close} </div>}
-
-              </RowFlex>
-                {
-                    content && 
-                    <div>{content}</div>
-                }
-                {
-                    footer && 
-                    <div>{footer}</div>
-                }
+  funcss = '',
+  position = 'left',
+  open = false,
+  header,
+  content,
+  footer,
+  top = 0,
+  sidebarWidth = 250,
+  sidebarCss = '',
+  bodyCss = '',
+  links = [],
+  children,
+  onClose,
+}: SideBarProps) {
+  const [isMobile, setIsMobile] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(open);
+  const [appBarHeight, setAppBarHeight] = useState('0px');
+  const pathname = usePathname();
+  const sidebarRef = useRef<HTMLDivElement>(null);
+
+  const updateIsMobile = useCallback(() => {
+    setIsMobile(window.innerWidth <= 992);
+    
+  }, []);
+
+  useEffect(() => {
+    updateIsMobile();
+    window.addEventListener('resize', updateIsMobile);
+    return () => window.removeEventListener('resize', updateIsMobile);
+  }, [updateIsMobile]);
+
+  // Sync internal state with prop changes
+  useEffect(() => {
+    setInternalOpen(open);
+  }, [open]);
+
+  useEffect(() => {
+    const appBar = document.querySelector('#appBar') as HTMLElement;
+    if (appBar) {
+      setAppBarHeight(`${appBar.offsetHeight}px`);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isMobile || !internalOpen) return;
+
+    const handleOutsideClick = (e: MouseEvent | TouchEvent) => {
+      if (sidebarRef.current && !sidebarRef.current.contains(e.target as Node)) {
+        handleClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+    document.addEventListener('touchstart', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+      document.removeEventListener('touchstart', handleOutsideClick);
+    };
+  }, [isMobile, internalOpen]);
+
+  const handleClose = () => {
+    setInternalOpen(false);
+    onClose?.();
+  };
+
+  const groupedLinks = links.reduce<Record<string, SideBarLink[]>>((acc, link) => {
+    acc[link.section] = acc[link.section] || [];
+    acc[link.section].push(link);
+    return acc;
+  }, {});
+
+  const isOverlay = isMobile;
+
+  return (
+    <div className={`sidebar-container ${isOverlay ? '' : 'with-content'}`}>
+      {internalOpen && (
+        <aside
+          role="complementary"
+          ref={sidebarRef}
+          className={`sidebar ${funcss} ${sidebarCss}  ${isOverlay ? 'nav_overlay' : ''}`}
+          style={{
+            width: isOverlay ? '100%' : `${sidebarWidth}px`,
+            height: `calc(100vh - ${appBarHeight || top || '0px'})`,
+            position: 'fixed',
+            top: appBarHeight || top,
+            [position]: 0,
+            padding: '1rem',
+          }}
+        >
+              {/* {isMobile && (
+              <div
+                className="hover-text-error pointer"
+                onClick={handleClose}
+                style={{ cursor: 'pointer' }}
+              >
+                {close || <PiX size={25}/>}
               </div>
+            )} */}
+
+          <RowFlex justify="space-between" funcss="pl-2 pr-2">
+            {header && <div>{header}</div>}
+        
+          </RowFlex>
+
+          <section className="sidebar-body mt-3">
+            {links.length > 0 && (
+              <nav className="sidebar-links">
+                {Object.entries(groupedLinks).map(([section, sectionLinks]) => (
+                  <div key={section} className="sidebar-section mb-2 bt pt-2 pb-2">
+                    <Text size="sm" funcss="opacity-5 p-1 pl-2 pr-2">{section}</Text>
+                    {sectionLinks.map(link => {
+                      const isActive = pathname === link.uri;
+                      return (
+                        <a    onClick={handleClose} key={link.uri} href={link.uri}>
+                          <div   className={`p-1 pl-2 pr-2 sidebar-link  ${
+                            isActive ? 'primary50 outline-primary200' : 'hoverable'
+                          }`}>
+                            <span style={{ lineHeight: 0 }}>{link.icon}</span>
+                            <Text text={link.text} size="sm" weight={400} />
+                          </div>
+                        </a>
+                      );
+                    })}
+                  </div>
+                ))}
+              </nav>
+            )}
+            {content}
+          </section>
+
+          {footer && <footer className="sidebar-footer mt-2">{footer}</footer>}
         </aside>
-      );
-  }else{
-    return <></>
-  }
-}
+      )}
+
+      <main
+        className={`main-content ${bodyCss}`}
+        style={{
+          flex: 1,
+          marginLeft: position === 'left' && !isOverlay && internalOpen ? `${sidebarWidth}px` : 0,
+          marginRight: position === 'right' && !isOverlay && internalOpen ? `${sidebarWidth}px` : 0,
+          overflowY: 'auto',
+          height: '100vh',
+          paddingTop: appBarHeight || top,
+          transition: 'margin 0.3s ease',
+        }}
+      >
+        {children}
+      </main>
+    </div>
+  );
+}

package/ui/specials/Circle.d.ts

@@ -8,8 +8,9 @@ interface Circle_Props extends HTMLProps<HTMLDivElement> {
     children?: ReactNode;
     hoverable?: boolean;
     raised?: boolean;
+    bordered?: boolean;
     key?: React.Key;
     onClick?: () => void;
 }
-export default function Circle({ size, funcss, bg, color, children, hoverable, raised, key, onClick, ...rest }: Circle_Props): React.JSX.Element;
+export default function Circle({ size, funcss, bg, color, children, hoverable, raised, key, onClick, bordered, ...rest }: Circle_Props): React.JSX.Element;
 export {};

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, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick"]);
-    return (React.createElement("div", __assign({ className: "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, _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: {
             width: "".concat(size + "rem" || '2.3rem'),
             height: "".concat(size + "rem" || '2.3rem'),
         }, key: key, onClick: onClick }, rest),

package/ui/specials/Circle.tsx

@@ -11,6 +11,7 @@ interface Circle_Props extends HTMLProps<HTMLDivElement> {
     children?: ReactNode;
     hoverable?: boolean;
     raised?:boolean 
+    bordered?:boolean 
     key?:React.Key
     onClick?: ()=> void
   }
@@ -19,18 +20,19 @@ interface Circle_Props extends HTMLProps<HTMLDivElement> {
 export default function Circle({
   size = 2,
   funcss,
-  bg,
+  bg = 'lighter',
   color,
   children,
   hoverable,
   raised ,
   key , 
   onClick ,
+  bordered,
   ...rest
 }: Circle_Props) {
   return (
       <div
-        className={`pointer avatar ${funcss || ''} ${`text-` + color?.trim() || ''} ${raised ? "raised" : ''} ${bg || 'lighter'} ${
+        className={` ${bordered ? "border" : ""}pointer avatar ${funcss || ''} ${`text-` + color?.trim() || ''} ${raised ? "raised" : ''} ${bg || 'lighter'} ${
           hoverable ? 'hoverable' : ''
         }`}
         style={{

package/ui/text/Text.d.ts

@@ -32,7 +32,7 @@ type TypographyProps = {
     fontFamily?: string;
     textShadow?: string;
     textAlign?: "left" | "center" | "right" | "justify";
-    opacity?: number;
+    opacity?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
     zIndex?: number;
     truncate?: number;
     transform?: string;

package/ui/text/Text.js

@@ -28,8 +28,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var pi_1 = require("react-icons/pi");
 var Text = function (_a) {
-    var id = _a.id, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, weight = _a.weight, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, truncate = _a.truncate, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, _b = _a.size, size = _b === void 0 ? 'base' : _b, // default
-    rest = __rest(_a, ["id", "bg", "color", "children", "hoverBg", "hoverText", "text", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "weight", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "truncate", "textShadow", "textAlign", "customStyles", "monospace", "quote", "size"]);
+    var id = _a.id, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, weight = _a.weight, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, truncate = _a.truncate, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, opacity = _a.opacity, _b = _a.size, size = _b === void 0 ? 'base' : _b, // default
+    rest = __rest(_a, ["id", "bg", "color", "children", "hoverBg", "hoverText", "text", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "weight", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "truncate", "textShadow", "textAlign", "customStyles", "monospace", "quote", "opacity", "size"]);
     var Tag = block ? 'div' : 'span';
     var sizeClass = "".concat(size === 'h1' ? "h1" :
         size === 'h2' ? "h2" :
@@ -66,6 +66,7 @@ var Text = function (_a) {
         uppercase ? 'uppercase' : '',
         lowercase ? 'lowercase' : '',
         capitalize ? 'capitalize' : '',
+        opacity ? 'opacity-' + opacity : '',
     ]
         .filter(Boolean)
         .join(' ');

package/ui/text/Text.tsx

@@ -34,7 +34,7 @@ type TypographyProps = {
   fontFamily?: string;
   textShadow?: string;
   textAlign?: "left" | "center" | "right" | "justify";
-  opacity?: number;
+  opacity?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   zIndex?: number;
   truncate?: number;
   transform?: string;
@@ -100,8 +100,8 @@ const Text: React.FC<TypographyProps> = ({
   customStyles,
   monospace,
   quote,
+  opacity,
   size = 'base', // default
-
   ...rest
 }) => {
   const Tag = block ? 'div' : 'span';
@@ -159,6 +159,7 @@ const mergedStyles: React.CSSProperties = {
     uppercase ? 'uppercase' : '',
     lowercase ? 'lowercase' : '',
     capitalize ? 'capitalize' : '',
+    opacity ? 'opacity-' + opacity : '',
   ]
     .filter(Boolean)
     .join(' ');

package/ui/theme/theme.js

@@ -42,14 +42,14 @@ var ThemeProvider = function (_a) {
         var lightTheme = {
             '--page-bg': '#FFFFFF',
             '--text-color': '#000000',
-            '--raiseThemes': '#FFFFFF',
         };
         var darkTheme = {
             '--page-bg': '#121212',
             '--text-color': '#FFFFFF',
-            '--raiseThemes': '#202020',
+            '--raiseThemes': 'rgba(32, 32, 32, 0.8)',
+            '--raiseOpaque': 'rgba(32, 32, 32, 0.94)',
             '--borderColor': '#333333',
-            '--lighter': '#202020',
+            '--lighter': '#101010',
         };
         var selectedTheme = theme === 'dark' ? darkTheme : lightTheme;
         Object.entries(selectedTheme).forEach(function (_a) {

package/ui/theme/theme.tsx

@@ -13,15 +13,15 @@ const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {
     const lightTheme = {
       '--page-bg': '#FFFFFF',
       '--text-color': '#000000',
-      '--raiseThemes': '#FFFFFF',
     };
 
     const darkTheme = {
       '--page-bg': '#121212',
       '--text-color': '#FFFFFF',
-      '--raiseThemes': '#202020',
+      '--raiseThemes': 'rgba(32, 32, 32, 0.8)',
+      '--raiseOpaque': 'rgba(32, 32, 32, 0.94)',
       '--borderColor': '#333333',
-      '--lighter': '#202020',
+      '--lighter': '#101010',
     };
 
     const selectedTheme = theme === 'dark' ? darkTheme : lightTheme;

package/utils/getCssVariable.d.ts

@@ -0,0 +1 @@
+export declare function getCssVariableValue(name: string): string;

package/utils/getCssVariable.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCssVariableValue = getCssVariableValue;
+function getCssVariableValue(name) {
+    // Convert name like "primary" into "--primary"
+    var variableName = name.startsWith('--') ? name : "--".concat(name);
+    // Get value from :root style
+    var rootStyles = getComputedStyle(document.documentElement);
+    return rootStyles.getPropertyValue(variableName).trim();
+}

package/utils/getCssVariable.tsx

@@ -0,0 +1,8 @@
+export function getCssVariableValue(name: string): string {
+  // Convert name like "primary" into "--primary"
+  const variableName = name.startsWith('--') ? name : `--${name}`;
+
+  // Get value from :root style
+  const rootStyles = getComputedStyle(document.documentElement);
+  return rootStyles.getPropertyValue(variableName).trim();
+}