@wtfalch/design 0.5.0 → 0.7.0

package/dist/styles/index.css

@@ -93,7 +93,28 @@ body::before {
    where the flat grey reads as recessed rather than as something to use. It is
    derived rather than declared -- a new token would have to be added to every
    theme in `themes.ts`, and a theme that missed it would lose its controls. */
+/* An anchor drawn as a button. Three things the element brings that a
+   `<button>` does not, and all three have to go: the underline, the link
+   colour, and the text alignment a block anchor inherits. `cursor: pointer`
+   it already has. Disabled is `aria-disabled` here -- an anchor ignores the
+   native attribute -- so every `:disabled` rule above has an
+   `[aria-disabled='true']` twin rather than a rewrite, which leaves each
+   `button` selector at the specificity it had and every committed baseline
+   untouched. */
+a.btn {
+  text-decoration: none;
+  color: var(--text);
+  text-align: center;
+}
+
+a.btn[aria-disabled='true'] {
+  /* A disabled anchor still takes the pointer, so say so. The click itself is
+     blocked in the capture phase by the component. */
+  cursor: not-allowed;
+}
+
 button,
+a.btn,
 input,
 textarea,
 select {
@@ -117,7 +138,8 @@ select {
    the icon; the button simply had no opinion about how to arrange two things.
    `inline-flex` and a gap gives it one, and the gap replaces the space
    character people were putting between an icon and its label. */
-button {
+button,
+a.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -143,7 +165,8 @@ button[aria-pressed='true']:hover:not(:disabled) { border-color: var(--accent);
 
 /* The glyph never shrinks: in a narrow row flexbox would take it from the icon
    before the text, and half an icon is not a smaller icon. */
-button > svg { flex: none; }
+button > svg,
+a.btn > svg { flex: none; }
 
 .size-sm { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
 
@@ -169,6 +192,7 @@ input, textarea, select { width: 100%; }
 textarea { resize: none; }
 
 button:hover:not(:disabled),
+a.btn:hover:not([aria-disabled='true']),
 input:hover:not(:disabled),
 textarea:hover:not(:disabled),
 select:hover:not(:disabled) { border-color: var(--accent); }
@@ -177,6 +201,7 @@ select:hover:not(:disabled) { border-color: var(--accent); }
    `:focus` on the fields because a focused field is a place you are typing and
    should say so however you got there. */
 button:focus-visible,
+a.btn:focus-visible,
 input:focus,
 textarea:focus,
 select:focus { outline: none; border-color: var(--accent); }
@@ -270,11 +295,13 @@ input[type='checkbox']:disabled,
 input[type='radio']:disabled { cursor: not-allowed; background: var(--panel-2); }
 
 button:disabled,
+a.btn[aria-disabled='true'],
 input:disabled,
 textarea:disabled,
 select:disabled { opacity: 0.45; cursor: not-allowed; }
 
-button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+button.primary,
+a.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
 
 /* A disabled primary is not a faded primary.
    `opacity: .45` was the whole of it, and a coloured fill at 45% is still a
@@ -282,7 +309,8 @@ button.primary { background: var(--accent); border-color: var(--accent); color:
    thing on the panel. That got worse when onboarding started holding people at
    a disabled Next. So it gives up the fill entirely and becomes the shape of a
    disabled control -- the opacity then has nothing left to do. */
-button.primary:disabled {
+button.primary:disabled,
+a.btn.primary[aria-disabled='true'] {
   background: var(--panel-2);
   border-color: var(--border);
   color: var(--muted);
@@ -352,13 +380,15 @@ button[aria-busy='true']::after {
 
 /* Quiet: no border, no fill. For the action beside the action -- Cancel next to
    Save -- where a bordered box competes with the thing it is next to. */
-button.ghost {
+button.ghost,
+a.btn.ghost {
   background: transparent;
   border-color: transparent;
   color: var(--muted);
 }
 
-button.ghost:hover:not(:disabled) {
+button.ghost:hover:not(:disabled),
+a.btn.ghost:hover:not([aria-disabled='true']) {
   background: var(--panel-2);
   border-color: transparent;
   color: var(--text);
@@ -565,19 +595,22 @@ button.ghost:hover:not(:disabled) {
 /* `:where(button)` so this carries no specificity of its own: a component's
    press rule below -- a card, a tab, a rail item, all of them buttons --
    wins by coming later, instead of every one having to restate `button`. */
-:where(button):active:not(:disabled) {
+:where(button):active:not(:disabled),
+:where(a.btn):active:not([aria-disabled='true']) {
   background: color-mix(in srgb, var(--text) var(--press-ink), var(--control));
   border-color: var(--accent);
   transform: scale(var(--press-scale));
   transition: none;
 }
 
-button.primary:active:not(:disabled) {
+button.primary:active:not(:disabled),
+a.btn.primary:active:not([aria-disabled='true']) {
   background: color-mix(in srgb, var(--text) var(--press-ink), var(--accent));
   border-color: color-mix(in srgb, var(--text) var(--press-ink), var(--accent));
 }
 
-button.ghost:active:not(:disabled) {
+button.ghost:active:not(:disabled),
+a.btn.ghost:active:not([aria-disabled='true']) {
   background: color-mix(in srgb, var(--text) var(--press-ink), var(--panel-2));
   border-color: transparent;
 }
@@ -800,7 +833,8 @@ input:active, textarea:active, select:active { transform: none; }
 /* Full width, for the one action a card or a step is about. Not a size: a
    `block` button is the same height as any other, it just stops being a thing
    you have to aim at. */
-button.block { display: flex; width: 100%; }
+button.block,
+a.btn.block { display: flex; width: 100%; }
 
 /* The default is `size-md`, spelled once for every control.
    The paragraph above promised one scale for buttons, inputs and selects, and
@@ -809,6 +843,7 @@ button.block { display: flex; width: 100%; }
    could line up. The download modal's search box against its Search button was
    the version you could see from across the room. */
 button,
+a.btn,
 input,
 textarea,
 select,
@@ -959,18 +994,21 @@ select,
 
 /* ---- ./dangerzone.css ---- */
 /* Destructive, and legible as such standing still. */
-button.danger {
+button.danger,
+a.btn.danger {
   color: var(--bad);
   border-color: color-mix(in srgb, var(--bad) 45%, var(--border-strong));
 }
 
-button.danger:hover:not(:disabled) {
+button.danger:hover:not(:disabled),
+a.btn.danger:hover:not([aria-disabled='true']) {
   background: color-mix(in srgb, var(--bad) 12%, var(--panel));
   border-color: var(--bad);
   color: var(--bad);
 }
 
-button.danger:active:not(:disabled) {
+button.danger:active:not(:disabled),
+a.btn.danger:active:not([aria-disabled='true']) {
   background: color-mix(in srgb, var(--bad) 20%, var(--panel));
   border-color: var(--bad);
 }
@@ -3147,6 +3185,72 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    anchored surfaces (`.pop`, `.menu-sheet`, `.cmd`) sit over everything and a
    rule of equal specificity that came earlier would lose to whatever the
    sheets they cover happen to set. */
+/* ---- ./kbd.css ---- */
+/* One rule where there were two identical ones, in `menu.css` and
+   `command.css`. Both keep their class as well, so `Menu` and `Command` are
+   `.kbd .menu-key` and `.kbd .cmd-key` now: the declarations are the same, so
+   nothing moves, and the context classes stay available for a rule that ever
+   needs to tell the two apart. */
+.kbd {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  color: var(--muted);
+  letter-spacing: var(--tracking);
+}
+
+/* ---- ./stat.css ---- */
+/* A figure with furniture. `--space-1` between the three lines because they
+   are one object read top to bottom, not three paragraphs. */
+.stat {
+  display: grid;
+  gap: var(--space-1);
+  padding: var(--space-4);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--panel);
+}
+
+/* Inside something already bordered. A bordered tile in a bordered row is two
+   boxes saying one thing. */
+.stat-bare {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  gap: 0;
+  line-height: 1.25;
+}
+
+.stat > p { margin: 0; }
+
+.stat-label {
+  color: var(--muted);
+  font-size: var(--text-xs);
+}
+
+/* Tabular figures are the point: a column of numbers is compared by its
+   digits' positions, and proportional ones move them per row. */
+.stat-value {
+  font-size: var(--text-lg);
+  font-weight: var(--weight-strong);
+  font-variant-numeric: tabular-nums;
+}
+
+.stat-bare .stat-value { font-size: var(--text-sm); }
+
+.stat-note {
+  color: var(--muted);
+  font-size: var(--text-xs);
+}
+
+/* Only the figure takes the colour. Colouring the label too makes the tile a
+   status box, and a tone here is a remark about the number. */
+.stat[data-tone='info'] .stat-value { color: var(--info); }
+.stat[data-tone='good'] .stat-value { color: var(--good); }
+.stat[data-tone='warn'] .stat-value { color: var(--warn); }
+.stat[data-tone='bad'] .stat-value { color: var(--bad); }
+
 /* ---- ./scrollarea.css ---- */
 /* A box that scrolls, with its edges drawn.
    

package/dist/tf.css

@@ -363,7 +363,28 @@ body::before {
    where the flat grey reads as recessed rather than as something to use. It is
    derived rather than declared -- a new token would have to be added to every
    theme in `themes.ts`, and a theme that missed it would lose its controls. */
+/* An anchor drawn as a button. Three things the element brings that a
+   `<button>` does not, and all three have to go: the underline, the link
+   colour, and the text alignment a block anchor inherits. `cursor: pointer`
+   it already has. Disabled is `aria-disabled` here -- an anchor ignores the
+   native attribute -- so every `:disabled` rule above has an
+   `[aria-disabled='true']` twin rather than a rewrite, which leaves each
+   `button` selector at the specificity it had and every committed baseline
+   untouched. */
+a.btn {
+  text-decoration: none;
+  color: var(--text);
+  text-align: center;
+}
+
+a.btn[aria-disabled='true'] {
+  /* A disabled anchor still takes the pointer, so say so. The click itself is
+     blocked in the capture phase by the component. */
+  cursor: not-allowed;
+}
+
 button,
+a.btn,
 input,
 textarea,
 select {
@@ -387,7 +408,8 @@ select {
    the icon; the button simply had no opinion about how to arrange two things.
    `inline-flex` and a gap gives it one, and the gap replaces the space
    character people were putting between an icon and its label. */
-button {
+button,
+a.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -413,7 +435,8 @@ button[aria-pressed='true']:hover:not(:disabled) { border-color: var(--accent);
 
 /* The glyph never shrinks: in a narrow row flexbox would take it from the icon
    before the text, and half an icon is not a smaller icon. */
-button > svg { flex: none; }
+button > svg,
+a.btn > svg { flex: none; }
 
 .size-sm { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
 
@@ -439,6 +462,7 @@ input, textarea, select { width: 100%; }
 textarea { resize: none; }
 
 button:hover:not(:disabled),
+a.btn:hover:not([aria-disabled='true']),
 input:hover:not(:disabled),
 textarea:hover:not(:disabled),
 select:hover:not(:disabled) { border-color: var(--accent); }
@@ -447,6 +471,7 @@ select:hover:not(:disabled) { border-color: var(--accent); }
    `:focus` on the fields because a focused field is a place you are typing and
    should say so however you got there. */
 button:focus-visible,
+a.btn:focus-visible,
 input:focus,
 textarea:focus,
 select:focus { outline: none; border-color: var(--accent); }
@@ -540,11 +565,13 @@ input[type='checkbox']:disabled,
 input[type='radio']:disabled { cursor: not-allowed; background: var(--panel-2); }
 
 button:disabled,
+a.btn[aria-disabled='true'],
 input:disabled,
 textarea:disabled,
 select:disabled { opacity: 0.45; cursor: not-allowed; }
 
-button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+button.primary,
+a.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
 
 /* A disabled primary is not a faded primary.
    `opacity: .45` was the whole of it, and a coloured fill at 45% is still a
@@ -552,7 +579,8 @@ button.primary { background: var(--accent); border-color: var(--accent); color:
    thing on the panel. That got worse when onboarding started holding people at
    a disabled Next. So it gives up the fill entirely and becomes the shape of a
    disabled control -- the opacity then has nothing left to do. */
-button.primary:disabled {
+button.primary:disabled,
+a.btn.primary[aria-disabled='true'] {
   background: var(--panel-2);
   border-color: var(--border);
   color: var(--muted);
@@ -622,13 +650,15 @@ button[aria-busy='true']::after {
 
 /* Quiet: no border, no fill. For the action beside the action -- Cancel next to
    Save -- where a bordered box competes with the thing it is next to. */
-button.ghost {
+button.ghost,
+a.btn.ghost {
   background: transparent;
   border-color: transparent;
   color: var(--muted);
 }
 
-button.ghost:hover:not(:disabled) {
+button.ghost:hover:not(:disabled),
+a.btn.ghost:hover:not([aria-disabled='true']) {
   background: var(--panel-2);
   border-color: transparent;
   color: var(--text);
@@ -835,19 +865,22 @@ button.ghost:hover:not(:disabled) {
 /* `:where(button)` so this carries no specificity of its own: a component's
    press rule below -- a card, a tab, a rail item, all of them buttons --
    wins by coming later, instead of every one having to restate `button`. */
-:where(button):active:not(:disabled) {
+:where(button):active:not(:disabled),
+:where(a.btn):active:not([aria-disabled='true']) {
   background: color-mix(in srgb, var(--text) var(--press-ink), var(--control));
   border-color: var(--accent);
   transform: scale(var(--press-scale));
   transition: none;
 }
 
-button.primary:active:not(:disabled) {
+button.primary:active:not(:disabled),
+a.btn.primary:active:not([aria-disabled='true']) {
   background: color-mix(in srgb, var(--text) var(--press-ink), var(--accent));
   border-color: color-mix(in srgb, var(--text) var(--press-ink), var(--accent));
 }
 
-button.ghost:active:not(:disabled) {
+button.ghost:active:not(:disabled),
+a.btn.ghost:active:not([aria-disabled='true']) {
   background: color-mix(in srgb, var(--text) var(--press-ink), var(--panel-2));
   border-color: transparent;
 }
@@ -1070,7 +1103,8 @@ input:active, textarea:active, select:active { transform: none; }
 /* Full width, for the one action a card or a step is about. Not a size: a
    `block` button is the same height as any other, it just stops being a thing
    you have to aim at. */
-button.block { display: flex; width: 100%; }
+button.block,
+a.btn.block { display: flex; width: 100%; }
 
 /* The default is `size-md`, spelled once for every control.
    The paragraph above promised one scale for buttons, inputs and selects, and
@@ -1079,6 +1113,7 @@ button.block { display: flex; width: 100%; }
    could line up. The download modal's search box against its Search button was
    the version you could see from across the room. */
 button,
+a.btn,
 input,
 textarea,
 select,
@@ -1229,18 +1264,21 @@ select,
 
 /* ---- ./dangerzone.css ---- */
 /* Destructive, and legible as such standing still. */
-button.danger {
+button.danger,
+a.btn.danger {
   color: var(--bad);
   border-color: color-mix(in srgb, var(--bad) 45%, var(--border-strong));
 }
 
-button.danger:hover:not(:disabled) {
+button.danger:hover:not(:disabled),
+a.btn.danger:hover:not([aria-disabled='true']) {
   background: color-mix(in srgb, var(--bad) 12%, var(--panel));
   border-color: var(--bad);
   color: var(--bad);
 }
 
-button.danger:active:not(:disabled) {
+button.danger:active:not(:disabled),
+a.btn.danger:active:not([aria-disabled='true']) {
   background: color-mix(in srgb, var(--bad) 20%, var(--panel));
   border-color: var(--bad);
 }
@@ -3417,6 +3455,72 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    anchored surfaces (`.pop`, `.menu-sheet`, `.cmd`) sit over everything and a
    rule of equal specificity that came earlier would lose to whatever the
    sheets they cover happen to set. */
+/* ---- ./kbd.css ---- */
+/* One rule where there were two identical ones, in `menu.css` and
+   `command.css`. Both keep their class as well, so `Menu` and `Command` are
+   `.kbd .menu-key` and `.kbd .cmd-key` now: the declarations are the same, so
+   nothing moves, and the context classes stay available for a rule that ever
+   needs to tell the two apart. */
+.kbd {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  color: var(--muted);
+  letter-spacing: var(--tracking);
+}
+
+/* ---- ./stat.css ---- */
+/* A figure with furniture. `--space-1` between the three lines because they
+   are one object read top to bottom, not three paragraphs. */
+.stat {
+  display: grid;
+  gap: var(--space-1);
+  padding: var(--space-4);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--panel);
+}
+
+/* Inside something already bordered. A bordered tile in a bordered row is two
+   boxes saying one thing. */
+.stat-bare {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  gap: 0;
+  line-height: 1.25;
+}
+
+.stat > p { margin: 0; }
+
+.stat-label {
+  color: var(--muted);
+  font-size: var(--text-xs);
+}
+
+/* Tabular figures are the point: a column of numbers is compared by its
+   digits' positions, and proportional ones move them per row. */
+.stat-value {
+  font-size: var(--text-lg);
+  font-weight: var(--weight-strong);
+  font-variant-numeric: tabular-nums;
+}
+
+.stat-bare .stat-value { font-size: var(--text-sm); }
+
+.stat-note {
+  color: var(--muted);
+  font-size: var(--text-xs);
+}
+
+/* Only the figure takes the colour. Colouring the label too makes the tile a
+   status box, and a tone here is a remark about the number. */
+.stat[data-tone='info'] .stat-value { color: var(--info); }
+.stat[data-tone='good'] .stat-value { color: var(--good); }
+.stat[data-tone='warn'] .stat-value { color: var(--warn); }
+.stat[data-tone='bad'] .stat-value { color: var(--bad); }
+
 /* ---- ./scrollarea.css ---- */
 /* A box that scrolls, with its edges drawn.