@yafnet/theme-kit 0.0.0-stage → 4.0.11

package/email/bootstrap-email/scss/utilities/_color.scss

@@ -0,0 +1,9 @@
+@each $name, $color in $all-colors {
+  @include color-util('.text-#{$name}') {
+    color: $color;
+  }
+}
+
+@include color-util('.text-muted') {
+  color: $gray-600;
+}

package/email/bootstrap-email/scss/utilities/_display.scss

@@ -0,0 +1,7 @@
+@each $prefix in $breakpoints {
+  @each $display in $display-type {
+    .d-#{$prefix}#{$display} {
+      display: $display;
+    }
+  }
+}

package/email/bootstrap-email/scss/utilities/_sizing.scss

@@ -0,0 +1,35 @@
+@each $prefix in $breakpoints {
+  @each $name, $property in $sizing-types {
+    @include sizing-util('.max-#{$name}-#{$prefix}full') {
+      max-#{$property}: 100%;
+      -premailer-#{$property}: 100%;
+      #{$property}: 100%;
+    }
+    @each $size, $value in $sizing {
+      @include sizing-util('.max-#{$name}-#{$prefix}#{$size}') {
+        max-#{$property}: $value;
+        -premailer-#{$property}: strip-unit($value);
+        #{$property}: 100%;
+      }
+    }
+  }
+}
+
+@each $prefix in $breakpoints {
+  @each $name, $property in $sizing-types {
+    @include sizing-util('.#{$name}-#{$prefix}full') {
+      -premailer-#{$property}: 100%;
+      #{$property}: 100%;
+    }
+    @include sizing-util('.#{$name}-#{$prefix}auto') {
+      -premailer-#{$property}: auto;
+      #{$property}: auto;
+    }
+    @each $size, $value in $sizing {
+      @include sizing-util('.#{$name}-#{$prefix}#{$size}') {
+        -premailer-#{$property}: strip-unit($value);
+        #{$property}: $value;
+      }
+    }
+  }
+}

package/email/bootstrap-email/scss/utilities/_spacing.scss

@@ -0,0 +1,18 @@
+// Padding Util
+@each $prefix in $breakpoints {
+  @each $size, $value in $spacers {
+    @include padding-group($prefix, $size, $value);
+  }
+}
+
+// Spacing Util
+@each $prefix in $breakpoints {
+  @each $size, $value in $spacers {
+    @include spacer-util('.s-#{$prefix}#{$size}') {
+      font-size: $value;
+      line-height: $value;
+      height: $value;
+      -premailer-height: strip-unit($value);
+    }
+  }
+}

package/email/bootstrap-email/scss/utilities/_text-decoration.scss

@@ -0,0 +1,9 @@
+.underline {
+  text-decoration: underline;
+}
+.line-through {
+  text-decoration: line-through;
+}
+.no-underline {
+  text-decoration: none;
+}

package/email/bootstrap-email/scss/utilities/_typography.scss

@@ -0,0 +1,56 @@
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  margin: 0;
+  padding-top: $headings-margin-top;
+  padding-bottom: $headings-margin-bottom;
+  font-family: $headings-font-family;
+  font-weight: $headings-font-weight;
+  color: $headings-color;
+  text-align: left;
+  vertical-align: baseline;
+}
+
+@each $name, $size in $display-headings {
+    .display-#{$name} {
+        font-weight: 300;
+        line-height: 1.2;
+        font-size: $size;
+    }
+}
+
+@each $name, $size in $headings {
+  h#{$name}, .h#{$name} {
+    font-size: $size;
+    line-height: $size * $headings-line-height;
+  }
+}
+
+@each $name, $size in $font-size {
+  .text-#{$name} {
+    font-size: $size;
+    line-height: $size * $headings-line-height;
+  }
+}
+
+@each $name, $size in $line-height {
+  .lh-#{$name} {
+    line-height: $size;
+  }
+}
+
+@for $n from 1 through 9 {
+  @include font-weight-util('.fw-#{$n * 100}') {
+    font-weight: #{$n * 100} !important;
+  }
+}
+
+@each $align in $text-align {
+  @include text-align-util('.text-#{$align}') {
+    text-align: $align !important;
+  }
+}
+
+p {
+  width: 100%;
+  margin: 0;
+}

package/email/bootstrap-email/scss/utilities/_valign.scss

