bootstrap-email 1.5.2 → 1.6.0

data/core/scss/variables/_colors.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "../helper";
 // Color system
 $white:    #ffffff !default;
 $gray-100: #f7fafc !default;
@@ -57,105 +59,105 @@ $palette-colors: (
   "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-100": helper.tint-color($blue, 80%),
+  "blue-200": helper.tint-color($blue, 60%),
+  "blue-300": helper.tint-color($blue, 40%),
+  "blue-400": helper.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%),
+  "blue-600": helper.shade-color($blue, 20%),
+  "blue-700": helper.shade-color($blue, 40%),
+  "blue-800": helper.shade-color($blue, 60%),
+  "blue-900": helper.shade-color($blue, 80%),
+
+  "indigo-100": helper.tint-color($indigo, 80%),
+  "indigo-200": helper.tint-color($indigo, 60%),
+  "indigo-300": helper.tint-color($indigo, 40%),
+  "indigo-400": helper.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%),
+  "indigo-600": helper.shade-color($indigo, 20%),
+  "indigo-700": helper.shade-color($indigo, 40%),
+  "indigo-800": helper.shade-color($indigo, 60%),
+  "indigo-900": helper.shade-color($indigo, 80%),
+
+  "purple-100": helper.tint-color($purple, 80%),
+  "purple-200": helper.tint-color($purple, 60%),
+  "purple-300": helper.tint-color($purple, 40%),
+  "purple-400": helper.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%),
+  "purple-600": helper.shade-color($purple, 20%),
+  "purple-700": helper.shade-color($purple, 40%),
+  "purple-800": helper.shade-color($purple, 60%),
+  "purple-900": helper.shade-color($purple, 80%),
+
+  "pink-100": helper.tint-color($pink, 80%),
+  "pink-200": helper.tint-color($pink, 60%),
+  "pink-300": helper.tint-color($pink, 40%),
+  "pink-400": helper.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%),
+  "pink-600": helper.shade-color($pink, 20%),
+  "pink-700": helper.shade-color($pink, 40%),
+  "pink-800": helper.shade-color($pink, 60%),
+  "pink-900": helper.shade-color($pink, 80%),
+
+  "red-100": helper.tint-color($red, 80%),
+  "red-200": helper.tint-color($red, 60%),
+  "red-300": helper.tint-color($red, 40%),
+  "red-400": helper.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%),
+  "red-600": helper.shade-color($red, 20%),
+  "red-700": helper.shade-color($red, 40%),
+  "red-800": helper.shade-color($red, 60%),
+  "red-900": helper.shade-color($red, 80%),
+
+  "orange-100": helper.tint-color($orange, 80%),
+  "orange-200": helper.tint-color($orange, 60%),
+  "orange-300": helper.tint-color($orange, 40%),
+  "orange-400": helper.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%),
+  "orange-600": helper.shade-color($orange, 20%),
+  "orange-700": helper.shade-color($orange, 40%),
+  "orange-800": helper.shade-color($orange, 60%),
+  "orange-900": helper.shade-color($orange, 80%),
+
+  "yellow-100": helper.tint-color($yellow, 80%),
+  "yellow-200": helper.tint-color($yellow, 60%),
+  "yellow-300": helper.tint-color($yellow, 40%),
+  "yellow-400": helper.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%),
+  "yellow-600": helper.shade-color($yellow, 20%),
+  "yellow-700": helper.shade-color($yellow, 40%),
+  "yellow-800": helper.shade-color($yellow, 60%),
+  "yellow-900": helper.shade-color($yellow, 80%),
+
+  "green-100": helper.tint-color($green, 80%),
+  "green-200": helper.tint-color($green, 60%),
+  "green-300": helper.tint-color($green, 40%),
+  "green-400": helper.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%),
+  "green-600": helper.shade-color($green, 20%),
+  "green-700": helper.shade-color($green, 40%),
+  "green-800": helper.shade-color($green, 60%),
+  "green-900": helper.shade-color($green, 80%),
+
+  "teal-100": helper.tint-color($teal, 80%),
+  "teal-200": helper.tint-color($teal, 60%),
+  "teal-300": helper.tint-color($teal, 40%),
+  "teal-400": helper.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%),
+  "teal-600": helper.shade-color($teal, 20%),
+  "teal-700": helper.shade-color($teal, 40%),
+  "teal-800": helper.shade-color($teal, 60%),
+  "teal-900": helper.shade-color($teal, 80%),
+
+  "cyan-100": helper.tint-color($cyan, 80%),
+  "cyan-200": helper.tint-color($cyan, 60%),
+  "cyan-300": helper.tint-color($cyan, 40%),
+  "cyan-400": helper.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%),
+  "cyan-600": helper.shade-color($cyan, 20%),
+  "cyan-700": helper.shade-color($cyan, 40%),
+  "cyan-800": helper.shade-color($cyan, 60%),
+  "cyan-900": helper.shade-color($cyan, 80%),
 ) !default;
 
-$all-colors: map-merge($theme-colors, $palette-colors);
+$all-colors: map.merge($theme-colors, $palette-colors);

data/core/scss/variables/_tables.scss

@@ -1,4 +1,6 @@
+@use "borders";
+
 $table-accent-bg:        #f2f2f2 !default;
 $table-background-color: null !default;
