Fix color declarations #96
Conversation
🦋 Changeset detectedLatest commit: 0390f79 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis pull request refactors the way colors are declared across the project. It introduces a new method in the Changes
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
commit: |
|
The preview deployment is ready. 🟢 Open Preview | Open Build Logs Last updated at: 2025-04-11 17:32:11 CET |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
packages/studiocms_ui/src/components/Sidebar/Single.astro (1)
1-43: 💡 Verification agent🧩 Analysis chain
Verify that component consumers are aware of this breaking change.
This file is part of the core UI component library, and the changes to color definition represent a breaking change as noted in the PR description. Consider adding documentation or migration notes to help users update their custom implementations.
🌐 Web query:
What's the best practice for communicating breaking changes in CSS variables?💡 Result:
To effectively communicate breaking changes in CSS variables, adopt a structured approach that prioritizes clarity, documentation, and gradual transitions. Here are the best practices informed by industry standards and practical use cases:
Centralized Documentation
- Maintain a dedicated reference (e.g., a
VARIABLES.mdfile or style guide) listing all CSS variables, their purposes, and update histories[1][5][8].- Use semantic naming (e.g.,
--primary-colorinstead of--color1) to clarify intent, reducing ambiguity during updates[1][7].Version Control & Deprecation Strategies
- Introduce versioned prefixes (e.g.,
--v2-primary-color) for backward-incompatible changes, allowing parallel use during migration[10].- Flag deprecated variables with
@deprecatedcomments in CSS files and documentation, specifying alternatives and removal timelines[1][4][8].- Retain deprecated variables temporarily with fallback values to prevent sudden breaks while transitioning:
:root { --old-primary-color: var(--new-primary-color, #3498db); /* Fallback for legacy support */ }Collaboration & Tooling
- Leverage CSS linting tools (e.g., Stylelint) to identify outdated variable usage in codebases[4][7].
- Integrate variable changes into semantic versioning (e.g., major version bumps for breaking changes)[10].
- Use automated alerts (e.g., GitHub Issues, Slack bots) to notify teams during build processes if deprecated variables are detected[8][9].
Gradual Migration Paths
- Phase out changes incrementally using feature flags or environment-specific overrides[9][10].
- Provide codemods or scripts to automate variable substitution in large codebases[5][7].
Examples in Practice
- For a renamed variable:
/* Deprecated: Use --new-text-color instead [2025-04-09] */ --old-text-color: var(--new-text-color, #2ecc71);- In a component library, pair variable updates with visual regression testing to catch unintended side effects[2][9].
By combining clear communication channels with technical safeguards, teams can mitigate disruptions and ensure smooth transitions during CSS variable evolution[1][4][7][10].
Citations:
- 1: https://www.dhiwise.com/blog/design-converter/css-variables-clean-dynamic-and-smarter-styling
- 2: https://www.patternfly.org/training/html-css-variables-and-overrides-training
- 3: https://coderpad.io/blog/development/what-front-end-developers-need-to-know-about-css-variables/
- 4: https://blog.pixelfreestudio.com/css-variables-gone-wrong-pitfalls-to-watch-out-for/
- 5: https://savvy.co.il/en/blog/css/css-variables-why-and-how-to-use/
- 6: https://blog.hubspot.com/website/css-variables
- 7: https://tech.timonwa.com/blog/using-css-variables-like-a-pro
- 8: https://community.canvaslms.com/t5/Canvas-Developers-Group/Canvas-Style-Guide-CSS-Variables/ba-p/268962
- 9: https://blog.pixelfreestudio.com/using-css-variables-for-dynamic-styling/
- 10: https://css-tricks.com/a-complete-guide-to-custom-properties/
Action Required: Update Documentation for Breaking CSS Variable Changes
It appears that the changes in the Sidebar component (and likely elsewhere in the core UI library) introduce breaking changes in the CSS color definitions. To ensure component consumers are prepared for this transition, please consider the following updates:
- Centralize Documentation: Add or update a dedicated reference (e.g., a
VARIABLES.mdor a dedicated migration section in the README) that lists the affected CSS variables, explains the rationale for the changes, and clearly enumerates new names or versioned changes.- Deprecation Warnings & Fallbacks: Document any deprecated CSS variables with
@deprecatedcomments and provide fallback values where necessary to assist users with a smoother transition.- Migration Notes: Include clear migration instructions outlining the update timeline and suggesting codemods or scripts (if available) to help consumers update their custom implementations.
Following these steps will ensure that consumers of the component library clearly understand the breaking change and how to adapt their applications accordingly.
🧹 Nitpick comments (11)
packages/studiocms_ui/src/components/Select/select.css (1)
16-20: Update Disabled Label Color: The disabled select label now uses a direct CSS variable (var(--text-muted)) instead of an HSL function. This change aligns with the new color management strategy and simplifies theming..changeset/mean-carrots-accept.md (1)
1-28: Changeset Documentation Review: The changeset file clearly explains the new approach for color declarations, complete with examples and a migration regex. Consider revising the wording around line 7 to be more concise, and double-check that indentation is consistently applied using spaces (to satisfy markdownlint guidelines).🧰 Tools
🪛 LanguageTool
[style] ~7-~7: Consider a shorter alternative to avoid wordiness.
Context: ...e. Before, we would use raw HSL values in order to be able to modify them later on: ```css...(IN_ORDER_TO_PREMIUM)
🪛 markdownlint-cli2 (0.17.2)
10-10: Hard tabs
Column: 1(MD010, no-hard-tabs)
18-18: Hard tabs
Column: 1(MD010, no-hard-tabs)
packages/studiocms_ui/src/components/Button/button.css (2)
146-171: Consistent Updates for Success, Warning, and Other Themes
The flat, outlined, hover, and active states for success, warning, danger, info, and mono buttons have been revised to use direct variable references for backgrounds and borders. Note that in a few sections (e.g., danger flat text color defined viahsl(337, 92%, 71%)and light-theme overrides using raw HSL), raw HSL values remain. Consider verifying if these should be converted to CSS variables for full consistency.
355-389: Light Theme Specific Overrides
Within the[data-theme="light"]block, the updates for success and warning flat buttons are consistent; however, primary and danger flat buttons still use raw HSL values for text colors. Please review if these raw values are intended or if they should be replaced with corresponding variables to maintain full consistency across themes.packages/studiocms_ui/src/components/Tabs/tabs.css (2)
63-65: Hover State Background for Default Tabs:
The hover state for.sui-tabs-container.default .sui-tab-headerhas been revised to usebackground-color: var(--default-flat-active) !important;. Although the use of!importantmay be necessary for specificity, please ensure it does not interfere with other style overrides.
67-69: Active Tab Background in Default Container:
For the active tab header, the background color is now set tovar(--primary-flat-active) !important;. This update contributes to a consistent color scheme, but as with hover, please check that the usage of!importantis truly warranted and doesn’t cause side effects.docs/src/content/docs/docs/guides/customization.mdx (5)
27-29: Standardizing Primary Color Variables Format
The primary color variables are now defined using the HSL function with space-separated parameters (e.g.hsl(0 0% 100%)). Verify that your target browsers fully support this CSS Color Module Level 4 syntax.
41-43: Clarification of HSL Notation Requirement
The documentation now instructs users to provide HSL values without commas (e.g.hsl(0 0% 100%)). Consider adding a note on browser support or fallbacks if older browsers are a concern.
88-119: Consistency in HSL Notation for Dark Mode Variables
The dark mode table lists default color values using comma-separated HSL notation (e.g.hsl(0, 0%, 6%)), which is inconsistent with the space-separated format recommended above. Please verify whether the table defaults should be updated to match the new standard for consistency, or update the instructions if both formats are acceptable.
128-159: Consistency in HSL Notation for Light Mode Variables
Similar to dark mode, the light mode table uses comma-separated HSL values (e.g.hsl(0, 0%, 97%)). Confirm if these should be revised to the space-separated format to align with the recommendation stated in the documentation.
168-193: Typo in Non-Themed Color Variables Table
In the "Non-Themed Color Variables" table, the entry for--mono-flatis described as "Info flat color" which appears to be a copy-paste error. Please update this description to "Mono flat color" for clarity and correctness.🧰 Tools
🪛 LanguageTool
[duplication] ~171-~171: Possible typo: you repeated a word.
Context: ...| |--text-dark| Dark text color |hsl(0 0% 0%)| |--default-flat` | Default flat c...(ENGLISH_WORD_REPEAT_RULE)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (37)
.changeset/mean-carrots-accept.md(1 hunks)docs/src/components/landing/EcosystemSection.astro(1 hunks)docs/src/components/landing/HeroSection.astro(1 hunks)docs/src/components/landing/ShowcaseSection.astro(2 hunks)docs/src/components/landing/SocialProofCard.astro(2 hunks)docs/src/components/landing/styles.css(1 hunks)docs/src/content/docs/docs/guides/customization.mdx(4 hunks)docs/src/pages/index.astro(3 hunks)docs/src/starlightOverrides/SiteTitle.astro(1 hunks)packages/studiocms_ui/src/components/Accordion/accordion.css(2 hunks)packages/studiocms_ui/src/components/Badge/badge.css(1 hunks)packages/studiocms_ui/src/components/Breadcrumbs/breadcrumbs.css(1 hunks)packages/studiocms_ui/src/components/Button/button.css(4 hunks)packages/studiocms_ui/src/components/Card/card.css(2 hunks)packages/studiocms_ui/src/components/Checkbox/checkbox.css(3 hunks)packages/studiocms_ui/src/components/Divider/Divider.astro(1 hunks)packages/studiocms_ui/src/components/Divider/divider.css(1 hunks)packages/studiocms_ui/src/components/Dropdown/dropdown.css(7 hunks)packages/studiocms_ui/src/components/Footer/footer.css(3 hunks)packages/studiocms_ui/src/components/Input/input.css(2 hunks)packages/studiocms_ui/src/components/Modal/modal.css(2 hunks)packages/studiocms_ui/src/components/Progress/progress.css(2 hunks)packages/studiocms_ui/src/components/RadioGroup/radiogroup.css(3 hunks)packages/studiocms_ui/src/components/SearchSelect/searchselect.css(5 hunks)packages/studiocms_ui/src/components/Select/select.css(7 hunks)packages/studiocms_ui/src/components/Sidebar/Double.astro(2 hunks)packages/studiocms_ui/src/components/Sidebar/Single.astro(1 hunks)packages/studiocms_ui/src/components/Skeleton/skeleton.css(4 hunks)packages/studiocms_ui/src/components/Tabs/tabs.css(3 hunks)packages/studiocms_ui/src/components/Textarea/textarea.css(4 hunks)packages/studiocms_ui/src/components/Toast/toaster.css(8 hunks)packages/studiocms_ui/src/components/Toggle/toggle.css(5 hunks)packages/studiocms_ui/src/components/User/user.css(2 hunks)packages/studiocms_ui/src/css/colors.css(1 hunks)packages/studiocms_ui/src/css/prose.css(2 hunks)packages/studiocms_ui/src/css/resets.css(2 hunks)packages/studiocms_ui/src/toolbar/index.ts(2 hunks)
🧰 Additional context used
🪛 LanguageTool
.changeset/mean-carrots-accept.md
[style] ~7-~7: Consider a shorter alternative to avoid wordiness.
Context: ...e. Before, we would use raw HSL values in order to be able to modify them later on: ```css...
(IN_ORDER_TO_PREMIUM)
docs/src/content/docs/docs/guides/customization.mdx
[duplication] ~171-~171: Possible typo: you repeated a word.
Context: ...| |--text-dark| Dark text color |hsl(0 0% 0%)| |--default-flat` | Default flat c...
(ENGLISH_WORD_REPEAT_RULE)
🪛 markdownlint-cli2 (0.17.2)
.changeset/mean-carrots-accept.md
10-10: Hard tabs
Column: 1
(MD010, no-hard-tabs)
18-18: Hard tabs
Column: 1
(MD010, no-hard-tabs)
🔇 Additional comments (141)
docs/src/components/landing/styles.css (1)
3-3: LGTM - Updated color declarationThe change from
hsl(var(--background-base))to directly usingvar(--background-base)aligns with the PR objective of simplifying color declarations throughout the UI framework.packages/studiocms_ui/src/components/Breadcrumbs/breadcrumbs.css (1)
12-12: LGTM - Updated color declarationThe change from
hsl(var(--primary-base))to directly usingvar(--primary-base)aligns with the PR objective of simplifying color declarations throughout the UI framework.packages/studiocms_ui/src/components/Divider/Divider.astro (1)
22-22: LGTM - Updated color declaration in dynamic styleThe change from
background-color: hsl(var(--${background}))to directly usingbackground-color: var(--${background})aligns with the PR objective of simplifying color declarations throughout the UI framework. The component's dynamic behavior through props is preserved.docs/src/components/landing/HeroSection.astro (1)
185-185: LGTM - Updated color declarationThe change from
background-color: hsl(var(--background-step-1))to directly usingbackground-color: var(--background-step-1)aligns with the PR objective of simplifying color declarations throughout the UI framework.docs/src/starlightOverrides/SiteTitle.astro (1)
124-124: Updated color definition to use direct CSS variable reference.This change replaces
color: hsl(var(--text-normal));withcolor: var(--text-normal);, removing the HSL function wrapper. This aligns with the PR's objective to simplify color declarations across the codebase.docs/src/components/landing/EcosystemSection.astro (1)
78-78: Simplified background color using direct CSS variable.Removed the
hsl()function wrapper around the CSS variable, changing frombackground-color: hsl(var(--background-step-1));tobackground-color: var(--background-step-1);. This change is part of the broader effort to standardize color declarations.packages/studiocms_ui/src/components/Card/card.css (3)
2-3: Updated color declaration pattern for card borders and background.Removed the
hsl()function wrapper around CSS variables, making the color declarations more direct. This change is consistent with the new approach to color management described in the PR.
10-10: Simplified filled card background color declaration.Removed the
hsl()function wrapper for a more direct CSS variable reference. This provides a cleaner way to define colors and aligns with the new color management strategy.
34-34: Updated card footer border color definition.Removed the
hsl()function wrapper from the border color definition, consistent with other changes in this PR to simplify color declarations.packages/studiocms_ui/src/components/Sidebar/Single.astro (1)
16-17: Simplified sidebar color definitions.Updated both background and border colors to use direct CSS variable references instead of HSL function wrappers. This makes the color system more straightforward and aligns with the PR's objective to streamline color declarations.
packages/studiocms_ui/src/components/Input/input.css (6)
11-11: LGTM! Simplified color variable usage.The change from
hsl(var(--text-muted))to directly usingvar(--text-muted)aligns with the PR's objective to simplify color declarations.
21-23: LGTM! Consistent color variable simplification.All three properties (border, background, and color) have been updated to use direct CSS variable references without the HSL function wrapper, maintaining consistency with the new approach.
28-28: LGTM! Simplified hover state background.The hover state background has been updated to use the direct CSS variable reference.
33-35: LGTM! Consistent focus/active state styling.Both border and background properties have been updated to use direct CSS variable references.
39-39: LGTM! Simplified disabled state border.The border property for disabled active state has been updated to use the direct CSS variable reference.
43-43: LGTM! Simplified required indicator color.The color property for the required indicator has been updated to use the direct CSS variable reference.
packages/studiocms_ui/src/components/Divider/divider.css (2)
15-15: LGTM! Simplified divider line background.The background-color property has been updated to use the direct CSS variable reference, following the new color declaration pattern.
22-22: LGTM! Simplified divider content text color.The color property has been updated to use the direct CSS variable reference, aligning with the PR objective.
packages/studiocms_ui/src/toolbar/index.ts (3)
100-102: LGTM! Simplified button default state styling.All three properties (background-color, border-color, and color) have been updated to use direct CSS variable references, consistent with the new color declaration approach.
113-113: LGTM! Simplified button hover state background.The hover state background-color has been updated to use the direct CSS variable reference.
117-117: LGTM! Simplified button active state background.The active state background-color has been updated to use the direct CSS variable reference.
docs/src/components/landing/SocialProofCard.astro (2)
39-39: LGTM! Simplified card background.The background-color property has been updated to use the direct CSS variable reference, consistent with the new color declaration approach.
64-64: LGTM! Simplified author handle text color.The color property has been updated to use the direct CSS variable reference, aligning with the PR objective.
packages/studiocms_ui/src/css/resets.css (2)
9-9: Update Accent-Color DeclarationChanged the
accent-colorproperty from using an HSL function (implicitly) to directly referencing the CSS variable (var(--primary-base)). This simplifies the declaration and aligns with the new color management strategy.
23-24: Standardize Body Color AssignmentsThe
colorandbackground-colorproperties for the body element now directly use CSS variables (var(--text-normal)andvar(--background-base)), which is consistent with our effort to simplify color definitions.packages/studiocms_ui/src/components/Skeleton/skeleton.css (7)
11-20: Consistent Update in Keyframes for Pulse AnimationReplaced the previous HSL-based color declarations with direct CSS variable references (e.g.,
var(--background-step-2)andvar(--background-step-3)). This change ensures that the pulse animation remains consistent with our new theming approach.
22-29: Update Skeleton Element BackgroundThe
.sui-skeletonelement’s background color is now defined withvar(--background-step-2), which helps maintain a unified styling strategy across components.
31-39: Standardize Card Background ColorThe
.sui-skeleton-cardnow usesvar(--background-step-1)for its background. This change simplifies color management and promotes consistency within the skeleton component styles.
69-73: Uniform Background for Text SkeletonUpdated
.sui-skeleton-textto usevar(--background-step-2)directly, ensuring that the text skeleton aligns with the standardized color scheme.
75-80: Consistent Background in Block SkeletonThe
.sui-skeleton-block’s background color is now set tovar(--background-step-2), further reinforcing uniformity in our component styling.
81-88: Uniform Background for Circle SkeletonThe
.sui-skeleton-circlenow appliesvar(--background-step-2)for its background color, matching the approach used in similar skeleton components.
105-112: Updated Animation Background ImageThe
background-imagein the.sui-skeleton-anim-slideselector has been updated to use CSS variables (e.g.,var(--background-step-2)andvar(--background-step-3)), ensuring that animated elements are in line with the new color declaration format.packages/studiocms_ui/src/components/User/user.css (2)
8-18: Simplify Avatar Styling with CSS VariablesUpdated the
.sui-avatar-containerto usevar(--default-base)for the background color andvar(--border)for the border. This directly implements our new color approach and simplifies future theme modifications.
36-39: Update Text Color Handling in DescriptionReplaced the HSL function with a direct variable reference (
var(--text-muted)) in.sui-description, ensuring consistency with the project's updated color management methods.packages/studiocms_ui/src/components/Toast/toaster.css (7)
9-9: Simplify Toaster Text Color DefinitionThe
colorproperty for#sui-toasternow directly usesvar(--text-normal), which aligns with our migration away from HSL-based declarations.
27-33: Standardize Toast Container StylingWithin the
.sui-toast-containerrule, the properties forborder,background-color, andbox-shadowhave been updated to employ direct CSS variable references. This change enhances consistency and makes the component easier to maintain.
60-78: Update Toast Header Icon ColorsThe SVG icons in the toast header now use direct variable references (e.g.,
var(--primary-base),var(--success-base),var(--warning-base),var(--danger-base),var(--info-base), andvar(--mono-base)) instead of the HSL function. This streamlines the styling and improves clarity across different toast types.
84-92: Refine Toast Progress Bar ColorsThe progress bar’s
background-colornow directly referencesvar(--primary-base)in its default state, with subsequent updates for variant classes. This revision is in line with our standardized color strategy.
114-132: Improve Close Icon Focus and Hover StylesThe hover state for
.close-icon-containerand its focus-visible outline now usevar(--default-base)andvar(--text-normal)respectively, providing consistent visual feedback in accordance with the new color definitions.
138-152: Consistent Border Colors in Persistent Toast ContainersUpdated the border styles for
.sui-toast-container.persistentand its variant states (success, warning, danger) to use the respective CSS variables. This change simplifies the CSS and aids in future theming adjustments.
155-189: Ensure Consistency in Keyframe TransitionsWithin the
@keyframes toast-closing, the border properties across different animation stages are now defined using direct CSS variable references. This ensures a smooth and thematically consistent transition effect during the toast closing animation.packages/studiocms_ui/src/components/Footer/footer.css (3)
5-7: Standardize Footer Background and Text ColorsThe footer now uses
var(--background-step-1)for its background andvar(--text-normal)for its text, aligning the component with our updated color scheme while ensuring a cohesive appearance.
31-35: Uniform Text Color in Footer LinksBy updating
.links ul li, .links ul li *to usevar(--text-normal), the links’ text now benefits from a uniform color scheme that matches the overall footer style.
49-51: Update Footer Separator StylingThe
.separatornow directly utilizesvar(--border)for its background, simplifying the style and keeping it consistent with the project's standardized color declarations.packages/studiocms_ui/src/components/Select/select.css (13)
26-29: Simplified .req-star Color Declaration: The.req-starclass now sets its color directly tovar(--danger-base), which improves clarity and consistency across the UI.
31-44: Updated .sui-select-button Styling: The button’s border, background, and text color are now defined via direct CSS variable references (e.g.var(--border),var(--background-step-2),var(--text-normal)). This standardization makes theme adjustments simpler.
46-49: Button Focus State Border Update: The focus state now explicitly uses1px solid var(--primary-base)for the border, ensuring a consistent focus indicator across components.
50-53: Button Hover Background Update: Changing the hover background tovar(--background-step-3)maintains visual consistency with the overall updated color scheme.
55-60: Active Button Styling Adjustments: Active and pressed states now rely on direct variable references for the border and background. This helps maintain consistency in interactive feedback.
82-98: Dropdown Styling Standardization: The dropdown element now usesvar(--border)for its border,var(--background-step-2)for its background, andvar(--shadow)for its box-shadow. These changes ensure that dropdown styles match the new design guidelines.
116-119: Disabled Option Color Simplification: Updating the disabled option color tovar(--text-muted)improves consistency with other disabled state elements.
121-125: Option Hover Background Update: The hover state for options now usesvar(--background-step-3), aligning with the updated color scheme across the component.
127-131: Multiple Select Option Highlighting: The background for selected options in multiple select scenarios is updated tovar(--primary-hover), which should provide a clear visual cue consistent with the new styling.
138-143: Selected Option Styling Standardized: By setting the selected option’s background tovar(--primary-base)and text tovar(--text-inverted), the component now adheres closely to the revised color guidelines.
187-198: Badge SVG Outline Adjustment: The SVG inside badge containers now uses an outline of1px solid transparent, which improves consistency during focus transitions.
203-208: Badge SVG Focus Outline Update: Updating the focus/active state outline to1px solid var(--border)provides a coherent visual feedback that matches other components.
210-214: Max Span Text Color Standardization: The text color of.sui-select-max-spanis updated tovar(--text-muted), which fits the overall intent of using the direct variable references for subdued text styling.packages/studiocms_ui/src/components/Accordion/accordion.css (5)
35-39: Accordion Border Update: The border for both.sui-accordion.outlinedand.sui-accordion.filledis now defined usingvar(--border), which enhances consistency across the component.
41-43: Filled Accordion Background Update: Updating the background color for filled accordions tovar(--background-step-1)aligns with the new color declaration strategy.
45-49: Accordion Item Border Refinement: The border applied to accordion items now directly employsvar(--border), ensuring a unified style across item boundaries.
51-53: First Accordion Item Border Top Update: The first accordion item now has its top border set tovar(--border), which maintains consistent styling from top to bottom.
60-66: Accordion Summary Text Color Standardization: The summary text color is now set tovar(--text-normal), ensuring that the announcement of accordion options is visible and harmonious with the updated UI palette.packages/studiocms_ui/src/components/Badge/badge.css (20)
15-18: Primary Badge Color Standardization: Primary badges now utilizevar(--primary-base)for the background andvar(--text-inverted)for the text, which aligns perfectly with the revised design language.
20-24: Primary Badge Variant Adjustments: For flat and outlined primary badges, switching the background tovar(--primary-flat)and the text tovar(--primary-base)creates a clear distinction between variants under the new styling approach.
26-28: Outlined Primary Badge Border Update: Setting the outlined primary badge border as1px solid var(--primary-base)upholds visual consistency with other outlined elements.
30-33: Success Badge Color Standardization: The success badge is now updated to usevar(--success-base)for its background andvar(--text-inverted)for its text, reinforcing the uniform color strategy.
35-39: Success Badge Variant Adjustments: Flat and outlined success badges now correctly referencevar(--success-flat)(background) andvar(--success-base)(text), ensuring the variants remain distinct yet harmonious.
41-43: Outlined Success Badge Border Update: A border defined as1px solid var(--success-base)confirms that outlined success badges adhere to the standard color guidelines.
45-48: Warning Badge Color Standardization: The warning badge now directly usesvar(--warning-base)for its background withvar(--text-inverted)for its text, which simplifies and clarifies its styling.
50-54: Warning Badge Variant Adjustments: For flat and outlined warning badges, applyingvar(--warning-flat)as the background andvar(--warning-base)for text maintains a consistent variant distinction.
56-58: Outlined Warning Badge Border Update: The outlined variant now uses a border of1px solid var(--warning-base), keeping the visual style consistent with other badge types.
60-63: Danger Badge Color Update: The danger badge’s background is now set tovar(--danger-base)withvar(--text-normal)for text, ensuring clear and consistent visual cues.
65-69: Danger Badge Variant Adjustments: In its flat and outlined forms, the danger badge now referencesvar(--danger-flat)across the background while its variant text remainsvar(--danger-base), furthering design uniformity.
71-73: Outlined Danger Badge Border Update: The outlined danger badge is now bordered with1px solid var(--danger-base), aligning with the overall styling shifts.
75-78: Info Badge Color Standardization: The info badge now employsvar(--info-base)for its background andvar(--text-normal)for its text; this creates a clear and immediately recognizable visual style.
80-84: Info Badge Variant Adjustments: For flat and outlined info badges, the background now comes fromvar(--info-flat)while the text usesvar(--info-base), ensuring variants remain distinct yet consistent.
86-88: Outlined Info Badge Border Update: The border for info badges in outlined form is updated to1px solid var(--info-base), which supports a unified interface aesthetic.
90-93: Mono Badge Color Standardization: Mono badges now reliably usevar(--mono-base)for background andvar(--text-inverted)for text, ensuring clarity and cohesion.
95-99: Mono Badge Variant Adjustments: The flat and outlined variants receivevar(--mono-flat)as their background, with text color switching tovar(--mono-base), aligning them with the new color paradigm.
101-103: Outlined Mono Badge Border Update: The outlined mono badge now features a border of1px solid var(--mono-base), which contributes to a consistently clean design.
105-107: Data-theme Light Danger Badge Adjustment: For light-themed contexts, the danger badge text is updated tovar(--text-inverted)for better contrast.
109-111: Data-theme Light Info Badge Adjustment: Likewise, the info badge in a light theme now usesvar(--text-inverted)for its text, ensuring readability and design consistency.packages/studiocms_ui/src/components/Modal/modal.css (3)
1-6: Modal Component Styling Update: The modal now uses a border of1px solid var(--border)and a box-shadow of0px 4px 8px var(--shadow)(with a reduced vertical offset). These changes help the modal integrate seamlessly with the new color declaration approach.
63-65: X-Mark Container Hover Update: The hover effect for the.x-mark-containerhas been updated to usevar(--default-base)for its background, ensuring consistency with the refreshed color strategy.
67-70: X-Mark Container Focus-Visible Outline Update: The focus-visible outline now correctly applies2px solid var(--text-normal), boosting accessibility and providing a clear focus indicator.packages/studiocms_ui/src/components/Dropdown/dropdown.css (1)
19-19: Color handling standardized to direct CSS variable referencesThese changes align with the PR objective of simplifying color declarations by removing the
hsl()function wrapper and using CSS variables directly. This makes the code more readable and easier to maintain.Also applies to: 31-31, 55-55, 68-68, 86-86, 146-146, 156-156, 160-166, 174-175, 183-184, 192-193, 201-202, 210-211, 215-215
packages/studiocms_ui/src/components/Checkbox/checkbox.css (1)
13-13: Color property standardization improves consistencyThese changes successfully transition from using
hsl(var(--color-variable))to the simplervar(--color-variable)format. This approach improves readability and aligns with the breaking change described in the PR objectives.Also applies to: 20-22, 29-30, 34-35, 38-39, 67-69, 72-74, 77-79, 82-84, 87-89, 92-94, 97-98, 111-112, 115-116, 119-120, 123-124, 127-128, 131-132, 135-136
packages/studiocms_ui/src/css/colors.css (1)
13-17: HSL function implementation for color variables looks goodThe colors have been successfully converted to use explicit HSL functions, which makes customization much clearer and aligns with the PR objectives.
Also applies to: 18-22, 23-25, 27-86, 91-118, 120-131
docs/src/pages/index.astro (1)
118-119: Landing page color references updated to match new patternThe color properties have been successfully updated to use direct CSS variable references rather than wrapping them in
hsl()functions. This change is consistent with the rest of the codebase and improves readability.Also applies to: 129-130, 135-136, 176-177
docs/src/components/landing/ShowcaseSection.astro (2)
78-78: Simplify Background Color Declaration
The update from usinghsl(var(--background-step-1))to a direct reference (var(--background-step-1)) streamlines the CSS and reduces unnecessary function wrapping. Please ensure that the global definition of--background-step-1is correct.
101-101: Update Preview-Container Background Declaration
Replacinghsl(var(--background-base))withvar(--background-base)makes the code more straightforward and consistent with the new color management approach.packages/studiocms_ui/src/components/RadioGroup/radiogroup.css (9)
7-10: Use Direct Variable in Disabled Container
Updating the disabled container’s text color tovar(--text-muted)(instead of wrapping it inhsl()) improves clarity and consistency across themes.
12-16: Consistent Color Reference for Disabled Labels
The change to usevar(--text-muted)in.sui-radio-label.disabledaligns with the overall update and simplifies color management.
18-21: Update Highlight for Required Star
Usingvar(--danger-base)directly for.req-staris a clear improvement over the previous raw hsl() wrapping.
41-43: Streamline Hover State Styling
The update for.sui-radio-label:hover .sui-radio-boxto usevar(--default-hover)ensures consistency with the new color declarations.
45-48: Verify Active State Transformation
While updating the active state’s outline color tovar(--default-active)is good, please verify the use ofscale: 0.9;—typically CSS transforms usetransform: scale(0.9);. Confirm browser support or correct if necessary.
50-53: Update Checked State Colors
Replacing the hsl-wrapped color with directvar(--text-normal)for the checked radio box state is clear and consistent.
55-58: Primary Theme Consistency
The update in the primary theme block (usingvar(--primary-base)) is applied correctly. All similar blocks for success, warning, danger, info, and mono themes follow the same pattern—good consistency overall.
95-103: Update Radio Box Outline
Changing the outline definition to1px solid var(--default-base)ensures that the styling remains consistent with the updated variable approach.
104-106: Improve Focus-Visible Styling
Usingoutline-color: var(--text-normal) !important;in the focus-visible state aligns with the new theme standards.packages/studiocms_ui/src/components/Sidebar/Double.astro (2)
30-32: Standardize Sidebar Outer Styling
The replacement ofhsl(var(--background-step-1))withvar(--background-step-1)and similarly usingvar(--border)for the border is clear and aligns with the new approach.
46-48: Standardize Sidebar Inner Styling
Similarly, updating the inner sidebar’sbackground-colorandborder-rightproperties to use direct variable references improves maintainability and consistency.packages/studiocms_ui/src/components/Button/button.css (6)
27-29: Default Button Style Update
The default colorway now directly uses CSS variables (var(--default-base),var(--border), andvar(--text-normal)), which simplifies the color declarations and enhances theme consistency.
48-50: Outlined Button Hover State
Updating the hover state for outlined buttons to usevar(--default-hover)is concise and aligns with the overall refactor effort.
56-63: Enhanced Hover and Active States
The changes in the hover and active states (usingvar(--default-hover)andvar(--default-active)along with a transform for active state scaling) are well implemented.
105-109: Primary Button Colorway Update
Primary button styles now correctly referencevar(--primary-base)for background and border, andvar(--text-inverted)for text.
112-118: Outlined Primary Button Styling
The outlined primary button’s updated background and text color further ensure consistency with the new color management strategy.
133-139: Review Flat Button Color Declaration (Primary)
The primary flat button now usesvar(--primary-flat)for its background; however, the text color remains defined ashsl(259, 96%, 79%). This reintroduces a raw HSL value into the codebase. Please verify whether this is intentional or if it should be updated to a CSS variable for consistency.packages/studiocms_ui/src/css/prose.css (2)
3-19: Streamline Prose Component Color Variables
The update to replacehsl(var(--color-variable))with direct variable references (e.g.,var(--text-dimmed),var(--text-normal), etc.) cleans up the CSS and makes customization simpler. These changes effectively align with the new color declaration methodology.
248-249: Code Element Background Update
Changing the code element’s background fromhsl(var(--background-step-3))tovar(--background-step-3)simplifies the styling and adheres to the standardized approach for color declarations.packages/studiocms_ui/src/components/Textarea/textarea.css (5)
8-12: Disabled Label Color Consistency:
In the.sui-textarea-label.disabledblock, the color has been changed from using an HSL function to a direct variable reference (color: var(--text-muted);). This update not only simplifies the declaration but also aligns well with the new color management strategy. Please verify that the CSS variable--text-mutedholds the correct color value as previously computed byhsl(var(--text-muted)).
27-32: Textarea Core Styling Update:
The changes on lines 30–32 update the textarea’s border, background, and text color to use CSS variables directly. This improves consistency and maintainability, as it adheres to the new approach of using variable references in place of raw HSL calls.
40-42: Hover State Background Update:
In the hover state for.sui-textarea, the background is now defined asvar(--background-step-3). This change is consistent with the overall theme migration. Verify that the new variable provides the intended visual highlight on hover.
48-53: Active/Focus State Adjustments:
The active and focus state styles now usevar(--primary-base)for the border andvar(--background-step-2)for the background. This refactoring is in line with the project-wide color strategy. It is advisable to check the accessibility contrast for these states to ensure they meet UI guidelines.
55-57: Required Star Color Update:
The.req-starelement now usesvar(--danger-base)for its color, which is consistent with the simplified color declarations across the codebase.packages/studiocms_ui/src/components/Progress/progress.css (3)
1-4: Progress Component Border Update:
The border for the progress container has been updated fromhsl(var(--border))tovar(--border). This direct use of the CSS variable reduces complexity and ensures consistency with the new color handling method.
9-14: Slider Primary Color Update:
Within.sui-progress-slider, the background color is now set tovar(--primary-base). This change standardizes the color reference and should help maintain a consistent appearance across components.
17-19: Status-Based Slider Color Refinement:
The background colors for the slider in its various status states (success, warning, danger, info, monochrome) have all been updated to use their respective CSS variables. Please ensure that each variable (e.g.,--success-base,--warning-base, etc.) is correctly defined to produce the intended color output.packages/studiocms_ui/src/components/Toggle/toggle.css (6)
10-13: Disabled Toggle Label Color Update:
In the.sui-toggle-label.disableddeclaration, the color transition tovar(--text-muted)enhances consistency with other disabled elements in the application.
20-27: Toggle Container Background Update:
The background for the toggle container has been updated tovar(--default-base), which simplifies the color styling. This now directly reflects the intended color design via a CSS variable.
33-38: Toggle Switch Color Tuning:
The.sui-toggle-switchnow usesvar(--text-muted)for its background color. This update aligns the toggle switch styling with the overall refactor. It would be good to verify that this color provides adequate contrast in both active and inactive states.
45-47: Focus-visible Outline Adjustment:
The focus-visible styling for the toggle switch has been updated tooutline: 2px solid var(--text-normal). This change improves consistency; however, please double-check that the contrast and focus indication remain clear for accessibility purposes.
50-53: Checked Toggle Switch Styling:
For the checked state – as seen in the.sui-toggle-container:has(.sui-toggle-checkbox:checked) .sui-toggle-switchrule – the background color update tovar(--text-normal)helps maintain a uniform design. Ensure that this visually differentiates the checked state as intended.
73-101: Toggle Label Variants and Active State Updates:
The update for toggle label classes (e.g.,.primary,.success,.warning,.danger,.info,.mono) now uses direct variable references for their backgrounds. Additionally, the mono variant’s toggle switch now has a border defined as1px solid var(--text-inverted), and the.req-starcolor is updated accordingly. Overall, these changes create a cohesive color system. Please verify that the new variable values deliver the desired visual outcomes across different component states.packages/studiocms_ui/src/components/Tabs/tabs.css (4)
58-61: Default Tab Header Focus-visible Update:
The focus-visible style for default tab headers now usesoutline: 2px solid var(--text-normal). This change aligns with the refactored color management and should maintain proper focus visibility for accessibility.
71-77: Status-Specific Active Tab Backgrounds:
The modifications for tab headers with status classes (e.g.,.success.active,.warning.active,.danger.active, and their variants) now use their corresponding CSS variables (--success-flat-active,--warning-flat-active, etc.). This is a clear improvement in maintainability. Ensure that these variables reflect the appropriate colors for each status.
87-89: Starlight Tab Headers Color Adjustments:
In the starlight-themed tab container, the tab header text and active states have been updated (e.g., changing text colors tovar(--text-muted)andvar(--text-normal), and the active underline tovar(--primary-base)). These refinements are well aligned with the new approach. Confirm that these changes meet the design requirements and accessibility standards.
127-135: Focus-visible Styling for Starlight Tabs:
The focus-visible pseudo-element for starlight tab headers now features a border (2px solid var(--primary-base)) and an outline (1px solid var(--text-normal)). This detailed focus styling is critical for accessibility—please ensure cross-browser compatibility and that the focus indication is prominent.packages/studiocms_ui/src/components/SearchSelect/searchselect.css (12)
14-18: Disabled SearchSelect Label Color Update:
In the.sui-search-select-label.disabledrule, the color change tovar(--text-muted)is consistent with similar updates across the codebase. This should maintain visual uniformity for disabled elements.
24-27: Required Star Color Consistency:
The.req-starelement’s color has been modified to usevar(--danger-base), ensuring consistency with other components that signal danger or required fields.
38-42: Dropdown Border and Background Updates:
The.sui-search-select-dropdownnow uses a border defined as1px solid var(--border)and a background set tovar(--background-step-2). Both changes simplify the color declarations and maintain alignment with the new theme guidelines.
53-54: Dropdown Box-shadow Refinement:
The dropdown’s box-shadow now uses0px 4px 8px var(--shadow)instead of an HSL-based value. Please confirm that the--shadowvariable produces a visually acceptable shadow effect that matches the design intent.
70-72: Empty Search Results Hover State:
For empty search results, updating the hover background color tovar(--background-step-2)aligns with the revised color strategy.
76-77: Disabled Option Color Update:
The styling for.sui-search-select-option.disablednow usesvar(--text-muted), ensuring that disabled options are styled consistently across the UI.
79-82: Option Hover and Focus States:
The hover and focused states for search select options have been updated to usevar(--background-step-3), which should provide a clear interactive feedback while adhering to the revised color scheme.
87-88: Multiple Select Option Hover Background:
The background color for multiple select options when hovered/ focused now usesvar(--primary-hover), in alignment with the new declarations.
91-93: Selected Option Styling:
The styling for a selected option is now defined withbackground-color: var(--primary-base)andcolor: var(--text-inverted). This direct reference provides improved clarity and easier theme maintenance.
168-170: Badge SVG Outline Default:
The SVG outline in the badge container now defaults to1px solid transparent, helping to avoid any unintended visual borders while still allowing for clear focus states when active.
179-180: Badge SVG Active/Focus Outline:
Updating the SVG outline to1px solid var(--border)during active and focus states ensures a consistent interaction style. Please verify that this change supports sufficient visual feedback during these states.
183-185: Max Span Text Color Update:
The color for.sui-search-select-max-spanhas been switched tovar(--text-muted), matching similar disabled or placeholder text styles across the application.docs/src/content/docs/docs/guides/customization.mdx (1)
33-35: Updated Light Theme Primary Color Variables
The light theme now defines primary colors using HSL with space-separated values (e.g.hsl(0 0% 0%)). Please confirm that these values yield the desired visual outcome for the light theme.
…ry box-shadow in prose styles
…udiocms/ui into fix/css-color-declaration
Description
This PR introduces a breaking change to how colors are handled within StudioCMS UI. Before, we would use raw HSL values in order to be able to modify them later on:
This introduces an unnecessary hurdle to customization, since most other libraries ship with either their own color values and spaces or a different approach entirely. Thus, the goal of this PR is to replace this approach with a simpler one. We will now default to HSL functions instead of the raw values:
Migrating from this can be a little tedious if the old system was used in custom components. I have created a regular expression that can be used with VSCode's (or any other IDE's) search & replace feature:
Search Value:
hsl[a]?\((var\([A-Za-z-\d]+\))\)Replace Value:
$1This (in most cases) should replace all instances with the now correct value. Please make sure to manually search for
hsl(var(andhsla(var(after running the above to make sure all previous values have been replaced.Summary by CodeRabbit
New Features
Style
Documentation