accoutrement 0.0.1 → 0.0.2

data/README.md

@@ -16,7 +16,107 @@ who are very smart.
 [snugug]: https://github.com/Snugug/
 [canarymason]: https://github.com/canarymason/
 
-## License
+List of Things
+--------------
+
+### Background
+
+**Functions:**
+- `convert-gradient-angle($deg)`:
+- `convert-linear($angle, $details...)`:
+- `stripes($position, $colors)`
+- `get-palette($color [, $tints, $shades])`
+
+**Mixins:**
+- `gradient-background-image($gradient...)`:
+- `palette($color [, $tints, $shades])`
+
+### Color
+
+*The idea of color-stacks comes from [toolkit][],
+though I've made some alterations to fit into my own process.*
+
+**Settings**:
+- `$contrasted-dark-default   : black                 !default;`
+- `$contrasted-light-default  : white                 !default;`
+- `$default-amounts           : 20% 40% 60% 70% 80%   !default;`
+- `$default-tints             : $default-amounts      !default;`
+- `$default-shades            : $default-amounts      !default;`
+
+**Functions:**
+- `brightness($color)`
+- `contrast($color [, $contrast])`
+- `color-stack($main, $second [, $amounts])`
+- `tint-stack($color [, $amounts])`
+- `shade-stack($color [, $amounts])`
+- `color($color [, $alpha, $tints, $shades])`
+
+### Math
+
+**Functions:**
+- `mod($dividend, $divisor)`
+
+### Media
+
+*These are also adapted from [toolkit][].*
+
+**Settings:**
+- `$default-fluid-width           : max-width 100%  !default;`
+- `$default-fluid-elements        : 'img, video'    !default;`
+- `$default-fluid-ratio           : 16/9            !default;`
+- `$default-fluid-ratio-width     : 100%            !default;`
+- `$default-fluid-ratio-children  : '*'             !default;`
+
+**Mixins:**
+- `fluid-media([$width, $elements])`
+- `fluid-ratio([$ratio, $width, $children])`
+
+### Pseudo-Elements
+
+**Mixins:**
+- `@include before($content)`
+- `@include after($content)`
+- `@include wrap($content)`
+
+### Rhythm
+
+**Functions:**
+- `px-to-rhythm($px [, $from, $round])`
+- `rhythm-image($image [, $from, $round])`
+
+### Sass Lists
+
+**Functions:**
+- `reverse($list)`
+- `remove-duplicates($list)`
+- `filter($list, $target)`
+
+### Tabs
+
+**Settings:**
+- `$default-checked-selector : ':checked'      !default;`
+- `$default-nested-selectors : null            !default;`
+- `$toggle-attribute         : id              !default;`
+- `$title-attribute          : for             !default;`
+- `$content-attribute        : class           !default;`
+
+**Mixins:**
+- `@include tab-defaults`
+- `@include make-tabs($slugs [, $nested, $checked])`
+
+### Type
+
+**Settings:**
+- `$default-dropcap-size           : $base-font-size * 2   !default;`
+- `$default-dropcap-lines          : false                 !default;`
+- `$default-dropcap-padding        : null                  !default;`
+- `$default-dropcap-font-family    : null                  !default;`
+
+**Mixins:**
+- `dropcap([$size, $lines, $padding, $from-size]) { @content }`
+
+License
+-------
 
 Copyright © Eric Meyer.
 

data/stylesheets/accoutrement/_color.scss

@@ -1,10 +1,59 @@
+// ----------------------------------------------------------------------------
+// Brightness
+
+// Returns the visual brightness of a color.
+//
+// brightness($color)
+// - $color: You know.
+@function brightness($color) {
+  @return round((red($color) * 299) + (green($color) * 587) + (blue($color) * 114) / 1000);
+}
+
+// ----------------------------------------------------------------------------
+// Contrast
+
+// Set the default light and dark contrasts.
+$contrasted-dark-default  : black     !default;
+$contrasted-light-default : white     !default;
+
+// Return a light or dark option based on best visual contrast.
+//
+// contrast($color [, $contrast])
+// - $color: The known color to contrast against.
+// - $contrast: Two colors (light and dark) to pick for best contrast.
+@function contrast(
+  $color,
+  $contrast: $contrasted-dark-default $contrasted-light-default
+) {
+  $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.";
+  }
+
+  $color-brightness: brightness($color);
+  $light-contrast-brightness: brightness($contrasted-light);
+  $dark-contrast-brightness: brightness($contrasted-dark);
+
+  $light-diff: abs($color-brightness - $light-contrast-brightness);
+  $dark-diff: abs($color-brightness - $dark-contrast-brightness);
+
+  @return if($light-diff > $dark-diff, $contrasted-light, $contrasted-dark);
+}
+
 // ----------------------------------------------------------------------------
 // Color Stacks
 
-// Set the default mixing intervals for use in color stacks
-$default-amounts  : 20% 40% 60% 70% 80%;
-$default-tints    : $default-amounts;
-$default-shades   : $default-amounts;
+// Set the default mixing intervals for use in color stacks.
+$default-amounts  : 20% 40% 60% 70% 80%     !default;
+$default-tints    : $default-amounts        !default;
+$default-shades   : $default-amounts        !default;
 
 // Returns a list of mixed colors at given intervals
 // based on two initial source colors.
