@terrahq/wysiwyg 1.0.0

package/src/scss/framework/utilities/_align-items.scss

@@ -0,0 +1,39 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+$align-items-values:(
+  // baseline: baseline,
+  // stretch:stretch,
+  // flex-start:flex-start,
+  flex-end:flex-end,
+  center:center
+);
+
+$align-items-breakpoints: (
+  all: $all,
+  // desktop: $desktop,
+  // laptop: $laptop,
+  // tabletl: $tabletl,
+  // tabletm: $tabletm,
+  // tablets: $tablets,
+  // mobile: $mobile,
+);
+
+@mixin align-items-utility($align-prop,$breakpoints){
+  @each $breakpoint-name, $breakpoint-value in $breakpoints {
+    @each $name, $property in $align-prop {
+      $class-name: if($breakpoint-name == all, "", "-#{$breakpoint-name}");
+      .u--align-items#{$class-name}-#{$name}{
+        @if($breakpoint-value == 0) {
+          align-items: $property;
+        } @else {
+          @media screen and ($viewport-type: $breakpoint-value) {
+            align-items: $property;
+          }
+        }
+          
+      }
+    }
+  }
+}
+
+@include align-items-utility($align-items-values,$align-items-breakpoints)

package/src/scss/framework/utilities/_aspect-ratio.scss

