Colors

/* Solid surface: pair the base with its auto-computed contrast. */
.toast {
  background: var(--wr-color-primary);
  color: var(--wr-color-primary-contrast);
}

/* Hover / pressed shades come for free, no Sass needed at runtime. */
.toast:hover  { background: var(--wr-color-primary-dark); }
.toast:active { background: var(--wr-color-primary-darker); }

/* The -rgb channel composes any alpha you need at the call site. */
.ring {
  box-shadow: 0 0 0 4px rgba(var(--wr-color-primary-rgb), 0.2);
}

/* Soft set — tinted surface + matching hairline + same-hue text. */
.alert--danger {
  background: var(--wr-color-danger-soft);          /* α 0.12 */
  border: 1px solid var(--wr-color-danger-soft-border); /* α 0.30 */
  color: var(--wr-color-danger-soft-contrast);      /* mixed 62% + dark */
}

.alert--danger:active {
  background: var(--wr-color-danger-active);         /* α 0.20 */
}

/* Semantic neutrals — theme-correct surfaces, borders, muted text. */
.card {
  background: var(--wr-color-white);              /* page surface */
  border: 1px solid var(--wr-color-border);
  color: var(--wr-color-dark);                    /* body text */
}
.card__meta  { color: var(--wr-color-text-muted); }
.card__row:hover { background: var(--wr-color-hover); }

/* Fixed slate primitive — does NOT flip; pick a step by job. */
.code-block {
  background: var(--wr-color-gray-50);   /* subtlest surface */
  border: 1px solid var(--wr-color-gray-200);
}
.ink-strong { color: var(--wr-color-gray-900); }

/* Role aliases — intent-free, theme-aware surface / text. */
.panel {
  background: var(--wr-color-surface);
  color: var(--wr-color-on-surface);
}
.panel__caption { color: var(--wr-color-on-surface-muted); }

/* Retheme the ring once and every control that DRAWS one follows —
   the library's own mixin reads nothing else. */
:root {
  --wr-focus-ring-color: var(--wr-color-secondary);
  --wr-focus-ring-width: 3px;
}

/* The exception, and it is deliberate: a text field does not draw the ring.
   It marks focus by raising its own border and halo to --wr-color-primary,
   which is a field convention rather than an oversight — but it means these
   tokens do not reach it. Retheme both, or give the field the ring: */
.wr-input:focus,
.wr-input-group:focus-within,
.wr-textarea--focused {
  --wr-input-border: var(--wr-focus-ring-color);
  --wr-input-group-border: var(--wr-focus-ring-color);
  --wr-textarea-border: var(--wr-focus-ring-color);
}

/* What the mixin emits. Override the offset AFTER an include when the
   target sits inside a clipping container, the way the list rows do. */
.wr-list__item--interactive:focus-visible {
  outline: var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);
  outline-offset: -2px;
}

/* The neutrals swap roles; four intents are re-tuned for the canvas
   (primary, success, warning, danger). secondary and info keep their
   light values.
   --wr-color-white  = page surface  → #0b1120 in dark
   --wr-color-dark   = body text     → #e6ebf3 in dark
   --wr-color-light  = borders/tints → #262f44 in dark
   --wr-color-medium = medium FILL   → #6d7682 in dark

   Secondary TEXT is --wr-color-on-surface-muted (#9aa6b8 in dark) — a
   different token on purpose: lighter is what makes text legible on a dark
   canvas, the opposite direction from a fill. */
[data-theme='dark'] {
  /* set automatically by provideWrTheme(); shown here for reference */
}

/* So this card needs NO dark-mode override — the tokens carry it: */
.card {
  background: var(--wr-color-white); /* light page / dark canvas */
  color: var(--wr-color-dark);       /* dark ink  / light ink   */
}

/* Author an intent-aware component the way the lib itself does.
   `$colors` is `map.keys($base-colors)`, so it tracks the palette — rebrand
   with extra intents and your own component picks them up for free. */
@use 'ngwr/theme' as theme;

.my-badge {
  @each $name in theme.$colors {
    &--#{$name} {
      background: var(--wr-color-#{$name});
      color: var(--wr-color-#{$name}-contrast);
    }
  }
}

import { WR_COLORS, type WrColor } from 'ngwr/theme';

@Component({...})
export class Palette {
  // The TS-side intent list — drives `WrColor`, the type every `color`
  // input accepts.
  readonly colors = WR_COLORS;
}