@terrahq/wysiwyg 1.0.0

package/src/scss/framework/_var/_vars.scss

@@ -0,0 +1,106 @@
+@use "sass:map";
+
+/*
+    Foundations
+*/
+// * COLORS
+$color-a: #0f0f0f;
+$color-b: #fefefe;
+$color-c: #f7f8f4;
+
+/* Accent Color */
+$color-d: #7ce55e;
+$color-e: #2d9f66;
+$color-f: #429ed6;
+$color-g: #fdb335;
+$color-h: #f76e4a;
+$color-i: #f58dd7;
+
+$color-options: (
+  a: $color-a,
+  b: $color-b,
+  c: $color-c,
+  d: $color-d,
+  e: $color-e,
+  f: $color-f,
+  g: $color-g,
+  h: $color-h,
+  i: $color-i,
+);
+
+$colorbg-options: (
+  a: $color-a,
+  b: $color-b,
+  c: $color-c,
+  d: $color-d,
+  e: $color-e,
+);
+
+$gradient-a: linear-gradient(
+  90deg,
+  map.get($color-options, f) 0%,
+  map.get($color-options, d) 100%
+);
+
+// * TYPOGRAPHY
+$type-a: "Arial", serif;
+
+// * LAYOUT
+$viewport-type: max-width;
+$columns: 12;
+$gutter-width: 32px;
+$half-gutter-width: $gutter-width * 0.5;
+$gutter-compensation: -1 * $half-gutter-width;
+
+// * Container
+$g-container-fluid-max-width: 2000px;
+$g-container-max-width: 1300px;
+$g-container-width: 90%;
+$g-container-width-mobile: 95%;
+
+// * breakpoints
+$all: 0;
+$desktop: 1700px;
+$laptop: 1570px;
+$tabletl: 1300px;
+$tabletm: 1024px;
+$tablets: 810px;
+$mobile: 580px;
+
+$breakpoints-grid: (
+  all: $all,
+  desktop: $desktop,
+  laptop: $laptop,
+  tabletl: $tabletl,
+  tabletm: $tabletm,
+  tablets: $tablets,
+  mobile: $mobile,
+) !default;
+
+/*
+    End Foundations
+*/
+
+// * Measure
+$measure: 0.5rem; /* 0.5rem = 8px */
+
+// * border
+$border-radius-a: $measure;
+
+// * Time
+$time-a: 0.1s; // * Micro-interactions such as button and toggle
+$time-b: 0.3s; // * Expansion, system communication, toast
+$time-c: 0.6s; // * Background dimming
+
+// * Ease
+$ease-standard-a: cubic-bezier(0.2, 0, 0.38, 0.9); // * productive
+$ease-standard-b: cubic-bezier(0, 0, 0.3, 1); // * expresive
+$ease-entrance-a: cubic-bezier(0, 0, 0.38, 0.9); // * productive
+$ease-entrance-b: cubic-bezier(0.4, 0.14, 0.3, 1); // * expresive
+$ease-exit-a: cubic-bezier(0.2, 0, 1, 0.9); // * productive
+$ease-exit-b: cubic-bezier(0.4, 0.14, 1, 1); // * expresive
+
+// * header
+$headerDesktop: 141px;
+$headerTabletm: 120px;
+$headerMobile: 110px;

package/src/scss/framework/components/btn/_c--btn-a.scss

@@ -0,0 +1,58 @@
+@use "sass:map";
+@use "@scss/framework/foundation/_foundation.scss";
+@use "@scss/framework/_var/_vars.scss" as *;
+.c--btn-a {
+  @extend .f--font-d;
+  @extend .f--color-b;
+  padding: $measure $measure * 3;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  background-color: map.get($color-options, i);
+  background-image: linear-gradient(
+      90deg,
+      map.get($color-options, i) 0%,
+      map.get($color-options, h) 100%
+    ),
+    linear-gradient(
+      90deg,
+      map.get($color-options, h) 0%,
+      map.get($color-options, i) 100%
+    );
+  background-repeat: no-repeat;
+  background-size: 100%, 0;
+  background-position: left center, right center;
+  transition: all $time-b $ease-standard-a;
+  @media all and ($viewport-type: $mobile) {
+    display: block;
+    width: 100%;
+  }
+
+  @media all and (hover: hover) {
+    &:hover {
+      border-radius: 30px;
+      background-size: 0, 100%;
+    }
+  }
+
+  &--second {
+    background-color: map.get($color-options, i);
+    background-image: none;
+    background-repeat: no-repeat;
+    background-size: 0;
+    border-color: transparent;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 0;
+
+    @media all and (hover: hover) {
+      &:hover {
+        background-color: transparent;
+        border-color: map.get($color-options, i);
+        border-radius: $measure * 4;
+        background-size: 0;
+        color: map.get($color-options, i);
+      }
+    }
+  }
+}

