@rblabs-dev/axiom 0.0.0-stage → 1.2.0

package/styles/_tokens.scss

@@ -0,0 +1,341 @@
+// Every --rb-* token from docs/design-system.md (sections 5 to 7). The maps are the single source of
+// the values; `declare()` turns them into custom properties and is only emitted where the entry
+// mixin includes it. Colors are `light-dark()` pairs, so they follow the active `color-scheme`.
+
+@use 'sass:list';
+@use 'sass:map';
+
+// Color roles: name -> (light, dark). Contrast is verified in docs/design-system.md, section 5.8.
+$colors: (
+  // Primary and tertiary (5.3)
+  'primary': (#1f63d1, #67a2ff),
+  'primary-hover': (#1859bf, #8bb8ff),
+  'on-primary': (#ffffff, #06101c),
+  'primary-soft': (#e8f1ff, #12284a),
+  'on-primary-soft': (#0f3f8c, #cfe0ff),
+  'tertiary': (#00708c, #7dd3fc),
+  'on-tertiary': (#ffffff, #04111d),
+  // Neutral surfaces (5.4)
+  'bg': (#f4f7fb, #08111d),
+  'surface-sunken': (#edf2f8, #0b1726),
+  'surface': (#ffffff, #0e1b2c),
+  'surface-raised': (#ffffff, #132339),
+  'surface-hover': (#e8eef6, #172a42),
+  'surface-nav': (#ffffff, #0a1524),
+  'control': (#ffffff, #0a1625),
+  // Text and borders (5.5)
+  'text-strong': (#132338, #f6f9fd),
+  'text': (#2d4056, #dce7f5),
+  'text-muted': (#4f6379, #a3b4c9),
+  'text-subtle': (#566a81, #8b9db4),
+  'text-disabled': (#8a9bb0, #5a6d85),
+  'border': (#dce5ef, #1d3049),
+  'border-strong': (#b9cadb, #315174),
+  'outline': (#7a8ea5, #5f7a99),
+  'focus': (#1d63d0, #8bb8ff),
+  // Status (5.6)
+  'info': (#1a5f9e, #7cc4ff),
+  'info-soft': (#eaf4ff, #0c223b),
+  'info-border': (#9bc4ee, #245280),
+  'on-info': (#ffffff, #04121f),
+  'success': (#1b6a4b, #6fdcaa),
+  'success-soft': (#e9f8f1, #0d281f),
+  'success-border': (#8bcbb0, #236248),
+  'on-success': (#ffffff, #03140d),
+  'warning': (#7a5500, #f4c45a),
+  'warning-soft': (#fff8e4, #2a210d),
+  'warning-border': (#e3c56f, #745c20),
+  'on-warning': (#ffffff, #1d1400),
+  'danger': (#b42339, #ff9aab),
+  'danger-soft': (#fff0f2, #30151d),
+  'danger-border': (#e6a2ad, #7b3142),
+  'on-danger': (#ffffff, #2a0710)
+);
+
+// Fixed values, identical in both themes (5.2 and 13.1).
+$fixed-colors: (
+  'brand-start': #67a2ff,
+  'brand-end': #2f78ed,
+  'brand-ink': #f6f9fd,
+  'brand-navy': #08111d,
+  'stage': #05080f,
+  'on-stage': #f6f9fd,
+);
+
+// Translucent tokens (5.7). Always derived from a role; the two rgb() values live only here.
+$overlays: (
+  'overlay-hover': color-mix(in srgb, var(--rb-color-text-strong) 6%, transparent),
+  'overlay-pressed': color-mix(in srgb, var(--rb-color-text-strong) 10%, transparent),
+  'overlay-primary': color-mix(in srgb, var(--rb-color-primary) 10%, transparent),
+  'overlay-selected': color-mix(in srgb, var(--rb-color-primary) 16%, transparent),
+  'selection': color-mix(in srgb, var(--rb-color-primary) 32%, transparent),
+  'glass': color-mix(in srgb, var(--rb-color-bg) 88%, transparent),
+  'scrim': light-dark(rgb(19 35 56 / 40%), rgb(2 6 12 / 64%)),
+  'shadow': light-dark(rgb(26 52 82 / 13%), rgb(0 0 0 / 28%)),
+  'stage-scrim': color-mix(in srgb, var(--rb-color-stage) 64%, transparent),
+);
+
+$font-sans: "'Inter Variable', Inter, 'Segoe UI', system-ui, -apple-system, sans-serif";
+$font-mono: "ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace";
+
+$font-weights: (
+  'regular': 400,
+  'medium': 500,
+  'semibold': 600,
+  'bold': 700,
+);
+
+// Type scale (6.2): role -> (size, line height, weight, tracking).
+$type-scale: (
+  'display-large': (
+    3.5rem,
+    4rem,
+    600,
+    -0.02em,
+  ),
+  'display-medium': (
+    2.75rem,
+    3.25rem,
+    600,
+    -0.02em,
+  ),
+  'display-small': (
+    2.25rem,
+    2.75rem,
+    600,
+    -0.015em,
+  ),
+  'headline-large': (
+    2rem,
+    2.5rem,
+    600,
+    -0.01em,
+  ),
+  'headline-medium': (
+    1.75rem,
+    2.25rem,
+    600,
+    -0.01em,
+  ),
+  'headline-small': (
+    1.5rem,
+    2rem,
+    600,
+    0,
+  ),
+  'title-large': (
+    1.375rem,
+    1.75rem,
+    600,
+    0,
+  ),
+  'title-medium': (
+    1rem,
+    1.5rem,
+    600,
+    0,
+  ),
+  'title-small': (
+    0.875rem,
+    1.25rem,
+    600,
+    0,
+  ),
+  'body-large': (
+    1rem,
+    1.5rem,
+    400,
+    0,
+  ),
+  'body-medium': (
+    0.875rem,
+    1.25rem,
+    400,
+    0,
+  ),
+  'body-small': (
+    0.75rem,
+    1rem,
+    400,
+    0,
+  ),
+  'label-large': (
+    0.875rem,
+    1.25rem,
+    500,
+    0.01em,
+  ),
+  'label-medium': (
+    0.75rem,
+    1rem,
+    500,
+    0.02em,
+  ),
+  'label-small': (
+    0.75rem,
+    1rem,
+    600,
+    0.06em,
+  ),
+  'page-title': (
+    clamp(1.5rem, 1.25rem + 1vw, 2rem),
+    1.2,
+    700,
+    -0.015em,
+  ),
+  'hero': (
+    clamp(2.25rem, 1.5rem + 3vw, 3.5rem),
+    1.1,
+    700,
+    -0.025em,
+  ),
+);
+
+// Roles that exist in Material 3 (everything except page-title and hero).
+$material-type-roles: (
+  'display-large',
+  'display-medium',
+  'display-small',
+  'headline-large',
+  'headline-medium',
+  'headline-small',
+  'title-large',
+  'title-medium',
+  'title-small',
+  'body-large',
+  'body-medium',
+  'body-small',
+  'label-large',
+  'label-medium',
+  'label-small'
+);
+
+$space: (
+  '0': 0,
+  '1': 0.25rem,
+  '2': 0.5rem,
+  '3': 0.75rem,
+  '4': 1rem,
+  '5': 1.25rem,
+  '6': 1.5rem,
+  '8': 2rem,
+  '10': 2.5rem,
+  '12': 3rem,
+  '16': 4rem,
+);
+
+$size: (
+  'control-height': 2.5rem,
+  'control-height-sm': 2rem,
+  'touch-target': 2.75rem,
+  'icon-sm': 1rem,
+  'icon-md': 1.25rem,
+  'icon-lg': 1.5rem,
+  'shell-topbar': 4.25rem,
+  'shell-nav': 17rem,
+  'shell-module-nav': 12rem,
+  'monogram': 2.5rem,
+  'monogram-sm': 2rem,
+  'content-max': 90rem,
+  'card': 28rem,
+  'card-wide': 34rem,
+  'focus-ring': 2px,
+);
+
+$radius: (
+  'xs': 0.25rem,
+  'sm': 0.5rem,
+  'md': 0.75rem,
+  'lg': 1rem,
+  'xl': 1.5rem,
+  'full': 9999px,
+);
+
+$elevation: (
+  '0': none,
+  '1': (
+    0 1px 3px var(--rb-color-shadow),
+  ),
+  '2': (
+    0 8px 20px var(--rb-color-shadow),
+  ),
+  '3': (
+    0 16px 36px var(--rb-color-shadow),
+  ),
+);
+
+$motion: (
+  'duration-fast': 120ms,
+  'duration-base': 180ms,
+  'duration-slow': 280ms,
+  'easing-standard': cubic-bezier(0.2, 0, 0, 1),
+  'easing-decelerate': cubic-bezier(0, 0, 0, 1),
+  'easing-accelerate': cubic-bezier(0.3, 0, 1, 1),
+);
+
+$z: (
+  'base': 0,
+  'raised': 1,
+  'sticky': 100,
+  'nav': 200,
+  'overlay': 1000,
+  'skip-link': 1100,
+);
+
+// Background per theme; also the <meta name="theme-color"> value (section 11).
+$theme-color-light: list.nth(map.get($colors, 'bg'), 1);
+$theme-color-dark: list.nth(map.get($colors, 'bg'), 2);
+
+@mixin declare() {
+  @each $name, $pair in $colors {
+    --rb-color-#{$name}: light-dark(#{list.nth($pair, 1)}, #{list.nth($pair, 2)});
+  }
+  @each $name, $value in $fixed-colors {
+    --rb-color-#{$name}: #{$value};
+  }
+  @each $name, $value in $overlays {
+    --rb-color-#{$name}: #{$value};
+  }
+
+  --rb-font-sans: #{$font-sans};
+  --rb-font-mono: #{$font-mono};
+  @each $name, $value in $font-weights {
+    --rb-font-weight-#{$name}: #{$value};
+  }
+  @each $role, $spec in $type-scale {
+    $size: list.nth($spec, 1);
+    $line-height: list.nth($spec, 2);
+    --rb-type-#{$role}: #{list.nth($spec, 3)} #{$size}/#{$line-height} var(--rb-font-sans);
+    --rb-type-#{$role}-size: #{$size};
+    --rb-type-#{$role}-line-height: #{$line-height};
+    --rb-type-#{$role}-weight: #{list.nth($spec, 3)};
+    --rb-type-#{$role}-tracking: #{list.nth($spec, 4)};
+  }
+
+  @each $name, $value in $space {
+    --rb-space-#{$name}: #{$value};
+  }
+  --rb-space-page: clamp(var(--rb-space-4), 3vw, var(--rb-space-8));
+  @each $name, $value in $size {
+    --rb-size-#{$name}: #{$value};
+  }
+  @each $name, $value in $radius {
+    --rb-radius-#{$name}: #{$value};
+  }
+  @each $name, $value in $elevation {
+    --rb-elevation-#{$name}: #{$value};
+  }
+  @each $name, $value in $motion {
+    --rb-motion-#{$name}: #{$value};
+  }
+  @each $name, $value in $z {
+    --rb-z-#{$name}: #{$value};
+  }
+
+  // Reduced motion (7.5): every duration collapses to zero.
+  @media (prefers-reduced-motion: reduce) {
+    --rb-motion-duration-fast: 0ms;
+    --rb-motion-duration-base: 0ms;
+    --rb-motion-duration-slow: 0ms;
+  }
+}

package/types/rblabs-dev-axiom-showcase.d.ts

@@ -0,0 +1,81 @@
+import { SafeResourceUrl } from "@angular/platform-browser";
+import { RbMessageTone, RbPageHeaderMetric, RbStatusTone, ThemeService } from "@rblabs-dev/axiom";
+import * as i0 from "@angular/core";
+type RbShellExampleKind = 'app-sidenav' | 'app-modules' | 'public' | 'sign-in';
+interface ColorGroup {
+  title: string;
+  roles: {
+    token: string;
+    on?: string;
+  }[];
+}
+export interface ShowcaseRow {
+  name: string;
+  clientId: string;
+  status: {
+    tone: RbStatusTone;
+    label: string;
+  };
+  updated: string;
+}
+/**
+ * Living reference of the kit (docs/design-system.md): tokens, type, spacing, shape, elevation,
+ * Material components, the content components and the kit style classes, in the active theme.
+ */
+export declare class DesignSystemShowcaseComponent {
+  protected readonly theme: ThemeService;
+  private readonly confirmDialog;
+  protected readonly version: string;
+  protected readonly colorGroups: ColorGroup[];
+  protected readonly typeRoles: string[];
+  protected readonly spaceSteps: string[];
+  protected readonly radii: string[];
+  protected readonly elevations: string[];
+  protected readonly messageSamples: {
+    tone: RbMessageTone;
+    title: string;
+    body: string;
+  }[];
+  protected readonly chipSamples: {
+    tone: RbStatusTone;
+    label: string;
+  }[];
+  protected readonly tableRows: ShowcaseRow[];
+  protected readonly tableColumns: string[];
+  protected readonly buttonRoles: {
+    role: string;
+    markup: string;
+    legacy: string;
+  }[];
+  protected readonly monogramSizes: {
+    token: string;
+    value: string;
+  }[];
+  protected readonly iconTiles: {
+    icon: string;
+    overline: string;
+    label: string;
+  }[];
+  /** `?example=<kind>` renders one shell example full page instead of the reference. */
+  protected readonly example: import("@angular/core").Signal<RbShellExampleKind | null>;
+  private readonly sanitizer;
+  protected readonly shellExamples: {
+    src: SafeResourceUrl;
+    kind: RbShellExampleKind;
+    title: string;
+    description: string;
+  }[];
+  protected readonly headerMetrics: import("@angular/core").Signal<RbPageHeaderMetric[]>;
+  protected readonly defaultScopes: string[];
+  protected readonly scopes: import("@angular/core").WritableSignal<string[]>;
+  /** Mounted from the start so the result of each dialog is announced (section 9.5). */
+  protected readonly dialogResult: import("@angular/core").WritableSignal<string>;
+  protected readonly dialogResultTone: import("@angular/core").WritableSignal<RbMessageTone>;
+  protected openConfirm(kind: 'primary' | 'danger' | 'reason'): Promise<void>;
+  protected removeScope(scope: string): void;
+  protected resetScopes(): void;
+  private showResult;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DesignSystemShowcaseComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DesignSystemShowcaseComponent, "rb-design-system-showcase", never, {}, {}, never, never, true, never>;
+}
+export {};