Last active
August 29, 2015 14:14
-
-
Save ionlyseespots/fa6f9a51fcfb3e00111d to your computer and use it in GitHub Desktop.
Ambient colors. A collection of skin classes (and mixin) to use while building UI.
This file contains hidden or 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
| // Ambient is a CSS framework that makes use of HTML5 elements & CSS3 attributes to layout the document outline. | |
| // Ambient: http://ionlyseespots.github.io/ambient-design/index.html | |
| // Class build: | |
| // .am-clr-NUMBER-ORIENTATION | |
| // | |
| // Class examples for red | |
| // .am-clr-1-text | |
| // .am-clr-1-bg | |
| // .am-clr-1-border | |
| // .am-clr-1-fill | |
| // .am-clr-1-stroke | |
| // | |
| //== Mixin build | |
| // .COLOR(RANGE, ORIENTATION); | |
| // | |
| // COLOR: color | |
| // RANGE: 1-14. The value of 6 is Material 500. | |
| // ORIENTATION: text, bg, border, fill, stroke | |
| // | |
| // Mixin example for red | |
| // .example-text { | |
| // .red(6, text); | |
| // } | |
| // .example-background { | |
| // .red(2, bg); | |
| // } | |
| // | |
| // Red | |
| .am-clr-1 { | |
| &-text { | |
| .red(6, text); | |
| } | |
| &-bg { | |
| .red(6, bg); | |
| } | |
| &-border { | |
| .red(6, border); | |
| } | |
| &-fill { | |
| .red(6, fill); | |
| } | |
| &-stroke { | |
| .red(6, stroke); | |
| } | |
| } | |
| // Pink | |
| .am-clr-2 { | |
| &-text { | |
| .pink(6, text); | |
| } | |
| &-bg { | |
| .pink(6, bg); | |
| } | |
| &-border { | |
| .pink(6, border); | |
| } | |
| &-fill { | |
| .pink(6, fill); | |
| } | |
| &-stroke { | |
| .pink(6, stroke); | |
| } | |
| } | |
| // Purple | |
| .am-clr-3 { | |
| &-text { | |
| .purple(6, text); | |
| } | |
| &-bg { | |
| .purple(6, bg); | |
| } | |
| &-border { | |
| .purple(6, border); | |
| } | |
| &-fill { | |
| .purple(6, fill); | |
| } | |
| &-stroke { | |
| .purple(6, stroke); | |
| } | |
| } | |
| // Deep-purple | |
| .am-clr-4 { | |
| &-text { | |
| .deep-purple(6, text); | |
| } | |
| &-bg { | |
| .deep-purple(6, bg); | |
| } | |
| &-border { | |
| .deep-purple(6, border); | |
| } | |
| &-fill { | |
| .deep-purple(6, fill); | |
| } | |
| &-stroke { | |
| .deep-purple(6, stroke); | |
| } | |
| } | |
| // Indigo | |
| .am-clr-5 { | |
| &-text { | |
| .indigo(6, text); | |
| } | |
| &-bg { | |
| .indigo(6, bg); | |
| } | |
| &-border { | |
| .indigo(6, border); | |
| } | |
| &-fill { | |
| .indigo(6, fill); | |
| } | |
| &-stroke { | |
| .indigo(6, stroke); | |
| } | |
| } | |
| // Blue | |
| .am-clr-6 { | |
| &-text { | |
| .blue(6, text); | |
| } | |
| &-bg { | |
| .blue(6, bg); | |
| } | |
| &-border { | |
| .blue(6, border); | |
| } | |
| &-fill { | |
| .blue(6, fill); | |
| } | |
| &-stroke { | |
| .blue(6, stroke); | |
| } | |
| } | |
| // Light-blue | |
| .am-clr-7 { | |
| &-text { | |
| .light-blue(6, text); | |
| } | |
| &-bg { | |
| .light-blue(6, bg); | |
| } | |
| &-border { | |
| .light-blue(6, border); | |
| } | |
| &-fill { | |
| .light-blue(6, fill); | |
| } | |
| &-stroke { | |
| .light-blue(6, stroke); | |
| } | |
| } | |
| // Cyan | |
| .am-clr-8 { | |
| &-text { | |
| .cyan(6, text); | |
| } | |
| &-bg { | |
| .cyan(6, bg); | |
| } | |
| &-border { | |
| .cyan(6, border); | |
| } | |
| &-fill { | |
| .cyan(6, fill); | |
| } | |
| &-stroke { | |
| .cyan(6, stroke); | |
| } | |
| } | |
| // Teal | |
| .am-clr-9 { | |
| &-text { | |
| .teal(6, text); | |
| } | |
| &-bg { | |
| .teal(6, bg); | |
| } | |
| &-border { | |
| .teal(6, border); | |
| } | |
| &-fill { | |
| .teal(6, fill); | |
| } | |
| &-stroke { | |
| .teal(6, stroke); | |
| } | |
| } | |
| // Green | |
| .am-clr-10 { | |
| &-text { | |
| .green(6, text); | |
| } | |
| &-bg { | |
| .green(6, bg); | |
| } | |
| &-border { | |
| .green(6, border); | |
| } | |
| &-fill { | |
| .green(6, fill); | |
| } | |
| &-stroke { | |
| .green(6, stroke); | |
| } | |
| } | |
| // Light-green | |
| .am-clr-11 { | |
| &-text { | |
| .light-green(6, text); | |
| } | |
| &-bg { | |
| .light-green(6, bg); | |
| } | |
| &-border { | |
| .light-green(6, border); | |
| } | |
| &-fill { | |
| .light-green(6, fill); | |
| } | |
| &-stroke { | |
| .light-green(6, stroke); | |
| } | |
| } | |
| // Lime | |
| .am-clr-12 { | |
| &-text { | |
| .lime(6, text); | |
| } | |
| &-bg { | |
| .lime(6, bg); | |
| } | |
| &-border { | |
| .lime(6, border); | |
| } | |
| &-fill { | |
| .lime(6, fill); | |
| } | |
| &-stroke { | |
| .lime(6, stroke); | |
| } | |
| } | |
| // Yellow | |
| .am-clr-13 { | |
| &-text { | |
| .yellow(6, text); | |
| } | |
| &-bg { | |
| .yellow(6, bg); | |
| } | |
| &-border { | |
| .yellow(6, border); | |
| } | |
| &-fill { | |
| .yellow(6, fill); | |
| } | |
| &-stroke { | |
| .yellow(6, stroke); | |
| } | |
| } | |
| // Amber | |
| .am-clr-14 { | |
| &-text { | |
| .amber(6, text); | |
| } | |
| &-bg { | |
| .amber(6, bg); | |
| } | |
| &-border { | |
| .amber(6, border); | |
| } | |
| &-fill { | |
| .amber(6, fill); | |
| } | |
| &-stroke { | |
| .amber(6, stroke); | |
| } | |
| } | |
| // Orange | |
| .am-clr-15 { | |
| &-text { | |
| .orange(6, text); | |
| } | |
| &-bg { | |
| .orange(6, bg); | |
| } | |
| &-border { | |
| .orange(6, border); | |
| } | |
| &-fill { | |
| .orange(6, fill); | |
| } | |
| &-stroke { | |
| .orange(6, stroke); | |
| } | |
| } | |
| // Deep-orange | |
| .am-clr-16 { | |
| &-text { | |
| .deep-orange(6, text); | |
| } | |
| &-bg { | |
| .deep-orange(6, bg); | |
| } | |
| &-border { | |
| .deep-orange(6, border); | |
| } | |
| &-fill { | |
| .deep-orange(6, fill); | |
| } | |
| &-stroke { | |
| .deep-orange(6, stroke); | |
| } | |
| } | |
| // Brown | |
| .am-clr-17 { | |
| &-text { | |
| .brown(6, text); | |
| } | |
| &-bg { | |
| .brown(6, bg); | |
| } | |
| &-border { | |
| .brown(6, border); | |
| } | |
| &-fill { | |
| .brown(6, fill); | |
| } | |
| &-stroke { | |
| .brown(6, stroke); | |
| } | |
| } | |
| // Grey | |
| .am-clr-18 { | |
| &-text { | |
| .grey(6, text); | |
| } | |
| &-bg { | |
| .grey(6, bg); | |
| } | |
| &-border { | |
| .grey(6, border); | |
| } | |
| &-fill { | |
| .grey(6, fill); | |
| } | |
| &-stroke { | |
| .grey(6, stroke); | |
| } | |
| } | |
| // Blue-grey | |
| .am-clr-19 { | |
| &-text { | |
| .blue-grey(6, text); | |
| } | |
| &-bg { | |
| .blue-grey(6, bg); | |
| } | |
| &-border { | |
| .blue-grey(6, border); | |
| } | |
| &-fill { | |
| .blue-grey(6, fill); | |
| } | |
| &-stroke { | |
| .blue-grey(6, stroke); | |
| } | |
| } | |
| // Black | |
| .am-clr-20 { | |
| &-text { | |
| color: @am-clr-black; | |
| } | |
| &-bg { | |
| background-color: @am-clr-black; | |
| } | |
| &-border { | |
| border-color: @am-clr-black;; | |
| } | |
| &-fill { | |
| fill: @am-clr-black;; | |
| } | |
| &-stroke { | |
| stroke: @am-clr-black;; | |
| } | |
| } | |
| // White | |
| .am-clr-21 { | |
| &-text { | |
| color: @am-clr-white; | |
| } | |
| &-bg { | |
| background-color: @am-clr-white; | |
| } | |
| &-border { | |
| border-color: @am-clr-white; | |
| } | |
| &-fill { | |
| fill: @am-clr-white; | |
| } | |
| &-stroke { | |
| stroke: @am-clr-white; | |
| } | |
| } |
This file contains hidden or 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
| // Red | |
| .red(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-red, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-red, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-red, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-red, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-red, @am-clr); | |
| } | |
| } | |
| // Pink | |
| .pink(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-pink, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-pink, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-pink, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-pink, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-pink, @am-clr); | |
| } | |
| } | |
| // Purple | |
| .purple(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-purple, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-purple, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-purple, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-purple, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-purple, @am-clr); | |
| } | |
| } | |
| // deep-purple | |
| .deep-purple(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-deep-purple, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-deep-purple, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-deep-purple, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-deep-purple, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-deep-purple, @am-clr); | |
| } | |
| } | |
| // indigo | |
| .indigo(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-indigo, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-indigo, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-indigo, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-indigo, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-indigo, @am-clr); | |
| } | |
| } | |
| // blue | |
| .blue(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-blue, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-blue, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-blue, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-blue, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-blue, @am-clr); | |
| } | |
| } | |
| // light-blue | |
| .light-blue(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-light-blue, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-light-blue, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-light-blue, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-light-blue, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-light-blue, @am-clr); | |
| } | |
| } | |
| // cyan | |
| .cyan(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-cyan, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-cyan, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-cyan, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-cyan, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-cyan, @am-clr); | |
| } | |
| } | |
| // teal | |
| .teal(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-teal, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-teal, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-teal, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-teal, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-teal, @am-clr); | |
| } | |
| } | |
| // green | |
| .green(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-green, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-green, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-green, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-green, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-green, @am-clr); | |
| } | |
| } | |
| // light-green | |
| .light-green(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-light-green, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-light-green, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-light-green, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-light-green, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-light-green, @am-clr); | |
| } | |
| } | |
| // lime | |
| .lime(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-lime, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-lime, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-lime, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-lime, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-lime, @am-clr); | |
| } | |
| } | |
| // yellow | |
| .yellow(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-yellow, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-yellow, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-yellow, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-yellow, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-yellow, @am-clr); | |
| } | |
| } | |
| // amber | |
| .amber(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-amber, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-amber, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-amber, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-amber, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-amber, @am-clr); | |
| } | |
| } | |
| // orange | |
| .orange(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-orange, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-orange, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-orange, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-orange, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-orange, @am-clr); | |
| } | |
| } | |
| // deep-orange | |
| .deep-orange(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-deep-orange, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-deep-orange, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-deep-orange, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-deep-orange, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-deep-orange, @am-clr); | |
| } | |
| } | |
| // brown | |
| .brown(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-brown, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-brown, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-brown, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-brown, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-brown, @am-clr); | |
| } | |
| } | |
| // grey | |
| .grey(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-grey, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-grey, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-grey, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-grey, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-grey, @am-clr); | |
| } | |
| } | |
| // blue-grey | |
| .blue-grey(@am-clr, @am-clr-orientation) { | |
| & when (@am-clr-orientation = text) { | |
| color: extract(@group-blue-grey, @am-clr); | |
| } | |
| & when (@am-clr-orientation = bg) { | |
| background-color: extract(@group-blue-grey, @am-clr); | |
| } | |
| & when (@am-clr-orientation = border) { | |
| border-color: extract(@group-blue-grey, @am-clr); | |
| } | |
| & when (@am-clr-orientation = fill) { | |
| fill: extract(@group-blue-grey, @am-clr); | |
| } | |
| & when (@am-clr-orientation = stroke) { | |
| stroke: extract(@group-blue-grey, @am-clr); | |
| } | |
| } |
This file contains hidden or 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
| // Material palette | |
| // http://www.google.com/design/spec/style/color.html | |
| // inspired by: https://github.com/mrmrs/colors | |
| //== Build variable | |
| // @am-clr-COLOR-RANGE | |
| // COLOR: color | |
| // RANGE: 50, 100, 200, 300, A100 and so on. The default value of 500. | |
| // .example-1 { | |
| // color: @am-clr-blue; | |
| // } | |
| // .example-2 { | |
| // background-color: @am-clr-blue-700; | |
| // } | |
| //== Variables | |
| // Red | |
| @group-red: | |
| #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, | |
| #f44336, #e53935, #d32f2f, #c62828, #b71c1c, | |
| #ff8a80, #ff5252, #ff1744, #d50000; | |
| // Pink | |
| @group-pink: | |
| #fce4ec, #f8bbd0, #f48fb1, #f06292, #ec407a, | |
| #e91e63, #d81b60, #c2185b, #ad1457, #880e4f, | |
| #ff80ab, #ff4081, #f50057, #c51162; | |
| // Purple | |
| @group-purple: | |
| #f3e5f5, #e1bee7, #ce93d8, #ba68c8, #ab47bc, | |
| #9c27b0, #8e24aa, #7b1fa2, #6a1b9a, #4a148c, | |
| #ea80fc, #e040fb, #d500f9, #aa00ff; | |
| // Deep Purple | |
| @group-deep-purple: | |
| #ede7f6, #d1c4e9, #b39ddb, #9575cd, #7e57c2, | |
| #673ab7, #5e35b1, #512da8, #4527a0, #311b92, | |
| #b388ff, #7c4dff, #651fff, #6200ea; | |
| // Indigo | |
| @group-indigo: | |
| #e8eaf6, #c5cae9, #9fa8da, #7986cb, #5c6bc0, | |
| #3f51b5, #3949ab, #303f9f, #283593, #1a237e, | |
| #8c9eff, #536dfe, #3d5afe, #304ffe; | |
| // Blue | |
| @group-blue: | |
| #e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, | |
| #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1, | |
| #82b1ff, #448aff, #2979ff, #2962ff; | |
| // Light Blue | |
| @group-light-blue: | |
| #e1f5fe, #b3e5fc, #81d4fa, #4fc3f7, #29b6f6, | |
| #03a9f4, #039be5, #0288d1, #0277bd, #01579b, | |
| #80d8ff, #40c4ff, #00b0ff, #0091ea; | |
| // Cyan | |
| @group-cyan: | |
| #e0f7fa, #b2ebf2, #80deea, #4dd0e1, #26c6da, | |
| #00bcd4, #00acc1, #0097a7, #00838f, #006064, | |
| #84ffff, #18ffff, #00e5ff, #00b8d4; | |
| // Teal | |
| @group-teal: | |
| #e0f2f1, #b2dfdb, #80cbc4, #4db6ac, #26a69a, | |
| #009688, #00897b, #00796b, #00695c, #004d40, | |
| #a7ffeb, #64ffda, #1de9b6, #00bfa5; | |
| // Green | |
| @group-green: | |
| #e8f5e9, #c8e6c9, #a5d6a7, #81c784, #66bb6a, | |
| #4caf50, #43a047, #388e3c, #2e7d32, #1b5e20, | |
| #b9f6ca, #69f0ae, #00e676, #00c853; | |
| // Light Green | |
| @group-light-green: | |
| #f1f8e9, #dcedc8, #c5e1a5, #aed581, #9ccc65, | |
| #8bc34a, #7cb342, #689f38, #558b2f, #33691e, | |
| #ccff90, #b2ff59, #76ff03, #64dd17; | |
| // Lime | |
| @group-lime: | |
| #f9fbe7, #f0f4c3, #e6ee9c, #dce775, #d4e157, | |
| #cddc39, #c0ca33, #afb42b, #9e9d24, #827717, | |
| #f4ff81, #eeff41, #c6ff00, #aeea00; | |
| // Yellow | |
| @group-yellow: | |
| #fffde7, #fff9c4, #fff59d, #fff176, #ffee58, | |
| #ffeb3b, #fdd835, #fbc02d, #f9a825, #f57f17, | |
| #ffff8d, #ffff00, #ffea00, #ffd600; | |
| // Amber | |
| @group-amber: | |
| #fff8e1, #ffecb3, #ffe082, #ffd54f, #ffca28, | |
| #ffc107, #ffb300, #ffa000, #ff8f00, #ff6f00, | |
| #ffe57f, #ffd740, #ffc400, #ffab00; | |
| // Orange | |
| @group-orange: | |
| #fff3e0, #ffe0b2, #ffcc80, #ffb74d, #ffa726, | |
| #ff9800, #fb8c00, #f57c00, #ef6c00, #e65100, | |
| #ffd180, #ffab40, #ff9100, #ff6d00; | |
| // Deep Orange | |
| @group-deep-orange: | |
| #fbe9e7, #ffccbc, #ffab91, #ff8a65, #ff7043, | |
| #ff5722, #f4511e, #e64a19, #d84315, #bf360c, | |
| #ff9e80, #ff6e40, #ff3d00, #dd2c00; | |
| // Brown | |
| @group-brown: | |
| #efebe9, #d7ccc8, #bcaaa4, #a1887f, #8d6e63, | |
| #795548, #6d4c41, #5d4037, #4e342e, #3e2723; | |
| // Grey | |
| @group-grey: | |
| #fafafa, #f5f5f5, #eeeeee, #e0e0e0, #bdbdbd, | |
| #9e9e9e, #757575, #616161, #424242, #212121; | |
| // Blue Grey | |
| @group-blue-grey: | |
| #eceff1, #cfd8dc, #b0bec5, #90a4ae, #78909c, | |
| #607d8b, #546e7a, #455a64, #37474f, #263238; | |
| // Definitions | |
| // -------------------------------------------------------------------------- | |
| // Red | |
| @am-clr-red: extract(@group-red, 6); | |
| @am-clr-red-50: extract(@group-red, 1); | |
| @am-clr-red-100: extract(@group-red, 2); | |
| @am-clr-red-200: extract(@group-red, 3); | |
| @am-clr-red-300: extract(@group-red, 4); | |
| @am-clr-red-400: extract(@group-red, 5); | |
| @am-clr-red-500: extract(@group-red, 6); | |
| @am-clr-red-600: extract(@group-red, 7); | |
| @am-clr-red-700: extract(@group-red, 8); | |
| @am-clr-red-800: extract(@group-red, 9); | |
| @am-clr-red-900: extract(@group-red, 10); | |
| @am-clr-red-A100: extract(@group-red, 11); | |
| @am-clr-red-A200: extract(@group-red, 12); | |
| @am-clr-red-A400: extract(@group-red, 13); | |
| @am-clr-red-A700: extract(@group-red, 14); | |
| // Pink | |
| @am-clr-pink: extract(@group-pink, 6); | |
| @am-clr-pink-50: extract(@group-pink, 1); | |
| @am-clr-pink-100: extract(@group-pink, 2); | |
| @am-clr-pink-200: extract(@group-pink, 3); | |
| @am-clr-pink-300: extract(@group-pink, 4); | |
| @am-clr-pink-400: extract(@group-pink, 5); | |
| @am-clr-pink-500: extract(@group-pink, 6); | |
| @am-clr-pink-600: extract(@group-pink, 7); | |
| @am-clr-pink-700: extract(@group-pink, 8); | |
| @am-clr-pink-800: extract(@group-pink, 9); | |
| @am-clr-pink-900: extract(@group-pink, 10); | |
| @am-clr-pink-A100: extract(@group-pink, 11); | |
| @am-clr-pink-A200: extract(@group-pink, 12); | |
| @am-clr-pink-A400: extract(@group-pink, 13); | |
| @am-clr-pink-A700: extract(@group-pink, 14); | |
| // Purple | |
| @am-clr-purple: extract(@group-purple, 6); | |
| @am-clr-purple-50: extract(@group-purple, 1); | |
| @am-clr-purple-100: extract(@group-purple, 2); | |
| @am-clr-purple-200: extract(@group-purple, 3); | |
| @am-clr-purple-300: extract(@group-purple, 4); | |
| @am-clr-purple-400: extract(@group-purple, 5); | |
| @am-clr-purple-500: extract(@group-purple, 6); | |
| @am-clr-purple-600: extract(@group-purple, 7); | |
| @am-clr-purple-700: extract(@group-purple, 8); | |
| @am-clr-purple-800: extract(@group-purple, 9); | |
| @am-clr-purple-900: extract(@group-purple, 10); | |
| @am-clr-purple-A100: extract(@group-purple, 11); | |
| @am-clr-purple-A200: extract(@group-purple, 12); | |
| @am-clr-purple-A400: extract(@group-purple, 13); | |
| @am-clr-purple-A700: extract(@group-purple, 14); | |
| // Deep Purple | |
| @am-clr-deep-purple: extract(@group-deep-purple, 6); | |
| @am-clr-deep-purple-50: extract(@group-deep-purple, 1); | |
| @am-clr-deep-purple-100: extract(@group-deep-purple, 2); | |
| @am-clr-deep-purple-200: extract(@group-deep-purple, 3); | |
| @am-clr-deep-purple-300: extract(@group-deep-purple, 4); | |
| @am-clr-deep-purple-400: extract(@group-deep-purple, 5); | |
| @am-clr-deep-purple-500: extract(@group-deep-purple, 6); | |
| @am-clr-deep-purple-600: extract(@group-deep-purple, 7); | |
| @am-clr-deep-purple-700: extract(@group-deep-purple, 8); | |
| @am-clr-deep-purple-800: extract(@group-deep-purple, 9); | |
| @am-clr-deep-purple-900: extract(@group-deep-purple, 10); | |
| @am-clr-deep-purple-A100: extract(@group-deep-purple, 11); | |
| @am-clr-deep-purple-A200: extract(@group-deep-purple, 12); | |
| @am-clr-deep-purple-A400: extract(@group-deep-purple, 13); | |
| @am-clr-deep-purple-A700: extract(@group-deep-purple, 14); | |
| // Indigo | |
| @am-clr-indigo: extract(@group-indigo, 6); | |
| @am-clr-indigo-50: extract(@group-indigo, 1); | |
| @am-clr-indigo-100: extract(@group-indigo, 2); | |
| @am-clr-indigo-200: extract(@group-indigo, 3); | |
| @am-clr-indigo-300: extract(@group-indigo, 4); | |
| @am-clr-indigo-400: extract(@group-indigo, 5); | |
| @am-clr-indigo-500: extract(@group-indigo, 6); | |
| @am-clr-indigo-600: extract(@group-indigo, 7); | |
| @am-clr-indigo-700: extract(@group-indigo, 8); | |
| @am-clr-indigo-800: extract(@group-indigo, 9); | |
| @am-clr-indigo-900: extract(@group-indigo, 10); | |
| @am-clr-indigo-A100: extract(@group-indigo, 11); | |
| @am-clr-indigo-A200: extract(@group-indigo, 12); | |
| @am-clr-indigo-A400: extract(@group-indigo, 13); | |
| @am-clr-indigo-A700: extract(@group-indigo, 14); | |
| // Blue | |
| @am-clr-blue: extract(@group-blue, 6); | |
| @am-clr-blue-50: extract(@group-blue, 1); | |
| @am-clr-blue-100: extract(@group-blue, 2); | |
| @am-clr-blue-200: extract(@group-blue, 3); | |
| @am-clr-blue-300: extract(@group-blue, 4); | |
| @am-clr-blue-400: extract(@group-blue, 5); | |
| @am-clr-blue-500: extract(@group-blue, 6); | |
| @am-clr-blue-600: extract(@group-blue, 7); | |
| @am-clr-blue-700: extract(@group-blue, 8); | |
| @am-clr-blue-800: extract(@group-blue, 9); | |
| @am-clr-blue-900: extract(@group-blue, 10); | |
| @am-clr-blue-A100: extract(@group-blue, 11); | |
| @am-clr-blue-A200: extract(@group-blue, 12); | |
| @am-clr-blue-A400: extract(@group-blue, 13); | |
| @am-clr-blue-A700: extract(@group-blue, 14); | |
| // Light Blue | |
| @am-clr-light-blue: extract(@group-light-blue, 6); | |
| @am-clr-light-blue-50: extract(@group-light-blue, 1); | |
| @am-clr-light-blue-100: extract(@group-light-blue, 2); | |
| @am-clr-light-blue-200: extract(@group-light-blue, 3); | |
| @am-clr-light-blue-300: extract(@group-light-blue, 4); | |
| @am-clr-light-blue-400: extract(@group-light-blue, 5); | |
| @am-clr-light-blue-500: extract(@group-light-blue, 6); | |
| @am-clr-light-blue-600: extract(@group-light-blue, 7); | |
| @am-clr-light-blue-700: extract(@group-light-blue, 8); | |
| @am-clr-light-blue-800: extract(@group-light-blue, 9); | |
| @am-clr-light-blue-900: extract(@group-light-blue, 10); | |
| @am-clr-light-blue-A100: extract(@group-light-blue, 11); | |
| @am-clr-light-blue-A200: extract(@group-light-blue, 12); | |
| @am-clr-light-blue-A400: extract(@group-light-blue, 13); | |
| @am-clr-light-blue-A700: extract(@group-light-blue, 14); | |
| // Cyan | |
| @am-clr-cyan: extract(@group-cyan, 6); | |
| @am-clr-cyan-50: extract(@group-cyan, 1); | |
| @am-clr-cyan-100: extract(@group-cyan, 2); | |
| @am-clr-cyan-200: extract(@group-cyan, 3); | |
| @am-clr-cyan-300: extract(@group-cyan, 4); | |
| @am-clr-cyan-400: extract(@group-cyan, 5); | |
| @am-clr-cyan-500: extract(@group-cyan, 6); | |
| @am-clr-cyan-600: extract(@group-cyan, 7); | |
| @am-clr-cyan-700: extract(@group-cyan, 8); | |
| @am-clr-cyan-800: extract(@group-cyan, 9); | |
| @am-clr-cyan-900: extract(@group-cyan, 10); | |
| @am-clr-cyan-A100: extract(@group-cyan, 11); | |
| @am-clr-cyan-A200: extract(@group-cyan, 12); | |
| @am-clr-cyan-A400: extract(@group-cyan, 13); | |
| @am-clr-cyan-A700: extract(@group-cyan, 14); | |
| // Teal | |
| @am-clr-teal: extract(@group-teal, 6); | |
| @am-clr-teal-50: extract(@group-teal, 1); | |
| @am-clr-teal-100: extract(@group-teal, 2); | |
| @am-clr-teal-200: extract(@group-teal, 3); | |
| @am-clr-teal-300: extract(@group-teal, 4); | |
| @am-clr-teal-400: extract(@group-teal, 5); | |
| @am-clr-teal-500: extract(@group-teal, 6); | |
| @am-clr-teal-600: extract(@group-teal, 7); | |
| @am-clr-teal-700: extract(@group-teal, 8); | |
| @am-clr-teal-800: extract(@group-teal, 9); | |
| @am-clr-teal-900: extract(@group-teal, 10); | |
| @am-clr-teal-A100: extract(@group-teal, 11); | |
| @am-clr-teal-A200: extract(@group-teal, 12); | |
| @am-clr-teal-A400: extract(@group-teal, 13); | |
| @am-clr-teal-A700: extract(@group-teal, 14); | |
| // Green | |
| @am-clr-green: extract(@group-green, 6); | |
| @am-clr-green-50: extract(@group-green, 1); | |
| @am-clr-green-100: extract(@group-green, 2); | |
| @am-clr-green-200: extract(@group-green, 3); | |
| @am-clr-green-300: extract(@group-green, 4); | |
| @am-clr-green-400: extract(@group-green, 5); | |
| @am-clr-green-500: extract(@group-green, 6); | |
| @am-clr-green-600: extract(@group-green, 7); | |
| @am-clr-green-700: extract(@group-green, 8); | |
| @am-clr-green-800: extract(@group-green, 9); | |
| @am-clr-green-900: extract(@group-green, 10); | |
| @am-clr-green-A100: extract(@group-green, 11); | |
| @am-clr-green-A200: extract(@group-green, 12); | |
| @am-clr-green-A400: extract(@group-green, 13); | |
| @am-clr-green-A700: extract(@group-green, 14); | |
| // Light Green | |
| @am-clr-light-green: extract(@group-light-green, 6); | |
| @am-clr-light-green-50: extract(@group-light-green, 1); | |
| @am-clr-light-green-100: extract(@group-light-green, 2); | |
| @am-clr-light-green-200: extract(@group-light-green, 3); | |
| @am-clr-light-green-300: extract(@group-light-green, 4); | |
| @am-clr-light-green-400: extract(@group-light-green, 5); | |
| @am-clr-light-green-500: extract(@group-light-green, 6); | |
| @am-clr-light-green-600: extract(@group-light-green, 7); | |
| @am-clr-light-green-700: extract(@group-light-green, 8); | |
| @am-clr-light-green-800: extract(@group-light-green, 9); | |
| @am-clr-light-green-900: extract(@group-light-green, 10); | |
| @am-clr-light-green-A100: extract(@group-light-green, 11); | |
| @am-clr-light-green-A200: extract(@group-light-green, 12); | |
| @am-clr-light-green-A400: extract(@group-light-green, 13); | |
| @am-clr-light-green-A700: extract(@group-light-green, 14); | |
| // Lime | |
| @am-clr-lime: extract(@group-lime, 6); | |
| @am-clr-lime-50: extract(@group-lime, 1); | |
| @am-clr-lime-100: extract(@group-lime, 2); | |
| @am-clr-lime-200: extract(@group-lime, 3); | |
| @am-clr-lime-300: extract(@group-lime, 4); | |
| @am-clr-lime-400: extract(@group-lime, 5); | |
| @am-clr-lime-500: extract(@group-lime, 6); | |
| @am-clr-lime-600: extract(@group-lime, 7); | |
| @am-clr-lime-700: extract(@group-lime, 8); | |
| @am-clr-lime-800: extract(@group-lime, 9); | |
| @am-clr-lime-900: extract(@group-lime, 10); | |
| @am-clr-lime-A100: extract(@group-lime, 11); | |
| @am-clr-lime-A200: extract(@group-lime, 12); | |
| @am-clr-lime-A400: extract(@group-lime, 13); | |
| @am-clr-lime-A700: extract(@group-lime, 14); | |
| //Yellow | |
| @am-clr-yellow: extract(@group-yellow, 6); | |
| @am-clr-yellow-50: extract(@group-yellow, 1); | |
| @am-clr-yellow-100: extract(@group-yellow, 2); | |
| @am-clr-yellow-200: extract(@group-yellow, 3); | |
| @am-clr-yellow-300: extract(@group-yellow, 4); | |
| @am-clr-yellow-400: extract(@group-yellow, 5); | |
| @am-clr-yellow-500: extract(@group-yellow, 6); | |
| @am-clr-yellow-600: extract(@group-yellow, 7); | |
| @am-clr-yellow-700: extract(@group-yellow, 8); | |
| @am-clr-yellow-800: extract(@group-yellow, 9); | |
| @am-clr-yellow-900: extract(@group-yellow, 10); | |
| @am-clr-yellow-A100: extract(@group-yellow, 11); | |
| @am-clr-yellow-A200: extract(@group-yellow, 12); | |
| @am-clr-yellow-A400: extract(@group-yellow, 13); | |
| @am-clr-yellow-A700: extract(@group-yellow, 14); | |
| // Amber | |
| @am-clr-amber: extract(@group-amber, 6); | |
| @am-clr-amber-50: extract(@group-amber, 1); | |
| @am-clr-amber-100: extract(@group-amber, 2); | |
| @am-clr-amber-200: extract(@group-amber, 3); | |
| @am-clr-amber-300: extract(@group-amber, 4); | |
| @am-clr-amber-400: extract(@group-amber, 5); | |
| @am-clr-amber-500: extract(@group-amber, 6); | |
| @am-clr-amber-600: extract(@group-amber, 7); | |
| @am-clr-amber-700: extract(@group-amber, 8); | |
| @am-clr-amber-800: extract(@group-amber, 9); | |
| @am-clr-amber-900: extract(@group-amber, 10); | |
| @am-clr-amber-A100: extract(@group-amber, 11); | |
| @am-clr-amber-A200: extract(@group-amber, 12); | |
| @am-clr-amber-A400: extract(@group-amber, 13); | |
| @am-clr-amber-A700: extract(@group-amber, 14); | |
| // Orange | |
| @am-clr-orange: extract(@group-orange, 6); | |
| @am-clr-orange-50: extract(@group-orange, 1); | |
| @am-clr-orange-100: extract(@group-orange, 2); | |
| @am-clr-orange-200: extract(@group-orange, 3); | |
| @am-clr-orange-300: extract(@group-orange, 4); | |
| @am-clr-orange-400: extract(@group-orange, 5); | |
| @am-clr-orange-500: extract(@group-orange, 6); | |
| @am-clr-orange-600: extract(@group-orange, 7); | |
| @am-clr-orange-700: extract(@group-orange, 8); | |
| @am-clr-orange-800: extract(@group-orange, 9); | |
| @am-clr-orange-900: extract(@group-orange, 10); | |
| @am-clr-orange-A100: extract(@group-orange, 11); | |
| @am-clr-orange-A200: extract(@group-orange, 12); | |
| @am-clr-orange-A400: extract(@group-orange, 13); | |
| @am-clr-orange-A700: extract(@group-orange, 14); | |
| // Deep Orange | |
| @am-clr-deep-orange: extract(@group-deep-orange, 6); | |
| @am-clr-deep-orange-50: extract(@group-deep-orange, 1); | |
| @am-clr-deep-orange-100: extract(@group-deep-orange, 2); | |
| @am-clr-deep-orange-200: extract(@group-deep-orange, 3); | |
| @am-clr-deep-orange-300: extract(@group-deep-orange, 4); | |
| @am-clr-deep-orange-400: extract(@group-deep-orange, 5); | |
| @am-clr-deep-orange-500: extract(@group-deep-orange, 6); | |
| @am-clr-deep-orange-600: extract(@group-deep-orange, 7); | |
| @am-clr-deep-orange-700: extract(@group-deep-orange, 8); | |
| @am-clr-deep-orange-800: extract(@group-deep-orange, 9); | |
| @am-clr-deep-orange-900: extract(@group-deep-orange, 10); | |
| @am-clr-deep-orange-A100: extract(@group-deep-orange, 11); | |
| @am-clr-deep-orange-A200: extract(@group-deep-orange, 12); | |
| @am-clr-deep-orange-A400: extract(@group-deep-orange, 13); | |
| @am-clr-deep-orange-A700: extract(@group-deep-orange, 14); | |
| // Brown | |
| @am-clr-brown: extract(@group-brown, 6); | |
| @am-clr-brown-50: extract(@group-brown, 1); | |
| @am-clr-brown-100: extract(@group-brown, 2); | |
| @am-clr-brown-200: extract(@group-brown, 3); | |
| @am-clr-brown-300: extract(@group-brown, 4); | |
| @am-clr-brown-400: extract(@group-brown, 5); | |
| @am-clr-brown-500: extract(@group-brown, 6); | |
| @am-clr-brown-600: extract(@group-brown, 7); | |
| @am-clr-brown-700: extract(@group-brown, 8); | |
| @am-clr-brown-800: extract(@group-brown, 9); | |
| @am-clr-brown-900: extract(@group-brown, 10); | |
| // Grey | |
| @am-clr-grey: extract(@group-grey, 6); | |
| @am-clr-grey-50: extract(@group-grey, 1); | |
| @am-clr-grey-100: extract(@group-grey, 2); | |
| @am-clr-grey-200: extract(@group-grey, 3); | |
| @am-clr-grey-300: extract(@group-grey, 4); | |
| @am-clr-grey-400: extract(@group-grey, 5); | |
| @am-clr-grey-500: extract(@group-grey, 6); | |
| @am-clr-grey-600: extract(@group-grey, 7); | |
| @am-clr-grey-700: extract(@group-grey, 8); | |
| @am-clr-grey-800: extract(@group-grey, 9); | |
| @am-clr-grey-900: extract(@group-grey, 10); | |
| // Blue Grey | |
| @am-clr-blue-grey: extract(@group-blue-grey, 6); | |
| @am-clr-blue-grey-50: extract(@group-blue-grey, 1); | |
| @am-clr-blue-grey-100: extract(@group-blue-grey, 2); | |
| @am-clr-blue-grey-200: extract(@group-blue-grey, 3); | |
| @am-clr-blue-grey-300: extract(@group-blue-grey, 4); | |
| @am-clr-blue-grey-400: extract(@group-blue-grey, 5); | |
| @am-clr-blue-grey-500: extract(@group-blue-grey, 6); | |
| @am-clr-blue-grey-600: extract(@group-blue-grey, 7); | |
| @am-clr-blue-grey-700: extract(@group-blue-grey, 8); | |
| @am-clr-blue-grey-800: extract(@group-blue-grey, 9); | |
| @am-clr-blue-grey-900: extract(@group-blue-grey, 10); | |
| @am-clr-black: #000; | |
| @am-clr-white: #fff; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment