@waynestate/wayne-ui-css

The Wayne State University stylesheet and the small runtime that drives it: theme switching, the mobile navigation drawer and the icon sprite. Everything in it works with no framework and no build step, which is what makes it the one thing every Wayne UI consumer path shares, static HTML, raw PHP, Laravel with Blade, and Vue.

This is part of Wayne UI, the design system for Wayne State C&IT and DSOE internal applications. If you are building for the public web, you want waynestate/base-site, not this.

Two stylesheets, for two audiences

Wayne UI ships two chrome variants, because how much university identity a page carries depends on who can reach it:

• wayne-ui.css for an application behind AccessID.
• wayne-ui-official.css, the same components with the official wayne.edu masthead and footer, @waynestate/wsuheader and @waynestate/wsufooter, compiled in for a publicly accessible page.

Installing the wrong one puts an internal application's chrome, or the official masthead, in front of the wrong audience.

Install

pnpm add @waynestate/wayne-ui-css

With a bundler

Import the source and let Tailwind process it as part of your own build:

@import "tailwindcss";
@import "@waynestate/wayne-ui-css";

For the publicly accessible variant, import both, in this order. /official overlays the wayne.edu masthead and footer onto the base stylesheet; imported on its own, without the line above it, it renders almost no styling at all:

@import "tailwindcss";
@import "@waynestate/wayne-ui-css";
@import "@waynestate/wayne-ui-css/official";

With no build step

Copy dist/ out of the package, or out of npm pack @waynestate/wayne-ui-css, into wherever your static assets are served from, and link the stylesheet and the runtime script directly:

<link rel="stylesheet" href="assets/wayne-ui/wayne-ui.css">
<script type="module" src="assets/wayne-ui/wayne-ui-theme.js"></script>

wayne-ui.css and wayne-ui-official.css are the two entries under dist/, with the imports already resolved. dist/ also carries wayne-ui-theme.js, icons.svg, the self-hosted fonts/ and the marks/ the stylesheet references by relative path; copy the whole directory, not just the stylesheet, or the marks and fonts it points at will be missing.

Exports

| Import | What it is | | --- | --- | | @waynestate/wayne-ui-css | Source entry point, tokens through components, for a project with its own Tailwind build | | @waynestate/wayne-ui-css/official | Overlay: the official wayne.edu masthead and footer, layered on top of the base import above, imported after it and in addition to it, never on its own | | @waynestate/wayne-ui-css/daisy | daisyUI adapter: registers wsu and wsu-dark as daisyUI themes aliased to the semantic tokens | | @waynestate/wayne-ui-css/shadcn | shadcn-vue adapter: points shadcn's fixed variable set at the same tokens | | @waynestate/wayne-ui-css/theme | The runtime as source, for a project that imports it through a bundler rather than loading a built file by URL | | @waynestate/wayne-ui-css/dist/wayne-ui.css | Prebuilt stylesheet, imports resolved | | @waynestate/wayne-ui-css/dist/wayne-ui-official.css | Prebuilt stylesheet, official chrome compiled in |

The daisyUI and shadcn-vue adapters are aliases over the same semantic tokens, one per ecosystem's variable naming, so a daisyUI btn-primary or a shadcn component copied in from its registry renders in Wayne State colors with no per-component edits. Neither is imported by the base entry point, since a project that has not installed daisyUI or shadcn-vue should not pay for a theme registration or a variable set it never asked for; import the one you use.

Peer dependencies

tailwindcss (v4) and daisyui (v5) are declared as peer dependencies and marked optional in package.json. In practice, right now, installing this package without either installed warns about nothing and exits 0, under both npm and pnpm: the gap only shows up later, either by running npm ls or when a build produces unstyled output. This is a known, open issue (see DECISIONS.md, D-007) rather than a documented guarantee. If your project uses the source entry points (. or /official) or the daisyUI adapter, you need Tailwind 4 and, for the adapter, daisyUI 5, installed yourself; nothing here currently enforces or verifies that for you. The prebuilt dist/ stylesheets need neither, since Tailwind has already run.

Documentation

Guides for each consumer path, the full component reference and the accessibility notes: https://wayneui.apps.wayne.edu/docs/