bobjoll 0.0.4

package/scss/modules/mixins/_helpers.scss

@@ -0,0 +1,224 @@
+// Fluid typo
+@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
+	@each $property in $properties {
+		#{$property}: $min-value;
+	}
+
+	@media screen and (min-width: $min-vw) {
+		@each $property in $properties {
+			#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
+		}
+	}
+
+	@media screen and (min-width: $max-vw) {
+		@each $property in $properties {
+			#{$property}: $max-value;
+		}
+	}
+}
+
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+
+  @return $number;
+}
+
+// Last of map
+@function map-get-last($map) {
+	$last-key: '';
+
+	@each $key, $value in $map {
+		$last-key: $key;
+	}
+
+	@return $last-key;
+}
+
+// Extend map
+@function map-extend($parent-map, $child-map) {
+	$result: $parent-map;
+
+	@each $key, $value in $child-map {
+		@if (not map-has-key($result, $key)) or (type-of(map-get($result, $key)) != type-of($value)) or (not (type-of(map-get($result, $key)) == map and type-of($value) == map)) {
+			$result: map-merge($result, ($key: $value));
+		}
+		@else {
+			$result: map-merge($result, ($key: map-extend(map-get($result, $key), $value)));
+		}
+	}
+
+	@return $result;
+}
+
+// Color
+@function color($color, $group, $opacity: 1, $darken: 0) {
+	$array: map-get($colors, $group);
+
+	@if type-of($array) == "map" {
+		$hex: map-get($array, $color);
+
+		@if $hex == null {
+			@warn "Sorry, but '#{$color}' is not found in '#{$group}'.";
+		} @else {
+			@if type-of($hex) == 'color' {
+				$hex: ( $hex, $opacity, $darken );
+			}
+
+			$color: nth($hex, 1);
+
+			@if nth($hex, 2) and nth($hex, 2) != 1 {
+				$color: rgba($color, nth($hex, 2));
+			}
+
+			@if nth($hex, 3) and nth($hex, 3) != 0 {
+				$color: call(get-function(if(nth($hex, 3) >=0, darken, lighten)), $color, abs(nth($hex, 3)));
+			}
+
+			@if type-of($hex) == 'list' {
+				@if $opacity != 1 {
+					$color: rgba($color, $opacity);
+				}
+
+				@if $darken != 1 {
+					$color: call(get-function(if($darken >=0, darken, lighten)), $color, abs($darken));
+				}
+			}
+
+			@return $color;
+		}
+	} @else {
+		@debug('$array', $array);
+		@debug('$color', $color, $group);
+	}
+}
+
+// Breakpoint
+@mixin breakpoint($size: null, $width: 'max') {
+	@if (map-get($breakpoints, $size)) {
+		$size: map-get($breakpoints, $size) + 0px;
+	}
+
+	@media screen and (#{$width}-width: $size) {
+		@content;
+	}
+}
+
+// Classes
+@mixin element($element) {
+    &__#{$element} {
+        @content;
+    }
+}
+
+@mixin modifier($modifier) {
+    &--#{$modifier} {
+        @content;
+    }
+}
+
+// Fonts
+@mixin font-size($var) {
+	@if (type-of($var) == 'map') {
+		$min-width: if(map-has-key($var, 'min-vw'), map-get($var, 'min-vw'), false);
+		$max-width: if(map-has-key($var, 'max-vw'), map-get($var, 'max-vw'), false);
+		$min-value: if(map-has-key($var, 'min-value'), map-get($var, 'min-value'), false);
+		$max-value: if(map-has-key($var, 'max-value'), map-get($var, 'max-value'), false);
+
+		@if ($min-width != false AND $max-width != false AND $min-value != false AND $max-value != false) {
+			@include fluid-type(font-size, $min-width, $max-width, $min-value, $max-value);
+		} @else {
+			@each $breakpoint, $font-size in $var {
+				@if $breakpoint == null {
+					font-size: $font-size;
+				} @else {
+					@media screen and (min-width: map-get($breakpoints, $breakpoint)) {
+						font-size: $font-size;
+					}
+				}
+			}
+		}
+	} @else {
+		font-size: $var;
+	}
+}
+
+// Extending Placeholder
+@mixin _($name) {
+    @extend %#{$name}-#{$current-breakpoint} !optional;
+}
+
+// Color classes
+@mixin color-classes($array: $colors, $keys: $colors-keys) {
+	@each $key in $keys {
+		$colors: map-get($array, $key);
+		$colors-text: map-get($array, #{$key}-text);
+
+		@each $color-name, $color-hex in $colors {
+			$color-value: color($color-name, $key);
+			$color-text: pick-visible-color(
+				$color-value,
+				color('text', 'general'),
+				color('text-inverted', 'general')
+			);
+			
+			@if $colors-text {
+				$color-text: map-get($colors-text, $color-name);
+			} @else {
+				
+			}
+
+			.bg {
+				@include element($key) {
+					@include modifier($color-name) {
+						color: $color-text;
+						background-color: $color-value;
+					}
+				}
+			}
+
+			.text {
+				@include element($key) {
+					@include modifier($color-name) {
+						color: $color-value;
+					}
+				}
+			}
+			
+			a.text:hover {
+				@include element($key) {
+					@include modifier($color-name) {
+						color: color($color-name, $key, 1, 10);
+					}
+				}
+			}
+		}
+	}
+}
+
+// Best color for background
+@function luma($c) {
+	$-local-red: red(rgba($c, 1.0));
+	$-local-green: green(rgba($c, 1.0));
+	$-local-blue: blue(rgba($c, 1.0));
+
+	@return (0.2126 * $-local-red  +
+	       0.7152 * $-local-green +
+	       0.0722 * $-local-blue) / 255;
+}
+
+@function pick-visible-color($bg, $c1, $c2) {
+	$bg-luma: luma($bg);
+	$c1-luma: luma($c1);
+	$c2-luma: luma($c2);
+
+	$c1-diff: abs($bg-luma - $c1-luma);
+	$c2-diff: abs($bg-luma - $c2-luma);
+
+	@if $c1-diff > $c2-diff {
+		@return $c1;
+	} @else {
+		@return $c2;
+	}
+}

package/scss/modules/variables/_colors.scss

@@ -0,0 +1,447 @@
+// Gray
+$gray-shade-9: #1D262D !default;
+$gray-shade-8: #374957 !default;
+$gray-shade-7: #5F7D95 !default;
+$gray-shade-6: #869FB2 !default;
+$gray-shade-5: #A5B7C6 !default;
+$gray-shade-4: #BAC8D3 !default;
+$gray-shade-3: #CFD9E0 !default;
+$gray-shade-2: #E3E9ED !default;
+$gray-shade-1: #F8FAFB !default;
+
+// Gray named
+$gray-ebony: 			#1D262D !default;
+$gray-oxford: 			#374957 !default;
+$gray-bayoux: 			#4A6375 !default;
+$gray-hoki: 			#5F7D95 !default;
+$gray-bali: 			#869FB2 !default;
+$gray-cadet:			#A5B7C6 !default;
+$gray-heather: 			#BAC8D3 !default;
+$gray-gaysir: 			#CFD9E0 !default;
+$gray-mystic: 			#E3E9ED !default;
+$gray-hades: 			#EFF3F6 !default;
+$gray-aqua: 			#F8FAFB !default;
+
+// Dark blue
+$dark-blue-shade-7: #08192B !default;
+$dark-blue-shade-6: #0B2239 !default;
+$dark-blue-shade-5: #0E2A47 !default;
+$dark-blue-shade-4: #113255 !default;
+$dark-blue-shade-3: #143B63 !default;
+$dark-blue-shade-2: #164372 !default;
+$dark-blue-shade-1: #194C80 !default;
+
+// Dark blue named
+$dark-blue-blackale:	#08192B !default;
+$dark-blue-zodiac:		#0B2239 !default;
+$dark-blue-fc: 	 		#0E2A47 !default;
+$dark-blue-biscay: 		#113255 !default;
+$dark-blue-chathams: 	#143B63 !default;
+$dark-blue-bay: 		#164372 !default;
+$dark-blue-blumine: 	#194C80 !default;
+$dark-blue-sea: 		#1F5A97 !default;
+
+// Purple
+$purple-shade-8: #202095 !default;
+$purple-shade-7: #2D2DB0 !default;
+$purple-shade-6: #3636CC !default;
+$purple-shade-5: #4949E7 !default;
+$purple-shade-4: #5F5FF6 !default;
+$purple-shade-3: #8080F1 !default;
+$purple-shade-2: #B3B3FC !default;
+$purple-shade-1: #D7D7FF !default;
+
+// Purple named
+$purple-jacksons: 		#202095 !default;
+$purple-governor: 		#2D2DB0 !default;
+$purple-spiritual: 		#3636CC !default;
+$purple-piktab:			#4949E7 !default;
+$purple-sara: 			#5F5FF6 !default;
+$purple-portage: 		#8080F1 !default;
+$purple-melrose: 		#B3B3FC !default;
+$purple-fog: 			#D7D7FF !default;
+
+// Blue
+$blue-shade-8: #04458F !default;
+$blue-shade-7: #0353A7 !default;
+$blue-shade-6: #0161CD !default;
+$blue-shade-5: #1273EB !default;
+$blue-shade-4: #2C8CF4 !default;
+$blue-shade-3: #5EB2FC !default;
+$blue-shade-2: #92CDFA !default;
+$blue-shade-1: #C7EBFF !default;
+
+// Blue named
+$blue-congress: 		#04458F !default;
+$blue-endeavour: 		#0353A7 !default;
+$blue-science: 			#0161CD !default;
+$blue-freepik: 			#1273EB !default;
+$blue-campu: 			#2C8CF4 !default;
+$blue-malibu: 			#5EB2FC !default;
+$blue-picton: 			#92CDFA !default;
+$blue-onahau: 			#C7EBFF !default;
+
+// Green
+$green-shade-8: #008B71 !default;
+$green-shade-7: #009D73 !default;
+$green-shade-6: #00AF80 !default;
+$green-shade-5: #2BC48A  !default;
+$green-shade-4: #4AD295 !default;
+$green-shade-3: #60E0A3 !default;
+$green-shade-2: #79EBB2 !default;
+$green-shade-1: #A2F7C5 !default;
+
+// Green named
+$green-jade: 			#008B71 !default;
+$green-shamrock: 		#009D73 !default;
+$green-jungle: 			#00AF80 !default;
+$green-flaticon:		#2BC48A !default;
+$green-pepinen: 		#4AD295 !default;
+$green-snowy: 			#60E0A3 !default;
+$green-hint: 			#79EBB2 !default;
+$green-sugar: 			#A2F7C5 !default;
+
+// Yellow
+$yellow-shade-8: #DD6D10 !default;
+$yellow-shade-7: #EB7D16 !default;
+$yellow-shade-6: #F69110 !default;
+$yellow-shade-5: #FCA120 !default;
+$yellow-shade-4: #FCBD24 !default;
+$yellow-shade-3: #FCD250 !default;
+$yellow-shade-2: #FCDB7E !default;
+$yellow-shade-1: #FFEEB6 !default;
+
+// Yellow named
+$yellow-tango: 			#DD6D10 !default;
+$yellow-poppy: 			#EB7D16 !default;
+$yellow-sin: 			#F69110 !default;
+$yellow-premium:		#FCA120 !default;
+$yellow-bea:	 		#FCBD24 !default;
+$yellow-dandelion: 		#FCD250 !default;
+$yellow-paco:	 		#FCDB7E !default;
+$yellow-buttermilk: 	#FFEEB6 !default;
+
+// Red
+$red-shade-8: #C12020 !default;
+$red-shade-7: #D53232 !default;
+$red-shade-6: #EC3A3B !default;
+$red-shade-5: #FB5252 !default;
+$red-shade-4: #FF8578 !default;
+$red-shade-3: #FFA68F !default;
+$red-shade-2: #FFC8AF !default;
+$red-shade-1: #FFDECC !default;
+
+// Red named
+$red-thunderbird: 		#C12020 !default;
+$red-valencia:	 		#D53232 !default;
+$red-bloody: 			#EC3A3B !default;
+$red-muri:				#FB5252 !default;
+$red-salmon: 			#FF8578 !default;
+$red-lisa: 				#FFA68F !default;
+$red-wax: 				#FFC8AF !default;
+$red-bush: 				#FFDECC !default;
+
+$color-main: #1273eb !default;
+$color-dark: #0E2A47 !default;
+$color-border: $gray-shade-2 !default;
+$color-secondary: $gray-shade-1 !default;
+$color-light: #fff !default;
+$color-heading: $gray-shade-8 !default;
+$color-text: $gray-shade-7 !default;
+$color-premium: #FCA120 !default;
+
+$social-behance: #1769ff !default;
+$social-dribbble: #ea4c89 !default;
+$social-facebook: #1877F2 !default;
+$social-google: #dd4b39 !default;
+$social-instagram: #c32aa3 !default;
+$social-pinterest: #cb2027 !default;
+$social-stumbleupon: #f74425 !default;
+$social-twitter: #55acee !default;
+$social-vimeo: #aad450 !default;
+$social-youtube: #bb0000 !default;
+$social-whatsapp: #25d366 !default;
+$social-telegram: #0088cc !default;
+
+$state-green: $green-flaticon !default;
+$state-blue: $blue-freepik !default;
+$state-gray: $gray-bali !default;
+$state-red: $red-muri !default;
+$state-yellow: $yellow-premium !default;
+$state-purple: $purple-piktab !default;
+
+$global-colors: ( 
+	background:(
+		'badge': $color-dark,
+		'badge-inverted': $color-light,
+		'body': $color-light,
+		'body-inverted': $color-dark,
+		'dropdown': $color-light,
+		'footer': $color-secondary,
+		'header': $color-secondary,
+		'input': $color-light,
+		'input-inverted': $color-dark,
+		'switch': $gray-shade-3,
+		'modal': $color-light,
+		'notification': $color-light,
+		'overlay': ($dark-blue-shade-6, .75, 0),
+		'popover': $color-light,
+		'secondary': $color-secondary,
+		'light': $color-light,
+		'table': $color-light,
+		'table-head': ($color-secondary, 1, +2),
+		'table-odd': ($color-secondary, 1, -2),
+		'tabs': $color-light,	
+		'tabs-active': $color-secondary,
+		'tags': $color-light, 
+		'tags-inverted': $gray-shade-1, 
+		'tooltip': $color-light
+	),
+	social: (
+		'behance': $social-behance, 
+		'dribbble': $social-dribbble,
+		'facebook': $social-facebook,
+		'google': $social-google,
+		'instagram': $social-instagram,
+		'pinterest': $social-pinterest,
+		'stumbleupon': $social-stumbleupon,
+		'telegram': $social-telegram,
+		'twitter': $social-twitter,
+		'vimeo': $social-vimeo,
+		'whatsapp': $social-whatsapp,
+		'youtube': $social-youtube,
+	),
+	state: (
+		'green': $state-green,
+		'blue': $state-blue,
+		'gray': $state-gray,
+		'red': $state-red,
+		'yellow': $state-yellow,
+		'purple': $state-purple
+	),
+	state-text: (
+		'green': $color-light,
+		'blue': $color-light,
+		'gray': $color-light,
+		'red': $color-light,
+		'yellow': $color-light,
+		'purple': $color-light
+	),
+	general: (
+		'border': $color-border,
+		'border-inverted': $color-light,
+		'form-border': $gray-shade-4,
+		'button': $color-main,
+		'button-inverted': $color-light,
+		'heading': $color-heading,
+		'heading-inverted': $color-light,
+		'icon': $color-text,
+		'icon-inverted': $color-light,
+		'link': $color-main,
+		'link-inverted': $color-light,
+		'shadow': $color-dark,
+		'tabs': $color-text,
+		'tabs-border': ($color-secondary, 1, 10),
+		'tabs-active': ($color-main, 1, 1),
+		'tabs-triangle': $color-text,
+		'tabs-triangle-active': $color-border, 
+		'accordion': $gray-shade-8, 
+		'tags': $color-text,
+		'tags-inverted': $color-light,
+		'text': $color-text,
+		'text-inverted': $color-light,
+		'text-secondary': ($color-text, 1, -2),
+	),
+	feedback: (
+		wrapper: $color-light,
+		secondary: $color-main,
+		text: $color-main,
+	),
+	buttons: (
+		'default': $color-main,
+		'green': $state-green,
+		'blue': $state-blue,
+		'gray': $state-gray,
+		'red': $state-red,
+		'yellow': $state-yellow,
+		'purple': $state-purple,
+		'inverted': $color-light,
+	), 
+	buttons-hover: (
+		'default': ($color-main, 1, 5),
+		'green': $green-shade-5,
+		'blue': $blue-shade-5,
+		'gray': $gray-shade-7,
+		'red': $red-shade-5,
+		'yellow': $yellow-shade-5,
+		'purple': $purple-shade-5,
+		'inverted': $gray-shade-2,
+	), 
+	buttons-active: (
+		'default': ($color-main, 1, 10),
+		'green': $green-shade-6,
+		'blue': $blue-shade-6,
+		'gray': $gray-shade-8,
+		'red': $red-shade-6,
+		'yellow': $yellow-shade-6,
+		'purple': $purple-shade-6,
+		'inverted': $gray-shade-2,
+	), 
+	buttons-text: (
+		'default': $color-light,
+		'default-outline': $color-main,
+		'green': $color-light,
+		'green-outline': $state-green,
+		'blue': $color-light,
+		'blue-outline': $state-blue,
+		'gray': $color-light,
+		'gray-outline': $state-gray,
+		'red': $color-light,
+		'red-outline': $state-red,
+		'yellow': $color-light,
+		'yellow-outline': $state-yellow,
+		'purple': $color-light,
+		'purple-outline': $state-purple,
+		'inverted': $color-text,
+		'inverted-outline': $color-light,
+	),
+	dropdown: (
+		bg: transparent,
+		text: $color-text,
+		bg-hover: $color-main,
+		text-hover: $color-light,
+	),
+	'gray': (
+		'9': $gray-shade-9,
+		'8': $gray-shade-8,
+		'7': $gray-shade-7,
+		'6': $gray-shade-6,
+		'5': $gray-shade-5,
+		'4': $gray-shade-4,
+		'3': $gray-shade-3,
+		'2': $gray-shade-2,
+		'1': $gray-shade-1,
+		'ebony': $gray-ebony,
+		'oxford': $gray-oxford,
+		'bayoux': $gray-bayoux,
+		'hoki': $gray-hoki,
+		'bali': $gray-bali,
+		'cadet': $gray-cadet,
+		'heather': $gray-heather,
+		'gaysir': $gray-gaysir,
+		'mystic': $gray-mystic,
+		'hades': $gray-hades,
+		'aqua': $gray-aqua,
+	),
+	'dark-blue': (
+		'7': $dark-blue-shade-7,
+		'6': $dark-blue-shade-6,
+		'5': $dark-blue-shade-5,
+		'4': $dark-blue-shade-4,
+		'3': $dark-blue-shade-3,
+		'2': $dark-blue-shade-2,
+		'1': $dark-blue-shade-1,
+		'blackale':$dark-blue-blackale,
+		'zodiac': $dark-blue-zodiac,
+		'fc': $dark-blue-fc,
+		'biscay': $dark-blue-biscay,
+		'chathams': $dark-blue-chathams,
+		'bay': $dark-blue-bay,
+		'blumine': $dark-blue-blumine,
+		'sea': $dark-blue-sea,
+	),
+	'purple': (
+		'8': $purple-shade-8,
+		'7': $purple-shade-7,
+		'6': $purple-shade-6,
+		'5': $purple-shade-5,
+		'4': $purple-shade-4,
+		'3': $purple-shade-3,
+		'2': $purple-shade-2,
+		'1': $purple-shade-1,
+		'jacksons': $purple-jacksons,
+		'governor': $purple-governor,
+		'spiritual': $purple-spiritual,
+		'piktab': $purple-piktab,		
+		'sara': $purple-sara,
+		'portage': $purple-portage,
+		'melrose': $purple-melrose,
+		'fog': $purple-fog,
+	),
+	'blue': (
+		'8': $blue-shade-8,
+		'7': $blue-shade-7,
+		'6': $blue-shade-6,
+		'5': $blue-shade-5,
+		'4': $blue-shade-4,
+		'3': $blue-shade-3,
+		'2': $blue-shade-2,
+		'1': $blue-shade-1,
+		'congress': $blue-congress,
+		'endeavour': $blue-endeavour,
+		'science': $blue-science,
+		'freepik': $blue-freepik,
+		'campu': $blue-campu,
+		'malibu': $blue-malibu,
+		'picton': $blue-picton,
+		'onahau': $blue-onahau,
+	),
+	'green': (
+		'8': $green-shade-8,
+		'7': $green-shade-7,
+		'6': $green-shade-6,
+		'5': $green-shade-5,
+		'4': $green-shade-4,
+		'3': $green-shade-3,
+		'2': $green-shade-2,
+		'1': $green-shade-1,
+		'jade': $green-jade,
+		'shamrock': $green-shamrock,
+		'jungle': $green-jungle,
+		'flaticon': $green-flaticon,
+		'pepinen': $green-pepinen,
+		'snowy': $green-snowy,
+		'hint': $green-hint,
+		'sugar': $green-sugar,
+	),
+	'yellow': (
+		'8': $yellow-shade-8,
+		'7': $yellow-shade-7,
+		'6': $yellow-shade-6,
+		'5': $yellow-shade-5,
+		'4': $yellow-shade-4,
+		'3': $yellow-shade-3,
+		'2': $yellow-shade-2,
+		'1': $yellow-shade-1,
+		'tango': $yellow-tango,
+		'poppy': $yellow-poppy,
+		'sin': $yellow-sin,
+		'premium': $yellow-premium,
+		'bea': $yellow-bea,
+		'dandelion': $yellow-dandelion,
+		'paco': $yellow-paco,
+		'buttermilk': $yellow-buttermilk,
+	),
+	'red': (
+		'8': $red-shade-8,
+		'7': $red-shade-7,
+		'6': $red-shade-6,
+		'5': $red-shade-5,
+		'4': $red-shade-4,
+		'3': $red-shade-3,
+		'2': $red-shade-2,
+		'1': $red-shade-1,
+		'thunderbird': $red-thunderbird,
+		'valencia': $red-valencia,
+		'bloody': $red-bloody,
+		'muri': $red-muri,
+		'salmon': $red-salmon,
+		'lisa': $red-lisa,
+		'wax': $red-wax,
+		'bush': $red-bush,
+	),
+);
+
+// Colors
+$colors-keys: ( 'general', 'background', 'state' ) !default;;
+$colors: $global-colors !default;