ionbase-ui 0.4.0 → 0.6.0

package/dist/styles/header.css

@@ -1,31 +1,46 @@
 /*
  * Header
  *
- * Measured from Figma `Header` (70:22088). Three device variants:
+ * Measured from Figma `Header` (69:335). Four Device variants, two axes:
  *
- *   Desktop  56 tall, padding 8 / 64, end-slot gap 12
- *   Tablet   64 tall, padding 12 / 32, end-slot gap 8
- *   Mobile   64 tall, padding 12 / 16, end-slot gap 8
+ *   Desktop        56 tall, padding  8 / 64, end-slot gap 12
+ *   Tablet         56 tall, padding  8 / 24, end-slot gap  8
+ *   Mobile-Closed  64 tall, padding 12 / 16, toggle only
+ *   Mobile-Open    as Mobile-Closed, plus the dropped Menu-Container
  *
- * WHY THIS IS MEDIA QUERIES AND NOT A PROP
+ * WHY DEVICE IS A MEDIA QUERY AND OPEN IS A PROP
  *
- * Device is the one variant axis in the whole system that the browser already
- * knows the answer to. Every other component takes its variant from the caller
+ * Device is the one variant axis in the whole system the browser already knows
+ * the answer to. Every other component takes its variant from the caller
  * because the caller is the only one who knows; a header is Mobile because the
  * viewport is narrow, and asking React to duplicate that is how the two get out
- * of step. The breakpoints match the Breakpoint collection's own container
- * widths — Tablet below 1216, Mobile below 896.
+ * of step. Breakpoints match the Breakpoint collection's own container widths —
+ * Tablet below 1216, Mobile below 896.
  *
- * Note the header is taller on Tablet and Mobile than on Desktop (64 vs 56).
+ * Open/Closed is the opposite: nothing in CSS knows it, so it is a prop, and it
+ * arrives here as `[data-open]`.
+ *
+ * Note the header is taller on Mobile (64) than on Desktop and Tablet (56).
  * That looks inverted but is deliberate in the design: touch targets need the
  * height more than the desktop pointer does.
+ *
+ * ONE TREE, TWO LAYOUTS
+ *
+ * `__menu` is `display: contents` above the mobile breakpoint, so `__center`
+ * and `__end` are flex items of the bar itself; below it, the same element
+ * becomes the absolutely positioned Menu-Container. The slots are therefore
+ * rendered once, never duplicated across breakpoints.
  */
 .ion-header {
-  --ion-header-height: var(--spacing-64);
-  --ion-header-padding-y: var(--spacing-12);
-  --ion-header-padding-x: var(--spacing-16);
-  --ion-header-end-gap: var(--spacing-8);
+  /* Desktop is the base; the two narrower breakpoints override downward, so a
+   * new rung is added in one place rather than three. */
+  --ion-header-height: calc(var(--spacing-48) + var(--spacing-8)); /* 56 */
+  --ion-header-padding-y: var(--spacing-8);
+  --ion-header-padding-x: var(--spacing-64);
+  --ion-header-center-gap: var(--spacing-8);
+  --ion-header-end-gap: var(--spacing-12);
 
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -43,20 +58,18 @@
   font-family: var(--font-family-sans);
 }
 
