accoutrement 0.1.10 → 1.0.0.beta.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1f3438106db46419c0fcef5323d4b544f96e9d59
-  data.tar.gz: 1907ebcfa580a38d7e775466ce719b505fc2a17d
+  metadata.gz: 8f7ec922958c4a73010063711ab7ca6138ceb9b9
+  data.tar.gz: 9fe85d88b1734cd03ea6a63e29af13822934feba
 SHA512:
-  metadata.gz: 92b2d1e926d5a3f48e84fc641f49929ca8787d0f03b0f120e0a975fcaea6ff47a1b221e5416adfb1c3cb8d426ed7b97fb130ac0557a0501e953e24f213cb57b9
-  data.tar.gz: d74e5b60d1f5b4a319e5291708eab400fdb95a5c42b619025bc9459672a94abd7fe0cf0eedd7000424337d0e680c61a8c84c87ebbfa62351fa0a34db8f5b81ea
+  metadata.gz: 0ccaa7d21b78efa2c29ab28d901e8942500490638ef44037e56f9cd402f2ef5734a9d77395e927f434ddcda3d55d3c80ad882e79158d826cd93adc8abe0ed051
+  data.tar.gz: 0a2dc36aa72af4c70719d9bd8c34ffe92531dd3d3d107d1b23ce037da0cd2950c1ab8bf99cc449c5dcd4ee9f33c293765f1ee5e94cc5cca342917ec14741e442

data/VERSION

@@ -1 +1 @@
-0.1.9
+1.0.0.beta.0

data/stylesheets/_accoutrement.scss

@@ -8,7 +8,6 @@
 // Utilities
 // ---------
 
-@import 'accoutrement/settings';
 @import 'accoutrement/scale';
 @import 'accoutrement/fonts';
 @import 'accoutrement/color';

data/stylesheets/accoutrement/_arrows.scss

@@ -1,12 +1,12 @@
 // Arrows
 // ======
 
-@include set(arrows, (
+$arrows: (
   direction: down,
   size: 1em,
   spread: auto,
   color: black,
-));
+);
 
 
 // Arrow Base
@@ -28,7 +28,7 @@
 // Arrow
 // -----
 @mixin arrow(
-  $arrow: get(arrows),
+  $arrow: $arrows,
   $place: before,
   $extend: true,
   $root: relative
@@ -37,24 +37,23 @@
 
   position: $root;
 
-  &#{'::' + $place} {
+  &#{':' + $place} {
     @if $extend {
       @extend %_arrow-base;
     } @else {
       @include _arrow-base;
     }
-    @include output-map($arrow);
+    @include render($arrow);
     @content;
   }
 }
 
