@terrahq/wysiwyg 1.0.0

package/readme/blocks/Table.md

@@ -0,0 +1,199 @@
+# Table
+
+Here are the styling options for a table.
+
+## Editable options
+
+### header-font-styles
+
+This property sets the font styles for the table header.
+
+The header-font-styles property accepts the text-related styling options listed [here](../properties/Font.md).
+
+### header-cells-padding
+
+This property sets the padding for the table header.
+
+The value must be a numerical value expressed in any unit.
+
+### header-border
+
+This property sets the border for the table header.
+
+The border property accepts the border styling options listed [here](../properties/Border.md).
+
+### header-background
+
+This property sets the background for the table header.
+
+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))
+- Gradient (linear-gradient(90deg, map.get($color-options, i) 0%, map.get($color-options, h) 100%))
+
+### body-font-styles
+
+This property sets the font styles for the table body.
+
+The body-font-styles property accepts the text-related styling options listed [here](../properties/Font.md).
+
+### body-cells-padding
+
+This property sets the padding for the table body.
+
+The value must be a numerical value expressed in any unit.
+
+### body-border
+
+This property sets the border for the table body.
+
+The border property accepts the border styling options listed [here](../properties/Border.md).
+
+### body-background
+
+This property sets the background for the table body.
+
+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))
+- Gradient (linear-gradient(90deg, map.get($color-options, i) 0%, map.get($color-options, h) 100%))
+
+### odd-rows-background
+
+This property sets the background of the odd rows in the table body.
+
+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))
+- Gradient (linear-gradient(90deg, map.get($color-options, i) 0%, map.get($color-options, h) 100%))
+
+### odd-rows-text-color
+
+This property sets the color of the odd rows in the table body.
+
+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))
+
+### caption
+
+This property sets the font styles for the table caption.
+
+The caption property accepts the text-related styling options listed [here](../properties/Font.md).
+
+### margin-bottom
+
+This property sets the margin-bottom of the table.
+
+The value must be a numerical value expressed in any unit.
+
+## SCSS
+
+```scss
+.c--content-X {
+  @include make-content-modifier(
+    $table-options: (
+      "header-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,
+      ),
+      "body-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,
+      ),
+      "caption": (
+        "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,
+      ),
+      "margin-bottom": $measure * 4,
+      "header-cells-padding": $measure * 2,
+      "body-cells-padding": $measure $measure * 2,
+      "header-border": (
+        "border-radius": 1px,
+        "border-width": 1px,
+        "border-style": solid,
+        "border-color": map.get($color-options, a),
+      ),
+      "header-background": map.get($color-options, a),
+      "body-border": (
+        "border-radius": 1px,
+        "border-width": 1px,
+        "border-style": solid,
+        "border-color": map.get($color-options, a),
+      ),
+      "body-background": map.get($color-options, a),
+      "odd-rows-background": map.get($color-options, c),
+      "odd-rows-text-color": map.get($color-options, d),
+    )
+  );
+}
+```

package/readme/blocks/Utilities.md

@@ -0,0 +1,24 @@
+# Utilities
+
+Here are the styling options for utilities.
+
+## Editable options
+
+### media-text-aligned-margin-x
+
+This property sets the margin on X (left or right) of the media that is aligned with text.
+
+The value must be a numerical value expressed in any unit.
+
+
+## SCSS
+
+```scss
+    .c--content-X {
+        @include make-content-modifier (
+            $utilities-options: (
+                "media-text-aligned-margin-x": 24px
+            )
+        );
+    }
+```

package/readme/blocks/Video.md

@@ -0,0 +1,24 @@
+# Video
+
+Here are the styling options for a video.
+
+## Editable options
+
+### margin-bottom
+
+This property sets the margin-bottom of the video.
+
+The value must be a numerical value expressed in any unit.
+
+
+## SCSS
+
+```scss
+    .c--content-X {
+        @include make-content-modifier (
+            $video-options: (
+                "margin-bottom": $measure*4,
+            )
+        );
+    }
+```

package/readme/properties/Border.md

@@ -0,0 +1,52 @@
+# Border Options
+
+These properties are used to style the border of the blocks. If you want different styles for each border, you can achieve that by adding multiple values separated by spaces.
+
+## Editable Variables
+
+### border-color
+
+This property is used to set the border color.
+
+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))
+
+### border-radius
+
+Sets the border-radius for the component.
+
+The value must be a numerical value expressed in any unit.
+
+### border-style
+
+Sets the style of the border for the component.
+
+Values can include those accepted by the CSS 'border-style' property, such as 'solid,' 'dotted,' 'double,' and so on.
+
+### border-width
+
+Sets the border-width for the component.
+
+The value must be a numerical value expressed in any unit.
+
+## SCSS
+
+```scss
+.c--content-X {
+  @include make-content-modifier(
+    $border-options: (
+      "border-color": #f3f3f3,
+      "border-radius": $g-measure * 4,
+      "border-width": 2px,
+      "border-style": solid,
+    )
+  );
+}
+```

package/readme/properties/Custom.md