package/src/scss/framework/components/content/_c--content-a.scss

@@ -0,0 +1,460 @@
+@use "sass:map";
+@use "@scss/framework/foundation/_foundation.scss";
+@use "@scss/framework/_var/_vars.scss" as *;
+.c--content-a {
+  @include make-content();
+  @include make-content-modifier(
+    $headings-options: (
+      // "h1": (
+      //   "className": f--font-a,
+      //   "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,
+      //   "margin-bottom": $measure*3,
+      //   "padding-top": $measure*5,
+      //   "text-align": center,
+      //   "margin-bottom-before-lists": 24px,
+      //   "bold-font-weight": 800,
+      // ),
+      "h2":
+        (
+          //   "className": f--font-a,
+          //   "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,
+          "margin-bottom": $measure * 3,
+          "padding-top": $measure * 5,
+          //   "text-align": center,
+          //   "margin-bottom-before-lists": 24px,
+          //   "bold-font-weight": 800,
+        ),
+      "h3": (
+        //   "className": f--font-a,
+        //   "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,
+        "margin-bottom": $measure * 3,
+        "padding-top": $measure * 5,
+        //   "text-align": center,
+        //   "margin-bottom-before-lists": 24px,
+        //   "bold-font-weight": 800,
+      ),
+      "h4": (
+        //   "className": f--font-a,
+        //   "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,
+        "margin-bottom": $measure * 2,
+        "padding-top": $measure * 5,
+        //   "text-align": center,
+        //   "margin-bottom-before-lists": 24px,
+        //   "bold-font-weight": 800,
+      ),
+      "h5": (
+        //   "className": f--font-a,
+        //   "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,
+        "margin-bottom": $measure * 2,
+        "padding-top": $measure * 5,
+        //   "text-align": center,
+        //   "margin-bottom-before-lists": 24px,
+        //   "bold-font-weight": 800,
+      ),
+      "h6": (
+        //   "className": f--font-a,
+        //   "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,
+        "margin-bottom": $measure,
+        "padding-top": $measure * 5,
+        //   "text-align": center,
+        //   "margin-bottom-before-lists": 24px,
+        //   "bold-font-weight": 800,
+      ),
+    ),
+    $image-options: (
+      // "border-color": red,
+      // "border-radius": 20px,
+      // "border-style": solid,
+      // "border-width": 2px,
+      // "object-fit": cover,
+      // "max-height": 700px,
+      // "min-height": 0,
+      // "object-position": center,
+      // "max-width": 100%,
+      // "min-width": 30px,
+      "margin-bottom": $measure * 5,
+      "caption": (
+        // "className": f--font-a,
+        // "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,
+        // "margin-bottom": $measure*2,
+        "padding-top": $measure * 2,
+        "text-align": right,
+        // "margin-bottom-before-lists": 24px,
+        // "bold-font-weight": 800,
+      ),
+    ),
+    $link-options: (
+      // "className": g--link-01 g--link-01--second,
+    ),
+    $lists-options: (
+      // "number-font": (
+      //   "className": f--font-a,
+      //   "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,
+      //   "margin-bottom": $measure*2,
+      //   "padding-top": $measure*2,
+      //   "text-align": right,
+      //   "margin-bottom-before-lists": 24px,
+      //   "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,
+      "font-styles": (
+        // "className": f--font-a,
+        // "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,
+        "margin-bottom": $measure * 2,
+        // "padding-top": $measure*2,
+        // "text-align": right,
+        // "margin-bottom-before-lists": 24px,
+        // "bold-font-weight": 800,
+      ),
+    ),
+    $paragraphs-options: (
+      // "className": f--font-a,
+      // "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,
+      "margin-bottom": $measure * 4,
+      // "padding-top": $measure*2,
+      // "text-align": right,
+      "margin-bottom-before-lists": $measure * 3,
+      // "bold-font-weight": 800,
+    ),
+    $quote-options: (
+      "padding": $measure * 3 0,
+      "margin-top": $measure * 5,
+      "margin-bottom": $measure * 6,
+      // "border": (
+      //   "border-color": red,
+      //   "border-radius": 0,
+      //   "border-style": solid,
+      //   "border-width": 2px 0,
+      // ),
+      // "paragraph": (
+      //   "className": f--font-a,
+      //   "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,
+      //   "margin-bottom": $measure*2,
+      //   "padding-top": $measure*2,
+      //   "text-align": right,
+      //   "margin-bottom-before-lists": 24px,
+      //   "bold-font-weight": 800,
+      // ),
+      "cite":
+        (
+          // "className": f--font-a,
+          // "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,
+          // "margin-bottom": $measure*2,
+          "padding-top": $measure * 3,
+          // "text-align": right,
+          // "margin-bottom-before-lists": 24px,
+          // "bold-font-weight": 800,,,,
+        ),
+    ),
+    $footnote-options: (
+      // "className": f--font-a,
+      // "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,
+      "margin-bottom": $measure * 2,
+      // "padding-top": $measure*2,
+      // "text-align": right,
+      // "margin-bottom-before-lists": 24px,
+      // "bold-font-weight": 800,,,,
+    ),
+    $highlighted-options: (
+      // "className": f--font-a,
+      // "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,
+      "margin-bottom": $measure * 4,
+      // "padding-top": $measure*2,
+      // "text-align": right,
+      // "margin-bottom-before-lists": 24px,
+      // "bold-font-weight": 800,,,,
+    ),
+    $btn-options: (
+      // "className": g--btn-01,
+      "margin-bottom": $measure * 4,
+    ),
+    $columns-options: (
+      "breakpoint": $tablets,
+      "margin-bottom": $measure * 4,
+    ),
+    $separator-options: (
+      "margin": $measure * 6 auto,
+      // "width": 60%,
+      // "color": orange,
+      // "height": 2px,,,,
+    ),
+    $table-options: (
+      "margin-bottom": $measure * 4,
+      "header-cells-padding": $measure * 2,
+      "body-cells-padding": $measure $measure * 2,
+      // "header-font-styles": (
+      //   "className": f--font-a,
+      //   "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,
+      //   "margin-bottom": $measure*2,
+      //   "padding-top": $measure*2,
+      //   "text-align": right,
+      //   "margin-bottom-before-lists": 24px,
+      //   "bold-font-weight": 800,
+      // ),
+      // "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-font-styles": (
+      //   "className": f--font-a,
+      //   "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,
+      //   "margin-bottom": $measure*2,
+      //   "padding-top": $measure*2,
+      //   "text-align": right,
+      //   "margin-bottom-before-lists": 24px,
+      //   "bold-font-weight": 800,
+      // ),
+      // "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),
+      // "caption": (
+      //   "className": f--font-a,
+      //   "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,
+      //   "margin-bottom": $measure*2,
+      "padding-top": $measure * 2,
+      "text-align": right,
+      //   "margin-bottom-before-lists": 24px,
+      //   "bold-font-weight": 800,
+      // ),,,,
+    ),
+    $video-options: (
+      // "border-color": red,
+      // "border-radius": 20px,
+      // "border-style": solid,
+      // "border-width": 2px,
+      // "object-fit": cover,
+      // "max-height": 700px,
+      // "min-height": 0,
+      // "object-position": center,
+      // "max-width": 100%,
+      // "min-width": 30px,
+      "margin-bottom": $measure * 5,
+      "caption": (
+        // "className": f--font-a,
+        // "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,
+        // "margin-bottom": $measure*2,
+        "padding-top": $measure * 2,
+        "text-align": right,
+        // "margin-bottom-before-lists": 24px,
+        // "bold-font-weight": 800,
+      ),
+    ),
+    $utilities-options: (
+      "media-text-aligned-margin-x": $measure * 5,
+    )
+  );
+}

package/src/scss/framework/components/link/_c--link-a.scss

@@ -0,0 +1,13 @@
+@use "@scss/framework/foundation/_foundation.scss";
+@use "@scss/framework/_var/_vars.scss" as *;
+.c--link-a {
+  @extend .f--color-e;
+  text-decoration: none;
+  transition: all $time-b $ease-standard-a;
+
+  @media all and (hover: hover) {
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+}