-@media (width >= 896px) {
+@media (width < 1216px) {
   .ion-header {
-    --ion-header-padding-x: var(--spacing-32);
+    --ion-header-padding-x: var(--spacing-24);
+    --ion-header-end-gap: var(--spacing-8);
   }
 }
 
-@media (width >= 1216px) {
+@media (width < 896px) {
   .ion-header {
-    /* 56 is off the spacing scale (it jumps 48 -> 64), so it is stated as
-     * arithmetic on two rungs rather than as a literal. */
-    --ion-header-height: calc(var(--spacing-64) - var(--spacing-8));
-    --ion-header-padding-y: var(--spacing-8);
-    --ion-header-padding-x: var(--spacing-64);
-    --ion-header-end-gap: var(--spacing-12);
+    --ion-header-height: var(--spacing-64);
+    --ion-header-padding-y: var(--spacing-12);
+    --ion-header-padding-x: var(--spacing-16);
   }
 }
 
@@ -69,27 +82,117 @@
 }
 
 /*
- * The centre slot is hidden on Tablet and Mobile in Figma — both variants ship
- * it collapsed to zero. It is display:none rather than visibility:hidden so it
- * does not hold width the narrow layouts do not have.
+ * Above the mobile breakpoint the wrapper contributes no box of its own — its
+ * two children are laid out by the bar. `display: contents` is what makes the
+ * single-tree approach possible; without it the slots would need to be either
+ * duplicated or moved by script.
  */
+.ion-header__menu {
+  display: contents;
+}
+
 .ion-header__center {
-  display: none;
+  display: flex;
   align-items: center;
-  gap: var(--spacing-8);
-  flex: 1 1 auto;
+  gap: var(--ion-header-center-gap);
   min-width: 0;
 }
 
-@media (width >= 1216px) {
-  .ion-header__center {
-    display: flex;
-  }
-}
-
 .ion-header__end {
   display: flex;
   align-items: center;
   gap: var(--ion-header-end-gap);
   flex-shrink: 0;
 }
+
+/*
+ * The Mobile-Closed / Mobile-Open toggle. Figma builds it from the Icon Button
+ * component (Secondary, Small, Square) but the Header owns the instance, so the
+ * geometry is stated here rather than reached for across components: 32 square,
+ * radius/sm, 16px icon.
+ */
+.ion-header__toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--spacing-32);
+  height: var(--spacing-32);
+  padding: 0;
+  color: var(--icon-default);
+  background-color: var(--surface-default);
+  border: var(--border-width-default) solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--ion-shadow-raised-lifted-xs);
+  cursor: pointer;
+}
+
+.ion-header__toggle > svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+.ion-header__toggle:focus-visible {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: var(--spacing-2);
+}
+
+@media (width < 896px) {
+  .ion-header__toggle {
+    display: inline-flex;
+  }
+
+  /*
+   * Menu-Container. Figma places it at y=67 against a 64-tall bar — a 3px nudge
+   * that is on no scale and matches no token, so it is anchored flush to the
+   * bar's bottom edge instead. Nothing else in the design depends on the gap.
+   */
+  .ion-header__menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-12);
+    width: 100%;
+    padding: var(--spacing-12) var(--spacing-8);
+    background-color: var(--surface-default);
+    border: var(--border-width-default) solid var(--border-default);
+    border-radius: var(--radius-md);
+  }
+
+  .ion-header[data-open] .ion-header__menu {
+    display: flex;
+  }
+
+  .ion-header:not([data-open]) .ion-header__menu {
+    display: none;
+  }
+
+  /* Both slots stack full width inside the panel; the end slot keeps its row
+   * but shares the width evenly, as the two buttons do in Figma. */
+  .ion-header__center {
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  .ion-header__end {
+    width: 100%;
+  }
+
+  .ion-header__end > * {
+    flex: 1 1 0;
+  }
+}
+
+/*
+ * Forced-colors: box-shadow is dropped by the OS, so the toggle would lose its
+ * only edge. A border in ButtonText keeps it visible.
+ */
+@media (forced-colors: active) {
+  .ion-header__toggle {
+    border-color: ButtonText;
+  }
+}

package/dist/styles/index.css

@@ -36,6 +36,7 @@
 @import url('./divider.css');
 @import url('./nav-item.css');
 @import url('./scroll-progress.css');
