Advertisement
Guest User

Untitled

a guest
Oct 25th, 2016
55
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.97 KB | None | 0 0
  1.  
  2. // $colors would store final generated scheme
  3.  
  4. $colors : ();
  5.  
  6.  
  7. // Base colors schemes
  8. // Simple lists to set up base colors could be used as well
  9.  
  10. // scheme will be selected from the $scheme value,
  11. // which is the name of the scheme you want to use
  12.  
  13. $schemes : map-get((
  14.  
  15. escala : (
  16.  
  17. pale-silver : #777777,
  18. blue-ncs : #0084B4,
  19. mint-cream : #f5f8fa,
  20. platinum : #e7e7e7,
  21. cadet-grey : #93a3b5
  22.  
  23. ),
  24.  
  25. primavera : (
  26.  
  27. jet : #333333,
  28. wintergreen-dream : #588C73,
  29. eton-blue : #8FC0A9,
  30. sunglow : #FFC33C,
  31. light-khaki : #F2E394,
  32. bege : #FAF3DD
  33.  
  34. )
  35.  
  36. // , scheme-name : ( color-name : color-value (hex,rgba,rgb,etc...))
  37.  
  38. ), $scheme);
  39.  
  40.  
  41. // sub-palette will used to add sub-values at every color from the palette
  42. // you can add any color alternative you wish here
  43.  
  44. @function sub-palette($color, $percentage, $opacity) {
  45.  
  46. $map : (
  47.  
  48. base : $color,
  49. light : lighten($color, $percentage),
  50. dark : darken($color, $percentage),
  51. transparent : transparentize($color, $opacity)
  52.  
  53. // variant-key : variant-value
  54.  
  55. );
  56.  
  57. @return $map;
  58.  
  59. }
  60.  
  61. // append new elements to a $map
  62. // Will be used to add sub-palette into a palette
  63.  
  64. @function append($map, $key, $value) {
  65. @return map-merge($map, ($key : $value));
  66. }
  67.  
  68.  
  69. // color() returns base color
  70.  
  71. @function color($color) {
  72. @return map-get(map-get($colors, $color), base);
  73. }
  74.  
  75.  
  76. // color-variant() would return a variation from the base color
  77. // Variations are defined in the sub-palette()
  78.  
  79. @function color-variant($color, $tone) {
  80. @return map-get(map-get($colors, $color), $tone);
  81. }
  82.  
  83.  
  84. // Loop and complete the task by generating a complete map,
  85. // out from the base color scheme
  86.  
  87. @each $key, $value in $schemes {
  88.  
  89. $tmp : ();
  90. $tmp : append($tmp, $key, sub-palette($value, 50%, 0.5));
  91. $colors : map-merge($colors, $tmp);
  92.  
  93. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement