Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 11:54:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add Scheme vars

Browse Source
This commit is contained in:
Jeremy Thomas
2024-06-25 23:12:07 +01:00
parent 0014fc4e34
commit c638115ef2
7 changed files with 234 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
docs/_react/bulma-customizer/src/constants.js
View File

@@ -8,44 +8,95 @@ export const SUFFIX_TO_KIND = {
export const CSSVAR_KEYS = {
scheme: [
"scheme-h",
"scheme-s",
"light-l",
"light-invert-l",
"dark-l",
"dark-invert-l",
"soft-l",
"bold-l",
"soft-invert-l",
"bold-invert-l",
"hover-background-l-delta",
"active-background-l-delta",
"hover-border-l-delta",
"active-border-l-delta",
"hover-color-l-delta",
"active-color-l-delta",
"hover-shadow-a-delta",
"active-shadow-a-delta",
{
id: "scheme-h",
description:
"Defines the Scheme's Hue, that is used for backgrounds, borders, and text, in both Light and Dark modes",
},
{
id: "scheme-s",
description:
"Defines the Scheme's Saturation, that is used for backgrounds, borders, and text, in both Light and Dark modes",
},
{ id: "light-l", description: "Defines the lightness of backgrounds" },
{
id: "light-invert-l",
description: "Defines the lightness of backgrounds' invert color",
},
{ id: "dark-l", description: "Defines the lightness of dark backgrounds" },
{
id: "dark-invert-l",
description: "Defines the lightness of dark backgrounds' invert color",
},
{ id: "soft-l", description: "Defines the lightness of soft colors" },
{ id: "bold-l", description: "Defines the lightness of bold colors" },
{
id: "soft-invert-l",
description: "Defines the lightness of soft color's invert color",
},
{
id: "bold-invert-l",
description: "Defines the lightness of bold color's invert color",
},
{
id: "hover-background-l-delta",
description:
"Defines how much the lightness will change when a background is hovered",
},
{
id: "active-background-l-delta",
description:
"Defines how much the lightness will change when a background is active",
},
{
id: "hover-border-l-delta",
description:
"Defines how much the lightness will change when a border is hovered",
},
{
id: "active-border-l-delta",
description:
"Defines how much the lightness will change when a border is active",
},
{
id: "hover-color-l-delta",
description:
"Defines how much the lightness will change when a color is hovered",
},
{
id: "active-color-l-delta",
description:
"Defines how much the lightness will change when a color is active",
},
{
id: "hover-shadow-a-delta",
description:
"Defines how much the lightness will change when a shadow is hovered",
},
{
id: "active-shadow-a-delta",
description:
"Defines how much the lightness will change when a shadow is active",
},
],
colors: [
"primary-h",
"primary-s",
"primary-l",
"link-h",
"link-s",
"link-l",
"info-h",
"info-s",
"info-l",
"success-h",
"success-s",
"success-l",
"warning-h",
"warning-s",
"warning-l",
"danger-h",
"danger-s",
"danger-l",
"skeleton-lines-gap",
{ id: "primary-h", description: "Defines the Primary color's hue" },
{ id: "primary-s", description: "Defines the Primary color's saturation" },
{ id: "primary-l", description: "Defines the Primary color's lightness" },
{ id: "link-h", description: "Defines the Link color's hue" },
{ id: "link-s", description: "Defines the Link color's saturation" },
{ id: "link-l", description: "Defines the Link color's lightness" },
{ id: "info-h", description: "Defines the Info color's hue" },
{ id: "info-s", description: "Defines the Info color's saturation" },
{ id: "info-l", description: "Defines the Info color's lightness" },
{ id: "success-h", description: "Defines the Success color's hue" },
{ id: "success-s", description: "Defines the Success color's saturation" },
{ id: "success-l", description: "Defines the Success color's lightness" },
{ id: "warning-h", description: "Defines the Warning color's hue" },
{ id: "warning-s", description: "Defines the Warning color's saturation" },
{ id: "warning-l", description: "Defines the Warning color's lightness" },
{ id: "danger-h", description: "Defines the Danger color's hue" },
{ id: "danger-s", description: "Defines the Danger color's saturation" },
{ id: "danger-l", description: "Defines the Danger color's lightness" },
],
};