ionbase-ui 0.1.0

package/dist/styles/tokens/elevation.css

@@ -0,0 +1,112 @@
+/**
+ * Generated from the Figma effect styles. Do not edit.
+ * Regenerate with `pnpm --filter @ionbase-ui/tokens build`.
+ *
+ * Source: src/figma/effect-styles.json
+ *
+ * These are NOT tokens. Figma's effect styles are not variable-bound, so there
+ * is nothing for them to alias — the values are committed and generated instead.
+ * The `--ion-` prefix marks that: anything named `--shadow-*` would come from
+ * the token pipeline, and none of this does.
+ *
+ * DARK MODE: override these same properties under `[data-theme='dark']`.
+ * No component file should need to change.
+ */
+
+:root {
+  --ion-shadow-shadow-xs:
+    0px 1px 2px 0px rgb(0 0 0 / 5%);
+
+  --ion-shadow-shadow-sm:
+    0px 1px 3px 0px rgb(0 0 0 / 8%),
+    0px 1px 2px -1px rgb(0 0 0 / 6%);
+
+  --ion-shadow-shadow-md:
+    0px 4px 8px -2px rgb(0 0 0 / 8%),
+    0px 2px 4px -2px rgb(0 0 0 / 6%);
+
+  --ion-shadow-shadow-lg:
+    0px 12px 16px -4px rgb(0 0 0 / 8%),
+    0px 4px 6px -2px rgb(0 0 0 / 5%);
+
+  --ion-shadow-shadow-xl:
+    0px 20px 24px -4px rgb(0 0 0 / 10%),
+    0px 8px 8px -4px rgb(0 0 0 / 4%);
+
+  --ion-shadow-raised-lifted-xs:
+    inset 0px -2px 1px 0px rgb(0 0 0 / 40%),
+    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 / 30%),
+    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 / 40%),
+    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%);
+
+  --ion-shadow-raised-lifted-xl:
+    inset 0px -6px 2px 0px rgb(0 0 0 / 35%),
+    inset 0px 6px 2px 0px rgb(255 255 255 / 20%),
+    0px 1px 2px 0px rgb(7 10 13 / 30%),
+    0px 2px 4px 0px rgb(7 10 13 / 14%);
+
+  --ion-shadow-inset-flush-xs:
+    inset 0px 1px 2px 0px rgb(0 0 0 / 8%);
+
+  --ion-shadow-inset-flush-lg:
+    inset 0px 2px 2px 0px rgb(0 0 0 / 40%);
+
+  --ion-shadow-focus-md:
+    0px 0px 0px 2px rgb(255 255 255 / 100%),
+    0px 0px 0px 4px rgb(7 10 13 / 50%);
+
+  --ion-shadow-focus-lg:
+    0px 0px 0px 2px rgb(255 255 255 / 100%),
+    0px 0px 0px 4px rgb(221 224 228 / 100%),
+    0px 0px 0px 6px rgb(19 25 35 / 100%),
+    0px 2px 6px 0px rgb(7 10 13 / 20%);
+
+  --ion-shadow-raised-flush-xs:
+    inset 0px -2px 1px 0px rgb(0 0 0 / 40%),
+    inset 0px 2px 1px 0px rgb(255 255 255 / 20%);
+
+  --ion-shadow-raised-flush-sm:
+    inset 0px -3px 1px 0px rgb(0 0 0 / 30%),
+    inset 0px 3px 1px 0px rgb(255 255 255 / 20%);
+
+  --ion-shadow-raised-flush-lg:
+    inset 0px -4px 2px 0px rgb(0 0 0 / 40%),
+    inset 0px 4px 2px 0px rgb(255 255 255 / 20%);
+
+  --ion-shadow-raised-flush-xl:
+    inset 0px -6px 2px 0px rgb(0 0 0 / 35%),
+    inset 0px 6px 2px 0px rgb(255 255 255 / 20%);
+
+  --ion-shadow-inset-lifted-xs:
+    inset 0px 1px 2px 0px rgb(0 0 0 / 8%),
+    0px 1px 1px 0px rgb(7 10 13 / 6%),
+    0px 1px 2px 0px rgb(7 10 13 / 4%);
+
+  --ion-shadow-inset-lifted-lg:
+    inset 0px 2px 2px 0px rgb(0 0 0 / 40%),
+    0px 1px 1px 0px rgb(7 10 13 / 32%),
+    0px 1px 2px 0px rgb(7 10 13 / 16%);
+
+  --ion-shadow-inset-flush-sm:
+    inset 0px 1.5px 2px 0px rgb(0 0 0 / 20%);
+
+  --ion-shadow-inset-lifted-sm:
+    inset 0px 1.5px 2px 0px rgb(0 0 0 / 20%),
+    0px 1px 2px 0px rgb(7 10 13 / 8%),
+    0px 2px 4px 0px rgb(7 10 13 / 5%);
+
+  /* A shadow that paints nothing, so composed lists always stay valid. */
+  --ion-shadow-none: 0 0 transparent;
+}

