GIPainter-base 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: cd93f9a80de255d47d943601b44b37620fad235c
-  data.tar.gz: aff48fd60d23a5876e559673d9934a798bb6c874
+  metadata.gz: 5b2ad67e63c13704b97c179de7538c40f9ba30a8
+  data.tar.gz: 744a11900e8c5c8d4538c457506af622b3296d09
 SHA512:
-  metadata.gz: e1617f9a609fe860a8e36b595dd65b7f8930a9aab8476d747dc5e12774e968a887561c34506500cd2ec116e6f382efab028d272a62550b8bed4760bc3f37ca4c
-  data.tar.gz: 403d5c84937df484fee792ab3cdc7b4cb886a5672c026a8c28604baddd4f35c8ce57f7834ec11eb6650a3d6f3fa3ddf85b845233933c9c69ead26f218126ae33
+  metadata.gz: 133c5a494b7aa013aea430e0faac301b7e2d045a0eb377c4de6cd037ca196969cd5eaf050875e253940a713b1e85bf5488d371a18f017c0786ff277b8cb24aea
+  data.tar.gz: 693aab6c9bf21624127afd3ba09afba780c281d3372b4579ee917ad177fcc9dab68a13d813d85ba3cf38faeaac97ddd8310a757c28d4561fe52a250b30f6ee2b

data/assets/stylesheets/Base/_typography.scss

@@ -0,0 +1,63 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $headings-font-family;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+  color: $headings-color;
+
+  small {
+    font-weight: normal;
+    line-height: 1;
+    color: $headings-small-color;
+  }
+}
+
+h1,
+h2,
+h3 {
+  margin-top: $line-height-computed;
+  margin-bottom: ($line-height-computed / 2);
+
+  small {
+    font-size: 0.65em;
+  }
+}
+
+h4,
+h5,
+h6 {
+  margin-top: ($line-height-computed / 2);
+  margin-bottom: ($line-height-computed / 2);
+
+  small {
+    font-size: 0.75em;
+  }
+}
+
+h1 {
+  @include font-size($font-size-h1);
+}
+
+h2 {
+  @include font-size($font-size-h2);
+}
+
+h3 {
+  @include font-size($font-size-h3);
+}
+
+h4 {
+  @include font-size($font-size-h4);
+}
+
+h5 {
+  @include font-size($font-size-h5);
+}
+
+h6 {
+  @include font-size($font-size-h6);
+}

data/assets/stylesheets/Functions/_typography.scss

@@ -0,0 +1,39 @@
+//-----------------------------------
+// TYPOGRAPHY FUNCTION
+//-----------------------------------
+
+////
+/// @access private
+/// @group Typography
+/// @type string
+////
+
+/// Return the list of `src` values, in order, that a good `@font-face` will need, including only those formats specified in the list `$formats`.
+/// @param {int} $formats - file extension
+/// @param {int} $file-path - file path
+/// @param {int} $font-family - file name
+
+@function font-src($formats, $file-path, $font-family) {
+  $result: ();
+  @if index($formats, eot) {
+    $eot-val: url('#{$file-path}.eot?#iefix') format('embedded-opentype');
+    $result: append($result, $eot-val, comma);
+  }
+  @if index($formats, woff2) {
+    $woff2-val: url('#{$file-path}.woff2') format('woff2');
+    $result: append($result, $woff2-val, comma);
+  }
+  @if index($formats, woff) {
+    $woff-val: url('#{$file-path}.woff') format('woff');
+    $result: append($result, $woff-val, comma);
+  }
+  @if index($formats, ttf) {
+    $ttf-val: url('#{$file-path}.ttf') format('truetype');
+    $result: append($result, $ttf-val, comma);
+  }
+  @if index($formats, svg) {
+    $svg-val: url('#{$file-path}.svg##{$font-family}') format('svg');
+    $result: append($result, $svg-val, comma);
+  }
+  @return $result;
+}

data/assets/stylesheets/Mixins/_colors.scss

