functions.sass 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. @function mergeColorMaps($bulma-colors, $custom-colors)
  2. // We return at least Bulma's hard-coded colors
  3. $merged-colors: $bulma-colors
  4. // We want a map as input
  5. @if type-of($custom-colors) == 'map'
  6. @each $name, $components in $custom-colors
  7. // The color name should be a string
  8. // and the components either a single color
  9. // or a colors list with at least one element
  10. @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
  11. $color-base: null
  12. $color-invert: null
  13. $color-light: null
  14. $color-dark: null
  15. $value: null
  16. // The param can either be a single color
  17. // or a list of 2 colors
  18. @if type-of($components) == 'color'
  19. $color-base: $components
  20. $color-invert: findColorInvert($color-base)
  21. $color-light: findLightColor($color-base)
  22. $color-dark: findDarkColor($color-base)
  23. @else if type-of($components) == 'list'
  24. $color-base: nth($components, 1)
  25. // If Invert, Light and Dark are provided
  26. @if length($components) > 3
  27. $color-invert: nth($components, 2)
  28. $color-light: nth($components, 3)
  29. $color-dark: nth($components, 4)
  30. // If only Invert and Light are provided
  31. @else if length($components) > 2
  32. $color-invert: nth($components, 2)
  33. $color-light: nth($components, 3)
  34. $color-dark: findDarkColor($color-base)
  35. // If only Invert is provided
  36. @else
  37. $color-invert: nth($components, 2)
  38. $color-light: findLightColor($color-base)
  39. $color-dark: findDarkColor($color-base)
  40. $value: ($color-base, $color-invert, $color-light, $color-dark)
  41. // We only want to merge the map if the color base is an actual color
  42. @if type-of($color-base) == 'color'
  43. // We merge this colors elements as map with Bulma's colors map
  44. // (we can override them this way, no multiple definition for the same name)
  45. // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
  46. $merged-colors: map_merge($merged-colors, ($name: $value))
  47. @return $merged-colors
  48. @function powerNumber($number, $exp)
  49. $value: 1
  50. @if $exp > 0
  51. @for $i from 1 through $exp
  52. $value: $value * $number
  53. @else if $exp < 0
  54. @for $i from 1 through -$exp
  55. $value: $value / $number
  56. @return $value
  57. @function colorLuminance($color)
  58. @if type-of($color) != 'color'
  59. @return 0.55
  60. $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
  61. @each $name, $value in $color-rgb
  62. $adjusted: 0
  63. $value: $value / 255
  64. @if $value < 0.03928
  65. $value: $value / 12.92
  66. @else
  67. $value: ($value + .055) / 1.055
  68. $value: powerNumber($value, 2)
  69. $color-rgb: map-merge($color-rgb, ($name: $value))
  70. @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
  71. @function findColorInvert($color)
  72. @if (colorLuminance($color) > 0.55)
  73. @return rgba(#000, 0.7)
  74. @else
  75. @return #fff
  76. @function findLightColor($color)
  77. @if type-of($color) == 'color'
  78. $l: 96%
  79. @if lightness($color) > 96%
  80. $l: lightness($color)
  81. @return change-color($color, $lightness: $l)
  82. @return $background
  83. @function findDarkColor($color)
  84. @if type-of($color) == 'color'
  85. $base-l: 29%
  86. $luminance: colorLuminance($color)
  87. $luminance-delta: (0.53 - $luminance)
  88. $target-l: round($base-l + ($luminance-delta * 53))
  89. @return change-color($color, $lightness: max($base-l, $target-l))
  90. @return $text-strong
  91. @function bulmaRgba($color, $alpha)
  92. @if type-of($color) != 'color'
  93. @return $color
  94. @return rgba($color, $alpha)
  95. @function bulmaDarken($color, $amount)
  96. @if type-of($color) != 'color'
  97. @return $color
  98. @return darken($color, $amount)
  99. @function bulmaLighten($color, $amount)
  100. @if type-of($color) != 'color'
  101. @return $color
  102. @return lighten($color, $amount)