@rblabs-dev/axiom 0.0.0-stage → 1.2.0

package/styles/_material-overrides.scss

@@ -0,0 +1,79 @@
+// Component shape and size adjustments (docs/design-system.md, sections 7.2 and 7.3), only through
+// Material's documented `mat.<component>-overrides()` mixins. No `!important`, no selectors
+// targeting Material internals.
+
+@use '@angular/material' as mat;
+
+// Emits inside the current selector (html, or the scope selector).
+@mixin overrides() {
+  // Buttons: 8px corners instead of Material's full pill (radius `sm`).
+  @include mat.button-overrides(
+    (
+      filled-container-shape: var(--rb-radius-sm),
+      outlined-container-shape: var(--rb-radius-sm),
+      protected-container-shape: var(--rb-radius-sm),
+      text-container-shape: var(--rb-radius-sm),
+      tonal-container-shape: var(--rb-radius-sm),
+    )
+  );
+
+  @include mat.form-field-overrides(
+    (
+      outlined-container-shape: var(--rb-radius-sm),
+    )
+  );
+
+  @include mat.card-overrides(
+    (
+      elevated-container-shape: var(--rb-radius-lg),
+      outlined-container-shape: var(--rb-radius-lg),
+      filled-container-shape: var(--rb-radius-lg),
+    )
+  );
+
+  // Material paints dialogs on `surface` (the page background) without a shadow; the system puts
+  // them on the raised surface with elevation 3 (5.4 and 7.4).
+  @include mat.dialog-overrides(
+    (
+      container-shape: var(--rb-radius-lg),
+      container-color: var(--rb-color-surface-raised),
+      container-elevation-shadow: var(--rb-elevation-3),
+    )
+  );
+
+  // Square edges against the viewport, and the system scrim behind the drawer (5.7).
+  @include mat.sidenav-overrides(
+    (
+      container-shape: 0,
+      scrim-color: var(--rb-color-scrim),
+    )
+  );
+
+  @include mat.menu-overrides(
+    (
+      container-shape: var(--rb-radius-sm),
+    )
+  );
+
+  @include mat.snack-bar-overrides(
+    (
+      container-shape: var(--rb-radius-sm),
+    )
+  );
+
+  // Icon buttons reach the 44px target on coarse pointers (7.2). Chips grow to the same height, so
+  // their 44px remove action (_base.scss) stays inside the chip instead of overlapping a neighbor.
+  @media (pointer: coarse) {
+    @include mat.icon-button-overrides(
+      (
+        state-layer-size: var(--rb-size-touch-target),
+      )
+    );
+
+    @include mat.chips-overrides(
+      (
+        container-height: var(--rb-size-touch-target),
+      )
+    );
+  }
+}

package/styles/_palette.scss

@@ -0,0 +1,139 @@
+// Material 3 palettes for docs/design-system.md, section 5.1. Generated, never hand-edited: re-run
+//   ng generate @angular/material:theme-color --primary-color='#2f78ed' --tertiary-color='#06b6d4' \
+//     --neutral-color='#0e1b2c' --is-scss --directory=projects/axiom/src/styles/
+// and rename the output (_theme-colors.scss) to this file, keeping this header.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #2f78ed, tertiary: #06b6d4, neutral: #0e1b2c
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001a42,
+    20: #002e6b,
+    25: #003880,
+    30: #004396,
+    35: #004ead,
+    40: #005ac4,
+    50: #2773e7,
+    60: #4f8eff,
+    70: #82aaff,
+    80: #aec6ff,
+    90: #d8e2ff,
+    95: #edf0ff,
+    98: #faf9ff,
+    99: #fefbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #001a42,
+    20: #182f5a,
+    25: #243b66,
+    30: #304672,
+    35: #3d527e,
+    40: #495e8b,
+    50: #6277a6,
+    60: #7b90c1,
+    70: #96abdd,
+    80: #b1c6fa,
+    90: #d8e2ff,
+    95: #edf0ff,
+    98: #faf9ff,
+    99: #fefbff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #001f26,
+    20: #003640,
+    25: #00424e,
+    30: #004e5c,
+    35: #005b6b,
+    40: #00687a,
+    50: #008399,
+    60: #009eb9,
+    70: #1abbd9,
+    80: #4cd7f6,
+    90: #acedff,
+    95: #d8f6ff,
+    98: #f0fbff,
+    99: #f8fdff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #0f1c2d,
+    20: #253143,
+    25: #303c4f,
+    30: #3b475a,
+    35: #475367,
+    40: #535f73,
+    50: #6b788c,
+    60: #8591a7,
+    70: #9facc2,
+    80: #bac7de,
+    90: #d6e3fb,
+    95: #ebf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff,
+    4: #020f1f,
+    6: #061425,
+    12: #132031,
+    17: #1e2b3c,
+    22: #293548,
+    24: #2d3a4c,
+    87: #cedbf2,
+    92: #dde9ff,
+    94: #e6eeff,
+    96: #eff3ff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #171b27,
+    20: #2b303d,
+    25: #363b48,
+    30: #424754,
+    35: #4d5260,
+    40: #595e6c,
+    50: #727785,
+    60: #8c909f,
+    70: #a6abba,
+    80: #c2c6d6,
+    90: #dee2f2,
+    95: #edf0ff,
+    98: #faf9ff,
+    99: #fefbff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error),
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);

package/styles/_theme.scss

@@ -0,0 +1,183 @@
+// Angular Material 3 theme (docs/design-system.md, sections 3, 4.3 and 5.1).
+//
+// `mat.theme()` emits the full --mat-sys-* surface from the generated palette. The color map has no
+// `theme-type`, so every color is a `light-dark()` value that follows `color-scheme`. The roles the
+// brand defines are then pointed at the --rb-* tokens with `mat.theme-overrides()`, so Material
+// components and kit components always read the same value.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use 'palette';
+@use 'tokens';
+
+$_font-family: tokens.$font-sans;
+
+$_color-overrides: (
+  primary: var(--rb-color-primary),
+  on-primary: var(--rb-color-on-primary),
+  primary-container: var(--rb-color-primary-soft),
+  on-primary-container: var(--rb-color-on-primary-soft),
+  surface-tint: var(--rb-color-primary),
+  tertiary: var(--rb-color-tertiary),
+  on-tertiary: var(--rb-color-on-tertiary),
+  error: var(--rb-color-danger),
+  on-error: var(--rb-color-on-danger),
+  error-container: var(--rb-color-danger-soft),
+  on-error-container: var(--rb-color-danger),
+  background: var(--rb-color-bg),
+  surface: var(--rb-color-bg),
+  surface-container-lowest: var(--rb-color-control),
+  surface-container-low: var(--rb-color-surface-sunken),
+  surface-container: var(--rb-color-surface),
+  surface-container-high: var(--rb-color-surface-raised),
+  surface-container-highest: var(--rb-color-surface-hover),
+  surface-variant: var(--rb-color-surface-hover),
+  on-background: var(--rb-color-text-strong),
+  on-surface: var(--rb-color-text-strong),
+  on-surface-variant: var(--rb-color-text-muted),
+  outline: var(--rb-color-outline),
+  outline-variant: var(--rb-color-border),
+  inverse-surface: var(--rb-color-text-strong),
+  inverse-on-surface: var(--rb-color-bg),
+  scrim: var(--rb-color-scrim),
+  shadow: var(--rb-color-shadow),
+);
+
+$_shape-overrides: (
+  corner-none: 0,
+  corner-extra-small: var(--rb-radius-xs),
+  corner-extra-small-top: var(--rb-radius-xs) var(--rb-radius-xs) 0 0,
+  corner-small: var(--rb-radius-sm),
+  corner-medium: var(--rb-radius-md),
+  corner-large: var(--rb-radius-lg),
+  corner-large-top: var(--rb-radius-lg) var(--rb-radius-lg) 0 0,
+  corner-large-start: var(--rb-radius-lg) 0 0 var(--rb-radius-lg),
+  corner-large-end: 0 var(--rb-radius-lg) var(--rb-radius-lg) 0,
+  corner-extra-large: var(--rb-radius-xl),
+  corner-extra-large-top: var(--rb-radius-xl) var(--rb-radius-xl) 0 0,
+  corner-full: var(--rb-radius-full),
+);
+
+$_elevation-overrides: (
+  level0: var(--rb-elevation-0),
+  level1: var(--rb-elevation-1),
+  level2: var(--rb-elevation-2),
+  level3: var(--rb-elevation-3),
+  level4: var(--rb-elevation-3),
+  level5: var(--rb-elevation-3),
+);
+
+@function _type-overrides() {
+  $overrides: ();
+  @each $role in tokens.$material-type-roles {
+    $overrides: map.merge(
+      $overrides,
+      (
+        '#{$role}': var(--rb-type-#{$role}),
+        '#{$role}-font': var(--rb-font-sans),
+        '#{$role}-size': var(--rb-type-#{$role}-size),
+        '#{$role}-line-height': var(--rb-type-#{$role}-line-height),
+        '#{$role}-weight': var(--rb-type-#{$role}-weight),
+        '#{$role}-tracking': var(--rb-type-#{$role}-tracking),
+      )
+    );
+  }
+  @return $overrides;
+}
+
+// Emits the theme inside the current selector (html, or the scope selector).
+@mixin theme() {
+  @include mat.theme(
+    (
+      color: (
+        primary: palette.$primary-palette,
+        tertiary: palette.$tertiary-palette,
+      ),
+      typography: (
+        plain-family: $_font-family,
+        brand-family: $_font-family,
+        bold-weight: 700,
+        medium-weight: 500,
+        regular-weight: 400,
+      ),
+      density: 0,
+    )
+  );
+
+  // Applied after the theme, so these declarations win over the generated values.
+  @include mat.theme-overrides(
+    map.merge(
+      map.merge(map.merge($_color-overrides, $_shape-overrides), $_elevation-overrides),
+      _type-overrides()
+    )
+  );
+
+  @include _danger-variants();
+}
+
+// Danger mapping. Material 3 ignores the `color` input, so `color="warn"` would render as a primary
+// action. `mat.color-variants-backwards-compatibility()` restores it but emits about 70 KB for every
+// component and variant; the kit only needs `warn` on the components used for destructive actions,
+// so it maps those to the danger role directly. Material adds the `mat-warn` class for
+// `color="warn"`. `primary` is the default and `accent` is not part of the system.
+@function _state-layer($color, $opacity-token) {
+  @return color-mix(in srgb, #{$color} calc(var(#{$opacity-token}) * 100%), transparent);
+}
+
+@mixin _danger-variants() {
+  .mat-warn.mat-mdc-button-base {
+    @include mat.button-overrides(
+      (
+        filled-container-color: var(--rb-color-danger),
+        filled-label-text-color: var(--rb-color-on-danger),
+        filled-state-layer-color: var(--rb-color-on-danger),
+        filled-ripple-color: _state-layer(
+            var(--rb-color-on-danger),
+            --mat-sys-pressed-state-layer-opacity
+          ),
+        outlined-label-text-color: var(--rb-color-danger),
+        outlined-outline-color: var(--rb-color-danger-border),
+        outlined-state-layer-color: var(--rb-color-danger),
+        outlined-ripple-color: _state-layer(
+            var(--rb-color-danger),
+            --mat-sys-pressed-state-layer-opacity
+          ),
+        text-label-text-color: var(--rb-color-danger),
+        text-state-layer-color: var(--rb-color-danger),
+        text-ripple-color: _state-layer(
+            var(--rb-color-danger),
+            --mat-sys-pressed-state-layer-opacity
+          ),
+        protected-label-text-color: var(--rb-color-danger),
+        protected-state-layer-color: var(--rb-color-danger),
+        protected-ripple-color: _state-layer(
+            var(--rb-color-danger),
+            --mat-sys-pressed-state-layer-opacity
+          ),
+        tonal-container-color: var(--rb-color-danger-soft),
+        tonal-label-text-color: var(--rb-color-danger),
+        tonal-state-layer-color: var(--rb-color-danger),
+        tonal-ripple-color: _state-layer(
+            var(--rb-color-danger),
+            --mat-sys-pressed-state-layer-opacity
+          ),
+      )
+    );
+
+    @include mat.icon-button-overrides(
+      (
+        icon-color: var(--rb-color-danger),
+        state-layer-color: var(--rb-color-danger),
+        ripple-color: _state-layer(var(--rb-color-danger), --mat-sys-pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .mat-warn.mat-icon {
+    @include mat.icon-overrides(
+      (
+        color: var(--rb-color-danger),
+      )
+    );
+  }
+}