bobjoll 1.634.3

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;

package/scss/modules/variables/_general.scss

@@ -0,0 +1,235 @@
+// Aspect ratio
+$aspect-ratios: (
+	'100': (100, 100),
+	'75': (100, 75),
+	'16-9': (16, 9),
+	'4-3': (4, 3)
+) !default;
+
+// Profile login
+$profile-login-max-width: 560px !default;
+
+// Avatar
+$avatar-width-xs: 36px !default;
+$avatar-height-xs: $avatar-width-xs !default;
+$avatar-width-sm: 44px !default;
+$avatar-height-sm: $avatar-width-sm !default;
+$avatar-width-md: 64px !default;
+$avatar-height-md: $avatar-width-md !default;
+$avatar-width-lg: 128px !default;
+$avatar-height-lg: $avatar-width-lg !default;
+$avatar-width-xl: 164px !default;
+$avatar-height-xl: $avatar-width-xl !default;
+
+// Sizes
+$sizes: 'xs', 'sm', 'md', 'lg', 'xl' !default;
+
+// Base dimensions
+$extra-large-element-height: 64px !default;
+$large-element-height: 54px !default;
+$base-element-height: 44px !default;
+$small-element-height: 34px !default;
+$extra-small-element-height: 24px !default;
+$base-sizes: (
+	'xs': $extra-small-element-height,
+	'sm': $small-element-height,
+	'md': $base-element-height,
+	'lg': $large-element-height,
+	'xl': $extra-large-element-height 
+) !default;
+
+// Grid Settings
+$grid-columns: 12 !default;
+$grid-columns-spacing: 5px !default;
+
+// Shadow
+$base-box-shadow: 0 0 60px color('shadow', 'general', .25) !default;
+$inner-box-shadow: inset $base-box-shadow !default;
+
+// Buttons
+$extra-large-button-height: $extra-large-element-height !default;
+$large-button-height: $large-element-height !default;
+$base-button-height: $base-element-height !default;
+$small-button-height: $small-element-height !default;
+$extra-small-button-height: $extra-small-element-height !default;
+$button-sizes: (
+	'xs': $extra-small-button-height,
+	'sm': $small-button-height,
+	'md': $base-button-height,
+	'lg': $large-button-height,
+	'xl': $extra-large-button-height
+) !default;
+
+// Border
+$base-border-width: 1px !default;
+$base-border-radius: 3px !default;
+$base-border-style: solid !default;
+$base-border: $base-border-width $base-border-style color('border', 'general') !default;
+
+// Typography
+$base-font-family: 'Proxima Nova', 'Verdana', 'Avenir Next' !default;
+$title-font-family: $base-font-family !default;
+
+// Typography Sizes
+$extra-large-font-size: 22px !default;
+$large-font-size: 18px !default;
+$base-font-size: 16px !default;
+$small-font-size: 14px !default;
+$extra-small-font-size: 13px !default;
+
+$h1-font-size: (
+    'min-vw': map-get($breakpoints, 'xs'),
+    'max-vw': map-get($breakpoints, 'xl'),
+    'min-value': 40px,
+    'max-value': 46px,
+) !default;
+$h2-font-size: (
+    'min-vw': map-get($breakpoints, 'xs'),
+    'max-vw': map-get($breakpoints, 'xl'),
+    'min-value': 36px,
+    'max-value': 42px,
+) !default;
+$h3-font-size: (
+    'min-vw': map-get($breakpoints, 'xs'),
+    'max-vw': map-get($breakpoints, 'xl'),
+    'min-value': 32px,
+    'max-value': 38px,
+) !default;
+$h4-font-size: (
+    'min-vw': map-get($breakpoints, 'xs'),
+    'max-vw': map-get($breakpoints, 'xl'),
+    'min-value': 28px,
+    'max-value': 34px,
+) !default;
+$h5-font-size: (
+    'min-vw': map-get($breakpoints, 'xs'),
+    'max-vw': map-get($breakpoints, 'xl'),
+    'min-value': 24px,
+    'max-value': 30px,
+) !default;
+$h6-font-size: (
+    'min-vw': map-get($breakpoints, 'xs'),
+    'max-vw': map-get($breakpoints, 'xl'),
+    'min-value': 20px,
+    'max-value': 26px,
+) !default;   
+
+$font-sizes: (
+	'xs': $extra-small-font-size,
+	'sm': $small-font-size,
+	'md': $base-font-size,
+	'lg': $large-font-size,
+	'xl': $extra-large-font-size
+) !default;
+
+// Typography Weight
+$normal-font-weight: 400 !default;
+$semi-font-weight: 500 !default;
+$bold-font-weight: 600 !default;
+
+$font-weights: (
+	'normal': $normal-font-weight,
+	'semi': $semi-font-weight,
+	'bold': $bold-font-weight,
+) !default;
+
+// Icons
+$extra-large-icon-width: 24px !default;
+$extra-large-icon-height: $extra-large-icon-width !default;
+$large-icon-width: 20px !default;
+$large-icon-height: $large-icon-width !default;
+$base-large-icon-width: 18px !default;
+$base-large-icon-height: $base-large-icon-width !default;
+$base-icon-width: 16px !default;
+$base-icon-height: $base-icon-width !default;
+$small-icon-width: 14px !default;
+$small-icon-height: $small-icon-width !default;
+$extra-small-icon-width: 12px !default;
+$extra-small-icon-height: $extra-small-icon-width !default;
+
+$icon-sizes: (
+	'xs': (
+		'width': $extra-small-icon-width,
+		'height': $extra-small-icon-height
+	),
+	'sm': (
+		'width': $small-icon-width,
+		'height': $small-icon-width
+	),
+	'md': (
+		'width': $base-icon-width,
+		'height': $base-icon-height
+	),
+	'lg': (
+		'width': $large-icon-width,   
+		'height': $large-icon-height
+	),
+	'xl': (
+		'width': $extra-large-icon-width,
+		'height': $extra-large-icon-height
+	)
+) !default;
+
+// Inputs
+$extra-large-input-height: $extra-large-element-height !default;
+$large-input-height: $large-element-height !default;
+$base-input-height: $base-element-height !default;
+$small-input-height: $small-element-height !default;
+$extra-small-input-height: $extra-small-element-height !default;
+$input-sizes: (
+	'xs': $extra-small-input-height,
+	'sm': $small-input-height,
+	'md': $base-input-height,
+	'lg': $large-input-height,
+	'xl': $extra-large-input-height
+) !default;
+
+$extra-large-input-ui-height: 44px !default;
+$large-input-ui-height: 36px !default;
+$base-input-ui-height: 30px !default;
+$small-input-ui-height: 20px !default;
+$extra-small-input-ui-height: 16px !default;
+$input-ui-sizes: (
+	'xs': $extra-small-input-ui-height,
+	'sm': $small-input-ui-height,
+	'md': $base-input-ui-height,
+	'lg': $large-input-ui-height,
+	'xl': $extra-large-input-ui-height
+) !default;
+
+// Line Height
+$base-line-height: 1.6 !default;
+$extra-large-line-height: 2 !default;
+$large-line-height: 1.8 !default;
+$small-line-height: 1.4 !default;
+$extra-small-line-height: 1.2 !default;
+$title-line-height: 1.4 !default;
+$line-height-sizes: (
+	'xs': $extra-small-line-height,
+	'sm': $small-line-height,
+	'md': $base-line-height,
+	'lg': $large-line-height,
+	'xl': $extra-large-line-height
+) !default;
+
+// Spacing
+$extra-large-spacing: 50px !default;
+$large-spacing: 30px !default;
+$base-spacing: 20px !default;
+$small-spacing: 10px !default;
+$extra-small-spacing: 5px !default;
+$spacing-sizes: (
+	'xs': $extra-small-spacing,
+	'sm': $small-spacing,
+	'md': $base-spacing,
+	'lg': $large-spacing,
+	'xl': $extra-large-spacing
+) !default;
+
+// Triangle
+$base-triangle-size: 10px !default;
+
+// Shadow
+$base-box-shadow: 0 0 60px color('shadow', 'general', .25);
+$small-box-shadow: 0 0 30px color('shadow', 'general', .25);
+$inner-box-shadow: inset $base-box-shadow;