@adecore/ui 0.35.4 → 0.36.0

package/src/theme.css

@@ -17,9 +17,16 @@
        than the pressed step, so hover reads as a lift and pressed as the heavier state. A white
        popup cannot go lighter, so in this theme the step is the softest gray there is. */
     --surface-hover: #f3f3f5;
+    /* The hover of something that draws its own border: a smaller step, so the ground never passes
+       its edge and the outline stays visible under the pointer. */
+    --surface-hover-edged: color-mix(in srgb, var(--surface-raised) 60%, var(--surface-hover));
     /* The pressed step of a toggle. It cannot be `--surface-raised`, which equals `--surface` in the
        light theme, and it has to sit a shade past `--surface-hover` so pressed outranks hover. */
     --surface-active: #dcdce2;
+    /* What a person types or picks in: a step lighter than the ground it stands on in the dark theme, the raised white here. */
+    --field: var(--surface-raised);
+    /* An edge of its own, since an app may set `--border` to a solid separator that vanishes against a field. */
+    --field-border: rgb(0 0 0 / 0.11);
     /* Borders carry an alpha rather than a gray of their own, so a line takes the color of whatever
        it is drawn over instead of fighting it. A gray hairline over a tinted surface reads as a
        smudge; the same line in black at a low alpha stays a line. Everything with a surface of its
@@ -41,6 +48,9 @@
     --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
     --accent-text: #ffffff;
     --selection: rgb(var(--accent-rgb) / 0.55);
+    /* The part of a name that answers a filter or a search. A tint of its own rather than the
+       selection's, so a selected row that matches still shows both. */
+    --match: color-mix(in srgb, var(--status-needs-you) 30%, transparent);
     --float-shadow:
         0 1px 2px -1px rgb(0 0 0 / 0.08),
         0 3px 6px -2px rgb(0 0 0 / 0.07),
@@ -106,9 +116,12 @@
     --bg: #0d0d10;
     --surface: #131316;
     --surface-raised: #18181c;
-    --surface-sunken: #08080a;
+    --surface-sunken: #0b0b0e;
     --surface-hover: #202024;
     --surface-active: #28282e;
+    /* Derived, so an app that tints its surfaces tints its fields along. */
+    --field: color-mix(in srgb, var(--surface) 40%, var(--surface-hover));
+    --field-border: rgb(255 255 255 / 0.1);
     /* White at a low alpha, which is what gives a dark surface its lifted edge. */
     --border: rgb(255 255 255 / 0.07);
     --separator: oklch(0.236 0.006 285.956);
@@ -118,6 +131,7 @@
     --text-muted: #9a9aa6;
     --text-faint: #5f5f6b;
     --selection: rgb(var(--accent-rgb) / 0.6);
+    --match: color-mix(in srgb, var(--status-needs-you) 28%, transparent);
     --float-shadow:
         0 1px 2px -1px rgb(0 0 0 / 0.3),
         0 2px 4px rgb(0 0 0 / 0.24),
@@ -233,7 +247,10 @@
     --color-surface-sunken: var(--surface-sunken);
     --color-surface-idle: var(--surface-idle);
     --color-surface-hover: var(--surface-hover);
+    --color-surface-hover-edged: var(--surface-hover-edged);
     --color-surface-active: var(--surface-active);
+    --color-field: var(--field);
+    --color-field-border: var(--field-border);
     --color-border: var(--border);
     --color-separator: var(--separator);
     --color-border-strong: var(--border-strong);
@@ -261,6 +278,10 @@
 }
 
 @layer base {
+    /* Whatever a click acts on shows the hand; a disabled one shows that nothing will. Menu rows keep the arrow (`.menu-item`). */
+    :where(button, a[href], summary, label[for], [role="button"], [role="checkbox"], [role="switch"], [role="radio"], [role="tab"], [role="option"]):not(:disabled, [aria-disabled="true"], [data-disabled]) {
+        cursor: pointer;
+    }
     /*
      * A border with an alpha has to mix with what is behind the element, not with the element's own
      * background: by default a background runs on under the border and a node's white surface would
@@ -326,8 +347,8 @@
         width: 100%;
         padding: 0 10px;
         border-radius: 8px;
-        border: 1px solid var(--border);
-        background: var(--surface);
+        border: 1px solid var(--field-border);
+        background-color: var(--field);
         color: var(--text);
         font-size: var(--text-sm);
         outline: none;
@@ -345,6 +366,10 @@
         border-radius: 6px;
         font-size: var(--text-xs);
     }
+    /* A field inside a card that draws the edge and the focus for it. The border stays as a transparent
+       line, so the text sits where it would in a field of its own. */
+    .field-bare { border-color: transparent; background: transparent; }
+    .field-bare:focus-visible { outline: none; }
     /* Keyboard focus is visible on every control; pointer focus stays quiet. `.focus-ring` is the
        same outline for something that takes focus without being a button, such as a row in a list. */
     .icon-btn:focus-visible, .menu-item:focus-visible, button:focus-visible, .focus-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@@ -683,6 +708,11 @@
     .adecore-tree-decoration {
         font-variant-numeric: tabular-nums;
     }
+    /* A row's own icon in place of the tree's glyph, in the glyph's color. */
+    .adecore-tree-icon {
+        display: inline-flex;
+        color: var(--text-muted);
+    }
     /* A tree whose rows slide sideways: every part of a row keeps its width and moves with the shift. */
     .adecore-tree[data-overflow="scroll"] .adecore-tree-row {
         overflow: clip;