@uncinq/css-components 1.19.0 → 1.21.0

package/css/components/button.css

@@ -42,7 +42,7 @@
         background-color: var(--btn-color-background-hover);
         border-color: var(--btn-color-border-hover);
         box-shadow: var(--btn-shadow-hover);
-        color: var(--btn-color-text-hover, var(--btn-color-text));
+        color: var(--btn-color-text-hover);
         text-decoration-color: var(--btn-color-text-decoration-hover);
       }
     }
@@ -59,6 +59,7 @@
     --btn-color-border: var(--color-brand);
     --btn-color-border-hover: var(--color-brand-hover);
     --btn-color-text: var(--color-text-on-brand);
+    --btn-color-text-hover: var(--color-text-on-brand);
   }
 
   .btn-control {
@@ -76,6 +77,7 @@
     --btn-color-border: var(--color-danger);
     --btn-color-border-hover: var(--color-danger-hover);
     --btn-color-text: var(--color-text-on-danger);
+    --btn-color-text-hover: var(--color-text-on-danger);
   }
 
   .btn-dark {
@@ -84,6 +86,7 @@
     --btn-color-border: var(--color-dark);
     --btn-color-border-hover: var(--color-dark-hover);
     --btn-color-text: var(--color-text-on-dark);
+    --btn-color-text-hover: var(--color-text-on-dark);
   }
 
   .btn-ghost {
@@ -101,6 +104,7 @@
     --btn-color-border: var(--color-info);
     --btn-color-border-hover: var(--color-info-hover);
     --btn-color-text: var(--color-text-on-info);
+    --btn-color-text-hover: var(--color-text-on-info);
   }
 
   .btn-light {
@@ -109,6 +113,7 @@
     --btn-color-border: var(--color-light);
     --btn-color-border-hover: var(--color-light-hover);
     --btn-color-text: var(--color-text-on-light);
+    --btn-color-text-hover: var(--color-text-on-light);
   }
 
   .btn-link {
@@ -133,6 +138,7 @@
     --btn-color-border: var(--color-neutral);
     --btn-color-border-hover: var(--color-neutral-hover);
     --btn-color-text: var(--color-text-on-neutral);
+    --btn-color-text-hover: var(--color-text-on-neutral);
   }
 
   .btn-primary {
@@ -141,6 +147,7 @@
     --btn-color-border: var(--color-brand);
     --btn-color-border-hover: var(--color-brand-hover);
     --btn-color-text: var(--color-text-on-brand);
+    --btn-color-text-hover: var(--color-text-on-brand);
   }
 
   .btn-secondary {
@@ -149,6 +156,7 @@
     --btn-color-border: var(--color-neutral);
     --btn-color-border-hover: var(--color-neutral-hover);
     --btn-color-text: var(--color-text-on-neutral);
+    --btn-color-text-hover: var(--color-text-on-neutral);
   }
 
   .btn-success {
@@ -157,6 +165,7 @@
     --btn-color-border: var(--color-success);
     --btn-color-border-hover: var(--color-success-hover);
     --btn-color-text: var(--color-text-on-success);
+    --btn-color-text-hover: var(--color-text-on-success);
   }
 
   .btn-warning {
@@ -165,6 +174,7 @@
     --btn-color-border: var(--color-warning);
     --btn-color-border-hover: var(--color-warning-hover);
     --btn-color-text: var(--color-text-on-warning);
+    --btn-color-text-hover: var(--color-text-on-warning);
   }
 
   /* Sizes */

package/css/components/panel.css

