@falcon/ui-tokens

Falcon UI design tokens (CSS variables only). Drives <falcon-input> and future Falcon UI web components.

Layered cake

primitives  →  semantic  →  themes  →  density  →  rtl  →  components

Files:

• src/index.css — single import for the whole stack
• src/primitives/ — color/spacing/radius/shadow/typography/motion scales
• src/semantic/ — primary, danger, surface, text, etc. → primitives
• src/themes/ — light (default), dark ([data-theme='dark'])
• src/density/ — comfortable (default), compact ([data-density='compact'])
• src/rtl/ — [dir='rtl'] overrides
• src/components/ — per-component contracts (input, button, dropdown, multi-select, tree, stepper)

Consumption

Inside the Stencil core: imported via PostCSS during nx build falcon-ui-core.

Inside admin-console: imported via apps/admin-console/src/tailwind.css so the tokens cascade to every host page that mounts a <falcon-input>.

Customizing per-instance

.add-client-special-input {
  --falcon-input-height-md: 52px;
  --falcon-input-border-radius: 18px;
  --falcon-input-border-color-focus: #0057ff;
  --falcon-input-bg: #f8fbff;
}

<falcon-angular-input class="add-client-special-input" formControlName="clientName"></falcon-angular-input>

Coexistence with workspace's existing tokens

The workspace's existing tokens live at libs/falcon/src/theme/falcon-tailwind-tokens.css (Tailwind v4 @theme syntax, primarily --color-falcon-teal-*).

Falcon UI tokens (--falcon-color-*, --falcon-input-*) sit alongside without collision — different namespace prefixes. Brand-match by aliasing if desired:

:root {
  --falcon-color-primary: var(--color-falcon-teal-500);
}