feat(bricks): add Export CSS button to admin panel - #119
Closed
kiro-agent[bot] wants to merge 4 commits into
Closed
Conversation
- Fix rest_no_route error: REST controller was only loaded inside
is_admin() block, but REST API requests are not admin requests.
Added slashed_bricks_rest_init() to register routes on non-admin
(API) requests.
- Add dark mode color UI: ColorTab now shows separate sections for
light and dark mode brand/status colors. Dark mode fields are
optional — the framework auto-derives from light when empty.
- Update CSS generator to emit --sf-color-X-dark declarations when
dark overrides are set by the user.
- Update Token Defaults with dark mode placeholders and hex hints.
- Update LivePreview to include dark color overrides in generated CSS.
- Add --sf-color-{brand}-dark to cheatsheet data.
Co-authored-by: Jack Granatowski <contact@codeslash.net>
Replace the duplicated slashed_bricks_rest_init() (gated by !is_admin) with a single rest_api_init hook. WordPress only fires rest_api_init during REST dispatch, so this is both simpler and eliminates the risk of dependency drift between admin and REST init paths. Also removes the redundant REST controller instantiation from the admin init — routes are now registered exclusively via rest_api_init.
…dark-mode fix(bricks): resolve REST 404 and add dark mode colors
- New export.js module with generateExportCSS() mirroring PHP CSS generator logic - Covers all token sections: colors, typography (clamp), spacing, radius, shadows, motion, zindex, contrast - downloadCSS() in SaveBar triggers browser download of slashed-custom.css - Export button disabled when no overrides exist, always visible regardless of dirty state - Output format: @layer slashed.overrides { :root { ...only changed tokens... } } Co-authored-by: Jack Granatowski <contact@codeslash.net>
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
2 participants
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.
This pull request was created by @kiro-agent on behalf of @jackgranatowski 👻
Comment with /kiro fix to address specific feedback or /kiro all to address everything.
Learn about Kiro autonomous agent
Summary
Adds a client-side CSS export feature to the Bricks admin panel so users can download a
slashed-custom.cssfile containing only their non-default token overrides.\n\n## Changes\n\n- New file:src/lib/export.js—generateExportCSS(tokens)function that mirrors the PHPSlashed_Bricks_CSS_Generatorlogic on the client side. Covers all 8 token sections (colors, typography with fluid clamp(), spacing, radius, shadows, motion, zindex, contrast).\n- Updated:SaveBar.svelte— Added "Export CSS" button between Reset and Save. Uses Blob + anchor download pattern. Button is always visible but disabled when no overrides exist (hasOverrides()check).\n- Rebuilt dist assets (app.js,app.css)\n\n## Output format\n\ncss\n@layer slashed.overrides {\n :root {\n --sf-color-primary-light: oklch(0.55 0.18 280);\n --sf-radius-scale: 0;\n /* ...only changed values... */\n }\n}\n\n\n## Notes\n\n- Pure client-side — no PHP changes\n- Token→CSS property mapping matches PHP generator exactly\n- Svelte 5 runes syntax ($derived for canExport flag)"