Skip to main content

Intro

  • Styling Angular with Signals — Atomic CSS at Runtime
  • Ship less CSS. Style with Signals. Theme everything at runtime.
  • What SJSS is: Typed CSS‑in‑JS for Angular 20 (atomic, tokens, responsive)
  • Agenda:
      1. Atomic CSS via Angular Signals
      1. Responsive + theme‑driven styling (tokens + breakpoints)
      1. Building blocks of Super‑JSS

1. Atomic CSS generated dynamically with Angular Signals​

1.1 Authoring model​

  • Typed TS objects (camelCase CSS), shorthands, pseudos — see directive shortcuts
  • [sj] directive applies styles; base components compose sugars + variants — see directive basics

1.2 Generation pipeline​

  • Normalize style → hash → memoized atomic rules → stylesheet injection — covered in sj root API basics
  • Deterministic classnames; de‑duped rules; single <style data-sjss>

1.3 Reactivity with Signals​

  • Triggers: themeVersion(), sjTheme(), breakpoint(), windowWidth() — powered by Angular Signals in services & advanced theming
  • Re‑apply minimal classes on theme/breakpoint changes

1.4 Performance & SSR​

2. Responsive + theme‑driven styling (tokens + breakpoints)​

2.1 Tokens (family.tone)​

  • primary.main/light/dark/contrast (semantic, brandable, contrast‑first) — see palette tokens
  • Auto‑contrast when useBg is a token and useColor is auto/undefined — details in theming definitions

2.2 Responsive objects on every property​

  • Any prop accepts { xs, sm, md, lg, xl, xxl }
  • Example: flexDirection({ xs: 'column', md: 'row' }), gap({ xs: 0.5, md: 1 }) — more patterns in breakpoints guide

2.3 Breakpoints​

  • Theme‑ordered min‑width queries; track current breakpoint + windowWidth — see breakpoints reference
  • Media‑scoped atomic rules emitted only when used

2.4 Runtime theming​

  • Swap/merge themes; tokenized styles cascade instantly — walkthrough in runtime theming
  • Light/dark palettes curated for WCAG contrast

3. Building blocks for Super‑JSS​

3.1 sj root API and directive​

  • Properties: sj.backgroundColor, sj.position, sj.width.options … — refer to sj API basics
  • Shorthands: sj.p, sj.m, sj.bg, sj.c; Pseudos: sj.hover({ … }), sj.focus({ … })
  • Start simple: sj.padding('16px') — sj.* helpers are typed for IDE autocomplete
<div [sj]="[ sj.padding('16px') ]"></div>

3.2 Components​

  • sj-paper (outlined/filled/flat), sj-button, sj-typography, sj-flex, sj-host — see component docs
  • Compose variant defaults + sugars + user [sj]

3.3 Surfaces & density (responsive sugars)​

  • usePadding/useGap/useRounded → density levels: compact(1), default(2), comfortable(3), spacious(4) — defined in theming padding guide
  • Theme maps levels → responsive objects (e.g., padding[1] = { xs, md, lg })
  • usePaint ties to palette tokens per variant with auto‑contrast

3.4 Tooling & editor​

Closing & links​

  • Signals‑native, atomic CSS at runtime

  • Tokens + responsive on every property

  • Density‑driven surfaces unify spacing and rounding

  • Docs: sjss.dev

  • Storybook: sjss‑storybook.netlify.app

  • Demo: sjssdemo.netlify.app

  • Repo: github.com/rsantoyo-dev/super‑jss‑workspace

Q&A anchors (spare)​

  • Token mapping & theming strategy
  • SSR/CSP & style host
  • Perf in large pages; caching, class bundling
  • Migration paths & hybrid rollout