package/dist/styles/tokens/index.css

@@ -0,0 +1,6 @@
+@import "./base.css";
+@import "./theme-dark.css";
+@import "./breakpoint-tablet.css";
+@import "./breakpoint-mobile.css";
+@import "./typography.css";
+@import "./elevation.css";

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

@@ -0,0 +1,106 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-theme="dark"] {
+  --text-default: #f6f8f9;
+  --text-secondary: #dde0e4;
+  --text-tertiary: #9ca3b0;
+  --text-placeholder: #6b7280;
+  --text-on-color: #000000;
+  --text-inverse: #131923;
+  --text-primary: #609cf0;
+  --text-error: #f56b6b;
+  --text-success: #50c38c;
+  --text-warning: #ef8539;
+  --text-information: #7e6ff1;
+  --text-link: #609cf0;
+  --text-link-hover: #9fd5f9;
+  --text-link-visited: #7e6ff1;
+  --text-interactive: #dde0e4;
+  --text-interactive-hover: #f6f8f9;
+  --icon-default: #f0f2f4;
+  --icon-secondary: #dde0e4;
+  --icon-tertiary: #9ca3b0;
+  --icon-inverse: #131923;
+  --icon-primary: #609cf0;
+  --icon-error: #f56b6b;
+  --icon-success: #50c38c;
+  --icon-warning: #ef8539;
+  --icon-information: #7e6ff1;
+  --icon-interactive: #dde0e4;
+  --icon-interactive-hover: #f6f8f9;
+  --surface-default: #000000;
+  --surface-page: #131923;
+  --surface-sunken: #131923;
+  --surface-subtle: #1d2735;
+  --surface-muted: #1d2735;
+  --surface-raised: #1d2735;
+  --surface-overlay: #000000;
+  --surface-scrim: rgba(0, 0, 0, 0.6);
+  --surface-inverse: #ffffff;
+  --surface-inverse-subtle: #e5e7eb;
+  --surface-disabled: #1d2735;
+  --surface-placeholder: #4b5563;
+  --surface-hover: rgba(255, 255, 255, 0.05);
+  --surface-pressed: rgba(255, 255, 255, 0.1);
+  --surface-selected: #071e69;
+  --surface-selected-hover: #0e2d8b;
+  --surface-primary: #286ef0;
+  --surface-primary-hover: #609cf0;
+  --surface-primary-pressed: #9fd5f9;
+  --surface-primary-subtle: #071e69;
+  --surface-primary-subtle-hover: #0e2d8b;
+  --surface-primary-tint: #0e2d8b;
+  --surface-error: #ef4343;
+  --surface-error-hover: #f56b6b;
+  --surface-error-pressed: #ffadad;
+  --surface-error-subtle: #811d1d;
+  --surface-error-subtle-hover: #981b1b;
+  --surface-error-tint: #981b1b;
+  --surface-success: #12a154;
+  --surface-success-hover: #50c38c;
+  --surface-success-pressed: #8fdbbb;
+  --surface-success-subtle: #054d1a;
+  --surface-success-subtle-hover: #076426;
+  --surface-success-tint: #076426;
+  --surface-warning: #ea5600;
+  --surface-warning-hover: #ef8539;
+  --surface-warning-pressed: #fdc17c;
+  --surface-warning-subtle: #401604;
+  --surface-warning-subtle-hover: #671f07;
+  --surface-warning-tint: #671f07;
+  --surface-information: #5a4cd6;
+  --surface-information-hover: #7e6ff1;
+  --surface-information-pressed: #adadf5;
+  --surface-information-subtle: #260769;
+  --surface-information-subtle-hover: #350e8b;
+  --surface-information-tint: #350e8b;
+  --border-subtle: #1d2735;
+  --border-default: #384252;
+  --border-strong: #4b5563;
+  --border-stronger: #6b7280;
+  --border-inverse: #f6f8f9;
+  --border-disabled: #384252;
+  --border-transparent: rgba(255, 255, 255, 0.05);
+  --border-primary: #609cf0;
+  --border-primary-strong: #1c62e3;
+  --border-primary-subtle: #0e2d8b;
+  --border-error: #f56b6b;
+  --border-error-strong: #dc2828;
+  --border-error-subtle: #981b1b;
+  --border-success: #50c38c;
+  --border-success-strong: #14994e;
+  --border-success-subtle: #076426;
+  --border-warning: #ef8539;
+  --border-warning-strong: #af3e0e;
+  --border-warning-subtle: #671f07;
+  --border-information: #7e6ff1;
+  --border-information-strong: #4f3cc8;
+  --border-information-subtle: #350e8b;
+  --border-focus: #609cf0;
+  --border-focus-error: #f56b6b;
+  --ring-focus: #609cf0;
+  --ring-error: #f56b6b;
+  --ring-offset: #131923;
+}

