feat(color-picker): Initial theming commit - #2316
Open
desig9stein wants to merge 11 commits into
Open
Conversation
- Add support for Fluent, Material, Bootstrap, and Indigo themes. - Introduce shared styles for consistency across themes. - Integrate light and dark theme support with theming controllers. - Refactor base styles and optimize CSS structure.
- Refine theme-specific styles for Fluent, Material, Bootstrap, and Indigo. - Introduce mixins for shared slider tracks, swatch previews, and buttons. - Update anchor styling with hover, focus, and invalid states. - Improve responsiveness with grid-based layouts for picker elements. - Optimize rendering logic for anchors and input modes. - Add new tests for empty anchor state handling. - Replace outline icon buttons with flat variants; add `eye_dropper` icon.
- Refactor grid-based layouts with new CSS variables for improved responsiveness. - Enhance marker styling with opacity control and focus animation. - Update swatches to use grid layout for better spacing and alignment. - Introduce new tests for marker fill and opacity consistency. - Adjust canvas and picker styles for clearer structure and customization.
- Refactor and align SCSS indentation across files for consistency. - Replace duplicate/custom values with shared theme vars/mixins. - Update `--_marker-color` to `--_marker-fill` for clarity and code clarity. - Apply minor layout and styling tweaks across themes.
…nsistency and functionality - Optimize focus styling for anchors, adjusting width, height, and border-radius calculations. - Refactor slider-thumb mixin to accept a `$fill` parameter for better versatility. - Enhance swatch preview and transparency grid styling for clarity and alignment. - Replace deprecated variables with centralized theme tokens for improved maintainability. - Update theming controller logic and improve color update handling. - Adjust layout grid and spacing for better responsiveness.
…nvalid` theme token
…ariable - Replace `gap` with `row-gap` for better alignment. - Remove `--_swatches-col-gap`, update swatches to a fixed column count.
desig9stein
force-pushed
the
mpopov/color-picker-styling
branch
from
August 11, 2026 12:56
73aa03e to
27eae29
Compare
…popov/color-picker-styling
Contributor
|
When the Color Picker is in input mode and we use the outlined Material input, the border goes above the label without a notch when the input is empty and the Color Picker is opened. Once a color is selected and the input is filled, the notch appears. 
|
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
4 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.
The PR should be tested with the theming package from this PR
Description
Type of Change
Related Issues
Closes #
Testing
Checklist