@@ -0,0 +1,5 @@
+@each $align in $vertical-align {
+  @include valign-util('.ay-#{$align}') {
+    vertical-align: $align !important;
+  }
+}

package/email/bootstrap-email/scss/variables/_body.scss

@@ -0,0 +1,2 @@
+$body-color: $black !default;
+$body-bg: $white !default;

package/email/bootstrap-email/scss/variables/_borders.scss

@@ -0,0 +1,6 @@
+$border-color:       $gray-300 !default;
+$border-width:       1px !default;
+$border-radius-sm:   3px !default;
+$border-radius:      6px !default;
+$border-radius-lg:   9px !default;
+$border-radius-pill: 9999px !default;

package/email/bootstrap-email/scss/variables/_buttons.scss

@@ -0,0 +1,47 @@
+$btn-padding-y:               8px !default;
+$btn-padding-x:               12px !default;
+$btn-font-family:             $font-family-base !default;
+$btn-font-size:               $font-size-base !default;
+$btn-line-height:             1.25 * $btn-font-size !default;
+
+$btn-padding-y-sm:            0.25 * $btn-font-size !default;
+$btn-padding-x-sm:            0.5 * $btn-font-size !default;
+$btn-font-size-sm:            0.875 * $btn-font-size !default;
+$btn-line-height-sm:          $btn-line-height * 0.875 !default;
+
+$btn-padding-y-lg:            0.5 * $btn-font-size !default;
+$btn-padding-x-lg:            $btn-font-size !default;
+$btn-font-size-lg:            1.25 * $btn-font-size !default;
+$btn-line-height-lg:          $btn-line-height * 1.25 !default;
+
+$btn-border-width:            $border-width !default;
+$btn-font-weight:             $font-weight-base !default;
+$btn-border-radius:           $border-radius !default;
+$btn-border-radius-lg:        $border-radius-lg !default;
+$btn-border-radius-sm:        $border-radius-sm !default;
+
+
+/** Button Theme Structure Example
+ *
+ * $btn-themes: (
+ *   "primary": (
+ *     "background-color": blue,
+ *     "color": white,
+ *     "border-color": blue
+ *   ),
+ *   "outline-primary": (
+ *     "background-color": transparent,
+ *     "color": blue,
+ *     "border-color": blue
+ *   )
+ * )
+*/
+$tmp-btn-themes: ();
+@each $name, $color in $all-colors {
+  @if $name != "transparent" {
+    $tmp-btn-themes: map-merge($tmp-btn-themes, ($name: ("background-color": $color, "color": color-contrast($color), "border-color": $color)));
+    $tmp-btn-themes: map-merge($tmp-btn-themes, ("outline-#{$name}": ("background-color": transparent, "color": $color, "border-color": $color)));
+  }
+}
+
+$btn-themes: $tmp-btn-themes !default;

package/email/bootstrap-email/scss/variables/_colors.scss

