Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork3.9k
Fix: use CSS custom properties in has-text-weight-* helpers for runtime theming#4036
Fix: use CSS custom properties in has-text-weight-* helpers for runtime theming#4036kght6123 wants to merge 5 commits intojgthms:mainfrom
Conversation
Resolvesjgthms#3985The .control.has-icons-left .icon selector (0,3,0) was overridingthe .icon.is-small selector (0,2,0) due to higher specificity.This change introduces more specific selectors for icon sizes within.control.has-icons-left and .control.has-icons-right contexts,ensuring that .is-small, .is-medium, and .is-large classes applieddirectly to icons within these controls correctly set their dimensions.For example, .control.has-icons-left .icon.is-small (0,4,0) willnow correctly override the base styles for icons in controls.
Resolvesjgthms#3985The .control.has-icons-left .icon selector (0,3,0) was overridingthe .icon.is-small selector (0,2,0) due to higher specificity.This change introduces more specific selectors for icon sizes within.control.has-icons-left and .control.has-icons-right contexts,ensuring that .is-small, .is-medium, and .is-large classes applieddirectly to icons within these controls correctly set their dimensions.For example, .control.has-icons-left .icon.is-small (0,4,0) willnow correctly override the base styles for icons in controls.
Resolvesjgthms#3985The .control.has-icons-left .icon selector (0,3,0) was overridingthe .icon.is-small selector (0,2,0) due to higher specificity.This change introduces more specific selectors for icon sizes within.control.has-icons-left and .control.has-icons-right contexts,ensuring that .is-small, .is-medium, and .is-large classes applieddirectly to icons within these controls correctly set their dimensions.For example, .control.has-icons-left .icon.is-small (0,4,0) willnow correctly override the base styles for icons in controls.
Resolvesjgthms#3985The .control.has-icons-left .icon selector (0,3,0) was overridingthe .icon.is-small selector (0,2,0) due to higher specificity.This prevented direct application of size modifiers like .is-smallto icons within controls with icons.This commit introduces more specific selectors for icon sizes(e.g., .control.has-icons-left .icon.is-small) within the.control.has-icons-left and .control.has-icons-right contexts in`sass/form/tools.scss`.These changes ensure that .is-small, .is-medium, and .is-largeclasses applied directly to icons within these controls correctly settheir dimensions, aligning with the Bulma Sass styleguide.
…me themingReplace hard-coded SCSS variable values with CSS custom properties in all`has-text-weight-*` helper classes. This allows users to customize fontweights at runtime by overriding `--bulma-weight-*` CSS variables, consistentwith how other Bulma components (e.g. .title) reference weight values.The `--bulma-weight-*` variables are already registered in the light theme,so this change is fully backward compatible.Relates tojgthms#3984Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Pull request overview
This PR aims to make thehas-text-weight-* helper classes themeable at runtime by switching theirfont-weight declarations from compiled numeric values to CSS custom properties (var(--bulma-weight-*)), aligning helpers with other Bulma typography that already relies on CSS variables.
Changes:
- Update
sass/helpers/typography.scssso all 6has-text-weight-*helpers usecv.getVar("weight-*")instead ofiv.$weight-*. - Rebuild compiled CSS outputs to reflect the new
font-weight: var(--bulma-weight-*) !important;declarations. - Add an “Unreleased” changelog entry describing the helper/theming enhancement.
Reviewed changes
Copilot reviewed 8 out of 13 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| sass/helpers/typography.scss | Switchhas-text-weight-* helpers to use CSS custom properties viacv.getVar. |
| sass/form/tools.scss | Adds new `.control.has-icons-* .icon.is-(small |
| css/bulma.css | Rebuilt output: helper weights now usevar(--bulma-weight-*); also includes new control icon sizing rules. |
| css/versions/bulma-prefixed.css | Rebuilt output with prefixed equivalents of the same changes. |
| css/versions/bulma-no-dark-mode.css | Rebuilt output: helper weights now use CSS vars; also includes new control icon sizing rules. |
| css/versions/bulma-no-helpers.css | Rebuilt output; includes new control icon sizing rules (helpers remain excluded). |
| css/versions/bulma-no-helpers-prefixed.css | Rebuilt output; includes prefixed new control icon sizing rules. |
| css/versions/bulma-no-helpers.css.map | Rebuilt sourcemap output. |
| CHANGELOG.md | Adds an “Unreleased” entry for the helper/theming change. |
💡Add Copilot custom instructions for smarter, more guided reviews.Learn how to get started.
| height: cv.getVar("icon-dimensions-small"); | ||
| width: cv.getVar("icon-dimensions-small"); | ||
| } | ||
| &.#{iv.$class-prefix}is-medium { | ||
| height: cv.getVar("icon-dimensions-medium"); | ||
| width: cv.getVar("icon-dimensions-medium"); | ||
| } | ||
| &.#{iv.$class-prefix}is-large { | ||
| height: cv.getVar("icon-dimensions-large"); | ||
| width: cv.getVar("icon-dimensions-large"); |
CopilotAIFeb 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
The new&.is-small/medium/large rules override the icon containerheight/width inside.control.has-icons-*. Because the icon is absolutely positioned withtop: 0, shrinking the container (e.g. to--bulma-icon-dimensions-small) will place the icon at the top of the control rather than vertically centered, which is a behavior change for existing markup that includes.icon.is-small.
Consider keeping the container sized toinput-height (so the icon stays centered) and only varyingfont-size, or if you want the container to shrink then also update positioning (e.g. center vertically) and adjust input padding to match the new icon width.
| height: cv.getVar("icon-dimensions-small"); | |
| width: cv.getVar("icon-dimensions-small"); | |
| } | |
| &.#{iv.$class-prefix}is-medium { | |
| height: cv.getVar("icon-dimensions-medium"); | |
| width: cv.getVar("icon-dimensions-medium"); | |
| } | |
| &.#{iv.$class-prefix}is-large { | |
| height: cv.getVar("icon-dimensions-large"); | |
| width: cv.getVar("icon-dimensions-large"); | |
| font-size: cv.getVar("size-small"); | |
| } | |
| &.#{iv.$class-prefix}is-medium { | |
| font-size: cv.getVar("size-medium"); | |
| } | |
| &.#{iv.$class-prefix}is-large { | |
| font-size: cv.getVar("size-large"); |
| // Sizes | ||
| &.#{iv.$class-prefix}is-small { | ||
| height: cv.getVar("icon-dimensions-small"); | ||
| width: cv.getVar("icon-dimensions-small"); | ||
| } | ||
| &.#{iv.$class-prefix}is-medium { | ||
| height: cv.getVar("icon-dimensions-medium"); | ||
| width: cv.getVar("icon-dimensions-medium"); | ||
| } | ||
| &.#{iv.$class-prefix}is-large { | ||
| height: cv.getVar("icon-dimensions-large"); | ||
| width: cv.getVar("icon-dimensions-large"); | ||
| } |
CopilotAIFeb 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
This PR is described as only changinghas-text-weight-* helpers to use CSS custom properties, but this hunk also introduces new sizing behavior for icons in.control.has-icons-* (emits new.control.has-icons-* .icon.is-(small|medium|large) selectors in compiled CSS). If this change is intentional, it should be called out in the PR description (and likely the changelog); otherwise it should be removed to keep the PR focused.
| ###Enhancements | ||
| - Use CSS custom properties (`var(--bulma-weight-*)`) in`has-text-weight-*` helper classes for runtime theming support |
CopilotAIFeb 20, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Changelog entry doesn’t follow the existing pattern of linking changes to an issue/PR number (e.g.- #3937: ...,- Fix #...) and introduces a new subsection name (### Enhancements) that isn’t used elsewhere in this changelog. Consider aligning with the established headings (e.g.### Improvements/### Bug Fixes) and referencing the relevant issue/PR (e.g.#3984).
| ###Enhancements | |
| - Use CSS custom properties (`var(--bulma-weight-*)`) in`has-text-weight-*` helper classes for runtime theming support | |
| ###Improvements | |
| -#3984:Use CSS custom properties (`var(--bulma-weight-*)`) in`has-text-weight-*` helper classes for runtime theming support |
Summary
var(--bulma-weight-*)) in all 6has-text-weight-*helper classes--bulma-weight-*CSS variables, consistent with how other Bulma components (e.g..title) already reference weight values--bulma-weight-*variables are already registered inlight.scss, so behavior is unchanged without customizationMotivation
The
has-text-weight-*helper classes previously compiled to static numeric values (e.g.font-weight: 800 !important), while other components like.titleusevar(--bulma-weight-extrabold). This inconsistency means overriding--bulma-weight-*CSS variables does not affect the helper classes. Relates to#3984.Changes
sass/helpers/typography.scss@use "../utilities/css-variables" as cv;has-text-weight-*classes fromiv.$weight-*tocv.getVar("weight-*")Compiled CSS output (all versions rebuilt)
Test plan
has-text-weight-*classes outputvar(--bulma-weight-*)in compiled CSSbulma.css,bulma-no-dark-mode.css,bulma-prefixed.css)bulma-no-helpersvariants correctly exclude these classes (no change):root { --bulma-weight-bold: 900; }is reflected in.has-text-weight-bold🤖 Generated withClaude Code