@rblabs-dev/axiom 0.0.0-stage → 1.2.1

package/styles/_components.scss

@@ -0,0 +1,560 @@
+// Kit style classes (docs/design-system.md, section 15): forms, tables, layout composition,
+// skeletons, text roles and landing pages. Buttons have no class of their own; they are Angular
+// Material buttons (15.11).
+//
+// Every selector starts with `:where(<root>)`, so a class keeps the specificity of a single class
+// plus its own parts and feature styles can adjust layout without fighting the kit. Selectors that
+// must beat Angular Material's table rules add an element or a second class instead.
+
+@use 'breakpoints';
+@use 'base';
+
+@mixin styles($root) {
+  $r: ':where(#{$root})';
+
+  @include _forms($r);
+  @include _tables($r);
+  @include _layout($r);
+  @include _skeleton($r);
+  @include _text($r);
+  @include _landing($r);
+}
+
+// Forms (15.8). Native controls; `mat-form-field` keeps Material's own anatomy and sits next to
+// these fields inside `.rb-form-grid`.
+@mixin _forms($r) {
+  #{$r} .rb-field {
+    display: grid;
+    gap: var(--rb-space-2);
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  #{$r} .rb-field__label {
+    padding: 0;
+    color: var(--rb-color-text-strong);
+    font: var(--rb-type-label-large);
+    letter-spacing: var(--rb-type-label-large-tracking);
+  }
+
+  #{$r} .rb-field__control {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    min-height: var(--rb-size-control-height);
+    margin: 0;
+    padding: var(--rb-space-2) var(--rb-space-3);
+    border: 1px solid var(--rb-color-outline);
+    border-radius: var(--rb-radius-sm);
+    background-color: var(--rb-color-control);
+    color: var(--rb-color-text-strong);
+    font: var(--rb-type-body-large);
+    transition:
+      border-color var(--rb-motion-duration-fast) var(--rb-motion-easing-standard),
+      background-color var(--rb-motion-duration-fast) var(--rb-motion-easing-standard);
+  }
+
+  #{$r} textarea.rb-field__control {
+    min-height: calc(var(--rb-size-control-height) * 2.5);
+    resize: vertical;
+  }
+
+  // Touch target on coarse pointers (7.2). The control's own minimum outranks the
+  // zero-specificity touch rule in _base.scss, so the field restates it after that minimum.
+  // Textareas keep their taller minimum, which their element selector makes win.
+  @media (pointer: coarse) {
+    #{$r} .rb-field__control {
+      min-block-size: var(--rb-size-touch-target);
+    }
+  }
+
+  #{$r} .rb-field__control::placeholder {
+    color: var(--rb-color-text-subtle);
+    opacity: 1;
+  }
+
+  #{$r} .rb-field__control:hover:not(:disabled) {
+    border-color: var(--rb-color-text-muted);
+  }
+
+  #{$r} .rb-field__control:focus-visible {
+    border-color: var(--rb-color-primary);
+  }
+
+  #{$r} .rb-field--invalid .rb-field__control,
+  #{$r} .rb-field__control[aria-invalid='true'] {
+    border-color: var(--rb-color-danger);
+  }
+
+  #{$r} .rb-field__control:disabled {
+    border-color: var(--rb-color-border);
+    background-color: var(--rb-color-surface-sunken);
+    color: var(--rb-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  #{$r} .rb-field--disabled .rb-field__label {
+    color: var(--rb-color-text-disabled);
+  }
+
+  // Browser autofill paints its own background; an inset shadow in the control color covers it.
+  #{$r} .rb-field__control:autofill,
+  #{$r} .rb-field__control:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--rb-color-control);
+    caret-color: var(--rb-color-text-strong);
+    -webkit-text-fill-color: var(--rb-color-text-strong);
+  }
+
+  #{$r} .rb-field__hint,
+  #{$r} .rb-field__error {
+    margin: 0;
+    font: var(--rb-type-body-small);
+    letter-spacing: var(--rb-type-body-small-tracking);
+  }
+
+  #{$r} .rb-field__hint {
+    color: var(--rb-color-text-subtle);
+  }
+
+  #{$r} .rb-field__error {
+    display: flex;
+    gap: var(--rb-space-1);
+    align-items: flex-start;
+    color: var(--rb-color-danger);
+  }
+
+  #{$r} .rb-field__error .mat-icon {
+    flex: none;
+    width: var(--rb-size-icon-sm);
+    height: var(--rb-size-icon-sm);
+    font-size: var(--rb-size-icon-sm);
+  }
+
+  #{$r} .rb-form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--rb-space-5);
+    align-items: start;
+    min-width: 0;
+
+    @include breakpoints.below(sm) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  #{$r} .rb-form-grid > .mat-mdc-form-field {
+    width: 100%;
+  }
+
+  #{$r} .rb-form-grid__full {
+    grid-column: 1 / -1;
+  }
+}
+
+// Tables (15.9). `.rb-table` styles a native `<table>` and `<table mat-table>`. Below `md` each row
+// becomes a stacked record whose cells are labelled from `data-label`; `.rb-table--inline` keeps
+// the grid and lets `.rb-table-scroll` scroll it instead.
+@mixin _tables($r) {
+  #{$r} .rb-table-scroll {
+    overflow-x: auto;
+    min-width: 0;
+    border: 1px solid var(--rb-color-border);
+    border-radius: var(--rb-radius-lg);
+    background-color: var(--rb-color-surface);
+  }
+
+  #{$r} table.rb-table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    background-color: transparent;
+    color: var(--rb-color-text);
+    font: var(--rb-type-body-medium);
+    letter-spacing: var(--rb-type-body-medium-tracking);
+    text-align: start;
+  }
+
+  #{$r} .rb-table tr {
+    height: auto;
+  }
+
+  #{$r} .rb-table :is(th, td) {
+    padding: var(--rb-space-3) var(--rb-space-4);
+    border-block-end: 1px solid var(--rb-color-border);
+    color: inherit;
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  #{$r} .rb-table th {
+    background-color: var(--rb-color-surface-sunken);
+    color: var(--rb-color-text-subtle);
+    font: var(--rb-type-label-small);
+    letter-spacing: var(--rb-type-label-small-tracking);
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  #{$r} .rb-table tbody tr:last-child > :is(td, th) {
+    border-block-end: 0;
+  }
+
+  #{$r} .rb-table tbody tr:not(.rb-table__empty-row, .rb-table__skeleton-row):hover {
+    background-color: var(--rb-color-surface-hover);
+  }
+
+  #{$r} .rb-table :is(th, td).rb-table__cell--numeric {
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+  }
+
+  #{$r} .rb-table__actions {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--rb-space-1);
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  // The record's name, linking to its detail view.
+  #{$r} .rb-table__link {
+    color: var(--rb-color-text-strong);
+    font: var(--rb-type-title-small);
+    overflow-wrap: anywhere;
+    text-decoration: none;
+  }
+
+  #{$r} .rb-table__link:hover {
+    color: var(--rb-color-primary);
+    text-decoration: underline;
+  }
+
+  #{$r} .rb-table :is(.rb-table__empty-row, .mat-mdc-no-data-row) > td {
+    padding: var(--rb-space-8) var(--rb-space-4);
+    color: var(--rb-color-text-muted);
+    text-align: center;
+  }
+
+  #{$r} .rb-table__skeleton-row .rb-skeleton {
+    max-inline-size: 14rem;
+  }
+
+  @include breakpoints.below(md) {
+    #{$r} table.rb-table:not(.rb-table--inline),
+    #{$r} .rb-table:not(.rb-table--inline) :is(tbody, tr, td) {
+      display: block;
+    }
+
+    // The header row stays in the accessibility tree; each cell repeats its label visually.
+    #{$r} .rb-table:not(.rb-table--inline) thead {
+      @include base.visually-hidden();
+    }
+
+    #{$r} .rb-table:not(.rb-table--inline) tbody tr {
+      padding: var(--rb-space-3) var(--rb-space-4);
+      border-block-end: 1px solid var(--rb-color-border);
+    }
+
+    #{$r} .rb-table:not(.rb-table--inline) tbody tr:last-child {
+      border-block-end: 0;
+    }
+
+    #{$r} .rb-table:not(.rb-table--inline) td {
+      display: grid;
+      grid-template-columns: minmax(6rem, 35%) minmax(0, 1fr);
+      gap: var(--rb-space-3);
+      align-items: baseline;
+      // Chips and buttons keep their own width instead of stretching across the value column.
+      justify-items: start;
+      padding: var(--rb-space-1) 0;
+      border-block-end: 0;
+      overflow-wrap: anywhere;
+    }
+
+    #{$r} .rb-table:not(.rb-table--inline) td[data-label]::before {
+      color: var(--rb-color-text-subtle);
+      font: var(--rb-type-label-small);
+      letter-spacing: var(--rb-type-label-small-tracking);
+      text-transform: uppercase;
+      content: attr(data-label);
+      // Hidden from assistive technology, which already reads the column header.
+      content: attr(data-label) / '';
+    }
+
+    #{$r} .rb-table:not(.rb-table--inline) td:not([data-label]) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    // A technical value fills the column so it can truncate.
+    #{$r} .rb-table:not(.rb-table--inline) td > rb-technical-value {
+      justify-self: stretch;
+    }
+
+    #{$r} .rb-table:not(.rb-table--inline) :is(th, td).rb-table__cell--numeric {
+      text-align: start;
+    }
+
+    #{$r} .rb-table:not(.rb-table--inline) .rb-table__actions {
+      justify-content: flex-start;
+      padding-block-start: var(--rb-space-2);
+    }
+
+    #{$r} .rb-table:not(.rb-table--inline) :is(.rb-table__empty-row, .mat-mdc-no-data-row) > td {
+      display: block;
+      padding: var(--rb-space-6) 0;
+    }
+  }
+}
+
+// Layout composition (15.10).
+@mixin _layout($r) {
+  #{$r} .rb-stack {
+    display: grid;
+    gap: var(--rb-space-4);
+    align-content: start;
+    min-width: 0;
+  }
+
+  #{$r} .rb-stack--sm {
+    gap: var(--rb-space-2);
+  }
+
+  #{$r} .rb-stack--lg {
+    gap: var(--rb-space-6);
+  }
+
+  #{$r} .rb-master-detail {
+    display: grid;
+    grid-template-columns: minmax(17.5rem, 0.92fr) minmax(0, 1.08fr);
+    gap: var(--rb-space-6);
+    align-items: start;
+    min-width: 0;
+
+    @include breakpoints.below(xl) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  #{$r} .rb-master-detail--wide-detail {
+    grid-template-columns: minmax(17.5rem, 0.8fr) minmax(0, 1.2fr);
+
+    @include breakpoints.below(xl) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  #{$r} .rb-action-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--rb-space-2);
+    align-items: center;
+    min-width: 0;
+  }
+
+  #{$r} .rb-action-group--end {
+    justify-content: flex-end;
+  }
+
+  #{$r} .rb-action-group--between {
+    justify-content: space-between;
+  }
+
+  @include breakpoints.below(sm) {
+    #{$r} .rb-action-group--mobile-stack {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    #{$r} .rb-action-group--mobile-stack > * {
+      width: 100%;
+    }
+  }
+
+  #{$r} .rb-meta-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+    gap: var(--rb-space-3);
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  #{$r} .rb-meta-grid__item {
+    display: grid;
+    gap: var(--rb-space-1);
+    align-content: start;
+    min-width: 0;
+    padding: var(--rb-space-3) var(--rb-space-4);
+    border: 1px solid var(--rb-color-border);
+    border-radius: var(--rb-radius-md);
+    background-color: var(--rb-color-surface-sunken);
+  }
+
+  #{$r} .rb-meta-grid__label {
+    margin: 0;
+    color: var(--rb-color-text-subtle);
+    font: var(--rb-type-label-small);
+    letter-spacing: var(--rb-type-label-small-tracking);
+    text-transform: uppercase;
+  }
+
+  #{$r} .rb-meta-grid__value {
+    min-width: 0;
+    margin: 0;
+    color: var(--rb-color-text-strong);
+    font: var(--rb-type-body-medium);
+    overflow-wrap: anywhere;
+  }
+}
+
+// Loading placeholders (15.10). Decorative: the container announces loading with `aria-busy` and a
+// live region, and the placeholders carry `aria-hidden="true"`.
+@mixin _skeleton($r) {
+  #{$r} .rb-skeleton {
+    display: block;
+    inline-size: 100%;
+    block-size: var(--rb-type-body-medium-line-height);
+    border-radius: var(--rb-radius-xs);
+    background-color: var(--rb-color-surface-sunken);
+    background-image: linear-gradient(
+      90deg,
+      var(--rb-color-surface-sunken) 20%,
+      var(--rb-color-surface-hover) 50%,
+      var(--rb-color-surface-sunken) 80%
+    );
+    background-size: 200% 100%;
+    animation: rb-skeleton-shimmer calc(var(--rb-motion-duration-slow) * 5) ease-in-out infinite;
+  }
+
+  #{$r} .rb-skeleton--heading {
+    block-size: var(--rb-type-title-large-line-height);
+    max-inline-size: 60%;
+  }
+
+  #{$r} .rb-skeleton--control {
+    block-size: var(--rb-size-control-height);
+    border-radius: var(--rb-radius-sm);
+  }
+
+  // A static placeholder replaces the shimmer (7.5).
+  @media (prefers-reduced-motion: reduce) {
+    #{$r} .rb-skeleton {
+      animation: none;
+    }
+  }
+
+  @keyframes rb-skeleton-shimmer {
+    from {
+      background-position: 100% 0;
+    }
+
+    to {
+      background-position: -100% 0;
+    }
+  }
+}
+
+// Text roles (15.13): the uppercase labels every app wrote for itself.
+@mixin _text($r) {
+  // Short context above a title, in the primary color; an optional leading icon is sized to it.
+  #{$r} .rb-eyebrow {
+    display: flex;
+    gap: var(--rb-space-2);
+    align-items: center;
+    margin: 0;
+    color: var(--rb-color-primary);
+    font: var(--rb-type-label-small);
+    letter-spacing: var(--rb-type-label-small-tracking);
+    text-transform: uppercase;
+  }
+
+  #{$r} .rb-eyebrow .mat-icon {
+    inline-size: var(--rb-size-icon-sm);
+    block-size: var(--rb-size-icon-sm);
+    font-size: var(--rb-size-icon-sm);
+  }
+
+  // A quiet label over a value, a list or a group: the look of `.rb-meta-grid__label` anywhere.
+  #{$r} .rb-overline {
+    margin: 0;
+    color: var(--rb-color-text-subtle);
+    font: var(--rb-type-label-small);
+    letter-spacing: var(--rb-type-label-small-tracking);
+    text-transform: uppercase;
+  }
+}
+
+// Landing pages (15.13): the hero, tag lists and icon tiles of the public home pages.
+@mixin _landing($r) {
+  // The headline and its call to action beside a media column; one column below lg.
+  #{$r} .rb-hero {
+    display: grid;
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+    gap: var(--rb-space-12);
+    align-items: center;
+    min-width: 0;
+
+    @include breakpoints.below(lg) {
+      grid-template-columns: minmax(0, 1fr);
+      gap: var(--rb-space-8);
+    }
+  }
+
+  #{$r} .rb-hero__copy {
+    display: grid;
+    gap: var(--rb-space-6);
+    justify-items: start;
+    min-width: 0;
+  }
+
+  #{$r} .rb-hero__title {
+    max-inline-size: 16ch;
+    margin: 0;
+    color: var(--rb-color-text-strong);
+    font: var(--rb-type-hero);
+    letter-spacing: var(--rb-type-hero-tracking);
+    text-wrap: balance;
+  }
+
+  #{$r} .rb-hero__lead {
+    max-inline-size: 40rem;
+    margin: 0;
+    color: var(--rb-color-text-muted);
+    font: var(--rb-type-body-large);
+  }
+
+  // Descriptive tags (a stack, a feature list) as pills. Not interactive and not a state: state
+  // is an rb-status-chip.
+  #{$r} .rb-tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--rb-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  #{$r} .rb-tag-list > li {
+    padding: var(--rb-space-1) var(--rb-space-3);
+    border: 1px solid var(--rb-color-border);
+    border-radius: var(--rb-radius-full);
+    background-color: var(--rb-color-surface);
+    color: var(--rb-color-text);
+    font: var(--rb-type-label-medium);
+    letter-spacing: var(--rb-type-label-medium-tracking);
+  }
+
+  // A decorative icon on a soft primary square, leading a card or a list item.
+  #{$r} .rb-icon-tile {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    inline-size: var(--rb-size-control-height);
+    block-size: var(--rb-size-control-height);
+    border-radius: var(--rb-radius-md);
+    background-color: var(--rb-color-primary-soft);
+    color: var(--rb-color-on-primary-soft);
+  }
+}