@@ -0,0 +1,161 @@
+// Color system
+$white:    #ffffff !default;
+$gray-100: #f7fafc !default;
+$gray-200: #edf2f7 !default;
+$gray-300: #e2e8f0 !default;
+$gray-400: #cbd5e0 !default;
+$gray-500: #a0aec0 !default;
+$gray-600: #718096 !default;
+$gray-700: #4a5568 !default;
+$gray-800: #2d3748 !default;
+$gray-900: #1a202c !default;
+$black:    #000000 !default;
+
+$blue:    #0d6efd !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #d63384 !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #198754 !default;
+$teal:    #20c997 !default;
+$cyan:    #0dcaf0 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-900 !default;
+
+$theme-colors: (
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "light":      $light,
+  "dark":       $dark
+) !default;
+
+$palette-colors: (
+  "black": $black,
+  "white": $white,
+  "transparent": transparent,
+
+  "gray-100": $gray-100,
+  "gray-200": $gray-200,
+  "gray-300": $gray-300,
+  "gray-400": $gray-400,
+  "gray-500": $gray-500,
+  "gray-600": $gray-600,
+  "gray-700": $gray-700,
+  "gray-800": $gray-800,
+  "gray-900": $gray-900,
+
+  "blue-100": tint-color($blue, 80%),
+  "blue-200": tint-color($blue, 60%),
+  "blue-300": tint-color($blue, 40%),
+  "blue-400": tint-color($blue, 20%),
+  "blue-500": $blue,
+  "blue-600": shade-color($blue, 20%),
+  "blue-700": shade-color($blue, 40%),
+  "blue-800": shade-color($blue, 60%),
+  "blue-900": shade-color($blue, 80%),
+
+  "indigo-100": tint-color($indigo, 80%),
+  "indigo-200": tint-color($indigo, 60%),
+  "indigo-300": tint-color($indigo, 40%),
+  "indigo-400": tint-color($indigo, 20%),
+  "indigo-500": $indigo,
+  "indigo-600": shade-color($indigo, 20%),
+  "indigo-700": shade-color($indigo, 40%),
+  "indigo-800": shade-color($indigo, 60%),
+  "indigo-900": shade-color($indigo, 80%),
+
+  "purple-100": tint-color($purple, 80%),
+  "purple-200": tint-color($purple, 60%),
+  "purple-300": tint-color($purple, 40%),
+  "purple-400": tint-color($purple, 20%),
+  "purple-500": $purple,
+  "purple-600": shade-color($purple, 20%),
+  "purple-700": shade-color($purple, 40%),
+  "purple-800": shade-color($purple, 60%),
+  "purple-900": shade-color($purple, 80%),
+
+  "pink-100": tint-color($pink, 80%),
+  "pink-200": tint-color($pink, 60%),
+  "pink-300": tint-color($pink, 40%),
+  "pink-400": tint-color($pink, 20%),
+  "pink-500": $pink,
+  "pink-600": shade-color($pink, 20%),
+  "pink-700": shade-color($pink, 40%),
+  "pink-800": shade-color($pink, 60%),
+  "pink-900": shade-color($pink, 80%),
+
+  "red-100": tint-color($red, 80%),
+  "red-200": tint-color($red, 60%),
+  "red-300": tint-color($red, 40%),
+  "red-400": tint-color($red, 20%),
+  "red-500": $red,
+  "red-600": shade-color($red, 20%),
+  "red-700": shade-color($red, 40%),
+  "red-800": shade-color($red, 60%),
+  "red-900": shade-color($red, 80%),
+
+  "orange-100": tint-color($orange, 80%),
+  "orange-200": tint-color($orange, 60%),
+  "orange-300": tint-color($orange, 40%),
+  "orange-400": tint-color($orange, 20%),
+  "orange-500": $orange,
+  "orange-600": shade-color($orange, 20%),
+  "orange-700": shade-color($orange, 40%),
+  "orange-800": shade-color($orange, 60%),
+  "orange-900": shade-color($orange, 80%),
+
+  "yellow-100": tint-color($yellow, 80%),
+  "yellow-200": tint-color($yellow, 60%),
+  "yellow-300": tint-color($yellow, 40%),
+  "yellow-400": tint-color($yellow, 20%),
+  "yellow-500": $yellow,
+  "yellow-600": shade-color($yellow, 20%),
+  "yellow-700": shade-color($yellow, 40%),
+  "yellow-800": shade-color($yellow, 60%),
+  "yellow-900": shade-color($yellow, 80%),
+
+  "green-100": tint-color($green, 80%),
+  "green-200": tint-color($green, 60%),
+  "green-300": tint-color($green, 40%),
+  "green-400": tint-color($green, 20%),
+  "green-500": $green,
+  "green-600": shade-color($green, 20%),
+  "green-700": shade-color($green, 40%),
+  "green-800": shade-color($green, 60%),
+  "green-900": shade-color($green, 80%),
+
+  "teal-100": tint-color($teal, 80%),
+  "teal-200": tint-color($teal, 60%),
+  "teal-300": tint-color($teal, 40%),
+  "teal-400": tint-color($teal, 20%),
+  "teal-500": $teal,
+  "teal-600": shade-color($teal, 20%),
+  "teal-700": shade-color($teal, 40%),
+  "teal-800": shade-color($teal, 60%),
+  "teal-900": shade-color($teal, 80%),
+
+  "cyan-100": tint-color($cyan, 80%),
+  "cyan-200": tint-color($cyan, 60%),
+  "cyan-300": tint-color($cyan, 40%),
+  "cyan-400": tint-color($cyan, 20%),
+  "cyan-500": $cyan,
+  "cyan-600": shade-color($cyan, 20%),
+  "cyan-700": shade-color($cyan, 40%),
+  "cyan-800": shade-color($cyan, 60%),
+  "cyan-900": shade-color($cyan, 80%),
+) !default;
+
+$all-colors: map-merge($theme-colors, $palette-colors);

