ionbase-ui 0.1.0

package/dist/styles/checkbox.css

@@ -0,0 +1,229 @@
+/*
+ * Checkbox
+ *
+ * Measured from Figma `Checkbox` (54 variants: 3 colours x 3 sizes x 6 states).
+ *
+ * The indicator is a sibling of the label, not a wrapper, because Figma lays
+ * them out as a row with a gap. The native input is visually hidden rather than
+ * replaced: it keeps the control focusable, announceable and form-associated,
+ * and the styled square follows it via :checked / :focus-visible.
+ *
+ * THE MARK IS DERIVED
+ *
+ * The mark is 12 / 14 / 16 against boxes of 16 / 20 / 24. 14 is on no ladder —
+ * both spacing and icon-size skip it — but the mark is not arbitrary:
+ *
+ *     mark = box / 2 + 4      16->12   20->14   24->16
+ *
+ * So the only number stated per size is the box, and nothing here reaches for
+ * the raw `scale/*` ramp. Same move as the toggle track and the avatar overlap:
+ * an off-ladder value is usually a question about what it is derived from.
+ *
+ * FOCUS RING
+ *
+ * Figma draws a separate `Focus Ring` frame 2px larger than the indicator on
+ * every side (16 -> 20, 20 -> 24, 24 -> 28). A CSS outline does exactly that at
+ * `outline-offset: 0`, so the ring needs no element of its own and cannot
+ * disturb the row's layout — which a real 24px sibling would.
+ */
+.ion-checkbox {
+  --ion-checkbox-size: var(--spacing-20);
+  --ion-checkbox-gap: var(--spacing-8);
+  --ion-checkbox-radius: var(--radius-xs);
+  --ion-checkbox-font-size: var(--type-body);
+  --ion-checkbox-line-height: var(--type-body-line-height);
+
+  /* Filled by the intent modifier; unchecked is intent-independent. */
+  --ion-checkbox-fill: var(--surface-primary);
+  --ion-checkbox-border: var(--border-primary-strong);
+
+  /*
+   * The checked box is bevelled, not flat. `Raised/Flush/*` — flush, with no
+   * cast shadow, because a 16-24px control sits ON the surface rather than
+   * above it. Indexed by size like Button's, and identical across all three
+   * intents: Figma varies only the fill.
+   */
+  --ion-checkbox-raised: var(--ion-shadow-raised-flush-sm);
+
+  /* Derived — see the header. */
+  --ion-checkbox-mark: calc(var(--ion-checkbox-size) / 2 + var(--spacing-4));
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--ion-checkbox-gap);
+  font-family: var(--font-family-sans);
+  font-size: var(--ion-checkbox-font-size);
+  line-height: var(--ion-checkbox-line-height);
+  cursor: pointer;
+}
+
+.ion-checkbox--sm {
+  --ion-checkbox-size: var(--spacing-16);
+  --ion-checkbox-font-size: var(--type-body-sm);
+  --ion-checkbox-line-height: var(--type-body-sm-line-height);
+  --ion-checkbox-raised: var(--ion-shadow-raised-flush-xs);
+}
+
+/* Large is the only size that widens the gap, and the only one with a larger
+ * corner — Figma moves it from radius/xs to radius/sm at 24px. */
+.ion-checkbox--lg {
+  --ion-checkbox-size: var(--spacing-24);
+  --ion-checkbox-gap: var(--spacing-12);
+  --ion-checkbox-radius: var(--radius-sm);
+  --ion-checkbox-raised: var(--ion-shadow-raised-flush-lg);
+}
+
+/*
+ * The native input carries every bit of behaviour and none of the appearance.
+ * Kept in the layout (not `display: none`) so it stays focusable and reachable
+ * by assistive tech; the indicator beside it renders the state.
+ */
+.ion-checkbox__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ion-checkbox__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--ion-checkbox-size);
+  height: var(--ion-checkbox-size);
+  background-color: var(--surface-default);
+  border-style: solid;
+
+  /*
+   * The EMPTY box carries the heavier border: 2px `border/stronger`, where the
+   * filled box drops to 1px of its intent colour. An unchecked checkbox is
+   * nothing but its outline, so it has to hold the row on its own; once filled,
+   * the fill does that work and a thinner edge stops it reading as ringed.
+   *
+   * Figma strokes this INSIDE, and `box-sizing: border-box` (set globally in
+   * index.css) is what reproduces that — the box stays 16/20/24 and the border
+   * eats inward. Without it, switching to 2px would grow every checkbox by 2px.
+   *
+   * Radio matches this exactly; the two controls stay in step.
+   */
+  border-width: var(--border-width-thick);
+  border-color: var(--border-stronger);
+  border-radius: var(--ion-checkbox-radius);
+
+  /*
+   * Centred on the FIRST LINE of the label, not the whole block, so a wrapping
+   * label keeps its box beside line one. The label's line box is taller than
+   * the indicator at every size, so the offset is half the difference.
+   */
+  margin-top: calc(
+    (var(--ion-checkbox-line-height) - var(--ion-checkbox-size)) / 2
+  );
+  transition:
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ion-checkbox__mark {
+  width: var(--ion-checkbox-mark);
+  height: var(--ion-checkbox-mark);
+  color: var(--icon-on-color);
+
+  /* Hidden rather than unmounted so the box never reflows when it appears. */
+  opacity: 0;
+}
+
+.ion-checkbox__mark svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.ion-checkbox__label {
+  color: var(--text-secondary);
+  user-select: none;
+}
+
+/* Checked and indeterminate share one appearance — Figma differs only in the mark. */
+.ion-checkbox__input:checked + .ion-checkbox__indicator,
+.ion-checkbox__input:indeterminate + .ion-checkbox__indicator {
+  /* Back to 1px — see the indicator's border comment. */
+  border-width: var(--border-width-default);
+  background-color: var(--ion-checkbox-fill);
+  border-color: var(--ion-checkbox-border);
+
+  /* Only the filled box is bevelled; an empty box stays flat. */
+  box-shadow: var(--ion-checkbox-raised);
+}
+
+.ion-checkbox__input:checked + .ion-checkbox__indicator .ion-checkbox__mark,
+.ion-checkbox__input:indeterminate
+  + .ion-checkbox__indicator
+  .ion-checkbox__mark {
+  opacity: 1;
+}
+
+/* Intent modifiers. Only the checked fill and border differ. */
+.ion-checkbox--neutral {
+  --ion-checkbox-fill: var(--surface-inverse);
+  --ion-checkbox-border: var(--border-inverse);
+}
+
+.ion-checkbox--danger {
+  --ion-checkbox-fill: var(--surface-error);
+  --ion-checkbox-border: var(--border-error-strong);
+}
+
+/*
+ * See the header: the ring is an outline, so it grows outside the box without
+ * taking part in layout. 2px at offset 0 reproduces Figma's +2px-per-side frame.
+ */
+.ion-checkbox__input:focus-visible + .ion-checkbox__indicator,
+.ion-checkbox[data-focused='true'] .ion-checkbox__indicator {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: 0;
+}
+
+/*
+ * Disabled is driven off the input's own `:disabled`, not off a class on the
+ * wrapper, because it has to BEAT `:checked`.
+ *
+ * `.ion-checkbox--disabled .ion-checkbox__indicator` is (0,2,0) while
+ * `.ion-checkbox__input:checked + .ion-checkbox__indicator` is (0,3,0), so a
+ * disabled checked box would have kept its filled appearance no matter where
+ * the rule sat in the file. Matching `:checked:disabled` is (0,4,0) and wins.
+ */
+.ion-checkbox__input:disabled + .ion-checkbox__indicator,
+.ion-checkbox__input:checked:disabled + .ion-checkbox__indicator,
+.ion-checkbox__input:indeterminate:disabled + .ion-checkbox__indicator {
+  background-color: var(--surface-disabled);
+  border-color: var(--border-disabled);
+
+  /*
+   * 2px in all three disabled states, checked included — measured. So this has
+   * to restate the width to beat `:checked`, which sets 1px; the compound
+   * `:checked:disabled` selector is what makes it win, not source order.
+   */
+  border-width: var(--border-width-thick);
+
+  /* A disabled box is flat whether or not it is checked. */
+  box-shadow: none;
+}
+
+.ion-checkbox__input:disabled + .ion-checkbox__indicator .ion-checkbox__mark {
+  color: var(--icon-disabled);
+}
+
+.ion-checkbox--disabled,
+.ion-checkbox[data-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.ion-checkbox--disabled .ion-checkbox__label,
+.ion-checkbox[data-disabled='true'] .ion-checkbox__label {
+  color: var(--text-disabled);
+}

package/dist/styles/divider.css

@@ -0,0 +1,31 @@
+/*
+ * Divider
+ *
+ * Measured from Figma `Border` (70:22153) — a single 1px line, `border/strong`
+ * rather than `border/default`. That is the one surprising fact here: every
+ * other hairline in the system (Input, Table row rules, Menu) reads
+ * `border/default`. A divider is drawn at a stronger weight deliberately —
+ * its only job is to separate, so it is allowed to be the most visible line
+ * in the system rather than competing with content-carrying borders.
+ *
+ * Horizontal and vertical are one component in Figma (`Style` variant), and
+ * one class here: a fixed 1px cross-axis with the main axis left to `100%`,
+ * since Figma's 80-unit length is canvas demo filler, not a real constraint.
+ */
+.ion-divider {
+  flex-shrink: 0;
+  background-color: var(--border-strong);
+  border: none;
+  margin: 0;
+}
+
+.ion-divider--horizontal {
+  width: 100%;
+  height: var(--border-width-default);
+}
+
+.ion-divider--vertical {
+  width: var(--border-width-default);
+  height: 100%;
+  align-self: stretch;
+}

package/dist/styles/header.css

@@ -0,0 +1,95 @@
+/*
+ * Header
+ *
+ * Measured from Figma `Header` (70:22088). Three device variants:
+ *
+ *   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
+ *
+ * WHY THIS IS MEDIA QUERIES AND NOT 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
+ * 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.
+ *
+ * Note the header is taller on Tablet and Mobile than on Desktop (64 vs 56).
+ * That looks inverted but is deliberate in the design: touch targets need the
+ * height more than the desktop pointer does.
+ */
+.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);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+  width: 100%;
+  min-height: var(--ion-header-height);
+  padding: var(--ion-header-padding-y) var(--ion-header-padding-x);
+  background-color: var(--surface-default);
+
+  /*
+   * A bottom rule only. Figma reports the stroke weight as mixed because just
+   * the bottom edge carries one, which is exactly what a header divider is.
+   */
+  border-bottom: var(--border-width-default) solid var(--border-default);
+  font-family: var(--font-family-sans);
+}
+
+@media (width >= 896px) {
+  .ion-header {
+    --ion-header-padding-x: var(--spacing-32);
+  }
+}
+
+@media (width >= 1216px) {
+  .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__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  flex-shrink: 0;
+  color: var(--icon-default);
+}
+
+/*
+ * 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.
+ */
+.ion-header__center {
+  display: none;
+  align-items: center;
+  gap: var(--spacing-8);
+  flex: 1 1 auto;
+  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;
+}

