app-design-library
The design-system switcher. It picks Default or Bootstrap, writes the choice to a
design
cookie, then reloads. The server resolves that choice against installed design systems and
supplies $designSystem to the template. Two links in the head load its CSS and
matching widget CSS before the page paints.
It sits beside the light/dark toggle throughout the docs, including the cnc-demo-maker page. Choose either system there and continue browsing: the cookie keeps the same system on later pages.
Quick start
Drop the element into a header. It takes no attributes. The page template binds both
design-dependent stylesheet URLs to $designSystem.
<app-design-library></app-design-library>The systems
Two installed systems appear in the picker.
Default
is the docs' cnc.json choice. Bootstrap uses the same widget HTML with Bootstrap
spacing, borders, and controls while keeping the app's palette.
| System | Name | What changes |
|---|---|---|
| Default | default | Original CnC design-system CSS and base widget sheets. |
| Bootstrap | bootstrap | Bootstrap component styling with the app's palette and matching widget CSS variants. |
| App default | cnc.json |
Set designSystem to choose the system when no visitor cookie exists.
|
| Visitor choice | design | A valid cookie overrides the app default for that browser. |
How the template chooses sheets
The server reads designSystem from cnc.json. A valid
design cookie takes precedence. It places the result in
$designSystem while rendering the demo template, which binds both stylesheet URLs.
<link rel="stylesheet" href="/@cnc/styles.css">
<link rel="stylesheet" :href="'/@cnc/design-systems/' + $designSystem + '.css'">
<link rel="stylesheet" :href="'/@cnc/widgets.css?ds=' + $designSystem">
Both URLs use the same resolved name. Shared styles.css stays the same;
design-system CSS and widget CSS change as a pair.
What changes on selection
| What changes | Where | Detail |
|---|---|---|
| design | cookie |
path=/, max-age=31536000, SameSite=Lax. The
server reads it on the next request and checks that the named system exists.
|
| data-design-system | <html> |
The rendered template records the selected system on <html>.
|
| stylesheet links | <head> | Both design-system and widget links use the selected name on the next render. |
The cookie reaches the server before rendering. A returning visitor gets selected CSS on first
paint, like app-color-mode's mode cookie.
Why widget styles use tokens
Design-system sheets can restyle a widget only where its CSS reads shared variables. Earlier
work replaced literal corners in several base sheets so alternate systems can change them.
cnc-select
carried a private per-size radius table that shadowed the preset's, so twenty dropdowns stayed
rounded while everything around them squared off.
| Widget | Was | Now |
|---|---|---|
| cnc-select |
A four-branch table of literals, 0.25rem to
0.625rem
|
No table. The preset's cnc.attributes layer already maps every
[size]
onto the scale; only the no-size default is named here, because the preset's selectors
key on the attribute and cannot reach an element without one.
|
| cnc-checkbox | Literals from 0.15rem to 0.3rem |
Kept bespoke — a 16px box wants a hair, not a step of the shared scale — but written as a RATIO of it, so each size is exactly the number it always was and still follows a preset that re-declares the scale. |
| cnc-demo-maker | Nine literal corners in its own chrome | Each named as the token that restates it, with the old number as the fallback, so an app with no theme renders exactly as before. |
cnc-input
needed nothing: it was already written as
var(--shape-border-radius-rounded, var(--radius-lg, 0.5rem)), which is the pattern
the other three now follow. The default system keeps its original values; Bootstrap supplies
different values and widget variants where needed.
rounded-lg
Reads a radius token
rounded
Uses the system's radius
rounded-none
Stays square in both systems
Usage guidance
Place one instance in the application shell. The widget writes the design cookie
and reloads; the server resolves a supported name and the template loads both matching sheets.
Set designSystem in cnc.json for the app's default choice.