@sckyzo/cosmos-react 0.0.3 → 0.1.0

package/CHANGELOG.md

@@ -5,6 +5,24 @@ All notable changes to `@sckyzo/cosmos-react` are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.0](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-react@0.0.3...@sckyzo/cosmos-react@0.1.0) (2026-10-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* **react:** ThemeToggleTri's 'oled' mode is now 'deep-blue' and the oledLabel prop is replaced by deepBlueLabel.
+
+### Features
+
+* **react:** add align and aria-label to Popover.Content ([d4c39bd](https://github.com/SckyzO/cosmos/commit/d4c39bd28e9b0e27fadd08f932aa6debbecaff01))
+* **react:** add AppearanceMenu for picking theme and accent in a top bar ([5181ad7](https://github.com/SckyzO/cosmos/commit/5181ad7eb3d06c693fbc602500901536383978a6))
+* **react:** add AppearanceSettings and deep-blue ThemeToggleTri mode ([597f714](https://github.com/SckyzO/cosmos/commit/597f714ba4a22076dd9d11ffeffca222b34d0df6))
+
+
+### Bug Fixes
+
+* **react:** stretch PaletteCard label rows to the card's height ([de3aba7](https://github.com/SckyzO/cosmos/commit/de3aba7397b0ceb8bb8540e47997fe8ec9168b7f))
+
 ## [0.0.3](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-react@0.0.2...@sckyzo/cosmos-react@0.0.3) (2026-07-17)
 
 

package/README.md

@@ -14,7 +14,7 @@ pnpm add @sckyzo/cosmos-react @sckyzo/cosmos-theme
 pnpm add react react-dom   # peers, react 19+
 ```
 
-`@sckyzo/cosmos-theme` carries the CSS (tokens, fonts, light/dark vars). The
+`@sckyzo/cosmos-theme` carries the CSS (tokens, fonts, theme and accent vars). The
 components render unstyled without it.
 
 ## Set up the styles
@@ -33,7 +33,7 @@ In your main CSS file:
    The path is relative to this CSS file; adjust the depth to your layout. */
 @source '../node_modules/@sckyzo/cosmos-react/dist/**/*.{js,cjs}';
 
-/* Cosmos tokens (the @theme block) then the light/dark CSS vars. */
+/* Cosmos tokens (the @theme block) then the theme and accent CSS vars. */
 @import '@sckyzo/cosmos-theme/tailwind';
 @import '@sckyzo/cosmos-theme/vars';
 
@@ -64,6 +64,38 @@ function Example() {
 }
 ```
 
+## Themes and accents
+
+The theme is a class on `<html>` and the accent a `data-accent` attribute, see
+the [theme README](../theme#themes--accents). `AppearanceSettings` renders a
+picker for each, and `applyAppearance` sets them on the document:
+
+```tsx
+import { useEffect, useState } from 'react';
+import { AppearanceSettings, applyAppearance, type CosmosAppearance } from '@sckyzo/cosmos-react';
+
+function Appearance() {
+  const [appearance, setAppearance] = useState<CosmosAppearance>({
+    theme: 'light',
+    accent: 'blue',
+  });
+  useEffect(() => applyAppearance(appearance), [appearance]);
+  return (
+    <AppearanceSettings
+      theme={appearance.theme}
+      accent={appearance.accent}
+      onThemeChange={(theme) => setAppearance((a) => ({ ...a, theme }))}
+      onAccentChange={(accent) => setAppearance((a) => ({ ...a, accent }))}
+    />
+  );
+}
+```
+
+For a top bar, `AppearanceMenu` takes the same props and puts the two pickers
+in a panel behind an icon button, for example in `Topbar`'s `rightActions`.
+
+Saving the choice (local storage, user profile) is left to the app.
+
 Charts live in a separate package, [`@sckyzo/cosmos-charts`](../charts), so apps
 that don't render charts don't ship the ApexCharts bundle.
 

package/dist/index.cjs

@@ -345,11 +345,11 @@ var SidebarItem = ({
   const baseClass = clsx.clsx(
     "group mx-2 flex items-center gap-3 rounded-lg py-2 text-sm font-medium transition-colors",
     collapsed ? "justify-center px-2" : "px-3",
-    active ? "bg-brand-500/10 text-brand-500" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
+    active ? "bg-brand-500/10 text-brand-600 dark:text-brand-400" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
   );
   const style = !collapsed && depth > 0 ? { paddingLeft: 12 + depth * 20 } : void 0;
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: clsx.clsx("h-5 w-5 shrink-0", active && "text-brand-500") }),
+    /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
     !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: label }),
       badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge })
@@ -400,9 +400,9 @@ var SidebarSubMenu = ({
         title: label,
         className: clsx.clsx(
           "group mx-2 flex w-[calc(100%-1rem)] items-center justify-center rounded-lg px-2 py-2 text-sm font-medium transition-colors",
-          active ? "bg-brand-500/10 text-brand-500" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
+          active ? "bg-brand-500/10 text-brand-600 dark:text-brand-400" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: clsx.clsx("h-5 w-5 shrink-0", active && "text-brand-500") })
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" })
       }
     );
   }
@@ -415,10 +415,10 @@ var SidebarSubMenu = ({
         "aria-expanded": open,
         className: clsx.clsx(
           "group mx-2 flex w-[calc(100%-1rem)] items-center gap-3 rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors",
-          active ? "bg-brand-500/10 text-brand-500" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
+          active ? "bg-brand-500/10 text-brand-600 dark:text-brand-400" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: clsx.clsx("h-5 w-5 shrink-0", active && "text-brand-500") }),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: label }),
           badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -479,7 +479,7 @@ Sidebar.SubMenu = SidebarSubMenu;
 var PageBreadcrumb = ({ items, className }) => /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-wrap items-center gap-1 text-sm", children: items.map((item, i) => {
   const isFirst = i === 0;
   const isLast = i === items.length - 1;
-  const linkClass = "hover:text-brand-500 dark:hover:text-brand-400 flex items-center gap-1 text-[var(--color-text-secondary)] transition-colors";
+  const linkClass = "hover:text-brand-600 dark:hover:text-brand-400 flex items-center gap-1 text-[var(--color-text-secondary)] transition-colors";
   const renderInner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     isFirst && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Home, { className: "h-4 w-4" }),
     item.label
