|
111 | 111 | @return #fff; |
112 | 112 | } |
113 | 113 |
|
114 | | -/// Retrieves a contrast text color for a given color from a color palette. |
| 114 | +/// Converts a rgba color to a hexidecimal color. |
115 | 115 | /// @access public |
116 | | -/// @group Palettes |
117 | | -/// @param {Map} $palette - The source palette map. |
118 | | -/// @param {string} $color - The target color from the color palette. |
119 | | -/// @param {number|variant} $variant - The target color shade from the color palette. |
120 | | -/// @requires igx-color |
121 | | -/// @requires text-contrast |
122 | | -/// @requires hexrgba |
123 | | -/// @returns {Color} [#fff] - Returns white if now palette, color and/or variant matches found. |
124 | | -@function igx-contrast-color($palette, $color, $variant: 500) { |
125 | | - $_color: igx-color($palette, $color, $variant); |
126 | | - @if $_color { |
127 | | - @return text-contrast(hexrgba($_color)); |
| 116 | +/// @requires {function} to-string |
| 117 | +/// @param {Color} $rgba - The rgba color to convert. |
| 118 | +/// @param {Color} $background - The background color to convert against. |
| 119 | +/// @return {Color} - The hexidecimal representation of the rgba value. |
| 120 | +@function hexrgba($rgba, $background: #fff) { |
| 121 | + @if type-of($rgba) == color { |
| 122 | + $red: red($rgba); |
| 123 | + $green: green($rgba); |
| 124 | + $blue: blue($rgba); |
| 125 | + $a: alpha($rgba); |
| 126 | + $r: floor($a * $red + (1 - $a) * red($background)); |
| 127 | + $g: floor($a * $green + (1 - $a) * green($background)); |
| 128 | + $b: floor($a * $blue + (1 - $a) * blue($background)); |
| 129 | + @return rgb($r, $g, $b); |
128 | 130 | } |
129 | | - @return #fff; |
| 131 | + @return $rgba; |
130 | 132 | } |
131 | 133 |
|
132 | 134 | /// Returns a contrast color for a passed color. |
|
138 | 140 | @if type-of($color) == 'color' { |
139 | 141 | $lightContrast: contrast($color, white); |
140 | 142 | $darkContrast: contrast($color, black); |
141 | | - |
| 143 | + |
142 | 144 | @if ($lightContrast > $darkContrast) { |
143 | 145 | @return white; |
144 | 146 | } @else { |
|
148 | 150 | @return $color; |
149 | 151 | } |
150 | 152 |
|
| 153 | +/// Retrieves a contrast text color for a given color from a color palette. |
| 154 | +/// @access public |
| 155 | +/// @group Palettes |
| 156 | +/// @param {Map} $palette - The source palette map. |
| 157 | +/// @param {string} $color - The target color from the color palette. |
| 158 | +/// @param {number|variant} $variant - The target color shade from the color palette. |
| 159 | +/// @requires igx-color |
| 160 | +/// @requires text-contrast |
| 161 | +/// @requires hexrgba |
| 162 | +/// @returns {Color} [#fff] - Returns white if now palette, color and/or variant matches found. |
| 163 | +@function igx-contrast-color($palette, $color, $variant: 500) { |
| 164 | + $_color: igx-color($palette, $color, $variant); |
| 165 | + @if $_color { |
| 166 | + @return text-contrast(hexrgba($_color)); |
| 167 | + } |
| 168 | + @return #fff; |
| 169 | +} |
| 170 | + |
151 | 171 | /// Test if `$value` is a valid direction. |
152 | 172 | /// @access private |
153 | 173 | /// @param {*} $value - The value to test. |
|
198 | 218 | @return $sign + $result; |
199 | 219 | } |
200 | 220 |
|
201 | | -/// Converts a rgba color to a hexidecimal color. |
202 | | -/// @access public |
203 | | -/// @requires {function} to-string |
204 | | -/// @param {Color} $rgba - The rgba color to convert. |
205 | | -/// @param {Color} $background - The background color to convert against. |
206 | | -/// @return {Color} - The hexidecimal representation of the rgba value. |
207 | | -@function hexrgba($rgba, $background: #fff) { |
208 | | - @if type-of($rgba) == color { |
209 | | - $red: red($rgba); |
210 | | - $green: green($rgba); |
211 | | - $blue: blue($rgba); |
212 | | - $a: alpha($rgba); |
213 | | - $r: floor($a * $red + (1 - $a) * red($background)); |
214 | | - $g: floor($a * $green + (1 - $a) * green($background)); |
215 | | - $b: floor($a * $blue + (1 - $a) * blue($background)); |
216 | | - @return rgb($r, $g, $b); |
217 | | - } |
218 | | - @return $rgba; |
219 | | -} |
220 | | - |
221 | | -/// Extends a Map object with the properties of another Map object. |
222 | | -/// @access private |
223 | | -/// @param {Map...} $maps - The source map to get extended. |
224 | | -/// @returns {Map} - Returns the merged maps. |
225 | | -@function extend($maps...) { |
226 | | - $result: (); |
227 | | - |
228 | | - @each $map in $maps { |
229 | | - $result: map-merge($result, map-clean($map)); |
230 | | - } |
231 | | - |
232 | | - @return $result; |
233 | | -} |
234 | | - |
235 | 221 | /// Removes all null key-value pairs from the map |
236 | 222 | /// @access private |
237 | 223 | /// @param {Map} $map - The target map to be cleaned. |
238 | 224 | /// @returns {Map} - Returns a clean map. |
239 | 225 | @function map-clean($map) { |
240 | 226 | $result: (); |
241 | | - |
| 227 | + |
242 | 228 | @each $key, $value in $map { |
243 | 229 | @if($value) != null { |
244 | 230 | $result: map-merge($result, ( |
245 | 231 | #{$key}: $value |
246 | 232 | )); |
247 | 233 | } |
248 | 234 | } |
| 235 | + |
| 236 | + @return $result; |
| 237 | +} |
| 238 | + |
| 239 | +/// Extends a Map object with the properties of another Map object. |
| 240 | +/// @access private |
| 241 | +/// @param {Map...} $maps - The source map to get extended. |
| 242 | +/// @returns {Map} - Returns the merged maps. |
| 243 | +@function extend($maps...) { |
| 244 | + $result: (); |
| 245 | + |
| 246 | + @each $map in $maps { |
| 247 | + $result: map-merge($result, map-clean($map)); |
| 248 | + } |
249 | 249 |
|
250 | 250 | @return $result; |
251 | 251 | } |
|
309 | 309 | $warn: #fbb13c, |
310 | 310 | $error: #ff134a, |
311 | 311 | $grays: #000, |
312 | | - $surface: #fff, |
| 312 | + $surface: #fff |
313 | 313 | ) { |
314 | 314 | $saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700'); |
315 | 315 | $shades: (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87); |
|
0 commit comments