Merge pull request #366 from BeAPI/feature/paragraph

add default paragraph

Author: ptesei

inc/Services/Editor.php

@@ -189,6 +189,32 @@ private function register_custom_block_styles() {
 		//              'label' => __( 'Reverse', 'beapi-frontend-framework' ),
 		//          ]
 		//      );
+
+		// Paragraph
+
+		register_block_style(
+			'core/paragraph',
+			[
+				'name'  => 'small',
+				'label' => __( 'Small', 'beapi-frontend-framework' ),
+			]
+		);
+
+		register_block_style(
+			'core/paragraph',
+			[
+				'name'  => 'large',
+				'label' => __( 'Large', 'beapi-frontend-framework' ),
+			]
+		);
+
+		register_block_style(
+			'core/paragraph',
+			[
+				'name'  => 'huge',
+				'label' => __( 'Huge', 'beapi-frontend-framework' ),
+			]
+		);
 	}
 
 	/**

src/scss/02-tools/_m-text.scss

@@ -0,0 +1,29 @@
+/**
+ * Text mixins
+ */
+
+@mixin text($name: default) {
+    @if $name == default {
+        font-size: var(--paragraph--font-size-default);
+        font-weight: 400;
+        line-height: var(--paragraph--line-height-default);
+    }
+
+    @if $name == small {
+        font-size: var(--paragraph--font-size-small);
+        font-weight: 400;
+        line-height: var(--paragraph--line-height-small);
+    }
+
+    @if $name == large {
+        font-size: var(--paragraph--font-size-large);
+        font-weight: 400;
+        line-height: var(--paragraph--line-height-large);
+    }
+
+    @if $name == huge {
+        font-size: var(--paragraph--font-size-huge);
+        font-weight: 400;
+        line-height: var(--paragraph--line-height-huge);
+    }
+}

src/scss/02-tools/tools.scss

@@ -39,3 +39,4 @@
 @import "./m-invisible-scrollbar";
 @import "./m-not-acf";
 @import "./m-rtl";
+@import "./m-text";

src/scss/03-base/_variables-css.scss

@@ -18,6 +18,21 @@
     --heading--line-height-h5: 1.25;
     --heading--line-height-h6: 1.25;
 
+    /*
+     * paragraph
+    */
+    // Font size
+    --paragraph--font-size-huge: 32px;
+    --paragraph--font-size-large: 24px;
+    --paragraph--font-size-small: 14px;
+    --paragraph--font-size-default: 16px;
+
+    // line height
+    --paragraph--line-height-huge: 1.4;
+    --paragraph--line-height-large: 1.4;
+    --paragraph--line-height-small: 1.4;
+    --paragraph--line-height-default: 1.4;
+
     /*
      * Spacing
      */

src/scss/06-blocks/core/_paragraph.scss

@@ -1,5 +1,19 @@
+/**
+ * Paragraph
+ */
+
+$text: "default", "small", "large", "huge";
+
 p {
+    @include text(default);
+
     &.has-background {
         padding: 20px;
     }
 }
+
+@each $style in $text {
+    p.is-style-#{$style} {
+        @include text(#{$style});
+    }
+}