Add block documentation

docs/_data/variables/components/card.json

@@ -22,7 +22,7 @@
     "$card-radius": {
       "name": "$card-radius",
       "value": "0",
-      "type": "size"
+      "type": "string"
     },
     "$card-header-background-color": {
       "name": "$card-header-background-color",
@@ -90,6 +90,7 @@
     "$card-color",
     "$card-background-color",
     "$card-shadow",
+    "$card-radius",
     "$card-header-background-color",
     "$card-header-color",
     "$card-header-padding",
@@ -103,4 +104,4 @@
     "$card-media-margin"
   ],
   "file_path": "components/card.sass"
-}
+}

docs/_data/variables/components/modal.json

@@ -116,6 +116,13 @@
       "name": "$modal-card-body-padding",
       "value": "20px",
       "type": "size"
+    },
+    "$modal-breakpoint": {
+      "name": "$modal-breakpoint",
+      "value": "$tablet",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "769px"
     }
   },
   "list": [
@@ -139,7 +146,8 @@
     "$modal-card-foot-radius",
     "$modal-card-foot-border-top",
     "$modal-card-body-background-color",
-    "$modal-card-body-padding"
+    "$modal-card-body-padding",
+    "$modal-breakpoint"
   ],
   "file_path": "components/modal.sass"
 }

docs/_data/variables/components/navbar.json

@@ -227,6 +227,13 @@
       "type": "variable",
       "computed_type": "computed",
       "computed_value": "960px + (2 * $gap)"
+    },
+    "$navbar-colors": {
+      "name": "$navbar-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
@@ -267,7 +274,8 @@
     "$navbar-divider-background-color",
     "$navbar-divider-height",
     "$navbar-bottom-box-shadow-size",
-    "$navbar-breakpoint"
+    "$navbar-breakpoint",
+    "$navbar-colors"
   ],
   "file_path": "components/navbar.sass"
 }

docs/_data/variables/elements/button.json

@@ -163,6 +163,13 @@
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 86%)"
+    },
+    "$button-colors": {
+      "name": "$button-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
@@ -191,7 +198,8 @@
     "$button-disabled-opacity",
     "$button-static-color",
     "$button-static-background-color",
-    "$button-static-border-color"
+    "$button-static-border-color",
+    "$button-colors"
   ],
   "file_path": "elements/button.sass"
 }

docs/_data/variables/elements/notification.json

@@ -25,13 +25,33 @@
       "name": "$notification-padding",
       "value": "1.25rem 2.5rem 1.25rem 1.5rem",
       "type": "size"
+    },
+    "$notification-padding-ltr": {
+      "name": "$notification-padding-ltr",
+      "value": "1.25rem 2.5rem 1.25rem 1.5rem",
+      "type": "size"
+    },
+    "$notification-padding-rtl": {
+      "name": "$notification-padding-rtl",
+      "value": "1.25rem 1.5rem 1.25rem 2.5rem",
+      "type": "size"
+    },
+    "$notification-colors": {
+      "name": "$notification-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
     "$notification-background-color",
     "$notification-code-background-color",
     "$notification-radius",
-    "$notification-padding"
+    "$notification-padding",
+    "$notification-padding-ltr",
+    "$notification-padding-rtl",
+    "$notification-colors"
   ],
   "file_path": "elements/notification.sass"
 }

docs/_data/variables/elements/progress.json

@@ -25,13 +25,21 @@
       "name": "$progress-indeterminate-duration",
       "value": "1.5s",
       "type": "string"
+    },
+    "$progress-colors": {
+      "name": "$progress-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
     "$progress-bar-background-color",
     "$progress-value-background-color",
     "$progress-border-radius",
-    "$progress-indeterminate-duration"
+    "$progress-indeterminate-duration",
+    "$progress-colors"
   ],
   "file_path": "elements/progress.sass"
 }

docs/_data/variables/elements/table.json

@@ -109,6 +109,13 @@
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 96%)"
+    },
+    "$table-colors": {
+      "name": "$table-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
@@ -129,7 +136,8 @@
     "$table-row-active-background-color",
     "$table-row-active-color",
     "$table-striped-row-even-background-color",
-    "$table-striped-row-even-hover-background-color"
+    "$table-striped-row-even-hover-background-color",
+    "$table-colors"
   ],
   "file_path": "elements/table.sass"
 }

docs/_data/variables/elements/tag.json

@@ -25,13 +25,21 @@
       "name": "$tag-delete-margin",
       "value": "1px",
       "type": "size"
+    },
+    "$tag-colors": {
+      "name": "$tag-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
     "$tag-background-color",
     "$tag-color",
     "$tag-radius",
-    "$tag-delete-margin"
+    "$tag-delete-margin",
+    "$tag-colors"
   ],
   "file_path": "elements/tag.sass"
 }

docs/_data/variables/form/file.json

@@ -63,6 +63,11 @@
       "name": "$file-name-max-width",
       "value": "16em",
       "type": "size"
