From 891e6e3cb7db58c1b14ee491a2ebadd4669609e8 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Wed, 26 Jun 2024 15:29:29 +0100 Subject: [PATCH] Add layout elements --- docs/_react/bulma-customizer/src/constants.js | 211 +++++++++++++----- 1 file changed, 153 insertions(+), 58 deletions(-) diff --git a/docs/_react/bulma-customizer/src/constants.js b/docs/_react/bulma-customizer/src/constants.js index 6b1b9291..92a67424 100644 --- a/docs/_react/bulma-customizer/src/constants.js +++ b/docs/_react/bulma-customizer/src/constants.js @@ -3,35 +3,35 @@ export const CSSVAR_KEYS = { { id: "scheme-h", description: - "Defines the Scheme's Hue, that is used for backgrounds, borders, and text, in both Light and Dark modes", + "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", + "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-l", description: "The lightness of backgrounds" }, { id: "light-invert-l", - description: "Defines the lightness of backgrounds' invert color", + description: "The lightness of backgrounds' invert color", }, { id: "dark-l", - description: "Defines the lightness of dark backgrounds", + description: "The lightness of dark backgrounds", }, { id: "dark-invert-l", - description: "Defines the lightness of dark backgrounds' invert color", + description: "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-l", description: "The lightness of soft colors" }, + { id: "bold-l", description: "The lightness of bold colors" }, { id: "soft-invert-l", - description: "Defines the lightness of soft color's invert color", + description: "The lightness of soft color's invert color", }, { id: "bold-invert-l", - description: "Defines the lightness of bold color's invert color", + description: "The lightness of bold color's invert color", }, { id: "hover-background-l-delta", @@ -75,115 +75,115 @@ export const CSSVAR_KEYS = { }, ], colors: [ - { id: "primary-h", description: "Defines the Primary color's hue" }, + { id: "primary-h", description: "The Primary color's hue" }, { id: "primary-s", - description: "Defines the Primary color's saturation", + description: "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: "primary-l", description: "The Primary color's lightness" }, + { id: "link-h", description: "The Link color's hue" }, + { id: "link-s", description: "The Link color's saturation" }, + { id: "link-l", description: "The Link color's lightness" }, + { id: "info-h", description: "The Info color's hue" }, + { id: "info-s", description: "The Info color's saturation" }, + { id: "info-l", description: "The Info color's lightness" }, + { id: "success-h", description: "The Success color's hue" }, { id: "success-s", - description: "Defines the Success color's saturation", + description: "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: "success-l", description: "The Success color's lightness" }, + { id: "warning-h", description: "The Warning color's hue" }, { id: "warning-s", - description: "Defines the Warning color's saturation", + description: "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" }, + { id: "warning-l", description: "The Warning color's lightness" }, + { id: "danger-h", description: "The Danger color's hue" }, + { id: "danger-s", description: "The Danger color's saturation" }, + { id: "danger-l", description: "The Danger color's lightness" }, ], typography: [ - { id: "family-primary", description: "Defines the Primary font family" }, + { id: "family-primary", description: "The Primary font family" }, { id: "family-secondary", - description: "Defines the Secondary font family", + description: "The Secondary font family", }, - { id: "family-code", description: "Defines the Code font family" }, - { id: "size-small", description: "Defines the Small font size" }, - { id: "size-normal", description: "Defines the Normal font size" }, - { id: "size-medium", description: "Defines the Medium font size" }, - { id: "size-large", description: "Defines the Large font size" }, - { id: "weight-light", description: "Defines the Light font weight" }, - { id: "weight-normal", description: "Defines the Normal font weight" }, - { id: "weight-medium", description: "Defines the Medium font weight" }, + { id: "family-code", description: "The Code font family" }, + { id: "size-small", description: "The Small font size" }, + { id: "size-normal", description: "The Normal font size" }, + { id: "size-medium", description: "The Medium font size" }, + { id: "size-large", description: "The Large font size" }, + { id: "weight-light", description: "The Light font weight" }, + { id: "weight-normal", description: "The Normal font weight" }, + { id: "weight-medium", description: "The Medium font weight" }, { id: "weight-semibold", - description: "Defines the Semibold font weight", + description: "The Semibold font weight", }, - { id: "weight-bold", description: "Defines the Bold font weight" }, + { id: "weight-bold", description: "The Bold font weight" }, { id: "weight-extrabold", - description: "Defines the Extrabold font weight", + description: "The Extrabold font weight", }, ], other: [ { id: "block-spacing", - description: "Defines the space below Block elements", + description: "The space below Block elements", }, { id: "duration", - description: "Defines the duration of Transitions and Animations", + description: "The duration of Transitions and Animations", }, { id: "easing", - description: "Defines the timing function of Transitions and Animations", + description: "The timing function of Transitions and Animations", }, - { id: "radius-small", description: "Defines the Small border radius" }, - { id: "radius", description: "Defines the Normal border radius" }, - { id: "radius-medium", description: "Defines the Medium border radius" }, - { id: "radius-large", description: "Defines the Large border radius" }, + { id: "radius-small", description: "The Small border radius" }, + { id: "radius", description: "The Normal border radius" }, + { id: "radius-medium", description: "The Medium border radius" }, + { id: "radius-large", description: "The Large border radius" }, { id: "radius-rounded", - description: "Defines the Rounded border radius", + description: "The Rounded border radius", }, { id: "speed", description: "" }, { id: "arrow-color", - description: "Defines the arrow color use for Select dropdowns", + description: "The arrow color use for Select dropdowns", }, { id: "loading-color", - description: "Defines the color of the loading spinner", + description: "The color of the loading spinner", }, { id: "burger-h", - description: "Defines the Hue of the burger element lines", + description: "The Hue of the burger element lines", }, { id: "burger-s", - description: "Defines the Saturation of the burger element lines", + description: "The Saturation of the burger element lines", }, { id: "burger-l", - description: "Defines the Lightness of the burger element lines", + description: "The Lightness of the burger element lines", }, { id: "burger-border-radius", - description: "Defines the border radius of the burger element", + description: "The border radius of the burger element", }, { id: "burger-gap", - description: "Defines the gap of the burger element", + description: "The gap of the burger element", }, { id: "burger-item-height", - description: "Defines the height of the burger element", + description: "The height of the burger element", }, { id: "burger-item-width", - description: "Defines the width of the burger element", + description: "The width of the burger element", }, ], generic: [ @@ -681,4 +681,99 @@ export const CSSVAR_KEYS = { }, { id: "input-radius", description: "The input element border radius" }, ], + columns: [{ id: "column-gap", description: "The gap between columns" }], + grid: [ + { id: "grid-gap", description: "The gap between Grid cells" }, + { + id: "grid-column-count", + description: "The number of columns in the Grid", + }, + { + id: "grid-column-min", + description: "The minimum width of Grid columns", + }, + { + id: "grid-cell-column-span", + description: "How many columns a Grid cell will span", + }, + { + id: "grid-cell-column-span", + description: "How many columns a Grid cell will span", + }, + { + id: "grid-cell-column-start", + description: "At which column a Grid cell will start", + }, + { + id: "grid-cell-column-start", + description: "At which column a Grid cell will start", + }, + ], + footer: [ + { + id: "footer-background-color", + description: "The footer background color", + }, + { id: "footer-color", description: "The footer text color" }, + { id: "footer-padding", description: "The footer padding" }, + ], + hero: [ + { id: "hero-body-padding", description: "The hero body padding" }, + { + id: "hero-body-padding-tablet", + description: "The hero body padding on Tablet viewports and wider", + }, + { + id: "hero-body-padding-small", + description: "The Small hero body padding", + }, + { + id: "hero-body-padding-medium", + description: "The Medium hero body padding", + }, + { + id: "hero-body-padding-large", + description: "The Large hero body padding", + }, + ], + media: [ + { id: "media-border-color", description: "The media element border color" }, + { id: "media-border-size", description: "The media element border size" }, + { id: "media-spacing", description: "The media element spacing" }, + { + id: "media-spacing-large", + description: "The Large media element spacing", + }, + { + id: "media-content-spacing", + description: "The media content element spacing", + }, + { + id: "media-level-1-spacing", + description: "The media element spacing when nested 1 level deep", + }, + { + id: "media-level-1-content-spacing", + description: "The media content element spacing when nested 1 level deep", + }, + { + id: "media-level-2-spacing", + description: "The media element spacing when nested 2 levels deep", + }, + ], + section: [ + { id: "section-padding", description: "The section element padding" }, + { + id: "section-padding-desktop", + description: "The section element padding on Desktop viewports and wider", + }, + { + id: "section-padding-medium", + description: "The Medium section element padding", + }, + { + id: "section-padding-large", + description: "The Large section element padding", + }, + ], };