@psu-flex/wc-styles

Self-contained CSS for external PSU Flex web component consumers (Angular, Drupal, static HTML).

Published bundle: dist/psf-styles.css (path unchanged for existing consumers).

What it includes

| File | Contents | |------|----------| | src/fonts.css | Font smoothing + full @font-face subsets + :root --font-* aliases | | src/psf-styles.css | Entry that imports fonts.css |

What it does not include

• --theme-* tokens — bundled inside each custom element’s shadow root via @psu-flex/chrome-elements
• Layout/utility classes (.flex, .body-16, etc.) — inlined in component CSS or host app styles
• Component CSS (.psu-brand-bar, etc.) — shadow-only

Install

npm install @psu-flex/wc-styles

Angular

"styles": ["node_modules/@psu-flex/wc-styles/dist/psf-styles.css"]

Static HTML

<link rel="stylesheet" href="node_modules/@psu-flex/wc-styles/dist/psf-styles.css" />

Build

cd packages/wc-styles
yarn build

Edit src/fonts.css when Google font files or --font-* aliases change.

Shadow DOM note

@font-face is document-global. Hosts should load psf-styles.css (or call injectPsuFonts() from chrome-elements). Component shadow roots use theme variables only — no duplicate fonts in shadow bundles.

Keep chrome-elements/src/psu-fonts.css in sync with wc-styles/src/fonts.css when font URLs change.