+    },
+    "$file-colors": {
+      "name": "$file-colors",
+      "value": "$form-colors",
+      "type": "variable"
     }
   },
   "list": [
@@ -75,7 +80,8 @@
     "$file-name-border-color",
     "$file-name-border-style",
     "$file-name-border-width",
-    "$file-name-max-width"
+    "$file-name-max-width",
+    "$file-colors"
   ],
   "file_path": "form/file.sass"
 }

docs/_data/variables/form/input-textarea.json

@@ -14,12 +14,18 @@
       "name": "$textarea-min-height",
       "value": "8em",
       "type": "size"
+    },
+    "$textarea-colors": {
+      "name": "$textarea-colors",
+      "value": "$form-colors",
+      "type": "variable"
     }
   },
   "list": [
     "$textarea-padding",
     "$textarea-max-height",
-    "$textarea-min-height"
+    "$textarea-min-height",
+    "$textarea-colors"
   ],
   "file_path": "form/input-textarea.sass"
 }

docs/_data/variables/form/select.json

@@ -0,0 +1,13 @@
+{
+  "by_name": {
+    "$select-colors": {
+      "name": "$select-colors",
+      "value": "$form-colors",
+      "type": "variable"
+    }
+  },
+  "list": [
+    "$select-colors"
+  ],
+  "file_path": "form/select.sass"
+}

docs/_data/variables/form/shared.json

@@ -1,5 +1,12 @@
 {
   "by_name": {
+    "$form-colors": {
+      "name": "$form-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
+    },
     "$input-color": {
       "name": "$input-color",
       "value": "$text-strong",
@@ -130,6 +137,7 @@
     }
   },
   "list": [
+    "$form-colors",
     "$input-color",
     "$input-background-color",
     "$input-border-color",

docs/_data/variables/form/tools.json

@@ -20,12 +20,18 @@
       "type": "variable",
       "computed_type": "size",
       "computed_value": "0.75rem"
+    },
+    "$label-colors": {
+      "name": "$label-colors",
+      "value": "$form-colors",
+      "type": "variable"
     }
   },
   "list": [
     "$label-color",
     "$label-weight",
-    "$help-size"
+    "$help-size",
+    "$label-colors"
   ],
   "file_path": "form/tools.sass"
 }

docs/_data/variables/helpers/spacing.json

@@ -0,0 +1,37 @@
+{
+  "by_name": {
+    "$spacing-shortcuts": {
+      "name": "$spacing-shortcuts",
+      "value": "(\"margin\": \"m\", \"padding\": \"p\")",
+      "type": "string"
+    },
+    "$spacing-directions": {
+      "name": "$spacing-directions",
+      "value": "(\"top\": \"t\", \"right\": \"r\", \"bottom\": \"b\", \"left\": \"l\")",
+      "type": "string"
+    },
+    "$spacing-horizontal": {
+      "name": "$spacing-horizontal",
+      "value": "\"x\"",
+      "type": "string"
+    },
+    "$spacing-vertical": {
+      "name": "$spacing-vertical",
+      "value": "\"y\"",
+      "type": "string"
+    },
+    "$spacing-values": {
+      "name": "$spacing-values",
+      "value": "(\"0\": 0, \"1\": 0.25rem, \"2\": 0.5rem, \"3\": 0.75rem, \"4\": 1rem, \"5\": 1.5rem, \"6\": 3rem)",
+      "type": "string"
+    }
+  },
+  "list": [
+    "$spacing-shortcuts",
+    "$spacing-directions",
+    "$spacing-horizontal",
+    "$spacing-vertical",
+    "$spacing-values"
+  ],
+  "file_path": "helpers/spacing.sass"
+}

docs/_data/variables/layout/hero.json

@@ -19,13 +19,21 @@
       "name": "$hero-body-padding-large",
       "value": "18rem 1.5rem",
       "type": "size"
+    },
+    "$hero-colors": {
+      "name": "$hero-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
     "$hero-body-padding",
     "$hero-body-padding-small",
     "$hero-body-padding-medium",
-    "$hero-body-padding-large"
+    "$hero-body-padding-large",
+    "$hero-colors"
   ],
   "file_path": "layout/hero.sass"
 }

docs/_data/variables/utilities/derived-variables.json

@@ -311,10 +311,8 @@
     },
     "$code": {
       "name": "$code",
-      "value": "$red",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(348, 86%, 61%)"
+      "value": "darken($red, 15%)",
+      "type": "compound"
     },
     "$code-background": {
       "name": "$code-background",

docs/_data/variables/utilities/initial-variables.json

@@ -249,6 +249,11 @@
       "name": "$variable-columns",
       "value": "true",
       "type": "boolean"
+    },
+    "$rtl": {
+      "name": "$rtl",
+      "value": "false",
+      "type": "boolean"
     }
   },
   "list": [
@@ -301,7 +306,8 @@
     "$radius-large",
     "$radius-rounded",
     "$speed",
-    "$variable-columns"
+    "$variable-columns",
+    "$rtl"
   ],
   "file_path": "utilities/initial-variables.sass"
 }