From 724b4acf6620773b39529cfa061c7f0fbba28887 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Wed, 4 Nov 2015 12:03:16 -0600 Subject: [PATCH] fixed color palette. Sass has no way of 1. obtaining a declared variable by a string, and 2. getting a Color object from a string (required for functions such as darken) --- sass/_mixins-fullpalette.scss | 11 +++++-- sass/_mixins-shared.scss | 18 +++++------ sass/_mixins.scss | 57 +++++++++++++++++++++++++++++------ 3 files changed, 65 insertions(+), 21 deletions(-) diff --git a/sass/_mixins-fullpalette.scss b/sass/_mixins-fullpalette.scss index f4c09c26..eca8dfe1 100644 --- a/sass/_mixins-fullpalette.scss +++ b/sass/_mixins-fullpalette.scss @@ -2,17 +2,24 @@ @mixin generic-variations-colors($args) { + // FIXME: see _mixins.scss regarding variable names and the below FIXME $material-color-names: "red" "pink" "purple" "deep-purple" "indigo" "blue" "light-blue" "cyan" "teal" "green" "light-green" "lime" "yellow" "amber" "orange" "deep-orange" "brown" "grey" "blue-grey"; @each $material-color-name in $material-color-names { // given a color build multiples depths $material-color-numbers: "" "-50" "-100" "-200" "-300" "-400" "-500" "-600" "-700" "-800" "-900" "-A100" "-A200" "-A400" "-A700"; @each $material-color-number in $material-color-numbers { - $args: map-merge($args, ( + $args-variation-color: map-merge($args, ( + material-color-name: $material-color-name, material-color-number: $material-color-number )); - @include generic-variations-color($args) + // FIXME: these colors are defined in _colors.scss. Since there is no way to access a variable as a string + // FIXME: in sass, this needs to be changed to get a permutation as an actual variable. + // FIXME: http://krasimirtsonev.com/blog/article/SASS-interpolation-in-a-name-of-variable-nest-variables-within-variables + + // FIXME: this shows a valid approach and adds a color function: https://github.com/darrenkopp/libsass-net/issues/12 + @include generic-variations-color($args-variation-color) } } } diff --git a/sass/_mixins-shared.scss b/sass/_mixins-shared.scss index c9593f05..a909d923 100644 --- a/sass/_mixins-shared.scss +++ b/sass/_mixins-shared.scss @@ -36,15 +36,14 @@ } @mixin button-variations-content($args) { - - @debug "#{inspect($args)}"; - + //@debug "#{inspect($args)}"; $material-color: map-get($args, material-color); $material-param-1: map-get($args, material-param-1); $contrast-factor: map-get($args, contrast-factor); - background-color: contrast($material-color, darken($material-color, $material-param-1), lighten($material-color, $material-param-1), $contrast-factor); - - //@error "break here"; + background-color: contrast($material-color, + darken($material-color, $material-param-1), + lighten($material-color, $material-param-1), + $contrast-factor); } @mixin bg-color-variations($extra, $default, $material-param-1) { @@ -73,8 +72,6 @@ } } - - // // To use this mixin you should pass a function as final parameter to define // the style. In that definition you can use the following variables to define it. @@ -188,13 +185,14 @@ $material-color-name: map-get($args, material-color-name); $material-color-number: map-get($args, material-color-number); $material-color-full-name: "#{$material-color-name}#{$material-color-number}"; - $material-color: $material-color-full-name; + $material-color: map-get($args, material-color); // $material-color-full-name; + $material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, map-get($args, contrast-factor)); & -material-#{$material-color-name}#{unquote($material-color-number)}#{map-get($args, extra)} { $args-color: map-merge($args, ( material-color-full-name: $material-color-full-name, material-color: $material-color, - material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, map-get($args, contrast-factor)), + material-text-color: $material-text-color, )); @include call-variations-content-mixin($args-color); diff --git a/sass/_mixins.scss b/sass/_mixins.scss index ef057a3a..88317144 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -2,19 +2,58 @@ @mixin generic-variations-colors($args) { - $material-color-names: "red" "pink" "purple" "deep-purple" "indigo" "blue" "light-blue" "cyan" "teal" "green" "light-green" "lime" "yellow" "amber" "orange" "deep-orange" "brown" "grey" "blue-grey"; - @each $material-color-name in $material-color-names { - //// given a color build multiples depths - //$material-color-numbers: "" "-50" "-100" "-200" "-300" "-400" "-500" "-600" "-700" "-800" "-900" "-A100" "-A200" "-A400" "-A700"; - //@each $material-color-number in $material-color-numbers { - // @include generic-variations-color($mixin-name, $extra, $default, $contrast-factor, $material-color-name, $material-color-number) - //} + //$material-color-names: $red $pink $purple $deep-purple $indigo $blue $light-blue $cyan $teal $green $light-green $lime $yellow $amber $orange $deep-orange $brown $grey $blue-grey; + $material-colors: ( + "red": $red, + "pink": $pink, + "purple": $purple, + "deep-purple": $deep-purple, + "indigo": $indigo, + "blue": $blue, + "light-blue": $light-blue, + "cyan": $cyan, + "teal": $teal, + "green": $green, + "light-green": $light-green, + "lime": $lime, + "yellow": $yellow, + "amber": $amber, + "orange": $orange, + "deep-orange": $deep-orange, + "brown": $brown, + "grey": $grey, + "blue-grey": $blue-grey + ); + + @each $material-color-name, $material-color in $material-colors { // build a single depth color palette - $args: map-merge($args, ( + $args-variation-color: map-merge($args, ( + material-color-name: $material-color-name, + material-color: $material-color, material-color-number: "" )); - @include generic-variations-color($args) + @include generic-variations-color($args-variation-color) } + + //@each $material-color-name in $material-color-names { + // //// given a color build multiples depths + // //$material-color-numbers: "" "-50" "-100" "-200" "-300" "-400" "-500" "-600" "-700" "-800" "-900" "-A100" "-A200" "-A400" "-A700"; + // //@each $material-color-number in $material-color-numbers { + // // @include generic-variations-color($mixin-name, $extra, $default, $contrast-factor, $material-color-name, $material-color-number) + // //} + // + // // build a single depth color palette + // $args-variation-color: map-merge($args, ( + // material-color-name: $material-color-name, + // material-color-number: "" + // )); + // + // @include generic-variations-color($args-variation-color) + //} } + + +// http://hugogiraudel.com/2014/01/27/casting-types-in-sass/ +// https://github.com/HugoGiraudel/SassyJSON/blob/master/stylesheets/decode/helpers/color/_color.scss