@@ -0,0 +1,71 @@
+//-----------------------------------
+// COLORS MIXINS
+//-----------------------------------
+
+////
+/// @access public
+/// @group Mixins
+/// @type string
+////
+
+/// Background gradient helper
+/// @param {string} $type - type of gradient (radial, linear)
+/// @param {string} $values - value to make gradient background
+/// @example scss - Usage
+///   .foo {
+///     @include background-gradient($values: to right, #2ac363, #cd8c14, #9c4cc2);
+///   }
+/// @example css - Result
+///   .foo {
+///     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYzM2MyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2Q4YzE0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWM0Y2MyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+///     background-size: 100%;
+///     background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #2ac363), color-stop(50%, #cd8c14), color-stop(100%, #9c4cc2));
+///     background-image: -moz-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
+///     background-image: -webkit-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
+///     background-image: linear-gradient(to right, #2ac363, #cd8c14, #9c4cc2);
+///   }
+@mixin background-gradient($type : linear, $values) {
+  $function : #{$type}-gradient;
+  @include background-image($function($values));
+}
+
+/// Background opacity helper
+/// @param {Color} $color - color of your background
+/// @param {int} $opacity - opacity value
+/// @example scss - Usage
+///   .foo {
+///     @include background-opacity(#FF0000);
+///   }
+/// @example css - Result
+///   .foo {
+///     background-color: #FF0000;
+///     background-color: rgba(255, 0, 0, 0.7);
+///   }
+
+@mixin background-opacity($color, $opacity: 0.7) {
+  background-color: $color;
+  background-color: rgba($color, $opacity);
+}
+
+/// Contrast color helper
+/// @param {Color} $color - color of your background
+/// @example scss - Usage
+///   .foo {
+///     @include text-contrast(#0099cc);
+///   }
+/// @example css - Result
+///   .foo {
+///     color: rgba(255, 255, 255, 0.8);
+///   }
+@mixin text-contrast($color) {
+  $color-brightness: round((red($color) * 299) + (green($color) * 587) + (blue($color) * 114) / 1000);
+  $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);
+
+  @if abs($color-brightness) < ($light-color/2){
+    color: rgba($white, 0.8);
+  }
+
+  @else {
+    color: rgba($black, 0.8);
+  }
+}

data/assets/stylesheets/Mixins/_opacity.scss

@@ -0,0 +1,27 @@
+//-----------------------------------
+// OPACITY MIXINS
+//-----------------------------------
+
+////
+/// @access public
+/// @group Mixins
+/// @type string
+////
+
+/// Opacity helper
+/// @param {int} $opacity - opacity ratio
+/// @example scss - Usage
+///   .foo {
+///     @include opacity(0.8);
+///   }
+/// @example css - Result
+///   .foo {
+///     opacity: 0.8;
+///     filter: alpha(opacity=80);
+///   }
+
+@mixin opacity($opacity : 0.7) {
+  opacity: $opacity;
+  $opacity-ie: ($opacity * 100);
+  filter: alpha(opacity=$opacity-ie);
+}

data/assets/stylesheets/Mixins/_typography.scss