@@ -623,7 +623,7 @@ var ErrorState = ({
     {
       type: "button",
       onClick: onRetry,
-      className: "text-brand-500 hover:text-brand-600 text-xs font-medium hover:underline",
+      className: "text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 text-xs font-medium hover:underline",
       children: "Try again"
     }
   )
@@ -3504,7 +3504,7 @@ var NotificationsPanelFooter = ({
         if (closeOnClick && !e.defaultPrevented) setOpen(false);
       },
       className: clsx.clsx(
-        "text-brand-500 w-full rounded-lg py-2 text-center text-sm font-medium transition-colors hover:bg-gray-50 dark:hover:bg-white/5",
+        "text-brand-600 dark:text-brand-400 w-full rounded-lg py-2 text-center text-sm font-medium transition-colors hover:bg-gray-50 dark:hover:bg-white/5",
         className
       ),
       ...rest,
@@ -3837,7 +3837,7 @@ var SIZE_CLASS9 = {
   sm: { box: "h-8 w-8", icon: "h-4 w-4" },
   md: { box: "h-10 w-10", icon: "h-5 w-5" }
 };
-var TRI_ORDER = ["light", "dark", "oled"];
+var TRI_ORDER = ["light", "dark", "deep-blue"];
 var nextInCycle = (current) => {
   const idx = TRI_ORDER.indexOf(current);
   return TRI_ORDER[(idx + 1) % TRI_ORDER.length];
@@ -3845,7 +3845,7 @@ var nextInCycle = (current) => {
 var ICON_FOR = {
   light: lucideReact.Sun,
   dark: lucideReact.Moon,
-  oled: lucideReact.MoonStar
+  "deep-blue": lucideReact.MoonStar
 };
 var ThemeToggleTri = react.forwardRef(
   function ThemeToggleTri2({
@@ -3854,12 +3854,12 @@ var ThemeToggleTri = react.forwardRef(
     size = "md",
     lightLabel = "Switch to light mode",
     darkLabel = "Switch to dark mode",
-    oledLabel = "Switch to OLED mode",
+    deepBlueLabel = "Switch to deep blue mode",
     className,
     ...rest
   }, ref) {
     const next = nextInCycle(theme);
-    const label = next === "light" ? lightLabel : next === "dark" ? darkLabel : oledLabel;
+    const label = next === "light" ? lightLabel : next === "dark" ? darkLabel : deepBlueLabel;
     const Icon2 = ICON_FOR[theme];
     const { box, icon } = SIZE_CLASS9[size];
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4111,9 +4111,12 @@ var PopoverRoot = ({
     const handler = () => refreshRect();
     window.addEventListener("resize", handler);
     window.addEventListener("scroll", handler, true);
+    const observer = new ResizeObserver(handler);
+    if (triggerRef.current) observer.observe(triggerRef.current, { box: "border-box" });
     return () => {
       window.removeEventListener("resize", handler);
       window.removeEventListener("scroll", handler, true);
+      observer.disconnect();
     };
   }, [open, refreshRect]);
   react.useEffect(() => {
@@ -4152,13 +4155,18 @@ var PopoverTrigger = react.forwardRef(function PopoverTrigger2({ onClick, childr
     }
   );
 });
-var positionStyle = (position, rect, offset) => {
+var VIEWPORT_MARGIN = 16;
+var positionStyle = (position, align, rect, offset) => {
+  const left = align === "end" ? rect.right : rect.left + rect.width / 2;
+  const shiftX = align === "end" ? "-100%" : "-50%";
+  const maxWidth = align === "end" ? rect.right - VIEWPORT_MARGIN : void 0;
   switch (position) {
     case "top":
       return {
         top: rect.top - offset,
-        left: rect.left + rect.width / 2,
-        transform: "translate(-50%, -100%)"
+        left,
+        maxWidth,
+        transform: `translate(${shiftX}, -100%)`
       };
     case "right":
       return {
@@ -4176,32 +4184,36 @@ var positionStyle = (position, rect, offset) => {
     default:
       return {
         top: rect.bottom + offset,
-        left: rect.left + rect.width / 2,
-        transform: "translateX(-50%)"
+        left,
+        maxWidth,
+        transform: `translateX(${shiftX})`
       };
   }
 };
-var arrowStyle = (position) => {
+var arrowStyle = (position, align, rect) => {
   const base = {
     position: "absolute",
     width: 8,
     height: 8,
     transform: "rotate(45deg)"
   };
+  const x = align === "end" ? { right: rect.width / 2 - 1, marginRight: -4 } : { left: "50%", marginLeft: -4 };
   switch (position) {
     case "top":
-      return { ...base, bottom: -4, left: "50%", marginLeft: -4 };
+      return { ...base, bottom: -4, ...x };
     case "right":
       return { ...base, left: -4, top: "50%", marginTop: -4 };
     case "left":
       return { ...base, right: -4, top: "50%", marginTop: -4 };
     case "bottom":
     default:
-      return { ...base, top: -4, left: "50%", marginLeft: -4 };
+      return { ...base, top: -4, ...x };
   }
 };
 var PopoverContent = ({
   position = "bottom",
+  align = "center",
+  "aria-label": ariaLabel,
   offset = 8,
   arrow = false,
   width = "w-64",
@@ -4217,7 +4229,8 @@ var PopoverContent = ({
         "div",
         {
           role: "dialog",
-          style: positionStyle(position, triggerRect, offset),
+          "aria-label": ariaLabel,
+          style: positionStyle(position, align, triggerRect, offset),
           className: clsx.clsx(
             "fixed z-[9999] rounded-xl border border-gray-200 bg-white p-4 text-sm shadow-xl dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100",
             width,
@@ -4228,7 +4241,7 @@ var PopoverContent = ({
               "span",
               {
                 "aria-hidden": true,
-                style: arrowStyle(position),
+                style: arrowStyle(position, align, triggerRect),
                 className: "border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
               }
             ),
@@ -7649,7 +7662,7 @@ var ColumnHeader = ({
               "aria-label": "Filter column",
               className: clsx.clsx(
                 "flex items-center gap-1 rounded p-0.5 transition-colors hover:bg-gray-200 dark:hover:bg-white/10",
-                filterCount > 0 && "text-brand-500"
+                filterCount > 0 && "text-brand-600 dark:text-brand-400"
               ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-3 w-3" }),
@@ -8417,7 +8430,7 @@ var SignInForm = ({
           {
             type: "button",
             onClick: onForgotPassword,
-            className: "text-brand-500 hover:text-brand-600 text-xs font-medium transition-colors",
+            className: "text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 text-xs font-medium transition-colors",
             children: forgotLabel
           }
         )
@@ -8760,7 +8773,7 @@ var TwoStepVerificationForm = ({
             type: "button",
             onClick: onResend,
             disabled: loading,
-            className: "text-brand-500 hover:text-brand-600 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+            className: "text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
             children: resendLabel
           }
         )
@@ -8876,7 +8889,7 @@ var PaletteCard = ({ meta, active = false, onClick, className }) => /* @__PURE__
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "flex items-center justify-between px-2.5 py-1.5",
+          className: "flex flex-1 items-center justify-between px-2.5 py-1.5",
           style: {
             backgroundColor: meta.preview.surface,
             borderTop: `1px solid ${meta.preview.border}`
@@ -8887,11 +8900,11 @@ var PaletteCard = ({ meta, active = false, onClick, className }) => /* @__PURE__
                 "span",
                 {
                   className: "block text-xs font-semibold",
-                  style: { color: active ? void 0 : "#6b7280" },
+                  style: { color: meta.preview.text ?? (active ? void 0 : "#6b7280") },
                   children: meta.label
                 }
               ),
-              meta.desc && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-[10px]", style: { color: "#9ca3af" }, children: meta.desc })
+              meta.desc && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-[10px]", style: { color: meta.preview.text ?? "#9ca3af" }, children: meta.desc })
             ] }),
             active && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-brand-500 flex h-4 w-4 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-2.5 w-2.5 text-white", "aria-hidden": true }) })
           ]
@@ -8941,7 +8954,7 @@ var OptionCard = ({
           {
             className: clsx.clsx(
               "text-xs font-semibold",
-              active ? "text-brand-500" : "text-gray-700 dark:text-gray-300"
+              active ? "text-brand-600 dark:text-brand-400" : "text-gray-700 dark:text-gray-300"
             ),
             children: label
           }
@@ -8977,6 +8990,129 @@ var OptionPicker = ({
     ))
   }
 );
+
+// src/settings/appearance.ts
+var COSMOS_THEMES = [
+  {
+    id: "light",
+    label: "Light",
+    dark: false,
+    preview: { bg: "#f9fafb", surface: "#ffffff", border: "#e5e7eb", text: "#667085" }
+  },
+  {
+    id: "sand",
+    label: "Sand",
+    dark: false,
+    preview: { bg: "#f9f5eb", surface: "#fffcf7", border: "#e7dfd0", text: "#746656" }
+  },
+  {
+    id: "dark",
+    label: "Dark",
+    dark: true,
+    preview: { bg: "#0a0a0a", surface: "#141414", border: "#3d3d3d", text: "#a3a3a3" }
+  },
+  {
+    id: "deep-blue",
+    label: "Deep Blue",
+    dark: true,
+    preview: { bg: "#0c111d", surface: "#101828", border: "#344054", text: "#98a2b3" }
+  }
+];
+var COSMOS_ACCENTS = [
+  { id: "blue", label: "Blue", hex: "#465fff" },
+  { id: "indigo", label: "Indigo", hex: "#5963e9" },
+  { id: "violet", label: "Violet", hex: "#8745f1" },
+  { id: "purple", label: "Purple", hex: "#ad2ecf" },
+  { id: "rose", label: "Rose", hex: "#d4166d" },
+  { id: "teal", label: "Teal", hex: "#038378" },
+  { id: "cyan", label: "Cyan", hex: "#017f9d" },
+  { id: "graphite", label: "Graphite", hex: "#707580" },
+  { id: "red", label: "Red", hex: "#db192a" },
+  { id: "orange", label: "Orange", hex: "#c04f01" },
+  { id: "amber", label: "Amber", hex: "#a46800" },
+  { id: "green", label: "Green", hex: "#02863c" }
+];
+var THEME_CLASSES = COSMOS_THEMES.map((t) => t.id).filter((id) => id !== "light");
+var isDarkTheme = (theme) => COSMOS_THEMES.some((t) => t.id === theme && t.dark);
+var applyAppearance = ({ theme, accent }, root) => {
+  const el = root ?? (typeof document === "undefined" ? void 0 : document.documentElement);
+  if (!el) return;
+  el.classList.remove(...THEME_CLASSES);
+  if (theme !== "light") el.classList.add(theme);
+  if (accent === "blue") delete el.dataset.accent;
+  else el.dataset.accent = accent;
+};
+var AppearanceSettings = ({
+  theme,
+  accent,
+  onThemeChange,
+  onAccentChange,
+  themeLabel = "Theme",
+  accentLabel = "Accent color",
+  themes = COSMOS_THEMES,
+  accents = COSMOS_ACCENTS,
+  themeColumns = 4,
+  className
+}) => {
+  const themeHeadingId = react.useId();
+  const accentHeadingId = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": themeHeadingId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { id: themeHeadingId, className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: themeLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PalettePicker,
+        {
+          className: "mt-3",
+          palettes: themes,
+          value: theme,
+          cols: themeColumns,
+          onChange: (id) => onThemeChange(id)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": accentHeadingId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { id: accentHeadingId, className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: accentLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AccentPicker,
+        {
+          className: "mt-3",
+          colors: accents,
+          value: accent,
+          onChange: (id) => onAccentChange(id),
+          cols: 6
+        }
+      )
+    ] })
+  ] });
+};
+var SIZE_CLASS12 = {
+  sm: { box: "h-8 w-8", icon: "h-4 w-4" },
+  md: { box: "h-10 w-10", icon: "h-5 w-5" }
+};
+var AppearanceMenu = ({
+  label = "Appearance",
+  size = "md",
+  className,
+  ...settings
+}) => {
+  const { box, icon } = SIZE_CLASS12[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Trigger,
+      {
+        title: label,
+        "aria-label": label,
+        className: clsx.clsx(
+          "flex items-center justify-center rounded-lg border border-gray-200 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white",
+          box,
+          className
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: icon, "aria-hidden": true })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { align: "end", width: "w-96", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx(AppearanceSettings, { themeColumns: 2, ...settings }) })
+  ] });
+};
 var SIZE = {
   sm: "text-base leading-relaxed",
   md: "text-lg leading-relaxed",
@@ -9155,6 +9291,8 @@ exports.ActiveFiltersBar = ActiveFiltersBar;
 exports.ActivityFeed = ActivityFeed;
 exports.AlertBanner = AlertBanner;
 exports.AnnouncementBar = AnnouncementBar;
+exports.AppearanceMenu = AppearanceMenu;
+exports.AppearanceSettings = AppearanceSettings;
 exports.AuthLayout = AuthLayout;
 exports.Avatar = Avatar;
 exports.AvatarUploader = AvatarUploader;
@@ -9165,6 +9303,8 @@ exports.Blockquote = Blockquote;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.COSMOS_ACCENTS = COSMOS_ACCENTS;
+exports.COSMOS_THEMES = COSMOS_THEMES;
 exports.Calendar = Calendar;
 exports.Card = Card2;
 exports.Carousel = Carousel;
@@ -9287,7 +9427,9 @@ exports.UserMenu = UserMenu;
 exports.VerticalNavigation = VerticalNavigation;
 exports.VideoEmbed = VideoEmbed;
 exports.ZoomBar = ZoomBar;
+exports.applyAppearance = applyAppearance;
 exports.defaultPasswordRules = defaultPasswordRules;
+exports.isDarkTheme = isDarkTheme;
 exports.useAutoRefresh = useAutoRefresh;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map