@guyn-style/color v0.1.0-alpha.14

Color

The philosophy

Guyn comes with two predefined colorsets; default and social. All colors are easy to change, extend, or overwrite with another colorset. Normally colors are defined as variables in SCSS, we decided that a color function is much more powerful.

The function

The basic function to show a color is color(Red), but in Guyn it's also possible to use it to define the opacity or use another colorset.

// Standard function:
background-color: color(Red); // outputs: background-color: #eb0f33;

// Using the opacity property:
background-color: color(
	Red,
	0.5
); // outputs: background-color: rgba(235, 15, 51, 0.5);

// Using a different colorset:
background-color: color(
	Red,
	1,
	"vibrant"
); // outputs: background-color: #fe5165;

Add your own

Add your own colorset by passing a map. Colors should not have the same name as existing html color names, you can only use them if you capitalize them.

// To create a new colorset and overwrite the default at the same time:
$default-color-set: (
	"Black": #111111,
	"White": #f7f7f7,
	"myBlue": #181160,
	"fireRed": #ed1f35,
);
// NB The new default colorset has to at least contain Black and White.

// Choose a unique variable name to create a new colorset:
$custom-colors: (
	"Black": #111111,
	"White": #f7f7f7,
	"myBlue": #181160,
	"fireRed": #ed1f35,
);

Overwrite

To overwrite the default colorset and add your own:

$default-color-set: "vibrant";

::: tip Include this before the import of @import '~henris' :::

SCSS color function

The colors from the colorsets are all usable in the standard SCSS color functions:

// syntax:
color: darken(colorName, $amount);

// example
color: darken(fireRed, 10%);

Default color variables

Default colorsets

$color-default: (
	"Black": #101010,
	"Dark": #303030,
	"White": #ffffff,
	"Offwhite": #f7f7f7,
	"Gray": #7f7f7f,
	"Green": #10c565,
	"Blue": #1eb3e0,
	"Red": #eb0f33,
	"Brown": #aa834f,
	"Yellow": #f5c505,
	"Orange": #f6790b,
	"Pink": #ca1387,
	"Purple": #7329b1,
	"Turquoise": #3feac3,
) !default; //

$color-social: (
	"dribbble": #ea4c89,
	"facebook": #3b5998,
	"flickr": #ff0084,
	"foursquare": #0072b1,
	"git": #0f0d0e,
	"googleplus": #dd4b39,
	"twitter": #00aced,
	"linkedin": #007bb6,
	"instagram": #517fa4,
	"pinterest": #cb2027,
	"skype": #12a5f4,
	"snapchat": #fffc00,
	"soundcloud": #ff7700,
	"spotify": #2ebd59,
	"tumblr": #32506d,
	"vimeo": #aad450,
	"vine": #00bf8f,
	"vkontakte": #45668e,
	"youtube": #bb0000,
	"wordpress": #21759b,
) !default; //

Default colorset

These are the colors set by default in Guyn. All colors can be easily overwritten as you can read above.

Contra

The function

Contra returns the opposite color of a given value.

For instance, you create a list with colors. The background will get the colors of the list and the text will get the color which suits best.

.element {
	@each $color-name, $color-value in $colors {
		&--#{to-lower-case($color-name)} {
			background-color: $color-value;
			color: contra($color-value);
		}
	}
}

\$colors

If you want to return an alternate black or white color (the black and white defined in the \$colors are default) you can pass a list with colors.

.element {
	@each $color-name, $color-value in $colors {
		&--#{to-lower-case($color-name)} {
			background-color: $color-value;
			color: contra($color-value, 1, ("red", "green"));
		}
	}
}