package/dist/styles/index.css

@@ -0,0 +1,44 @@
+@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Merriweather:ital,wght@0,300..900;1,300..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&display=swap');
+@import url('./tokens/index.css');
+@import url('./button.css');
+@import url('./tabs.css');
+@import url('./badge.css');
+@import url('./input.css');
+@import url('./select.css');
+@import url('./checkbox.css');
+@import url('./radio.css');
+@import url('./toggle.css');
+@import url('./menu.css');
+@import url('./avatar.css');
+@import url('./header.css');
+@import url('./logo.css');
+@import url('./table.css');
+@import url('./divider.css');
+@import url('./nav-item.css');
+@import url('./scroll-progress.css');
+
+/*
+ * Every IonBase element is border-box.
+ *
+ * Not cosmetic: `<button>` inherits border-box from the UA stylesheet but
+ * `<div>` does not, so a component built on a div sized its min-height against
+ * the CONTENT box and came out 16px taller than the design. Button looked
+ * correct only by accident of its tag name.
+ *
+ * Scoped to `ion-` classes so the design system never restyles a host app.
+ */
+[class^='ion-'],
+[class*=' ion-'] {
+  box-sizing: border-box;
+}
+
+/* Global baseline resets using token variables only */
+body {
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+  background-color: var(--surface-page);
+  color: var(--text-default);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/dist/styles/input.css

@@ -0,0 +1,264 @@
+/*
+ * Input
+ *
+ * Measured from Figma `Input` (80:275) and `Form Field` (80:330).
+ * Three sizes x seven states, plus the label/helper wrapper.
+ *
+ * GEOMETRY COMES FROM THE SPACING SCALE, NOT FROM A CONTROL RECIPE
+ *
+ * 1. Every measurement below is a rung on `spacing/*` (or the `icon-size`
+ *    ladder), picked by this component. There is no shared "control" token
+ *    prescribing what a medium field's padding should be — that group existed,
+ *    was reverse-engineered from Button's numbers, and was bound by 3 of 26
+ *    components because nothing whose measurements differed could use it.
+ *
+ *    So Input picking 12 where Button picks 16 is not a divergence to explain
+ *    away. It is a component fact, recorded here, which is the only place that
+ *    knows it. The scale is the shared contract; the rung is not.
+ *
+ * 2. Figma draws its 1px stroke INSIDE the frame, so padding is measured from
+ *    the outer edge and the stroke overlaps it. A CSS border sits outside the
+ *    padding box, so `padding-x: 12px` would put the text at 13px. The border
+ *    width is subtracted back out — the same correction Badge and Tabs needed.
+ *
+ *    This also makes the focus state free: Figma's focus ring is a 2px inside
+ *    stroke, which eats 1px further into the padding and leaves the text
+ *    exactly where it was. Subtracting the live border width reproduces that,
+ *    so nothing shifts when the field takes focus.
+ */
+.ion-input {
+  /*
+   * Size is a set of slots defaulting to Medium, so a size modifier reassigns
+   * six variables rather than restating six declarations — same shape as
+   * Button, and it keeps the icon rule size-agnostic.
+   */
+  --ion-input-height: var(--spacing-40);
+  --ion-input-padding-x: var(--spacing-12);
+  --ion-input-gap: var(--spacing-8);
+  --ion-input-icon-size: var(--icon-size-md);
+  --ion-input-radius: var(--radius-md);
+  --ion-input-font-size: var(--type-body);
+  --ion-input-line-height: var(--type-body-line-height);
+  --ion-input-border-width: var(--border-width-default);
+
+  display: flex;
+  align-items: center;
+  gap: var(--ion-input-gap);
+
+  /*
+   * Figma pins each size to a fixed height (32/40/48) with no vertical padding.
+   * `min-height` reproduces that while still growing if the field is ever given
+   * a taller control inside it.
+   */
+  min-height: var(--ion-input-height);
+  padding-inline: calc(
+    var(--ion-input-padding-x) - var(--ion-input-border-width)
+  );
+  background-color: var(--surface-default);
+  border-style: solid;
+  border-width: var(--ion-input-border-width);
+  border-color: var(--border-default);
+  border-radius: var(--ion-input-radius);
+  font-family: var(--font-family-sans);
+  font-size: var(--ion-input-font-size);
+  line-height: var(--ion-input-line-height);
+  transition:
+    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/*
+ * Small shares Medium's padding. It was 10px and unbound in Figma — the only
+ * untokenised measurement in either component, and off a scale that runs
+ * 8, 12, 16, 20. Resolved in Figma by moving to 12; height, gap, radius and the
+ * type ramp still separate the two sizes.
+ */
+.ion-input--sm {
+  --ion-input-height: var(--spacing-32);
+  --ion-input-padding-x: var(--spacing-12);
+  --ion-input-gap: var(--spacing-6);
+  --ion-input-icon-size: var(--icon-size-sm);
+  --ion-input-radius: var(--radius-sm);
+  --ion-input-font-size: var(--type-body-sm);
+  --ion-input-line-height: var(--type-body-sm-line-height);
+}
+
+/* Large keeps Medium's radius, icon size and type ramp — only height and padding grow. */
+.ion-input--lg {
+  --ion-input-height: var(--spacing-48);
+  --ion-input-padding-x: var(--spacing-16);
+}
+
+/*
+ * The field itself carries no box of its own — the wrapper owns the border,
+ * background and padding so the icons sit inside it. Everything here is either
+ * inherited or reset.
+ */
+.ion-input__field {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: var(--font-weight-regular);
+}
+
+/*
+ * Figma's Filled state differs from Default only in the value colour
+ * (text/tertiary -> text/secondary). That is exactly the placeholder
+ * distinction, so it needs no variant: the field is text/secondary and the
+ * placeholder pseudo-element is text/tertiary.
+ */
+.ion-input__field::placeholder {
+  color: var(--text-tertiary);
+  opacity: 1;
+}
+
+.ion-input__icon-start,
+.ion-input__icon-end {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* One rule for every size — the slot is reassigned by the size modifier. */
+.ion-input__icon-start svg,
+.ion-input__icon-end svg {
+  width: var(--ion-input-icon-size);
+  height: var(--ion-input-icon-size);
+}
+
+/*
+ * The two icons carry different tokens. The leading icon is decorative
+ * (icon/tertiary); the trailing one is a control — clear, reveal, calendar —
+ * and sits at icon/interactive. v2 splits text and icon precisely so this can
+ * differ from the value colour beside it.
+ */
+.ion-input__icon-start {
+  color: var(--icon-tertiary);
+}
+
+.ion-input__icon-end {
+  color: var(--icon-interactive);
+}
+
+/*
+ * State order below is deliberate and equal-specificity, so later rules win:
+ * hover -> focus -> invalid -> read-only -> disabled.
+ *
+ * Invalid sits after focus and overrides the colour only, never the width. A
+ * focused invalid field therefore keeps the 2px ring but shows it in the error
+ * colour, which is both states being true at once rather than one masking the
+ * other.
+ */
+
+/*
+ * Hover is declared twice, as it is on Button. Native `:hover` latches on touch
+ * until you tap elsewhere; `[data-hovered]` comes from React Aria's useHover,
+ * which is pointer-aware. The media query keeps this working without React.
+ */
+@media (hover: hover) {
+  .ion-input:hover {
+    border-color: var(--border-strong);
+  }
+}
+
+.ion-input[data-hovered='true'] {
+  border-color: var(--border-strong);
+}
+
+.ion-input:focus-within,
+.ion-input[data-focused='true'] {
+  --ion-input-border-width: var(--border-width-thick);
+
+  border-color: var(--border-focus);
+}
+
+/*
+ * 2px, matching Focus and matching Select. At 1px the invalid state differed
+ * from default only in hue, which is the exact failure mode WCAG 1.4.1 is
+ * about — error has to be perceivable without relying on colour alone.
+ * Reconciled in Figma; Input was the one that was wrong.
+ */
+.ion-input--invalid,
+.ion-input[data-invalid='true'] {
+  --ion-input-border-width: var(--border-width-thick);
+
+  border-color: var(--border-error-strong);
+}
+
+/* Read-only keeps the value legible but drops the field out of the editable
+ * palette entirely — page surface, subtle border. */
+.ion-input--readonly,
+.ion-input[data-readonly='true'] {
+  background-color: var(--surface-page);
+  border-color: var(--border-subtle);
+}
+
+.ion-input--disabled,
+.ion-input[data-disabled='true'] {
+  background-color: var(--surface-disabled);
+  border-color: var(--border-disabled);
+  cursor: not-allowed;
+}
+
+.ion-input--disabled .ion-input__field,
+.ion-input[data-disabled='true'] .ion-input__field {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.ion-input--disabled .ion-input__field::placeholder,
+.ion-input[data-disabled='true'] .ion-input__field::placeholder {
+  color: var(--text-disabled);
+}
+
+.ion-input--disabled .ion-input__icon-start,
+.ion-input--disabled .ion-input__icon-end,
+.ion-input[data-disabled='true'] .ion-input__icon-start,
+.ion-input[data-disabled='true'] .ion-input__icon-end {
+  color: var(--icon-disabled);
+}
+
+/*
+ * Form Field — Figma `Form Field` (80:330).
+ *
+ * Label + control + helper stacked at 6px. Named `ion-field` rather than
+ * `ion-input__field-wrapper` because Select uses it unchanged: the wrapper
+ * knows nothing about what control sits in the middle.
+ *
+ * Only the Error variant differs from Default. Figma's Disabled variant leaves
+ * both the label and the helper on their default tokens, so it needs no rule —
+ * the control inside carries the whole disabled treatment.
+ */
+.ion-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+}
+
+.ion-field__label {
+  color: var(--text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--font-weight-medium);
+}
+
+.ion-field__helper {
+  color: var(--text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--font-weight-regular);
+}
+
+.ion-field--error .ion-field__helper {
+  color: var(--text-error);
+}