@@ -61,11 +61,20 @@
   /* ── Panel ─────────────────────────────────────────────────────── */
 
   :where(.modal, .drawer) {
+    /* The panel paints its own background, so it restates the whole text
+       context a host may have set for its own (a header recolours text,
+       muted text, surtitles and links). Muted and surtitle are derived again
+       here: a value derived on an ancestor is inherited already computed, so
+       it would keep the host's colour. */
+    --color-credit: var(--color-text-muted);
     --color-link: var(--panel-color-text);
     --color-link-active: var(--panel-color-text-active);
     --color-link-hover: var(--panel-color-text-hover);
+    --color-text: var(--panel-color-text);
+    --color-text-muted: oklch(from var(--color-text) l c h / var(--opacity-muted));
     --nav-color-text: var(--color-link);
     --nav-color-text-active: var(--color-link-active);
+    --surtitle-color-text: var(--color-text-muted);
 
     background-color: var(--panel-color-background);
     border: 0;
@@ -175,11 +184,15 @@
          them invalid at computed-value time rather than page-valued, and every
          link would fall back to the surrounding text colour instead of the
          site's link colour. Keep this list in step with the panel rule above. */
+      --color-credit: inherit;
       --color-link: inherit;
       --color-link-active: inherit;
       --color-link-hover: inherit;
+      --color-text: inherit;
+      --color-text-muted: inherit;
       --nav-color-text: inherit;
       --nav-color-text-active: inherit;
+      --surtitle-color-text: inherit;
 
       background-color: transparent;
       block-size: auto;
@@ -224,11 +237,15 @@
          them invalid at computed-value time rather than page-valued, and every
          link would fall back to the surrounding text colour instead of the
          site's link colour. Keep this list in step with the panel rule above. */
+      --color-credit: inherit;
       --color-link: inherit;
       --color-link-active: inherit;
       --color-link-hover: inherit;
+      --color-text: inherit;
+      --color-text-muted: inherit;
       --nav-color-text: inherit;
       --nav-color-text-active: inherit;
+      --surtitle-color-text: inherit;
 
       background-color: transparent;
       block-size: auto;
@@ -273,11 +290,15 @@
          them invalid at computed-value time rather than page-valued, and every
          link would fall back to the surrounding text colour instead of the
          site's link colour. Keep this list in step with the panel rule above. */
+      --color-credit: inherit;
       --color-link: inherit;
       --color-link-active: inherit;
       --color-link-hover: inherit;
+      --color-text: inherit;
+      --color-text-muted: inherit;
       --nav-color-text: inherit;
       --nav-color-text-active: inherit;
+      --surtitle-color-text: inherit;
 
       background-color: transparent;
       block-size: auto;
@@ -322,11 +343,15 @@
          them invalid at computed-value time rather than page-valued, and every
          link would fall back to the surrounding text colour instead of the
          site's link colour. Keep this list in step with the panel rule above. */
+      --color-credit: inherit;
       --color-link: inherit;
       --color-link-active: inherit;
       --color-link-hover: inherit;
+      --color-text: inherit;
+      --color-text-muted: inherit;
       --nav-color-text: inherit;
       --nav-color-text-active: inherit;
+      --surtitle-color-text: inherit;
 
       background-color: transparent;
       block-size: auto;

package/css/components/push.css

@@ -72,6 +72,7 @@
       --btn-color-border: var(--color-light);
       --btn-color-border-hover: var(--color-light-hover);
       --btn-color-text: var(--color-text-on-light);
+      --btn-color-text-hover: var(--color-text-on-light);
       --color-heading: var(--push-color);
       --color-link: var(--push-color);
       --color-link-hover: var(--push-color);

package/docs/buttons/btn.md

@@ -30,7 +30,7 @@ Variants compose freely: `class="btn btn-danger btn-sm btn-ghost"`.
 | `.btn-warning` | Warning |
 | `.btn-info` | Informational |
 
-Each sets four properties together: background, border, their hover values, and the text colour.
+Each sets its background, border and text colour, with their hover values.
 
 ```css
 .btn-danger {
@@ -39,12 +39,13 @@ Each sets four properties together: background, border, their hover values, and
   --btn-color-border: var(--color-danger);
   --btn-color-border-hover: var(--color-danger-hover);
   --btn-color-text: var(--color-text-on-danger);
+  --btn-color-text-hover: var(--color-text-on-danger);
 }
 ```
 
 The text colour always comes from the matching `--color-text-on-*` semantic token, so contrast survives a change to the underlying colour. That pairing is the reason to rebrand by redefining `--color-brand` rather than `--btn-color-background`.
 
-The text keeps its colour on hover: `.btn` reads `var(--btn-color-text-hover, var(--btn-color-text))`, and `--btn-color-text-hover` is no token, so it is unset unless a variant or a context sets it. A context that recolours its buttons, as a push over a dark media does, only needs `--btn-color-text`.
+The hover text colour has to be set alongside the text colour, even when the two are the same. The `--btn-color-text-hover` token defaults to `var(--btn-color-text)`, but on `:root`, where it resolves to the default text colour once and for all: a variant or a context that only changes `--btn-color-text`, as a push over a dark media does, would see its text turn back to `--color-text-on-brand` on hover.
 
 `.btn-primary` and `.btn-brand` resolve to exactly the same values, as do `.btn-secondary` and `.btn-neutral`. The intent names exist so a page can say *primary action* without deciding which colour that is.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinq/css-components",
-  "version": "1.19.0",
+  "version": "1.21.0",
   "description": "Framework-agnostic CSS component implementations.",
   "license": "MIT",
   "repository": {