@dxos/ui-theme 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393

package/dist/lib/browser/index.mjs

@@ -35,7 +35,7 @@ var hueShades = [
 var roles = [
   "fill",
   "surface",
-  "surface-text",
+  "foreground",
   "text",
   "border"
 ];
@@ -58,7 +58,6 @@ var staticDisabled = "opacity-40 cursor-not-allowed shadow-none";
 var dataDisabled = "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed";
 
 // src/fragments/hover.ts
-var subtleHover = "hover:bg-hover-overlay";
 var ghostHover = "hover:bg-hover-surface";
 var ghostFocusWithin = "focus-within:bg-hover-surface";
 var hoverableControls = "[--controls-opacity:1] hover-hover:[--controls-opacity:0] hover-hover:hover:[--controls-opacity:1]";
@@ -109,7 +108,7 @@ var neutral = {
   hue: "neutral",
   fill: "bg-neutral-fill",
   surface: "bg-neutral-surface",
-  surfaceText: "text-neutral-surface-text",
+  foreground: "text-neutral-foreground",
   text: "text-neutral-text",
   border: "border-neutral-border"
 };
@@ -118,7 +117,7 @@ var styles = [
     hue: "red",
     fill: "bg-red-fill",
     surface: "bg-red-surface",
-    surfaceText: "text-red-surface-text",
+    foreground: "text-red-foreground",
     text: "text-red-text",
     border: "border-red-border"
   },
@@ -126,7 +125,7 @@ var styles = [
     hue: "orange",
     fill: "bg-orange-fill",
     surface: "bg-orange-surface",
-    surfaceText: "text-orange-surface-text",
+    foreground: "text-orange-foreground",
     text: "text-orange-text",
     border: "border-orange-border"
   },
@@ -134,7 +133,7 @@ var styles = [
     hue: "amber",
     fill: "bg-amber-fill",
     surface: "bg-amber-surface",
-    surfaceText: "text-amber-surface-text",
+    foreground: "text-amber-foreground",
     text: "text-amber-text",
     border: "border-amber-border"
   },
@@ -142,7 +141,7 @@ var styles = [
     hue: "yellow",
     fill: "bg-yellow-fill",
     surface: "bg-yellow-surface",
-    surfaceText: "text-yellow-surface-text",
+    foreground: "text-yellow-foreground",
     text: "text-yellow-text",
     border: "border-yellow-border"
   },
@@ -150,7 +149,7 @@ var styles = [
     hue: "lime",
     fill: "bg-lime-fill",
     surface: "bg-lime-surface",
-    surfaceText: "text-lime-surface-text",
+    foreground: "text-lime-foreground",
     text: "text-lime-text",
     border: "border-lime-border"
   },
@@ -158,7 +157,7 @@ var styles = [
     hue: "green",
     fill: "bg-green-fill",
     surface: "bg-green-surface",
-    surfaceText: "text-green-surface-text",
+    foreground: "text-green-foreground",
     text: "text-green-text",
     border: "border-green-border"
   },
@@ -166,7 +165,7 @@ var styles = [
     hue: "emerald",
     fill: "bg-emerald-fill",
     surface: "bg-emerald-surface",
-    surfaceText: "text-emerald-surface-text",
+    foreground: "text-emerald-foreground",
     text: "text-emerald-text",
     border: "border-emerald-border"
   },
@@ -174,7 +173,7 @@ var styles = [
     hue: "teal",
     fill: "bg-teal-fill",
     surface: "bg-teal-surface",
-    surfaceText: "text-teal-surface-text",
+    foreground: "text-teal-foreground",
     text: "text-teal-text",
     border: "border-teal-border"
   },
@@ -182,7 +181,7 @@ var styles = [
     hue: "cyan",
     fill: "bg-cyan-fill",
     surface: "bg-cyan-surface",
-    surfaceText: "text-cyan-surface-text",
+    foreground: "text-cyan-foreground",
     text: "text-cyan-text",
     border: "border-cyan-border"
   },
@@ -190,7 +189,7 @@ var styles = [
     hue: "sky",
     fill: "bg-sky-fill",
     surface: "bg-sky-surface",
-    surfaceText: "text-sky-surface-text",
+    foreground: "text-sky-foreground",
     text: "text-sky-text",
     border: "border-sky-border"
   },
@@ -198,7 +197,7 @@ var styles = [
     hue: "blue",
     fill: "bg-blue-fill",
     surface: "bg-blue-surface",
-    surfaceText: "text-blue-surface-text",
+    foreground: "text-blue-foreground",
     text: "text-blue-text",
     border: "border-blue-border"
   },
@@ -206,7 +205,7 @@ var styles = [
     hue: "indigo",
     fill: "bg-indigo-fill",
     surface: "bg-indigo-surface",
-    surfaceText: "text-indigo-surface-text",
+    foreground: "text-indigo-foreground",
     text: "text-indigo-text",
     border: "border-indigo-border"
   },
@@ -214,7 +213,7 @@ var styles = [
     hue: "violet",
     fill: "bg-violet-fill",
     surface: "bg-violet-surface",
-    surfaceText: "text-violet-surface-text",
+    foreground: "text-violet-foreground",
     text: "text-violet-text",
     border: "border-violet-border"
   },
@@ -222,7 +221,7 @@ var styles = [
     hue: "purple",
     fill: "bg-purple-fill",
     surface: "bg-purple-surface",
-    surfaceText: "text-purple-surface-text",
+    foreground: "text-purple-foreground",
     text: "text-purple-text",
     border: "border-purple-border"
   },
@@ -230,7 +229,7 @@ var styles = [
     hue: "fuchsia",
     fill: "bg-fuchsia-fill",
     surface: "bg-fuchsia-surface",
-    surfaceText: "text-fuchsia-surface-text",
+    foreground: "text-fuchsia-foreground",
     text: "text-fuchsia-text",
     border: "border-fuchsia-border"
   },
@@ -238,7 +237,7 @@ var styles = [
     hue: "pink",
     fill: "bg-pink-fill",
     surface: "bg-pink-surface",
-    surfaceText: "text-pink-surface-text",
+    foreground: "text-pink-foreground",
     text: "text-pink-text",
     border: "border-pink-border"
   },
@@ -246,7 +245,7 @@ var styles = [
     hue: "rose",
     fill: "bg-rose-fill",
     surface: "bg-rose-surface",
-    surfaceText: "text-rose-surface-text",
+    foreground: "text-rose-foreground",
     text: "text-rose-text",
     border: "border-rose-border"
   }
@@ -341,12 +340,7 @@ function slottable(render) {
           warn = true;
           log.warn("slot child is not composable; create it with composable() or slottable()", {
             child: child.type.displayName ?? child.type.name
-          }, {
-            F: __dxlog_file,
-            L: 125,
-            S: this,
-            C: (f, a) => f(...a)
-          });
+          }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 100, S: this });
         }
       } catch {
       }
@@ -649,8 +643,8 @@ var cardTheme = {
 };
 
 // src/theme/components/button.ts
-var primaryButtonColors = "text-accent-surface-text bg-accent-surface hover:bg-accent-surface-hover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100";
-var staticDefaultButtonColors = "bg-input-surface text-input-surface-text";
+var primaryButtonColors = "text-accent-foreground bg-accent-surface hover:bg-accent-surface-hover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100";
+var staticDefaultButtonColors = "bg-input-surface text-input-foreground";
 var defaultButtonColors = mx(staticDefaultButtonColors, "data-[state=open]:bg-input-surface aria-pressed:text-accent-text aria-pressed:bg-base-surface aria-checked:text-accent-text aria-checked:bg-base-surface");
 var ghostButtonColors = mx(ghostHover, "hover:text-inherit data-[state=open]:bg-input-surface aria-pressed:text-accent-text aria-pressed:bg-base-surface aria-checked:text-accent-text aria-checked:bg-base-surface");
 var buttonRoot = (_props, ...etc) => {
@@ -720,7 +714,7 @@ var dialogTheme = {
 };
 
 // src/theme/components/focus.ts
-var focusRing = ({ border }, ...etc) => mx("dx-ring-pseudo outline-hidden", "focus:after:ring-neutral-focus-indicator", "data-[focus-state=active]:after:ring-neutral-focus-indicator", "data-[focus-state=error]:after:ring-rose-500", border && "border border-separator", ...etc);
+var focusRing = ({ border }, ...etc) => mx("dx-ring-pseudo outline-hidden", "focus:after:ring-focus-ring-subtle", "data-[focus-state=active]:after:ring-focus-ring-subtle", "data-[focus-state=error]:after:ring-rose-500", border && "border border-separator", ...etc);
 var focusTheme = {
   group: focusRing,
   item: focusRing
@@ -735,8 +729,8 @@ var iconTheme = {
 };
 
 // src/theme/components/icon-button.ts
-var iconButtonRoot = ({ iconOnly }, ...etc) => {
-  return mx("px-1.5", !iconOnly && "gap-2", ...etc);
+var iconButtonRoot = ({ iconOnly, square }, ...etc) => {
+  return mx("px-1.5", !iconOnly && "gap-2", square && "aspect-square", ...etc);
 };
 var iconButtonTheme = {
   root: iconButtonRoot
@@ -769,14 +763,14 @@ var sharedSubduedInputStyles = (props) => [
 ];
 var sharedDefaultInputStyles = (props) => [
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  "py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder",
+  "py-0 w-full text-base-foreground rounded-xs placeholder-placeholder",
   textInputSurfaceFocus,
   densityDimensions(props.density),
   props.disabled ? staticDisabled : textInputSurfaceHover
 ];
 var sharedStaticInputStyles = (props) => [
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  "py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder",
+  "py-0 w-full text-base-foreground rounded-xs placeholder-placeholder",
   textInputSurfaceFocus,
   textInputSurfaceHover,
   props.focused && "bg-attention-surface",
@@ -800,7 +794,7 @@ var inputSwitch = ({ size = 5, disabled }, ...etc) => mx(
 );
 var inputSwitchThumb = ({ size = 5 }, ...etc) => mx(getSize(size === "px" ? "px" : size - 2), "block bg-white rounded-full transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[100%]", ...etc);
 var inputWithSegmentsInput = (props, ...etc) => mx("font-mono selection:bg-transparent mx-auto", props.density === "fine" ? "text-base pointer-fine:text-sm" : "text-lg", props.disabled && "cursor-not-allowed", ...etc);
-var inputSegment = (props, ...etc) => mx("flex items-center justify-center font-mono", props.density === "fine" ? "size-10 pointer-fine:size-8 rounded-xs" : "size-12 rounded-xs", "bg-input-surface text-base-surface-text transition-colors border border-separator", "data-[focused]:bg-attention-surface data-[focused]:border-neutral-focus-indicator", "data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-neutral-focus-indicator", inputValence(props.validationValence), props.disabled && staticDisabled, ...etc);
+var inputSegment = (props, ...etc) => mx("flex items-center justify-center font-mono", props.density === "fine" ? "size-10 pointer-fine:size-8 rounded-xs" : "size-12 rounded-xs", "bg-input-surface text-base-foreground transition-colors border border-separator", "data-[focused]:bg-attention-surface data-[focused]:border-focus-ring-subtle", "data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-focus-ring-subtle", inputValence(props.validationValence), props.disabled && staticDisabled, ...etc);
 var inputLabel = (props, ...etc) => mx("block", inputTextLabel, props.srOnly && "sr-only", ...etc);
 var inputDescription = (props, ...etc) => mx("text-description", props.srOnly && "sr-only", ...etc);
 var inputDescriptionAndValidation = (props, ...etc) => mx("leading-none my-1.5", props.srOnly && "sr-only", ...etc);
@@ -886,19 +880,19 @@ var menuTheme = {
 
 // src/theme/components/message.ts
 var messageRoot = ({ valence }, etc) => {
-  return mx("grid grid-cols-[min-content_1fr] gap-x-2 p-trim-sm rounded-sm", messageValence(valence), etc);
+  return mx("grid grid-cols-[2rem_1fr_2rem] p-1 rounded-sm", messageValence(valence), etc);
 };
 var messageHeader = (_, etc) => {
-  return mx("col-span-2 grid grid-cols-subgrid items-center", etc);
+  return mx("col-span-full grid grid-cols-subgrid items-center", etc);
 };
 var messageTitle = (_, etc) => {
-  return mx("col-start-2 gap-trim-sm [&>svg]:inline-block", etc);
+  return mx("col-start-2 truncate", etc);
 };
 var messageIcon = (_, etc) => {
-  return mx("col-start-1", etc);
+  return mx("col-start-1 grid place-items-center", etc);
 };
 var messageContent = (_, etc) => {
-  return mx("grid grid-cols-subgrid col-start-2 first:font-medium", etc);
+  return mx("col-start-2 grid grid-cols-subgrid inline first:font-medium", etc);
 };
 var messageTheme = {
   root: messageRoot,
@@ -999,7 +993,7 @@ var selectContent = ({ elevation }, ...etc) => {
   }), ...etc);
 };
 var selectViewport = (_props, ...etc) => mx(...etc);
-var selectItem = (_props, ...etc) => mx("flex items-center min-h-[2rem] px-3 py-1 gap-2", "text-base-surface-text leading-none select-none outline-hidden", "[&>svg]:invisible [&[data-state=checked]>svg]:visible", "dx-highlighted", ...etc);
+var selectItem = (_props, ...etc) => mx("flex items-center min-h-[2rem] px-3 py-1 gap-2", "text-base-foreground leading-none select-none outline-hidden", "[&>svg]:invisible [&[data-state=checked]>svg]:visible", "dx-highlighted", ...etc);
 var selectItemIndicator = (_props, ...etc) => mx("items-center", ...etc);
 var selectArrow = (_props, ...etc) => mx("fill-separator", ...etc);
 var selectSeparator = (_props, ...etc) => mx("self-stretch border-b my-1 border-separator", ...etc);
@@ -1085,7 +1079,7 @@ var toolbarTheme = {
 };
 
 // src/theme/components/tooltip.ts
-var tooltipContent = ({ elevation }, ...etc) => mx("inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-surface-text rounded-sm", surfaceShadow({
+var tooltipContent = ({ elevation }, ...etc) => mx("inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-foreground rounded-sm", surfaceShadow({
   elevation: "positioned"
 }), surfaceZIndex({
   elevation,
@@ -1347,7 +1341,6 @@ export {
   statusBar,
   statusRoot,
   statusTheme,
-  subtleHover,
   surfaceShadow,
   surfaceZIndex,
   tagRoot,