+@import url('./full-card.css');
 
 /*
  * Every IonBase element is border-box.

package/dist/styles/tokens/base.css

@@ -108,6 +108,28 @@
   --spacing-80: 80px;
   --spacing-96: 96px;
   --spacing-128: 128px;
+  --scale-0: 0px;
+  --scale-1: 1px;
+  --scale-2: 2px;
+  --scale-4: 4px;
+  --scale-6: 6px;
+  --scale-8: 8px;
+  --scale-10: 10px;
+  --scale-12: 12px;
+  --scale-14: 14px;
+  --scale-16: 16px;
+  --scale-20: 20px;
+  --scale-24: 24px;
+  --scale-32: 32px;
+  --scale-full: 9999px;
+  --font-family-host-grotesk: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-family-space-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-family-merriweather: Merriweather, Georgia, "Times New Roman", serif;
+  --font-family-stix-two-text: "STIX Two Text", Georgia, "Times New Roman", serif;
+  --font-family-sans: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-family-serif: Merriweather, Georgia, "Times New Roman", serif;
+  --font-family-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-family-serif-display: "STIX Two Text", Georgia, "Times New Roman", serif;
   --font-size-12: 12px;
   --font-size-14: 14px;
   --font-size-16: 16px;
@@ -122,14 +144,6 @@
   --font-size-56: 56px;
   --font-size-64: 64px;
   --font-size-72: 72px;
-  --font-family-host-grotesk: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
-  --font-family-merriweather: Merriweather, Georgia, "Times New Roman", serif;
-  --font-family-space-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-  --font-family-stix-two-text: "STIX Two Text", Georgia, "Times New Roman", serif;
-  --font-family-sans: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
-  --font-family-serif: Merriweather, Georgia, "Times New Roman", serif;
-  --font-family-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-  --font-family-serif-display: "STIX Two Text", Georgia, "Times New Roman", serif;
   --font-weight-400: 400;
   --font-weight-500: 500;
   --font-weight-600: 600;
@@ -138,20 +152,6 @@
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
-  --scale-0: 0px;
-  --scale-1: 1px;
-  --scale-2: 2px;
-  --scale-4: 4px;
-  --scale-6: 6px;
-  --scale-8: 8px;
-  --scale-10: 10px;
-  --scale-12: 12px;
-  --scale-14: 14px;
-  --scale-16: 16px;
-  --scale-20: 20px;
-  --scale-24: 24px;
-  --scale-32: 32px;
-  --scale-full: 9999px;
   --primary-50: #ebf7ff;
   --primary-100: #e2f1fd;
   --primary-200: #c7e4fa;
@@ -260,7 +260,7 @@
   --text-primary: #1c62e3;
   --text-error: #ba1c1c;
   --text-success: #0d7d38;
-  --text-warning: #8e2f07;
+  --text-warning: #af3e0e;
   --text-information: #4715b2;
   --text-link: #1541b2;
   --text-link-hover: #0e2d8b;
@@ -271,6 +271,7 @@
   --icon-secondary: #384252;
   --icon-tertiary: #4b5563;
   --icon-disabled: #6b7280;
+  --icon-placeholder: #9ca3b0;
   --icon-on-color: #ffffff;
   --icon-inverse: #f6f8f9;
   --icon-primary: #1c62e3;

package/dist/styles/tokens/elevation.css

@@ -34,19 +34,19 @@
     0px 8px 8px -4px rgb(0 0 0 / 4%);
 
   --ion-shadow-raised-lifted-xs:
-    inset 0px -2px 1px 0px rgb(0 0 0 / 25%),
+    inset 0px -2px 1px 0px rgb(0 0 0 / 12%),
     inset 0px 2px 1px 0px rgb(255 255 255 / 20%),
     0px 1px 1px 0px rgb(7 10 13 / 6%),
     0px 1px 2px 0px rgb(7 10 13 / 4%);
 
   --ion-shadow-raised-lifted-sm:
-    inset 0px -3px 1px 0px rgb(0 0 0 / 25%),
+    inset 0px -3px 1px 0px rgb(0 0 0 / 15%),
     inset 0px 3px 1px 0px rgb(255 255 255 / 20%),
     0px 1px 2px 0px rgb(7 10 13 / 8%),
     0px 2px 4px 0px rgb(7 10 13 / 5%);
 
   --ion-shadow-raised-lifted-lg:
-    inset 0px -4px 2px 0px rgb(0 0 0 / 25%),
+    inset 0px -4px 2px 0px rgb(0 0 0 / 20%),
     inset 0px 4px 2px 0px rgb(255 255 255 / 20%),
     0px 1px 1px 0px rgb(7 10 13 / 32%),
     0px 1px 2px 0px rgb(7 10 13 / 16%);
@@ -74,15 +74,15 @@
     0px 2px 6px 0px rgb(7 10 13 / 20%);
 
   --ion-shadow-raised-flush-xs:
-    inset 0px -2px 1px 0px rgb(0 0 0 / 25%),
+    inset 0px -2px 1px 0px rgb(0 0 0 / 12%),
     inset 0px 2px 1px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-raised-flush-sm:
-    inset 0px -3px 1px 0px rgb(0 0 0 / 25%),
+    inset 0px -3px 1px 0px rgb(0 0 0 / 15%),
     inset 0px 3px 1px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-raised-flush-lg:
-    inset 0px -4px 2px 0px rgb(0 0 0 / 25%),
+    inset 0px -4px 2px 0px rgb(0 0 0 / 20%),
     inset 0px 4px 2px 0px rgb(255 255 255 / 20%);
 
   --ion-shadow-raised-flush-xl:

package/dist/styles/tokens/theme-dark.css

@@ -6,7 +6,7 @@
   --text-default: #f6f8f9;
   --text-secondary: #dde0e4;
   --text-tertiary: #9ca3b0;
-  --text-placeholder: #6b7280;
+  --text-placeholder: #4b5563;
   --text-on-color: #000000;
   --text-inverse: #131923;
   --text-primary: #609cf0;
@@ -22,6 +22,7 @@
   --icon-default: #f0f2f4;
   --icon-secondary: #dde0e4;
   --icon-tertiary: #9ca3b0;
+  --icon-placeholder: #4b5563;
   --icon-inverse: #131923;
   --icon-primary: #609cf0;
   --icon-error: #f56b6b;

package/dist/styles/tokens/typography.css

@@ -14,14 +14,14 @@
 }
 
 .ion-text-h1 {
-  font-family: var(--font-family-serif-display);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-weight-semibold);
   font-size: var(--type-h1);
   line-height: var(--type-h1-line-height);
 }
 
 .ion-text-h2 {
-  font-family: var(--font-family-serif-display);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-weight-semibold);
   font-size: var(--type-h2);
   line-height: var(--type-h2-line-height);
@@ -85,7 +85,7 @@
 
 .ion-text-caption {
   font-family: var(--font-family-sans);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-regular);
   font-size: var(--type-caption);
   line-height: var(--type-caption-line-height);
 }