Getting started

Angular

The package is on GitHub Packages. Point the @design-foundry scope at it in .npmrc, with a token that can read packages:

@design-foundry:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

npm install @design-foundry/lucent-angular @design-foundry/lucent-styles @angular/cdk

Add the stylesheet to angular.json. core.css holds the tokens and every core component; add only the packs your product uses, or lucent.css for all of them.

"styles": [
  "node_modules/@design-foundry/lucent-styles/core.css",
  "node_modules/@design-foundry/lucent-styles/packs/messaging.css",
  "src/styles.css"
]

Load the fonts and Material Icons in index.html:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@300..700&family=Roboto+Mono:wght@400;500&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Every component is standalone. Import what a template uses:

import { LucentButton, LucentTextInput, LucentLabel } from '@design-foundry/lucent-angular';

@Component({
  imports: [LucentButton, LucentTextInput, LucentLabel, FormsModule],
  template: `
    <lucent-text-input [(ngModel)]="email">
      <span lucentLabel>Work email</span>
    </lucent-text-input>
    <lucent-button (clicked)="save()">Save</lucent-button>
  `,
})

Plain HTML

The stylesheet is the whole contract: write the markup each component page shows under HTML and it renders the same. Forms, checkboxes, toggles, radios, focus rings and tooltips are pure CSS. Menus, selects, tabs and modals need a few lines of script to toggle their open and selected classes.

<link rel="stylesheet" href="/lucent/styles/core.css">

<span class="lucent-button lucent-button--primary lucent-button--md">
  <button class="lucent-button__inner" type="submit">
    <span class="lucent-button__label">Save</span>
  </button>
</span>

Theme

Dark mode follows the system preference. Set data-theme on the root to force one:

<html data-theme="dark">   <!-- or "light"; without it, Lucent follows the system setting -->

Stylesheets

Core is what every product needs. A pack is a domain: import it only if your product speaks it.