Add new configurator design spec - #417
Closed
jackgranatowski wants to merge 1 commit into
Closed
Conversation
Comprehensive UX/design document for the new SLASHED configurator, designed fresh from the framework token API. Covers all 686 tokens organized by domain (Colors, Typography, Spacing, Layout, Borders, Shadows, Motion, Effects), widget library, state architecture, CSS export format and cascade dependency map. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XJYHqUSy7CtxfPrTAxM8wo
📝 WalkthroughWalkthroughAdds a design specification for the SLASHED Configurator covering shell layout, domain studios, tools, state handling, CSS export/import rules, token cascade relationships, and verification cases. ChangesConfigurator design specification
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
CI Feedback 🧐A test triggered by this PR failed. Here is an AI-generated analysis of the failure:
|
PR Summary by QodoAdd SLASHED configurator UX/design specification Description
Diagram
High-Level Assessment
Files changed (1)
|
Code Review by Qodo
Context used✅ Compliance rules (platform):
5 rules 1. Wrong share URL format
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/configurator-design.md`:
- Around line 696-704: Remove the duplicate documentation entry for
--sf-current-font-weight from the MISC token table and keep it only in the
existing Typography → Advanced section. Update the MISC namespace list so the
ownership/filtering model stays unambiguous, and verify that the canonical
placement remains the single source of truth for this token.
- Around line 104-125: The Quick-Win summary counts are inconsistent with the
actual token lists: the “30 Quick-Win Tokens” checklist currently adds up to 29
items, and “Krok 1 — Kolory” lists 10 tokens instead of 11. Update the markdown
in this section by either adding the missing token(s) to the relevant step or
correcting the headline/subsection counts so the total and per-step numbers
match the list content. Use the “30 Quick-Win Tokens” heading and the step
blocks (especially “Krok 1 — Kolory” and the other numbered steps) to keep the
document internally consistent.
- Around line 36-60: The documented shell geometry does not match the actual
responsive contract in App.svelte, so update the configurator design text to
reflect the implemented defaults and breakpoints. In the layout section that
describes the three-zone desktop and responsiveness, replace the 220px/420px
proportions and 56px rail with the values used by the shell in App.svelte
(240px/440px defaults, 60px collapsed rail), and make the preview behavior
consistent with the slide-over at max-width 1100px. Keep the wording aligned
with the symbols and layout states already implemented so the doc matches the
code contract.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: e99596d8-19d4-4cb2-a7fe-5da11b6877f8
📒 Files selected for processing (1)
docs/configurator-design.md
Comment on lines
+36
to
+60
| ### 2.1 Trzy-strefowy desktop (≥ 1100 px) | ||
|
|
||
| ``` | ||
| ┌──────────────────────────────────────────────────────────────────────┐ | ||
| │ TOPBAR: Logo · Szukaj (/) · Modyfikowane: N · Undo/Redo · Motyw UI │ | ||
| ├─────────────┬────────────────────────────────────┬───────────────────┤ | ||
| │ │ │ │ | ||
| │ NAWIGACJA │ PANEL EDYCJI │ PODGLĄD LIVE │ | ||
| │ (sidebar) │ (domenowe studio) │ (izolowany) │ | ||
| │ │ │ │ | ||
| ├─────────────┴────────────────────────────────────┴───────────────────┤ | ||
| │ SZUFLADA CSS OUTPUT (zwijana, otwiera się klikając "N modyfikowanych")│ | ||
| └──────────────────────────────────────────────────────────────────────┘ | ||
| ``` | ||
|
|
||
| **Proporcje:** Nawigacja 220px · Edycja flex · Podgląd 420px (oba resizable). | ||
|
|
||
| ### 2.2 Responsywność | ||
|
|
||
| | Viewport | Zachowanie | | ||
| |---|---| | ||
| | ≥ 1100 px | Pełny 3-strefowy layout | | ||
| | 600–1099 px | Podgląd chowany za przyciskiem (slide-over z prawej); nawigacja → 56px rail z ikonami | | ||
| | < 600 px | Rail 44px; szuflada CSS domyślnie zwinięta | | ||
|
|
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Align the shell geometry with the implemented breakpoints.
The sizes here don’t match configurator/src/App.svelte: the shell uses 240px / 440px defaults, a 60px collapsed rail, and the preview becomes a slide-over at max-width: 1100px. The current 220px / 420px and 56px wording will send layout work toward the wrong contract.
Proposed correction
-### 2.1 Trzy-strefowy desktop (≥ 1100 px)
+### 2.1 Desktop shell (> 1100 px)
-**Proporcje:** Nawigacja 220px · Edycja flex · Podgląd 420px (oba resizable).
+**Proporcje:** Nawigacja 240px · Edycja flex · Podgląd 440px (oba resizable).
-| ≥ 1100 px | Pełny 3-strefowy layout |
-| 600–1099 px | Podgląd chowany za przyciskiem (slide-over z prawej); nawigacja → 56px rail z ikonami |
-| < 600 px | Rail 44px; szuflada CSS domyślnie zwinięta |
+| > 1100 px | Pełny 5-panelowy shell |
+| 600–1100 px | Podgląd jako slide-over z prawej; nawigacja → 60px rail z ikonami |
+| 400–599 px | Rail 44px; szuflada CSS domyślnie zwinięta |
+| < 400 px | Rail 40px |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| ### 2.1 Trzy-strefowy desktop (≥ 1100 px) | |
| ``` | |
| ┌──────────────────────────────────────────────────────────────────────┐ | |
| │ TOPBAR: Logo · Szukaj (/) · Modyfikowane: N · Undo/Redo · Motyw UI │ | |
| ├─────────────┬────────────────────────────────────┬───────────────────┤ | |
| │ │ │ │ | |
| │ NAWIGACJA │ PANEL EDYCJI │ PODGLĄD LIVE │ | |
| │ (sidebar) │ (domenowe studio) │ (izolowany) │ | |
| │ │ │ │ | |
| ├─────────────┴────────────────────────────────────┴───────────────────┤ | |
| │ SZUFLADA CSS OUTPUT (zwijana, otwiera się klikając "N modyfikowanych")│ | |
| └──────────────────────────────────────────────────────────────────────┘ | |
| ``` | |
| **Proporcje:** Nawigacja 220px · Edycja flex · Podgląd 420px (oba resizable). | |
| ### 2.2 Responsywność | |
| | Viewport | Zachowanie | | |
| |---|---| | |
| | ≥ 1100 px | Pełny 3-strefowy layout | | |
| | 600–1099 px | Podgląd chowany za przyciskiem (slide-over z prawej); nawigacja → 56px rail z ikonami | | |
| | < 600 px | Rail 44px; szuflada CSS domyślnie zwinięta | | |
| ### 2.1 Desktop shell (> 1100 px) | |
🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 38-38: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/configurator-design.md` around lines 36 - 60, The documented shell
geometry does not match the actual responsive contract in App.svelte, so update
the configurator design text to reflect the implemented defaults and
breakpoints. In the layout section that describes the three-zone desktop and
responsiveness, replace the 220px/420px proportions and 56px rail with the
values used by the shell in App.svelte (240px/440px defaults, 60px collapsed
rail), and make the preview behavior consistent with the slide-over at max-width
1100px. Keep the wording aligned with the symbols and layout states already
implemented so the doc matches the code contract.
Comment on lines
+104
to
+125
| 1. **Nagłówek:** "Customize your design system" + krótki lead | ||
| 2. **Export banner** (widoczny gdy N > 0): `N tokens modified · Export CSS ↓` — klikalny | ||
| 3. **Siatka domen 2×4** — każda karta ma: ikonę, nazwę, 1-zdaniowy blurb, status badge | ||
| 4. **30 Quick-Win Tokens** — check-lista zorganizowana w 6 kroków: | ||
|
|
||
| **Krok 1 — Kolory (11 tokenów):** | ||
| `--sf-color-primary-source-light`, `--sf-color-secondary-source-light`, `--sf-color-action-source-light`, `--sf-color-base-source-light`, `--sf-color-neutral-source-light`, `--sf-color-tertiary-source-light`, `--sf-color-success-source-light`, `--sf-color-warning-source-light`, `--sf-color-danger-source-light`, `--sf-color-info-source-light` | ||
|
|
||
| **Krok 2 — Typografia (5):** | ||
| `--sf-font-body`, `--sf-font-heading`, `--sf-font-mono`, `--sf-leading-normal`, `--sf-font-weight-heading` | ||
|
|
||
| **Krok 3 — Odstępy (5):** | ||
| `--sf-space-scale`, `--sf-section-pad`, `--sf-content-gap`, `--sf-gutter`, `--sf-gap` | ||
|
|
||
| **Krok 4 — Layout (3):** | ||
| `--sf-container-default`, `--sf-container-prose`, `--sf-header-height-desktop` | ||
|
|
||
| **Krok 5 — Kształty (3):** | ||
| `--sf-radius-scale`, `--sf-radius-m`, `--sf-border-width-1` | ||
|
|
||
| **Krok 6 — Cienie + Ruch (3):** | ||
| `--sf-shadow-strength`, `--sf-motion-scale`, `--sf-focus-ring-width` |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Fix the Quick-Win counts.
As written, the checklist totals 29 items, not 30, and the color subsection lists 10 tokens, not 11. Either add the missing token(s) or update the headline/counts so the summary matches the actual list.
Proposed correction
-4. **30 Quick-Win Tokens** — check-lista zorganizowana w 6 kroków:
+4. **29 Quick-Win Tokens** — check-lista zorganizowana w 6 kroków:
-**Krok 1 — Kolory (11 tokenów):**
+**Krok 1 — Kolory (10 tokenów):**📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| 1. **Nagłówek:** "Customize your design system" + krótki lead | |
| 2. **Export banner** (widoczny gdy N > 0): `N tokens modified · Export CSS ↓` — klikalny | |
| 3. **Siatka domen 2×4** — każda karta ma: ikonę, nazwę, 1-zdaniowy blurb, status badge | |
| 4. **30 Quick-Win Tokens** — check-lista zorganizowana w 6 kroków: | |
| **Krok 1 — Kolory (11 tokenów):** | |
| `--sf-color-primary-source-light`, `--sf-color-secondary-source-light`, `--sf-color-action-source-light`, `--sf-color-base-source-light`, `--sf-color-neutral-source-light`, `--sf-color-tertiary-source-light`, `--sf-color-success-source-light`, `--sf-color-warning-source-light`, `--sf-color-danger-source-light`, `--sf-color-info-source-light` | |
| **Krok 2 — Typografia (5):** | |
| `--sf-font-body`, `--sf-font-heading`, `--sf-font-mono`, `--sf-leading-normal`, `--sf-font-weight-heading` | |
| **Krok 3 — Odstępy (5):** | |
| `--sf-space-scale`, `--sf-section-pad`, `--sf-content-gap`, `--sf-gutter`, `--sf-gap` | |
| **Krok 4 — Layout (3):** | |
| `--sf-container-default`, `--sf-container-prose`, `--sf-header-height-desktop` | |
| **Krok 5 — Kształty (3):** | |
| `--sf-radius-scale`, `--sf-radius-m`, `--sf-border-width-1` | |
| **Krok 6 — Cienie + Ruch (3):** | |
| `--sf-shadow-strength`, `--sf-motion-scale`, `--sf-focus-ring-width` | |
| 1. **Nagłówek:** "Customize your design system" + krótki lead | |
| 2. **Export banner** (widoczny gdy N > 0): `N tokens modified · Export CSS ↓` — klikalny | |
| 3. **Siatka domen 2×4** — każda karta ma: ikonę, nazwę, 1-zdaniowy blurb, status badge | |
| 4. **29 Quick-Win Tokens** — check-lista zorganizowana w 6 kroków: | |
| **Krok 1 — Kolory (10 tokenów):** | |
| `--sf-color-primary-source-light`, `--sf-color-secondary-source-light`, `--sf-color-action-source-light`, `--sf-color-base-source-light`, `--sf-color-neutral-source-light`, `--sf-color-tertiary-source-light`, `--sf-color-success-source-light`, `--sf-color-warning-source-light`, `--sf-color-danger-source-light`, `--sf-color-info-source-light` | |
| **Krok 2 — Typografia (5):** | |
| `--sf-font-body`, `--sf-font-heading`, `--sf-font-mono`, `--sf-leading-normal`, `--sf-font-weight-heading` | |
| **Krok 3 — Odstępy (5):** | |
| `--sf-space-scale`, `--sf-section-pad`, `--sf-content-gap`, `--sf-gutter`, `--sf-gap` | |
| **Krok 4 — Layout (3):** | |
| `--sf-container-default`, `--sf-container-prose`, `--sf-header-height-desktop` | |
| **Krok 5 — Kształty (3):** | |
| `--sf-radius-scale`, `--sf-radius-m`, `--sf-border-width-1` | |
| **Krok 6 — Cienie + Ruch (3):** | |
| `--sf-shadow-strength`, `--sf-motion-scale`, `--sf-focus-ring-width` |
🧰 Tools
🪛 LanguageTool
[typographical] ~105-~105: Przed tym spójnikiem stawiamy przecinek: "widoczny, gdy".
Context: ...em" + krótki lead 2. Export banner (widoczny gdy N > 0): `N tokens modified · Export CSS...
(BRAK_PRZECINKA_GDY)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/configurator-design.md` around lines 104 - 125, The Quick-Win summary
counts are inconsistent with the actual token lists: the “30 Quick-Win Tokens”
checklist currently adds up to 29 items, and “Krok 1 — Kolory” lists 10 tokens
instead of 11. Update the markdown in this section by either adding the missing
token(s) to the relevant step or correcting the headline/subsection counts so
the total and per-step numbers match the list content. Use the “30 Quick-Win
Tokens” heading and the step blocks (especially “Krok 1 — Kolory” and the other
numbered steps) to keep the document internally consistent.
Comment on lines
+696
to
+704
| ## 13. MISC | ||
|
|
||
| Tokeny bez domeny — inline lista z filtrami (All / Modified). Brak studia. | ||
|
|
||
| | Namespace | Tokeny | | ||
| |---|---| | ||
| | print | `--sf-print-page-margin`, `--sf-print-page-size`, `--sf-print-base-size` | | ||
| | state flags | `--sf-is-dark`, `--sf-current-font-weight` | | ||
|
|
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Keep --sf-current-font-weight in one place.
This token is already documented in Typography → Advanced, so listing it again under MISC makes the ownership/filtering model ambiguous. Remove the duplicate here and keep a single canonical section.
Proposed correction
-| state flags | `--sf-is-dark`, `--sf-current-font-weight` |
+| state flags | `--sf-is-dark` |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| ## 13. MISC | |
| Tokeny bez domeny — inline lista z filtrami (All / Modified). Brak studia. | |
| | Namespace | Tokeny | | |
| |---|---| | |
| | print | `--sf-print-page-margin`, `--sf-print-page-size`, `--sf-print-base-size` | | |
| | state flags | `--sf-is-dark`, `--sf-current-font-weight` | | |
| ## 13. MISC | |
| Tokeny bez domeny — inline lista z filtrami (All / Modified). Brak studia. | |
| | Namespace | Tokeny | | |
| |---|---| | |
| | print | `--sf-print-page-margin`, `--sf-print-page-size`, `--sf-print-base-size` | | |
| | state flags | `--sf-is-dark` | | |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/configurator-design.md` around lines 696 - 704, Remove the duplicate
documentation entry for --sf-current-font-weight from the MISC token table and
keep it only in the existing Typography → Advanced section. Update the MISC
namespace list so the ownership/filtering model stays unambiguous, and verify
that the canonical placement remains the single source of truth for this token.
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.
Comprehensive UX/design document for the new SLASHED configurator,
designed fresh from the framework token API. Covers all 686 tokens
organized by domain (Colors, Typography, Spacing, Layout, Borders,
Shadows, Motion, Effects), widget library, state architecture,
CSS export format and cascade dependency map.
Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01XJYHqUSy7CtxfPrTAxM8wo
Summary by CodeRabbit