feat(styles)!: generate theme variables from @gravity-ui/uikit-themer - #2745
Open
kseniya57 wants to merge 1 commit into
Open
feat(styles)!: generate theme variables from @gravity-ui/uikit-themer#2745kseniya57 wants to merge 1 commit into
kseniya57 wants to merge 1 commit into
Conversation
Contributor
Reviewer's GuideGenerates SCSS theme variables from @gravity-ui/uikit-themer instead of handwritten theme partials, centralizing light/dark/HC colors, border radii, and core typography into a build-generated _generated.scss file, wiring it into the theme entrypoint, and adding scripts/CI/docs to keep the artifact reproducible and documented. File-Level Changes
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- The regex-based
splitBlocks/extractBlockhelpers in the generator and HC bootstrap scripts are tightly coupled to the current.g-rootselector shapes; consider centralizing these patterns or at least failing loudly if a selector is missing (e.g. explicit checks with helpful errors) to make future selector refactors safer. - Since
_generated.scssis a large committed artifact, it may be worth adding a short note near the mixin definitions (or in the README) about how to consumeg-theme-commonvsg-themer-*mixins correctly, to avoid downstream themes accidentally omitting the repo-owned common tokens.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The regex-based `splitBlocks`/`extractBlock` helpers in the generator and HC bootstrap scripts are tightly coupled to the current `.g-root` selector shapes; consider centralizing these patterns or at least failing loudly if a selector is missing (e.g. explicit checks with helpful errors) to make future selector refactors safer.
- Since `_generated.scss` is a large committed artifact, it may be worth adding a short note near the mixin definitions (or in the README) about how to consume `g-theme-common` vs `g-themer-*` mixins correctly, to avoid downstream themes accidentally omitting the repo-owned common tokens.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Contributor
|
Preview is ready. |
1 task
Contributor
|
🎭 Component Tests Report is ready. |
kseniya57
requested review from
DakEnviy,
mournfulCoroner and
zamkovskaya
as code owners
July 14, 2026 10:24
kseniya57
force-pushed
the
migrate-to-gravity-themer
branch
9 times, most recently
from
July 16, 2026 09:26
6847f41 to
d999004
Compare
kseniya57
force-pushed
the
migrate-to-gravity-themer
branch
3 times, most recently
from
July 22, 2026 12:07
8be06fd to
e0d6a02
Compare
amje
changed the title
kseniya57
force-pushed
the
migrate-to-gravity-themer
branch
from
July 22, 2026 13:36
e0d6a02 to
ca7455e
Compare
kseniya57
force-pushed
the
migrate-to-gravity-themer
branch
from
July 26, 2026 14:04
ca7455e to
19d2aa0
Compare
kseniya57
force-pushed
the
migrate-to-gravity-themer
branch
from
August 5, 2026 04:59
19d2aa0 to
b18b224
Compare
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.
Summary
Replaces the hand-maintained SCSS theme sources (
light/dark/light-hc/dark-hc, plus thebase/line/private/sfx/system/textpartials and their typography/border-radius tokens) with theme artifacts generated from@gravity-ui/uikit-themer. Color tokens, typography metrics and the border-radius scale now come from a single upstream source of truth instead of being copied by hand.What changed
styles/themes/default.generated.css— the defaultlight/darktheme, copied verbatim from themer's prebuiltstyles/default.css.styles/themes/hc.generated.css— the high-contrast theme. Themer has no HC concept (Theme = 'light' | 'dark'), so its higher-contrastpalette + utility mappings live in the repo-owned seed
styles/themes/theme-data/hc.ts, merged ontoDEFAULT_THEMEand relabeled onto the-hcselectors.node_modulesat build time) so a themer version bump surfaces as a reviewable tokendiff, and CI's empty-diff check catches drift.
scripts/generate-theme-scss.mjs, exposed asnpm run generate:theme(run viatsx, since the HC seed is a TSmodule). Normalizes color literals to themer's space syntax (
rgb(a b c / d)) so HC matches the shippeddefault.css.styles/styles.scssnow@uses the two generated CSS files directly;.g-rootkeeps only the repo-owned tokens themer doesn't model(spacing, scrollbar width, focus radius, flow direction, typography extras).
styles/themes/common/typography.scsstrimmed to only the tokens themer (v1) can't express: theaccentfont-weight, the composite--g-text-*-fontshorthands, and the basefont-*declarations on.g-root. Font families, per-group weights, and per-variantsizes/line-heights now come from themer.
styles/themes/{light,dark,light-hc,dark-hc}/*,styles/themes/_index.scss) and theborder-radius block from
common/_index.scss.@gravity-ui/uikit-themerandtsxdevDependencies;tsconfig.jsonnow includesstyles/themes/theme-data/**/*.ts;CI gained a step that regenerates the theme and fails if the working tree drifts.
docs/theming.mdupdated to reflect the generated-theme workflow.Why
Notes for reviewers
DEFAULT_THEMEdeltas plus a purergba(a,b,c,d)→rgb(a b c / d)syntax swapMigration notes (for consumers)
No public CSS variable is removed or renamed — every
var(--g-color-*)usagekeeps working, so no code changes are required for apps that consume tokens
through variables and don't pin exact color literals.
This release does change the rendered theme, so downstream apps should:
The private solid shades shift by ±1
(imperceptible).
rgba(0, 0, 0, 0.5)is nowrgb(0 0 0 / 0.5)(same computed color).rgba(...)literal of a token value;values now use the space/slash
rgb(...)syntax (Baseline in all supportedbrowsers).
The newly added tokens are safe/additive:
--g-color-private-*-550solids andthe 2%-alpha shades (
*-20,black-70, …).