refactor(button): extract repeated tri-state patterns into mixins#3372
Open
orrgottlieb wants to merge 1 commit into
Open
refactor(button): extract repeated tri-state patterns into mixins#3372orrgottlieb wants to merge 1 commit into
orrgottlieb wants to merge 1 commit into
Conversation
The Button.module.scss matrix is a 3 (kind) × 9 (color) × ~3 (state)
combinatorial of mostly mechanical rules. Five recurring patterns
account for the bulk of the file:
- solid-tristate — bg + Active/hover/focus bg (kindPrimary regular colors)
- outlined-tristate — fg + border-color + Active/hover/focus bg (kindSecondary)
- flat-tristate — fg + Active/hover/focus bg (kindTertiary)
- brightness-overlay — Active/hover/focus backdrop-filter brightness + focus-style-on-primary
- disabled-with-opacity — opacity + fg, used by overlay-style colors
These are now defined as mixins at the top of the file and applied per
color, dropping ~120 lines of repetition (635 → 257 inserts) without
any change to compiled CSS semantics or class-name hashes.
Equivalence verified by diffing the compiled CSS: the only differences
are `A {x} B {x}` rules merged into `A, B {x}` (identical cascade).
Contributor
Code Review by Qodo
1. #e6e9ef hardcoded in mixin
|
Contributor
|
📦 Bundle Size Analysis ✅ No bundle size changes detected. Unchanged Components
📊 Summary:
|
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.
User description
Summary
Button.module.scssis a 3 (kind) × 9 (color) × ~3 (state) combinatorial matrix. Five recurring patterns accounted for the bulk of the file's repetition. Each is now a SCSS mixin defined once and applied per color.Mixins
solid-tristate(class, bg, bg-active, fg?)kindPrimaryregular colors (primary, brand, positive, negative, inverted, onInvertedBackground)outlined-tristate(class, color, bg-active)kindSecondary(positive, negative, inverted, onInvertedBackground)flat-tristate(class, color, bg-active)kindTertiary(positive, negative, inverted, onInvertedBackground)brightness-overlay-tristate(class, literal-bg?)literal-bgparam forkindPrimary#e6e9efoverlay)disabled-with-opacity(class, fg)Result: 578 → 457 lines (-121, ~21% smaller source) with no semantic change.
Equivalence verification
I diffed the compiled CSS string in
dist/Button/Button.module.scss.jsagainst master's. The only differences are:A { x }B { x }) merged into one (A, B { x }) — identical CSS cascade.Class-name hashes (
button_2f1d87d372,kindPrimary_306927aec1, etc.) are byte-identical to master. No DOM, snapshot, or visual regressions possible from this change.Test plan
yarn workspace @vibe/button buildsucceeds🤖 Generated with Claude Code
PR Type
Enhancement
Description
Extract five recurring SCSS patterns into reusable mixins
Reduce Button.module.scss from 578 to 457 lines (~21% reduction)
Consolidate tri-state (Active/hover/focus) styling logic
Maintain identical compiled CSS and class-name hashes
Diagram Walkthrough
File Walkthrough
Button.module.scss
Refactor tri-state patterns into reusable SCSS mixinspackages/components/button/src/Button/Button.module.scss
solid-tristate,outlined-tristate,flat-tristate,brightness-overlay-tristate,disabled-with-opacityinvocations across
kindPrimary,kindSecondary,kindTertiaryblocks.colorPositiveActive,.colorPositive:hover, .colorPositive:focus) into mixin-generated ruleschanges