Matt Rose mattdrose
mattdrose
/ _contrast-luma.scss
Last active
March 8, 2022 14:16
Use SASS to get the contrast color based on a color's luma value (the Y in YIQ). http://en.wikipedia.org/wiki/YIQ This calculates a color that is much more readable. Read more from the W3C. http://www.w3.org/TR/AERT#color-contrast
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
| /* | |
| * Calculate Luma | |
| * | |
| * Luma measures a colors percieved brightness | |
| * by the human eye. | |
| * http://en.wikipedia.org/wiki/YIQ | |
| */ | |
| @function luma($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
| // ---- | |
| // Sass (v3.4.4) | |
| // Compass (v1.0.1) | |
| // ---- | |
| @mixin module($namespace) { | |
| .#{$namespace}, | |
| [class^="#{$namespace}--"], | |
| [class*=" #{$namespace}--"] { | |
| @content; |
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
| // ---- | |
| // Sass (v3.4.4) | |
| // Compass (v1.0.1) | |
| // ---- | |
| @mixin module($namespace) { | |
| .#{$namespace}, | |
| [class^="#{$namespace}--"], | |
| [class*=" #{$namespace}--"] { | |
| @content; |
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
| // ---- | |
| // Sass (v3.4.4) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Shortcuts | |
| @function get($map, $key) { | |
| @return map-get($map, $key); | |
| } |
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
| // ---- | |
| // Sass (v3.4.4) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Shortcuts | |
| @function get($map, $key) { | |
| @return map-get($map, $key); | |
| } | |
| @function merge($map-1, $map-2) { |
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
| // ---- | |
| // Sass (v3.4.4) | |
| // Compass (v1.0.1) | |
| // ---- | |
| /** | |
| ******************************** | |
| * _COLORS.SCSS | |
| ******************************** | |
| */ |
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
| // ---- | |
| // Sass (v3.4.4) | |
| // Compass (v1.0.1) | |
| // ---- | |
| $color: (); | |
| @mixin addColor($name, $value, $helper: false) { | |
| // Add color to $color map | |
| $color: map-merge($color, ($name: $value)) !global; |
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
| // ---- | |
| // Sass (v3.4.5) | |
| // Compass (v1.0.1) | |
| // ---- | |
| $gemini-spacing: ( | |
| type: ( | |
| "push": "margin", | |
| "pad": "padding" | |
| ), |
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
| // ---- | |
| // Sass (v3.4.5) | |
| // Compass (v1.0.1) | |
| // ---- | |
| @function map-deep-merge($map1, $map2) { | |
| $return: $map1; | |
| @each $key, $value in $map2 { | |
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
| // ---- | |
| // Sass (v3.4.5) | |
| // Compass (v1.0.1) | |
| // ---- | |
| @function get($key, $map: null) { | |
| @if $map == null { | |
| $map: $default-settings; | |
| } |
OlderNewer