refactor(ui): extract GlowOrbs backdrop into design-system

[luizhf42]

What

Replaced ~19 hand-rolled blurred-orb decorative backdrops across apps/console and apps/website with a single stateless <GlowOrbs> design-system primitive exposing a closed preset set and a token-only tone.

Why

Every backdrop hand-picked its own orb count, size, blur, position, opacity, and color — the same duplication the design-system already eliminated for Button and Badge. Consolidating onto named presets makes the backdrops consistent and gives them one place to evolve. Part of shellhub-io/team#114 step 6.

Changes

• packages/design-system — new <GlowOrbs>: five presets (hero/duo/section/corner/ambient), each owning a fixed orb count, size, blur, and position. tone is the only per-site variable and resolves to existing design tokens (primary, accent-cyan/blue/green/yellow/red) — no raw hex, no new tokens. Follows the primitives/ closed-enum to class-map pattern (Button/IconBadge).
• Type-safe API: GlowOrbsProps is a discriminated union keyed on preset, so an ambient-only tone cannot reach a static preset (which would miss the class map and render a blank orb). tone is required except on hero.
• Tailwind safety: each tone's color utilities are spelled out as complete literals so the JIT never purges them; geometry is shared across tones.
• Console/website migrations: 19 call sites now render through <GlowOrbs>. EmptyState renders the same ambient preset as AmbientBackground instead of duplicating the orb markup locally.
• Left inline: SupportedPlatforms — its Docker-brand #1D63ED orb is a brand color, not a semantic token, so forcing it onto tone would regress it.

Testing

Parity is at the shape/tone-family level, not pixel-identical, so some sites shift by design — worth an eyeball pass:

• Mixed-tone sections (features, how-it-works, integrations, RemoteSupport): these were primary-wash + accent-orb; the mono-tone preset follows the orb color, so the faint wash recolors to match.
• getting-started gains an orb, HeroPricing gains a wash, and EmptyState/WelcomeScreen normalize onto the shared shapes.
• PageHeader's decorated variant has no consumer today (unrenderable in-app).
• Verified: tsc -b + build clean for both apps, lint clean, 197 design-system tests pass (GlowOrbs: 5).

[github-actions]

Claude finished @luizhf42's task in 6m 34s —— View job

---

Code Review Complete

Reviewed 22 files across code quality, security, testing, language patterns, and architecture — no new issues found. The code looks good as-is.

A few things I specifically verified on this refactor:

• React keys — layers are keyed by layer.className; enumerated every preset/tone combination and confirmed the classNames are always distinct, so no duplicate-key collision.
• Tailwind JIT — every tone's color utilities are spelled out as complete literals in the lookup tables, so nothing the purge can't see reaches className (no silently-blank orbs).
• Type safety — the GlowOrbsProps discriminated union is satisfied by all 19 migrated call sites; layersFor covers all five presets exhaustively.
• Cross-repo — cloud/ is Go-only and does not consume @shellhub/design-system, so the new barrel export can't break it; no name clashes in components/index.ts.
• Security — purely decorative aria-hidden markup; all class/style values are hardcoded literals, no user-controlled data reaches className/style, no HTML sinks.

If you push additional changes and want a new review, tag @shellhub-io/admin and a team member can trigger it.

[otavio]

/review

[github-actions]

Claude finished @otavio's task in 4m 47s —— View job

---

Code Review Complete

Reviewed 22 files across code quality, security, testing, language patterns, and architecture — no new issues found. The code looks good as-is.

Specifically verified on this refactor:

• Discriminated union & exhaustiveness — GlowOrbsProps cleanly partitions all five presets; layersFor's switch is exhaustive, and all 19 migrated call sites satisfy the union with no type errors.
• React keys — layers keyed by className; traced every preset × tone combination and confirmed no two layers in a preset ever resolve to the same class string (geometry substrings and opacity suffixes keep them distinct, e.g. hero's fixed bg-accent-cyan/6 never collides with tone=cyan's /8//5).
• Tailwind JIT — every tone's color utilities are spelled out as complete literals in the HERO/DUO/SECTION/CORNER/AMBIENT tables, so nothing gets purged (no silently-blank orbs).
• Dead code — the removed orbPrimary/orbSecondary EmptyState tokens have no remaining references, and no hand-rolled orb markup lingers outside the intentionally-excluded SupportedPlatforms.
• Cross-repo — cloud/ is Go-only and does not consume @shellhub/design-system; the new barrel export adds names only (GlowOrbs + 3 types), with no pre-existing GlowOrbs export to collide with.
• Security — purely decorative aria-hidden, pointer-events-none markup; all class/style values are hardcoded literals, no user-controlled data reaches className/style, no HTML sinks.

The tone/geometry shifts at some sites (HeroPricing, RemoteSupport, getting-started, PageHeader, EmptyState) are real visual deltas but are explicitly called out as intentional in the PR ("parity at the shape/tone-family level, not pixel-identical"), so they're out of scope.

If you push additional changes and want a new review, tag @shellhub-io/admin and a team member can trigger it.
· refactor/ui/orbs