@enderfall/ui 0.2.0 → 0.2.5

package/dist/components/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/components/Dropdown.js

@@ -31,7 +31,9 @@ export const Dropdown = (props) => {
         return (_jsx("div", { className: "ef-menu-bar", children: props.menus.map((menu) => (_jsxs("div", { className: "ef-menu-group", "data-open": props.menuOpen === menu.id ? "true" : "false", onMouseEnter: () => {
                     cancelScheduledClose();
                     props.onOpenMenu(menu.id);
-                }, onMouseLeave: scheduleClose, children: [_jsx("button", { className: "ef-menu-button", type: "button", "data-open": props.menuOpen === menu.id ? "true" : "false", children: menu.label }), props.menuOpen === menu.id ? (_jsx("div", { className: "ef-menu-popover", "data-open": "true", onMouseEnter: () => {
+                }, onMouseLeave: scheduleClose, children: [_jsx(Button, { className: ["ef-menu-button", "ef-tab", props.menuOpen === menu.id ? "is-active" : ""]
+                            .filter(Boolean)
+                            .join(" "), type: "button", variant: "tab", subvariant: "default", "data-open": props.menuOpen === menu.id ? "true" : "false", children: menu.label }), props.menuOpen === menu.id ? (_jsx("div", { className: "ef-menu-popover", "data-open": "true", onMouseEnter: () => {
                             cancelScheduledClose();
                             props.onOpenMenu(menu.id);
                         }, onMouseLeave: scheduleClose, children: menu.content })) : null] }, menu.id))) }));

package/dist/components/MainHeader.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import { type HeaderMenuItem } from "./Dropdown";
+import { type ReactNode } from "react";
+import type { HeaderMenuItem } from "./Dropdown";
 type MainHeaderProps = {
     title?: string;
     subtitle?: string;

package/dist/components/MainHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MainHeader.d.ts","sourceRoot":"","sources":["../../src/components/MainHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,YAAY,CAAC;AAG3D,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,kFASxB,eAAe,4CA0BjB,CAAC"}
+{"version":3,"file":"MainHeader.d.ts","sourceRoot":"","sources":["../../src/components/MainHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIjD,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,kFASxB,eAAe,4CA2EjB,CAAC"}

package/dist/components/MainHeader.js

@@ -1,6 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dropdown } from "./Dropdown";
+import { useRef } from "react";
+import { Button } from "./Button";
 import { Panel } from "./Panel";
 export const MainHeader = ({ title = "Enderfall", subtitle = "Galaxy tools for creators", logoSrc, menus, menuOpen, onOpenMenu, onCloseMenu, actions, }) => {
-    return (_jsxs(Panel, { variant: "header", borderWidth: 2, className: "ef-main-header", children: [_jsxs("div", { className: "ef-header-left", children: [_jsxs("div", { className: "ef-brand", children: [logoSrc ? (_jsx("img", { src: logoSrc, alt: title, className: "ef-logo" })) : (_jsx("div", { className: "ef-logo-fallback", children: "E" })), _jsxs("div", { children: [_jsx("div", { className: "ef-brand-name", children: title }), subtitle ? _jsx("div", { className: "ef-tagline", children: subtitle }) : null] })] }), _jsx(Dropdown, { variant: "header", menus: menus, menuOpen: menuOpen, onOpenMenu: onOpenMenu, onCloseMenu: onCloseMenu })] }), _jsx("div", { className: "ef-header-actions", children: actions })] }));
+    const closeTimerRef = useRef(null);
+    const closeDelayMs = 160;
+    const cancelScheduledClose = () => {
+        if (closeTimerRef.current !== null) {
+            window.clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    };
+    const scheduleClose = () => {
+        cancelScheduledClose();
+        closeTimerRef.current = window.setTimeout(() => {
+            onCloseMenu();
+        }, closeDelayMs);
+    };
+    return (_jsxs(Panel, { variant: "header", borderWidth: 2, className: "ef-main-header", children: [_jsxs("div", { className: "ef-header-left", children: [_jsxs("div", { className: "ef-brand", children: [logoSrc ? (_jsx("img", { src: logoSrc, alt: title, className: "ef-logo" })) : (_jsx("div", { className: "ef-logo-fallback", children: "E" })), _jsxs("div", { children: [_jsx("div", { className: "ef-brand-name", children: title }), subtitle ? _jsx("div", { className: "ef-tagline", children: subtitle }) : null] })] }), _jsx("div", { className: "ef-menu-bar", children: menus.map((menu) => (_jsxs("div", { className: "ef-menu-group", "data-open": menuOpen === menu.id ? "true" : "false", onMouseEnter: () => {
+                                cancelScheduledClose();
+                                onOpenMenu(menu.id);
+                            }, onMouseLeave: scheduleClose, children: [_jsx(Button, { className: ["ef-menu-button", "ef-tab", menuOpen === menu.id ? "is-active" : ""]
+                                        .filter(Boolean)
+                                        .join(" "), type: "button", variant: "tab", subvariant: "default", "data-open": menuOpen === menu.id ? "true" : "false", children: menu.label }), menuOpen === menu.id ? (_jsx("div", { className: "ef-menu-popover", "data-open": "true", onMouseEnter: () => {
+                                        cancelScheduledClose();
+                                        onOpenMenu(menu.id);
+                                    }, onMouseLeave: scheduleClose, children: menu.content })) : null] }, menu.id))) })] }), _jsx("div", { className: "ef-header-actions", children: actions })] }));
 };

package/dist/components/Tabs.js

@@ -5,7 +5,7 @@ export const Tabs = ({ tabs, activeTab, onChange, orientation = "horizontal", sh
     const active = tabs.find((tab) => tab.id === activeTab);
     return (_jsxs("div", { className: ["ef-tabs", isVertical ? "ef-tabs--vertical" : "", className].filter(Boolean).join(" "), children: [_jsx("div", { className: ["ef-tabs-list", isVertical ? "ef-tabs-list--vertical" : ""].filter(Boolean).join(" "), children: tabs.map((tab) => {
                     const isActive = tab.id === activeTab;
-                    return (_jsxs(Button, { variant: isActive ? "primary" : "tab", subvariant: isActive ? "glow" : "default", className: ["ef-tab", isVertical ? "ef-tab--vertical" : "", isActive ? "is-active" : ""]
+                    return (_jsxs(Button, { variant: "tab", subvariant: "default", className: ["ef-tab", isVertical ? "ef-tab--vertical" : "", isActive ? "is-active" : ""]
                             .filter(Boolean)
                             .join(" "), onClick: () => onChange(tab.id), children: [tab.icon ? _jsx("span", { className: "ef-tab-icon", children: tab.icon }) : null, _jsx("span", { className: "ef-tab-text", children: tab.label }), isVertical && isActive ? _jsx("span", { className: "ef-tab-active-indicator" }) : null] }, tab.id));
                 }) }), (active?.content || renderTabContent) && (_jsx("div", { className: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@enderfall/ui",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.2.5",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/Button.css

@@ -2,15 +2,26 @@
   padding: 10px 18px;
   border-radius: var(--ef-control-radius, 12px);
   font-weight: 600;
-  text-decoration: none;
+  text-decoration: none;
   text-align: center;
   border: 2px solid transparent;
   background:
     linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
     var(--ef-button-border) border-box;
-  color: var(--ef-button-text);
+  color: var(--ef-button-text);
   cursor: pointer;
   box-shadow: var(--shadow);
+  transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.ef-button:not(:disabled):hover {
+  box-shadow: var(--ef-button-hover-shadow, var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45)));
+  transform: var(--ef-button-hover-transform, translateY(-1px));
+}
+
+.ef-button:focus-visible {
+  box-shadow: var(--ef-button-focus-shadow, var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45)));
+  transform: var(--ef-button-hover-transform, translateY(-1px));
 }
 
 .ef-button--glow {

package/src/components/Dropdown.tsx

@@ -218,7 +218,7 @@ export const Dropdown = (props: DropdownProps) => {
             onMouseLeave={scheduleClose}
           >
             <Button
-              className={["ef-menu-button", props.menuOpen === menu.id ? "is-active" : ""]
+              className={["ef-menu-button", "ef-tab", props.menuOpen === menu.id ? "is-active" : ""]
                 .filter(Boolean)
                 .join(" ")}
               type="button"

package/src/components/HeaderMenu.css

@@ -14,10 +14,45 @@
 }
 
 .ef-menu-button {
+  color: var(--ef-nav-text);
+  text-decoration: none;
   font-size: 1rem;
+  font-weight: 600;
+  transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 8px 18px;
+  letter-spacing: var(--ef-nav-letter-spacing, 0.08em);
+  padding: var(--ef-nav-padding-y, 8px) var(--ef-nav-padding-x, 18px);
+  border-radius: var(--ef-nav-radius, 8px);
+  border: 2px solid transparent;
+  background: var(--ef-nav-surface);
+  box-shadow: var(--ef-nav-shadow);
+  cursor: pointer;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.ef-menu-button:hover {
+  color: var(--ef-nav-text-hover);
+  box-shadow: var(--ef-nav-shadow-hover);
+  transform: var(--ef-nav-transform-hover, translateY(-1px));
+}
+
+.ef-menu-button:focus-visible {
+  color: var(--ef-nav-text-hover);
+  box-shadow: var(--ef-nav-shadow-focus);
+  transform: var(--ef-nav-transform-hover, translateY(-1px));
+}
+
+.ef-menu-button.is-active,
+.ef-menu-button[data-open="true"] {
+  background:
+    linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
+    var(--ef-nav-border) border-box;
+  color: var(--ef-nav-text-active);
+  box-shadow: var(--ef-nav-shadow-active);
 }
 
 .ef-menu-popover {

package/src/components/MainHeader.tsx

@@ -1,6 +1,7 @@
-import type { ReactNode } from "react";
-import { Dropdown, type HeaderMenuItem } from "./Dropdown";
-import { Panel } from "./Panel";
+import { useRef, type ReactNode } from "react";
+import type { HeaderMenuItem } from "./Dropdown";
+import { Button } from "./Button";
+import { Panel } from "./Panel";
 
 type MainHeaderProps = {
   title?: string;
@@ -13,19 +14,36 @@ type MainHeaderProps = {
   actions?: ReactNode;
 };
 
-export const MainHeader = ({
+export const MainHeader = ({
   title = "Enderfall",
   subtitle = "Galaxy tools for creators",
   logoSrc,
   menus,
   menuOpen,
   onOpenMenu,
-  onCloseMenu,
-  actions,
-}: MainHeaderProps) => {
-  return (
+  onCloseMenu,
+  actions,
+}: MainHeaderProps) => {
+  const closeTimerRef = useRef<number | null>(null);
+  const closeDelayMs = 160;
+
+  const cancelScheduledClose = () => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  };
+
+  const scheduleClose = () => {
+    cancelScheduledClose();
+    closeTimerRef.current = window.setTimeout(() => {
+      onCloseMenu();
+    }, closeDelayMs);
+  };
+
+  return (
     <Panel variant="header" borderWidth={2} className="ef-main-header">
-      <div className="ef-header-left">
+      <div className="ef-header-left">
         <div className="ef-brand">
           {logoSrc ? (
             <img src={logoSrc} alt={title} className="ef-logo" />
@@ -34,18 +52,50 @@ export const MainHeader = ({
           )}
           <div>
             <div className="ef-brand-name">{title}</div>
-            {subtitle ? <div className="ef-tagline">{subtitle}</div> : null}
-          </div>
-        </div>
-        <Dropdown
-          variant="header"
-          menus={menus}
-          menuOpen={menuOpen}
-          onOpenMenu={onOpenMenu}
-          onCloseMenu={onCloseMenu}
-        />
-      </div>
-      <div className="ef-header-actions">{actions}</div>
-    </Panel>
-  );
-};
+            {subtitle ? <div className="ef-tagline">{subtitle}</div> : null}
+          </div>
+        </div>
+        <div className="ef-menu-bar">
+          {menus.map((menu) => (
+            <div
+              key={menu.id}
+              className="ef-menu-group"
+              data-open={menuOpen === menu.id ? "true" : "false"}
+              onMouseEnter={() => {
+                cancelScheduledClose();
+                onOpenMenu(menu.id);
+              }}
+              onMouseLeave={scheduleClose}
+            >
+              <Button
+                className={["ef-menu-button", "ef-tab", menuOpen === menu.id ? "is-active" : ""]
+                  .filter(Boolean)
+                  .join(" ")}
+                type="button"
+                variant="tab"
+                subvariant="default"
+                data-open={menuOpen === menu.id ? "true" : "false"}
+              >
+                {menu.label}
+              </Button>
+              {menuOpen === menu.id ? (
+                <div
+                  className="ef-menu-popover"
+                  data-open="true"
+                  onMouseEnter={() => {
+                    cancelScheduledClose();
+                    onOpenMenu(menu.id);
+                  }}
+                  onMouseLeave={scheduleClose}
+                >
+                  {menu.content}
+                </div>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="ef-header-actions">{actions}</div>
+    </Panel>
+  );
+};

package/src/components/Toggle.css

@@ -5,10 +5,13 @@
   cursor: pointer;
   color: var(--text-strong);
   font-weight: 600;
+  position: relative;
 }
 
 .ef-toggle-input {
   position: absolute;
+  top: 0;
+  left: 0;
   opacity: 0;
   width: 1px;
   height: 1px;

package/src/variables.css

@@ -17,6 +17,9 @@
   --ef-button-border-soft: var(--ef-border-gradient-soft);
   --ef-button-text: var(--text-strong);
   --ef-button-glow-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
+  --ef-button-hover-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
+  --ef-button-focus-shadow: 0 0 20px rgba(124, 77, 255, 0.45);
+  --ef-button-hover-transform: translateY(-1px);
   --ef-button-locked-bg: rgba(15, 18, 28, 0.7);
   --ef-button-locked-border: rgba(255, 255, 255, 0.15);
   --ef-button-locked-text: rgba(255, 255, 255, 0.7);
@@ -148,6 +151,9 @@
   );
   --ef-button-text: #1d232a;
   --ef-button-glow-shadow: 0 0 20px rgba(124, 77, 255, 0.32);
+  --ef-button-hover-shadow: 0 0 14px rgba(31, 122, 140, 0.18);
+  --ef-button-focus-shadow: 0 0 18px rgba(31, 122, 140, 0.24);
+  --ef-button-hover-transform: translateY(-1px);
   --ef-button-locked-bg: rgba(255, 255, 255, 0.8);
   --ef-button-locked-border: rgba(24, 32, 40, 0.18);
   --ef-button-locked-text: rgba(24, 32, 40, 0.6);
@@ -264,6 +270,8 @@
   );
   --ef-button-border: var(--ef-border-gradient);
   --ef-button-border-soft: var(--ef-border-gradient-soft);
+  --ef-button-hover-shadow: 0 0 0 1px rgba(24, 32, 40, 0.2);
+  --ef-button-focus-shadow: 0 0 0 2px rgba(24, 32, 40, 0.22);
   --ef-input-border: var(--ef-border-gradient);
   --ef-stacked-image-gradient: linear-gradient(135deg, rgba(24, 32, 40, 0.08), rgba(24, 32, 40, 0.15));
   --ef-nav-border: var(--ef-border-gradient);
@@ -272,6 +280,11 @@
   --ef-nav-shadow-active: 0 0 0 1px rgba(24, 32, 40, 0.3);
   --ef-menu-item-shadow: none;
   --ef-menu-item-shadow-hover: 0 0 0 1px rgba(24, 32, 40, 0.2);
+  --ef-tabs-surface: #ffffff;
+  --ef-tabs-border: linear-gradient(135deg, rgba(24, 32, 40, 0.18), rgba(24, 32, 40, 0.18));
+  --ef-tabs-content-surface: #ffffff;
+  --ef-tabs-content-border: linear-gradient(135deg, rgba(24, 32, 40, 0.14), rgba(24, 32, 40, 0.14));
+  --ef-tabs-indicator: linear-gradient(180deg, rgba(24, 32, 40, 0.82), rgba(24, 32, 40, 0.82));
 }
 
 :root[data-theme="plain-dark"] {
@@ -288,6 +301,8 @@
   );
   --ef-button-border: var(--ef-border-gradient);
   --ef-button-border-soft: var(--ef-border-gradient-soft);
+  --ef-button-hover-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
+  --ef-button-focus-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
   --ef-input-border: var(--ef-border-gradient);
   --menu-line: var(--line);
   --menu-bg-soft: rgba(255, 255, 255, 0.06);
@@ -302,6 +317,11 @@
   --ef-nav-shadow-active: 0 0 0 1px rgba(255, 255, 255, 0.3);
   --ef-menu-item-shadow: none;
   --ef-menu-item-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.2);
+  --ef-tabs-surface: #0b0c1a;
+  --ef-tabs-border: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24));
+  --ef-tabs-content-surface: #0b0c1a;
+  --ef-tabs-content-border: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
+  --ef-tabs-indicator: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92));
 }
 
 
@@ -335,6 +355,9 @@
   --ef-button-border-soft: var(--ef-border-gradient-soft);
   --ef-button-text: #f6eaf2;
   --ef-button-glow-shadow: 0 0 24px rgba(226, 85, 161, 0.42);
+  --ef-button-hover-shadow: 0 0 18px rgba(226, 85, 161, 0.3);
+  --ef-button-focus-shadow: 0 0 22px rgba(226, 85, 161, 0.38);
+  --ef-button-hover-transform: translateY(-1px);
   --ef-nav-text: rgba(246, 234, 242, 0.78);
   --ef-nav-text-hover: #f6eaf2;
   --ef-nav-text-active: #f6eaf2;
@@ -420,6 +443,31 @@
   --ef-toggle-check-radius: 2px;
 }
 
+/*
+  Optional "galaxy-light" surface mode (when host app toggles body class).
+  Keeps light readability while preserving galaxy accent treatment for nav/tabs.
+*/
+body.ef-galaxy-light {
+  --ef-nav-text: rgba(29, 35, 42, 0.82);
+  --ef-nav-text-hover: #1d232a;
+  --ef-nav-text-active: #1d232a;
+  --ef-nav-surface: rgba(255, 255, 255, 0.86);
+  --ef-nav-border: linear-gradient(135deg, rgba(0, 229, 255, 0.72), rgba(124, 77, 255, 0.72), rgba(255, 77, 210, 0.72), rgba(255, 183, 77, 0.72));
+  --ef-nav-shadow: none;
+  --ef-nav-shadow-hover: 0 0 16px rgba(124, 77, 255, 0.24);
+  --ef-nav-shadow-focus: 0 0 20px rgba(124, 77, 255, 0.28);
+  --ef-nav-shadow-active: 0 0 20px rgba(124, 77, 255, 0.3);
+  --ef-button-hover-shadow: 0 0 14px rgba(124, 77, 255, 0.22);
+  --ef-button-focus-shadow: 0 0 18px rgba(124, 77, 255, 0.28);
+  --ef-menu-item-shadow: 0 0 10px rgba(124, 77, 255, 0.15);
+  --ef-menu-item-shadow-hover: 0 0 14px rgba(124, 77, 255, 0.2);
+  --ef-tabs-surface: rgba(255, 255, 255, 0.92);
+  --ef-tabs-border: linear-gradient(135deg, rgba(0, 229, 255, 0.52), rgba(124, 77, 255, 0.52), rgba(255, 77, 210, 0.52));
+  --ef-tabs-content-surface: rgba(255, 255, 255, 0.94);
+  --ef-tabs-content-border: linear-gradient(135deg, rgba(0, 229, 255, 0.36), rgba(124, 77, 255, 0.36), rgba(255, 77, 210, 0.36));
+  --ef-tabs-indicator: linear-gradient(180deg, #00a0bc, #7c4dff, #c24aa2);
+}
+
 :root[data-theme="system"] {
   color-scheme: light dark;
 }
@@ -434,10 +482,15 @@
     --ef-nav-shadow-hover: 0 0 16px rgba(31, 122, 140, 0.2);
     --ef-nav-shadow-focus: 0 0 20px rgba(31, 122, 140, 0.24);
     --ef-nav-shadow-active: 0 0 20px rgba(31, 122, 140, 0.26);
+    --ef-button-hover-shadow: 0 0 14px rgba(31, 122, 140, 0.18);
+    --ef-button-focus-shadow: 0 0 18px rgba(31, 122, 140, 0.24);
     --ef-menu-item-shadow: 0 0 10px rgba(31, 122, 140, 0.12);
     --ef-menu-item-shadow-hover: 0 0 14px rgba(31, 122, 140, 0.18);
     --ef-tabs-surface: #ffffff;
+    --ef-tabs-border: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(124, 77, 255, 0.35), rgba(255, 77, 210, 0.35));
     --ef-tabs-content-surface: #ffffff;
+    --ef-tabs-content-border: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(124, 77, 255, 0.2), rgba(255, 77, 210, 0.2));
+    --ef-tabs-indicator: linear-gradient(180deg, #1f7a8c, #7c4dff, #f29f45);
   }
 }