@@ -0,0 +1,258 @@
+//-----------------------------------
+// TYPOGRAPHY MIXINS
+//-----------------------------------
+
+////
+/// @access public
+/// @group Mixins
+/// @type string
+////
+
+/// Mixin helper to convert font-size pixel to rem.
+/// @param {int} $font-size - font-size in pixel
+/// @example scss - Usage
+///   .foo {
+///     @include font-size(16px);
+///   }
+/// @example css - Result
+///   .foo {
+///     font-size: 16px;
+///     font-size: 1.142857rem;
+///   }
+
+@mixin font-size($font-size) {
+  font-size: $font-size;
+  font-size: ($font-size / $font-size-base) * 1rem;
+}
+
+/// Mixin helper to output '@font-face'
+/// @param {string} $font-family - font-family name
+/// @param {string} $file-path - path to file without extension
+/// @param {string} $weight - weight of your font (bold, normal, 100, etc...)
+/// @param {string} $style - style of your font (italic, oblique, normal, etc...)
+/// @param {string} $formats - formats of your font files
+/// @example scss - Usage
+///   @include font-face("Arvo", "fonts/arvo-regular-webfont");
+/// @example css - Result
+///   @font-face {
+///     font-family: "Arvo";
+///     font-weight: normal;
+///     font-style: normal;
+///     src:  url('fonts/arvo-regular-webfont.eot');
+///     src:  url('fonts/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
+///           url('fonts/arvo-regular-webfont.woff2') format('woff2'),
+///           url('fonts/arvo-regular-webfont.woff') format('woff'),
+///           url('fonts/arvo-regular-webfont.ttf')  format('truetype'),
+///           url('fonts/arvo-regular-webfont.svg#svgFontName') format('svg');
+///   }
+
+@mixin font-face ($font-family, $file-path, $weight: normal, $style: normal, $formats: eot woff2 woff ttf svg) {
+  @if index('italic' 'oblique', $weight) {
+    $style: $weight;
+    $weight: normal;
+  }
+
+  @font-face {
+    font-family: $font-family;
+    font-weight: $weight;
+    font-style: $style;
+
+    @if index($formats, eot) {
+      src: url('#{$file-path}.eot');
+    }
+    src: font-src($formats, $file-path, $font-family);
+  }
+}
+
+/// Mixin helper to indent first line of paragraphe text
+/// @param {string} $indent - Indentation size
+/// @example scss - Usage
+///   .foo {
+///     @include indent-text();
+///   }
+/// @example css - Result
+///   .foo {
+///     margin: 0;
+///     text-indent: 1.5em;
+///   }
+
+@mixin indent-text ($indent: 1.5em) {
+  p {
+    margin: 0;
+    text-indent: $indent;
+  }
+}
+
+/// Mixin helper to replace underline of link with border-bottom
+/// @param {Color} $color - color of border
+/// @param {string} $style - style of border
+/// @param {string} $width - size of border
+/// @example scss - Usage
+///   .foo {
+///     @include link-replace-underline(red, dotted);
+///   }
+/// @example css - Result
+///   .foo {
+///     text-decoration: none;
+///     border-bottom-width: 1px;
+///     border-bottom-style: dotted;
+///     border-bottom-color: red;
+///   }
+
+@mixin link-replace-underline ($color: inherit, $style: solid, $width: 1px) {
+  text-decoration: none;
+  border-bottom-width: $width;
+  border-bottom-style: $style;
+  @if $color != inherit {
+    border-bottom-color: $color;
+  }
+}
+
+/// Mixin helper to add side line arround text
+/// @param {string} $height - height of side lines
+/// @param {string} $space - space around text
+/// @param {Color} $color - color of side lines
+/// @param {string} $style - styles of side lines
+/// @param {string} $v-adjust - adjust verticality
+/// @param {string} $double - size between 2 lines in same side
+/// @example scss - Usage
+///   .foo {
+///     @include side-lined(5px, $color: red, $double: 0.3em);
+///   }
+/// @example css - Result
+///   .foo {
+///     display: block;
+///     overflow: hidden;
+///     text-align: center;
+///   }
+///   .foo:before,
+///   .foo:after {
+///     content: "";
+///     display: inline-block;
+///     vertical-align: middle;
+///     position: relative;
+///     width: 50%;
+///     border-top-style: solid;
+///     border-top-width: 5px;
+///     border-top-color: red;
+///     height: 0.3em;
+///     border-bottom-style: solid;
+///     border-bottom-width: 5px;
+///     border-bottom-color: $color;
+///   }
+
+@mixin side-lined ($height: 1px, $space: 0.5em, $color: inherit, $style: solid, $v-adjust: false, $double: false) {
+  display: block;
+  overflow: hidden;
+  text-align: center;
+
+  &:before,
+  &:after {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    width: 50%;
+
+    border-top-style: $style;
+    border-top-width: $height;
+
+    @if $color != inherit {
+      border-top-color: $color;
+    }
+
+    @if $v-adjust != false {
+      bottom: $v-adjust;
+    }
+
+    @if $double != false {
+      height: $double;
+      border-bottom-style: $style;
+      border-bottom-width: $height;
+      @if $color != inherit {
+        border-bottom-color: $color;
+      }
+    }
+  }
+
+  &:before {
+    right: $space;
+    margin-left: -50%;
+  }
+  &:after {
+    left: $space;
+    margin-right: -50%;
+  }
+}
+
+/// Mixin helper to truncate text
+/// @param {string} $truncation-boundary - Max size of your container
+/// @example scss - Usage
+///   .foo {
+///     @include truncate(100%);
+///   }
+/// @example css - Result
+///   .foo {
+///     max-width: 100%;
+///     white-space: nowrap;
+///     overflow: hidden;
+///     text-overflow: ellipsis;
+///   }
+
+@mixin truncate($truncation-boundary) {
+  max-width: $truncation-boundary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/// Mixin helper to get action selector
+/// @param {boolean} $active - add active selector
+/// @example scss - Usage
+///   .foo {
+///     @include selected() {
+///       background-color: red;
+///     }
+///   }
+/// @example css - Result
+///   .foo:hover,
+///   .foo:focus{
+///     background-color: red;
+///   }
+
+@mixin selected ($active: false) {
+  @if $active {
+    &:hover,
+    &:focus,
+    &:active {
+      @content;
+    }
+  }
+  @else {
+    &:hover,
+    &:focus {
+      @content;
+    }
+  }
+}
+
+/// Mixin helper to add clearfix pseudo elements
+/// @param {string} $elements - pseudo element selected (before, after)
+/// @example scss - Usage
+///   .foo {
+///     @include clearfix(before);
+///   }
+/// @example css - Result
+///   .foo:before {
+///     display: table;
+///     content: "";
+///     clear: both;
+///   }
+
+@mixin clearfix ($elements: after) {
+  &:#{$elements}{
+    display: table;
+    content: "";
+    clear: both;
+  }
+}

