Skip to content

feat(theme): modular CSS, light/dark/auto theme system (Phase 1 - Foundation PR 1) #377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
vitorvasc wants to merge 39 commits into
base: main
Choose a base branch
from
Draft

feat(theme): modular CSS, light/dark/auto theme system (Phase 1 - Foundation PR 1) #377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
bc95a05
temp: add new layout mockup (AI-generated)
vitorvasc Apr 30, 2026
47645dd
feat(projects): add project index and frontmatter schema for initiati…
vitorvasc May 6, 2026
475e21c
chore: move design-brief and mockups to projects folder
vitorvasc May 6, 2026
af5341e
docs: initialize project overview documentation
vitorvasc May 6, 2026
1cda2c4
docs: add detailed layout plan for the home page design
vitorvasc May 6, 2026
a8a929e
docs: add initial draft for ecosystem landing pages plan
vitorvasc May 6, 2026
2985a87
docs: add initial draft for list page plan
vitorvasc May 6, 2026
9c49030
docs: add initial draft for detail page plan
vitorvasc May 6, 2026
dc0d029
docs: add initial draft for Explorer UI/UX design workspace
vitorvasc May 6, 2026
369898a
docs: add roadmap for explorer redesign and outline next steps
vitorvasc May 6, 2026
c6942f8
feat(flags): add V1 redesign feature flag for development
vitorvasc May 6, 2026
0064df0
Merge branch 'main' into feat/84-layout-mockups
vitorvasc May 6, 2026
4c5b3f1
fix file format
vitorvasc May 6, 2026
c6091b2
fix file format
vitorvasc May 6, 2026
3d20537
chore: restore DESIGN.md
vitorvasc May 6, 2026
56cf058
fix(design): clarify mockup visibility and update DESIGN.md reference
vitorvasc May 6, 2026
aaa28f4
npm run format
vitorvasc May 6, 2026
bad8f25
fix markdown linter issues
vitorvasc May 6, 2026
acce91c
Merge branch 'main' into feat/84-layout-mockups
vitorvasc May 6, 2026
a832687
docs: update roadmap; kick off PR 1
vitorvasc May 6, 2026
9625866
refactor(styles): split index.css into src/styles/ with modular partials
vitorvasc May 6, 2026
6b0fee1
refactor(theme): replace inline-style injection with typed metadata i…
vitorvasc May 6, 2026
ce275bb
refactor(theme): switch ThemeContext to mode/resolved API with persis…
vitorvasc May 6, 2026
e85a36b
feat(theme): add no-flash data-theme init script to index.html
vitorvasc May 6, 2026
5d6e993
feat(ui): add ThemeToggle component
vitorvasc May 6, 2026
3f0b741
refactor(styles): update import path for index.css to use modular styles
vitorvasc May 6, 2026
fcd8ce0
docs: update NEXT-STEPS.md
vitorvasc May 6, 2026
9fd84cc
fix(theme): fix stale resolved state in auto mode and move no-flash s…
vitorvasc May 6, 2026
0360c72
fix(docs): update last_updated dates to 2026-05-06 in multiple design…
vitorvasc May 6, 2026
5bf0a65
Merge branch 'feat/84-layout-mockups' into feat/84-pr1-theme-system
vitorvasc May 6, 2026
d4fc205
fix(theme): migrate literal-hue usages to brand primitives after prim…
vitorvasc May 6, 2026
2eb9971
Merge remote-tracking branch 'origin/main' into feat/84-pr1-theme-system
vitorvasc May 6, 2026
3d111c2
fix(icons): revert OtelLogo colors
vitorvasc May 6, 2026
58b6bbe
run prettier, fix formatting
vitorvasc May 6, 2026
a5526f3
fix(theme): address pre-merge review findings on PR 1
vitorvasc May 7, 2026
1bb6c52
Merge branch 'main' into feat/84-pr1-theme-system
vitorvasc May 7, 2026
8a1df49
Merge branch 'main' into feat/84-pr1-theme-system
vitorvasc May 8, 2026
c8c785b
Merge branch 'main' into feat/84-pr1-theme-system
vitorvasc May 8, 2026
2e2891c
Merge remote-tracking branch 'origin/main' into feat/84-pr1-theme-system
vitorvasc May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions ecosystem-explorer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,22 @@
<link rel="help" type="text/plain" href="/llms.txt" />
<link rel="alternate" type="text/plain" href="/llms.txt" />
<title>OpenTelemetry Ecosystem Explorer</title>
<script>
(function () {
try {
var stored = localStorage.getItem("td-color-theme");
var resolved =
stored === "light" || stored === "dark"
? stored
: window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
document.documentElement.dataset.theme = resolved;
} catch (e) {
document.documentElement.dataset.theme = "dark";
}
})();
</script>
</head>
<body>
<div id="root"></div>
Expand Down
20 changes: 10 additions & 10 deletions ecosystem-explorer/src/components/icons/compass.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export function Compass({ className }: { className?: string }) {
className="h-full w-full"
style={{
filter:
"drop-shadow(0 0 8px hsl(var(--primary-hsl) / 0.4)) drop-shadow(0 0 16px hsl(var(--primary-hsl) / 0.2))",
"drop-shadow(0 0 8px hsl(var(--otel-blue-hsl) / 0.4)) drop-shadow(0 0 16px hsl(var(--otel-blue-hsl) / 0.2))",
}}
>
{/* Outer ring */}
Expand All @@ -95,7 +95,7 @@ export function Compass({ className }: { className?: string }) {
cy="100"
r="95"
fill="none"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-blue-hsl))"
strokeWidth="1.5"
opacity="0.4"
/>
Expand All @@ -104,7 +104,7 @@ export function Compass({ className }: { className?: string }) {
cy="100"
r="90"
fill="none"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-blue-hsl))"
strokeWidth="0.5"
opacity="0.2"
/>
Expand All @@ -122,7 +122,7 @@ export function Compass({ className }: { className?: string }) {
y1={100 - innerR * Math.cos(angle)}
x2={100 + outerR * Math.sin(angle)}
y2={100 - outerR * Math.cos(angle)}
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-blue-hsl))"
strokeWidth={isMajor ? 1.5 : 0.5}
opacity={isMajor ? 0.7 : 0.3}
/>
Expand All @@ -140,7 +140,7 @@ export function Compass({ className }: { className?: string }) {
y={100 - r * Math.cos(angle)}
textAnchor="middle"
dominantBaseline="middle"
fill="hsl(var(--primary-hsl))"
fill="hsl(var(--otel-blue-hsl))"
className="font-mono text-sm font-bold"
>
{dir}
Expand All @@ -151,26 +151,26 @@ export function Compass({ className }: { className?: string }) {
{/* Rotating needle group */}
<g ref={needleGroupRef}>
{/* North needle */}
<polygon points="100,25 95,100 100,90 105,100" fill="hsl(var(--primary-hsl))" />
<polygon points="100,25 95,100 100,90 105,100" fill="hsl(var(--otel-blue-hsl))" />
{/* South needle */}
<polygon
points="100,175 95,100 100,110 105,100"
fill="hsl(var(--primary-hsl))"
fill="hsl(var(--otel-blue-hsl))"
opacity="0.4"
/>
</g>

{/* Center circle */}
<circle cx="100" cy="100" r="8" fill="hsl(var(--secondary-hsl))" opacity="0.6" />
<circle cx="100" cy="100" r="4" fill="hsl(var(--primary-hsl))" />
<circle cx="100" cy="100" r="8" fill="hsl(var(--otel-orange-hsl))" opacity="0.6" />
<circle cx="100" cy="100" r="4" fill="hsl(var(--otel-blue-hsl))" />

{/* Inner decorative circles */}
<circle
cx="100"
cy="100"
r="50"
fill="none"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-blue-hsl))"
strokeWidth="0.5"
opacity="0.2"
strokeDasharray="4 4"
Expand Down
41 changes: 24 additions & 17 deletions ecosystem-explorer/src/components/icons/configuration-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
width="120"
height="120"
rx="8"
fill="hsl(var(--primary-hsl))"
fill="hsl(var(--otel-orange-hsl))"
opacity="0.08"
/>
<rect
Expand All @@ -38,7 +38,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
height="120"
rx="8"
fill="none"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="3"
/>

