Developer guide: teach the design-to-theme workflow, not Photoshop and the Designer - #5698
Open
shai-almog wants to merge 4 commits into
Open
Developer guide: teach the design-to-theme workflow, not Photoshop and the Designer#5698shai-almog wants to merge 4 commits into
shai-almog wants to merge 4 commits into
Conversation
…d the Designer "Converting a PSD to a theme" was two tutorials wearing one heading. The first half walked through Photoshop -- open the PSD, hide layers, cut the images -- in screenshots of a 2016 UI. The second half defined ten UIIDs by clicking through the Swing Designer: press Add, type TitleContainer, uncheck derive, pick IMAGE_SCALED_FILL. Every one of those steps is a CSS property today, and the CSS chapter documents all of them. What survives both is the part that was never about either tool: reading a design, choosing the components and layouts that reproduce it, and building that hierarchy in code. The section keeps the design, the hierarchy diagram, the result, and the two compiled snippets that build the form, then hands styling to the CSS chapter -- naming cn1-background-type, multi-images and cn1-derive so a reader knows which parts of it they need. Seventeen Photoshop and Designer screenshots go, and with them the dead PSD download link that was the only reason the tutorial started where it did. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5ec5739e69
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Contributor
|
Developer Guide build artifacts are available for download from this workflow run:
Developer Guide quality checks: |
Contributor
Cloudflare Preview
|
I deleted background.jpg, camera.png and camera-button.png with the Photoshop screenshots, but those three are not screenshots of a tool -- they are the extracted artwork, the output of the cutting step. PsdTutorialDemo loads two of them through theme.getImage and the shown result needs the third, so the sample I kept was left pointing at files a reader had no way to obtain. They are back, shown as the three pieces the design needs, with a line on adding them to the theme as multi-images -- which is what makes theme.getImage return the right file per density. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1660a599c1
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Dropping the Designer walkthrough took the design's actual values with it. The section kept the code and the picture of the result and gave a reader no way to get from one to the other: the CSS chapter documents the syntax, not this design's colours, spacing or fonts, so following the section produced the hierarchy in native styling. The ten UIIDs are now a stylesheet, carrying the same values the Designer steps specified -- the scaled header image, the two palette colours, millimetre padding, the native font faces -- expressed as CSS. What took a paragraph of clicking per UIID is `cn1-derive` for the ones that only vary a colour, and `.pressed` / `.selected` for the states that were previously copied by hand into other tabs. The Separator is styled too. The Designer walkthrough never mentioned it, but the sample sets that UIID and its own comment says the line is meant to come from the theme, so without a rule the form draws no dividers at all. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 90bbd89eee
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
…rator colour Three faults in the stylesheet I added, all of which would have shipped a theme that does not reproduce the picture beside it. Only images a stylesheet names reach the compiled theme, and the camera pieces are fetched by name at runtime rather than used as a background, so nothing imported them: theme.getImage would have found neither. They now have an import selector, which is the mechanism the CSS chapter documents for exactly this. This stylesheet sets defaultSourceDPIInt to 0, so images land as regular images unless a rule says otherwise, which made the claim about per-density files untrue. Both rules declare cn1-source-dpi: 320, the density the original walkthrough told readers to pick. The separator was painted #4d606f, the design's dark text colour, which would have drawn heavy rules across the form. The design specifies #f5f5f5 for separators, in the same deleted sentence that gave the text colour -- I had taken one value from it and invented the other. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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
1 participant
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.
"Converting a PSD to a theme" was two tutorials under one heading.
The first half walked through Photoshop — open the PSD, hide layers, cut the images —
in screenshots of a 2016 UI. The second half defined ten UIIDs by clicking through the
Swing Designer: press Add, type
TitleContainer, uncheck derive, pickIMAGE_SCALED_FILL.Every one of those steps is a CSS property today, and
css.asciidocdocuments all of themacross 891 lines —
cn1-background-type, multi-images and densities,cn1-derive.What survives both is the part that was never about either tool: reading a design, choosing
the components and layout managers that reproduce it, and building that hierarchy in code.
So the section keeps the design, the hierarchy diagram, the result, and both compiled
snippets that build the form, then hands styling to the CSS chapter — naming the specific
properties a reader needs rather than saying "see CSS".
Seventeen Photoshop and Designer screenshots go, and with them the dead PSD download link
that was the only reason the tutorial started where it did.
Net: 233 deletions, 19 insertions.
Shared files: this touches
guide-links-baseline.txtonly (one dead link removed, zeroadded) and not the missing-code-blocks ratchet, so it's disjoint from #5695.
Verified locally: demos compile plus the bytecode compliance check, every guide gate, the
unused-image check (zero unused), asciidoctor at
--failure-level WARN, Vale andLanguageTool clean on the chapter.
🤖 Generated with Claude Code