Color helpers

Bulma-Gomponents provides predefined modifier variables for all colors available in Bulma. These modifiers names (corresponding to Bulma classes) are formatted as:
b.[Target][Color][Variant][Invert], where:

Target...means...
TextSet text color
BackgroundSet background color
No targetSet component color - it should work on b.Button*, b.Icon, b.IconText, fa.FA, fa.Icon, fa.Li, b.Notification, b.Progress, b.ProgressIndeterminate, b.TCell, b.Tag, b.Message, b.Navbar, b.Panel, b.Help, b.Input*, b.Textarea, b.Select, b.File and b.Hero. Its use on icons and icon-related elements is specific to Bulma-Gomponents which transforms the color to the text-color equivalent for you.
Color...means...
White, Black, Dark, Light, Text, Link, Primary, Info, Success, Warning, Danger, BlackBis, BlackTer, GreyDarker, GreyDark, Grey, GreyLight, GreyLighter, WhiteTer or WhiteBis.Set the base color
Variant...means...
No variantThe base color
00, 05, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95 or 100The corresponding shade
Light, Dark, Soft, Bold or OnSchemeThe corresponding variant
Invert...means...
No invertThe base color
InvertInvert the color

Examples:

ExampleColor
b.PrimaryPrimary color for a component or element which supports colors
b.TextSuccess60Success color with 60% opacity on the text
b.BackgroundDangerLightDanger color in its light variant on the background
b.BackgroundInfo, b.TextInfoInvertInfo color on the background and a decent-looking color for the text

Variant generation

In addition to the predefined modifier variables in the b package, the color modifiers provide methods to generate corresponding variants:

MethodAction
.Base()Return the equivalent base color (for use within components or elements that support color)
.Text()Return the equivalent text color
.Background()Return the equivalent background color
.Normal()Remove any variant or shade on the color
.Light()Return the equivalent light variant
.Dark()Return the equivalent dark variant
.Soft()Return the equivalent soft variant
.Bold()Return the equivalent bold variant
.OnScheme()Return the equivalent on-scheme variant
.Shade(int)Return the equivalent shade variant (the integer value must be one of 0, 5, 10, ... 95, 100)
.Invert()Return the equivalent inverted color (for inverted colors, it returns the non-inverted equivalent; for base colors, it returns the same color because base colors have no inverted equivalent)

These methods allow easily generate custom components with adequate colors, for example:

Example
Code
func myDumbComponent(color b.Color, content ...any) e.Element {
	return e.Div(
		color.Light().Background(),
		color.Light().Text().Invert(),
		e.P(content...),
	),
}

func successAndDangerDumbComponent() []e.Element {
	return []e.Element{
		myDumbComponent(b.Success, "This is a success message"),
		myDumbComponent(b.Danger, "This is a danger message"),
	}
}
ResultHTML

This is a success message

This is a danger message

11 main colors

Bulma provides 4 base white/black colors and 7 primary colors, with "inverted" equivalents (which will look decent on the primary color):

ColorSample
White
Black
Light
Dark
Text
Link
Primary
Info
Success
Warning
Danger

The 7 primary colors also have the following variants, which you can check in the color palette below:

LightThe primary color at 90% lightness
DarkThe primary color at 20% lightness
SoftLight in light mode, dark in dark mode
BoldDark in light mode, light in dark mode

Shades of grey

The text and background colors may also be one of the following 9 shades of grey:

ColorSample
BlackBis
BlackTer
GreyDarker
GreyDark
Grey
GreyLight
GreyLighter
WhiteTer
WhiteBis

Color palette

For each of the 7 primary colors, when used on text or background, Bulma provides 21 shades with their inverted equivalents, 4 variants with their inverted equivalents and 1 variant without an inverted equivalent:

Variant
Text
...invert
Link
...invert
Primary
...invert
Info
...invert
Success
...invert
Warning
...invert
Danger
...invert
-
00
05
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
Dark
Light
Soft
Bold
OnScheme
Variant
Text
...invert
Link
...invert
Primary
...invert
Info
...invert
Success
...invert
Warning
...invert
Danger
...invert