Expand All @@ -50,7 +50,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
y1="70"
x2="135"
y2="70"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="3"
opacity="0.3"
/>
Expand All @@ -60,12 +60,12 @@ export function ConfigurationIcon({ className }: { className?: string }) {
y1="70"
x2="95"
y2="70"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="3"
opacity="0.8"
/>
{/* Knob */}
<circle cx="95" cy="70" r="8" fill="hsl(var(--primary-hsl))" />
<circle cx="95" cy="70" r="8" fill="hsl(var(--otel-orange-hsl))" />
<circle cx="95" cy="70" r="5" fill="white" opacity="0.3" />
</g>

Expand All @@ -76,7 +76,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
y1="100"
x2="135"
y2="100"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="3"
opacity="0.3"
/>
Expand All @@ -85,11 +85,11 @@ export function ConfigurationIcon({ className }: { className?: string }) {
y1="100"
x2="120"
y2="100"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="3"
opacity="0.8"
/>
<circle cx="120" cy="100" r="8" fill="hsl(var(--primary-hsl))" />
<circle cx="120" cy="100" r="8" fill="hsl(var(--otel-orange-hsl))" />
<circle cx="120" cy="100" r="5" fill="white" opacity="0.3" />
</g>

Expand All @@ -100,7 +100,7 @@ export function ConfigurationIcon({ className }: { className?: string }) {
y1="130"
x2="135"
y2="130"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="3"
opacity="0.3"
/>
Expand All @@ -109,23 +109,30 @@ export function ConfigurationIcon({ className }: { className?: string }) {
y1="130"
x2="80"
y2="130"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="3"
opacity="0.8"
/>
<circle cx="80" cy="130" r="8" fill="hsl(var(--primary-hsl))" />
<circle cx="80" cy="130" r="8" fill="hsl(var(--otel-orange-hsl))" />
<circle cx="80" cy="130" r="5" fill="white" opacity="0.3" />
</g>

{/* Gear icon accent in top-right */}
<g transform="translate(145, 55)">
<circle cx="0" cy="0" r="10" fill="none" stroke="hsl(var(--primary-hsl))" strokeWidth="2" />
<circle cx="0" cy="0" r="4" fill="hsl(var(--primary-hsl))" opacity="0.6" />
<circle
cx="0"
cy="0"
r="10"
fill="none"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="2"
/>
<circle cx="0" cy="0" r="4" fill="hsl(var(--otel-orange-hsl))" opacity="0.6" />
{/* Gear teeth */}
<rect x="-2" y="-12" width="4" height="4" fill="hsl(var(--primary-hsl))" />
<rect x="-2" y="8" width="4" height="4" fill="hsl(var(--primary-hsl))" />
<rect x="-12" y="-2" width="4" height="4" fill="hsl(var(--primary-hsl))" />
<rect x="8" y="-2" width="4" height="4" fill="hsl(var(--primary-hsl))" />
<rect x="-2" y="-12" width="4" height="4" fill="hsl(var(--otel-orange-hsl))" />
<rect x="-2" y="8" width="4" height="4" fill="hsl(var(--otel-orange-hsl))" />
<rect x="-12" y="-2" width="4" height="4" fill="hsl(var(--otel-orange-hsl))" />
<rect x="8" y="-2" width="4" height="4" fill="hsl(var(--otel-orange-hsl))" />
</g>
</svg>
);
Expand Down
24 changes: 12 additions & 12 deletions ecosystem-explorer/src/components/icons/java-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function JavaIcon({ className }: { className?: string }) {
<path
d="M 60 80 L 50 160 Q 50 170 60 170 L 140 170 Q 150 170 150 160 L 140 80 Z"
fill="none"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="4"
/>

Expand All @@ -39,7 +39,7 @@ export function JavaIcon({ className }: { className?: string }) {
{/* faint liquid tint behind the bars */}
<path
d="M 65 90 L 57 155 Q 57 162 63 162 L 137 162 Q 143 162 143 155 L 135 90 Z"
fill="hsl(var(--primary-hsl))"
fill="hsl(var(--otel-orange-hsl))"
opacity="0.10"
/>

Expand All @@ -51,7 +51,7 @@ export function JavaIcon({ className }: { className?: string }) {
y1="158"
x2="138"
y2="158"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="2"
opacity="0.25"
/>
Expand All @@ -67,7 +67,7 @@ export function JavaIcon({ className }: { className?: string }) {
y="132"
width="10"
height="26"
fill="hsl(var(--primary-hsl))"
fill="hsl(var(--otel-orange-hsl))"
opacity="0.35"
rx="2"
/>
Expand All @@ -76,7 +76,7 @@ export function JavaIcon({ className }: { className?: string }) {
y="120"
width="10"
height="38"
fill="hsl(var(--primary-hsl))"
fill="hsl(var(--otel-orange-hsl))"
opacity="0.45"
rx="2"
/>
Expand All @@ -85,7 +85,7 @@ export function JavaIcon({ className }: { className?: string }) {
y="140"
width="10"
height="18"
fill="hsl(var(--primary-hsl))"
fill="hsl(var(--otel-orange-hsl))"
opacity="0.30"
rx="2"
/>
Expand All @@ -94,7 +94,7 @@ export function JavaIcon({ className }: { className?: string }) {
y="112"
width="10"
height="46"
fill="hsl(var(--primary-hsl))"
fill="hsl(var(--otel-orange-hsl))"
opacity="0.55"
rx="2"
/>
Expand All @@ -103,7 +103,7 @@ export function JavaIcon({ className }: { className?: string }) {
y="126"
width="10"
height="32"
fill="hsl(var(--primary-hsl))"
fill="hsl(var(--otel-orange-hsl))"
opacity="0.40"
rx="2"
/>
Expand All @@ -116,31 +116,31 @@ export function JavaIcon({ className }: { className?: string }) {
<path
d="M 150 100 Q 170 100 170 120 Q 170 140 150 140"
fill="none"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="4"
/>

{/* Steam lines */}
<path
d="M 70 70 Q 65 50 70 30"
fill="none"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="4"
strokeLinecap="round"
opacity="0.7"
/>
<path
d="M 100 75 Q 95 55 100 35"
fill="none"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="4"
strokeLinecap="round"
opacity="0.7"
/>
<path
d="M 130 70 Q 125 50 130 30"
fill="none"
stroke="hsl(var(--primary-hsl))"
stroke="hsl(var(--otel-orange-hsl))"
strokeWidth="4"
strokeLinecap="round"
opacity="0.7"
Expand Down
Loading
Loading