@floegence/floe-webapp-core 0.50.6 → 0.52.0

package/dist/styles/themes/index.js

@@ -1,11 +1,18 @@
-const f = [
+function m(e) {
+  return e === "standard" || e === "soft-neumorphic";
+}
+function d(e, r) {
+  const t = i(r);
+  e ? t?.setAttribute?.("data-floe-surface-style", e) : t?.removeAttribute?.("data-floe-surface-style");
+}
+const h = [
   { name: "light", displayName: "Light", type: "light" },
   { name: "dark", displayName: "Dark", type: "dark" }
 ];
-function h(e) {
+function y(e) {
   return e === "light" || e === "dark" || e === "system";
 }
-function m() {
+function u() {
   return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 function i(e) {
@@ -13,51 +20,53 @@ function i(e) {
   if (!(typeof document > "u"))
     return document.documentElement;
 }
-function c(e, n) {
+function c(e, r) {
   return {
     ...e?.shared ?? {},
-    ...n === "light" ? e?.light ?? {} : e?.dark ?? {}
+    ...r === "light" ? e?.light ?? {} : e?.dark ?? {}
   };
 }
-function u(...e) {
+function f(...e) {
   return Object.assign({}, ...e.filter(Boolean));
 }
-function d(e, ...n) {
-  return u(
-    ...n.map((t) => c(t, e))
+function p(e, ...r) {
+  return f(
+    ...r.map((t) => c(t, e))
   );
 }
-function y(e, n) {
-  const t = i(n);
+function T(e, r) {
+  const t = i(r);
   if (!t) return;
-  const o = e === "system" ? m() : e;
+  const o = e === "system" ? u() : e;
   t.classList.remove("light", "dark"), t.classList.add(o), t.style.colorScheme = o;
 }
-function p(e, n) {
-  const t = i(n);
+function g(e, r) {
+  const t = i(r);
   t && (e ? t.setAttribute?.("data-floe-shell-theme", e) : t.removeAttribute?.("data-floe-shell-theme"));
 }
-function T(e, n = [], t) {
+function k(e, r = [], t) {
   const o = i(t);
   if (!o) return [];
-  const l = Object.entries(e ?? {}).filter((r) => {
-    const [, s] = r;
+  const a = Object.entries(e ?? {}).filter((n) => {
+    const [, s] = n;
     return typeof s == "string" && s.length > 0;
-  }), a = new Set(l.map(([r]) => r));
-  for (const r of n)
-    a.has(r) || o.style.removeProperty(r);
-  for (const [r, s] of l)
-    o.style.setProperty(r, s);
-  return [...a];
+  }), l = new Set(a.map(([n]) => n));
+  for (const n of r)
+    l.has(n) || o.style.removeProperty(n);
+  for (const [n, s] of a)
+    o.style.setProperty(n, s);
+  return [...l];
 }
 export {
-  p as applyShellThemeAttribute,
-  y as applyTheme,
-  f as builtInThemes,
-  m as getSystemTheme,
-  h as isThemeType,
-  u as mergeThemeTokenMaps,
+  g as applyShellThemeAttribute,
+  d as applySurfaceStyleAttribute,
+  T as applyTheme,
+  h as builtInThemes,
+  u as getSystemTheme,
+  m as isFloeSurfaceStyle,
+  y as isThemeType,
+  f as mergeThemeTokenMaps,
   c as resolveThemeTokenOverrides,
-  d as resolveThemeTokens,
-  T as syncThemeTokenOverrides
+  p as resolveThemeTokens,
+  k as syncThemeTokenOverrides
 };

package/dist/styles/tokens.d.ts

@@ -637,6 +637,25 @@ export declare const floeThemeColorVariables: {
     readonly dark: Record<`--${string}`, string>;
 };
 export declare function getFloeColorTokenValue(variable: FloeCssVariableName, theme: FloeResolvedTheme): string | undefined;
+/** Optional shadow overrides. Defaults resolve at each role so local palettes
+ * participate without masking overrides supplied by the theme service. */
+export declare const floeSurfaceTokens: readonly [{
+    readonly variable: "--floe-surface-shadow-raised";
+    readonly role: "raised";
+    readonly fallback: "0 2px 5px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+}, {
+    readonly variable: "--floe-surface-shadow-inset";
+    readonly role: "inset";
+    readonly fallback: "inset 0 1px 2px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
+}, {
+    readonly variable: "--floe-surface-shadow-floating";
+    readonly role: "floating";
+    readonly fallback: "0 8px 20px -6px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+}, {
+    readonly variable: "--floe-surface-shadow-interacting";
+    readonly role: "interacting";
+    readonly fallback: "0 1px 2px var(--floe-surface-shade)";
+}];
 export declare const floeDesignTokens: {
     readonly colors: readonly [{
         readonly name: "Base Colors";
@@ -1227,4 +1246,21 @@ export declare const floeDesignTokens: {
         readonly '--font-sans': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
         readonly '--font-mono': "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
     };
+    readonly surface: readonly [{
+        readonly variable: "--floe-surface-shadow-raised";
+        readonly role: "raised";
+        readonly fallback: "0 2px 5px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+    }, {
+        readonly variable: "--floe-surface-shadow-inset";
+        readonly role: "inset";
+        readonly fallback: "inset 0 1px 2px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
+    }, {
+        readonly variable: "--floe-surface-shadow-floating";
+        readonly role: "floating";
+        readonly fallback: "0 8px 20px -6px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+    }, {
+        readonly variable: "--floe-surface-shadow-interacting";
+        readonly role: "interacting";
+        readonly fallback: "0 1px 2px var(--floe-surface-shade)";
+    }];
 };

package/dist/styles/tokens.js

@@ -628,27 +628,34 @@ const u = {
   light: o("light"),
   dark: o("dark")
 };
-function h(a, e) {
+function g(a, e) {
   return u[e][a];
 }
-const g = {
+const h = [
+  { variable: "--floe-surface-shadow-raised", role: "raised", fallback: "0 2px 5px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
+  { variable: "--floe-surface-shadow-inset", role: "inset", fallback: "inset 0 1px 2px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)" },
+  { variable: "--floe-surface-shadow-floating", role: "floating", fallback: "0 8px 20px -6px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
+  { variable: "--floe-surface-shadow-interacting", role: "interacting", fallback: "0 1px 2px var(--floe-surface-shade)" }
+], m = {
   colors: l,
   typography: i,
   fonts: n,
   spacing: s,
   radius: t,
   motion: c,
-  shared: r
+  shared: r,
+  surface: h
 };
 export {
   l as floeColorTokenCategories,
-  g as floeDesignTokens,
+  m as floeDesignTokens,
   n as floeFontFamilyTokens,
   c as floeMotionTokens,
   t as floeRadiusTokens,
   r as floeSharedCssVariables,
   s as floeSpacingTokens,
+  h as floeSurfaceTokens,
   u as floeThemeColorVariables,
   i as floeTypographyTokens,
-  h as getFloeColorTokenValue
+  g as getFloeColorTokenValue
 };