data/assets/stylesheets/Variables/_colors.scss

@@ -12,12 +12,13 @@
 /// Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.
 
 /// Default Gray color
-/// @prop {Color} $black [#000]
-/// @prop {Color} $gray-darker [#494949]
-/// @prop {Color} $gray-dark [#6E6E6E]
-/// @prop {Color} $gray [#929292]
-/// @prop {Color} $gray-light [#AEAEAE]
-/// @prop {Color} $gray-lighter [#C9C9C9]
+/// @prop {Color} black [$black]
+/// @prop {Color} gray-darker [$gray-darker]
+/// @prop {Color} gray-dark [$gray-dark]
+/// @prop {Color} gray [$gray]
+/// @prop {Color} gray-light [$gray-light]
+/// @prop {Color} gray-lighter [$gray-lighter]
+/// @prop {Color} white [$white]
 
 $black:                     #000 !default;
 $gray-darker:               #6f6f6e !default;
@@ -25,13 +26,14 @@ $gray-dark:                 #929292 !default;
 $gray:                      #b7b7b7 !default;
 $gray-light:                #dbdbdb !default;
 $gray-lighter:              #f0f0f0 !default;
+$white:                     #fff !default;
 
 /// GI Main color
-/// @prop {Color} $main-color-darker [#2e4572]
-/// @prop {Color} $main-color-dark [#344e81]
-/// @prop {Color} $main-color [#3d5c98]
-/// @prop {Color} $main-color-light [#6e85b2]
-/// @prop {Color} $main-color-lighter [#9faecc]
+/// @prop {Color} main-color-darker [$main-color-darker]
+/// @prop {Color} main-color-dark [$main-color-dark]
+/// @prop {Color} main-color [$main-color]
+/// @prop {Color} main-color-light [$main-color-light]
+/// @prop {Color} main-color-lighter [$main-color-lighter]
 
 $main-color-darker:         #2e4572 !default;
 $main-color-dark:           #344e81 !default;
@@ -40,11 +42,11 @@ $main-color-light:          #6e85b2 !default;
 $main-color-lighter:        #9faecc !default;
 
 /// GI Secondary color
