@dxos/ui-theme 0.8.4-main.1068cf700f → 0.8.4-main.2244d791bb

package/dist/lib/browser/index.mjs

@@ -2789,7 +2789,7 @@ var dialogContent = ({ inOverlayLayout, size }, ...etc) => {
 };
 var dialogHeader = (_props, ...etc) => mx("dx-dialog__header flex items-center justify-between", ...etc);
 var dialogBody = (_props, ...etc) => mx("dx-dialog__body flex flex-col gap-4 bs-full overflow-hidden", ...etc);
-var dialogActionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center density-coarse", ...etc);
+var dialogActionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center gap-2 density-coarse", ...etc);
 var dialogTitle = ({ srOnly }, ...etc) => mx("dx-dialog__title", srOnly && "sr-only", ...etc);
 var dialogDescription = ({ srOnly }, ...etc) => mx("dx-dialog__description", descriptionText, srOnly && "sr-only", ...etc);
 var dialogTheme = {
@@ -2969,22 +2969,26 @@ var menuTheme = {
 
 // src/styles/components/message.ts
 var messageRoot = ({ valence }, etc) => {
-  return mx("p-trimSm rounded-md", messageValence(valence), etc);
+  return mx("grid grid-cols-[min-content_1fr] gap-x-2 p-trimSm rounded-md", messageValence(valence), etc);
+};
+var messageHeader = (_, etc) => {
+  return mx("col-span-2 grid grid-cols-subgrid items-center", etc);
 };
 var messageTitle = (_, etc) => {
-  return mx("font-medium flex gap-trimSm", etc);
+  return mx("col-start-2 text-lg flex gap-trimSm", etc);
 };
 var messageIcon = (_, etc) => {
-  return mx("flex bs-[1lh] items-center", etc);
+  return mx("col-start-1", etc);
 };
 var messageContent = (_, etc) => {
-  return mx("first:font-medium", etc);
+  return mx("col-span-2 grid grid-cols-subgrid col-start-2 first:font-medium", etc);
 };
 var messageTheme = {
   root: messageRoot,
-  content: messageContent,
+  header: messageHeader,
   icon: messageIcon,
-  title: messageTitle
+  title: messageTitle,
+  content: messageContent
 };
 
 // src/styles/components/popover.ts
@@ -3016,38 +3020,23 @@ var scrollAreaRoot = ({ orientation, margin, thin }, ...etc) => mx(
   ],
   ...etc
 );
-var scrollAreaViewport = ({ orientation, autoHide, padding: padding2, snap, thin }, ...etc) => mx(
-  "bs-full is-full",
-  orientation === "vertical" && "flex flex-col overflow-y-scroll",
-  orientation === "horizontal" && "flex overflow-x-scroll",
-  orientation === "all" && "overflow-scroll",
-  thin ? "[&::-webkit-scrollbar]:is-[4px] [&::-webkit-scrollbar]:bs-[4px]" : "[&::-webkit-scrollbar]:is-[8px] [&::-webkit-scrollbar]:bs-[8px]",
-  // '[&::-webkit-scrollbar-thumb]:rounded-full',
-  "[&::-webkit-scrollbar-thumb]:bg-transparent",
-  "[&::-webkit-scrollbar-corner]:bg-transparent",
-  // TODO(burdon): Define token.
-  autoHide ? [
-    orientation === "vertical" && "group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator",
-    orientation === "horizontal" && "group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator",
-    orientation === "all" && "group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator"
-  ] : [
-    orientation === "vertical" && "[&::-webkit-scrollbar-thumb]:bg-subduedSeparator",
-    orientation === "horizontal" && "[&::-webkit-scrollbar-thumb]:bg-subduedSeparator",
-    orientation === "all" && "[&::-webkit-scrollbar-thumb]:bg-subduedSeparator"
-  ],
-  // TODO(burdon): Are scrollbars reserved on native devices?
-  padding2 && [
-    orientation === "vertical" && "pli-[4px]",
-    orientation === "horizontal" && "pbe-[4px]",
-    orientation === "all" && "pis-[4px] pbe-[4px]"
-  ],
-  snap && [
-    orientation === "vertical" && "snap-y snap-mandatory",
-    orientation === "horizontal" && "snap-x snap-mandatory",
-    orientation === "all" && "snap-both snap-mandatory"
-  ],
-  ...etc
-);
+var scrollAreaViewport = ({ orientation, autoHide, padding: padding2, snap, thin }, ...etc) => mx("bs-full is-full", orientation === "vertical" && "flex flex-col overflow-y-scroll", orientation === "horizontal" && "flex overflow-x-scroll", orientation === "all" && "overflow-scroll", thin ? "[&::-webkit-scrollbar]:is-[4px] [&::-webkit-scrollbar]:bs-[4px]" : "[&::-webkit-scrollbar]:is-[8px] [&::-webkit-scrollbar]:bs-[8px]", "[&::-webkit-scrollbar-corner]:bg-transparent", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-none", autoHide ? [
+  orientation === "vertical" && "group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-scrollbarThumb",
+  orientation === "horizontal" && "group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-scrollbarThumb",
+  orientation === "all" && "group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-scrollbarThumb"
+] : [
+  orientation === "vertical" && "[&::-webkit-scrollbar-thumb]:bg-scrollbarThumb",
+  orientation === "horizontal" && "[&::-webkit-scrollbar-thumb]:bg-scrollbarThumb",
+  orientation === "all" && "[&::-webkit-scrollbar-thumb]:bg-scrollbarThumb"
+], padding2 && [
+  orientation === "vertical" && "pli-[4px]",
+  orientation === "horizontal" && "pbe-[4px]",
+  orientation === "all" && "pis-[4px] pbe-[4px]"
+], snap && [
+  orientation === "vertical" && "snap-y snap-mandatory",
+  orientation === "horizontal" && "snap-x snap-mandatory",
+  orientation === "all" && "snap-both snap-mandatory"
+], ...etc);
 var scrollAreaTheme = {
   root: scrollAreaRoot,
   viewport: scrollAreaViewport
@@ -3408,6 +3397,7 @@ export {
   menuTheme,
   menuViewport,
   messageContent,
+  messageHeader,
   messageIcon,
   messageRoot,
   messageTheme,