@adia-ai/web-components 0.8.23 → 0.8.25

package/patterns/profile-public-and-verification/profile-public-and-verification.examples.html

@@ -38,7 +38,7 @@
               <col-ui gap="1" grow>
                 <row-ui gap="2" align="center">
                   <text-ui strong size="lg">Kim Granlund</text-ui>
-                  <tag-ui size="sm" variant="primary" icon-leading="seal-check">Verified</tag-ui>
+                  <tag-ui size="sm" variant="accent" icon-leading="seal-check">Verified</tag-ui>
                 </row-ui>
                 <text-ui color="subtle">Founder · AdiaUI · Reykjavík, IS</text-ui>
                 <text-ui>Building the AdiaUI web-components library and the A2UI generative-UI runtime. Previously at Construct, before that at Modular.</text-ui>
@@ -178,7 +178,7 @@
         <header>
           <span slot="heading" variant="section">
             You're verified
-            <tag-ui size="sm" variant="primary" icon-leading="seal-check">Verified</tag-ui>
+            <tag-ui size="sm" variant="accent" icon-leading="seal-check">Verified</tag-ui>
           </span>
         </header>
         <section>

package/styles/api/parametric-scope.css

@@ -0,0 +1,81 @@
+/* adia:attribute-api/parametric-scope — [data-parametric-scope] re-derivation.
+   gh#570: custom properties resolve their calc()/clamp() formula at the
+   DECLARING element's own cascade, then inherit the already-resolved value
+   down. The primitive layer (foundation/{radius,space,size}.css) declares
+   every --a-radius-, --a-space-, and --a-size- formula exactly once, on
+   :root — so a descendant overriding --a-density/--a-radius-k (e.g. a
+   theme-panel[parametric target="#some-scoped-element"]) never causes
+   those derived tokens to re-resolve for its own subtree; it only affects
+   what --a-density/--a-radius-k itself reads as, everywhere DOWNSTREAM
+   formulas are declared (which is nowhere but :root).
+
+   [data-parametric-scope] is set by theme-panel.js on a non-root [target]
+   when [parametric] is active (never authored by hand) and mirrors these
+   SAME formula bodies verbatim so that scoped subtree gets its own working
+   copy of the derivation chain. This is the established codebase pattern,
+   not a new one — [size="sm"] below in this same file already duplicates
+   --a-size-sm's calc() rather than only pointing at it, for the identical
+   reason (a scoped attribute needs its OWN resolved value, not :root's).
+
+   Layer position: imported into layer(utilities), same as the rest of this
+   file — wins over foundation/'s layer(tokens) by layer order, though for
+   a non-root element that never mattered (no competing :root rule exists
+   there to begin with). */
+
+[data-parametric-scope] {
+  /* ── Radius (foundation/radius.css) ── */
+  --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
+  --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
+  --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
+  --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));
+  --a-radius: var(--a-radius-md);
+
+  /* ── Spacing (foundation/space.css) ── */
+  --a-space-0-5: calc(var(--a-density) * 0.125rem);
+  --a-space-1: calc(var(--a-density) * 0.25rem);
+  --a-space-1-5: calc(var(--a-density) * 0.375rem);
+  --a-space-2: calc(var(--a-density) * 0.5rem);
+  --a-space-2-5: calc(var(--a-density) * 0.625rem);
+  --a-space-3: calc(var(--a-density) * 0.75rem);
+  --a-space-3-5: calc(var(--a-density) * 0.875rem);
+  --a-space-4: calc(var(--a-density) * 1rem);
+  --a-space-4-5: calc(var(--a-density) * 1.125rem);
+  --a-space-5: calc(var(--a-density) * 1.25rem);
+  --a-space-6: calc(var(--a-density) * 1.5rem);
+  --a-space-7: calc(var(--a-density) * 1.75rem);
+  --a-space-8: calc(var(--a-density) * 2rem);
+  --a-space-9: calc(var(--a-density) * 2.25rem);
+  --a-space-10: calc(var(--a-density) * 2.5rem);
+  --a-space-12: calc(var(--a-density) * 3rem);
+  --a-space-16: calc(var(--a-density) * 4rem);
+
+  --a-inset-sm: var(--a-space-3-5);
+  --a-inset-md: var(--a-space-4);
+  --a-inset-lg: var(--a-space-4-5);
+  --a-inset: var(--a-inset-md);
+
+  --a-gap-xs: calc(var(--a-space-2)   * var(--a-gap-k));
+  --a-gap-sm: calc(var(--a-space-2-5) * var(--a-gap-k));
+  --a-gap-md: calc(var(--a-space-3)   * var(--a-gap-k));
+  --a-gap-lg: calc(var(--a-space-3-5) * var(--a-gap-k));
+  --a-gap-xl: calc(var(--a-space-4)   * var(--a-gap-k));
+  --a-gap: var(--a-gap-md);
+
+  --a-padding-xs: calc(var(--a-space-2)  * var(--a-padding-k));
+  --a-padding-sm: calc(var(--a-space-4)  * var(--a-padding-k));
+  --a-padding-md: calc(var(--a-space-6)  * var(--a-padding-k));
+  --a-padding-lg: calc(var(--a-space-8)  * var(--a-padding-k));
+  --a-padding-xl: calc(var(--a-space-10) * var(--a-padding-k));
+  --a-margin-xs:  calc(var(--a-space-2)  * var(--a-margin-k));
+  --a-margin-sm:  calc(var(--a-space-4)  * var(--a-margin-k));
+  --a-margin-md:  calc(var(--a-space-6)  * var(--a-margin-k));
+  --a-margin-lg:  calc(var(--a-space-8)  * var(--a-margin-k));
+  --a-margin-xl:  calc(var(--a-space-10) * var(--a-margin-k));
+
+  /* ── Sizing (foundation/size.css) ── */
+  --a-size-sm: calc(var(--a-density) * 1.5rem);
+  --a-size-md: calc(var(--a-density) * 1.875rem);
+  --a-size-lg: calc(var(--a-density) * 2.25rem);
+  --a-size: var(--a-size-md);
+  --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-1));
+}

package/styles/components.css

@@ -34,6 +34,7 @@
 @import "../components/modal/modal.css";
 @import "../components/feed/feed.css";
 @import "../components/toast/toast.css";
+@import "../components/anchor-bar/anchor-bar.css";
 @import "../components/tabs/tabs.css";
 @import "../components/tooltip/tooltip.css";
 @import "../components/badge/badge.css";

package/styles/tokens.css

@@ -19,3 +19,4 @@
 @import "./typography.css";
 @import "./foundation/index.css" layer(tokens);
 @import "./api/sizing.css" layer(utilities);
+@import "./api/parametric-scope.css" layer(utilities);