diff --git a/README.md b/README.md index ac0f9fa..2071525 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ now, not a mirror of theirs. block, the two required font `` tags in ``, and placeholder nav/footer/`
` you fill in. Build your content with the classes documented in the showcase, and pull logos/icons/illustrations from - `assets/` by relative path (e.g. `assets/icons/AI-Security.svg`). + `assets/` by relative path (e.g. `assets/icons/ai-security.svg`). - **Font loading — always the two `` tags, never inlined:** any page using this library (whether copied from `dist/csa-library.html` as-is, or built by pulling these tokens/components into an existing @@ -100,7 +100,7 @@ they stay traceable back to the original design files. | Folder | Count | Format | Naming | |---|---|---|---| | `logos/` | 164 | PNG | Mixed — CSA certification/program logos (`{Program}-logo-{CMYK\|RGB\|grayscale\|white}.png`) plus ~52 one-off badges (Credly, membership, STAR, council) | -| `icons/` | 606 | SVG | 101 unique icons × 6 color variants each: base, `-CSA-blue`, `-light-blue`, `-red-orange`, `-white`, `-yellow-orange` | +| `icons/` | 840 (726 SVG + 114 PNG) | mostly SVG | 120 unique icons × 6 color variants each: base, `-CSA-blue`, `-light-blue`, `-red-orange`, `-white`, `-yellow-orange`. The 19 most recently added icons (AI-Automation, Click, Clock, Connect, Delete, Document-Locked, Export, Folder-Locked, Gate, Info, Laptop-Locked, Phone-Locked, Safe, Scan-LLM, Strategy, Support, Target, Window, Window-Locked) also ship a PNG alongside each SVG variant; the original 101 remain SVG-only | | `illustrations/` | 182 | PNG | ~33 scenes × 5 variants each: `- dark`, `- light`, `- white bg`, `- dark blue bg`, `- light blue bg` | A handful of illustration files break that 5-variant pattern — flagging @@ -112,19 +112,21 @@ be authoritative in the ambiguous cases: `- light blue.png` (no `bg`) — but no plain `- dark.png`/`- light.png` like every other illustration has. Looks like the plain variants got exported under the wrong name. -- **Virtual Event** has 5 files but two are `- dark blue bg copy.png` / - `- light blue bg copy.png` sitting alongside non-`copy` versions of the - same two — and they're not identical (the `copy` files are ~25–35% - larger). No `- dark.png`/`- light.png` plain variants exist at all for - this one. Can't tell which of the two (copy vs. non-copy) is the - current export. -- **AI Threat Radar** and **Blueprint** each have one file named - `- dark_1.png`/`- light_1.png` instead of `- dark.png`/`- light.png` — - likely just an export-tool artifact (no competing non-`_1` file exists - for either), safe to rename if you want the clean pattern. - **TAISE Group Training** has 6 files: both `- white.png` and `- white bg.png`, where every other illustration only has one. +Two more were resolved during the lowercase/dash filename cleanup: +**Virtual Event**'s `-dark-blue-bg-copy.png`/`-light-blue-bg-copy.png` +were checked against their non-`copy` siblings — both `copy` files +actually rendered on a plain white/transparent background, not the +blue background their filename claimed (visually identical to +`virtual-event-white-bg.png`), so they were mislabeled duplicates, not +a real second export; deleted rather than renamed. **AI Threat Radar** +and **Blueprint**'s `-dark_1.png`/`-light_1.png` were confirmed to be +the real dark/light variants (no competing file existed) and renamed +to the plain `-dark.png`/`-light.png` pattern every other illustration +uses. + ## Class naming Every class ships prefixed `csa-` (`csa-btn`, `csa-card`, `csa-kicker`, …) @@ -156,14 +158,15 @@ level that isn't unified to 900. | File | Source | |---|---| | `surfaces.css` | Built fresh per spec — light/gradient/dark backgrounds + surface-aware `.csa-card` | -| `cards.css` | `.csa-card` shell synthesized from a handful of bespoke card patterns seen across CSA's early pages (no shared class existed at the time); `.csa-card-glass` adds a 16px radius and surface-aware text color on top of the spec's base CSS. Also: `.csa-card-hover` (lift/shadow/border-color modifier, matching the hover treatment consistently used across CSA's early interactive cards), `.csa-card-media` (16:9 image-top card, surface-aware like `.csa-card`), `.csa-card-reveal` (4:3 photo card — kicker + heading sit permanently on a thin frosted-glass strip at the bottom; `.csa-card-reveal-more`/`-more-inner` grow that strip on hover via a `grid-template-rows` 0fr→1fr transition, not `max-height`, so it fits body copy of any length without a guessed cutoff; always dark regardless of page surface), `.csa-go` (shared CTA link utility, `font-size:14.5px` to read as a peer of body copy rather than a caption — `--b500` default, `--b300` on hover and on dark surfaces; promoted out of `carousel.css` where it started), `.csa-card-brand-cloud`/`-ai`/`-zt` (one per CSA sub-brand, white-background only, no `data-surface` variants — top-down fill + gradient border via the same double-background-clip trick buttons.css uses for a gradient border, plus a non-uniform border-width and a hard gradient stop so the border-box layer also carries a solid 4px top accent bar; border gradient (not the top accent, not the fill) swaps colors on `:hover`, and `.csa-go` is recolored to match each brand's own accent), and `.csa-card-quote` (testimonial card — quote glyph, body copy, then a footer with a headshot slot, name, and title; the headshot is a plain ``, not a mask, since a photo doesn't need to recolor with surrounding text the way an icon glyph does). An icon as a card's first child just needs `.csa-icon` — no new class | -| `buttons.css` | `.csa-btn-primary` is always `--o500` — no blue variant, no surface-conditional switching. 4 standardized variants, all surface-aware (work unmodified on light/gradient/dark/black): `.csa-btn-primary`, `.csa-btn-secondary`, `.csa-btn-tertiary`, `.csa-btn-disabled`. `.csa-btn-light`/`.csa-btn-ghost`/`.csa-btn-onnavy` are retired — Disabled replaces Light, Secondary is Ghost renamed (it already worked on dark surfaces unmodified, making Onnavy redundant there). Replaces `.btn-gold`/`.btn-gold-outline` (removed) | +| `cards.css` | `.csa-card` shell synthesized from a handful of bespoke card patterns seen across CSA's early pages (no shared class existed at the time); `.csa-card-glass` adds a 16px radius and surface-aware text color on top of the spec's base CSS. Also: `.csa-card-hover` (lift/shadow/border-color modifier, matching the hover treatment consistently used across CSA's early interactive cards), `.csa-card-media` (16:9 image-top card, surface-aware like `.csa-card`), `.csa-card-reveal` (4:3 photo card — kicker + heading sit permanently on a thin frosted-glass strip at the bottom; `.csa-card-reveal-more`/`-more-inner` grow that strip on hover via a `grid-template-rows` 0fr→1fr transition, not `max-height`, so it fits body copy of any length without a guessed cutoff; always dark regardless of page surface), `.csa-go` (shared CTA link utility, `font-size:14.5px` to read as a peer of body copy rather than a caption — `--b500` default, `--b300` on hover and on dark surfaces; promoted out of `carousel.css` where it started), `.csa-card-brand-cloud`/`-ai`/`-zt` (one per CSA sub-brand, white-background only, no `data-surface` variants — top-down fill + gradient border via the same double-background-clip trick buttons.css uses for a gradient border, plus a non-uniform border-width and a hard gradient stop so the border-box layer also carries a solid 4px top accent bar; border gradient (not the top accent, not the fill) swaps colors on `:hover`, and `.csa-go` is recolored to match each brand's own accent), `.csa-card-quote` (testimonial card — quote glyph, body copy, then a footer with a headshot slot, name, and title; the headshot is a plain ``, not a mask, since a photo doesn't need to recolor with surrounding text the way an icon glyph does), and `.csa-card-raised` (always-on elevation for a card that needs more emphasis than the rest of its grid — swaps the base `--shadow-sm` for the bigger `--shadow` token, the same shadow `.csa-card-hover` only shows on `:hover`; background/border are untouched, so it's a pure modifier always paired with `.csa-card`; dark/black reuse `.csa-card-hover`'s own black shadow value rather than a new one). An icon as a card's first child just needs `.csa-icon` — no new class | +| `buttons.css` | `.csa-btn-primary` is always `--o500` — no blue variant, no surface-conditional switching. 4 standardized variants, all surface-aware (work unmodified on light/gradient/dark/black): `.csa-btn-primary`, `.csa-btn-secondary`, `.csa-btn-tertiary`, `.csa-btn-disabled`. `.csa-btn-light`/`.csa-btn-ghost`/`.csa-btn-onnavy` are retired — Disabled replaces Light, Secondary is Ghost renamed (it already worked on dark surfaces unmodified, making Onnavy redundant there). Replaces `.btn-gold`/`.btn-gold-outline` (removed). Disabled's colors are surface-aware per surface, not just light-vs-dark: black uses its own `n800`/`n500` values (matching the n-scale `.csa-card` already uses for its own black-surface background/border), rather than reusing dark's blue-scale `b800`/`b500` on a surface that's otherwise neutral, not navy | +| `action.css` | A surface-aware interactive tile for `` or `