@tx-angular-design-system/ui-kit 0.1.0

package/styles/base.css

@@ -0,0 +1,330 @@
+/* =============================================================================
+ * @tx-angular-design-system/ui-kit — global base layer
+ *
+ * Everything here reads from the token layer in theme.css. There are no
+ * literal colours, sizes or font names: re-theming by overriding the tokens
+ * re-skins this file too.
+ *
+ * Lives in @layer base so any consumer rule (layered or not) outranks it.
+ * ========================================================================== */
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    background-color: var(--color-tx-canvas);
+    color: var(--color-tx-text-primary);
+    font-family: var(--font-tx-sans);
+    font-size: var(--text-tx-lg);
+    line-height: var(--leading-tx-normal);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    font-family: var(--font-tx-display);
+    font-weight: 700;
+    letter-spacing: var(--tracking-tx-tight);
+    color: var(--color-tx-text-heading);
+  }
+
+  button {
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  input,
+  select,
+  textarea {
+    font: inherit;
+    color: var(--color-tx-text-primary);
+  }
+
+  /* One focus treatment for the whole kit. Modern engines draw `outline`
+     following the element's own border-radius, so this needs no radius of its
+     own — which is what kept the POC from having to re-round focused rows. */
+  :focus-visible {
+    outline: var(--width-tx-focus-ring) solid var(--color-tx-focus-ring);
+    outline-offset: var(--width-tx-focus-offset);
+  }
+
+  input[type='checkbox'],
+  input[type='radio'] {
+    accent-color: var(--color-tx-primary-hover);
+  }
+
+  ::selection {
+    background-color: var(--color-tx-primary-subtle);
+    color: var(--color-tx-text-primary);
+  }
+
+  /* Scrollbars — a bare thumb, no track furniture, on every scroll container:
+   * the page, dropdown and tree popups, the dialog body, the sidebar, the
+   * table's horizontal scroller.
+   *
+   * Two engines, two mechanisms, and the order matters:
+   *
+   * `scrollbar-width`/`scrollbar-color` are the standard properties, but they
+   * only recolour the platform scrollbar — they cannot remove Chromium's
+   * stepper arrows on Windows, so on their own the result still reads as the
+   * native scrollbar with a tint. Worse, Chromium ignores every
+   * `::-webkit-scrollbar` rule for any element those properties apply to, and
+   * they are inherited, so one declaration on :root switches the whole
+   * document back to the platform scrollbar.
+   *
+   * The pseudo-elements can draw the scrollbar outright, arrows included. So
+   * the standard properties are confined to engines that have no
+   * pseudo-elements to offer — Firefox, which draws no arrows anyway — and
+   * everything else takes the pseudo-element path.
+   *
+   * Being in @layer base, any rule a consumer writes outranks this; an app
+   * that wants the platform scrollbar back sets `scrollbar-width: auto` on
+   * :root, which also hands Chromium's own scrollbar back by the rule above. */
+  @supports not selector(::-webkit-scrollbar) {
+    :root {
+      scrollbar-width: thin;
+      scrollbar-color: var(--color-tx-scrollbar-thumb) var(--color-tx-scrollbar-track);
+    }
+  }
+
+  ::-webkit-scrollbar {
+    width: var(--spacing-tx-scrollbar);
+    height: var(--spacing-tx-scrollbar);
+  }
+
+  /* The stepper arrows, and the corner where two scrollbars meet. Removing
+     them is the whole reason this path exists. */
+  ::-webkit-scrollbar-button {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-track-piece,
+  ::-webkit-scrollbar-corner {
+    background-color: var(--color-tx-scrollbar-track);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: var(--radius-tx-full);
+    background-color: var(--color-tx-scrollbar-thumb);
+    /* A transparent border plus padding-box clipping is what insets the thumb
+       within the track. Padding would not do it: the pseudo-element's box is
+       the thumb itself. */
+    border: var(--spacing-tx-scrollbar-inset) solid transparent;
+    background-clip: padding-box;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-tx-scrollbar-thumb-hover);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * CDK overlay integration.
+ *
+ * Deliberately unlayered so it outranks @angular/cdk/overlay-prebuilt.css
+ * regardless of which order the two are imported in.
+ * -------------------------------------------------------------------------- */
+
+.cdk-overlay-dark-backdrop {
+  background-color: var(--color-tx-scrim);
+}
+
+/* The overlay container sits above app chrome but below nothing else we ship;
+   CDK's own z-index (1000) is respected — this only re-points the colour and
+   makes panes inherit the kit's font so popup text matches its trigger. */
+.cdk-overlay-container,
+.cdk-global-overlay-wrapper {
+  font-family: var(--font-tx-sans);
+  font-size: var(--text-tx-base);
+  line-height: var(--leading-tx-normal);
+  color: var(--color-tx-text-primary);
+}
+
+/* Popups must never exceed the viewport on a small screen. CDK's flexible
+   position strategy sets max-height/max-width on the pane; this guarantees the
+   pane's own content scrolls rather than the page. */
+.tx-overlay-pane {
+  display: flex;
+  min-width: 0;
+  max-width: calc(100vw - (2 * var(--spacing-tx-3)));
+  flex-direction: column;
+}
+
+/* The trigger-to-popup gap. Applied to the pane as padding on whichever edge
+ * faces the trigger, chosen per position by TxConnectedOverlayDirective. Doing
+ * it here rather than as a numeric CDK offset keeps the gap a spacing token —
+ * re-spacing the kit in theme.css moves it, and no pixel value is compiled
+ * into TypeScript. */
+.tx-overlay-gap-top-sm {
+  padding-top: var(--spacing-tx-1);
+}
+.tx-overlay-gap-top-md {
+  padding-top: var(--spacing-tx-2);
+}
+.tx-overlay-gap-bottom-sm {
+  padding-bottom: var(--spacing-tx-1);
+}
+.tx-overlay-gap-bottom-md {
+  padding-bottom: var(--spacing-tx-2);
+}
+.tx-overlay-gap-left-sm {
+  padding-left: var(--spacing-tx-1);
+}
+.tx-overlay-gap-left-md {
+  padding-left: var(--spacing-tx-2);
+}
+.tx-overlay-gap-right-sm {
+  padding-right: var(--spacing-tx-1);
+}
+.tx-overlay-gap-right-md {
+  padding-right: var(--spacing-tx-2);
+}
+
+/* -----------------------------------------------------------------------------
+ * Tree connector guides.
+ *
+ * Pseudo-elements, so they cannot be expressed as utility classes — but every
+ * value is still a token, and the whole ornament is opt-in through the tree's
+ * `guides` config. The indent narrows on small screens so a deep tree stays
+ * readable at 360px instead of scrolling sideways.
+ * -------------------------------------------------------------------------- */
+
+.tx-tree-guides ul {
+  margin: 0;
+  list-style: none;
+  border-left: var(--width-tx-border) solid var(--color-tx-border);
+  padding-left: var(--spacing-tx-5);
+}
+
+.tx-tree-guides > ul {
+  border-left: none;
+  padding-left: 0;
+}
+
+.tx-tree-guides li {
+  position: relative;
+}
+
+.tx-tree-guides ul > li::before {
+  position: absolute;
+  top: var(--spacing-tx-3-5);
+  left: calc(-1 * var(--spacing-tx-5));
+  width: var(--spacing-tx-3-5);
+  height: var(--width-tx-border);
+  background-color: var(--color-tx-border);
+  content: '';
+}
+
+/* Roots have no parent to connect to. */
+.tx-tree-guides > ul > li::before {
+  display: none;
+}
+
+@media (width < 40rem) {
+  .tx-tree-guides ul {
+    padding-left: var(--spacing-tx-3-5);
+  }
+
+  .tx-tree-guides ul > li::before {
+    left: calc(-1 * var(--spacing-tx-3-5));
+    width: var(--spacing-tx-2-5);
+  }
+}
+
+/* Without guides the list is still a plain, un-bulleted, indented list. */
+.tx-tree-plain ul {
+  margin: 0;
+  list-style: none;
+  padding-left: var(--spacing-tx-5);
+}
+
+.tx-tree-plain > ul {
+  padding-left: 0;
+}
+
+@media (width < 40rem) {
+  .tx-tree-plain ul {
+    padding-left: var(--spacing-tx-3-5);
+  }
+}
+
+/* Dialog panes get viewport padding so a dialog never touches the screen edge
+ * on a small device, and the toast pane must not swallow clicks over the page
+ * behind it — each toast re-enables pointer events for itself. */
+.tx-dialog-pane {
+  width: 100%;
+  max-width: calc(100vw - (2 * var(--spacing-tx-4)));
+  margin: var(--spacing-tx-4);
+}
+
+.tx-toast-pane {
+  pointer-events: none;
+  max-width: 100vw;
+}
+
+/* -----------------------------------------------------------------------------
+ * The tread groove — the brand's one ornament, used by tx-divider's `groove`
+ * variant and tx-header's `groove` option.
+ *
+ * Defined once here rather than as a gradient literal in each component: the
+ * stripe geometry is the ornament's identity, not a design value a consumer
+ * re-themes, and duplicating it in TypeScript is how the two would drift apart.
+ * The colours are still tokens, so it re-themes with everything else.
+ * -------------------------------------------------------------------------- */
+
+.tx-groove {
+  display: block;
+  width: 100%;
+  height: var(--spacing-tx-1-5);
+  background-color: var(--color-tx-primary-subtle);
+  background-image:
+    repeating-linear-gradient(105deg, var(--color-tx-primary) 0 3px, transparent 3px 9px),
+    linear-gradient(var(--color-tx-primary-border), var(--color-tx-primary-border));
+}
+
+/* CDK drag-and-drop, used by the reorder list. */
+.cdk-drag-preview {
+  border-radius: var(--radius-tx-sm);
+  box-shadow: var(--shadow-tx-lg);
+  opacity: 0.95;
+}
+
+.cdk-drag-placeholder {
+  opacity: 0.35;
+}
+
+.cdk-drag-animating,
+.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder) {
+  transition: transform var(--duration-tx-slow) var(--ease-tx-standard);
+}

package/styles/theme.css

@@ -0,0 +1,320 @@
+/* =============================================================================
+ * @tx-angular-design-system/ui-kit — token layer
+ *
+ * Two layers, both re-themeable:
+ *   1. Numbered palette   --color-tx-FAMILY-50..950
+ *   2. Semantic roles     --color-tx-ROLE, declared as var() references into
+ *      layer 1 so overriding a palette value cascades to every role.
+ *
+ * To re-theme: redeclare any of these names at a narrower scope (e.g. :root in
+ * the consumer's global stylesheet, AFTER importing this file). Keep the names
+ * and the shape identical; change only the values. No component code changes.
+ *
+ * `static` is deliberate: every token is emitted whether or not a utility used
+ * it in this build, so a consumer override always has something to override.
+ * ========================================================================== */
+
+@theme static {
+  /* ---------------------------------------------------------------------- *
+   * LAYER 1 — numbered palette
+   * ---------------------------------------------------------------------- */
+
+  /* brand — signal green. Anchors 50/200/500/700/950 are exact POC values. */
+  --color-tx-brand-50: #eef7e2;
+  --color-tx-brand-100: #e0f0cc;
+  --color-tx-brand-200: #cfe6b4;
+  --color-tx-brand-300: #b3d888;
+  --color-tx-brand-400: #90c95a;
+  --color-tx-brand-500: #6fb92c;
+  --color-tx-brand-600: #5da324;
+  --color-tx-brand-700: #4d8a1b;
+  --color-tx-brand-800: #3d6d16;
+  --color-tx-brand-900: #2f5411;
+  --color-tx-brand-950: #12300a;
+
+  /* ink — deep navy. Secondary brand family: headings, solid buttons, header
+     bar, scrims. Anchors 700/900 are exact POC values. */
+  --color-tx-ink-50: #e7edf2;
+  --color-tx-ink-100: #c9d6e0;
+  --color-tx-ink-200: #9db1c4;
+  --color-tx-ink-300: #6f8ba5;
+  --color-tx-ink-400: #4a6987;
+  --color-tx-ink-500: #33556f;
+  --color-tx-ink-600: #2a4a63;
+  --color-tx-ink-700: #22405a;
+  --color-tx-ink-800: #1a344a;
+  --color-tx-ink-900: #14293a;
+  --color-tx-ink-950: #0c1a26;
+
+  /* neutral — cool instrument-panel greys. Surfaces, borders, body text.
+     Anchors 50/100/200/300/500/600/700/900 are exact POC values. */
+  --color-tx-neutral-0: #ffffff;
+  --color-tx-neutral-50: #f8fafb;
+  --color-tx-neutral-100: #f4f7f9;
+  --color-tx-neutral-200: #eef2f5;
+  --color-tx-neutral-300: #e2e8ed;
+  --color-tx-neutral-400: #c3d0da;
+  --color-tx-neutral-500: #96a4b0;
+  --color-tx-neutral-600: #8494a3;
+  --color-tx-neutral-700: #64798c;
+  --color-tx-neutral-800: #46596b;
+  --color-tx-neutral-900: #1b2b38;
+  --color-tx-neutral-950: #0f1a23;
+
+  /* danger — anchors 50/200/500 are exact POC values. */
+  --color-tx-danger-50: #fbecea;
+  --color-tx-danger-100: #f7dbd8;
+  --color-tx-danger-200: #eccbc7;
+  --color-tx-danger-300: #e0a9a3;
+  --color-tx-danger-400: #d17a72;
+  --color-tx-danger-500: #c2453b;
+  --color-tx-danger-600: #a93a31;
+  --color-tx-danger-700: #8c2f27;
+  --color-tx-danger-800: #70251f;
+  --color-tx-danger-900: #571c17;
+  --color-tx-danger-950: #2e0e0b;
+
+  /* warning — anchors 50/200/500/700 are exact POC values. */
+  --color-tx-warning-50: #fdf4e3;
+  --color-tx-warning-100: #fbe9c6;
+  --color-tx-warning-200: #efd9ad;
+  --color-tx-warning-300: #e9c377;
+  --color-tx-warning-400: #e2ab48;
+  --color-tx-warning-500: #d99420;
+  --color-tx-warning-600: #bd7d19;
+  --color-tx-warning-700: #8c6212;
+  --color-tx-warning-800: #6f4d0e;
+  --color-tx-warning-900: #573c0b;
+  --color-tx-warning-950: #2e1f06;
+
+  /* info — anchors 50/200/500/700 are exact POC values. */
+  --color-tx-info-50: #eaf2f8;
+  --color-tx-info-100: #d8e7f1;
+  --color-tx-info-200: #bcd0e0;
+  --color-tx-info-300: #94b5cf;
+  --color-tx-info-400: #5c92b6;
+  --color-tx-info-500: #2c6f9b;
+  --color-tx-info-600: #275f85;
+  --color-tx-info-700: #255578;
+  --color-tx-info-800: #1e4460;
+  --color-tx-info-900: #18364c;
+  --color-tx-info-950: #0d1d29;
+
+  /* success — seeded from the same green the POC uses for `.ok`, but kept an
+     independent family so re-theming `brand` to a non-green hue does not turn
+     success states that hue too. */
+  --color-tx-success-50: #eef7e2;
+  --color-tx-success-100: #e0f0cc;
+  --color-tx-success-200: #cfe6b4;
+  --color-tx-success-300: #b3d888;
+  --color-tx-success-400: #90c95a;
+  --color-tx-success-500: #6fb92c;
+  --color-tx-success-600: #5da324;
+  --color-tx-success-700: #4d8a1b;
+  --color-tx-success-800: #3d6d16;
+  --color-tx-success-900: #2f5411;
+  --color-tx-success-950: #12300a;
+
+  /* ---------------------------------------------------------------------- *
+   * LAYER 2 — semantic roles
+   * Every one is a var() reference into layer 1. Override either layer.
+   * ---------------------------------------------------------------------- */
+
+  /* surfaces */
+  --color-tx-canvas: var(--color-tx-neutral-100);
+  --color-tx-surface: var(--color-tx-neutral-0);
+  --color-tx-surface-raised: var(--color-tx-neutral-0);
+  --color-tx-surface-sunken: var(--color-tx-neutral-50);
+  --color-tx-surface-inverse: var(--color-tx-ink-900);
+
+  /* borders */
+  --color-tx-border: var(--color-tx-neutral-300);
+  --color-tx-border-subtle: var(--color-tx-neutral-200);
+  --color-tx-border-strong: var(--color-tx-neutral-700);
+  --color-tx-border-inverse: color-mix(in srgb, var(--color-tx-neutral-0) 12%, transparent);
+
+  /* text */
+  --color-tx-text-primary: var(--color-tx-neutral-900);
+  --color-tx-text-heading: var(--color-tx-ink-900);
+  --color-tx-text-muted: var(--color-tx-neutral-700);
+  --color-tx-text-subtle: var(--color-tx-neutral-600);
+  --color-tx-text-disabled: var(--color-tx-neutral-500);
+  --color-tx-text-inverse: var(--color-tx-neutral-0);
+  --color-tx-text-on-primary: var(--color-tx-brand-950);
+  --color-tx-text-on-accent: var(--color-tx-neutral-0);
+  --color-tx-text-on-danger: var(--color-tx-neutral-0);
+
+  /* primary (brand) role */
+  --color-tx-primary: var(--color-tx-brand-500);
+  --color-tx-primary-hover: var(--color-tx-brand-700);
+  --color-tx-primary-active: var(--color-tx-brand-800);
+  --color-tx-primary-subtle: var(--color-tx-brand-50);
+  --color-tx-primary-border: var(--color-tx-brand-200);
+  --color-tx-primary-text: var(--color-tx-brand-700);
+
+  /* accent (navy) role — solid default buttons, header, toast */
+  --color-tx-accent: var(--color-tx-ink-900);
+  --color-tx-accent-hover: var(--color-tx-ink-700);
+  --color-tx-accent-active: var(--color-tx-ink-950);
+  --color-tx-accent-subtle: var(--color-tx-ink-50);
+  --color-tx-accent-border: var(--color-tx-ink-200);
+  --color-tx-accent-text: var(--color-tx-ink-900);
+
+  /* status roles */
+  --color-tx-danger: var(--color-tx-danger-500);
+  --color-tx-danger-hover: var(--color-tx-danger-600);
+  --color-tx-danger-subtle: var(--color-tx-danger-50);
+  --color-tx-danger-border: var(--color-tx-danger-200);
+  --color-tx-danger-text: var(--color-tx-danger-500);
+
+  --color-tx-warning: var(--color-tx-warning-500);
+  --color-tx-warning-hover: var(--color-tx-warning-600);
+  --color-tx-warning-subtle: var(--color-tx-warning-50);
+  --color-tx-warning-border: var(--color-tx-warning-200);
+  --color-tx-warning-text: var(--color-tx-warning-700);
+
+  --color-tx-success: var(--color-tx-success-500);
+  --color-tx-success-hover: var(--color-tx-success-600);
+  --color-tx-success-subtle: var(--color-tx-success-50);
+  --color-tx-success-border: var(--color-tx-success-200);
+  --color-tx-success-text: var(--color-tx-success-700);
+
+  --color-tx-info: var(--color-tx-info-500);
+  --color-tx-info-hover: var(--color-tx-info-600);
+  --color-tx-info-subtle: var(--color-tx-info-50);
+  --color-tx-info-border: var(--color-tx-info-200);
+  --color-tx-info-text: var(--color-tx-info-700);
+
+  /* interaction */
+  --color-tx-focus-ring: var(--color-tx-brand-700);
+  --color-tx-focus-glow: color-mix(in srgb, var(--color-tx-brand-500) 16%, transparent);
+  --color-tx-scrim: color-mix(in srgb, var(--color-tx-ink-900) 50%, transparent);
+  --color-tx-hover-fill: var(--color-tx-neutral-200);
+  --color-tx-control-off: var(--color-tx-neutral-300);
+  --color-tx-selected-fill: var(--color-tx-brand-50);
+  --color-tx-skeleton: var(--color-tx-neutral-200);
+  --color-tx-skeleton-sheen: var(--color-tx-neutral-100);
+
+  /* scrollbars — applied in base.css. The thumb is a mid neutral rather than
+     the border colour: at this width a border-weight grey is all but invisible,
+     and the scrollbar is an affordance, not a divider. The track is transparent
+     so a scroll area keeps whatever surface it sits on. */
+  --color-tx-scrollbar-thumb: var(--color-tx-neutral-400);
+  --color-tx-scrollbar-thumb-hover: var(--color-tx-neutral-600);
+  --color-tx-scrollbar-track: transparent;
+
+  /* ---------------------------------------------------------------------- *
+   * Typography
+   * ---------------------------------------------------------------------- */
+  --font-tx-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-tx-display: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
+  --font-tx-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
+
+  /* 10-step ladder. `base` (14px) is the workhorse control/table size;
+     `lg` (15px) is body copy. Monotonic, so the names never mislead. */
+  --text-tx-2xs: 0.656rem;   /* 10.5px — uppercase mono labels, th, badges */
+  --text-tx-xs: 0.719rem;    /* 11.5px — chip text, secondary sub-lines    */
+  --text-tx-sm: 0.781rem;    /* 12.5px — small buttons, dense meta         */
+  --text-tx-md: 0.844rem;    /* 13.5px — buttons, checklists               */
+  --text-tx-base: 0.875rem;  /* 14px   — inputs, table cells               */
+  --text-tx-lg: 0.938rem;    /* 15px   — body copy                         */
+  --text-tx-xl: 1.063rem;    /* 17px   — section heading, wordmark         */
+  --text-tx-2xl: 1.313rem;   /* 21px   — page title (mobile)               */
+  --text-tx-3xl: 1.563rem;   /* 25px   — page title                        */
+  --text-tx-4xl: 2rem;       /* 32px   — stat value                        */
+
+  --leading-tx-tight: 1.25;
+  --leading-tx-snug: 1.35;
+  --leading-tx-normal: 1.55;
+  --leading-tx-relaxed: 1.65;
+
+  --tracking-tx-tight: -0.01em;
+  --tracking-tx-normal: 0em;
+  --tracking-tx-wide: 0.05em;
+  --tracking-tx-wider: 0.07em;
+  --tracking-tx-widest: 0.09em;
+  --tracking-tx-caps: 0.22em; /* login mark / wordmark lockup */
+
+  /* ---------------------------------------------------------------------- *
+   * Spacing — a 2px-based grid. Component padding rounds to this grid rather
+   * than reproducing the POC's odd 9/11/13px values, so a designer can
+   * re-space the whole kit from here.
+   * ---------------------------------------------------------------------- */
+  --spacing-tx-0: 0px;
+  --spacing-tx-px: 1px;
+  --spacing-tx-0-5: 0.125rem; /*  2px */
+  --spacing-tx-1: 0.25rem;    /*  4px */
+  --spacing-tx-1-5: 0.375rem; /*  6px */
+  --spacing-tx-2: 0.5rem;     /*  8px */
+  --spacing-tx-2-5: 0.625rem; /* 10px */
+  --spacing-tx-3: 0.75rem;    /* 12px */
+  --spacing-tx-3-5: 0.875rem; /* 14px */
+  --spacing-tx-4: 1rem;       /* 16px */
+  --spacing-tx-5: 1.25rem;    /* 20px */
+  --spacing-tx-6: 1.5rem;     /* 24px */
+  --spacing-tx-7: 1.75rem;    /* 28px */
+  --spacing-tx-8: 2rem;       /* 32px */
+  --spacing-tx-10: 2.5rem;    /* 40px */
+  --spacing-tx-12: 3rem;      /* 48px */
+  --spacing-tx-14: 3.5rem;    /* 56px */
+  --spacing-tx-16: 4rem;      /* 64px */
+  --spacing-tx-20: 5rem;      /* 80px */
+
+  /* Named sizes live in the spacing namespace on purpose: Tailwind v4 draws
+     w-* / h-* / min-w-* / size-* from --spacing-*, so `h-tx-control-md` and
+     `w-tx-sidebar` only exist as utilities if they are declared here. */
+  --spacing-tx-control-sm: 1.75rem;  /* 28px */
+  --spacing-tx-control-md: 2.25rem;  /* 36px */
+  --spacing-tx-control-lg: 2.75rem;  /* 44px — also the mobile touch target */
+  --spacing-tx-icon-sm: 0.9375rem;   /* 15px */
+  --spacing-tx-icon-md: 1.125rem;    /* 18px */
+  --spacing-tx-icon-lg: 1.5rem;      /* 24px */
+  --spacing-tx-sidebar: 14.75rem;    /* 236px */
+  --spacing-tx-scrollbar: 0.625rem;  /* 10px — WebKit track; see base.css */
+  --spacing-tx-scrollbar-inset: 0.125rem; /* 2px of track either side of the thumb */
+  --spacing-tx-popup-sm: 12rem;      /* 192px — dropdown list max height */
+  --spacing-tx-popup-md: 18rem;      /* 288px */
+  --spacing-tx-popup-lg: 24rem;      /* 384px */
+
+  /* ---------------------------------------------------------------------- *
+   * Radius / shadow / motion / sizing
+   * ---------------------------------------------------------------------- */
+  --radius-tx-none: 0px;
+  --radius-tx-xs: 0.1875rem;  /*  3px — focus ring rounding           */
+  --radius-tx-sm: 0.375rem;   /*  6px — buttons, inputs, chips        */
+  --radius-tx-md: 0.5rem;     /*  8px — panels, cards, tiles          */
+  --radius-tx-lg: 0.75rem;    /* 12px — dialogs                       */
+  --radius-tx-xl: 0.875rem;   /* 14px — hero/login card               */
+  --radius-tx-full: 9999px;   /*        pills, badges, avatars        */
+
+  --shadow-tx-none: none;
+  --shadow-tx-sm: 0 1px 2px color-mix(in srgb, var(--color-tx-ink-900) 6%, transparent);
+  --shadow-tx-md:
+    0 1px 2px color-mix(in srgb, var(--color-tx-ink-900) 6%, transparent),
+    0 6px 18px color-mix(in srgb, var(--color-tx-ink-900) 5%, transparent);
+  --shadow-tx-popup:
+    0 2px 6px color-mix(in srgb, var(--color-tx-ink-900) 8%, transparent),
+    0 10px 30px color-mix(in srgb, var(--color-tx-ink-900) 14%, transparent);
+  --shadow-tx-lg: 0 24px 60px color-mix(in srgb, var(--color-tx-ink-900) 28%, transparent);
+  --shadow-tx-focus: 0 0 0 3px var(--color-tx-focus-glow);
+  /* The same ring in the error colour, so an invalid control's focus state
+     is a token rather than a hand-written shadow inside a component. */
+  --shadow-tx-focus-danger: 0 0 0 3px var(--color-tx-danger-subtle);
+
+  --inset-shadow-tx-selected: inset 3px 0 0 var(--color-tx-primary);
+
+  --ease-tx-standard: cubic-bezier(0.2, 0, 0.2, 1);
+  --ease-tx-emphasis: cubic-bezier(0.2, 0, 0, 1);
+
+  --duration-tx-fast: 120ms;
+  --duration-tx-base: 150ms;
+  --duration-tx-slow: 250ms;
+
+  /* Focus ring geometry. Not a Tailwind utility namespace — these exist so the
+     base layer's :focus-visible rule stays literal-free and re-tunable. */
+  --width-tx-focus-ring: 2px;
+  --width-tx-focus-offset: 2px;
+  --width-tx-border: 1px;
+  --width-tx-border-strong: 2px;
+  --width-tx-accent-bar: 4px; /* toast / part-card leading edge */
+}

package/styles/ui-kit.css

@@ -0,0 +1,18 @@
+/* =============================================================================
+ * @tx-angular-design-system/ui-kit — single stylesheet entry point.
+ *
+ * In a consumer app, `ng add @tx-angular-design-system/ui-kit` writes:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@angular/cdk/overlay-prebuilt.css';
+ *   @import '@tx-angular-design-system/ui-kit/styles/ui-kit.css';
+ *   @source '../../node_modules/@tx-angular-design-system/ui-kit';
+ *
+ * The @source line is what makes the kit's utility classes exist at all:
+ * Tailwind skips node_modules during automatic content detection, so without
+ * it every class in the library's compiled .mjs templates is scanned out and
+ * the components render unstyled.
+ * ========================================================================== */
+
+@import './theme.css';
+@import './base.css';