-
-// Parse Arrow
-// -----------
+// PRIVATE: Parse Arrow
+// --------------------
 @function _parse-arrow(
   $arrow: null
 ) {
-  $_return: get(arrows);
+  $_return: $arrows;
   $_numbers: ();
 
   @if type-of($arrow) == map {
@@ -89,8 +88,8 @@
 }
 
 
-// Build Arrow
-// -----------
+// PRIVATE: Build Arrow
+// --------------------
 @function _build-arrow(
   $arrow
 ) {

data/stylesheets/accoutrement/_color.scss

@@ -1,106 +1,111 @@
 // Color Toolkit
 // =============
 
-@include set(color-keywords, (
-  lightest: 80%,
-  lighter: 50%,
-  light: 20%,
-  dark: -20%,
-  darker: -50%,
-  darkest: -80%,
-));
+$color-functions: (
+  hue: adjust-hue,
+  lightness: scale-lightness,
+  saturation: scale-saturation,
+  alpha: rgba,
+) !default;
 
-$contrasted-dark-default  : black     !default;
-$contrasted-light-default : white     !default;
+$base-colors: () !default;
+$colors: () !default;
+
+$contrasted-dark-default: #000 !default;
+$contrasted-light-default: #fff !default;
+
+
+// Colors
+// ------
+// Add colors to a pallette
+@mixin colors(
+  $map
+) {
+  $colors: map-merge($colors, $map) !global;
+}
 
 
 // Color
 // -----
+// Access your color pallette
 @function color(
-  $args,
-  $alpha: 1
+  $name
 ) {
-  $args: _parse-color($args);
-  $_color: map-get($args, color);
-  $_lightness: map-get($args, lightness);
-  $_saturation: map-get($args, saturation);
-
-  @if $_lightness {
-    @if $_lightness > 0 {
-      $_color: tint($_color, $_lightness);
-    } @else if $_lightness < 0 {
-      $_color: shade($_color, abs($_lightness));
-    }
+  $_return: $name;
+
+  @if color-get($name) {
+    $_return: make-color($name);
   }
 
-  @if $_saturation {
-    $_color: scale-color($_color, $saturation: $_saturation);
+  @if type-of($_return) != color {
+    @warn "#{$name} is not a valid color option."
   }
 
-  @return rgba($_color, $alpha);
+  @return $_return;
 }
 
 
-// Contrast
-// --------
-@function contrast(
-  $color,
-  $contrast: $contrasted-dark-default $contrasted-light-default
+// Make Color
+// ----------
+// Create new colors based on existing colors
+@function make-color(
+  $color
 ) {
-  $contrasted-light: false;
-  $contrasted-dark: false;
-
-  @if length($contrast) == 2 {
-    $light1: brightness(nth($contrast,1));
-    $light2: brightness(nth($contrast,2));
-    $contrasted-light: if($light1 > $light2, nth($contrast,1), nth($contrast,2));
-    $contrasted-dark: if($light1 < $light2, nth($contrast,1), nth($contrast,2));
-  } @else {
-    @warn "Contrast takes two colors (light & dark) for the second argument.";
-  }
+  $_base: null;
+  $_adjustments: ();
+  $_return: $color;
+
+  @if type-of($_return) != color {
+    @each $arg in $color {
+      @if type-of($arg) == map {
+        $_adjustments: $arg;
+      } @else {
+        $_base: if($_base, join($_base, $arg), $arg);
+      }
+    }
 
-  $color-brightness: brightness($color);
-  $light-contrast-brightness: brightness($contrasted-light);
-  $dark-contrast-brightness: brightness($contrasted-dark);
+    @if type-of($_base) != color {
+      @if color-get($_base) {
+        $_base: make-color(color-get($_base));
+      } @else {
+        @warn "#{$_base} is not a valid color."
+      }
+    }
 
-  $light-diff: abs($color-brightness - $light-contrast-brightness);
-  $dark-diff: abs($color-brightness - $dark-contrast-brightness);
+    $_return: _color-adjustments($_base, $_adjustments);
+  }
 
-  @return if($light-diff > $dark-diff, $contrasted-light, $contrasted-dark);
+  @return $_return;
 }
 
 
-// Parse Color
-// -----------
-@function _parse-color(
-  $args
+// Color Get
+// ---------
+@function color-get(
+  $key
 ) {
-  $_has-color: false;
-  $_return: (
-    color: gray,
-    lightness: null,
-    saturation: null,
-  );
-
-  @each $arg in $args {
-    @if type-of($arg) == color {
-      $_return: map-merge($_return, (color: $arg));
-      $_has-color: true;
-    }
+  @return map-get($colors, $key) or map-get($base-colors, $key);
+}
 
-    @else if type-of($arg) == number {
-      @if $_has-color or length($args) == 1 {
-        $_return: map-merge($_return, (lightness: $arg));
+
+// Color Adjustments
+// -----------------
+@function _color-adjustments(
+  $color,
+  $adjustments
+) {
+  @each $function, $value in $adjustments {
+    $function: map-get($color-functions, $function) or $function;
+    @if function-exists($function) {
+      @if $value {
+        $color: call($function, $color, $value...);
       } @else {
-        $_return: map-merge($_return, (saturation: $arg));
+        $color: call($function, $color);
       }
-    }
-
-    @else if type-of($arg) == string {
-      $arg: get(color-keywords, $arg);
-      $_return: map-merge($_return, (lightness: $arg));
+    } @else {
+      @warn "#{$function}() is not a valid function."
     }
   }
 
-  @return $_return;
+  @return $color;
 }

data/stylesheets/accoutrement/_fluid-media.scss

@@ -1,58 +1,83 @@
 // Fluid Media
 // ===========
 
-
-@include set(fluid-media, (
+$fluid-media: (
   ratio: 16/9,
   width: 100%,
   children: '*',
-));
+);
 
 
-// Fluid Ratio
+// Fluid Media
 // -----------
-@mixin fluid-ratio(
-  $args: get(fluid-media)
+@mixin fluid-media(
+  $args: $fluid-media
+) {
+  @include render(_get-fluid-media($args));
+}
+
+
+// PRIVATE: Get Fluid Media
+// ------------------------
+@function _get-fluid-media(
+  $args: $fluid-media
 ) {
-  $_map: ();
+  $_settings: _parse-fluid-media($args);
+  $_ratio: map-get($_settings, ratio);
+  $_width: map-get($_settings, width);
+  $_children: map-get($_settings, children);
+
+  $_return: (
+    height: 0,
+    padding-top: (1 / $_ratio) * $_width,
+    position: relative,
+    width: $_width,
+  );
+
+  $_inner: (
+    display: block,
+    position: absolute,
+    height: 100%,
+    width: 100%,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  );
+
+  @if $_children {
+    $_children: ('> #{$_children}': $_inner);
+    $_return: map-merge($_return, $_children);
+  }
+
+  @return $_return;
+}
+
+
+// PRIVATE: Parse Fluid Media
+// --------------------------
+@function _parse-fluid-media(
+  $args: $fluid-media
+) {
+  $_return: $fluid-media;
 
   @if type-of($args) == map {
-    $_map: $args;
+    $_return: map-merge($fluid-media, $args);
   } @else {
     @each $arg in $args {
       @if type-of($arg) == map {
-        $_map: map-merge($_map, $arg);
+        $_return: map-merge($_return, $arg);
       } @else if type-of($arg) == string {
-        $_map: map-merge($_map, (children: $arg));
+        $_return: map-merge($_return, (children: $arg));
       } @else if type-of($arg) == number {
         @if unitless($arg) {
-          $_map: map-merge($_map, (ratio: $arg));
+          $_return: map-merge($_return, (ratio: $arg));
         } @else {
-          $_map: map-merge($_map, (width: $arg));
+          $_return: map-merge($_return, (width: $arg));
         }
       }
     }
   }
 
-  $_ratio: map-get($_map, ratio);
-  $_width: map-get($_map, width);
-  $_children: map-get($_map, children);
-
-  position: relative;
-  height: 0;
-  padding-top: (1 / $_ratio) * $_width;
-  width: $_width;
-
-  @if $_children {
-    > #{$_children} {
-      display: block;
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  }
+  @return $_return;
 }

data/stylesheets/accoutrement/_fonts.scss

@@ -1,19 +1,21 @@
 // Fontface Tools
 // ==============
 
-@include set(fontface, (
-  formats: woff ttf,
-  valid-styles: italic oblique,
-  valid-weights: 100 200 300 400 500 600 700 800 900 bold bolder lighter,
-));
+$font-formats: woff ttf;
+$fonts: ();
+
+$_font-setting-options: (
+  styles: italic oblique,
+  weights: 100 200 300 400 500 600 700 800 900 bold bolder lighter,
+);
 
 
 // Fonts
 // -----
 // Establish fonts
 @mixin fonts(
-  $fonts: get(fonts),
-  $formats: get(fontface, formats)
+  $fonts: $fonts,
+  $formats: $font-formats
 ) {
   @include import-fonts($fonts, $formats);
   @include font-placeholders($fonts);
@@ -24,14 +26,14 @@
 // ------------
 // Create font-face css
 @mixin import-fonts(
-  $fonts: get(fonts),
-  $formats: get(fontface, formats)
+  $fonts: $fonts,
+  $formats: $font-formats
 ) {
   $_output: _get-font-face($fonts, $formats);
 
   @each $font in $_output {
     @font-face {
-      @include output-map($font);
+      @include render($font);
     }
   }
 }
@@ -41,15 +43,11 @@
 // -----------------
 // Create font-family placeholders
 @mixin font-placeholders(
-  $fonts: get(fonts)
+  $fonts: $fonts
 ) {
   $_output: _get-font-placeholders($fonts);
 
-  @each $font, $map in $_output {
-    #{$font} {
-      @include output-map($map);
-    }
-  }
+  @include render($_output);
 }
 
 
@@ -57,8 +55,8 @@
 // -------------
 // PRIVATE: Return a list of font-face output maps
 @function _get-font-face(
-  $fonts: get(fonts),
-  $formats: get(fontface, formats)
+  $fonts: $fonts,
+  $formats: $font-formats
 ) {
   $_return: ();
 
@@ -97,8 +95,8 @@
   $path,
   $variants: regular
 ) {
-  $_styles: get(fontface, valid-styles);
-  $_weights: get(fontface, valid-weights);
+  $_styles: map-get($_font-setting-options, styles);
+  $_weights: map-get($_font-setting-options, weights);
   $_return: ();
 
   @each $v in $variants {
@@ -134,17 +132,17 @@
 @function _parse-font-styles(
   $face
 ) {
-  $styles: get(fontface, valid-styles);
-  $weights: get(fontface, valid-weights);
+  $_styles: map-get($_font-setting-options, styles);
+  $_weights: map-get($_font-setting-options, weights);
   $return: (
     weight: normal,
     style: normal,
   );
 
   @each $item in $face {
-    @if index($styles, $item) {
+    @if index($_styles, $item) {
       $return: map-merge($return, (style: $item));
-    } @else if index($weights, $item) {
+    } @else if index($_weights, $item) {
       $return: map-merge($return, (weight: $item));
     }
   }
@@ -158,7 +156,7 @@
 // PRIVATE: Return src attribute based on path and formats
 @function _build-font-src(
   $path,
-  $formats: get(fontface, formats)
+  $formats: $font-formats
 ) {
   $options: (
     woff: 'woff',
@@ -183,7 +181,7 @@
 // ---------------------
 // PRIVATE: Return a list of font-placeholder maps ready for output
 @function _get-font-placeholders(
-  $fonts: get(fonts)
+  $fonts: $fonts
 ) {
   $_return: ();
 

data/stylesheets/accoutrement/_icons.scss

@@ -1,6 +1,9 @@
 // Icon Toolkit
 // ============
 
+$icon-font: 'icons';
+$icons: ();
+
 
 // Icon
 // ----
@@ -10,7 +13,7 @@
 ) {
   &::#{$location} {
     @extend %icon;
-    content: get(icons, $name);
+    content: map-get($icons, $name);
     @content;
   }
 }
@@ -21,18 +24,18 @@
 @function icon(
   $name
 ) {
-  @return get(icons, $name),
+  @return map-get($icons, $name),
 }
 
 
 // Data Icons
 // ----------
 @mixin data-icons(
-  $icons: get(icons)
+  $icons: $icons
 ) {
   @each $name, $value in $icons {
-    @if map-has-key(get(icons), $value) {
-      $value: get(icons, $value);
+    @if map-has-key($icons, $value) {
+      $value: map-get($icons, $value);
     }
     [data-icon='#{$name}']:before { content: $value; }
   }
@@ -43,7 +46,7 @@
 // ------------
 
 @mixin icon-placeholder(
-  $name: get(icon-font)
+  $name: $icon-font
 ) {
   %icon {
     font-family: $name;

data/stylesheets/accoutrement/_maps.scss

@@ -89,12 +89,18 @@
 }
 
 
-// Output Map
-// ----------
-@mixin output-map(
-  $map
+// Render
+// ------
+@mixin render(
+  $css
 ) {
-  @each $prop, $val in $map {
-    #{$prop}: $val;
+  @each $key, $value in $css {
+    @if type-of($value) == map {
+      #{$key} {
+        @include render($value);
+      }
+    } @else {
+      #{$key}: $value;
+    }
   }
 }

data/stylesheets/accoutrement/_pseudo-elements.scss

@@ -7,7 +7,7 @@
 @mixin before(
   $content
 ) {
-  &::before {
+  &:before {
     content: $content;
     @content;
   }
@@ -19,7 +19,7 @@
 @mixin after(
   $content
 ) {
-  &::after {
+  &:after {
     content: $content;
     @content;
   }
@@ -33,12 +33,12 @@
 ) {
   $_before: nth($content, 1);
 
-  &::before, &::after {
+  &:before, &:after {
     content: $_before;
     @content;
   }
 
   @if length($content) > 1 {
-    &::after { content: nth($content, 2); }
+    &:after { content: nth($content, 2); }
   }
 }

data/stylesheets/accoutrement/_scale.scss

@@ -3,55 +3,92 @@
 
 @import "compass/typography/vertical_rhythm";
 
-@include set(ratio-options, (
-  octave           : 2,
-  major-seventh    : 15/8,
-  minor-seventh    : 16/9,
-  major-sixth      : 5/3,
-  minor-sixth      : 8/5,
-  fifth            : 3/2,
-  augmented-fourth : 45/32,
-  fourth           : 4/3,
-  major-third      : 5/4,
-  minor-third      : 6/5,
-  major-second     : 9/8,
-  minor-second     : 16/15,
-));
-
-@include set(scale, (
-  xxxlarge  : 4,
-  xxlarge   : 3,
-  xlarge    : 2,
-  large     : 1,
-  normal    : 0,
-  small     : -1,
-  xsmall    : -2,
-  xxsmall   : -3,
-  xxxsmall  : -4,
-));
-
-@include set(ratio, fifth);
+$_ratio-options: (
+  linear            : linear,
+  octave            : 2,
+  major-seventh     : 15/8,
+  minor-seventh     : 16/9,
+  major-sixth       : 5/3,
+  minor-sixth       : 8/5,
+  fifth             : 3/2,
+  augmented-fourth  : 45/32,
+  fourth            : 4/3,
+  major-third       : 5/4,
+  minor-third       : 6/5,
+  major-second      : 9/8,
+  minor-second      : 16/15,
+);
+
+$ratio: fifth !default;
+
+
+// Scale
+// -----
+@function scale(
+  $size,
+  $root: $base-font-size,
+  $ratio: $ratio
+) {
+  $_return: false;
+
+  @if type-of($ratio) == string {
+    $ratio: map-get($_ratio-options, $ratio);
+  }
+
+  @if $ratio == linear {
+    $_return: round($root * $size);
+  } @else {
+    $_return: round($root * pow($ratio, $size));
+  }
+
+  @return $_return;
+}
+
+
+// Sizes
+// -----
+$sizes: (
+  xxxlarge  : scale(4),
+  xxlarge   : scale(3),
+  xlarge    : scale(2),
+  large     : scale(1),
+  normal    : scale(0),
+  small     : scale(-1),
+  xsmall    : scale(-2),
+  xxsmall   : scale(-3),
+  xxxsmall  : scale(-4),
+);
 
 
 // Size
 // ----
 @function size(
-  $multiplier: normal,
-  $root: $base-font-size,
-  $ratio: get(ratio)
+  $size,
+  $unit: $rhythm-unit
 ) {
-  $_return: $multiplier;
-
-  @if type-of($multiplier) == string {
-    $multiplier: get(scale, $multiplier);
+  @if type-of($size) == string {
+    $size: map-get($sizes, $size);
   }
 
-  @if type-of($ratio) == string {
-    $ratio: get(ratio-options, $ratio);
+  @if $unit == rem {
+    $size: rem($size);
   }
 
-  @if unit($multiplier) == '' {
-    $_return: round($root * pow($ratio, $multiplier));
+  @return $size;
+}
+
+
+// Rem
+// ---
+@function rem(
+  $size
+) {
+  $_return: $size;
+
+  @if type-of($size) == number
+    and not unitless($size)
+    and unit($size) != rem {
+    $_return: convert-length($size, rem);
   }
 
   @return $_return;
@@ -76,7 +113,7 @@
   $lines: false
 ) {
   $_return: if($lines, (lines: $lines), ());
-  $size: size($size);
+  $size: size($size, px);
 
   @return map-merge($_return, (to_size: $size));
 }

data/stylesheets/accoutrement/_strings.scss

@@ -3,6 +3,7 @@
 
 $interpolation-format-string: '%s';
 
+
 // String Replace
 // --------------
 // Return a string, with a substring replaced
@@ -11,13 +12,19 @@ $interpolation-format-string: '%s';
   $old,
   $new: ''
 ) {
+  $_return: $string;
   $_i: str-index($string, $old);
   $_n: str-length($old);
 
-  $_a: str-slice($string, 1, $_i - 1);
-  $_z: str-slice($string, $_i + $_n);
+  @if $string == $old {
+    $_return: $new;
+  } @else if $_i {
+    $_a: str-slice($string, 1, $_i - 1);
+    $_z: str-slice($string, $_i + $_n);
+    $_return: $_a + $new + $_z;
+  }
 
-  @return $_a + $new + $_z;
+  @return $_return;
 }
 
 

data/stylesheets/accoutrement/_tooltips.scss

@@ -1,7 +1,7 @@
 // Tooltips
 // ========
 
-@include set(tooltips, (
+$tooltips: (
   position: top right,
   container: '.tooltip',
   content: '.tooltip-text',
@@ -12,17 +12,17 @@
     display: block,
     z-index: 900,
   ),
-));
+);
 
 
 // Tooltip
 // -------
 @mixin tooltip(
-  $pos: get(tooltips, position)
+  $pos: map-get($tooltips, position)
 ) {
   $extends: _tooltip($pos);
 
-  #{get(tooltips, content)} {
+  #{map-get($tooltips, content)} {
     @extend #{$extends};
     @content;
   }
@@ -30,7 +30,7 @@
 
 
 @function _tooltip(
-  $pos: get(tooltips, position)
+  $pos: map-get($tooltips, position)
 ) {
   $x: null;
   $y: null;
@@ -49,17 +49,17 @@
 // Tooltips
 // --------
 @mixin tooltips {
-  #{get(tooltips, container)} {
+  #{map-get($tooltips, container)} {
     display: inline-block;
     position: relative;
     text-decoration: none;
-    &:hover #{get(tooltips, content)} {
-      @include output-map(get(tooltips, show));
+    &:hover #{map-get($tooltips, content)} {
+      @include render(map-get($tooltips, show));
     }
   }
 
-  #{get(tooltips, content)} {
-    @include output-map(get(tooltips, hide));
+  #{map-get($tooltips, content)} {
+    @include render(map-get($tooltips, hide));
     position: absolute;
     white-space: nowrap;
     pointer-events: none;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: accoutrement
 version: !ruby/object:Gem::Version
-  version: 0.1.10
+  version: 1.0.0.beta.1
 platform: ruby
 authors:
 - Eric M. Suzanne
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: 3.3.0.rc.1
+        version: '3.3'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: 3.3.0.rc.1
+        version: '3.3'
 - !ruby/object:Gem::Dependency
   name: compass
   requirement: !ruby/object:Gem::Requirement
@@ -60,7 +60,6 @@ files:
 - stylesheets/accoutrement/_maps.scss
 - stylesheets/accoutrement/_pseudo-elements.scss
 - stylesheets/accoutrement/_scale.scss
-- stylesheets/accoutrement/_settings.scss
 - stylesheets/accoutrement/_strings.scss
 - stylesheets/accoutrement/_tooltips.scss
 - README.md
@@ -86,9 +85,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - '>'
     - !ruby/object:Gem::Version
-      version: '1.2'
+      version: 1.3.1
 requirements: []
 rubyforge_project: accoutrement
 rubygems_version: 2.1.10

data/stylesheets/accoutrement/_settings.scss

@@ -1,23 +0,0 @@
-// Settings
-// ========
-
-
-$settings: ();
-
-
-// Set
-// ---
-@mixin set(
-  $keys-value...
-) {
-  $settings: deep-set($settings, $keys-value...) !global;
-}
-
-
-// Get
-// ---
-@function get(
-  $keys...
-) {
-  @return deep-get($settings, $keys...);
-}