@dxos/ui-theme 0.8.4-main.6fa680abb7 → 0.8.4-main.8360d9e660

package/dist/lib/browser/index.mjs

@@ -105,11 +105,6 @@ var hoverableFocusedWithinControls = "focus-within:[--controls-opacity:1]";
 var hoverableOpenControlItem = "hover-hover:aria-[expanded=true]:[--controls-opacity:1]";
 var hoverableControlItem = "opacity-(--controls-opacity)";
 
-// src/fragments/selected.ts
-var ghostHighlighted = "data-[highlighted]:bg-primary-100 dark:data-[highlighted]:bg-primary-600 hover:data-[highlighted]:bg-primary-150 hover:dark:data-[highlighted]:bg-primary-500";
-var ghostSelected = "aria-selected:bg-base-surface aria-selected:text-accent-text hover:aria-selected:text-accent-text-hover aria-selected:font-semibold aria-selected:tracking-normal transition-[color,font-variation-settings,letter-spacing]";
-var ghostSelectedContainerMd = "@md:aria-selected:bg-base-surface @md:aria-selected:text-accent-text @md:hover:aria-selected:text-accent-text-hover @md:aria-selected:font-semibold @md:aria-selected:tracking-normal @md:transition-[color,font-variation-settings,letter-spacing]";
-
 // src/util/hash-styles.ts
 var neutral = {
   hue: "neutral",
@@ -325,6 +320,9 @@ var composableProps = ({ className, classNames, ...props }, { className: default
 });
 
 // src/fragments/size.ts
+var largeIconSize = {
+  "--icon-size": "1.25rem"
+};
 var sizeWidthMap = /* @__PURE__ */ new Map([
   [
     0,
@@ -641,7 +639,6 @@ var computeSize = (value, defaultSize) => {
 var sizeValue = (size) => size === "px" ? 1 : size;
 
 // src/fragments/text.ts
-var textBlockWidth = "w-full max-w-text-content mx-auto";
 var descriptionTextPrimary = "text-sm font-normal text-base-surface-text";
 var descriptionMessage = "text-description border border-dashed border-separator rounded-sm p-4";
 
@@ -713,7 +710,7 @@ var breadcrumbTheme = {
 
 // src/theme/components/card.ts
 var cardRoot = ({ border, fullWidth }, ...etc) => mx("dx-card group/card relative flex flex-col w-full min-h-(--dx-rail-item) dx-card-min-width overflow-hidden", border && "bg-card-surface border border-separator dark:border-subdued-separator rounded-xs dx-focus-ring-group-y-indicator", fullWidth && "max-w-none!", ...etc);
-var cardToolbar = ({ coarse }, ...etc) => mx("dx-card__toolbar dx-density-fine bg-transparent col-span-3 !grid grid-cols-subgrid [contain:none]", coarse && "grid-cols-[var(--dx-l0-avatar-size)_minmax(0,1fr)_var(--dx-rail-item)]", ...etc);
+var cardToolbar = (_, ...etc) => mx("dx-card__toolbar dx-density-fine bg-transparent p-0! gap-0! col-span-3 grid! grid-cols-subgrid! [contain:none]", ...etc);
 var cardTitle = (_props, ...etc) => mx("dx-card__title grow truncate", ...etc);
 var cardContent = (_props, ...etc) => mx("dx-card__content contents [&>:last-child]:pb-1", ...etc);
 var cardHeading = ({ variant = "default" }, ...etc) => mx("dx-card__heading", variant === "default" && "py-1", variant === "subtitle" && "py-2 text-xs text-description font-medium uppercase", ...etc);
@@ -725,7 +722,7 @@ var cardAction = (_props, ...etc) => mx("dx-card__acztion col-span-3 !grid grid-
 var cardActionLabel = (_props, ...etc) => mx("dx-card__action-label min-w-0 flex-1 truncate", ...etc);
 var cardLink = (_props, ...etc) => mx("dx-card__link col-span-3 !grid grid-cols-subgrid group p-0! dx-button dx-focus-ring min-h-1!", ...etc);
 var cardLinkLabel = (_props, ...etc) => mx("dx-card__link-label min-w-0 flex-1 truncate", ...etc);
-var cardIconBlock = (_props, ...etc) => mx("dx-card__icon-block grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center", ...etc);
+var cardIconBlock = (_props, ...etc) => mx("dx-card__icon-block grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center [&>*]:p-1", ...etc);
 var cardTheme = {
   root: cardRoot,
   toolbar: cardToolbar,
@@ -749,7 +746,7 @@ var staticDefaultButtonColors = "bg-input-surface text-input-surface-text";
 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) => {
-  return mx("dx-button dx-focus-ring group max-w-full [&_span]:truncate", ...etc);
+  return mx("dx-button dx-focus-ring group [&_span]:truncate", ...etc);
 };
 var buttonGroup = (_props, ...etc) => {
   return mx("inline-flex rounded-xs [&>:first-child]:rounded-w-sm [&>:last-child]:rounded-ie-sm [&>button]:relative", ...etc);
@@ -786,7 +783,7 @@ var dialogTheme = {
 };
 
 // src/theme/components/icon.ts
-var iconRoot = ({ size }, etc) => mx("shrink-0 h-[1em] w-[1em] text-[var(--icons-color,currentColor)]", size && getSize(size), etc);
+var iconRoot = ({ size }, etc) => mx("shrink-0 text-[var(--icons-color,currentColor)]", size ? getSize(size) : "[width:var(--icon-size,1em)] [height:var(--icon-size,1em)]", etc);
 var iconTheme = {
   root: iconRoot
 };
@@ -1040,7 +1037,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", ghostHighlighted, ...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 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);
@@ -1117,18 +1114,11 @@ var toolbarLayout = "w-full shrink-0 flex flex-nowrap p-1 gap-1 items-center ove
 var toolbarRoot = ({ density, disabled, layoutManaged }, ...etc) => {
   return mx("bg-toolbar-surface dx-toolbar", density === "coarse" && "h-(--dx-rail-size) px-3!", disabled && "*:opacity-20", !layoutManaged && toolbarLayout, ...etc);
 };
-var toolbarInner = ({ layoutManaged }, ...etc) => {
-  return mx(!layoutManaged && [
-    "flex gap-1",
-    textBlockWidth
-  ], ...etc);
-};
 var toolbarText = (_, ...etc) => {
-  return mx("grow truncate items-center", textBlockWidth, ...etc);
+  return mx("px-2 grow truncate items-center", ...etc);
 };
 var toolbarTheme = {
   root: toolbarRoot,
-  inner: toolbarInner,
   text: toolbarText
 };
 
@@ -1213,7 +1203,7 @@ var panelRoot = (_, ...etc) => mx(
 var panelToolbar = (_, ...etc) => mx(
   // prettier-ignore
   "[grid-area:toolbar]",
-  "border-b border-subdued-separator relative",
+  "h-(--dx-toolbar-size)",
   "[.dx-main-mobile-layout_&]:px-3",
   ...etc
 );
@@ -1225,6 +1215,7 @@ var panelContent = (_, ...etc) => mx(
 var panelStatusbar = (_, ...etc) => mx(
   // prettier-ignore
   "[grid-area:statusbar]",
+  "h-(--dx-statusbar-size)",
   ...etc
 );
 var panelTheme = {
@@ -1335,10 +1326,7 @@ export {
   getStyles,
   ghostButtonColors,
   ghostFocusWithin,
-  ghostHighlighted,
   ghostHover,
-  ghostSelected,
-  ghostSelectedContainerMd,
   groupHoverControlItemWithTransition,
   hoverableControlItem,
   hoverableControls,
@@ -1353,6 +1341,7 @@ export {
   iconTheme,
   inputTextLabel,
   inputTheme,
+  largeIconSize,
   linkRoot,
   linkTheme,
   listItem,
@@ -1422,7 +1411,6 @@ export {
   surfaceZIndex,
   tagRoot,
   tagTheme,
-  textBlockWidth,
   textValence,
   toastActions,
   toastBody,
@@ -1431,7 +1419,6 @@ export {
   toastTheme,
   toastTitle,
   toastViewport,
-  toolbarInner,
   toolbarLayout,
   toolbarRoot,
   toolbarText,