-$table-border-color:     $border-color !default;
-$table-border-width:     $border-width !default;
+$table-border-color:     borders.$border-color !default;
+$table-border-width:     borders.$border-width !default;

data/core/scss/variables/_typography.scss

@@ -1,3 +1,5 @@
+@use "colors";
+
 $font-size-base:         16px !default;
 $font-weight-base:       normal !default;
 $line-height-base:       1.5 !default;
@@ -7,7 +9,7 @@ $headings-margin-bottom: 0 !default;
 $headings-font-family:   null !default;
 $headings-font-weight:   500 !default;
 $headings-color:         null !default;
-$link-color:             $primary !default;
+$link-color:             colors.$primary !default;
 
 /*
 **** Override the following variables to customize font or add web font ie: Google Fonts ****

data/core/scss/variables/_utilities.scss

@@ -1,26 +1,28 @@
+@use "typography";
+
 $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
+  1: 2.25 * typography.$font-size-base,
+  2: 2 * typography.$font-size-base,
+  3: 1.75 * typography.$font-size-base,
+  4: 1.5 * typography.$font-size-base,
+  5: 1.25 * typography.$font-size-base,
+  6: 1 * typography.$font-size-base
 ) !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
+  'xs': 0.75 * typography.$font-size-base,
+  'sm': 0.875 * typography.$font-size-base,
+  'base': 1 * typography.$font-size-base,
+  'lg': 1.125 * typography.$font-size-base,
+  'xl': 1.25 * typography.$font-size-base,
+  '2xl': 1.5 * typography.$font-size-base,
+  '3xl': 1.875 * typography.$font-size-base,
+  '4xl': 2.25 * typography.$font-size-base,
+  '5xl': 3 * typography.$font-size-base,
+  '6xl': 4 * typography.$font-size-base,
+  '7xl': 5 * typography.$font-size-base
 ) !default;
 
 $line-height: (

data/lib/bootstrap-email/converters/spacer.rb

@@ -5,6 +5,8 @@ module BootstrapEmail
     class Spacer < Base
       def build
         each_node('*[class*=s-]') do |node|
+          next unless node['class'].split.any? { |cls| cls.match?(/^s(-lg)?-\d+$/) }
+
           node.replace(template('table', classes: "#{node['class']} w-full", contents: '&nbsp;'))
         end
       end

data/lib/bootstrap-email/erb.rb

@@ -3,7 +3,7 @@
 module BootstrapEmail
   class Erb
     def self.template(path, locals_hash = {})
-      namespace = OpenStruct.new(locals_hash)
+      namespace = Struct.new(*locals_hash.keys, keyword_init: true).new(**locals_hash)
       template_html = File.read(path)
       ERB.new(template_html).result(namespace.instance_eval { binding })
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap-email
 version: !ruby/object:Gem::Version
-  version: 1.5.2
+  version: 1.6.0
 platform: ruby
 authors:
 - Stuart Yamartino
@@ -65,20 +65,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.53'
-- !ruby/object:Gem::Dependency
-  name: ostruct
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '0.6'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '0.6'
 email: stu@stuyam.com
 executables:
 - bootstrap-email
@@ -90,10 +76,10 @@ files:
 - core/bootstrap-email.scss
 - core/bootstrap-head.scss
 - core/layout.html.erb
-- core/scss/_helpers.scss
-- core/scss/_reboot_email.scss
-- core/scss/_reboot_head.scss
-- core/scss/_variables.scss
+- core/scss/_helper.scss
+- core/scss/_reboot-email.scss
+- core/scss/_reboot-head.scss
+- core/scss/_variable.scss
 - core/scss/components/_alert.scss
 - core/scss/components/_badge.scss
 - core/scss/components/_button.scss
@@ -106,7 +92,6 @@ files:
 - core/scss/components/_stack.scss
 - core/scss/components/_table.scss
 - core/scss/helpers/_functions.scss
-- core/scss/helpers/_mixins.scss
 - core/scss/helpers/_selectors_for_utils.scss
 - core/scss/utilities/_background.scss
 - core/scss/utilities/_border-radius.scss

data/core/scss/_helpers.scss

@@ -1,3 +0,0 @@
-@import 'helpers/functions';
-@import 'helpers/mixins';
-@import 'helpers/selectors_for_utils';

data/core/scss/_variables.scss

@@ -1,7 +0,0 @@
-@import 'variables/colors';
-@import 'variables/body';
-@import 'variables/typography';
-@import 'variables/borders';
-@import 'variables/tables';
-@import 'variables/buttons';
-@import 'variables/utilities';

data/core/scss/helpers/_mixins.scss

@@ -1,21 +0,0 @@
-@mixin padding-group($prefix, $size, $value) {
-  @include padding-util('.p-#{$prefix}#{$size}') {
-    padding: $value;
-  }
-
-  @include padding-util('.pt-#{$prefix}#{$size}, .py-#{$prefix}#{$size}') {
-    padding-top: $value;
-  }
-
-  @include padding-util('.pr-#{$prefix}#{$size}, .px-#{$prefix}#{$size}') {
-    padding-right: $value;
-  }
-
-  @include padding-util('.pb-#{$prefix}#{$size}, .py-#{$prefix}#{$size}') {
-    padding-bottom: $value;
-  }
-
-  @include padding-util('.pl-#{$prefix}#{$size}, .px-#{$prefix}#{$size}') {
-    padding-left: $value;
-  }
-}