-/// @prop {Color} $secondary-color-darker [#941515]
-/// @prop {Color} $secondary-color-dark [#A71818]
-/// @prop {Color} $secondary-color [#c51c1c]
-/// @prop {Color} $secondary-color-light [#d45555]
-/// @prop {Color} $secondary-color-lighter [#e38c8e]
+/// @prop {Color} secondary-color-darker [$secondary-color-darker]
+/// @prop {Color} secondary-color-dark [$secondary-color-dark]
+/// @prop {Color} secondary-color [$secondary-color]
+/// @prop {Color} secondary-color-light [$secondary-color-light]
+/// @prop {Color} secondary-color-lighter [$secondary-color-lighter]
 
 $secondary-color-darker:    #941515 !default;
 $secondary-color-dark:      #A71818 !default;
@@ -53,12 +55,12 @@ $secondary-color-light:     #d45555 !default;
 $secondary-color-lighter:   #e38c8e !default;
 
 /// Brand color
-/// @prop {Color} $brand-primary [#3d5c98]
-/// @prop {Color} $brand-secondary [#c51c1c]
-/// @prop {Color} $brand-success [#5cb85c]
-/// @prop {Color} $brand-info [#5bc0de]
-/// @prop {Color} $brand-warning [#f0ad4e]
-/// @prop {Color} $brand-danger [#d9534f]
+/// @prop {Color} brand-primary [$brand-primary]
+/// @prop {Color} brand-secondary [$brand-secondary]
+/// @prop {Color} brand-success [$brand-success]
+/// @prop {Color} brand-info [$brand-info]
+/// @prop {Color} brand-warning [$brand-warning]
+/// @prop {Color} brand-danger [$brand-danger]
 
 $brand-primary:             $main-color !default;
 $brand-secondary:           $secondary-color !default;

data/assets/stylesheets/Variables/_media-query.scss

@@ -5,14 +5,14 @@
 ////
 /// @access public
 /// @group Media Query
-/// @type media-query
+/// @type string
 ////
 
 /// We use the following media queries in our sass files to create the key breakpoints.
-/// @prop {media-query} $screen-xs [480px] - Extra small devices Phones
-/// @prop {media-query} $screen-sm [768px] - Small devices Tablets
-/// @prop {media-query} $screen-md [992px] - Medium devices
-/// @prop {media-query} $screen-lg [1200px] - Large devices Desktops
+/// @prop {string} screen-xs [$screen-xs] - Extra small devices Phones
+/// @prop {string} screen-sm [$screen-sm] - Small devices Tablets
+/// @prop {string} screen-md [$screen-md] - Medium devices
+/// @prop {string} screen-lg [$screen-lg] - Large devices Desktops
 
 $screen-xs:                  480px !default;
 $screen-sm:                  768px !default;

data/assets/stylesheets/Variables/_typography.scss

@@ -5,41 +5,61 @@
 ////
 /// @access public
 /// @group Typography
-/// @type typography
+/// @type string
 ////
 
 /// Font, line-height, and color for body text, headings, and more.
 
-/// Font familly use on GIPainter
-/// @prop {typography} $font-family-sans-serif ["Helvetica Neue", Helvetica, Arial, sans-serif]
-/// @prop {typography} $font-family-serif [Georgia, "Times New Roman", Times, serif]
-/// @prop {typography} $font-family-monospace [Menlo, Monaco, Consolas, "Courier New", monospace] - Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-/// @prop {typography} $font-family-base ["Helvetica Neue", Helvetica, Arial, sans-serif]
+/// Font familly
+/// @prop {string} font-family-sans-serif [$font-family-sans-serif]
+/// @prop {string} font-family-serif [$font-family-serif]
+/// @prop {string} font-family-monospace [$font-family-monospace] - Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+/// @prop {string} font-family-base [$font-family-base]
 
 $font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 $font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
 $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
 $font-family-base:        $font-family-sans-serif !default;
 