package/email/bootstrap-email/scss/variables/_tables.scss

@@ -0,0 +1,4 @@
+$table-accent-bg:        #f2f2f2 !default;
+$table-background-color: null !default;
+$table-border-color:     $border-color !default;
+$table-border-width:     $border-width !default;

package/email/bootstrap-email/scss/variables/_typography.scss

@@ -0,0 +1,26 @@
+$font-size-base:         16px !default;
+$font-weight-base:       normal !default;
+$line-height-base:       1.5 !default;
+$headings-line-height:   1.2 !default;
+$headings-margin-top:    0 !default;
+$headings-margin-bottom: 0 !default;
+$headings-font-family:   null !default;
+$headings-font-weight:   500 !default;
+$headings-color:         null !default;
+$link-color:             $primary !default;
+
+/*
+**** Override the following variables to customize font or add web font ie: Google Fonts ****
+*/
+$font-family-base:       Helvetica, Arial, sans-serif !default;
+$font-faces:             null !default;
+// Example below:
+// $font-family-base: 'Anton', Helvetica, Arial, sans-serif;
+// $font-faces: (
+//   (
+//     "font-family": 'Anton',
+//     "font-style": normal,
+//     "font-weight": 400,
+//     "src": url(https://fonts.gstatic.com/s/anton/v23/1Ptgg87LROyAm3Kz-C8CSKlv.woff2) format('woff2')
+//   ),
+// );

package/email/bootstrap-email/scss/variables/_utilities.scss

@@ -0,0 +1,154 @@
+$breakpoints: ('', 'lg-');
+
+$headings: (
+  1: 2.25 * $font-size-base,
+  2: 2 * $font-size-base,
+  3: 1.75 * $font-size-base,
+  4: 1.5 * $font-size-base,
+  5: 1.25 * $font-size-base,
+  6: 1 * $font-size-base
+) !default;
+
+$display-headings: ( 
+    1: 5rem, 
+    2: 4.5rem, 
+    3: 4rem, 
+    4: 3.5rem, 
+    5: 3rem, 
+    6: 2.5rem 
+) !default;
+
+$font-size: (
+  'xs': 0.75 * $font-size-base,
+  'sm': 0.875 * $font-size-base,
+  'base': 1 * $font-size-base,
+  'lg': 1.125 * $font-size-base,
+  'xl': 1.25 * $font-size-base,
+  '2xl': 1.5 * $font-size-base,
+  '3xl': 1.875 * $font-size-base,
+  '4xl': 2.25 * $font-size-base,
+  '5xl': 3 * $font-size-base,
+  '6xl': 4 * $font-size-base,
+  '7xl': 5 * $font-size-base
+) !default;
+
+$line-height: (
+  1: 1,
+  'sm': 1.25,
+  'base': 1.5,
+  'lg': 2
+) !default;
+
+$size-scale: 4px;
+$spacers: (
+  0: 0,
+  1: 1 * $size-scale,
+  2: 2 * $size-scale,
+  3: 3 * $size-scale,
+  4: 4 * $size-scale,
+  5: 5 * $size-scale,
+  6: 6 * $size-scale,
+  7: 7 * $size-scale,
+  8: 8 * $size-scale,
+  9: 9 * $size-scale,
+  10: 10 * $size-scale,
+  12: 12 * $size-scale,
+  16: 16 * $size-scale,
+  20: 20 * $size-scale,
+  24: 24 * $size-scale,
+  32: 32 * $size-scale,
+  40: 40 * $size-scale
+) !default;
+
+$sizing: (
+  0: 0,
+  1: 1 * $size-scale,
+  2: 2 * $size-scale,
+  3: 3 * $size-scale,
+  4: 4 * $size-scale,
+  5: 5 * $size-scale,
+  6: 6 * $size-scale,
+  7: 7 * $size-scale,
+  8: 8 * $size-scale,
+  9: 9 * $size-scale,
+  10: 10 * $size-scale,
+  12: 12 * $size-scale,
+  16: 16 * $size-scale,
+  20: 20 * $size-scale,
+  24: 24 * $size-scale,
+  32: 32 * $size-scale,
+  40: 40 * $size-scale,
+  48: 48 * $size-scale,
+  56: 56 * $size-scale,
+  64: 64 * $size-scale,
+  80: 80 * $size-scale,
+  96: 96 * $size-scale,
+  112: 112 * $size-scale,
+  128: 128 * $size-scale,
+  144: 144 * $size-scale,
+  150: 150 * $size-scale
+) !default;
+$sizing-types: (
+  'w': 'width',
+  'h': 'height'
+);
+
+$grid-cols: (
+  1: 8.333333%,
+  2: 16.666667%,
+  3: 25%,
+  4: 33.333333%,
+  5: 41.666667%,
+  6: 50%,
+  7: 58.333333%,
+  8: 66.666667%,
+  9: 75%,
+  10: 83.333333%,
+  11: 91.666667%,
+  12: 100%
+);
+
+$display-type: (
+  inline,
+  inline-block,
+  block,
+  table,
+  none
+) !default;
+
+$border-widths: (
+  '': 1px,
+  '-2': 2px,
+  '-3': 3px,
+  '-4': 4px,
+  '-5': 5px,
+  '-0': 0px
+) !default;
+
+$border-radiuses: (
+  '': 4px,
+  '-none': 0px,
+  '-sm': 2px,
+  '-md': 6px,
+  '-lg': 8px,
+  '-xl': 12px,
+  '-2xl': 16px,
+  '-3xl': 24px,
+  '-full': 9999px
+) !default;
+
+$vertical-align: (
+  top,
+  middle,
+  bottom,
+  baseline,
+  text-top,
+  text-bottom
+) !default;
+
+$text-align: (
+  left,
+  right,
+  center,
+  justify
+) !default;

