Visual refresh: new design system across docs, home page, and components#1080
Open
Visual refresh: new design system across docs, home page, and components#1080
Conversation
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
Introduces the new design system and component library based on the mockup. Dark-first with full light-mode support via CSS tokens. Design tokens & typography - src/css/crowdsec-tokens.css: --cs-* token file (surfaces, ink, brand colors, Infima bridge vars) dual-themed dark/light - src/css/crowdsec-typography.css: h1/h2/h3 scale, §NN auto-counter, lede paragraph, .cs-eyebrow utility - src/css/crowdsec-algolia.css: Algolia DocSearch re-skinned to --cs-* - src/css/custom.css: import new CSS files, drop conflicting Infima override blocks, update blockquote and link color to token vars Config - docusaurus.config.ts: add JetBrains Mono font, set respectPrefersColorScheme: false (dark default enforced) Components (src/components/docs/) - 10 new React components with co-located CSS Modules (no hex in code): DocsHero, PathCard/PathCards, RunningStrip, PathwayRow, GuidedSetupCard, PopularChips, ChallengeGrid, AccessCard, ConsoleMockup, PromoCard (console/cti/engine variants) - 11 SVG icon components in icons/ (custom stroke set, no icon lib) Theme swizzles - src/theme/MDXComponents.js: register all new components globally - src/theme/DocItem/Content/index.tsx: render eyebrow frontmatter above h1 - src/theme/TOC/index.tsx: inject PromoCard in right rail, variant selected by URL path (no useDoc() to stay safe in blog context) Pages - src/pages/index.tsx: rebuilt with new components; all hrefs preserved - unversioned/console/intro.mdx: eyebrow/rightRailPromo frontmatter, ChallengeGrid for the 5 security challenge items, AccessCard for signup
- MDXComponents: rename .js → .tsx; add explicit imports in console/intro.mdx to fix "AccessCard not defined" error - Hero: full-width section with 64px grid background, masked radial fade; h1 centered with orange gradient on 'CrowdSec tool' span; orange dot badge above heading - PathCard: rewritten to match mockup exactly — corner radial glow, 40px icon box with color border, eyebrow top-right, tags row, dashed footer divider with audience label + arrow CTA - RunningStrip: gradient background, Eyebrow on left, spacer, colored icon links on right with hover state - PathwayRow: CTA button always in header when closed; moves into content body when accordion is open; sub-text appears under title when expanded - Navbar: backdrop-filter blur(8px), rgba dark background, orange hover/active link color, border from --cs-border token - Footer: token-based styling — dark bg, mono uppercase titles, dimmed link text, orange hover, mono copyright strip
crowdsec-components.css (new): single file for all 4 doc primitives - Inline code: purple primary tint (color-mix), mono 0.88em, semantic variants cs-ic--path/kw/val for blue/violet/teal accents - Admonitions: cs-admon grid layout, 22px icon circle, --tone CSS var, 4px !important border-left; info fixed to --cs-blue (was violet); premium type registered with Crown SVG glyph - Code blocks: CodeBlock/Content swizzle adds persistent chrome bar (lang label + title + COPY button); --ifm-pre-padding zeroed so no double padding; Prism tokens remapped to --syn-* vars; diff/highlight row tints; buttonGroup and codeBlockTitle hidden (chrome owns them) - Tables: display:table !important restores Infima-broken full width; border-radius via cell corner rules; thead mono uppercase; hover tint - Tabs: 8px gap, 10px 18px padding (scoped to li to avoid panel leak) Admonition/Layout: rewritten with SVG glyphs per type Admonition/Types: premium type added CopyButton swizzle: COPY / COPIED ✓ mono uppercase text, 1.5s timeout Pill component: community/premium/platinum/info/success/warning variants MDXComponents: table wrapper, Pill registered globally docusaurus.config.ts: admonitions.keywords premium on both plugins crowdsec-typography.css: --ifm-font-size-base 15px / 14px mobile crowdsec-tokens.css: plain a:not([class]) gets primary purple; --cs-red added
- aria-hidden on all decorative SVGs in DocCard and PromoCard icon sets - noArrayIndexKey: use stable keys (href, title) in QuickStrip, RunningStrip, PathwayRow, ChallengeGrid; noArrayIndexKey suppress comment where no stable id is available - noStaticElementInteractions: move onMouseEnter/Leave from div to Link (anchor element) in all FeatureCard, IntegrationCard, IntegrationItem - useButtonType: add type='button' to PathwayRow chevron toggle - useAnchorContent: add visually-hidden span to Footer social icon links - noUnusedFunctionParameters: prefix unused icon/_logo params with _ - format: re-run formatter after sed passes on DocCard and PromoCard Remaining 15 warnings are noDescendingSpecificity in CSS files — these are intentional overrides of Docusaurus/Infima specificity.
- Replace all inline SVG icons with @coreui/icons-react (admonitions, home page, path cards, promo/challenge/guided cards) - Rewrite GuidedSetupCard to match mockup: horizontal layout, violet compass, corner glow - Replace ChallengeGrid with DocCardGrid+DocCard in console/intro - Replace PopularChips with QuickStrip (same style as "Already running?" strip) - Restore sidenav right border using var(--cs-border) token - Fix QuickStrip hover: no orange fallback color on links without explicit color
ziracmo
force-pushed
the
imrpove/home-and-components-ui
branch
from
65c647e to
fbb2309
Compare
- Remove unused React imports from GuidedSetupCard and PromoCard - Sort imports alphabetically in DocCard and ChallengeGrid - Remove stale biome-ignore suppression comments in CSS files
- Extract mix() color helper to src/utils/colorMix.ts (was duplicated in DocCard, PathCard, PathwayRow) - Extract CUI icon map to src/components/docs/icons/cuiMap.ts (was duplicated in DocCard, ChallengeGrid) - Delete 11 unused custom SVG icon files in components/docs/icons/ - Rename RunningStrip ext prop to external, consistent with QuickStrip API - Replace RunningStrip inline SVG arrow with CIcon cilArrowRight
Extend tailwind.config.js with cs-* design tokens and font families so
components can reference bg-cs-surface, text-cs-orange, font-cs-mono etc.
Delete all 11 index.module.css files and inline their styles as Tailwind
utility classes. Dynamic color-mix() values derived from runtime props
remain as style={} attributes.
Convert all remaining inline styles across docs and product-page
components to Tailwind utility classes. Remove useState hover tracking
from FeatureCard, IntegrationCard, and IntegrationItem in favour of
CSS group-hover. Replace onMouseEnter/Leave handlers in
ProductPageLayout with hover: variants. Dynamic runtime values
(color-mix from a color prop, linear-gradient backgrounds) are the
only remaining style={} attributes.
- PromoCard: extract duplicate regex to single gradientId variable - PathCard: extract inline footer SVG to local ArrowRight component, move static tag styles to className, consolidate icon wrap with className - DocCardGrid: replace ternary with lookup object for cols classes - DocCard, PathCard, PathwayRow: remove structural JSX comments that describe visible structure rather than non-obvious behaviour
Replace fixed-size layout and hardcoded hex colors with --cs-* tokens. Banner now uses the surface/border/ink palette and orange CTA button consistent with the rest of the UI.
ziracmo
force-pushed
the
imrpove/home-and-components-ui
branch
from
eaa4420 to
7713bc4
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
Home page got a full redesign — dark-first look with a grid background, a gradient title, and three color-coded path cards (orange / teal / violet) that tell you at a glance which CrowdSec product fits your use case. The "Already running?" strip and "How each path works" accordions now match the same visual language.
Every doc page now shares a consistent style:
The Console upsell in the right rail was rebuilt to match the intended design: eyebrow, large title, a mini sparkline chart with grid lines, icon-tagged feature list, and a full-width CTA button.
The Security Engine landing page (
/security-engine) was refreshed with the new token system — hero, section headings, and feature cards all use design tokens. The capability and next-steps grids now use the sharedDocCardcomponent, which always shows atitle →footer so it's obvious the cards are clickable.Clickable
DocCards across the docs now always show a dashed footer with an arrow label so readers know they can click through.Screenshots