Created
March 31, 2017 17:51
-
-
Save blairanderson/b7c5d22d8d0fe4f65fd3382387de4326 to your computer and use it in GitHub Desktop.
Color stylesheet skins auto generate color and background from list of color
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import 'variables'; | |
$color-list: 'brand-color' $brand-color, | |
'turquoise' #1abc9c, | |
'green-sea' #16a085, | |
'emerland' #2ecc71, | |
'nephritis' #27ae60, | |
'peter-river' #3498db, | |
'belize-hole' #2980b9, | |
'amethyst' #9b59b6, | |
'wisteria' #8e44ad, | |
'wet-asphalt' #34495e, | |
'midnight-blue' #2c3e50, | |
'sun-flower' #f1c40f, | |
'orange' #f39c12, | |
'carrot' #e67e22, | |
'pumpkin' #d35400, | |
'alizarin' #e74c3c, | |
'pomegranate' #c0392b, | |
'clouds' #ecf0f1, | |
'silver' #bdc3c7, | |
'concrete' #95a5a6, | |
'asbestos' #7f8c8d; | |
@each $item in $color-list { | |
$name: nth($item, 1); | |
$color: nth($item, 2); | |
.#{$name} { | |
color: $color; | |
} | |
.bg-#{$name} { | |
background-color: $color; | |
/* this will return black text for bright backgrounds and white text for dark backgrounds */ | |
/* color: if(lightness($color) > 62%, black, white); */ | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$background-color: #3498db; | |
$brand-blue: #3498db; | |
$brand-color: $brand-blue; | |
$font-color: white; | |
$font-hover-color: darken($font-color, 17%); | |
$turqoise: rgba(26, 188, 156,1.0); | |
$green_sea: rgba(22, 160, 133,1.0); | |
$emerald: rgba(46, 204, 113,1.0); | |
$nephritis: rgba(39, 174, 96,1.0); | |
$peter_river: rgba(52, 152, 219,1.0); | |
$belize_hole: rgba(41, 128, 185,1.0); | |
$amethyst: rgba(155, 89, 182,1.0); | |
$wisteria: rgba(142, 68, 173,1.0); | |
$wet_asphalt: rgba(52, 73, 94,1.0); | |
$midnight_blue: rgba(44, 62, 80,1.0); | |
$sun_flower: rgba(241, 196, 15,1.0); | |
$orange: rgba(243, 156, 18,1.0); | |
$carrot: rgba(230, 126, 34,1.0); | |
$pumpkin: rgba(211, 84, 0,1.0); | |
$alizarin: rgba(231, 76, 60,1.0); | |
$pomegranate: rgba(192, 57, 43,1.0); | |
$clouds: rgba(236, 240, 241,1.0); | |
$silver: rgba(189, 195, 199,1.0); | |
$concrete: rgba(149, 165, 166,1.0); | |
$asbestos: rgba(127, 140, 141,1.0); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment