@adia-ai/web-components 0.0.21 → 0.0.23

package/styles/colors/semantics.css

@@ -83,10 +83,10 @@
      compresses from 10 to 5 step-fractions — visual hierarchy
      leans more on font-weight + size and less on shade contrast. */
   --a-canvas-text-strong:   light-dark(var(--a-neutral-05-shade), var(--a-neutral-05-tint));
-  --a-canvas-text:          light-dark(var(--a-neutral-30-shade), var(--a-neutral-30-tint));
+  --a-canvas-text:          light-dark(var(--a-neutral-20-shade), var(--a-neutral-20-tint));
   --a-canvas-text-subtle:   light-dark(var(--a-neutral-35-shade), var(--a-neutral-35-tint));
-  --a-canvas-text-muted:    light-dark(var(--a-neutral-40-shade), var(--a-neutral-40-tint));
-  --a-canvas-text-disabled: light-dark(var(--a-neutral-60-shade), var(--a-neutral-60-tint));
+  --a-canvas-text-muted:    light-dark(var(--a-neutral-50-shade), var(--a-neutral-50-tint));
+  --a-canvas-text-disabled: light-dark(var(--a-neutral-65-shade), var(--a-neutral-65-tint));
   --a-canvas-text-inverse:  var(--a-neutral-10);
 
   /* Luminance-direction surfaces (always darken relative to canvas-0) */
@@ -154,9 +154,9 @@
      primitive — the naming inverts past the convergence point. Light
      mode wants dark-on-light, so we pick `tint` (deep accent); dark
      mode wants light-on-dark, so we pick `shade` (lifted accent). */
-  --a-link:         light-dark(var(--a-accent-65-tint), var(--a-accent-65-shade));
+  --a-link:         light-dark(var(--a-accent-55-tint), var(--a-accent-55-shade));
   --a-link-hover:   light-dark(var(--a-accent-70-tint), var(--a-accent-70-shade));
-  --a-link-visited: light-dark(var(--a-accent-75-tint), var(--a-accent-75-shade));
+  --a-link-visited: light-dark(var(--a-accent-65-tint), var(--a-accent-65-shade));
 
   /* Accent text on accent solid bg — needs light text on dark-ish accent */
   --a-accent-text-strong:   light-dark(var(--a-accent-05-shade), var(--a-accent-05-tint));

package/styles/prose.css

@@ -24,9 +24,9 @@
   --a-inset:       var(--a-inset-md);
 
   /* ── Gaps — shifted up the space scale ── */
-  --a-gap-sm:      var(--a-space-4);
-  --a-gap-md:      var(--a-space-5);
-  --a-gap-lg:      var(--a-space-6);
+  --a-gap-sm:      var(--a-space-3);
+  --a-gap-md:      var(--a-space-4);
+  --a-gap-lg:      var(--a-space-5);
   --a-gap:         var(--a-gap-md);
 
   /* ── Sizing — larger controls ── */
@@ -70,8 +70,8 @@
 
   /* body */
   --a-body-sm:         14px;
-  --a-body-md:         15px;
-  --a-body-lg:         16px;
+  --a-body-md:         16px;
+  --a-body-lg:         18px;
   --a-body-size:       var(--a-body-md);
 
   /* deck */

package/styles/tokens.css

@@ -327,3 +327,60 @@
 [gap="lg"] {
   --a-gap: var(--a-space-8);
 }
+
+/* ── Universal [padding] / [margin] — same scale as [gap]. Layout
+   primitives (row-ui, col-ui, grid-ui, stack-ui) opt in by reading
+   var(--a-padding, 0) and var(--a-margin, 0). Components with their
+   own padding/margin contracts (block-ui, card-ui, drawer-ui) keep
+   their scoped declarations and aren't affected.
+
+   Registered as non-inheriting via @property so a parent's
+   [padding="6"] doesn't bleed into nested layout primitives —
+   children see the initial-value (0) unless they declare their own
+   [padding] / [margin]. */
+@property --a-padding {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --a-margin {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+[padding="0"]  { --a-padding: 0; }
+[padding="1"]  { --a-padding: var(--a-space-1); }
+[padding="2"]  { --a-padding: var(--a-space-2); }
+[padding="3"]  { --a-padding: var(--a-space-3); }
+[padding="4"]  { --a-padding: var(--a-space-4); }
+[padding="5"]  { --a-padding: var(--a-space-5); }
+[padding="6"]  { --a-padding: var(--a-space-6); }
+[padding="7"]  { --a-padding: var(--a-space-7); }
+[padding="8"]  { --a-padding: var(--a-space-8); }
+[padding="9"]  { --a-padding: var(--a-space-9); }
+[padding="10"] { --a-padding: var(--a-space-10); }
+[padding="12"] { --a-padding: var(--a-space-12); }
+[padding="16"] { --a-padding: var(--a-space-16); }
+
+[padding="sm"] { --a-padding: var(--a-space-4); }
+[padding="md"] { --a-padding: var(--a-space-6); }
+[padding="lg"] { --a-padding: var(--a-space-8); }
+
+[margin="0"]  { --a-margin: 0; }
+[margin="1"]  { --a-margin: var(--a-space-1); }
+[margin="2"]  { --a-margin: var(--a-space-2); }
+[margin="3"]  { --a-margin: var(--a-space-3); }
+[margin="4"]  { --a-margin: var(--a-space-4); }
+[margin="5"]  { --a-margin: var(--a-space-5); }
+[margin="6"]  { --a-margin: var(--a-space-6); }
+[margin="7"]  { --a-margin: var(--a-space-7); }
+[margin="8"]  { --a-margin: var(--a-space-8); }
+[margin="9"]  { --a-margin: var(--a-space-9); }
+[margin="10"] { --a-margin: var(--a-space-10); }
+[margin="12"] { --a-margin: var(--a-space-12); }
+[margin="16"] { --a-margin: var(--a-space-16); }
+
+[margin="sm"] { --a-margin: var(--a-space-4); }
+[margin="md"] { --a-margin: var(--a-space-6); }
+[margin="lg"] { --a-margin: var(--a-space-8); }