# WayneUI: everything in one file > WayneUI is the Wayne State design system for C&IT applications: one set of brand tokens, one set of components, four consumer paths, and an accessibility bar that CI enforces rather than a README claims. The README and the Markdown twin of every page, joined. The index is https://wayneui.apps.wayne.edu/llms.txt. Written by Squire's agent-ready kit; do not edit. --- ## README Source: https://github.com/waynestate/wayne-ui/blob/HEAD/README.md ## WayneUI The Wayne State University design system. One set of brand tokens, one set of components, four ways to use them, and an accessibility bar that is a command anyone can run rather than a claim a README makes. > **2.0 is a hard break from [`cit-web-infra/wayne-ui`](https://git.wayne.edu/cit-web-infra/wayne-ui) (1.x).** > 1.x was Bootstrap 3 and jQuery. It is archived and there is no compatibility > shim. See [MIGRATING.md](https://github.com/waynestate/wayne-ui/blob/HEAD/MIGRATING.md) for the 1.x to 2.0 mapping. ### Pick your path WayneUI meets you where you already are. All four paths render the same markup and carry the same accessibility guarantees. Vue is one of the four either way; which guide you want depends on whether Laravel is already wiring the chrome's data for you. | You are building | Start here | |---|---| | A static site, no build step | [docs/static-html](https://github.com/waynestate/wayne-ui/blob/HEAD/apps/docs/guide/static-html.md) | | Raw PHP, no framework | [docs/raw-php](https://github.com/waynestate/wayne-ui/blob/HEAD/apps/docs/guide/raw-php.md) | | Laravel with Blade | [docs/laravel-blade](https://github.com/waynestate/wayne-ui/blob/HEAD/apps/docs/guide/laravel-blade.md) | | Laravel with Inertia and Vue | [docs/laravel-inertia](https://github.com/waynestate/wayne-ui/blob/HEAD/apps/docs/guide/laravel-inertia.md) | | Vue with no Laravel | [docs/vue](https://github.com/waynestate/wayne-ui/blob/HEAD/apps/docs/guide/vue.md) | #### Static site, with no build step Two tags, and write HTML: ```html ``` The fonts, the marks and the icon sprite follow from those two, so there is no folder to copy unless the machine has no network at all. #### Laravel ```bash composer require waynestate/wayne-ui php artisan wayne-ui:install ``` ```blade Select your courses {{-- your content --}} ``` #### Vue ```bash pnpm add @waynestate/wayne-ui-vue @waynestate/wayne-ui-css ``` ```vue Select your courses ``` ### daisyUI or shadcn-vue, your choice WayneUI does not fork its components per framework. WSU components are built on one layer of semantic `--wsu-*` tokens, and daisyUI and shadcn-vue are thin adapters over that layer: ``` primitives -> --wsu-green-*, --wsu-gold-*, --wsu-neutral-* semantics -> --wsu-brand, --wsu-surface, --wsu-text, --wsu-focus-ring adapters -> daisyUI @plugin theme | shadcn-vue :root / .dark ``` So `` and `` come out in the same WSU green, from the same source of truth. Use daisyUI if you want Tailwind without a JavaScript pipeline. Use shadcn-vue if you have Vite. Neither is required. The WSU chrome works with `wayne-ui.css` alone. ### Two templates Both are application templates. The only difference is who can reach them, and therefore how much university identity they carry. ``` internal application compact bar, shield only, full width publicly accessible official wayne.edu header and footer, 1200px ``` ### Accessibility WayneUI targets WCAG 2.2 Level AA as a floor, and AAA wherever the brand palette allows. Each of these is a command that fails on a violation, and `pnpm verify` runs all of them: - Every semantic color pair is contrast-tested in both light and dark themes - axe-core runs across every component and example at three viewports, in both themes - Reflow at 320px, 200% and 400% zoom, and text-spacing overrides are all tested - Lighthouse accessibility must score 100 `.gitlab-ci.yml` runs the same commands with nothing marked `allow_failure`, but this GitLab instance has no runners and no pipeline here has ever executed. The checks are real; running them is still something a person does. See [Accessibility](https://github.com/waynestate/wayne-ui/blob/HEAD/apps/docs/accessibility.md) and the shipped VPAT. The theme follows the operating system. An explicit choice, stored under `wsu-theme`, wins over it; light is the fallback when there is neither. Someone who has set their machine to dark has already said what they want, and should not have to say it again in every application. Dark is a first-class theme, not a courtesy: every color pairing is contrast tested in both. ### Repository layout ``` packages/tokens brand tokens, built to CSS, SCSS, JS and JSON packages/css semantic layer, adapters, prebuilt bundles, icon sprite and marks packages/vue Vue 3 components packages/registry shadcn-vue registry php/src Laravel provider, Blade components, breadcrumbs, Inertia php/standalone framework-free PHP helpers apps/docs documentation site, served at /docs on the showcase apps/site the showcase site, and the deployment both are built into apps/a11y the accessibility suite apps/examples one working app per consumer path ``` ### Development ```bash pnpm install && composer install pnpm verify # lint, build, unit tests, accessibility gates pnpm dev # docs site with live component previews ``` ### Brand Colors and type come from the WSU [Identity Style Guide](https://universityrelations.wayne.edu/ucam/identity-guidelines), and the ramps match [`waynestate/base-site`](https://github.com/waynestate/base-site) stop for stop, so `green-400` means the same thing in both. Primary green is PMS 561c `#0C5449` and primary gold is PMS 1225c `#FFCC33`. If the guide changes, change the tokens rather than a component. ### Questions Open an issue for anything reproducible, so the next person to hit it finds the answer already there. For adopting WayneUI in an application, a component that does not exist yet, or an accessibility finding you would rather not file in public, write to [adammpkins@wayne.edu](mailto:adammpkins@wayne.edu). ### License MIT for the code. Wayne State trademarks are not covered by it. See [LICENSE.md](https://github.com/waynestate/wayne-ui/blob/HEAD/LICENSE.md). --- Source: https://wayneui.apps.wayne.edu/ The Wayne State app stack, project 0 ## Same frame. Every app. WayneUI is the design system every Wayne State application hangs in: one set of brand tokens, one set of components, and four ways to use them. It replaces the Bootstrap 3 and jQuery package that has been in these applications since 2017. [Pick your path](https://wayneui.apps.wayne.edu/#paths) [See every component](https://wayneui.apps.wayne.edu/components/) [Overview](https://wayneui.apps.wayne.edu/overview/) [Documentation](https://wayneui.apps.wayne.edu/docs/) [Repository](https://git.wayne.edu/enterprise-apps/wayne-ui) Course Registration Select courses Credits enrolled 12 Holds 1 Advising hold Meet an advisor before registering for more than 12 credits. **Available courses** | Course | Seats | Status | | --- | --- | --- | | CSC 2110 | 12 of 40 | Open | | MAT 2010 | 0 of 35 | Closed | | ENG 3050 | 4 of 25 | Waitlist | Registration Select courses Credits enrolled 12 CSC 2110 open ENG 3050 waitlist - **consumer paths, one set of markup**: 4 - **components in the gallery**: 50 - **color pairings measured every build**: 74 - **brand green on white, gated in CI**: 8.82:1 - **accessibility tests, none allowed to fail**: 1084 What it is ### One contract. Four ways to hang it. The static HTML templates are the contract. Vue, Blade and the framework-free PHP helpers are each tested against the markup extracted from them, not against anyone's memory, so all four emit the same classes, the same ARIA and the same `data-wsu-*` hooks. Pick the path you are already on; the page is the same. #### One set of tokens Brand green and gold, type, space and contrast, declared once and read by every path. A color added without a declared pairing is a color that fails the build. #### One set of components 50 of them, from Alert to Window, each with its accessibility reasoning written next to it. #### One contract 202 classes extracted from the two templates. A component is not finished until all four paths emit the same thing. **Static HTML** ``` ``` **Raw PHP** ``` 'Course Registration']) ?> 'primary']) ?> ``` **Laravel and Blade** ``` Add course ``` **Vue and Inertia** ``` ``` What every one of them emits ` ``` [Static HTML guide](https://wayneui.apps.wayne.edu/docs/guide/static-html) #### Raw PHP One require. No Composer, no autoloader, no container. require the standalone helpers. ``` 'Course Registration']) ?> 'primary']) ?> ``` [Raw PHP guide](https://wayneui.apps.wayne.edu/docs/guide/raw-php) #### Laravel and Blade A provider, 28 Blade components, request-scoped breadcrumbs. composer require waynestate/wayne-ui ``` Add course ``` [Laravel and Blade guide](https://wayneui.apps.wayne.edu/docs/guide/laravel-blade) #### Laravel, Inertia and Vue 35 Vue 3 components, no CSS emitted, one plugin. pnpm add @waynestate/wayne-ui-vue @waynestate/wayne-ui-css ``` ``` [Laravel, Inertia and Vue guide](https://wayneui.apps.wayne.edu/docs/guide/laravel-inertia) ### Two templates, both of them applications The difference is who can reach the page, and therefore how much university identity it carries. Not what the page is for. #### Internal Compact bar, shield only, full width. The bar collapsed from about 140 pixels of chrome to 89 by dropping the marketing masthead an internal tool has no use for. - **Stylesheet**: `wayne-ui.css` - **Search**: Inline in the bar [Open the template](https://wayneui.apps.wayne.edu/templates/#internal) #### Publicly accessible The real wayne.edu masthead and footer, from `@waynestate/wsuheader` and `@waynestate/wsufooter`, consumed as dependencies and never copied into a view. - **Stylesheet**: `wayne-ui-official.css` - **Search**: Expanding, because the masthead already has one [Open the template](https://wayneui.apps.wayne.edu/templates/#public) ### What is actually enforced These are pipeline jobs, not intentions. Nothing in the accessibility stages is `allow_failure`, and no job downgrades a violation to a warning. #### Contrast 74 pairings Declared on the tokens themselves and read back by the tests, so a color added without a declaration is a color that escapes the gate. 52 of them are held to 7:1. #### axe-core Zero violations 8 pages, 2 themes, 3 viewport widths. 320, 768 and 1440, which is also 1280 at 400% zoom. #### Lighthouse 100 Not 95, and not "no regressions since last time". A score below 100 stops the build. #### Markup contract 202 classes Extracted from the two static templates. Vue, Blade and the framework-free PHP helpers are all tested against that file rather than against each other. [The numbers in full](https://wayneui.apps.wayne.edu/accessibility/) ### Why? The WayneUI before this one was written in 2017, as a Laravel package. It gave an application a Wayne State look without every team building one, and it worked. It is still running in production today. It shipped Bootstrap 3.2.0 and jQuery 1.11.1, both released in 2014, vendored as minified copies and committed. It had one consumer path, so a team not on Laravel could not use it at all. Twenty six commits across four years, and the last functional change was in 2019. That is the problem, and it is not that the package was old. It stopped in 2019 and the applications standing on it did not. Bootstrap 3 reached end of life, the university masthead was redesigned, the accessibility guidelines moved twice, and every one of those happened to applications with no way to receive the change. The masthead is the clearest case: pasted in once and never synced, it still carried an Internet Explorer 9 filter years after Internet Explorer was gone, showing an identity the university had already replaced. So this is a rewrite rather than an upgrade. There is no compatibility shim and migrating is real work, because carrying the old class names forward would have meant carrying the reasons they were wrong. **What changed between the 2017 package and this one** | What | 2017 to 2019 | Now | | --- | --- | --- | | Consumer paths | One, and only if you were on Laravel | Four, from one set of markup | | Front end dependencies | Bootstrap 3.2.0 and jQuery 1.11.1, copied in and frozen there | Tailwind and daisyUI, declared and updated like anything else | | The university masthead | A copy, pasted once in 2017 | A dependency, updated when they update it | | Accessibility | Asserted | Measured every release, in both themes | | Last functional change | 2019 | This release |