@@ -12,7 +61,7 @@ $default-shades   : $default-amounts;
 // color-stack($main, $second [, $amounts])
 // - $main    : The main color this stack is based on.
 // - $second  : The color to be mixed in at varrying amounts.
-// - $amounts : Optional list of percentage mix intervals;
+// - $amounts : Optional list of percentage mix intervals.
 @function color-stack(
   $main,
   $second,
@@ -78,15 +127,19 @@ $default-shades   : $default-amounts;
   $shades: $default-shades
 ) {
   $saturation: false;
-  $light: false;
-  $base: false;
+  $lightness: false;
+  $hue: hsl(0,0%,50%);
+  $has-hue: false;
   $index: 0;
 
   @each $arg in $color {
-    @if type-of($arg) == 'color' { $base: $arg; }
+    @if type-of($arg) == 'color' {
+      $hue: $arg;
+      $has-hue: true;
+    }
     @if type-of($arg) == 'number' {
       @if unit($arg) != '' {
-        @if $base { $light: $arg; }
+        @if $has-hue or length($color) == 1 { $lightness: $arg; }
         @else{ $saturation: $arg; }
       }
       @else { $index: $arg; }
@@ -105,25 +158,25 @@ $default-shades   : $default-amounts;
     }
   }
 
-  @if $light and $light != 0 {
-    @if $light > 0 { $base: tint($base,$light); }
-    @else { $base: shade($base,abs($light)); }
+  @if $lightness and $lightness != 0 {
+    @if $lightness > 0 { $hue: tint($hue,$lightness); }
+    @else { $hue: shade($hue,abs($lightness)); }
   } @else if $index and $index != 0 {
     $color-stack: compact();
     @if $index > 0 {
       $index: $index + 1;
-      $color-stack: tint-stack($base, $tints);
+      $color-stack: tint-stack($hue, $tints);
     } @else {
       $index: abs($index) + 1;
-      $color-stack: shade-stack($base, $shades);
+      $color-stack: shade-stack($hue, $shades);
     }
     @if $index <= length($color-stack) {
-      $base: nth($color-stack,$index);
+      $hue: nth($color-stack,$index);
     } @else {
       @warn "You don't have #{$index - 1} colors in this stack";
     }
   }
 
-  @if $saturation { $base: scale-color($base, $saturation: $saturation); }
-  @return rgba($base, $alpha);
+  @if $saturation { $hue: scale-color($hue, $saturation: $saturation); }
+  @return rgba($hue, $alpha);
 }

data/stylesheets/accoutrement/_media.scss

@@ -2,7 +2,7 @@
 // Fluid Media
 
 // Default property-value pair for setting fluid width.
-$default-fluid-width    : max-width 100%;
+$default-fluid-width    : max-width 100%  !default;
 
 // Default list of elements for the fluid-media mixin.
 $default-fluid-elements : 'img, video'    !default;

data/stylesheets/accoutrement/_sass-lists.scss

@@ -26,7 +26,7 @@
 
 // Return a list with specific items removed
 //
-// remove-duplicates($list, $target)
+// filter($list, $target)
 // - $list    : The list to filter.
 // - $target  : An item to be removed from the list.
 @function filter($list, $target) {

data/stylesheets/accoutrement/_type.scss

@@ -1,18 +1,17 @@
 // ----------------------------------------------------------------------------
 // Typography
 
-// @private base settings
-$base-font-size         : 16px !default;
+// Default size of the dropcap (in px)
+$default-dropcap-size           : $base-font-size * 2   !default;
+
+// Default number of rhythm-lines for dropcap line-height
+$default-dropcap-lines          : false                 !default;
 
 // The default padding on a dropcap letter
-$default-dropcap-padding      : null;
+$default-dropcap-padding        : null                  !default;
 
 // The default font settings (null == inherit)
-$default-dropcap-font-family    : null;
-$default-dropcap-font-weight    : null;
-$default-dropcap-font-style     : null;
-$default-dropcap-font-variant   : null;
-$default-dropcap-text-transform : null;
+$default-dropcap-font-family    : null                  !default;
 
 // Creates a dropcap using the :first-letter selector
 //
@@ -24,12 +23,13 @@ $default-dropcap-text-transform : null;
 // - $font-family : Optional font-stack for the dropcap.
 // - @content     : Optionally override the default dropcap styles as needed.
 @mixin dropcap(
-  $size         : $base-font-size*2,
-  $lines        : lines-for-font-size($size),
+  $size         : $default-dropcap-size,
+  $lines        : $default-dropcap-lines,
   $padding      : $default-dropcap-padding,
   $from-size    : $base-font-size,
   $font-family  : $default-dropcap-font-family
 ) {
+  $lines: if($lines, $lines, lines-for-font-size($size));
   &:first-letter {
     @include adjust-font-size-to($size,$lines,$from-size);
     font-family: $font-family;

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: accoutrement
 version: !ruby/object:Gem::Version 
-  hash: 29
+  hash: 27
   prerelease: 
   segments: 
   - 0
   - 0
-  - 1
-  version: 0.0.1
+  - 2
+  version: 0.0.2
 platform: ruby
 authors: 
 - Eric Meyer