@@ -0,0 +1,54 @@
+# Custom Options
+This option is used when the content does not offer the specific functionality you are looking for. It serves as a way to add custom CSS code or set the same styles as another class existing in the project to the content or any of its elements.
+
+## Full-Content Styles
+If you wish to apply styles to the content, specify 'parent' as the target element and add the desired CSS property along with its value. To apply the same styles as an existing class in the project, use 'class' as the property.
+
+Here's an example of styling the content:
+
+```scss
+    .c--content-X {
+        @include make-content-modifier(
+            $custom-options: (
+                "parent": (
+                    "class": f--background-b,
+                    "width": 80%,
+                ),
+            )
+        );
+    }
+```
+
+## Block Styles
+If you wish to apply styles to a block inside the content, specify its class as the target element and add the desired CSS property along with its value. To apply the same styles as an existing class in the project, use 'class' as the property.
+
+Here's an example of styling a block inside the content:
+
+```scss
+    .c--content-X {
+        @include make-content-modifier(
+            $custom-options: (
+                "figure.wp-block-image": (
+                    "class": f--background-a,
+                    "max-width": 300px,
+                ),
+            )
+        );
+    }
+```
+
+## SCSS
+```scss
+    .c--content-X {
+        @include make-content-modifier(
+            $custom-options: (
+                "parent": (
+                    "border": 4px solid #000000,
+                ),
+                "figure.wp-block-image": (
+                    "class": f--color-b,
+                ),
+            )
+        );
+    }
+```

package/readme/properties/Font.md

@@ -0,0 +1,151 @@
+# Font Options
+
+These properties are used to style the text across all blocks.
+
+## Editable Variables
+
+### color
+
+This property set the text color.
+
+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))
+
+### font-family
+
+This property set the text font family.
+
+The value can be a font-family or a list of them, for example: "font-family": "'Instrument Sans', Arial, sans-serif".
+
+### font-size
+
+This property set the size of the font.
+
+The value must be a numerical value expressed in any unit.
+
+### font-style
+
+This property set the style of the font, if it's in italic, etc.
+
+Values can include those accepted by the CSS 'font-style' property.
+
+### font-weight
+
+This property set the weight of the font.
+
+Values can include those accepted by the CSS 'font-weight' property.
+
+### letter-spacing
+
+This property set the spacinc between each letters.
+
+The value must be a numerical value expressed in any unit or those accepted by the CSS 'letter-spacing' property.
+
+### line-height
+
+This property set the height of the line.
+
+The value must be a numerical value expressed in any unit or without unit.
+
+### max-lines
+
+This property set a maximum number of lines for the text. When we use it and the text exceed these lines, there'll be added "..." and the rest of text will not be shown.
+
+The value must be a numerical value without unit.
+
+### text-decoration
+
+This property set if we want any decoration in the text.
+
+Values can include those accepted by the CSS 'text-decoration' property.
+
+### text-decoration-color
+
+This property set the color of the text decoration. It'll only be notticeable if we set any text-decoration value.
+
+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))
+
+### text-underline-position
+
+This property set the position of the line if we set "text-decoration: undelrine".
+
+Values can include those accepted by the CSS 'text-underline-position' property.
+
+### className
+
+This property is used to apply styles from another existing class in the project. That class may include the font-family, font-size, line-height, button styles, and more.
+
+The value must be a class that exists and is imported in the stylesheet.
+
+### margin-bottom
+
+This property sets the margin-bottom of the styled text.
+
+The value must be a numerical value expressed in any unit.
+
+### margin-bottom-before-lists
+
+This property sets the margin-bottom of the styled text if the next block is a list. It's normally used for paragraphs.
+
+The value must be a numerical value expressed in any unit.
+
+### padding-top
+
+This property sets the padding-top of the styled text.
+
+The value must be a numerical value expressed in any unit.
+
+### text-align
+
+Used to vertically align text.
+
+The value for this property must be 'left,' 'center,' or 'right'.
+
+### bold-font-weight
+
+This property sets the weight of the font when we set it to bold in the backend.
+
+Values can include those accepted by the CSS 'font-weight' property.
+
+## SCSS
+
+```scss
+.c--content-X {
+  @include make-content-modifier(
+    $font-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/src/assets/vector-v.svg

@@ -0,0 +1,5 @@
+<svg width="720" height="595" viewBox="0 0 720 595" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:soft-light" opacity="0.59">
+<path d="M0.125256 782.091C0.125256 758.797 0.548007 735.502 0.125254 712.208C-0.297499 690.748 7.03021 677.542 21.8265 667.821C104.263 613.896 186.277 559.053 268.432 504.394C355.801 446.434 443.029 388.29 530.398 330.33C541.389 322.993 550.408 314.556 550.267 296.581C550.126 278.973 541.107 270.168 530.257 263.015C380.039 163.419 229.962 63.6387 79.7436 -36.1412C60.0151 -49.3474 40.4276 -62.9204 20.2764 -75.3929C6.32559 -84.0136 0.125227 -97.2197 0.266144 -117.029C0.547977 -166.185 -0.0156946 -215.342 0.266139 -264.314C0.547973 -292.928 11.6804 -301.365 31.5498 -288.159C113.705 -233.683 195.86 -178.841 278.014 -124.366C424.709 -26.9702 571.404 70.6085 718.1 168.004C765.871 199.736 813.642 231.467 861.413 263.015C872.263 270.168 881 278.789 881 296.948C881 315.106 871.981 323.176 860.99 330.33C585.073 513.749 309.439 696.984 33.6636 880.403C10.4122 895.811 0.407095 887.924 0.125259 853.808C-0.156577 829.963 0.125257 805.935 0.125256 782.091Z" fill="#FCFCFC"/>
+</g>
+</svg>

package/src/js/main.ts

@@ -0,0 +1,13 @@
+import './../scss/index.scss';
+// import './../scss/sanity.scss';
+// import './../scss/wp.scss';
+
+class TFCommon {
+    constructor() {
+        this.init();
+    }
+
+    init() {}
+}
+export default TFCommon;
+new TFCommon();

package/src/scss/_paths.scss

@@ -0,0 +1,5 @@
+$base-path: "/wordpress-starter/" !default;
+
+@function asset-url($path) {
+  @return "#{$base-path}/#{$path}";
+}