package/styles/_fonts.scss

@@ -0,0 +1,63 @@
+// Self-hosted fonts (docs/design-system.md, sections 6.1 and 10). Nothing here loads from a CDN:
+// Inter Variable is bundled from @fontsource-variable/inter, and the Material Symbols subset is
+// served by the app from public/fonts/.
+
+// Inter Variable, Latin and Latin Extended. `optional` paints with the system fallback at once on a
+// slow network instead of delaying or reflowing the first render.
+@mixin inter() {
+  @font-face {
+    font-family: 'Inter Variable';
+    font-style: normal;
+    font-display: optional;
+    font-weight: 100 900;
+    src: url('@fontsource-variable/inter/files/inter-latin-wght-normal.woff2')
+      format('woff2-variations');
+    unicode-range:
+      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+      U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+  @font-face {
+    font-family: 'Inter Variable';
+    font-style: normal;
+    font-display: optional;
+    font-weight: 100 900;
+    src: url('@fontsource-variable/inter/files/inter-latin-ext-wght-normal.woff2')
+      format('woff2-variations');
+    unicode-range:
+      U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+      U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+      U+A720-A7FF;
+  }
+}
+
+// Material Symbols Outlined, the app's own subset (scripts/build-icon-font.mjs).
+// `block` keeps ligature names from flashing as text while the font loads.
+@mixin material-symbols($url) {
+  @font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url($url) format('woff2');
+  }
+}
+
+// The class `<mat-icon fontSet="material-symbols-outlined">` renders with.
+@mixin material-symbols-class() {
+  .material-symbols-outlined {
+    display: inline-block;
+    font-family: 'Material Symbols Outlined';
+    font-size: var(--rb-size-icon-lg);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+}

package/styles/_index.scss

@@ -0,0 +1,72 @@
+// Kit entry point. `@use`-ing this file emits no CSS; an app opts in by calling the entry mixin
+// once, at the root of its global stylesheet:
+//
+//   @use '@rblabs-dev/axiom' as rb;   (an app; the showcase app uses '../../axiom/src/styles')
+//
+//   @include rb.design-system($icon-font-url: '/fonts/material-symbols-outlined-v380-400-subset.a8057a86.woff2');
+//
+// Pass `$scope` to apply the kit only inside elements matching a selector, for example while an
+// app still has its own global styles:
+//
+//   @include rb.design-system($scope: '.rb-scope');
+//
+// In scoped mode the scope element paints like `body`, and `color-scheme` is inherited from
+// `<html>` (ThemeService keeps it correct). Overlays rendered outside the scope, such as menus or
+// dialogs in the CDK overlay container, do not receive the kit until it is applied unscoped. An
+// overlay opts in by putting the scope class on its pane (`panelClass`): the pane then receives
+// the tokens, theme and kit classes without being painted like the page, as RbConfirmDialogService
+// does with `rb-scope`.
+
+@use 'base';
+@use 'components';
+@use 'fonts';
+@use 'material-overrides';
+@use 'theme';
+@use 'tokens';
+
+@forward 'breakpoints' show below, above, $breakpoints;
+
+// Stamped from projects/axiom/package.json by the build (scripts/stamp-version.mjs).
+$version: '1.2.1';
+
+@mixin design-system($scope: null, $icon-font-url: null) {
+  @include fonts.inter();
+
+  @if $icon-font-url {
+    @include fonts.material-symbols($icon-font-url);
+  }
+
+  @if $scope {
+    #{$scope} {
+      @include tokens.declare();
+      @include theme.theme();
+      @include material-overrides.overrides();
+    }
+
+    @include base.styles($scope, '#{$scope}:not(.cdk-overlay-pane)');
+    @include components.styles($scope);
+
+    @if $icon-font-url {
+      #{$scope} {
+        @include fonts.material-symbols-class();
+      }
+    }
+  } @else {
+    html {
+      // Follows the OS before any script runs; ThemeService sets an explicit value when the user
+      // has chosen a theme (docs/design-system.md, section 11).
+      color-scheme: light dark;
+
+      @include tokens.declare();
+      @include theme.theme();
+      @include material-overrides.overrides();
+    }
+
+    @include base.styles(html, body);
+    @include components.styles(html);
+
+    @if $icon-font-url {
+      @include fonts.material-symbols-class();
+    }
+  }
+}