cauldron/packages/styles/density.css at develop · dequelabs/cauldron · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/**
 * Compact density preset for constrained viewports.
 *
 * Apply the `.cauldron--density-compact` class to the root element (e.g. <body>)
 * alongside the theme class to get tighter sizing across all components.
 * This is designed for embedded UIs like browser extension panels.
 *
 * Works orthogonally to theme classes:
 *   <body class="cauldron--theme-dark cauldron--density-compact">
 */

.cauldron--density-compact {
  /* TopBar: static positioning for embedded contexts, compact button layout */
  --top-bar-position: static;
  --top-bar-padding-inline-start: var(--space-small);
  --top-bar-menu-flex: initial;
  --top-bar-button-max-width: 80px;
  --top-bar-button-flex-direction: column;
  --top-bar-button-font-size: var(--text-size-smallest);
  --top-bar-item-padding: 0;

  /* Tabs: fill width, smaller font */
  --tabs-width: auto;
  --tab-font-size: var(--text-size-small);
  --tab-flex: 1;

  /* Tags: use small variant sizing by default */
  --tag-height: var(--tag-small-height);
  --tag-font-size: var(--text-size-smaller);

  /* Dialog: viewport-aware positioning for short viewports (e.g. docked devtools) */
  --dialog-vertical-offset: clamp(8px, calc(18vh - 50px), 100px);
  --dialog-content-line-height: 1.4;

  /* OptionsMenu: auto-width for narrow viewports */
  --options-menu-width: auto;

  /* Toast: static positioning (no fixed TopBar to anchor to) */
  --toast-position: static;

  /* Field select: constrained width */
  --select-width: clamp(0px, 25rem, 100%);

  /* Code: inline compact display */
  --code-display: inline;
  --code-padding: var(--space-quarter) var(--space-half);
  --code-border: none;
}

/* TopBar buttons: vertical icon-above-label layout in compact mode */
.cauldron--density-compact .TopBar li button:not(.Link) {
  display: flex;
  align-items: center;
  white-space: normal;
}

/* TopBar: restore padding on items containing text links (not icon buttons) */
.cauldron--density-compact .TopBar > ul > li:has(button.Link) {
  padding: 0 var(--space-small);
}