Skip to content

Instantly share code, notes, and snippets.

@koycarraway
Created November 10, 2015 20:31
Show Gist options
  • Save koycarraway/d3b788f3b4c4085cd0b7 to your computer and use it in GitHub Desktop.
Save koycarraway/d3b788f3b4c4085cd0b7 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
//---------------------------
//
// Color variables
//
// Inspired by/based on Erskine's color palette structure:
// http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
//
//---------------------------
$DBglobalColors: (
white: #ffffff,
black: #000000,
blue: (
"25": #e8f6fc,
"50": #c3e9fa,
"100": #a2e0fa,
"200": #6fcff7,
"300": #49c1f5,
"400": #24B4f2,
"500": #00a1e6,
"600": #0086bf,
"700": #006B99,
"800": #005073,
"900": #00364d,
),
) !default;
$DBgrayscaleColors: (
1: #171717,
2: #2e2e2e,
3: #454545,
4: #5c5c5c,
5: #737373,
6: #8a8a8a,
7: #a1a1a1,
8: #b8b8b8,
9: #cfcfcf,
10: #e8e8e8,
) !default;
//---------------------------
//
// Color functions
//
//---------------------------
//---------------------------
//
// Defining acceptable alpha & shade values for color functions
//
//---------------------------
$__alpha-stops: (0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1);
$__shade-vals: ("25", "50", "100", "200", "300", "400", "500", "600", "700", "800", "900");
//---------------------------
//
// The grayscale function takes two arguments:
// REQUIRED: Level of gray
// There are 10 levels of gray, ranging from 1 to 10 (darkest to lightest).
// OPTIONAL: Level of opacity
// There are 11 levels of opacity, ranging from 0.0 to 1.0 (transparent to opaque).
//
// Example: grayscale(1, 1);
// This will create a dark gray that is fully opaque.
//
//---------------------------
@function grayscale($gradation, $alpha: 1) {
@if map-has-key($DBgrayscaleColors, $gradation) {
$alpha-val: $alpha;
@if index($__alpha-stops, $alpha-val) == null {
@error "Only alpha values in 0.1 increments are allowed";
}
$grayscale-val: map-get($DBgrayscaleColors, $gradation);
@return rgba($grayscale-val, $alpha-val);
} @else {
@warn "No gradation of #{$gradation} found in $DBgrayscaleColors map.";
}
}
//---------------------------
//
// The color function takes three arguments:
// REQUIRED: Color
// There are 7 colors (gray, blue, green, red, yellow, black, white).
// OPTIONAL: Shade
// Each color has 6 shades (x-dark, dark, base, medium, light, x-light).
// OPTIONAL: Opacity
// Each shade has 11 levels of opacity, ranging from 0.0 to 1.0 (transparent to opaque).
//
// Example: color(blue);
// This will create a base blue that is fully opaque.
//
// Example 2: color(red, dark, 0.8);
// This will create a dark red that is 80% opaque.
//
// Example 3: color(yellow, 0.6);
// This will create a base yellow that is 60% opaque.
//
//---------------------------
@function color($name, $properties...) {
$n: length($properties);
$i: 1;
$shade-val: "500";
$alpha-val: 1;
@while $i <= $n {
$current-property: (nth($properties, $i));
@if type-of($current-property) == "string" {
$shade-val: $current-property;
} @else if type-of($current-property) == "number" {
$alpha-val: $current-property;
}
$i: $i + 1;
}
@if index($__shade-vals, $shade-val) == null {
@warn "Only the following shades are allowed: " + $__shade-vals;
}
@if index($__alpha-stops, $alpha-val) == null {
@error "Only alpha values in 0.1 increments are allowed";
}
@if map-has-key($DBglobalColors, $name) {
$rgb-val: ();
@if $name == white or $name == black {
$rgb-val: map-get($DBglobalColors, $name);
} @else {
$rgb-val: map-get(map-get($DBglobalColors, $name), $shade-val);
}
@return rgba($rgb-val, $alpha-val);
} @else {
@warn "No global color called #{$name} found."
+ "Are you sure it's in `variables/colors?`";
}
}
.stat {
color: color(blue);
color: color(blue, "25");
color: color(blue, "800");
}
.stat {
color: #00a1e6;
color: #e8f6fc;
color: #005073;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment