Add layout elements

diff --git a/docs/_react/bulma-customizer/src/constants.js b/docs/_react/bulma-customizer/src/constants.js
index 6b1b92914710e1ee224d7f69f9f0c7aa0033122b..92a67424acc5cfd167cef10fa1da19c773916171 100644 (file)
--- 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",
+    },
+  ],
 };