+/// Font size
+/// @prop {typography} font-size-base [$font-size-base]
+/// @prop {typography} font-size-large [$font-size-large]
+/// @prop {typography} font-size-small [$font-size-small]
 
 $font-size-base:          14px !default;
 $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
 $font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
 
-$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
-$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
-$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
-$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
+/// @prop {typography} font-size-h1 [$font-size-h1]
+/// @prop {typography} font-size-h2 [$font-size-h2]
+/// @prop {typography} font-size-h3 [$font-size-h3]
+/// @prop {typography} font-size-h4 [$font-size-h4]
+/// @prop {typography} font-size-h5 [$font-size-h5]
+/// @prop {typography} font-size-h6 [$font-size-h6]
+
+$font-size-h1:            floor(($font-size-base * 2.6)) !default;
+$font-size-h2:            floor(($font-size-base * 2.15)) !default;
+$font-size-h3:            ceil(($font-size-base * 1.7)) !default;
+$font-size-h4:            ceil(($font-size-base * 1.25)) !default;
 $font-size-h5:            $font-size-base !default;
-$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
+$font-size-h6:            ceil(($font-size-base * 0.85)) !default;
+
+/// Line height
+/// @prop {typography} line-height-base [$line-height-base]
+/// @prop {typography} line-height-computed [$line-height-computed] - Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 
-//** Unit-less `line-height` for use in components like buttons.
-$line-height-base:        1.428571429 !default; // 20/14
-//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-base:        1.428571429 !default;
 $line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
 
-//** By default, this inherits from the `<body>`.
+/// Headings by default is inherits from the '<body>'.
+/// @prop {typography} headings-font-family [$headings-font-family]
+/// @prop {typography} headings-font-weight [$headings-font-weight]
+/// @prop {typography} headings-line-height [$headings-line-height]
+/// @prop {typography} headings-color [$headings-color]
+/// @prop {typography} headings-small-color [$headings-small-color]
+
 $headings-font-family:    inherit !default;
 $headings-font-weight:    500 !default;
 $headings-line-height:    1.1 !default;
-$headings-color:          inherit !default;
+$headings-color:          inherit !default;
+$headings-small-color:    inherit !default;

data/assets/stylesheets/Variables/_weight.scss

@@ -1,9 +1,18 @@
-//-- Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-//
-// Note: These variables are not generated into the Customizer.
+//-----------------------------------
+// WEIGHT VARIABLES
+//-----------------------------------
+
+////
+/// @access public
+/// @group Weight
+/// @type string
+////
+
+/// Weight of elements use on our css.
+/// @prop {weight} zindex-popover [$zindex-popover]
+/// @prop {weight} zindex-tooltip [$zindex-tooltip]
+/// @prop {weight} zindex-modal-background [$zindex-modal-background]
+/// @prop {weight} zindex-modal [$zindex-modal]
 
 $zindex-popover:           1030 !default;
 $zindex-tooltip:           1030 !default;

data/assets/stylesheets/_GIPainter-base.scss

@@ -11,6 +11,7 @@
 // -----------------------------------------------------------------------------
 @import "Base/**/*";
 @import "Variables/**/*";
+@import "Functions/**/*";
 @import "Mixins/**/*";
 
 // GIPainter Theme Layout

data/lib/GIPainter-base/version.rb

@@ -1,3 +1,3 @@
 module GIPainter_base
-  VERSION       = '0.2.0'
+  VERSION       = '0.3.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: GIPainter-base
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Genious Interactive
@@ -132,6 +132,11 @@ files:
 - README.md
 - assets/stylesheets/Base/_normalize.scss
 - assets/stylesheets/Base/_typography.scss
+- assets/stylesheets/Functions/_typography.scss
+- assets/stylesheets/Mixins/_colors.scss
+- assets/stylesheets/Mixins/_media-query.scss
+- assets/stylesheets/Mixins/_opacity.scss
+- assets/stylesheets/Mixins/_typography.scss
 - assets/stylesheets/Variables/_colors.scss
 - assets/stylesheets/Variables/_media-query.scss
 - assets/stylesheets/Variables/_typography.scss