ionlyseespots
commented
9 years ago Created a base palette LESS list which has its own variable. Then the variables are assigned a base Material color. Also created a new mixin for am-palette which pulls in the new am-pallete variables.
Now, you have the option to configure the 300 Material color variables , or, update the am-palette variable with your own color.
New variables: // Palette @am-palette-1: @am-clr-red-500; @am-palette-2: @am-clr-pink-500; @am-palette-3: @am-clr-purple-500; @am-palette-4: @am-clr-deep-purple-500; @am-palette-5: @am-clr-indigo-500; @am-palette-6: @am-clr-blue-500; @am-palette-7: @am-clr-light-blue-500; @am-palette-8: @am-clr-cyan-500; @am-palette-9: @am-clr-teal-500; @am-palette-10: @am-clr-green-500; @am-palette-11: @am-clr-light-green-500; @am-palette-12: @am-clr-lime-500; @am-palette-13: @am-clr-yellow-500; @am-palette-14: @am-clr-amber-500; @am-palette-15: @am-clr-orange-500; @am-palette-16: @am-clr-deep-orange-500; @am-palette-17: @am-clr-brown-500; @am-palette-18: @am-clr-grey-500; @am-palette-19: @am-clr-blue-grey-500; @am-palette-20: @am-clr-black;
New mixin // Palette .am-palette(@am-clr, @am-clr-orientation) { & when (@am-clr-orientation = text) { color: extract(@group-palette, @am-clr); } & when (@am-clr-orientation = bg) { background-color: extract(@group-palette, @am-clr); } & when (@am-clr-orientation = border) { border-color: extract(@group-palette, @am-clr); } & when (@am-clr-orientation = fill) { fill: extract(@group-palette, @am-clr); } & when (@am-clr-orientation = stroke) { stroke: extract(@group-palette, @am-clr); } }
Update the 20 base skin classes to use the new am-palette variables // Red .@{prefix}-clr-1 { &-text { .am-palette(1, text); } &-bg { .am-palette(1, bg); } &-border { .am-palette(1, border); } &-fill { .am-palette(1, fill); } &-stroke { .am-palette(1, stroke); } }
20 base colors in Ambient, while designed to work alongside Material palette, need to be available as a variable palette. What I mean is, the mixin variables should be customizable within its own group of colors.
Find a way to nest the variables into the mixin, in such a way that you can customize the starting variable: Material (500) color with a custom color variable.