@terrahq/wysiwyg 1.0.0

package/readme/blocks/Lists.md

@@ -0,0 +1,327 @@
+# Lists
+
+Here are the styling options for lists.
+
+## Editable options
+
+### number-font
+
+This property is used to determine the font of the numbers in ordered lists. If we want it to be the same as li items (font-styles), we don't have to specify anything.
+
+The number-font property accepts the text-related styling options listed [here](../properties/Font.md).
+
+### first-number-width
+
+This property is used to determine the width of the numbers in ordered lists, allowing for proper spacing to accommodate their size.
+
+The value must be a numerical value expressed in any unit.
+
+### first-level-number-color
+
+This property sets the color of the number in the first level of ordered lists.
+
+The possible values include:
+
+- Transparent (transparent)
+- A color name (red)
+- Hexadecimal color (#ffffff)
+- RGB color (rgb(255, 255, 255))
+- RGBA color (rgba(255, 255, 255, .5))
+- A variable referencing any of the above options ($color-a)
+- A color within a variable map (map.get($color-options, a))
+
+### first-level-artwork-width
+
+This property is used to set the width of the artwork in the first level of unordered lists.
+
+The value must be a numerical value expressed in any unit.
+
+### first-level-artwork-top
+
+This property is used to set the top of the artwork in the first level of unordered lists.
+
+The value must be a numerical value expressed in any unit.
+
+### first-level-artwork-image
+
+This property is used to set the image of the artwork in the first level of unordered lists.
+
+The value must be the url of an image.
+
+### first-level-artwork-background
+
+This property is used to set the background of the artwork in the first level of unordered lists.
+
+The possible values include:
+
+- Transparent (transparent)
+- A color name (red)
+- Hexadecimal color (#ffffff)
+- RGB color (rgb(255, 255, 255))
+- RGBA color (rgba(255, 255, 255, .5))
+- A variable referencing any of the above options ($color-a)
+- A color within a variable map (map.get($color-options, a))
+
+### first-level-artwork-border-radius
+
+This property is used to set the border-radius of the artwork in the first level of unordered lists.
+
+The value must be a numerical value expressed in any unit.
+
+### first-level-artwork-border-width
+
+This property is used to set the border-width of the artwork in the first level of unordered lists.
+
+The value must be a numerical value expressed in any unit.
+
+### first-level-artwork-border-color
+
+This property is used to set the border-color of the artwork in the first level of unordered lists.
+
+The possible values include:
+
+- Transparent (transparent)
+- A color name (red)
+- Hexadecimal color (#ffffff)
+- RGB color (rgb(255, 255, 255))
+- RGBA color (rgba(255, 255, 255, .5))
+- A variable referencing any of the above options ($color-a)
+- A color within a variable map (map.get($color-options, a))
+
+### second-level-number-color
+
+This property sets the color of the number in the second level of ordered lists. If we want it to be the same as that of the first level, we don't have to specify anything.
+
+The possible values include:
+
+- Transparent (transparent)
+- A color name (red)
+- Hexadecimal color (#ffffff)
+- RGB color (rgb(255, 255, 255))
+- RGBA color (rgba(255, 255, 255, .5))
+- A variable referencing any of the above options ($color-a)
+- A color within a variable map (map.get($color-options, a))
+
+### second-level-artwork-width
+
+This property is used to set the width of the artwork in the second level of unordered lists. If we want it to be the same as that of the first level, we don't have to specify anything.
+
+The value must be a numerical value expressed in any unit.
+
+### second-level-artwork-top
+
+This property is used to set the top of the artwork in the second level of unordered lists. If we want it to be the same as that of the first level, we don't have to specify anything.
+
+The value must be a numerical value expressed in any unit.
+
+### second-level-artwork-image
+
+This property is used to set the image of the artwork in the second level of unordered lists. If we want it to be the same as that of the first level, we don't have to specify anything.
+
+The value must be the url of an image.
+
+### second-level-artwork-background
+
+This property is used to set the background of the artwork in the second level of unordered lists. If we want it to be the same as that of the first level, we don't have to specify anything.
+
+The possible values include:
+
+- Transparent (transparent)
+- A color name (red)
+- Hexadecimal color (#ffffff)
+- RGB color (rgb(255, 255, 255))
+- RGBA color (rgba(255, 255, 255, .5))
+- A variable referencing any of the above options ($color-a)
+- A color within a variable map (map.get($color-options, a))
+
+### second-level-artwork-border-radius
+
+This property is used to set the border-radius of the artwork in the second level of unordered lists. If we want it to be the same as that of the first level, we don't have to specify anything.
+
+The value must be a numerical value expressed in any unit.
+
+### second-level-artwork-border-width
+
+This property is used to set the border-width of the artwork in the second level of unordered lists. If we want it to be the same as that of the first level, we don't have to specify anything.
+
+The value must be a numerical value expressed in any unit.
+
+### second-level-artwork-border-color
+
+This property is used to set the border-color of the artwork in the second level of unordered lists. If we want it to be the same as that of the first level, we don't have to specify anything.
+
+The possible values include:
+
+- Transparent (transparent)
+- A color name (red)
+- Hexadecimal color (#ffffff)
+- RGB color (rgb(255, 255, 255))
+- RGBA color (rgba(255, 255, 255, .5))
+- A variable referencing any of the above options ($color-a)
+- A color within a variable map (map.get($color-options, a))
+
+### third-level-number-color
+
+This property sets the color of the number in the third level of ordered lists. If we want it to be the same as that of the second level, we don't have to specify anything.
+
+The possible values include:
+
+- Transparent (transparent)
+- A color name (red)
+- Hexadecimal color (#ffffff)
+- RGB color (rgb(255, 255, 255))
+- RGBA color (rgba(255, 255, 255, .5))
+- A variable referencing any of the above options ($color-a)
+- A color within a variable map (map.get($color-options, a))
+
+### third-level-artwork-width
+
+This property is used to set the width of the artwork in the third level of unordered lists. If we want it to be the same as that of the second level, we don't have to specify anything.
+
+The value must be a numerical value expressed in any unit.
+
+### third-level-artwork-top
+
+This property is used to set the top of the artwork in the third level of unordered lists. If we want it to be the same as that of the second level, we don't have to specify anything.
+
+The value must be a numerical value expressed in any unit.
+
+### third-level-artwork-image
+
+This property is used to set the image of the artwork in the third level of unordered lists. If we want it to be the same as that of the second level, we don't have to specify anything.
+
+The value must be the url of an image.
+
+### third-level-artwork-background
+
+This property is used to set the background of the artwork in the third level of unordered lists. If we want it to be the same as that of the second level, we don't have to specify anything.
+
+The possible values include:
+
+- Transparent (transparent)
+- A color name (red)
+- Hexadecimal color (#ffffff)
+- RGB color (rgb(255, 255, 255))
+- RGBA color (rgba(255, 255, 255, .5))
+- A variable referencing any of the above options ($color-a)
+- A color within a variable map (map.get($color-options, a))
+
+### third-level-artwork-border-radius
+
+This property is used to set the border-radius of the artwork in the third level of unordered lists. If we want it to be the same as that of the second level, we don't have to specify anything.
+
+The value must be a numerical value expressed in any unit.
+
+### third-level-artwork-border-width
+
+This property is used to set the border-width of the artwork in the third level of unordered lists. If we want it to be the same as that of the second level, we don't have to specify anything.
+
+The value must be a numerical value expressed in any unit.
+
+### third-level-artwork-border-color
+
+This property is used to set the border-color of the artwork in the third level of unordered lists. If we want it to be the same as that of the second level, we don't have to specify anything.
+
+The possible values include:
+
+- Transparent (transparent)
+- A color name (red)
+- Hexadecimal color (#ffffff)
+- RGB color (rgb(255, 255, 255))
+- RGBA color (rgba(255, 255, 255, .5))
+- A variable referencing any of the above options ($color-a)
+- A color within a variable map (map.get($color-options, a))
+
+### margin-bottom
+
+This property sets the margin-bottom of the lists.
+
+The value must be a numerical value expressed in any unit.
+
+### nested-list-spacing
+
+This property sets the top spacing between a list item and its nested list. It helps control the visual separation between hierarchical levels in both ordered (<ol>) and unordered (<ul>) lists.
+
+By default, nested lists often have browser-defined vertical spacing. This property gives you precise control over that spacing.
+
+The value must be a numerical value expressed in any unit.
+
+### font-styles
+
+The font-styles property accepts the text-related styling options listed [here](../properties/Font.md).
+
+## SCSS
+
+```scss
+.c--content-X {
+  @include make-content-modifier(
+    $lists-options: (
+      "number-font": (
+        "color": #638c1d,
+        "font-family": arial,
+        "font-size": 2rem,
+        "font-style": italic,
+        "font-weight": 400,
+        "letter-spacing": 1px,
+        "line-height": 1.5,
+        "max-lines": 3,
+        "text-decoration": underline,
+        "text-decoration-color": #000000,
+        "text-underline-position": under,
+        "className": f--font-a,
+        "margin-bottom": 32px,
+        "margin-bottom-before-lists": 24px,
+        "padding-top": 8px,
+        "text-align": center,
+        "bold-font-weight": 800,
+      ),
+      "first-number-width": 14px,
+      "first-level-number-color": map.get($color-options, d),
+      "first-level-artwork-width": 8px,
+      "first-level-artwork-top": 8px,
+      "first-level-artwork-image": "(../img/artwork.png)",
+      "first-level-artwork-background": map.get($color-options, d),
+      "first-level-artwork-border-radius": 50%,
+      "first-level-artwork-border-width": 1px,
+      "first-level-artwork-border-color": map.get($color-options, d),
+      "second-level-number-color": map.get($color-options, d),
+      "second-level-artwork-width": 8px,
+      "second-level-artwork-top": 8px,
+      "second-level-artwork-image": "(../img/artwork.png)",
+      "second-level-artwork-background": map.get($color-options, d),
+      "second-level-artwork-border-radius": 50%,
+      "second-level-artwork-border-width": 1px,
+      "second-level-artwork-border-color": map.get($color-options, d),
+      "third-level-number-color": map.get($color-options, d),
+      "third-level-artwork-width": 8px,
+      "third-level-artwork-top": 8px,
+      "third-level-artwork-image": "(../img/artwork.png)",
+      "third-level-artwork-background": map.get($color-options, d),
+      "third-level-artwork-border-radius": 50%,
+      "third-level-artwork-border-width": 1px,
+      "third-level-artwork-border-color": map.get($color-options, d),
+      "margin-bottom": $measure * 4,
+      "nested-list-spacing": $measure,
+      "font-styles": (
+        "color": #638c1d,
+        "font-family": arial,
+        "font-size": 2rem,
+        "font-style": italic,
+        "font-weight": 400,
+        "letter-spacing": 1px,
+        "line-height": 1.5,
+        "max-lines": 3,
+        "text-decoration": underline,
+        "text-decoration-color": #000000,
+        "text-underline-position": under,
+        "className": f--font-a,
+        "margin-bottom": 32px,
+        "margin-bottom-before-lists": 24px,
+        "padding-top": 8px,
+        "text-align": center,
+        "bold-font-weight": 800,
+      ),
+    )
+  );
+}
+```

package/readme/blocks/Paragraphs.md

@@ -0,0 +1,35 @@
+# Paragraphs
+
+Here are the styling options for paragraphs.
+
+## Editable options
+
+The paragraphs block has only the text-related styling options listed [here](../properties/Font.md).
+
+## SCSS
+
+```scss
+    .c--content-X {
+        @include make-content-modifier (
+            $paragraphs-options: (
+                "color": #638c1d,
+                "font-family": arial,
+                "font-size": 2rem,
+                "font-style": italic,
+                "font-weight": 400,
+                "letter-spacing": 1px,
+                "line-height": 1.5,
+                "max-lines": 3,
+                "text-decoration": underline,
+                "text-decoration-color": #000000,
+                "text-underline-position": under,
+                "className": f--font-a,
+                "margin-bottom": 32px,
+                "margin-bottom-before-lists": 24px,
+                "padding-top": 8px,
+                "text-align": center,
+                "bold-font-weight": 800,
+            )
+        );
+    }
+```

package/readme/blocks/Quote.md

@@ -0,0 +1,94 @@
+# Quote
+
+Here are the styling options for a quote.
+
+## Editable options
+
+### padding
+
+This property sets the padding of the quote.
+
+The value must be a numerical value expressed in any unit.
+
+### margin-top
+
+This property sets the margin-top of the quote.
+
+The value must be a numerical value expressed in any unit.
+
+### margin-bottom
+
+This property sets the margin-bottom of the quote.
+
+The value must be a numerical value expressed in any unit.
+
+### border
+
+The border property accepts the border styling options listed [here](../properties/Border.md).
+
+### paragraph
+
+The paragraph property accepts the text-related styling options listed [here](../properties/Font.md).
+
+### cite
+
+The cite property accepts the text-related styling options listed [here](../properties/Font.md).
+
+
+## SCSS
+
+```scss
+    .c--content-X {
+        @include make-content-modifier (
+            $quote-options: (
+                "padding": $measure*5 0,
+                "margin-top": $measure,
+                "margin-bottom": $measure*5,
+                "border": (
+                    "border-color": red,
+                    "border-radius": 0,
+                    "border-style": solid,
+                    "border-width": 2px 0,
+                ),
+                "paragraph": (
+                    "color": #638c1d,
+                    "font-family": arial,
+                    "font-size": 2rem,
+                    "font-style": italic,
+                    "font-weight": 400,
+                    "letter-spacing": 1px,
+                    "line-height": 1.5,
+                    "max-lines": 3,
+                    "text-decoration": underline,
+                    "text-decoration-color": #000000,
+                    "text-underline-position": under,
+                    "className": f--font-a,
+                    "margin-bottom": 32px,
+                    "margin-bottom-before-lists": 24px,
+                    "padding-top": 8px,
+                    "text-align": center,
+                    "bold-font-weight": 800,
+                ),
+                "cite": (
+                    "color": #638c1d,
+                    "font-family": arial,
+                    "font-size": 2rem,
+                    "font-style": italic,
+                    "font-weight": 400,
+                    "letter-spacing": 1px,
+                    "line-height": 1.5,
+                    "max-lines": 3,
+                    "text-decoration": underline,
+                    "text-decoration-color": #000000,
+                    "text-underline-position": under,
+                    "className": f--font-a,
+                    "margin-bottom": 32px,
+                    "margin-bottom-before-lists": 24px,
+                    "padding-top": 8px,
+                    "text-align": center,
+                    "bold-font-weight": 800,
+                ),
+            )
+        );
+    }
+```

package/readme/blocks/Separator.md

@@ -0,0 +1,52 @@
+# Separator
+
+Here are the styling options for a separator.
+
+## Editable options
+
+### margin
+
+This property sets the margin of the separator.
+
+The value must be a numerical value expressed in any unit.
+
+### width
+
+This property sets the width of the separator.
+
+The value must be a numerical value expressed in any unit.
+
+### height
+
+This property sets the height of the separator.
+
+The value must be a numerical value expressed in any unit.
+
+### color
+
+This property set the color of the separator.
+
+Possible values include:
+
+- Transparent (transparent)
+- Color name (red)
+- Hexadecimal color (#ffffff)
+- RGB color (rgb(255, 255, 255))
+- RGBA color (rgba(255, 255, 255, .5))
+- A variable referencing any of the above options ($color-a)
+- A color within a variable map (map.get($color-options, a))
+
+## SCSS
+
+```scss
+.c--content-X {
+  @include make-content-modifier(
+    $separator-options: (
+      "margin": $measure * 5 auto,
+      "width": 60%,
+      "color": orange,
+      "height": 2px,
+    )
+  );
+}
+```