package/dist/styles/tokens/typography.css

@@ -0,0 +1,124 @@
+/**
+ * Generated from the Figma text styles. Do not edit.
+ * Regenerate with `pnpm --filter @ionbase-ui/tokens build`.
+ *
+ * Responsive by construction: font-size and line-height reference
+ * breakpoint-scoped type/* tokens, so these classes resize on their own.
+ */
+
+.ion-text-display {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--type-display);
+  line-height: var(--type-display-line-height);
+}
+
+.ion-text-h1 {
+  font-family: var(--font-family-serif-display);
+  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-weight: var(--font-weight-semibold);
+  font-size: var(--type-h2);
+  line-height: var(--type-h2-line-height);
+}
+
+.ion-text-h3 {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--type-h3);
+  line-height: var(--type-h3-line-height);
+}
+
+.ion-text-h4 {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--type-h4);
+  line-height: var(--type-h4-line-height);
+}
+
+.ion-text-h5 {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--type-h5);
+  line-height: var(--type-h5-line-height);
+}
+
+.ion-text-h6 {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--type-h6);
+  line-height: var(--type-h6-line-height);
+}
+
+.ion-text-body-lg {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--type-body-lg);
+  line-height: var(--type-body-lg-line-height);
+}
+
+.ion-text-body-md {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--type-body-md);
+  line-height: var(--type-body-md-line-height);
+}
+
+.ion-text-body {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+}
+
+.ion-text-body-sm {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-text-caption {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+}
+
+.ion-text-editorial-display {
+  font-family: var(--font-family-serif);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--type-display);
+  line-height: var(--type-display-line-height);
+}
+
+.ion-text-editorial-h1 {
+  font-family: var(--font-family-serif);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--type-h1);
+  line-height: var(--type-h1-line-height);
+}
+
+.ion-text-editorial-h2 {
+  font-family: var(--font-family-serif);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--type-h2);
+  line-height: var(--type-h2-line-height);
+}
+
+.ion-text-editorial-h3 {
+  font-family: var(--font-family-serif);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--type-h3);
+  line-height: var(--type-h3-line-height);
+}
+
+/* Weight-only modifier, pairs with any body class. */
+.ion-text--emphasis {
+  font-weight: var(--font-weight-medium);
+}