Fix: use CSS custom properties in has-text-weight-* helpers for runtime theming by kght6123 · Pull Request #4036 · jgthms/bulma

kght6123 · 2026-02-20T14:35:04Z

Summary

Replaces hard-coded SCSS variable values with CSS custom properties (var(--bulma-weight-*)) in all 6 has-text-weight-* helper classes
Enables runtime font weight customization by overriding --bulma-weight-* CSS variables, consistent with how other Bulma components (e.g. .title) already reference weight values
Fully backward compatible: --bulma-weight-* variables are already registered in light.scss, so behavior is unchanged without customization

Motivation

The has-text-weight-* helper classes previously compiled to static numeric values (e.g. font-weight: 800 !important), while other components like .title use var(--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

Added @use "../utilities/css-variables" as cv;
Changed all 6 has-text-weight-* classes from iv.$weight-* to cv.getVar("weight-*")

Compiled CSS output (all versions rebuilt)

/* Before */
.has-text-weight-extrabold { font-weight: 800 !important; }

/* After */
.has-text-weight-extrabold { font-weight: var(--bulma-weight-extrabold) !important; }

Test plan

All 6 has-text-weight-* classes output var(--bulma-weight-*) in compiled CSS
All CSS versions rebuilt (bulma.css, bulma-no-dark-mode.css, bulma-prefixed.css)
bulma-no-helpers variants correctly exclude these classes (no change)
Overriding :root { --bulma-weight-bold: 900; } is reflected in .has-text-weight-bold
Default behavior unchanged when no CSS variables are overridden

Resolves jgthms#3985 The .control.has-icons-left .icon selector (0,3,0) was overriding the .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 applied directly to icons within these controls correctly set their dimensions. For example, .control.has-icons-left .icon.is-small (0,4,0) will now correctly override the base styles for icons in controls.

Resolves jgthms#3985 The .control.has-icons-left .icon selector (0,3,0) was overriding the .icon.is-small selector (0,2,0) due to higher specificity. This prevented direct application of size modifiers like .is-small to 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-large classes applied directly to icons within these controls correctly set their dimensions, aligning with the Bulma Sass styleguide.

…me theming Replace hard-coded SCSS variable values with CSS custom properties in all `has-text-weight-*` helper classes. This allows users to customize font weights at runtime by overriding `--bulma-weight-*` CSS variables, consistent with 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 to jgthms#3984 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

This PR aims to make the has-text-weight-* helper classes themeable at runtime by switching their font-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.scss so all 6 has-text-weight-* helpers use cv.getVar("weight-*") instead of iv.$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	Switch `has-text-weight-*` helpers to use CSS custom properties via `cv.getVar`.
sass/form/tools.scss	Adds new `.control.has-icons-* .icon.is-(small
css/bulma.css	Rebuilt output: helper weights now use `var(--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.

Copilot · 2026-02-20T14:40:06Z

+        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");


The new &.is-small/medium/large rules override the icon container height/width inside .control.has-icons-*. Because the icon is absolutely positioned with top: 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 to input-height (so the icon stays centered) and only varying font-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.

Suggested change

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");

Copilot · 2026-02-20T14:40:06Z

+      // 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");
+      }


This PR is described as only changing has-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.

Copilot · 2026-02-20T14:40:07Z

+### Enhancements
+
+- Use CSS custom properties (`var(--bulma-weight-*)`) in `has-text-weight-*` helper classes for runtime theming support


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).

Suggested change

### 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

google-labs-jules Bot and others added 5 commits July 7, 2025 21:38

Copilot AI review requested due to automatic review settings February 20, 2026 14:35

Copilot started reviewing on behalf of kght6123 February 20, 2026 14:35 View session

Copilot AI reviewed Feb 20, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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#4036
kght6123 wants to merge 5 commits into
jgthms:mainfrom
kght6123:fix/has-text-weight-css-vars

kght6123 commented Feb 20, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		### Enhancements

		- Use CSS custom properties (`var(--bulma-weight-)`) in `has-text-weight-` helper classes for runtime theming support

Uh oh!

Conversation

kght6123 commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Motivation

Changes

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kght6123 commented Feb 20, 2026 •

edited

Loading