package/email/bootstrap-email/templates/body.html

@@ -0,0 +1,8 @@
+<table class="{{ classes }}" valign="top" role="presentation" bgcolor="">
+      <tbody>
+        <tr>
+          <td valign="top">
+          {{ contents }}</td>
+        </tr>
+      </tbody>
+</table>

package/email/bootstrap-email/templates/button.html

@@ -0,0 +1,9 @@
+<table class="{{ classes }}" role="presentation">
+              <tbody>
+                <tr>
+                  <td>
+                    {{ contents }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>

package/email/bootstrap-email/templates/container.html

@@ -0,0 +1,29 @@
+<table class="{{ classes }}" role="presentation">
+  <tbody>
+    <tr>
+      <td align="center">
+        <!--[if (gte mso 9)|(IE)]>
+          <table align="center" role="presentation">
+            <tbody>
+              <tr>
+                <td width="600">
+        <![endif]-->
+        <table align="center" role="presentation">
+          <tbody>
+            <tr>
+              <td>
+                {{ contents }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <!--[if (gte mso 9)|(IE)]>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        <![endif]-->
+      </td>
+    </tr>
+  </tbody>
+</table>

package/email/bootstrap-email/templates/div.html

@@ -0,0 +1,3 @@
+<div class="{{ classes }}">
+  {{ contents }}
+</div>

package/email/bootstrap-email/templates/table-left.html

@@ -0,0 +1,9 @@
+<table class="{{ classes }}" align="left" role="presentation">
+  <tbody>
+    <tr>
+      <td>
+        {{ contents }}
+      </td>
+    </tr>
+  </tbody>
+</table>

package/email/bootstrap-email/templates/table-to-tbody.html

@@ -0,0 +1,5 @@
+<table class="{{ classes }}" role="presentation">
+  <tbody>
+    {{ contents }}
+  </tbody>
+</table>

package/email/bootstrap-email/templates/table-to-tr.html

@@ -0,0 +1,7 @@
+<table class="{{ classes }}" role="presentation" bgcolor="">
+  <tbody>
+    <tr>
+      {{ contents }}
+    </tr>
+  </tbody>
+</table>

package/email/bootstrap-email/templates/table.html

@@ -0,0 +1,9 @@
+<table class="{{ classes }}" role="presentation">
+  <tbody>
+    <tr>
+      <td>
+        {{ contents }}
+      </td>
+    </tr>
+  </tbody>
+</table>

package/email/bootstrap-email/templates/td.html

@@ -0,0 +1,3 @@
+<td class="{{ classes }}">
+  {{ contents }}
+</td>

package/email/bootstrap-email/templates/tr.html

@@ -0,0 +1,5 @@
+<tr>
+  <td>
+    {{ contents }}
+  </td>
+</tr>