@dxos/ui-theme 0.8.4-main.2244d791bb → 0.8.4-main.3eb6e50203

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 gap-2 density-coarse", ...etc);
+var dialogActionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center 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,26 +2969,22 @@ var menuTheme = {
 
 // src/styles/components/message.ts
 var messageRoot = ({ 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);
+  return mx("p-trimSm rounded-md", messageValence(valence), etc);
 };
 var messageTitle = (_, etc) => {
-  return mx("col-start-2 text-lg flex gap-trimSm", etc);
+  return mx("font-medium flex gap-trimSm", etc);
 };
 var messageIcon = (_, etc) => {
-  return mx("col-start-1", etc);
+  return mx("flex bs-[1lh] items-center", etc);
 };
 var messageContent = (_, etc) => {
-  return mx("col-span-2 grid grid-cols-subgrid col-start-2 first:font-medium", etc);
+  return mx("first:font-medium", etc);
 };
 var messageTheme = {
   root: messageRoot,
-  header: messageHeader,
+  content: messageContent,
   icon: messageIcon,
-  title: messageTitle,
-  content: messageContent
+  title: messageTitle
 };
 
 // src/styles/components/popover.ts
@@ -3020,23 +3016,38 @@ 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-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 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 scrollAreaTheme = {
   root: scrollAreaRoot,
   viewport: scrollAreaViewport
@@ -3397,7 +3408,6 @@ export {
   menuTheme,
   menuViewport,
   messageContent,
-  messageHeader,
   messageIcon,
   messageRoot,
   messageTheme,