@@ -0,0 +1,55 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+@mixin make-ar($size: default) {
+    display: block;
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    @if $size == "default" {
+    } @else {
+        aspect-ratio: $size;
+    }
+}
+
+$ar-sizes: (
+    // a: 1.77777777, //* 16/9
+    // b: 1.33333333, //* 4/3
+    // c: 1.5, //* 3/2
+    d: 1, //* 1/1
+    // e: 0.75, //* 3/4
+    // f: 0.33333333, //* 1/3
+);
+$ar-breakpoints: (
+   all: $all,
+//   desktop: $desktop,
+//   laptop: $laptop,
+//   tabletl: $tabletl,
+//   tabletm: $tabletm,
+//   tablets: $tablets,
+//   mobile: $mobile,
+);
+
+@mixin ar-sizes($ar, $breakpoints) {
+    @each $breakpoint-name, $breakpoint-value in $breakpoints {
+        @if ($breakpoint-value == 0) {
+            .u--ar {
+                @include make-ar();
+            }
+            @each $name, $size in $ar {
+                .u--ar-#{$name} {
+                    @include make-ar($size);
+                }
+            }
+        } @else {
+            @media screen and ($viewport-type: $breakpoint-value) {
+                @each $name, $size in $ar {
+                    .u--ar-#{$breakpoint-name}-#{$name} {
+                        @include make-ar($size);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@include ar-sizes($ar-sizes, $ar-breakpoints);

package/src/scss/framework/utilities/_display.scss

@@ -0,0 +1,46 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+$display-values: (
+    block: block,
+    // hidden:hidden,
+    none: none,
+    // inline-block:inline-block,
+    // inline:inline,
+    // table:table,
+    // table-cell:table-cell,
+    // table-row:table-row,
+    flex: flex,
+    // inline-flex:inline-flex
+);
+
+$display-breakpoints: (
+   all: $all,
+  // desktop: $desktop,
+  // laptop: $laptop,
+  tabletl: $tabletl,
+  tabletm: $tabletm,
+  // tablets: $tablets,
+  // mobile: $mobile,
+);
+
+@mixin display-utility($display-prop, $breakpoints) {
+    @each $breakpoint-name, $breakpoint-value in $breakpoints {
+        @if ($breakpoint-value == 0) {
+            @each $name, $property in $display-prop {
+                .u--display-#{$name} {
+                    display: $property;
+                }
+            }
+        } @else {
+            @media screen and ($viewport-type: $breakpoint-value) {
+                @each $name, $property in $display-prop {
+                    .u--display-#{$breakpoint-name}-#{$name} {
+                        display: $property;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@include display-utility($display-values, $display-breakpoints);

package/src/scss/framework/utilities/_flex-direction.scss

@@ -0,0 +1,42 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+$flex-direction-values:(
+  // baseline: baseline,
+  // stretch:stretch,
+  // flex-start:flex-start,
+  // flex-end:flex-end,
+  //row:row
+  column: column
+);
+
+$flex-direction-breakpoints: (
+  all: $all,
+  // desktop: $desktop,
+  // laptop: $laptop,
+  // tabletl: $tabletl,
+  // tabletm: $tabletm,
+  // tablets: $tablets,
+  // mobile: $mobile,
+);
+
+@mixin flex-direction-utility($align-prop,$breakpoints){
+  @each $breakpoint-name, $breakpoint-value in $breakpoints {
+    @if($breakpoint-value == 0) {
+      @each $name, $property in $align-prop {
+        .u--flex-direction-#{$name}{
+            flex-direction:$property;
+        }
+      }
+    }@else{
+      @media screen and ($viewport-type: $breakpoint-value) {
+        @each $name, $property in $align-prop {
+            .u--flex-direction-#{$breakpoint-name}-#{$name}{
+                flex-direction:$property;
+            }
+        }
+      }
+    }
+  }
+}
+
+@include flex-direction-utility($flex-direction-values,$flex-direction-breakpoints)

package/src/scss/framework/utilities/_font-style.scss

@@ -0,0 +1,38 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+$font-style-values: (
+  italic: italic,
+  // normal: normal,
+);
+
+$font-style-breakpoints: (
+  all: $all,
+  // desktop: $desktop,
+  // laptop: $laptop,
+  // tabletl: $tabletl,
+  // tabletm: $tabletm,
+  // tablets: $tablets,
+  // mobile: $mobile,
+);
+  
+  @mixin font-style-utility($font-style-prop, $breakpoints) {
+    @each $breakpoint-name, $breakpoint-value in $breakpoints {
+      @if ($breakpoint-value == 0) {
+        @each $name, $property in $font-style-prop {
+          .u--font-style-#{$name} {
+            font-style: $property;
+          }
+        }
+      } @else {
+        @media screen and ($viewport-type: $breakpoint-value) {
+          @each $name, $property in $font-style-prop {
+            .u--font-style-#{$breakpoint-name}-#{$name} {
+              font-style: $property;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  @include font-style-utility($font-style-values, $font-style-breakpoints);

package/src/scss/framework/utilities/_font-weight.scss

@@ -0,0 +1,45 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+$font-weight-values: (
+  // thin: 100,
+  // extralight: 200,
+  // light: 300,
+  // regular: 400,
+  // medium: 500,
+  // semibold: 600,
+  bold: 700,
+  // extrabold: 800,
+  // black: 900,
+);
+
+$font-weight-breakpoints: (
+  all: $all,
+  // desktop: $desktop,
+  // laptop: $laptop,
+  // tabletl: $tabletl,
+  // tabletm: $tabletm,
+  // tablets: $tablets,
+  // mobile: $mobile,
+);
+  
+  @mixin font-weight-utility($font-weight-prop, $breakpoints) {
+    @each $breakpoint-name, $breakpoint-value in $breakpoints {
+      @if ($breakpoint-value == 0) {
+        @each $name, $property in $font-weight-prop {
+          .u--font-#{$name} {
+            font-weight: $property;
+          }
+        }
+      } @else {
+        @media screen and ($viewport-type: $breakpoint-value) {
+          @each $name, $property in $font-weight-prop {
+            .u--font-#{$breakpoint-name}-#{$name} {
+              font-weight: $property;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  @include font-weight-utility($font-weight-values, $font-weight-breakpoints);

package/src/scss/framework/utilities/_justify-content.scss

@@ -0,0 +1,42 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+$justify-content-properties:(
+  space-between: space-between,
+  // space-around:space-around,
+  // space-evenly:space-evenly,
+  // flex-start:flex-start,
+  flex-end:flex-end,
+   center:center
+);
+
+$justify-content-breakpoints: (
+  all: $all,
+  // desktop: $desktop,
+  // laptop: $laptop,
+  // tabletl: $tabletl,
+  // tabletm: $tabletm,
+   tablets: $tablets,
+  // mobile: $mobile,
+);
+
+@mixin justify-content-utility($justify-prop,$breakpoints){
+  @each $breakpoint-name, $breakpoint-value in $breakpoints {
+    @if($breakpoint-value == 0) {
+      @each $name, $property in $justify-prop {
+        .u--justify-content-#{$name}{
+          justify-content:$property;
+        }
+      }
+    }@else{
+      @media screen and ($viewport-type: $breakpoint-value) {
+        @each $name, $property in $justify-prop {
+            .u--justify-content-#{$breakpoint-name}-#{$name}{
+              justify-content:$property;
+            }
+        }
+      }
+    }
+  }
+}
+
+@include justify-content-utility($justify-content-properties,$justify-content-breakpoints)

package/src/scss/framework/utilities/_order.scss

@@ -0,0 +1,38 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+$order-values: (
+    first,
+    1,
+);
+
+$order-breakpoints: (
+    all: $all,
+    //   desktop: $desktop,
+    //   laptop: $laptop,
+    //   tabletl: $tabletl,
+    tabletm: $tabletm,
+    //   tablets: $tablets,
+    //   mobile: $mobile,,
+);
+
+@mixin order-utility($order-values, $breakpoints) {
+    @each $breakpoint-name, $breakpoint-value in $breakpoints {
+      @each $value in $order-values {
+        $order: if($value == first, -1, $value);
+  
+        $class-name: if($breakpoint-name == all, "", "-#{$breakpoint-name}");
+  
+        .u--order#{$class-name}-#{$value} {
+          @if ($breakpoint-name == all) {
+            order: #{$order};
+          } @else {
+            @media screen and ($viewport-type: #{$breakpoint-value}) {
+              order: #{$order};
+            }
+          }
+        }
+      }
+    }
+  }
+
+@include order-utility($order-values, $order-breakpoints);

package/src/scss/framework/utilities/_overflow.scss

@@ -0,0 +1,38 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+$overflow-values:(
+  hidden: hidden,
+  // auto: auto,
+);
+
+$overflow-breakpoints: (
+  all: $all,
+  // desktop: $desktop,
+  // laptop: $laptop,
+  // tabletl: $tabletl,
+  // tabletm: $tabletm,
+  // tablets: $tablets,
+  // mobile: $mobile,
+);
+
+@mixin overflow-utility($overflow-prop,$breakpoints){
+  @each $breakpoint-name, $breakpoint-value in $breakpoints {
+    @if($breakpoint-value == 0) {
+      @each $name, $property in $overflow-prop {
+        .u--overflow-#{$name}{
+          overflow:$property;
+        }
+      }
+    }@else{
+      @media screen and ($viewport-type: $breakpoint-value) {
+        @each $name, $property in $overflow-prop {
+          .u--overflow-#{$breakpoint-name}-#{$name}{
+            overflow:$property;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include overflow-utility($overflow-values,$overflow-breakpoints)

package/src/scss/framework/utilities/_position.scss

@@ -0,0 +1,42 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+$position-values:(
+  relative:relative,
+  absolute:absolute,
+  fixed:fixed,
+  sticky:sticky,
+  // inherit:inherit,
+  // unset:unset
+);
+
+$position-breakpoints: (
+  all: $all,
+  // desktop: $desktop,
+  // laptop: $laptop,
+  // tabletl: $tabletl,
+  // tabletm: $tabletm,
+  // tablets: $tablets,
+  // mobile: $mobile,
+);
+
+@mixin position-utility($position-prop,$breakpoints){
+  @each $breakpoint-name, $breakpoint-value in $breakpoints {
+    @if($breakpoint-value == 0) {
+      @each $name, $property in $position-prop {
+        .u--position-#{$name}{
+          position:$property;
+        }
+      }
+    }@else{
+      @media screen and ($viewport-type: $breakpoint-value) {
+        @each $name, $property in $position-prop {
+          .u--position-#{$breakpoint-name}-#{$name}{
+            position:$property;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include position-utility($position-values,$position-breakpoints)

package/src/scss/framework/utilities/_spacing.scss

@@ -0,0 +1,66 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+$space-values : (
+  // 0,
+  // 2,
+  // 3,
+  // 4,
+  // 5,
+  // 7,
+  // 8,
+  // 10,
+  15,
+  ) !default;
+
+  $space-prefixes : (
+    // p  : padding,
+    pt : padding-top,
+    // pr : padding-right,
+    pb : padding-bottom,
+    // pl : padding-left,
+    // m  : margin,
+    // mt : margin-top,
+    // mr : margin-right,
+    // mb : margin-bottom,
+    // ml : margin-left,
+  ) !default;
+
+  $space-breakpoints: (
+    all: $all,
+    // desktop: $desktop,
+    // laptop: $laptop,
+    // tabletl: $tabletl,
+    // tabletm: $tabletm,
+    // tablets: $tablets,
+    // mobile: $mobile,
+  );
+
+  @mixin make-spaces($values, $prefixes, $breakpoints) {
+
+    @each $breakpoint-name, $breakpoint-value in $breakpoints {
+      // if xs value = 0, set it global without media queries
+      @if($breakpoint-value == 0) {
+        @each $attr-short, $attr-long in $prefixes {
+          @each $value in $values {
+            .u--#{$attr-short}-#{$value} {
+              #{$attr-long}: calc(#{$measure} * #{$value});
+            }
+          }
+        }
+      }
+      // breakpoint values that not equal to 0
+      @else {
+        @media screen and ($viewport-type: $breakpoint-value) {
+          @each $attr-short, $attr-long in $prefixes {
+            @each $value in $values {
+              .u--#{$attr-short}-#{$breakpoint-name}-#{$value} {
+                #{$attr-long}: calc(#{$measure} * #{$value});
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  @include make-spaces($space-values, $space-prefixes,$space-breakpoints);

package/src/scss/framework/utilities/_text-align.scss

@@ -0,0 +1,40 @@
+@use "@scss/framework/_var/_vars.scss" as *;
+
+$text-align-values: (
+  // left: left,
+  center: center,
+  // right:right,
+  // justify:justify,
+);
+
+$text-align-breakpoints: (
+  all: $all,
+  // desktop: $desktop,
+  // laptop: $laptop,
+  // tabletl: $tabletl,
+  // tabletm: $tabletm,
+  // tablets: $tablets,
+  // mobile: $mobile,
+);
+
+@mixin text-align-utility($text-prop, $breakpoints) {
+  @each $breakpoint-name, $breakpoint-value in $breakpoints {
+    @if ($breakpoint-value == 0) {
+      @each $name, $property in $text-prop {
+        .u--text-align-#{$name} {
+          text-align: $property;
+        }
+      }
+    } @else {
+      @media screen and ($viewport-type: $breakpoint-value) {
+        @each $name, $property in $text-prop {
+          .u--text-align-#{$breakpoint-name}-#{$name} {
+            text-align: $property;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include text-align-utility($text-align-values, $text-align-breakpoints);

package/src/scss/framework/utilities/_utilities.scss

@@ -0,0 +1,12 @@
+@forward './align-items.scss';
+@forward './aspect-ratio.scss';
+@forward './display.scss';
+@forward './flex-direction.scss';
+@forward './font-style.scss';
+@forward './font-weight.scss';
+@forward './justify-content.scss';
+@forward './order.scss';
+@forward './overflow.scss';
+@forward './position.scss';
+@forward './spacing.scss';
+@forward './text-align.scss';

package/src/scss/global-content/_global-mixins/_global-mixins.scss

@@ -0,0 +1,2 @@
+@forward "./helpers/helpers";
+@forward "./properties/properties";

package/src/scss/global-content/_global-mixins/blocks/_content-block-btn.scss

@@ -0,0 +1,31 @@
+@use "sass:map";
+
+@use "../_global-mixins" as *;
+
+$btn-wysiwyg-options: (
+    "className": null,
+    "margin-bottom": null,
+);
+
+@mixin block-btn-wp-modifier ($options) {
+    @each $property, $value in $options {
+        @if map.has-key($btn-wysiwyg-options, $property) {
+            @if $value {
+                @if $property == "className" {
+                    .wp-block-buttons,
+                    .wp-block-button{
+                        .wp-block-button__link{
+                            @include make-class-options($value);
+                        }
+                    }
+                }
+                @else {
+                    .wp-block-buttons,
+                    .wp-block-button{
+                        #{$property}: $value;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/scss/global-content/_global-mixins/blocks/_content-block-columns.scss

@@ -0,0 +1,38 @@
+@use "sass:map";
+
+$columns-wysiwyg-options: (
+    "margin-bottom": null,
+    "breakpoint": null,
+);
+
+@mixin block-columns-wp() {
+    .wp-block-columns{
+        display: flex;
+    }
+}
+
+@mixin block-columns-wp-modifier($options) {
+    @each $property, $value in $options {
+        @if map.has-key($columns-wysiwyg-options, $property) {
+            @if $value {
+                @if $property == "breakpoint" {
+                    .wp-block-columns {
+                        @media all and (max-width: $value) {
+                            flex-wrap: wrap !important;
+                        }
+                        .wp-block-column {
+                            @media all and (max-width: $value) {
+                                flex-basis: 100% !important;
+                            }
+                        }
+                    }
+                }
+                @else {
+                    .wp-block-columns {
+                        #{$property}: $value;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/scss/global-content/_global-mixins/blocks/_content-block-footnote.scss

@@ -0,0 +1,8 @@
+@use "../_global-mixins" as *;
+
+@mixin block-footnote-wp-modifier($options: $options) {
+    .footnote,
+    .wp-block-column > .footnote {
+        @include make-font-wysiwyg-options($options)
+    }
+}

package/src/scss/global-content/_global-mixins/blocks/_content-block-highlighted.scss

@@ -0,0 +1,8 @@
+@use "../_global-mixins" as *;
+
+@mixin block-highlighted-wp-modifier($options: $options) {
+    .highlighted,
+    .wp-block-column > .highlighted {
+        @include make-font-wysiwyg-options($options)
+    }
+}