Bulma 0.8.0 颜色系统演进Light/Dark 双色机制、4 值颜色映射与 Dark Mode 的 Scheme 变量【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma本文围绕 Bulma 0.8.0 版本发布日志中关于颜色系统的六项核心更新展开每个主色新增*-light/*-dark双色版本、面板全色支持、表单控件加大、$colors映射升级为 4 值结构以及为Dark Mode铺路的$scheme-*变量体系。读完后你将掌握这些颜色函数与映射机制在 Bulma 源码中的真实实现如 mergeColorMaps()、bulmaFindLightColor()并能将 0.8.0 的设计思想延续到当前仓库的 CSS 变量主题系统sass/themes/dark.scss。0.8.0 版本更新总览Bulma 0.8.0 是一次以更多颜色与更大灵活性为主题的大版本更新包含多项 bug 修复与以下新功能原文记录于 2019-10-15-light-dark-colors.mdLight/Dark 双色每个主色primary、info、success、warning、danger各增加*-light与*-dark版本视觉观感改进调整部分基础色与box/card的阴影Panel 组件全色支持面板可以呈现任意主题色更大的表单控件控件与按钮高度提升到2.5em4 值颜色映射$colors映射的每个值可接受最多 4 个分量的嵌套映射由mergeColorMaps()统一处理面向 Dark Mode 的 Scheme 变量6 个新的$scheme-*派生变量取代代码库中散落的$white/$black引用。与本文档同步的完整变更明细见 CHANGELOG.md 中的 0.8.0 小节其中Initial variables与Derived variables两节逐条列出了该版本新增的派生变量清单如$primary-invert: findColorInvert($primary)、$primary-light: findLightColor($primary)等可作为升级排查时的对照清单。Light/Dark 双色两个颜色函数如何工作0.8.0 起每个主色都派生出一对 light/dark 版本二者由两个新增的 Sass 颜色函数计算findLightColor()找到一个颜色的浅色版本findDarkColor()找到一个颜色的深色版本。这两个颜色的用途分工明确light 色被button元素使用浅色背景 深色文字的幽灵按钮效果light 与 dark 色共同被message组件使用浅色标题/正文区 深色强调区生成明显更好看的彩色消息块。源码实现从亮度算法到色相保持当前仓库中这两个函数已演进为带bulma前缀的版本定义在 sass/utilities/functions.scss其核心逻辑值得拆开看// sass/utilities/functions.scss function bulmaFindLightColor($color, $l: 96%) { if meta.type-of($color) color { $l: 96%; if color.channel($color, lightness, $space: hsl) 96% { $l: color.channel($color, lightness, $space: hsl); } return color.change($color, $lightness: $l); } return $background; } function bulmaFindDarkColor($color, $base-l: 29%) { if meta.type-of($color) color { $luminance: bulmaColorLuminance($color); $luminance-delta: 0.53 - $luminance; $target-l: math.round($base-l $luminance-delta * 53); return color.change($color, $lightness: max($base-l, $target-l)); } return $text-strong; }从源码结构可以看出三点设计意图浅色版只改亮度、保留色相。bulmaFindLightColor()把 HSL 亮度强制拉到96%极浅但保留原始色相与饱和度因此is-info按钮的浅色背景仍带有该色系淡淡的蓝味而非纯灰深色版按相对亮度动态补偿。bulmaFindDarkColor()先通过bulmaColorLuminance()计算颜色的感知亮度加权0.2126R 0.7152G 0.0722B的 sRGB 相对亮度公式再以基准亮度29%为底、按亮度差做补偿——原本越亮的颜色压暗后的目标亮度越高保证深色版文字/边框在不同色系上对比度均衡对非颜色输入有兜底。两个函数在参数不是合法颜色时分别回退到$background与$text-strong配合bulmaRgba()等防御性写法使得自定义颜色映射传入意外值时不会直接编译失败。与之配套的bulmaFindColorInvert()则用同一套亮度计算决定反色文字亮度大于0.55时返回rgba(#000, 0.7)否则返回白色——这是主色上文字颜色的自动选择逻辑。视觉观感改进基础调色板与阴影0.8.0 同时微调了三个基础色的 HSL 取值Before / After对比数据来自原文与 CHANGELOG.md 0.8.0 节的Initial variables颜色变量调整前调整后$greenhsl(141, 71%, 48%)hsl(141, 53%, 53%)$cyanhsl(204, 86%, 53%)hsl(204, 71%, 53%)$redhsl(348, 100%, 61%)hsl(348, 86%, 61%)可以看出调整思路是普遍降低饱和度、略微提升亮度原取值饱和度过高71%~100%在按钮、消息块等大面积使用场景下显得刺眼降饱和后整体更沉稳。这些值统一定义在初始变量层 sass/utilities/initial-variables.scss当前仓库中该文件已随 v1 再次调参例如$green: hsl(153, 53%, 53%)遵循initial 层只放原始取值、derived 层再做语义映射的分层原则。除颜色外box与card的阴影也做了改进使卡片浮起感更柔和自然。阴影取值由派生变量$shadow-color见 sass/utilities/derived-variables.scss驱动后续主题化时也随之成为 CSS 变量。Panel 组件的全色支持panel组件在 0.8.0 起支持所有主题色即is-primary、is-info、is-success等修饰类均可用于面板。这类修饰类的生成依赖于$colors映射的完整性——只要某个颜色名存在于映射中颜色修饰类循环each $name, $value in $colors就会为全部组件批量产出对应的is-name规则。这正是4 值颜色映射下一节在组件层面的直接红利颜色系统对组件是数据驱动的新增颜色只需改映射无需逐个组件修改。更大的表单控件与回退配置0.8.0 将表单控件与按钮的高度提升到2.5em原为2.25em改善了触控与视觉比例。若需要恢复旧尺寸按原文给出的方式覆盖以下变量即可$control-height: 2.25em $control-padding-vertical: calc(0.375em - #{$control-border-width}) $control-padding-horizontal: calc(0.625em - #{$control-border-width}) $button-padding-vertical: calc(0.375em - #{$button-border-width}) $button-padding-horizontal: 0.75em注意这些变量内部相互引用$control-border-width/$button-border-width因此覆盖时应原样保留calc(... - #{$...-border-width})结构保证边框加在内侧、总高度不变。这段回退配置同时收录在 CHANGELOG.md 的 0.8.0 Larger form controls小节中。4 值颜色映射$colors的 1~4 值嵌套结构与mergeColorMaps()0.8.0 起$colorsSass 映射的每个值都可以是最多 4 个分量的嵌套映射顺序固定为(基础色, 反色, 浅色, 深色) // 例如 info - ($info, $info-invert, $info-light, $info-dark)当用户提供$custom-colors自定义映射时每个值可以给出1、2、3 或 4 个分量缺省的分量由 Bulma 自动计算。原文给出的完整示例如下$custom-colors: ( lime: ( lime, ), tomato: ( tomato, white, ), orange: ( $orange, $orange-invert, $orange-light, ), lavender: ( $lavender, $lavender-invert, $lavender-light, $lavender-dark, ), );源码实现mergeColorMaps()的分量补齐逻辑上述缺多少算多少的行为由 sass/utilities/functions.scss 中的mergeColorMaps($bulma-colors, $custom-colors)实现其核心分支为if meta.type-of($components) color { // 只给 1 个值invert/light/dark 全部自动计算 $color-base: $components; $color-invert: bulmaFindColorInvert($color-base); $color-light: bulmaFindLightColor($color-base); $color-dark: bulmaFindDarkColor($color-base); } else if meta.type-of($components) list { $color-base: list.nth($components, 1); if list.length($components) 3 { // 给了 4 个值原样采用 } else if list.length($components) 2 { // 给了 3 个值dark 用 bulmaFindDarkColor() 补齐 } else { // 给了 2 个值light、dark 均自动计算 } }对照源码可以得到一张用户输入 - 自动补齐的完整规则表提供的分量baseinvertlightdark1 个单个颜色采用bulmaFindColorInvert()计算bulmaFindLightColor()计算bulmaFindDarkColor()计算2 个base, invert采用采用计算计算3 个base, invert, light采用采用采用计算4 个全部采用采用采用采用此外函数内部还包含一层输入校验颜色名必须是字符串、分量必须是合法颜色或长度不小于 1 的列表、且base必须是真实颜色值meta.type-of($color-base) color才会执行map.merge()合并——这意味着同名键如info可以被自定义映射整体覆盖而非报错这也是自定义颜色可以覆盖内置颜色的实现基础。该映射在派生变量层的挂载点见 sass/utilities/derived-variables.scss内置$colorswhite / black / light / dark / text / primary / link / info / success / warning / danger与用户$custom-colors在此通过fn.mergeColorMaps()合并$shades同理合并$custom-shades。Scheme 变量面向 Dark Mode 的重构0.8.0 引入 6 个新的$scheme派生变量$scheme-main $scheme-main-bis $scheme-main-ter $scheme-invert $scheme-invert-bis $scheme-invert-ter它们的作用是取代代码库中所有$white与$black的直接引用。其默认值在 sass/utilities/derived-variables.scss 中定义// sass/utilities/derived-variables.scss $scheme-main: iv.$white !default; $scheme-main-bis: iv.$white-bis !default; $scheme-main-ter: iv.$white-ter !default; $scheme-invert: iv.$black !default; $scheme-invert-bis: iv.$black-bis !default; $scheme-invert-ter: iv.$black-ter !default;于是创建Dark Mode只需交换取值无需改动任何组件源码$scheme-main: $black $scheme-invert: $white // 其余 scheme 变量同理原文还点出了与之配套的关键决策0.8.0 起大部分代码库引用的是派生变量$text、$background、$border等而非初始变量$grey、$grey-lighter、$grey-darker等。在 sass/utilities/derived-variables.scss 中可以看到这一分层的落地形态$text: iv.$grey-dark !default; $text-weak: iv.$grey !default; $text-strong: iv.$grey-darker !default; $background: iv.$white-ter !default; $border: iv.$grey-lighter !default; $border-weak: iv.$grey-lightest !default;派生变量是语义层初始变量是原子层组件只依赖语义层因此更新派生变量会直接影响所有元素和组件——这正是 Dark Mode 能够一处交换、全局生效的原因。后续演进从 Sass 变量交换到 CSS 变量主题这套 scheme 思想在当前仓库中进一步演进为基于 CSS 变量的运行时主题系统官方深色主题 sass/themes/dark.scss 通过register-vars()mixin 注册--bulma-scheme-main-l: 11%等亮度变量并用generate-on-scheme-colors()为每个主色重新生成on-scheme色阶。触发方式同时支持media (prefers-color-scheme: dark)system-theme()mixin与[data-themedark]/.theme-dark选择器bulma-theme()mixin完整说明见 docs/documentation/features/dark-mode.md。对于只消费预编译 CSScss/bulma.css的使用者0.8.0 的 scheme 变量交换属于构建期定制而对于当前版本则可以直接通过 HTML 属性或 CSS 类在页面内切换主题两种方式在原理上一脉相承——都是把背景/文字/边框收敛到一组可整体翻转的变量上。版本兼容性说明原文结尾明确承诺0.8.0 版本与任何既有 Bulma 配置完全兼容升级遇到问题建议向仓库提交 issue 反馈。结合 CHANGELOG.md 0.8.0 小节可以看到该版本的新增项light/dark 色、scheme 变量、4 值映射均以扩展 默认值兜底方式落地——$custom-colors默认为null、mergeColorMaps()对未提供的分量自动补齐因此既有配置在升级后行为不变。需要注意的适用前提是本文所述的控件加大可回退颜色映射 4 值结构等结论均针对 0.8.0 版本当前仓库源码v1 线中的函数已统一加bulma前缀bulmaFindLightColor()等若你的项目基于当前版本定制颜色函数应以 sass/utilities/functions.scss 中的实际签名和 docs/documentation/features/dark-mode.md 的 CSS 变量主题方案为准。【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Bulma 0.8.0 颜色系统演进：Light/Dark 双色机制、4 值颜色映射与 Dark Mode 的 Scheme 变量
Bulma 0.8.0 颜色系统演进Light/Dark 双色机制、4 值颜色映射与 Dark Mode 的 Scheme 变量【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma本文围绕 Bulma 0.8.0 版本发布日志中关于颜色系统的六项核心更新展开每个主色新增*-light/*-dark双色版本、面板全色支持、表单控件加大、$colors映射升级为 4 值结构以及为Dark Mode铺路的$scheme-*变量体系。读完后你将掌握这些颜色函数与映射机制在 Bulma 源码中的真实实现如 mergeColorMaps()、bulmaFindLightColor()并能将 0.8.0 的设计思想延续到当前仓库的 CSS 变量主题系统sass/themes/dark.scss。0.8.0 版本更新总览Bulma 0.8.0 是一次以更多颜色与更大灵活性为主题的大版本更新包含多项 bug 修复与以下新功能原文记录于 2019-10-15-light-dark-colors.mdLight/Dark 双色每个主色primary、info、success、warning、danger各增加*-light与*-dark版本视觉观感改进调整部分基础色与box/card的阴影Panel 组件全色支持面板可以呈现任意主题色更大的表单控件控件与按钮高度提升到2.5em4 值颜色映射$colors映射的每个值可接受最多 4 个分量的嵌套映射由mergeColorMaps()统一处理面向 Dark Mode 的 Scheme 变量6 个新的$scheme-*派生变量取代代码库中散落的$white/$black引用。与本文档同步的完整变更明细见 CHANGELOG.md 中的 0.8.0 小节其中Initial variables与Derived variables两节逐条列出了该版本新增的派生变量清单如$primary-invert: findColorInvert($primary)、$primary-light: findLightColor($primary)等可作为升级排查时的对照清单。Light/Dark 双色两个颜色函数如何工作0.8.0 起每个主色都派生出一对 light/dark 版本二者由两个新增的 Sass 颜色函数计算findLightColor()找到一个颜色的浅色版本findDarkColor()找到一个颜色的深色版本。这两个颜色的用途分工明确light 色被button元素使用浅色背景 深色文字的幽灵按钮效果light 与 dark 色共同被message组件使用浅色标题/正文区 深色强调区生成明显更好看的彩色消息块。源码实现从亮度算法到色相保持当前仓库中这两个函数已演进为带bulma前缀的版本定义在 sass/utilities/functions.scss其核心逻辑值得拆开看// sass/utilities/functions.scss function bulmaFindLightColor($color, $l: 96%) { if meta.type-of($color) color { $l: 96%; if color.channel($color, lightness, $space: hsl) 96% { $l: color.channel($color, lightness, $space: hsl); } return color.change($color, $lightness: $l); } return $background; } function bulmaFindDarkColor($color, $base-l: 29%) { if meta.type-of($color) color { $luminance: bulmaColorLuminance($color); $luminance-delta: 0.53 - $luminance; $target-l: math.round($base-l $luminance-delta * 53); return color.change($color, $lightness: max($base-l, $target-l)); } return $text-strong; }从源码结构可以看出三点设计意图浅色版只改亮度、保留色相。bulmaFindLightColor()把 HSL 亮度强制拉到96%极浅但保留原始色相与饱和度因此is-info按钮的浅色背景仍带有该色系淡淡的蓝味而非纯灰深色版按相对亮度动态补偿。bulmaFindDarkColor()先通过bulmaColorLuminance()计算颜色的感知亮度加权0.2126R 0.7152G 0.0722B的 sRGB 相对亮度公式再以基准亮度29%为底、按亮度差做补偿——原本越亮的颜色压暗后的目标亮度越高保证深色版文字/边框在不同色系上对比度均衡对非颜色输入有兜底。两个函数在参数不是合法颜色时分别回退到$background与$text-strong配合bulmaRgba()等防御性写法使得自定义颜色映射传入意外值时不会直接编译失败。与之配套的bulmaFindColorInvert()则用同一套亮度计算决定反色文字亮度大于0.55时返回rgba(#000, 0.7)否则返回白色——这是主色上文字颜色的自动选择逻辑。视觉观感改进基础调色板与阴影0.8.0 同时微调了三个基础色的 HSL 取值Before / After对比数据来自原文与 CHANGELOG.md 0.8.0 节的Initial variables颜色变量调整前调整后$greenhsl(141, 71%, 48%)hsl(141, 53%, 53%)$cyanhsl(204, 86%, 53%)hsl(204, 71%, 53%)$redhsl(348, 100%, 61%)hsl(348, 86%, 61%)可以看出调整思路是普遍降低饱和度、略微提升亮度原取值饱和度过高71%~100%在按钮、消息块等大面积使用场景下显得刺眼降饱和后整体更沉稳。这些值统一定义在初始变量层 sass/utilities/initial-variables.scss当前仓库中该文件已随 v1 再次调参例如$green: hsl(153, 53%, 53%)遵循initial 层只放原始取值、derived 层再做语义映射的分层原则。除颜色外box与card的阴影也做了改进使卡片浮起感更柔和自然。阴影取值由派生变量$shadow-color见 sass/utilities/derived-variables.scss驱动后续主题化时也随之成为 CSS 变量。Panel 组件的全色支持panel组件在 0.8.0 起支持所有主题色即is-primary、is-info、is-success等修饰类均可用于面板。这类修饰类的生成依赖于$colors映射的完整性——只要某个颜色名存在于映射中颜色修饰类循环each $name, $value in $colors就会为全部组件批量产出对应的is-name规则。这正是4 值颜色映射下一节在组件层面的直接红利颜色系统对组件是数据驱动的新增颜色只需改映射无需逐个组件修改。更大的表单控件与回退配置0.8.0 将表单控件与按钮的高度提升到2.5em原为2.25em改善了触控与视觉比例。若需要恢复旧尺寸按原文给出的方式覆盖以下变量即可$control-height: 2.25em $control-padding-vertical: calc(0.375em - #{$control-border-width}) $control-padding-horizontal: calc(0.625em - #{$control-border-width}) $button-padding-vertical: calc(0.375em - #{$button-border-width}) $button-padding-horizontal: 0.75em注意这些变量内部相互引用$control-border-width/$button-border-width因此覆盖时应原样保留calc(... - #{$...-border-width})结构保证边框加在内侧、总高度不变。这段回退配置同时收录在 CHANGELOG.md 的 0.8.0 Larger form controls小节中。4 值颜色映射$colors的 1~4 值嵌套结构与mergeColorMaps()0.8.0 起$colorsSass 映射的每个值都可以是最多 4 个分量的嵌套映射顺序固定为(基础色, 反色, 浅色, 深色) // 例如 info - ($info, $info-invert, $info-light, $info-dark)当用户提供$custom-colors自定义映射时每个值可以给出1、2、3 或 4 个分量缺省的分量由 Bulma 自动计算。原文给出的完整示例如下$custom-colors: ( lime: ( lime, ), tomato: ( tomato, white, ), orange: ( $orange, $orange-invert, $orange-light, ), lavender: ( $lavender, $lavender-invert, $lavender-light, $lavender-dark, ), );源码实现mergeColorMaps()的分量补齐逻辑上述缺多少算多少的行为由 sass/utilities/functions.scss 中的mergeColorMaps($bulma-colors, $custom-colors)实现其核心分支为if meta.type-of($components) color { // 只给 1 个值invert/light/dark 全部自动计算 $color-base: $components; $color-invert: bulmaFindColorInvert($color-base); $color-light: bulmaFindLightColor($color-base); $color-dark: bulmaFindDarkColor($color-base); } else if meta.type-of($components) list { $color-base: list.nth($components, 1); if list.length($components) 3 { // 给了 4 个值原样采用 } else if list.length($components) 2 { // 给了 3 个值dark 用 bulmaFindDarkColor() 补齐 } else { // 给了 2 个值light、dark 均自动计算 } }对照源码可以得到一张用户输入 - 自动补齐的完整规则表提供的分量baseinvertlightdark1 个单个颜色采用bulmaFindColorInvert()计算bulmaFindLightColor()计算bulmaFindDarkColor()计算2 个base, invert采用采用计算计算3 个base, invert, light采用采用采用计算4 个全部采用采用采用采用此外函数内部还包含一层输入校验颜色名必须是字符串、分量必须是合法颜色或长度不小于 1 的列表、且base必须是真实颜色值meta.type-of($color-base) color才会执行map.merge()合并——这意味着同名键如info可以被自定义映射整体覆盖而非报错这也是自定义颜色可以覆盖内置颜色的实现基础。该映射在派生变量层的挂载点见 sass/utilities/derived-variables.scss内置$colorswhite / black / light / dark / text / primary / link / info / success / warning / danger与用户$custom-colors在此通过fn.mergeColorMaps()合并$shades同理合并$custom-shades。Scheme 变量面向 Dark Mode 的重构0.8.0 引入 6 个新的$scheme派生变量$scheme-main $scheme-main-bis $scheme-main-ter $scheme-invert $scheme-invert-bis $scheme-invert-ter它们的作用是取代代码库中所有$white与$black的直接引用。其默认值在 sass/utilities/derived-variables.scss 中定义// sass/utilities/derived-variables.scss $scheme-main: iv.$white !default; $scheme-main-bis: iv.$white-bis !default; $scheme-main-ter: iv.$white-ter !default; $scheme-invert: iv.$black !default; $scheme-invert-bis: iv.$black-bis !default; $scheme-invert-ter: iv.$black-ter !default;于是创建Dark Mode只需交换取值无需改动任何组件源码$scheme-main: $black $scheme-invert: $white // 其余 scheme 变量同理原文还点出了与之配套的关键决策0.8.0 起大部分代码库引用的是派生变量$text、$background、$border等而非初始变量$grey、$grey-lighter、$grey-darker等。在 sass/utilities/derived-variables.scss 中可以看到这一分层的落地形态$text: iv.$grey-dark !default; $text-weak: iv.$grey !default; $text-strong: iv.$grey-darker !default; $background: iv.$white-ter !default; $border: iv.$grey-lighter !default; $border-weak: iv.$grey-lightest !default;派生变量是语义层初始变量是原子层组件只依赖语义层因此更新派生变量会直接影响所有元素和组件——这正是 Dark Mode 能够一处交换、全局生效的原因。后续演进从 Sass 变量交换到 CSS 变量主题这套 scheme 思想在当前仓库中进一步演进为基于 CSS 变量的运行时主题系统官方深色主题 sass/themes/dark.scss 通过register-vars()mixin 注册--bulma-scheme-main-l: 11%等亮度变量并用generate-on-scheme-colors()为每个主色重新生成on-scheme色阶。触发方式同时支持media (prefers-color-scheme: dark)system-theme()mixin与[data-themedark]/.theme-dark选择器bulma-theme()mixin完整说明见 docs/documentation/features/dark-mode.md。对于只消费预编译 CSScss/bulma.css的使用者0.8.0 的 scheme 变量交换属于构建期定制而对于当前版本则可以直接通过 HTML 属性或 CSS 类在页面内切换主题两种方式在原理上一脉相承——都是把背景/文字/边框收敛到一组可整体翻转的变量上。版本兼容性说明原文结尾明确承诺0.8.0 版本与任何既有 Bulma 配置完全兼容升级遇到问题建议向仓库提交 issue 反馈。结合 CHANGELOG.md 0.8.0 小节可以看到该版本的新增项light/dark 色、scheme 变量、4 值映射均以扩展 默认值兜底方式落地——$custom-colors默认为null、mergeColorMaps()对未提供的分量自动补齐因此既有配置在升级后行为不变。需要注意的适用前提是本文所述的控件加大可回退颜色映射 4 值结构等结论均针对 0.8.0 版本当前仓库源码v1 线中的函数已统一加bulma前缀bulmaFindLightColor()等若你的项目基于当前版本定制颜色函数应以 sass/utilities/functions.scss 中的实际签名和 docs/documentation/features/dark-mode.md 的 CSS 变量主题方案为准。【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考