ionbase-ui 0.1.0

package/dist/styles/toggle.css

@@ -0,0 +1,184 @@
+/*
+ * Toggle
+ *
+ * Measured from Figma `Toggle` (18 variants: 3 colours x 3 sizes x 2 states).
+ *
+ *   track   36x20 / 44x24 / 52x28, inset 2 all round, radius/full
+ *   thumb   16 / 20 / 24, surface/default
+ *   off     surface/muted with a border/strong outline
+ *   on      the intent surface, and NO border at all
+ *
+ * THE TRACK IS DERIVED, NOT MEASURED
+ *
+ * 36, 44, 52 and 28 are on no ladder — spacing skips all four. But they are not
+ * arbitrary: the track is exactly the thumb plus its inset.
+ *
+ *     height = thumb + 2 x inset      16+4=20   20+4=24   24+4=28
+ *     width  = 2 x thumb + 2 x inset  36        44        52
+ *
+ * So the only numbers this file states are the thumb (16/20/24, all on the
+ * spacing scale) and the inset (spacing/2). Everything else follows. That is
+ * both closer to how the control actually works and the reason nothing here
+ * needs an off-ladder literal.
+ *
+ * ON HAS NO BORDER
+ *
+ * Easy to miss and it matters: Figma's On track carries no stroke. Keeping a
+ * 1px border would make the on-track 2px narrower than the design and shift the
+ * thumb. The border goes transparent rather than away, so the box never resizes
+ * between states.
+ *
+ * The thumb slides with `margin-left: auto` inside a flex track rather than a
+ * transform, so the inset is honoured on both sides automatically — the same
+ * way Figma flips the track's alignment from MIN to MAX.
+ */
+.ion-toggle {
+  --ion-toggle-thumb: var(--spacing-20);
+  --ion-toggle-inset: var(--spacing-2);
+  --ion-toggle-gap: var(--spacing-8);
+  --ion-toggle-font-size: var(--type-body);
+  --ion-toggle-line-height: var(--type-body-line-height);
+  --ion-toggle-on: var(--surface-primary);
+
+  /*
+   * Two different shadow families on one control, which is the point of
+   * splitting them: the thumb genuinely floats above the track, so it casts
+   * (`Shadow/xs`), while the on-track is bevelled into the surface and casts
+   * nothing (`Raised/Flush/*`). A single combined style could not express both.
+   */
+  --ion-toggle-raised: var(--ion-shadow-raised-flush-sm);
+
+  /* Derived — see the header. */
+  --ion-toggle-track-h: calc(
+    var(--ion-toggle-thumb) + 2 * var(--ion-toggle-inset)
+  );
+  --ion-toggle-track-w: calc(
+    2 * var(--ion-toggle-thumb) + 2 * var(--ion-toggle-inset)
+  );
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--ion-toggle-gap);
+  font-family: var(--font-family-sans);
+  font-size: var(--ion-toggle-font-size);
+  line-height: var(--ion-toggle-line-height);
+  cursor: pointer;
+}
+
+.ion-toggle--sm {
+  --ion-toggle-thumb: var(--spacing-16);
+  --ion-toggle-font-size: var(--type-body-sm);
+  --ion-toggle-line-height: var(--type-body-sm-line-height);
+  --ion-toggle-raised: var(--ion-shadow-raised-flush-xs);
+}
+
+.ion-toggle--lg {
+  --ion-toggle-thumb: var(--spacing-24);
+  --ion-toggle-gap: var(--spacing-12);
+  --ion-toggle-raised: var(--ion-shadow-raised-flush-lg);
+}
+
+.ion-toggle__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ion-toggle__track {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: var(--ion-toggle-track-w);
+  height: var(--ion-toggle-track-h);
+
+  /*
+   * Figma's stroke is drawn INSIDE the track, so the 2px inset is measured from
+   * the outer edge and the stroke overlaps it. A CSS border sits outside the
+   * padding box, so the border width is subtracted back out — the same
+   * correction Input, Badge and Tabs needed. Without it the thumb's travel is
+   * 2px short and the track reads unbalanced.
+   */
+  padding: calc(var(--ion-toggle-inset) - var(--border-width-default));
+  background-color: var(--surface-muted);
+  border-style: solid;
+  border-width: var(--border-width-default);
+  border-color: var(--border-strong);
+  border-radius: var(--radius-full);
+
+  /* Centred on the label's first line — see checkbox.css. */
+  margin-top: calc(
+    (var(--ion-toggle-line-height) - var(--ion-toggle-track-h)) / 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-toggle__thumb {
+  width: var(--ion-toggle-thumb);
+  height: var(--ion-toggle-thumb);
+  background-color: var(--surface-default);
+  border-radius: var(--radius-full);
+
+  /* Cast, not bevelled — and the same in both states, so it is unconditional. */
+  box-shadow: var(--ion-shadow-shadow-xs);
+  transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ion-toggle__label {
+  color: var(--text-secondary);
+  user-select: none;
+}
+
+.ion-toggle__input:checked + .ion-toggle__track {
+  background-color: var(--ion-toggle-on);
+
+  /* Transparent, not removed — see the header. */
+  border-color: transparent;
+
+  /* Only the on-track is bevelled; the off-track is a plain muted surface. */
+  box-shadow: var(--ion-toggle-raised);
+}
+
+.ion-toggle__input:checked + .ion-toggle__track .ion-toggle__thumb {
+  margin-left: auto;
+}
+
+.ion-toggle--neutral {
+  --ion-toggle-on: var(--surface-inverse);
+}
+
+.ion-toggle--danger {
+  --ion-toggle-on: var(--surface-error);
+}
+
+.ion-toggle__input:focus-visible + .ion-toggle__track,
+.ion-toggle[data-focused='true'] .ion-toggle__track {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: 0;
+}
+
+/* Driven off `:disabled` so it out-specifies `:checked` — see checkbox.css. */
+.ion-toggle__input:disabled + .ion-toggle__track,
+.ion-toggle__input:checked:disabled + .ion-toggle__track {
+  background-color: var(--surface-disabled);
+  border-color: var(--border-disabled);
+
+  /* Flat whether or not it is on — matches Checkbox and Radio. */
+  box-shadow: none;
+}
+
+.ion-toggle--disabled,
+.ion-toggle[data-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.ion-toggle--disabled .ion-toggle__label,
+.ion-toggle[data-disabled='true'] .ion-toggle__label {
+  color: var(--text-disabled);
+}

package/dist/styles/tokens/base.css

@@ -0,0 +1,386 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-base-white: #ffffff;
+  --color-base-black: #000000;
+  --color-gray-50: #f6f8f9;
+  --color-gray-100: #f0f2f4;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #dde0e4;
+  --color-gray-400: #9ca3b0;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #384252;
+  --color-gray-800: #1d2735;
+  --color-gray-900: #131923;
+  --color-purple-50: #f6f1f8;
+  --color-purple-100: #f1e8fd;
+  --color-purple-200: #dfd4fc;
+  --color-purple-300: #adadf5;
+  --color-purple-400: #7e6ff1;
+  --color-purple-500: #5a4cd6;
+  --color-purple-600: #4f3cc8;
+  --color-purple-700: #4715b2;
+  --color-purple-800: #350e8b;
+  --color-purple-900: #260769;
+  --color-red-50: #fef1f1;
+  --color-red-100: #fee7e7;
+  --color-red-200: #fed2d2;
+  --color-red-300: #ffadad;
+  --color-red-400: #f56b6b;
+  --color-red-500: #ef4343;
+  --color-red-600: #dc2828;
+  --color-red-700: #ba1c1c;
+  --color-red-800: #981b1b;
+  --color-red-900: #811d1d;
+  --color-orange-50: #fff4e5;
+  --color-orange-100: #ffeed6;
+  --color-orange-200: #fedbb4;
+  --color-orange-300: #fdc17c;
+  --color-orange-400: #ef8539;
+  --color-orange-500: #ea5600;
+  --color-orange-600: #af3e0e;
+  --color-orange-700: #8e2f07;
+  --color-orange-800: #671f07;
+  --color-orange-900: #401604;
+  --color-green-50: #effbf6;
+  --color-green-100: #e4f7f3;
+  --color-green-200: #c6ebdc;
+  --color-green-300: #8fdbbb;
+  --color-green-400: #50c38c;
+  --color-green-500: #12a154;
+  --color-green-600: #14994e;
+  --color-green-700: #0d7d38;
+  --color-green-800: #076426;
+  --color-green-900: #054d1a;
+  --color-blue-50: #ebf7ff;
+  --color-blue-100: #e2f1fd;
+  --color-blue-200: #c7e4fa;
+  --color-blue-300: #9fd5f9;
+  --color-blue-400: #609cf0;
+  --color-blue-500: #286ef0;
+  --color-blue-600: #1c62e3;
+  --color-blue-700: #1541b2;
+  --color-blue-800: #0e2d8b;
+  --color-blue-900: #071e69;
+  --color-yellow-50: #fefce7;
+  --color-yellow-100: #fdf9d8;
+  --color-yellow-200: #faef9e;
+  --color-yellow-300: #f0dc7a;
+  --color-yellow-400: #eac534;
+  --color-yellow-500: #c89809;
+  --color-yellow-600: #a97a14;
+  --color-yellow-700: #91700d;
+  --color-yellow-800: #795a0c;
+  --color-yellow-900: #6f4815;
+  --color-pink-50: #fdf2f8;
+  --color-pink-100: #fce8f4;
+  --color-pink-200: #fbd0e8;
+  --color-pink-300: #f9a9d5;
+  --color-pink-400: #f773b7;
+  --color-pink-500: #f04299;
+  --color-pink-600: #df2679;
+  --color-pink-700: #c3135c;
+  --color-pink-800: #a0134b;
+  --color-pink-900: #881141;
+  --color-alpha-black-05: rgba(0, 0, 0, 0.05);
+  --color-alpha-black-10: rgba(0, 0, 0, 0.1);
+  --color-alpha-black-40: rgba(0, 0, 0, 0.4);
+  --color-alpha-black-60: rgba(0, 0, 0, 0.6);
+  --color-alpha-white-05: rgba(255, 255, 255, 0.05);
+  --color-alpha-white-10: rgba(255, 255, 255, 0.1);
+  --color-alpha-white-20: rgba(255, 255, 255, 0.2);
+  --spacing-0: 0px;
+  --spacing-2: 2px;
+  --spacing-4: 4px;
+  --spacing-6: 6px;
+  --spacing-8: 8px;
+  --spacing-12: 12px;
+  --spacing-16: 16px;
+  --spacing-20: 20px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-40: 40px;
+  --spacing-48: 48px;
+  --spacing-64: 64px;
+  --spacing-80: 80px;
+  --spacing-96: 96px;
+  --spacing-128: 128px;
+  --font-size-12: 12px;
+  --font-size-14: 14px;
+  --font-size-16: 16px;
+  --font-size-18: 18px;
+  --font-size-20: 20px;
+  --font-size-24: 24px;
+  --font-size-28: 28px;
+  --font-size-32: 32px;
+  --font-size-36: 36px;
+  --font-size-40: 40px;
+  --font-size-48: 48px;
+  --font-size-56: 56px;
+  --font-size-64: 64px;
+  --font-size-72: 72px;
+  --font-family-host-grotesk: Host Grotesk;
+  --font-family-merriweather: Merriweather;
+  --font-family-space-mono: Space Mono;
+  --font-family-stix-two-text: STIX Two Text;
+  --font-family-sans: Host Grotesk;
+  --font-family-serif: Merriweather;
+  --font-family-mono: Space Mono;
+  --font-family-serif-display: STIX Two Text;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --font-weight-regular: 400;
+  --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;
+  --primary-300: #9fd5f9;
+  --primary-400: #609cf0;
+  --primary-500: #286ef0;
+  --primary-600: #1c62e3;
+  --primary-700: #1541b2;
+  --primary-800: #0e2d8b;
+  --primary-900: #071e69;
+  --neutral-50: #f6f8f9;
+  --neutral-100: #f0f2f4;
+  --neutral-200: #e5e7eb;
+  --neutral-300: #dde0e4;
+  --neutral-400: #9ca3b0;
+  --neutral-500: #6b7280;
+  --neutral-600: #4b5563;
+  --neutral-700: #384252;
+  --neutral-800: #1d2735;
+  --neutral-900: #131923;
+  --success-50: #effbf6;
+  --success-100: #e4f7f3;
+  --success-200: #c6ebdc;
+  --success-300: #8fdbbb;
+  --success-400: #50c38c;
+  --success-500: #12a154;
+  --success-600: #14994e;
+  --success-700: #0d7d38;
+  --success-800: #076426;
+  --success-900: #054d1a;
+  --warning-50: #fff4e5;
+  --warning-100: #ffeed6;
+  --warning-200: #fedbb4;
+  --warning-300: #fdc17c;
+  --warning-400: #ef8539;
+  --warning-500: #ea5600;
+  --warning-600: #af3e0e;
+  --warning-700: #8e2f07;
+  --warning-800: #671f07;
+  --warning-900: #401604;
+  --error-50: #fef1f1;
+  --error-100: #fee7e7;
+  --error-200: #fed2d2;
+  --error-300: #ffadad;
+  --error-400: #f56b6b;
+  --error-500: #ef4343;
+  --error-600: #dc2828;
+  --error-700: #ba1c1c;
+  --error-800: #981b1b;
+  --error-900: #811d1d;
+  --information-50: #f6f1f8;
+  --information-100: #f1e8fd;
+  --information-200: #dfd4fc;
+  --information-300: #adadf5;
+  --information-400: #7e6ff1;
+  --information-500: #5a4cd6;
+  --information-600: #4f3cc8;
+  --information-700: #4715b2;
+  --information-800: #350e8b;
+  --information-900: #260769;
+  --chart-1: #286ef0;
+  --chart-2: #12a154;
+  --chart-3: #5a4cd6;
+  --chart-4: #ea5600;
+  --chart-5: #f04299;
+  --chart-6: #a97a14;
+  --chart-7: #ef4343;
+  --chart-8: #6b7280;
+  --base-white: #ffffff;
+  --base-black: #000000;
+  --alpha-black-05: rgba(0, 0, 0, 0.05);
+  --alpha-black-10: rgba(0, 0, 0, 0.1);
+  --alpha-black-40: rgba(0, 0, 0, 0.4);
+  --alpha-black-60: rgba(0, 0, 0, 0.6);
+  --alpha-white-05: rgba(255, 255, 255, 0.05);
+  --alpha-white-10: rgba(255, 255, 255, 0.1);
+  --alpha-white-20: rgba(255, 255, 255, 0.2);
+  --radius-none: 0px;
+  --radius-2xs: 2px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-2xl: 14px;
+  --radius-3xl: 16px;
+  --radius-4xl: 20px;
+  --radius-5xl: 24px;
+  --radius-6xl: 32px;
+  --radius-full: 9999px;
+  --border-width-default: 1px;
+  --border-width-thick: 2px;
+  --border-width-thicker: 4px;
+  --icon-size-xs: 12px;
+  --icon-size-sm: 16px;
+  --icon-size-md: 20px;
+  --icon-size-lg: 24px;
+  --icon-size-xl: 32px;
+  --text-default: #131923;
+  --text-secondary: #384252;
+  --text-tertiary: #4b5563;
+  --text-placeholder: #9ca3b0;
+  --text-disabled: #6b7280;
+  --text-on-color: #ffffff;
+  --text-inverse: #f6f8f9;
+  --text-primary: #1c62e3;
+  --text-error: #ba1c1c;
+  --text-success: #0d7d38;
+  --text-warning: #8e2f07;
+  --text-information: #4715b2;
+  --text-link: #1541b2;
+  --text-link-hover: #0e2d8b;
+  --text-link-visited: #4715b2;
+  --text-interactive: #384252;
+  --text-interactive-hover: #131923;
+  --icon-default: #1d2735;
+  --icon-secondary: #384252;
+  --icon-tertiary: #4b5563;
+  --icon-disabled: #6b7280;
+  --icon-on-color: #ffffff;
+  --icon-inverse: #f6f8f9;
+  --icon-primary: #1c62e3;
+  --icon-error: #dc2828;
+  --icon-success: #14994e;
+  --icon-warning: #af3e0e;
+  --icon-information: #4f3cc8;
+  --icon-interactive: #384252;
+  --icon-interactive-hover: #131923;
+  --surface-default: #ffffff;
+  --surface-page: #f6f8f9;
+  --surface-sunken: #f0f2f4;
+  --surface-subtle: #e5e7eb;
+  --surface-muted: #f0f2f4;
+  --surface-raised: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-scrim: rgba(0, 0, 0, 0.4);
+  --surface-inverse: #131923;
+  --surface-inverse-subtle: #384252;
+  --surface-disabled: #f0f2f4;
+  --surface-placeholder: #dde0e4;
+  --surface-hover: rgba(0, 0, 0, 0.05);
+  --surface-pressed: rgba(0, 0, 0, 0.1);
+  --surface-selected: #ebf7ff;
+  --surface-selected-hover: #e2f1fd;
+  --surface-primary: #1c62e3;
+  --surface-primary-hover: #1541b2;
+  --surface-primary-pressed: #0e2d8b;
+  --surface-primary-subtle: #ebf7ff;
+  --surface-primary-subtle-hover: #e2f1fd;
+  --surface-primary-tint: #e2f1fd;
+  --surface-error: #dc2828;
+  --surface-error-hover: #ba1c1c;
+  --surface-error-pressed: #981b1b;
+  --surface-error-subtle: #fef1f1;
+  --surface-error-subtle-hover: #fee7e7;
+  --surface-error-tint: #fee7e7;
+  --surface-success: #14994e;
+  --surface-success-hover: #0d7d38;
+  --surface-success-pressed: #076426;
+  --surface-success-subtle: #effbf6;
+  --surface-success-subtle-hover: #e4f7f3;
+  --surface-success-tint: #e4f7f3;
+  --surface-warning: #af3e0e;
+  --surface-warning-hover: #8e2f07;
+  --surface-warning-pressed: #671f07;
+  --surface-warning-subtle: #fff4e5;
+  --surface-warning-subtle-hover: #ffeed6;
+  --surface-warning-tint: #ffeed6;
+  --surface-information: #4f3cc8;
+  --surface-information-hover: #4715b2;
+  --surface-information-pressed: #350e8b;
+  --surface-information-subtle: #f6f1f8;
+  --surface-information-subtle-hover: #f1e8fd;
+  --surface-information-tint: #f1e8fd;
+  --border-subtle: #f0f2f4;
+  --border-default: #e5e7eb;
+  --border-strong: #dde0e4;
+  --border-stronger: #9ca3b0;
+  --border-inverse: #131923;
+  --border-disabled: #e5e7eb;
+  --border-transparent: rgba(0, 0, 0, 0.05);
+  --border-primary: #286ef0;
+  --border-primary-strong: #1541b2;
+  --border-primary-subtle: #c7e4fa;
+  --border-error: #ef4343;
+  --border-error-strong: #ba1c1c;
+  --border-error-subtle: #fed2d2;
+  --border-success: #12a154;
+  --border-success-strong: #0d7d38;
+  --border-success-subtle: #c6ebdc;
+  --border-warning: #ea5600;
+  --border-warning-strong: #8e2f07;
+  --border-warning-subtle: #fedbb4;
+  --border-information: #5a4cd6;
+  --border-information-strong: #4715b2;
+  --border-information-subtle: #dfd4fc;
+  --border-focus: #286ef0;
+  --border-focus-error: #ef4343;
+  --ring-focus: #286ef0;
+  --ring-error: #ef4343;
+  --ring-offset: #ffffff;
+  --grid-margin: 80px;
+  --grid-gutter: 24px;
+  --grid-columns: 12;
+  --container-max-width: 1216px;
+  --section-gap-y: 96px;
+  --section-gap-y-sm: 64px;
+  --type-display: 64px;
+  --type-display-line-height: 72px;
+  --type-h1: 48px;
+  --type-h1-line-height: 56px;
+  --type-h2: 40px;
+  --type-h2-line-height: 48px;
+  --type-h3: 32px;
+  --type-h3-line-height: 40px;
+  --type-h4: 24px;
+  --type-h4-line-height: 32px;
+  --type-h5: 20px;
+  --type-h5-line-height: 28px;
+  --type-h6: 18px;
+  --type-h6-line-height: 26px;
+  --type-body-lg: 20px;
+  --type-body-lg-line-height: 32px;
+  --type-body-md: 18px;
+  --type-body-md-line-height: 28px;
+  --type-body: 16px;
+  --type-body-line-height: 24px;
+  --type-body-sm: 14px;
+  --type-body-sm-line-height: 20px;
+  --type-caption: 12px;
+  --type-caption-line-height: 18px;
+}

package/dist/styles/tokens/breakpoint-mobile.css

@@ -0,0 +1,34 @@
+@media (max-width: 767px) {
+  /**
+   * Do not edit directly, this file was auto-generated.
+   */
+
+  :root {
+    --grid-margin: 20px;
+    --grid-gutter: 16px;
+    --grid-columns: 4;
+    --container-max-width: 9999px;
+    --section-gap-y: 48px;
+    --section-gap-y-sm: 32px;
+    --type-display: 36px;
+    --type-display-line-height: 44px;
+    --type-h1: 32px;
+    --type-h1-line-height: 40px;
+    --type-h2: 28px;
+    --type-h2-line-height: 36px;
+    --type-h3: 24px;
+    --type-h3-line-height: 32px;
+    --type-h4: 20px;
+    --type-h4-line-height: 28px;
+    --type-h5: 18px;
+    --type-h5-line-height: 26px;
+    --type-h6: 16px;
+    --type-h6-line-height: 24px;
+    --type-body-lg: 18px;
+    --type-body-lg-line-height: 30px;
+    --type-body-md: 16px;
+    --type-body-md-line-height: 26px;
+    --type-caption-line-height: 16px;
+  }
+
+}

package/dist/styles/tokens/breakpoint-tablet.css

@@ -0,0 +1,25 @@
+@media (max-width: 1023px) {
+  /**
+   * Do not edit directly, this file was auto-generated.
+   */
+
+  :root {
+    --grid-margin: 40px;
+    --grid-gutter: 20px;
+    --grid-columns: 8;
+    --container-max-width: 896px;
+    --section-gap-y: 64px;
+    --section-gap-y-sm: 48px;
+    --type-display: 48px;
+    --type-display-line-height: 56px;
+    --type-h1: 40px;
+    --type-h1-line-height: 48px;
+    --type-h2: 32px;
+    --type-h2-line-height: 40px;
+    --type-h3: 28px;
+    --type-h3-line-height: 36px;
+    --type-h6: 16px;
+    --type-h6-line-height: 24px;
+  }
+
+}