Skip to content

Sync Studio light-mode support into the admin-app #154

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

Merged
jackgranatowski merged 3 commits into from
Jul 3, 2026
Merged

Sync Studio light-mode support into the admin-app #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
385ef42
feat: sync Studio light-mode support into the admin-app
claude Jul 3, 2026
67cb731
fix: stylelint failure and overlay theme mismatch on Studio sync
claude Jul 3, 2026
9d20418
fix: use real forceTheme and fix vendored dark-mode contrast bugs
claude Jul 3, 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
1 change: 1 addition & 0 deletions .stylelintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"SLASHED-for-WP/integrations/bricks/assets/editor-app/**",
"SLASHED-for-WP/assets/admin-app/**",
"SLASHED-for-WP/admin-app/src/styles/**",
"SLASHED-for-WP/admin-app/src/app.css",
"SLASHED-for-WP/admin-app/framework-css/**"
],
"rules": {
Expand Down
106 changes: 55 additions & 51 deletions SLASHED-for-WP/admin-app/.vendored-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,205 +3,209 @@
"description": "Files vendored from the SLASHED framework configurator. DO NOT edit directly — make changes in codeslash-dev/SLASHED → configurator/src/ and re-run npm run sync.",
"frameworkRepo": "https://github.com/codeslash-dev/SLASHED",
"configuratorSrc": "configurator/src/",
"source": "github:codeslash-dev/slashed@main",
"syncedAt": "2026-07-02T22:39:04.951Z"
"source": "local",
"syncedAt": "2026-07-03T11:30:48.536Z"
},
"vendoredFiles": [
{
"file": "src/app.css",
"source": "github:codeslash-dev/slashed/configurator/src/app.css@main"
"source": "local:configurator/src/app.css"
},
{
"file": "src/App.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/App.svelte@main"
"source": "local:configurator/src/App.svelte"
},
{
"file": "src/components/CommandPalette.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/CommandPalette.svelte@main"
"source": "local:configurator/src/components/CommandPalette.svelte"
},
{
"file": "src/components/DomainPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/DomainPanel.svelte@main"
"source": "local:configurator/src/components/DomainPanel.svelte"
},
{
"file": "src/components/inputs/ClampField.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/ClampField.svelte@main"
"source": "local:configurator/src/components/inputs/ClampField.svelte"
},
{
"file": "src/components/inputs/ColorInput.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/ColorInput.svelte@main"
"source": "local:configurator/src/components/inputs/ColorInput.svelte"
},
{
"file": "src/components/inputs/OklchColorDesk.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/OklchColorDesk.svelte@main"
"source": "local:configurator/src/components/inputs/OklchColorDesk.svelte"
},
{
"file": "src/components/inputs/PowerKnobRow.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/PowerKnobRow.svelte@main"
"source": "local:configurator/src/components/inputs/PowerKnobRow.svelte"
},
{
"file": "src/components/inputs/RangeWithNumber.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/RangeWithNumber.svelte@main"
"source": "local:configurator/src/components/inputs/RangeWithNumber.svelte"
},
{
"file": "src/components/inputs/SliderRow.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/SliderRow.svelte@main"
"source": "local:configurator/src/components/inputs/SliderRow.svelte"
},
{
"file": "src/components/inputs/TokenRow.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/inputs/TokenRow.svelte@main"
"source": "local:configurator/src/components/inputs/TokenRow.svelte"
},
{
"file": "src/components/panels/AllTokensTab.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/AllTokensTab.svelte@main"
"source": "local:configurator/src/components/panels/AllTokensTab.svelte"
},
{
"file": "src/components/panels/BordersPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/BordersPanel.svelte@main"
"source": "local:configurator/src/components/panels/BordersPanel.svelte"
},
{
"file": "src/components/panels/CheatsheetPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/CheatsheetPanel.svelte@main"
"source": "local:configurator/src/components/panels/CheatsheetPanel.svelte"
},
{
"file": "src/components/panels/ColorsPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/ColorsPanel.svelte@main"
"source": "local:configurator/src/components/panels/ColorsPanel.svelte"
},
{
"file": "src/components/panels/EffectsPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/EffectsPanel.svelte@main"
"source": "local:configurator/src/components/panels/EffectsPanel.svelte"
},
{
"file": "src/components/panels/ExportPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/ExportPanel.svelte@main"
"source": "local:configurator/src/components/panels/ExportPanel.svelte"
},
{
"file": "src/components/panels/GenericTokenPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/GenericTokenPanel.svelte@main"
"source": "local:configurator/src/components/panels/GenericTokenPanel.svelte"
},
{
"file": "src/components/panels/HomePanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/HomePanel.svelte@main"
"source": "local:configurator/src/components/panels/HomePanel.svelte"
},
{
"file": "src/components/panels/LayoutPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/LayoutPanel.svelte@main"
"source": "local:configurator/src/components/panels/LayoutPanel.svelte"
},
{
"file": "src/components/panels/MacrosPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/MacrosPanel.svelte@main"
"source": "local:configurator/src/components/panels/MacrosPanel.svelte"
},
{
"file": "src/components/panels/MiscPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/MiscPanel.svelte@main"
"source": "local:configurator/src/components/panels/MiscPanel.svelte"
},
{
"file": "src/components/panels/MotionPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/MotionPanel.svelte@main"
"source": "local:configurator/src/components/panels/MotionPanel.svelte"
},
{
"file": "src/components/panels/ShadowsPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/ShadowsPanel.svelte@main"
"source": "local:configurator/src/components/panels/ShadowsPanel.svelte"
},
{
"file": "src/components/panels/SpacingPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/SpacingPanel.svelte@main"
"source": "local:configurator/src/components/panels/SpacingPanel.svelte"
},
{
"file": "src/components/panels/ThemesPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/ThemesPanel.svelte@main"
"source": "local:configurator/src/components/panels/ThemesPanel.svelte"
},
{
"file": "src/components/panels/TypographyPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/TypographyPanel.svelte@main"
"source": "local:configurator/src/components/panels/TypographyPanel.svelte"
},
{
"file": "src/components/panels/WcagPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/panels/WcagPanel.svelte@main"
"source": "local:configurator/src/components/panels/WcagPanel.svelte"
},
{
"file": "src/components/shell/PreviewPanel.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/shell/PreviewPanel.svelte@main"
"source": "local:configurator/src/components/shell/PreviewPanel.svelte"
},
{
"file": "src/components/shell/SidebarNav.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/shell/SidebarNav.svelte@main"
"source": "local:configurator/src/components/shell/SidebarNav.svelte"
},
{
"file": "src/components/shell/StatusBar.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/shell/StatusBar.svelte@main"
"source": "local:configurator/src/components/shell/StatusBar.svelte"
},
{
"file": "src/components/shell/StudioHeader.svelte",
"source": "github:codeslash-dev/slashed/configurator/src/components/shell/StudioHeader.svelte@main"
"source": "local:configurator/src/components/shell/StudioHeader.svelte"
},
{
"file": "src/data/api-index.generated.json",
"source": "github:codeslash-dev/slashed/configurator/src/data/api-index.generated.json@main"
"source": "local:configurator/src/data/api-index.generated.json"
},
{
"file": "src/data/bundles.generated.json",
"source": "github:codeslash-dev/slashed/configurator/src/data/bundles.generated.json@main"
"source": "local:configurator/src/data/bundles.generated.json"
},
{
"file": "src/data/classes.generated.json",
"source": "github:codeslash-dev/slashed/configurator/src/data/classes.generated.json@main"
"source": "local:configurator/src/data/classes.generated.json"
},
{
"file": "src/data/domain-patterns.json",
"source": "github:codeslash-dev/slashed/configurator/src/data/domain-patterns.json@main"
"source": "local:configurator/src/data/domain-patterns.json"
},
{
"file": "src/data/token-registry.generated.json",
"source": "github:codeslash-dev/slashed/configurator/src/data/token-registry.generated.json@main"
"source": "local:configurator/src/data/token-registry.generated.json"
},
{
"file": "src/lib/basics.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/basics.ts@main"
"source": "local:configurator/src/lib/basics.ts"
},
{
"file": "src/lib/codec.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/codec.ts@main"
"source": "local:configurator/src/lib/codec.ts"
},
{
"file": "src/lib/colorUtils.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/colorUtils.ts@main"
"source": "local:configurator/src/lib/colorUtils.ts"
},
{
"file": "src/lib/domains.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/domains.ts@main"
"source": "local:configurator/src/lib/domains.ts"
},
{
"file": "src/lib/lumlockerPreview.svelte.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/lumlockerPreview.svelte.ts@main"
"source": "local:configurator/src/lib/lumlockerPreview.svelte.ts"
},
{
"file": "src/lib/persistence.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/persistence.ts@main"
"source": "local:configurator/src/lib/persistence.ts"
},
{
"file": "src/lib/powerKnobs.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/powerKnobs.ts@main"
"source": "local:configurator/src/lib/powerKnobs.ts"
},
{
"file": "src/lib/previewResolver.svelte.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/previewResolver.svelte.ts@main"
"source": "local:configurator/src/lib/previewResolver.svelte.ts"
},
{
"file": "src/lib/savedThemes.ts",
"source": "github:codeslash-dev/slashed/configurator/src/lib/savedThemes.ts@main"
"source": "local:configurator/src/lib/savedThemes.ts"
},
{
"file": "src/lib/theme.svelte.ts",
"source": "local:configurator/src/lib/theme.svelte.ts"
},
{
"file": "src/main.ts",
"source": "github:codeslash-dev/slashed/configurator/src/main.ts@main"
"source": "local:configurator/src/main.ts"
},
{
"file": "src/types.ts",
"source": "github:codeslash-dev/slashed/configurator/src/types.ts@main"
"source": "local:configurator/src/types.ts"
},
{
"file": "src/vite-env.d.ts",
"source": "github:codeslash-dev/slashed/configurator/src/vite-env.d.ts@main"
"source": "local:configurator/src/vite-env.d.ts"
}
]
}
14 changes: 7 additions & 7 deletions SLASHED-for-WP/admin-app/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@
onclick={() => { mobileView = view; }}
aria-pressed={mobileView === view}
class={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${
mobileView === view ? "text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-300"
mobileView === view ? "text-indigo-700 dark:text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
}`}
>
<Icon class="w-3.5 h-3.5" /> {label}
Expand All @@ -271,7 +271,7 @@
</button>
{/snippet}

<div class="{embedded ? 'w-full h-full' : 'w-screen h-screen'} flex flex-col overflow-hidden bg-[#0a0a0f] text-slate-200 font-sans">
<div class="{embedded ? 'w-full h-full' : 'w-screen h-screen'} flex flex-col overflow-hidden bg-slate-50 dark:bg-[#0a0a0f] text-slate-800 dark:text-slate-200 font-sans">
<!-- Top header bar -->
<StudioHeader
{overridesCount}
Expand All @@ -290,7 +290,7 @@
<!-- Mobile fold toggle: switch between the controls panel and the live
preview. Lives right under the header (not at the bottom) so it's
visible without scrolling and doesn't compete with the status bar. -->
<div class="md:hidden flex items-stretch border-b border-white/8 bg-[#0d0d14] shrink-0">
<div class="md:hidden flex items-stretch border-b border-black/8 dark:border-white/8 bg-slate-50 dark:bg-[#0d0d14] shrink-0">
{@render foldToggleButton("controls", SlidersHorizontal, "Controls")}
{@render foldToggleButton("preview", Eye, "Preview")}
</div>
Expand All @@ -309,18 +309,18 @@
<!-- Left domain panel — fills remaining row width on mobile (the icon
rail above already claims its own space, so w-full here would mean
100% of the whole row and overflow past it), fixed 360px on desktop -->
<div class={`flex-1 min-w-0 md:flex-none md:w-[360px] bg-[#0c0c15] border-r border-white/8 flex-col min-h-0 ${mobileView === "preview" ? "hidden md:flex" : "flex"}`}>
<div class={`flex-1 min-w-0 md:flex-none md:w-[360px] bg-slate-50 dark:bg-[#0c0c15] border-r border-black/8 dark:border-white/8 flex-col min-h-0 ${mobileView === "preview" ? "hidden md:flex" : "flex"}`}>
<!-- Panel heading -->
<div class="h-9 flex items-center px-4 border-b border-white/6 shrink-0 gap-2">
<span data-testid="panel-heading" class="text-[11px] font-bold text-slate-300 uppercase tracking-widest flex-1">
<div class="h-9 flex items-center px-4 border-b border-black/6 dark:border-white/6 shrink-0 gap-2">
<span data-testid="panel-heading" class="text-[11px] font-bold text-slate-700 dark:text-slate-300 uppercase tracking-widest flex-1">
{DOMAIN_LABELS[domain] ?? domain}
</span>
{#if domainOverridesCount > 0}
<button
onclick={handleResetDomain}
data-testid="reset-category"
title={`Reset ${domainOverridesCount} override${domainOverridesCount !== 1 ? "s" : ""} in ${DOMAIN_LABELS[domain] ?? domain}`}
class="flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[9px] font-bold text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 transition-colors cursor-pointer shrink-0"
class="flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[9px] font-bold text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-500/10 transition-colors cursor-pointer shrink-0"
>
<RotateCcw class="w-3 h-3" />
Reset {domainOverridesCount}
Expand Down
2 changes: 1 addition & 1 deletion SLASHED-for-WP/admin-app/src/AppOverlay.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,7 +320,7 @@
bar's own dropdown submenus (also 99999) stay clickable above the panel.
-->
<div
class="fixed right-0 z-[99998] pointer-events-auto flex flex-col bg-[#0a0a0f] text-slate-200 font-sans shadow-2xl shadow-black/60 border-l border-white/8 transition-transform duration-200 ease-in-out"
class="dark fixed right-0 z-[99998] pointer-events-auto flex flex-col bg-[#0a0a0f] text-slate-200 font-sans shadow-2xl shadow-black/60 border-l border-white/8 transition-transform duration-200 ease-in-out"
class:translate-x-full={!isOpen}
class:translate-x-0={isOpen}
style:visibility={isOpen ? undefined : 'hidden'}
Expand Down
5 changes: 5 additions & 0 deletions SLASHED-for-WP/admin-app/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,6 @@
@import "tailwindcss";

/* Studio chrome theme — toggled by lib/theme.svelte.ts via a `.dark` class
on the mount root, independent of the framework's own [data-theme]
(which only governs the dogfooded --sf-* tokens loaded below). */
@custom-variant dark (&:where(.dark, .dark *));
Loading