diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c8b2a1..72d90ce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +# 1.1.0 + +2014-11-20 + +- Added text color (alpha) for black and white + # 1.0.0 2014-11-14 diff --git a/bower.json b/bower.json index 0168ed6..a63dc24 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "google-material-color", - "version": "1.0.0", + "version": "1.1.0", "description": "Google material color (http://www.google.com/design/spec/style/color.html) implementation for Sass, Less, Stylus, CSS and JS.", "homepage": "https://github.com/danlevan/google-material-color", "authors": [ diff --git a/dist/palette.css b/dist/palette.css index edfe584..1112967 100644 --- a/dist/palette.css +++ b/dist/palette.css @@ -1671,6 +1671,42 @@ .palette-Black-500.text { color: #000000; } +.palette-Black-Text.bg { + background-color: rgba(0,0,0,0.87); +} +.palette-Black-Text.text { + color: rgba(0,0,0,0.87); +} +.palette-Black-Secondary-Text.bg { + background-color: rgba(0,0,0,0.54); +} +.palette-Black-Secondary-Text.text { + color: rgba(0,0,0,0.54); +} +.palette-Black-Icons.bg { + background-color: rgba(0,0,0,0.54); +} +.palette-Black-Icons.text { + color: rgba(0,0,0,0.54); +} +.palette-Black-Disabled.bg { + background-color: rgba(0,0,0,0.26); +} +.palette-Black-Disabled.text { + color: rgba(0,0,0,0.26); +} +.palette-Black-Hint-Text.bg { + background-color: rgba(0,0,0,0.26); +} +.palette-Black-Hint-Text.text { + color: rgba(0,0,0,0.26); +} +.palette-Black-Dividers.bg { + background-color: rgba(0,0,0,0.12); +} +.palette-Black-Dividers.text { + color: rgba(0,0,0,0.12); +} .palette-White.bg { background-color: #ffffff; @@ -1684,5 +1720,41 @@ .palette-White-500.text { color: #ffffff; } +.palette-White-Text.bg { + background-color: #ffffff; +} +.palette-White-Text.text { + color: #ffffff; +} +.palette-White-Secondary-Text.bg { + background-color: rgba(255,255,255,0.7); +} +.palette-White-Secondary-Text.text { + color: rgba(255,255,255,0.7); +} +.palette-White-Icons.bg { + background-color: #ffffff; +} +.palette-White-Icons.text { + color: #ffffff; +} +.palette-White-Disabled.bg { + background-color: rgba(255,255,255,0.3); +} +.palette-White-Disabled.text { + color: rgba(255,255,255,0.3); +} +.palette-White-Hint-Text.bg { + background-color: rgba(255,255,255,0.3); +} +.palette-White-Hint-Text.text { + color: rgba(255,255,255,0.3); +} +.palette-White-Dividers.bg { + background-color: rgba(255,255,255,0.12); +} +.palette-White-Dividers.text { + color: rgba(255,255,255,0.12); +} diff --git a/dist/palette.js b/dist/palette.js index 3436b5d..bb912c8 100644 --- a/dist/palette.js +++ b/dist/palette.js @@ -326,10 +326,22 @@ 'Black': { '500': '#000000', + 'Text': 'rgba(0,0,0,0.87)', + 'Secondary Text': 'rgba(0,0,0,0.54)', + 'Icons': 'rgba(0,0,0,0.54)', + 'Disabled': 'rgba(0,0,0,0.26)', + 'Hint Text': 'rgba(0,0,0,0.26)', + 'Dividers': 'rgba(0,0,0,0.12)', }, 'White': { '500': '#ffffff', + 'Text': '#ffffff', + 'Secondary Text': 'rgba(255,255,255,0.7)', + 'Icons': '#ffffff', + 'Disabled': 'rgba(255,255,255,0.3)', + 'Hint Text': 'rgba(255,255,255,0.3)', + 'Dividers': 'rgba(255,255,255,0.12)', }, }, diff --git a/dist/palette.less b/dist/palette.less index 80ff70a..2813096 100644 --- a/dist/palette.less +++ b/dist/palette.less @@ -257,7 +257,19 @@ @palette-Blue-Grey-800: #37474f; @palette-Blue-Grey-900: #263238; @palette-Black-500: #000000; +@palette-Black-Text: rgba(0,0,0,0.87); +@palette-Black-Secondary-Text: rgba(0,0,0,0.54); +@palette-Black-Icons: rgba(0,0,0,0.54); +@palette-Black-Disabled: rgba(0,0,0,0.26); +@palette-Black-Hint-Text: rgba(0,0,0,0.26); +@palette-Black-Dividers: rgba(0,0,0,0.12); @palette-White-500: #ffffff; +@palette-White-Text: #ffffff; +@palette-White-Secondary-Text: rgba(255,255,255,0.7); +@palette-White-Icons: #ffffff; +@palette-White-Disabled: rgba(255,255,255,0.3); +@palette-White-Hint-Text: rgba(255,255,255,0.3); +@palette-White-Dividers: rgba(255,255,255,0.12); .palette(@color; @shade: '500') { @colorVar: %('palette-%s-%s', replace(@color, ' ', '-'), replace(@shade, ' ', '-')); diff --git a/dist/palette.scss b/dist/palette.scss index d416c38..f8ee637 100644 --- a/dist/palette.scss +++ b/dist/palette.scss @@ -297,9 +297,21 @@ $palette: ( ), Black: ( 500: #000000, + Text: rgba(0,0,0,0.87), + Secondary Text: rgba(0,0,0,0.54), + Icons: rgba(0,0,0,0.54), + Disabled: rgba(0,0,0,0.26), + Hint Text: rgba(0,0,0,0.26), + Dividers: rgba(0,0,0,0.12), ), White: ( 500: #ffffff, + Text: #ffffff, + Secondary Text: rgba(255,255,255,0.7), + Icons: #ffffff, + Disabled: rgba(255,255,255,0.3), + Hint Text: rgba(255,255,255,0.3), + Dividers: rgba(255,255,255,0.12), ), ); diff --git a/dist/palette.styl b/dist/palette.styl index 34abe80..6c5c88f 100644 --- a/dist/palette.styl +++ b/dist/palette.styl @@ -297,9 +297,21 @@ $palette = { }, 'Black': { '500': #000000, + 'Text': rgba(0,0,0,0.87), + 'Secondary Text': rgba(0,0,0,0.54), + 'Icons': rgba(0,0,0,0.54), + 'Disabled': rgba(0,0,0,0.26), + 'Hint Text': rgba(0,0,0,0.26), + 'Dividers': rgba(0,0,0,0.12), }, 'White': { '500': #ffffff, + 'Text': #ffffff, + 'Secondary Text': rgba(255,255,255,0.7), + 'Icons': #ffffff, + 'Disabled': rgba(255,255,255,0.3), + 'Hint Text': rgba(255,255,255,0.3), + 'Dividers': rgba(255,255,255,0.12), }, } diff --git a/package.json b/package.json index afcfe14..5a506f0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "google-material-color", - "version": "1.0.0", + "version": "1.1.0", "description": "Google material color (http://www.google.com/design/spec/style/color.html) implementation for Sass, Less, Stylus, CSS and JS.", "main": "src/index.js", "scripts": { diff --git a/src/colors.js b/src/colors.js index 2786a9b..c348e1f 100644 --- a/src/colors.js +++ b/src/colors.js @@ -314,9 +314,23 @@ module.exports = { 'Black': { '500': '#000000', + + 'Text': 'rgba(0,0,0,0.87)', + 'Secondary Text': 'rgba(0,0,0,0.54)', + 'Icons': 'rgba(0,0,0,0.54)', + 'Disabled': 'rgba(0,0,0,0.26)', + 'Hint Text': 'rgba(0,0,0,0.26)', + 'Dividers': 'rgba(0,0,0,0.12)', }, 'White': { '500': '#ffffff', + + 'Text': '#ffffff', + 'Secondary Text': 'rgba(255,255,255,0.7)', + 'Icons': '#ffffff', + 'Disabled': 'rgba(255,255,255,0.3)', + 'Hint Text': 'rgba(255,255,255,0.3)', + 'Dividers': 'rgba(255,255,255,0.12)', }, } diff --git a/src/templates/test-less b/src/templates/test-less index 0fd0682..649dabd 100644 --- a/src/templates/test-less +++ b/src/templates/test-less @@ -14,3 +14,18 @@ <% }) %> <% }) %> } + +.less-text { +<% _.forIn(colors, function(shades, color) { %> + &.<%- color.replace(' ', '-') %> { + .palette('<%- color %>'); + color: @palette; + } +<% _.forIn(shades, function(hex, shade) { %> + &.<%- color.replace(' ', '-') %>-<%- shade.replace(' ', '-') %> { + .palette('<%- color %>'; '<%- shade %>'); + color: @palette; + } +<% }) %> +<% }) %> +} diff --git a/src/templates/test-page b/src/templates/test-page index 12d8e42..6f69937 100644 --- a/src/templates/test-page +++ b/src/templates/test-page @@ -33,7 +33,9 @@

Test result

-<% _.forIn(colors, function(shades, color) { %> +<% _.chain(colors) + .omit(['Black', 'White']) + .forIn(function(shades, color) { %>

<%- color %>

@@ -85,12 +87,73 @@
<% }) %> +

Test result: Text

+ +<% _.chain(colors) + .pick(['Black', 'White']) + .forIn(function(shades, color) { %> +

<%- color %>

+ + + + + + + + + + + + + + + + + + +<% _.forIn(shades, function(hex, shade) { %> + style="background-color: #000;" <% } %>> + + + + + + +<% }) %> +
stylussasslesscssjs
+ palette('<%- color %>') + + palette(<%- color %>) + + .palette('<%- color %>') + + palette-<%- color.replace(' ', '-') %> + + palette.get('<%- color %>') +
+ palette('<%- color %>', '<%- shade %>') + + palette(<%- color %>, <%- shade %>) + + .palette('<%- color %>'; '<%- shade %>') + + palette-<%- color.replace(' ', '-') %>-<%- shade.replace(' ', '-') %> + + palette.get('<%- color %>', '<%- shade %>') +
+<% }) %> + diff --git a/src/templates/test-scss b/src/templates/test-scss index a65b64e..a99fc5d 100644 --- a/src/templates/test-scss +++ b/src/templates/test-scss @@ -12,3 +12,16 @@ <% }) %> <% }) %> } + +.sass-text { +<% _.forIn(colors, function(shades, color) { %> + &.<%- color.replace(' ', '-') %> { + color: palette(<%- color %>); + } +<% _.forIn(shades, function(hex, shade) { %> + &.<%- color.replace(' ', '-') %>-<%- shade.replace(' ', '-') %> { + color: palette(<%- color %>, <%- shade %>); + } +<% }) %> +<% }) %> +} diff --git a/src/templates/test-stylus b/src/templates/test-stylus index b99d76b..745f707 100644 --- a/src/templates/test-stylus +++ b/src/templates/test-stylus @@ -10,3 +10,14 @@ background-color palette('<%- color %>', '<%- shade %>') <% }) %> <% }) %> + +.stylus-text + +<% _.forIn(colors, function(shades, color) { %> + &.<%- color.replace(' ', '-') %> + color palette('<%- color %>') +<% _.forIn(shades, function(hex, shade) { %> + &.<%- color.replace(' ', '-') %>-<%- shade.replace(' ', '-') %> + color palette('<%- color %>', '<%- shade %>') +<% }) %> +<% }) %> diff --git a/test/index.html b/test/index.html index 16befa7..81ed5d1 100644 --- a/test/index.html +++ b/test/index.html @@ -5214,9 +5214,13 @@

Blue Grey

+ +

Test result: Text

+ +

Black

- +
@@ -5226,13 +5230,13 @@

Black

- - - - - + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
stylus sass
+ palette('Black') + palette(Black) + .palette('Black') @@ -5244,29 +5248,137 @@

Black

+
palette('Black', '500') + palette(Black, 500) + .palette('Black'; '500') + palette-Black-500 + palette.get('Black', '500')
+ palette('Black', 'Text') + + palette(Black, Text) + + .palette('Black'; 'Text') + + palette-Black-Text + + palette.get('Black', 'Text') +
+ palette('Black', 'Secondary Text') + + palette(Black, Secondary Text) + + .palette('Black'; 'Secondary Text') + + palette-Black-Secondary-Text + + palette.get('Black', 'Secondary Text') +
+ palette('Black', 'Icons') + + palette(Black, Icons) + + .palette('Black'; 'Icons') + + palette-Black-Icons + + palette.get('Black', 'Icons') +
+ palette('Black', 'Disabled') + + palette(Black, Disabled) + + .palette('Black'; 'Disabled') + + palette-Black-Disabled + + palette.get('Black', 'Disabled') +
+ palette('Black', 'Hint Text') + + palette(Black, Hint Text) + + .palette('Black'; 'Hint Text') + + palette-Black-Hint-Text + + palette.get('Black', 'Hint Text') +
+ palette('Black', 'Dividers') + + palette(Black, Dividers) + + .palette('Black'; 'Dividers') + + palette-Black-Dividers + + palette.get('Black', 'Dividers') +

White

- +
@@ -5276,13 +5388,13 @@

White

- - - - - + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
stylus sass
+ palette('White') + palette(White) + .palette('White') @@ -5294,24 +5406,132 @@

White

+
palette('White', '500') + palette(White, 500) + .palette('White'; '500') + palette-White-500 + palette.get('White', '500')
+ palette('White', 'Text') + + palette(White, Text) + + .palette('White'; 'Text') + + palette-White-Text + + palette.get('White', 'Text') +
+ palette('White', 'Secondary Text') + + palette(White, Secondary Text) + + .palette('White'; 'Secondary Text') + + palette-White-Secondary-Text + + palette.get('White', 'Secondary Text') +
+ palette('White', 'Icons') + + palette(White, Icons) + + .palette('White'; 'Icons') + + palette-White-Icons + + palette.get('White', 'Icons') +
+ palette('White', 'Disabled') + + palette(White, Disabled) + + .palette('White'; 'Disabled') + + palette-White-Disabled + + palette.get('White', 'Disabled') +
+ palette('White', 'Hint Text') + + palette(White, Hint Text) + + .palette('White'; 'Hint Text') + + palette-White-Hint-Text + + palette.get('White', 'Hint Text') +
+ palette('White', 'Dividers') + + palette(White, Dividers) + + .palette('White'; 'Dividers') + + palette-White-Dividers + + palette.get('White', 'Dividers') +
@@ -5321,6 +5541,11 @@

White

for(var i=0; i diff --git a/test/less.css b/test/less.css index fe07126..f045aae 100644 --- a/test/less.css +++ b/test/less.css @@ -1,5 +1,5 @@ /** - * google-material-color v0.0.2 + * google-material-color v1.0.0 * https://github.com/danlevan/google-material-color */ .less.Red { @@ -827,9 +827,912 @@ .less.Black-500 { background-color: #000000; } +.less.Black-Text { + background-color: rgba(0, 0, 0, 0.87); +} +.less.Black-Secondary-Text { + background-color: rgba(0, 0, 0, 0.54); +} +.less.Black-Icons { + background-color: rgba(0, 0, 0, 0.54); +} +.less.Black-Disabled { + background-color: rgba(0, 0, 0, 0.26); +} +.less.Black-Hint-Text { + background-color: rgba(0, 0, 0, 0.26); +} +.less.Black-Dividers { + background-color: rgba(0, 0, 0, 0.12); +} .less.White { background-color: #ffffff; } .less.White-500 { background-color: #ffffff; } +.less.White-Text { + background-color: #ffffff; +} +.less.White-Secondary-Text { + background-color: rgba(255, 255, 255, 0.7); +} +.less.White-Icons { + background-color: #ffffff; +} +.less.White-Disabled { + background-color: rgba(255, 255, 255, 0.3); +} +.less.White-Hint-Text { + background-color: rgba(255, 255, 255, 0.3); +} +.less.White-Dividers { + background-color: rgba(255, 255, 255, 0.12); +} +.less-text.Red { + color: #e51c23; +} +.less-text.Red-50 { + color: #fde0dc; +} +.less-text.Red-100 { + color: #f9bdbb; +} +.less-text.Red-200 { + color: #f69988; +} +.less-text.Red-300 { + color: #f36c60; +} +.less-text.Red-400 { + color: #e84e40; +} +.less-text.Red-500 { + color: #e51c23; +} +.less-text.Red-600 { + color: #dd191d; +} +.less-text.Red-700 { + color: #d01716; +} +.less-text.Red-800 { + color: #c41411; +} +.less-text.Red-900 { + color: #b0120a; +} +.less-text.Red-A100 { + color: #ff7997; +} +.less-text.Red-A200 { + color: #ff5177; +} +.less-text.Red-A400 { + color: #ff2d6f; +} +.less-text.Red-A700 { + color: #e00032; +} +.less-text.Pink { + color: #e91e63; +} +.less-text.Pink-50 { + color: #fce4ec; +} +.less-text.Pink-100 { + color: #f8bbd0; +} +.less-text.Pink-200 { + color: #f48fb1; +} +.less-text.Pink-300 { + color: #f06292; +} +.less-text.Pink-400 { + color: #ec407a; +} +.less-text.Pink-500 { + color: #e91e63; +} +.less-text.Pink-600 { + color: #d81b60; +} +.less-text.Pink-700 { + color: #c2185b; +} +.less-text.Pink-800 { + color: #ad1457; +} +.less-text.Pink-900 { + color: #880e4f; +} +.less-text.Pink-A100 { + color: #ff80ab; +} +.less-text.Pink-A200 { + color: #ff4081; +} +.less-text.Pink-A400 { + color: #f50057; +} +.less-text.Pink-A700 { + color: #c51162; +} +.less-text.Purple { + color: #9c27b0; +} +.less-text.Purple-50 { + color: #f3e5f5; +} +.less-text.Purple-100 { + color: #e1bee7; +} +.less-text.Purple-200 { + color: #ce93d8; +} +.less-text.Purple-300 { + color: #ba68c8; +} +.less-text.Purple-400 { + color: #ab47bc; +} +.less-text.Purple-500 { + color: #9c27b0; +} +.less-text.Purple-600 { + color: #8e24aa; +} +.less-text.Purple-700 { + color: #7b1fa2; +} +.less-text.Purple-800 { + color: #6a1b9a; +} +.less-text.Purple-900 { + color: #4a148c; +} +.less-text.Purple-A100 { + color: #ea80fc; +} +.less-text.Purple-A200 { + color: #e040fb; +} +.less-text.Purple-A400 { + color: #d500f9; +} +.less-text.Purple-A700 { + color: #aa00ff; +} +.less-text.Deep-Purple { + color: #673ab7; +} +.less-text.Deep-Purple-50 { + color: #ede7f6; +} +.less-text.Deep-Purple-100 { + color: #d1c4e9; +} +.less-text.Deep-Purple-200 { + color: #b39ddb; +} +.less-text.Deep-Purple-300 { + color: #9575cd; +} +.less-text.Deep-Purple-400 { + color: #7e57c2; +} +.less-text.Deep-Purple-500 { + color: #673ab7; +} +.less-text.Deep-Purple-600 { + color: #5e35b1; +} +.less-text.Deep-Purple-700 { + color: #512da8; +} +.less-text.Deep-Purple-800 { + color: #4527a0; +} +.less-text.Deep-Purple-900 { + color: #311b92; +} +.less-text.Deep-Purple-A100 { + color: #b388ff; +} +.less-text.Deep-Purple-A200 { + color: #7c4dff; +} +.less-text.Deep-Purple-A400 { + color: #651fff; +} +.less-text.Deep-Purple-A700 { + color: #6200ea; +} +.less-text.Indigo { + color: #3f51b5; +} +.less-text.Indigo-50 { + color: #e8eaf6; +} +.less-text.Indigo-100 { + color: #c5cae9; +} +.less-text.Indigo-200 { + color: #9fa8da; +} +.less-text.Indigo-300 { + color: #7986cb; +} +.less-text.Indigo-400 { + color: #5c6bc0; +} +.less-text.Indigo-500 { + color: #3f51b5; +} +.less-text.Indigo-600 { + color: #3949ab; +} +.less-text.Indigo-700 { + color: #303f9f; +} +.less-text.Indigo-800 { + color: #283593; +} +.less-text.Indigo-900 { + color: #1a237e; +} +.less-text.Indigo-A100 { + color: #8c9eff; +} +.less-text.Indigo-A200 { + color: #536dfe; +} +.less-text.Indigo-A400 { + color: #3d5afe; +} +.less-text.Indigo-A700 { + color: #304ffe; +} +.less-text.Blue { + color: #5677fc; +} +.less-text.Blue-50 { + color: #e7e9fd; +} +.less-text.Blue-100 { + color: #d0d9ff; +} +.less-text.Blue-200 { + color: #afbfff; +} +.less-text.Blue-300 { + color: #91a7ff; +} +.less-text.Blue-400 { + color: #738ffe; +} +.less-text.Blue-500 { + color: #5677fc; +} +.less-text.Blue-600 { + color: #4e6cef; +} +.less-text.Blue-700 { + color: #455ede; +} +.less-text.Blue-800 { + color: #3b50ce; +} +.less-text.Blue-900 { + color: #2a36b1; +} +.less-text.Blue-A100 { + color: #a6baff; +} +.less-text.Blue-A200 { + color: #6889ff; +} +.less-text.Blue-A400 { + color: #4d73ff; +} +.less-text.Blue-A700 { + color: #4d69ff; +} +.less-text.Light-Blue { + color: #03a9f4; +} +.less-text.Light-Blue-50 { + color: #e1f5fe; +} +.less-text.Light-Blue-100 { + color: #b3e5fc; +} +.less-text.Light-Blue-200 { + color: #81d4fa; +} +.less-text.Light-Blue-300 { + color: #4fc3f7; +} +.less-text.Light-Blue-400 { + color: #29b6f6; +} +.less-text.Light-Blue-500 { + color: #03a9f4; +} +.less-text.Light-Blue-600 { + color: #039be5; +} +.less-text.Light-Blue-700 { + color: #0288d1; +} +.less-text.Light-Blue-800 { + color: #0277bd; +} +.less-text.Light-Blue-900 { + color: #01579b; +} +.less-text.Light-Blue-A100 { + color: #80d8ff; +} +.less-text.Light-Blue-A200 { + color: #40c4ff; +} +.less-text.Light-Blue-A400 { + color: #00b0ff; +} +.less-text.Light-Blue-A700 { + color: #0091ea; +} +.less-text.Cyan { + color: #00bcd4; +} +.less-text.Cyan-50 { + color: #e0f7fa; +} +.less-text.Cyan-100 { + color: #b2ebf2; +} +.less-text.Cyan-200 { + color: #80deea; +} +.less-text.Cyan-300 { + color: #4dd0e1; +} +.less-text.Cyan-400 { + color: #26c6da; +} +.less-text.Cyan-500 { + color: #00bcd4; +} +.less-text.Cyan-600 { + color: #00acc1; +} +.less-text.Cyan-700 { + color: #0097a7; +} +.less-text.Cyan-800 { + color: #00838f; +} +.less-text.Cyan-900 { + color: #006064; +} +.less-text.Cyan-A100 { + color: #84ffff; +} +.less-text.Cyan-A200 { + color: #18ffff; +} +.less-text.Cyan-A400 { + color: #00e5ff; +} +.less-text.Cyan-A700 { + color: #00b8d4; +} +.less-text.Teal { + color: #009688; +} +.less-text.Teal-50 { + color: #e0f2f1; +} +.less-text.Teal-100 { + color: #b2dfdb; +} +.less-text.Teal-200 { + color: #80cbc4; +} +.less-text.Teal-300 { + color: #4db6ac; +} +.less-text.Teal-400 { + color: #26a69a; +} +.less-text.Teal-500 { + color: #009688; +} +.less-text.Teal-600 { + color: #00897b; +} +.less-text.Teal-700 { + color: #00796b; +} +.less-text.Teal-800 { + color: #00695c; +} +.less-text.Teal-900 { + color: #004d40; +} +.less-text.Teal-A100 { + color: #a7ffeb; +} +.less-text.Teal-A200 { + color: #64ffda; +} +.less-text.Teal-A400 { + color: #1de9b6; +} +.less-text.Teal-A700 { + color: #00bfa5; +} +.less-text.Green { + color: #259b24; +} +.less-text.Green-50 { + color: #d0f8ce; +} +.less-text.Green-100 { + color: #a3e9a4; +} +.less-text.Green-200 { + color: #72d572; +} +.less-text.Green-300 { + color: #42bd41; +} +.less-text.Green-400 { + color: #2baf2b; +} +.less-text.Green-500 { + color: #259b24; +} +.less-text.Green-600 { + color: #0a8f08; +} +.less-text.Green-700 { + color: #0a7e07; +} +.less-text.Green-800 { + color: #056f00; +} +.less-text.Green-900 { + color: #0d5302; +} +.less-text.Green-A100 { + color: #a2f78d; +} +.less-text.Green-A200 { + color: #5af158; +} +.less-text.Green-A400 { + color: #14e715; +} +.less-text.Green-A700 { + color: #12c700; +} +.less-text.Light-Green { + color: #8bc34a; +} +.less-text.Light-Green-50 { + color: #f1f8e9; +} +.less-text.Light-Green-100 { + color: #dcedc8; +} +.less-text.Light-Green-200 { + color: #c5e1a5; +} +.less-text.Light-Green-300 { + color: #aed581; +} +.less-text.Light-Green-400 { + color: #9ccc65; +} +.less-text.Light-Green-500 { + color: #8bc34a; +} +.less-text.Light-Green-600 { + color: #7cb342; +} +.less-text.Light-Green-700 { + color: #689f38; +} +.less-text.Light-Green-800 { + color: #558b2f; +} +.less-text.Light-Green-900 { + color: #33691e; +} +.less-text.Light-Green-A100 { + color: #ccff90; +} +.less-text.Light-Green-A200 { + color: #b2ff59; +} +.less-text.Light-Green-A400 { + color: #76ff03; +} +.less-text.Light-Green-A700 { + color: #64dd17; +} +.less-text.Lime { + color: #cddc39; +} +.less-text.Lime-50 { + color: #f9fbe7; +} +.less-text.Lime-100 { + color: #f0f4c3; +} +.less-text.Lime-200 { + color: #e6ee9c; +} +.less-text.Lime-300 { + color: #dce775; +} +.less-text.Lime-400 { + color: #d4e157; +} +.less-text.Lime-500 { + color: #cddc39; +} +.less-text.Lime-600 { + color: #c0ca33; +} +.less-text.Lime-700 { + color: #afb42b; +} +.less-text.Lime-800 { + color: #9e9d24; +} +.less-text.Lime-900 { + color: #827717; +} +.less-text.Lime-A100 { + color: #f4ff81; +} +.less-text.Lime-A200 { + color: #eeff41; +} +.less-text.Lime-A400 { + color: #c6ff00; +} +.less-text.Lime-A700 { + color: #aeea00; +} +.less-text.Yellow { + color: #ffeb3b; +} +.less-text.Yellow-50 { + color: #fffde7; +} +.less-text.Yellow-100 { + color: #fff9c4; +} +.less-text.Yellow-200 { + color: #fff59d; +} +.less-text.Yellow-300 { + color: #fff176; +} +.less-text.Yellow-400 { + color: #ffee58; +} +.less-text.Yellow-500 { + color: #ffeb3b; +} +.less-text.Yellow-600 { + color: #fdd835; +} +.less-text.Yellow-700 { + color: #fbc02d; +} +.less-text.Yellow-800 { + color: #f9a825; +} +.less-text.Yellow-900 { + color: #f57f17; +} +.less-text.Yellow-A100 { + color: #ffff8d; +} +.less-text.Yellow-A200 { + color: #ffff00; +} +.less-text.Yellow-A400 { + color: #ffea00; +} +.less-text.Yellow-A700 { + color: #ffd600; +} +.less-text.Amber { + color: #ffc107; +} +.less-text.Amber-50 { + color: #fff8e1; +} +.less-text.Amber-100 { + color: #ffecb3; +} +.less-text.Amber-200 { + color: #ffe082; +} +.less-text.Amber-300 { + color: #ffd54f; +} +.less-text.Amber-400 { + color: #ffca28; +} +.less-text.Amber-500 { + color: #ffc107; +} +.less-text.Amber-600 { + color: #ffb300; +} +.less-text.Amber-700 { + color: #ffa000; +} +.less-text.Amber-800 { + color: #ff8f00; +} +.less-text.Amber-900 { + color: #ff6f00; +} +.less-text.Amber-A100 { + color: #ffe57f; +} +.less-text.Amber-A200 { + color: #ffd740; +} +.less-text.Amber-A400 { + color: #ffc400; +} +.less-text.Amber-A700 { + color: #ffab00; +} +.less-text.Orange { + color: #ff9800; +} +.less-text.Orange-50 { + color: #fff3e0; +} +.less-text.Orange-100 { + color: #ffe0b2; +} +.less-text.Orange-200 { + color: #ffcc80; +} +.less-text.Orange-300 { + color: #ffb74d; +} +.less-text.Orange-400 { + color: #ffa726; +} +.less-text.Orange-500 { + color: #ff9800; +} +.less-text.Orange-600 { + color: #fb8c00; +} +.less-text.Orange-700 { + color: #f57c00; +} +.less-text.Orange-800 { + color: #ef6c00; +} +.less-text.Orange-900 { + color: #e65100; +} +.less-text.Orange-A100 { + color: #ffd180; +} +.less-text.Orange-A200 { + color: #ffab40; +} +.less-text.Orange-A400 { + color: #ff9100; +} +.less-text.Orange-A700 { + color: #ff6d00; +} +.less-text.Deep-Orange { + color: #ff5722; +} +.less-text.Deep-Orange-50 { + color: #fbe9e7; +} +.less-text.Deep-Orange-100 { + color: #ffccbc; +} +.less-text.Deep-Orange-200 { + color: #ffab91; +} +.less-text.Deep-Orange-300 { + color: #ff8a65; +} +.less-text.Deep-Orange-400 { + color: #ff7043; +} +.less-text.Deep-Orange-500 { + color: #ff5722; +} +.less-text.Deep-Orange-600 { + color: #f4511e; +} +.less-text.Deep-Orange-700 { + color: #e64a19; +} +.less-text.Deep-Orange-800 { + color: #d84315; +} +.less-text.Deep-Orange-900 { + color: #bf360c; +} +.less-text.Deep-Orange-A100 { + color: #ff9e80; +} +.less-text.Deep-Orange-A200 { + color: #ff6e40; +} +.less-text.Deep-Orange-A400 { + color: #ff3d00; +} +.less-text.Deep-Orange-A700 { + color: #dd2c00; +} +.less-text.Brown { + color: #795548; +} +.less-text.Brown-50 { + color: #efebe9; +} +.less-text.Brown-100 { + color: #d7ccc8; +} +.less-text.Brown-200 { + color: #bcaaa4; +} +.less-text.Brown-300 { + color: #a1887f; +} +.less-text.Brown-400 { + color: #8d6e63; +} +.less-text.Brown-500 { + color: #795548; +} +.less-text.Brown-600 { + color: #6d4c41; +} +.less-text.Brown-700 { + color: #5d4037; +} +.less-text.Brown-800 { + color: #4e342e; +} +.less-text.Brown-900 { + color: #3e2723; +} +.less-text.Grey { + color: #9e9e9e; +} +.less-text.Grey-50 { + color: #fafafa; +} +.less-text.Grey-100 { + color: #f5f5f5; +} +.less-text.Grey-200 { + color: #eeeeee; +} +.less-text.Grey-300 { + color: #e0e0e0; +} +.less-text.Grey-400 { + color: #bdbdbd; +} +.less-text.Grey-500 { + color: #9e9e9e; +} +.less-text.Grey-600 { + color: #757575; +} +.less-text.Grey-700 { + color: #616161; +} +.less-text.Grey-800 { + color: #424242; +} +.less-text.Grey-900 { + color: #212121; +} +.less-text.Blue-Grey { + color: #607d8b; +} +.less-text.Blue-Grey-50 { + color: #eceff1; +} +.less-text.Blue-Grey-100 { + color: #cfd8dc; +} +.less-text.Blue-Grey-200 { + color: #b0bec5; +} +.less-text.Blue-Grey-300 { + color: #90a4ae; +} +.less-text.Blue-Grey-400 { + color: #78909c; +} +.less-text.Blue-Grey-500 { + color: #607d8b; +} +.less-text.Blue-Grey-600 { + color: #546e7a; +} +.less-text.Blue-Grey-700 { + color: #455a64; +} +.less-text.Blue-Grey-800 { + color: #37474f; +} +.less-text.Blue-Grey-900 { + color: #263238; +} +.less-text.Black { + color: #000000; +} +.less-text.Black-500 { + color: #000000; +} +.less-text.Black-Text { + color: rgba(0, 0, 0, 0.87); +} +.less-text.Black-Secondary-Text { + color: rgba(0, 0, 0, 0.54); +} +.less-text.Black-Icons { + color: rgba(0, 0, 0, 0.54); +} +.less-text.Black-Disabled { + color: rgba(0, 0, 0, 0.26); +} +.less-text.Black-Hint-Text { + color: rgba(0, 0, 0, 0.26); +} +.less-text.Black-Dividers { + color: rgba(0, 0, 0, 0.12); +} +.less-text.White { + color: #ffffff; +} +.less-text.White-500 { + color: #ffffff; +} +.less-text.White-Text { + color: #ffffff; +} +.less-text.White-Secondary-Text { + color: rgba(255, 255, 255, 0.7); +} +.less-text.White-Icons { + color: #ffffff; +} +.less-text.White-Disabled { + color: rgba(255, 255, 255, 0.3); +} +.less-text.White-Hint-Text { + color: rgba(255, 255, 255, 0.3); +} +.less-text.White-Dividers { + color: rgba(255, 255, 255, 0.12); +} diff --git a/test/less.less b/test/less.less index ed794bf..6e67bfa 100644 --- a/test/less.less +++ b/test/less.less @@ -1396,6 +1396,36 @@ background-color: @palette; } + &.Black-Text { + .palette('Black'; 'Text'); + background-color: @palette; + } + + &.Black-Secondary-Text { + .palette('Black'; 'Secondary Text'); + background-color: @palette; + } + + &.Black-Icons { + .palette('Black'; 'Icons'); + background-color: @palette; + } + + &.Black-Disabled { + .palette('Black'; 'Disabled'); + background-color: @palette; + } + + &.Black-Hint-Text { + .palette('Black'; 'Hint Text'); + background-color: @palette; + } + + &.Black-Dividers { + .palette('Black'; 'Dividers'); + background-color: @palette; + } + &.White { .palette('White'); @@ -1407,5 +1437,1505 @@ background-color: @palette; } + &.White-Text { + .palette('White'; 'Text'); + background-color: @palette; + } + + &.White-Secondary-Text { + .palette('White'; 'Secondary Text'); + background-color: @palette; + } + + &.White-Icons { + .palette('White'; 'Icons'); + background-color: @palette; + } + + &.White-Disabled { + .palette('White'; 'Disabled'); + background-color: @palette; + } + + &.White-Hint-Text { + .palette('White'; 'Hint Text'); + background-color: @palette; + } + + &.White-Dividers { + .palette('White'; 'Dividers'); + background-color: @palette; + } + + +} + +.less-text { + + &.Red { + .palette('Red'); + color: @palette; + } + + &.Red-50 { + .palette('Red'; '50'); + color: @palette; + } + + &.Red-100 { + .palette('Red'; '100'); + color: @palette; + } + + &.Red-200 { + .palette('Red'; '200'); + color: @palette; + } + + &.Red-300 { + .palette('Red'; '300'); + color: @palette; + } + + &.Red-400 { + .palette('Red'; '400'); + color: @palette; + } + + &.Red-500 { + .palette('Red'; '500'); + color: @palette; + } + + &.Red-600 { + .palette('Red'; '600'); + color: @palette; + } + + &.Red-700 { + .palette('Red'; '700'); + color: @palette; + } + + &.Red-800 { + .palette('Red'; '800'); + color: @palette; + } + + &.Red-900 { + .palette('Red'; '900'); + color: @palette; + } + + &.Red-A100 { + .palette('Red'; 'A100'); + color: @palette; + } + + &.Red-A200 { + .palette('Red'; 'A200'); + color: @palette; + } + + &.Red-A400 { + .palette('Red'; 'A400'); + color: @palette; + } + + &.Red-A700 { + .palette('Red'; 'A700'); + color: @palette; + } + + + &.Pink { + .palette('Pink'); + color: @palette; + } + + &.Pink-50 { + .palette('Pink'; '50'); + color: @palette; + } + + &.Pink-100 { + .palette('Pink'; '100'); + color: @palette; + } + + &.Pink-200 { + .palette('Pink'; '200'); + color: @palette; + } + + &.Pink-300 { + .palette('Pink'; '300'); + color: @palette; + } + + &.Pink-400 { + .palette('Pink'; '400'); + color: @palette; + } + + &.Pink-500 { + .palette('Pink'; '500'); + color: @palette; + } + + &.Pink-600 { + .palette('Pink'; '600'); + color: @palette; + } + + &.Pink-700 { + .palette('Pink'; '700'); + color: @palette; + } + + &.Pink-800 { + .palette('Pink'; '800'); + color: @palette; + } + + &.Pink-900 { + .palette('Pink'; '900'); + color: @palette; + } + + &.Pink-A100 { + .palette('Pink'; 'A100'); + color: @palette; + } + + &.Pink-A200 { + .palette('Pink'; 'A200'); + color: @palette; + } + + &.Pink-A400 { + .palette('Pink'; 'A400'); + color: @palette; + } + + &.Pink-A700 { + .palette('Pink'; 'A700'); + color: @palette; + } + + + &.Purple { + .palette('Purple'); + color: @palette; + } + + &.Purple-50 { + .palette('Purple'; '50'); + color: @palette; + } + + &.Purple-100 { + .palette('Purple'; '100'); + color: @palette; + } + + &.Purple-200 { + .palette('Purple'; '200'); + color: @palette; + } + + &.Purple-300 { + .palette('Purple'; '300'); + color: @palette; + } + + &.Purple-400 { + .palette('Purple'; '400'); + color: @palette; + } + + &.Purple-500 { + .palette('Purple'; '500'); + color: @palette; + } + + &.Purple-600 { + .palette('Purple'; '600'); + color: @palette; + } + + &.Purple-700 { + .palette('Purple'; '700'); + color: @palette; + } + + &.Purple-800 { + .palette('Purple'; '800'); + color: @palette; + } + + &.Purple-900 { + .palette('Purple'; '900'); + color: @palette; + } + + &.Purple-A100 { + .palette('Purple'; 'A100'); + color: @palette; + } + + &.Purple-A200 { + .palette('Purple'; 'A200'); + color: @palette; + } + + &.Purple-A400 { + .palette('Purple'; 'A400'); + color: @palette; + } + + &.Purple-A700 { + .palette('Purple'; 'A700'); + color: @palette; + } + + + &.Deep-Purple { + .palette('Deep Purple'); + color: @palette; + } + + &.Deep-Purple-50 { + .palette('Deep Purple'; '50'); + color: @palette; + } + + &.Deep-Purple-100 { + .palette('Deep Purple'; '100'); + color: @palette; + } + + &.Deep-Purple-200 { + .palette('Deep Purple'; '200'); + color: @palette; + } + + &.Deep-Purple-300 { + .palette('Deep Purple'; '300'); + color: @palette; + } + + &.Deep-Purple-400 { + .palette('Deep Purple'; '400'); + color: @palette; + } + + &.Deep-Purple-500 { + .palette('Deep Purple'; '500'); + color: @palette; + } + + &.Deep-Purple-600 { + .palette('Deep Purple'; '600'); + color: @palette; + } + + &.Deep-Purple-700 { + .palette('Deep Purple'; '700'); + color: @palette; + } + + &.Deep-Purple-800 { + .palette('Deep Purple'; '800'); + color: @palette; + } + + &.Deep-Purple-900 { + .palette('Deep Purple'; '900'); + color: @palette; + } + + &.Deep-Purple-A100 { + .palette('Deep Purple'; 'A100'); + color: @palette; + } + + &.Deep-Purple-A200 { + .palette('Deep Purple'; 'A200'); + color: @palette; + } + + &.Deep-Purple-A400 { + .palette('Deep Purple'; 'A400'); + color: @palette; + } + + &.Deep-Purple-A700 { + .palette('Deep Purple'; 'A700'); + color: @palette; + } + + + &.Indigo { + .palette('Indigo'); + color: @palette; + } + + &.Indigo-50 { + .palette('Indigo'; '50'); + color: @palette; + } + + &.Indigo-100 { + .palette('Indigo'; '100'); + color: @palette; + } + + &.Indigo-200 { + .palette('Indigo'; '200'); + color: @palette; + } + + &.Indigo-300 { + .palette('Indigo'; '300'); + color: @palette; + } + + &.Indigo-400 { + .palette('Indigo'; '400'); + color: @palette; + } + + &.Indigo-500 { + .palette('Indigo'; '500'); + color: @palette; + } + + &.Indigo-600 { + .palette('Indigo'; '600'); + color: @palette; + } + + &.Indigo-700 { + .palette('Indigo'; '700'); + color: @palette; + } + + &.Indigo-800 { + .palette('Indigo'; '800'); + color: @palette; + } + + &.Indigo-900 { + .palette('Indigo'; '900'); + color: @palette; + } + + &.Indigo-A100 { + .palette('Indigo'; 'A100'); + color: @palette; + } + + &.Indigo-A200 { + .palette('Indigo'; 'A200'); + color: @palette; + } + + &.Indigo-A400 { + .palette('Indigo'; 'A400'); + color: @palette; + } + + &.Indigo-A700 { + .palette('Indigo'; 'A700'); + color: @palette; + } + + + &.Blue { + .palette('Blue'); + color: @palette; + } + + &.Blue-50 { + .palette('Blue'; '50'); + color: @palette; + } + + &.Blue-100 { + .palette('Blue'; '100'); + color: @palette; + } + + &.Blue-200 { + .palette('Blue'; '200'); + color: @palette; + } + + &.Blue-300 { + .palette('Blue'; '300'); + color: @palette; + } + + &.Blue-400 { + .palette('Blue'; '400'); + color: @palette; + } + + &.Blue-500 { + .palette('Blue'; '500'); + color: @palette; + } + + &.Blue-600 { + .palette('Blue'; '600'); + color: @palette; + } + + &.Blue-700 { + .palette('Blue'; '700'); + color: @palette; + } + + &.Blue-800 { + .palette('Blue'; '800'); + color: @palette; + } + + &.Blue-900 { + .palette('Blue'; '900'); + color: @palette; + } + + &.Blue-A100 { + .palette('Blue'; 'A100'); + color: @palette; + } + + &.Blue-A200 { + .palette('Blue'; 'A200'); + color: @palette; + } + + &.Blue-A400 { + .palette('Blue'; 'A400'); + color: @palette; + } + + &.Blue-A700 { + .palette('Blue'; 'A700'); + color: @palette; + } + + + &.Light-Blue { + .palette('Light Blue'); + color: @palette; + } + + &.Light-Blue-50 { + .palette('Light Blue'; '50'); + color: @palette; + } + + &.Light-Blue-100 { + .palette('Light Blue'; '100'); + color: @palette; + } + + &.Light-Blue-200 { + .palette('Light Blue'; '200'); + color: @palette; + } + + &.Light-Blue-300 { + .palette('Light Blue'; '300'); + color: @palette; + } + + &.Light-Blue-400 { + .palette('Light Blue'; '400'); + color: @palette; + } + + &.Light-Blue-500 { + .palette('Light Blue'; '500'); + color: @palette; + } + + &.Light-Blue-600 { + .palette('Light Blue'; '600'); + color: @palette; + } + + &.Light-Blue-700 { + .palette('Light Blue'; '700'); + color: @palette; + } + + &.Light-Blue-800 { + .palette('Light Blue'; '800'); + color: @palette; + } + + &.Light-Blue-900 { + .palette('Light Blue'; '900'); + color: @palette; + } + + &.Light-Blue-A100 { + .palette('Light Blue'; 'A100'); + color: @palette; + } + + &.Light-Blue-A200 { + .palette('Light Blue'; 'A200'); + color: @palette; + } + + &.Light-Blue-A400 { + .palette('Light Blue'; 'A400'); + color: @palette; + } + + &.Light-Blue-A700 { + .palette('Light Blue'; 'A700'); + color: @palette; + } + + + &.Cyan { + .palette('Cyan'); + color: @palette; + } + + &.Cyan-50 { + .palette('Cyan'; '50'); + color: @palette; + } + + &.Cyan-100 { + .palette('Cyan'; '100'); + color: @palette; + } + + &.Cyan-200 { + .palette('Cyan'; '200'); + color: @palette; + } + + &.Cyan-300 { + .palette('Cyan'; '300'); + color: @palette; + } + + &.Cyan-400 { + .palette('Cyan'; '400'); + color: @palette; + } + + &.Cyan-500 { + .palette('Cyan'; '500'); + color: @palette; + } + + &.Cyan-600 { + .palette('Cyan'; '600'); + color: @palette; + } + + &.Cyan-700 { + .palette('Cyan'; '700'); + color: @palette; + } + + &.Cyan-800 { + .palette('Cyan'; '800'); + color: @palette; + } + + &.Cyan-900 { + .palette('Cyan'; '900'); + color: @palette; + } + + &.Cyan-A100 { + .palette('Cyan'; 'A100'); + color: @palette; + } + + &.Cyan-A200 { + .palette('Cyan'; 'A200'); + color: @palette; + } + + &.Cyan-A400 { + .palette('Cyan'; 'A400'); + color: @palette; + } + + &.Cyan-A700 { + .palette('Cyan'; 'A700'); + color: @palette; + } + + + &.Teal { + .palette('Teal'); + color: @palette; + } + + &.Teal-50 { + .palette('Teal'; '50'); + color: @palette; + } + + &.Teal-100 { + .palette('Teal'; '100'); + color: @palette; + } + + &.Teal-200 { + .palette('Teal'; '200'); + color: @palette; + } + + &.Teal-300 { + .palette('Teal'; '300'); + color: @palette; + } + + &.Teal-400 { + .palette('Teal'; '400'); + color: @palette; + } + + &.Teal-500 { + .palette('Teal'; '500'); + color: @palette; + } + + &.Teal-600 { + .palette('Teal'; '600'); + color: @palette; + } + + &.Teal-700 { + .palette('Teal'; '700'); + color: @palette; + } + + &.Teal-800 { + .palette('Teal'; '800'); + color: @palette; + } + + &.Teal-900 { + .palette('Teal'; '900'); + color: @palette; + } + + &.Teal-A100 { + .palette('Teal'; 'A100'); + color: @palette; + } + + &.Teal-A200 { + .palette('Teal'; 'A200'); + color: @palette; + } + + &.Teal-A400 { + .palette('Teal'; 'A400'); + color: @palette; + } + + &.Teal-A700 { + .palette('Teal'; 'A700'); + color: @palette; + } + + + &.Green { + .palette('Green'); + color: @palette; + } + + &.Green-50 { + .palette('Green'; '50'); + color: @palette; + } + + &.Green-100 { + .palette('Green'; '100'); + color: @palette; + } + + &.Green-200 { + .palette('Green'; '200'); + color: @palette; + } + + &.Green-300 { + .palette('Green'; '300'); + color: @palette; + } + + &.Green-400 { + .palette('Green'; '400'); + color: @palette; + } + + &.Green-500 { + .palette('Green'; '500'); + color: @palette; + } + + &.Green-600 { + .palette('Green'; '600'); + color: @palette; + } + + &.Green-700 { + .palette('Green'; '700'); + color: @palette; + } + + &.Green-800 { + .palette('Green'; '800'); + color: @palette; + } + + &.Green-900 { + .palette('Green'; '900'); + color: @palette; + } + + &.Green-A100 { + .palette('Green'; 'A100'); + color: @palette; + } + + &.Green-A200 { + .palette('Green'; 'A200'); + color: @palette; + } + + &.Green-A400 { + .palette('Green'; 'A400'); + color: @palette; + } + + &.Green-A700 { + .palette('Green'; 'A700'); + color: @palette; + } + + + &.Light-Green { + .palette('Light Green'); + color: @palette; + } + + &.Light-Green-50 { + .palette('Light Green'; '50'); + color: @palette; + } + + &.Light-Green-100 { + .palette('Light Green'; '100'); + color: @palette; + } + + &.Light-Green-200 { + .palette('Light Green'; '200'); + color: @palette; + } + + &.Light-Green-300 { + .palette('Light Green'; '300'); + color: @palette; + } + + &.Light-Green-400 { + .palette('Light Green'; '400'); + color: @palette; + } + + &.Light-Green-500 { + .palette('Light Green'; '500'); + color: @palette; + } + + &.Light-Green-600 { + .palette('Light Green'; '600'); + color: @palette; + } + + &.Light-Green-700 { + .palette('Light Green'; '700'); + color: @palette; + } + + &.Light-Green-800 { + .palette('Light Green'; '800'); + color: @palette; + } + + &.Light-Green-900 { + .palette('Light Green'; '900'); + color: @palette; + } + + &.Light-Green-A100 { + .palette('Light Green'; 'A100'); + color: @palette; + } + + &.Light-Green-A200 { + .palette('Light Green'; 'A200'); + color: @palette; + } + + &.Light-Green-A400 { + .palette('Light Green'; 'A400'); + color: @palette; + } + + &.Light-Green-A700 { + .palette('Light Green'; 'A700'); + color: @palette; + } + + + &.Lime { + .palette('Lime'); + color: @palette; + } + + &.Lime-50 { + .palette('Lime'; '50'); + color: @palette; + } + + &.Lime-100 { + .palette('Lime'; '100'); + color: @palette; + } + + &.Lime-200 { + .palette('Lime'; '200'); + color: @palette; + } + + &.Lime-300 { + .palette('Lime'; '300'); + color: @palette; + } + + &.Lime-400 { + .palette('Lime'; '400'); + color: @palette; + } + + &.Lime-500 { + .palette('Lime'; '500'); + color: @palette; + } + + &.Lime-600 { + .palette('Lime'; '600'); + color: @palette; + } + + &.Lime-700 { + .palette('Lime'; '700'); + color: @palette; + } + + &.Lime-800 { + .palette('Lime'; '800'); + color: @palette; + } + + &.Lime-900 { + .palette('Lime'; '900'); + color: @palette; + } + + &.Lime-A100 { + .palette('Lime'; 'A100'); + color: @palette; + } + + &.Lime-A200 { + .palette('Lime'; 'A200'); + color: @palette; + } + + &.Lime-A400 { + .palette('Lime'; 'A400'); + color: @palette; + } + + &.Lime-A700 { + .palette('Lime'; 'A700'); + color: @palette; + } + + + &.Yellow { + .palette('Yellow'); + color: @palette; + } + + &.Yellow-50 { + .palette('Yellow'; '50'); + color: @palette; + } + + &.Yellow-100 { + .palette('Yellow'; '100'); + color: @palette; + } + + &.Yellow-200 { + .palette('Yellow'; '200'); + color: @palette; + } + + &.Yellow-300 { + .palette('Yellow'; '300'); + color: @palette; + } + + &.Yellow-400 { + .palette('Yellow'; '400'); + color: @palette; + } + + &.Yellow-500 { + .palette('Yellow'; '500'); + color: @palette; + } + + &.Yellow-600 { + .palette('Yellow'; '600'); + color: @palette; + } + + &.Yellow-700 { + .palette('Yellow'; '700'); + color: @palette; + } + + &.Yellow-800 { + .palette('Yellow'; '800'); + color: @palette; + } + + &.Yellow-900 { + .palette('Yellow'; '900'); + color: @palette; + } + + &.Yellow-A100 { + .palette('Yellow'; 'A100'); + color: @palette; + } + + &.Yellow-A200 { + .palette('Yellow'; 'A200'); + color: @palette; + } + + &.Yellow-A400 { + .palette('Yellow'; 'A400'); + color: @palette; + } + + &.Yellow-A700 { + .palette('Yellow'; 'A700'); + color: @palette; + } + + + &.Amber { + .palette('Amber'); + color: @palette; + } + + &.Amber-50 { + .palette('Amber'; '50'); + color: @palette; + } + + &.Amber-100 { + .palette('Amber'; '100'); + color: @palette; + } + + &.Amber-200 { + .palette('Amber'; '200'); + color: @palette; + } + + &.Amber-300 { + .palette('Amber'; '300'); + color: @palette; + } + + &.Amber-400 { + .palette('Amber'; '400'); + color: @palette; + } + + &.Amber-500 { + .palette('Amber'; '500'); + color: @palette; + } + + &.Amber-600 { + .palette('Amber'; '600'); + color: @palette; + } + + &.Amber-700 { + .palette('Amber'; '700'); + color: @palette; + } + + &.Amber-800 { + .palette('Amber'; '800'); + color: @palette; + } + + &.Amber-900 { + .palette('Amber'; '900'); + color: @palette; + } + + &.Amber-A100 { + .palette('Amber'; 'A100'); + color: @palette; + } + + &.Amber-A200 { + .palette('Amber'; 'A200'); + color: @palette; + } + + &.Amber-A400 { + .palette('Amber'; 'A400'); + color: @palette; + } + + &.Amber-A700 { + .palette('Amber'; 'A700'); + color: @palette; + } + + + &.Orange { + .palette('Orange'); + color: @palette; + } + + &.Orange-50 { + .palette('Orange'; '50'); + color: @palette; + } + + &.Orange-100 { + .palette('Orange'; '100'); + color: @palette; + } + + &.Orange-200 { + .palette('Orange'; '200'); + color: @palette; + } + + &.Orange-300 { + .palette('Orange'; '300'); + color: @palette; + } + + &.Orange-400 { + .palette('Orange'; '400'); + color: @palette; + } + + &.Orange-500 { + .palette('Orange'; '500'); + color: @palette; + } + + &.Orange-600 { + .palette('Orange'; '600'); + color: @palette; + } + + &.Orange-700 { + .palette('Orange'; '700'); + color: @palette; + } + + &.Orange-800 { + .palette('Orange'; '800'); + color: @palette; + } + + &.Orange-900 { + .palette('Orange'; '900'); + color: @palette; + } + + &.Orange-A100 { + .palette('Orange'; 'A100'); + color: @palette; + } + + &.Orange-A200 { + .palette('Orange'; 'A200'); + color: @palette; + } + + &.Orange-A400 { + .palette('Orange'; 'A400'); + color: @palette; + } + + &.Orange-A700 { + .palette('Orange'; 'A700'); + color: @palette; + } + + + &.Deep-Orange { + .palette('Deep Orange'); + color: @palette; + } + + &.Deep-Orange-50 { + .palette('Deep Orange'; '50'); + color: @palette; + } + + &.Deep-Orange-100 { + .palette('Deep Orange'; '100'); + color: @palette; + } + + &.Deep-Orange-200 { + .palette('Deep Orange'; '200'); + color: @palette; + } + + &.Deep-Orange-300 { + .palette('Deep Orange'; '300'); + color: @palette; + } + + &.Deep-Orange-400 { + .palette('Deep Orange'; '400'); + color: @palette; + } + + &.Deep-Orange-500 { + .palette('Deep Orange'; '500'); + color: @palette; + } + + &.Deep-Orange-600 { + .palette('Deep Orange'; '600'); + color: @palette; + } + + &.Deep-Orange-700 { + .palette('Deep Orange'; '700'); + color: @palette; + } + + &.Deep-Orange-800 { + .palette('Deep Orange'; '800'); + color: @palette; + } + + &.Deep-Orange-900 { + .palette('Deep Orange'; '900'); + color: @palette; + } + + &.Deep-Orange-A100 { + .palette('Deep Orange'; 'A100'); + color: @palette; + } + + &.Deep-Orange-A200 { + .palette('Deep Orange'; 'A200'); + color: @palette; + } + + &.Deep-Orange-A400 { + .palette('Deep Orange'; 'A400'); + color: @palette; + } + + &.Deep-Orange-A700 { + .palette('Deep Orange'; 'A700'); + color: @palette; + } + + + &.Brown { + .palette('Brown'); + color: @palette; + } + + &.Brown-50 { + .palette('Brown'; '50'); + color: @palette; + } + + &.Brown-100 { + .palette('Brown'; '100'); + color: @palette; + } + + &.Brown-200 { + .palette('Brown'; '200'); + color: @palette; + } + + &.Brown-300 { + .palette('Brown'; '300'); + color: @palette; + } + + &.Brown-400 { + .palette('Brown'; '400'); + color: @palette; + } + + &.Brown-500 { + .palette('Brown'; '500'); + color: @palette; + } + + &.Brown-600 { + .palette('Brown'; '600'); + color: @palette; + } + + &.Brown-700 { + .palette('Brown'; '700'); + color: @palette; + } + + &.Brown-800 { + .palette('Brown'; '800'); + color: @palette; + } + + &.Brown-900 { + .palette('Brown'; '900'); + color: @palette; + } + + + &.Grey { + .palette('Grey'); + color: @palette; + } + + &.Grey-50 { + .palette('Grey'; '50'); + color: @palette; + } + + &.Grey-100 { + .palette('Grey'; '100'); + color: @palette; + } + + &.Grey-200 { + .palette('Grey'; '200'); + color: @palette; + } + + &.Grey-300 { + .palette('Grey'; '300'); + color: @palette; + } + + &.Grey-400 { + .palette('Grey'; '400'); + color: @palette; + } + + &.Grey-500 { + .palette('Grey'; '500'); + color: @palette; + } + + &.Grey-600 { + .palette('Grey'; '600'); + color: @palette; + } + + &.Grey-700 { + .palette('Grey'; '700'); + color: @palette; + } + + &.Grey-800 { + .palette('Grey'; '800'); + color: @palette; + } + + &.Grey-900 { + .palette('Grey'; '900'); + color: @palette; + } + + + &.Blue-Grey { + .palette('Blue Grey'); + color: @palette; + } + + &.Blue-Grey-50 { + .palette('Blue Grey'; '50'); + color: @palette; + } + + &.Blue-Grey-100 { + .palette('Blue Grey'; '100'); + color: @palette; + } + + &.Blue-Grey-200 { + .palette('Blue Grey'; '200'); + color: @palette; + } + + &.Blue-Grey-300 { + .palette('Blue Grey'; '300'); + color: @palette; + } + + &.Blue-Grey-400 { + .palette('Blue Grey'; '400'); + color: @palette; + } + + &.Blue-Grey-500 { + .palette('Blue Grey'; '500'); + color: @palette; + } + + &.Blue-Grey-600 { + .palette('Blue Grey'; '600'); + color: @palette; + } + + &.Blue-Grey-700 { + .palette('Blue Grey'; '700'); + color: @palette; + } + + &.Blue-Grey-800 { + .palette('Blue Grey'; '800'); + color: @palette; + } + + &.Blue-Grey-900 { + .palette('Blue Grey'; '900'); + color: @palette; + } + + + &.Black { + .palette('Black'); + color: @palette; + } + + &.Black-500 { + .palette('Black'; '500'); + color: @palette; + } + + &.Black-Text { + .palette('Black'; 'Text'); + color: @palette; + } + + &.Black-Secondary-Text { + .palette('Black'; 'Secondary Text'); + color: @palette; + } + + &.Black-Icons { + .palette('Black'; 'Icons'); + color: @palette; + } + + &.Black-Disabled { + .palette('Black'; 'Disabled'); + color: @palette; + } + + &.Black-Hint-Text { + .palette('Black'; 'Hint Text'); + color: @palette; + } + + &.Black-Dividers { + .palette('Black'; 'Dividers'); + color: @palette; + } + + + &.White { + .palette('White'); + color: @palette; + } + + &.White-500 { + .palette('White'; '500'); + color: @palette; + } + + &.White-Text { + .palette('White'; 'Text'); + color: @palette; + } + + &.White-Secondary-Text { + .palette('White'; 'Secondary Text'); + color: @palette; + } + + &.White-Icons { + .palette('White'; 'Icons'); + color: @palette; + } + + &.White-Disabled { + .palette('White'; 'Disabled'); + color: @palette; + } + + &.White-Hint-Text { + .palette('White'; 'Hint Text'); + color: @palette; + } + + &.White-Dividers { + .palette('White'; 'Dividers'); + color: @palette; + } + } diff --git a/test/sass.css b/test/sass.css index ca552e9..b8f9a8d 100644 --- a/test/sass.css +++ b/test/sass.css @@ -1,5 +1,5 @@ /** - * google-material-color v0.0.2 + * google-material-color v1.0.0 * https://github.com/danlevan/google-material-color */ .sass.Red { @@ -827,9 +827,913 @@ .sass.Black-500 { background-color: #000000; } +.sass.Black-Text { + background-color: rgba(0, 0, 0, 0.87); +} +.sass.Black-Secondary-Text { + background-color: rgba(0, 0, 0, 0.54); +} +.sass.Black-Icons { + background-color: rgba(0, 0, 0, 0.54); +} +.sass.Black-Disabled { + background-color: rgba(0, 0, 0, 0.26); +} +.sass.Black-Hint-Text { + background-color: rgba(0, 0, 0, 0.26); +} +.sass.Black-Dividers { + background-color: rgba(0, 0, 0, 0.12); +} .sass.White { background-color: #ffffff; } .sass.White-500 { background-color: #ffffff; } +.sass.White-Text { + background-color: #ffffff; +} +.sass.White-Secondary-Text { + background-color: rgba(255, 255, 255, 0.7); +} +.sass.White-Icons { + background-color: #ffffff; +} +.sass.White-Disabled { + background-color: rgba(255, 255, 255, 0.3); +} +.sass.White-Hint-Text { + background-color: rgba(255, 255, 255, 0.3); +} +.sass.White-Dividers { + background-color: rgba(255, 255, 255, 0.12); +} + +.sass-text.Red { + color: #e51c23; +} +.sass-text.Red-50 { + color: #fde0dc; +} +.sass-text.Red-100 { + color: #f9bdbb; +} +.sass-text.Red-200 { + color: #f69988; +} +.sass-text.Red-300 { + color: #f36c60; +} +.sass-text.Red-400 { + color: #e84e40; +} +.sass-text.Red-500 { + color: #e51c23; +} +.sass-text.Red-600 { + color: #dd191d; +} +.sass-text.Red-700 { + color: #d01716; +} +.sass-text.Red-800 { + color: #c41411; +} +.sass-text.Red-900 { + color: #b0120a; +} +.sass-text.Red-A100 { + color: #ff7997; +} +.sass-text.Red-A200 { + color: #ff5177; +} +.sass-text.Red-A400 { + color: #ff2d6f; +} +.sass-text.Red-A700 { + color: #e00032; +} +.sass-text.Pink { + color: #e91e63; +} +.sass-text.Pink-50 { + color: #fce4ec; +} +.sass-text.Pink-100 { + color: #f8bbd0; +} +.sass-text.Pink-200 { + color: #f48fb1; +} +.sass-text.Pink-300 { + color: #f06292; +} +.sass-text.Pink-400 { + color: #ec407a; +} +.sass-text.Pink-500 { + color: #e91e63; +} +.sass-text.Pink-600 { + color: #d81b60; +} +.sass-text.Pink-700 { + color: #c2185b; +} +.sass-text.Pink-800 { + color: #ad1457; +} +.sass-text.Pink-900 { + color: #880e4f; +} +.sass-text.Pink-A100 { + color: #ff80ab; +} +.sass-text.Pink-A200 { + color: #ff4081; +} +.sass-text.Pink-A400 { + color: #f50057; +} +.sass-text.Pink-A700 { + color: #c51162; +} +.sass-text.Purple { + color: #9c27b0; +} +.sass-text.Purple-50 { + color: #f3e5f5; +} +.sass-text.Purple-100 { + color: #e1bee7; +} +.sass-text.Purple-200 { + color: #ce93d8; +} +.sass-text.Purple-300 { + color: #ba68c8; +} +.sass-text.Purple-400 { + color: #ab47bc; +} +.sass-text.Purple-500 { + color: #9c27b0; +} +.sass-text.Purple-600 { + color: #8e24aa; +} +.sass-text.Purple-700 { + color: #7b1fa2; +} +.sass-text.Purple-800 { + color: #6a1b9a; +} +.sass-text.Purple-900 { + color: #4a148c; +} +.sass-text.Purple-A100 { + color: #ea80fc; +} +.sass-text.Purple-A200 { + color: #e040fb; +} +.sass-text.Purple-A400 { + color: #d500f9; +} +.sass-text.Purple-A700 { + color: #aa00ff; +} +.sass-text.Deep-Purple { + color: #673ab7; +} +.sass-text.Deep-Purple-50 { + color: #ede7f6; +} +.sass-text.Deep-Purple-100 { + color: #d1c4e9; +} +.sass-text.Deep-Purple-200 { + color: #b39ddb; +} +.sass-text.Deep-Purple-300 { + color: #9575cd; +} +.sass-text.Deep-Purple-400 { + color: #7e57c2; +} +.sass-text.Deep-Purple-500 { + color: #673ab7; +} +.sass-text.Deep-Purple-600 { + color: #5e35b1; +} +.sass-text.Deep-Purple-700 { + color: #512da8; +} +.sass-text.Deep-Purple-800 { + color: #4527a0; +} +.sass-text.Deep-Purple-900 { + color: #311b92; +} +.sass-text.Deep-Purple-A100 { + color: #b388ff; +} +.sass-text.Deep-Purple-A200 { + color: #7c4dff; +} +.sass-text.Deep-Purple-A400 { + color: #651fff; +} +.sass-text.Deep-Purple-A700 { + color: #6200ea; +} +.sass-text.Indigo { + color: #3f51b5; +} +.sass-text.Indigo-50 { + color: #e8eaf6; +} +.sass-text.Indigo-100 { + color: #c5cae9; +} +.sass-text.Indigo-200 { + color: #9fa8da; +} +.sass-text.Indigo-300 { + color: #7986cb; +} +.sass-text.Indigo-400 { + color: #5c6bc0; +} +.sass-text.Indigo-500 { + color: #3f51b5; +} +.sass-text.Indigo-600 { + color: #3949ab; +} +.sass-text.Indigo-700 { + color: #303f9f; +} +.sass-text.Indigo-800 { + color: #283593; +} +.sass-text.Indigo-900 { + color: #1a237e; +} +.sass-text.Indigo-A100 { + color: #8c9eff; +} +.sass-text.Indigo-A200 { + color: #536dfe; +} +.sass-text.Indigo-A400 { + color: #3d5afe; +} +.sass-text.Indigo-A700 { + color: #304ffe; +} +.sass-text.Blue { + color: #5677fc; +} +.sass-text.Blue-50 { + color: #e7e9fd; +} +.sass-text.Blue-100 { + color: #d0d9ff; +} +.sass-text.Blue-200 { + color: #afbfff; +} +.sass-text.Blue-300 { + color: #91a7ff; +} +.sass-text.Blue-400 { + color: #738ffe; +} +.sass-text.Blue-500 { + color: #5677fc; +} +.sass-text.Blue-600 { + color: #4e6cef; +} +.sass-text.Blue-700 { + color: #455ede; +} +.sass-text.Blue-800 { + color: #3b50ce; +} +.sass-text.Blue-900 { + color: #2a36b1; +} +.sass-text.Blue-A100 { + color: #a6baff; +} +.sass-text.Blue-A200 { + color: #6889ff; +} +.sass-text.Blue-A400 { + color: #4d73ff; +} +.sass-text.Blue-A700 { + color: #4d69ff; +} +.sass-text.Light-Blue { + color: #03a9f4; +} +.sass-text.Light-Blue-50 { + color: #e1f5fe; +} +.sass-text.Light-Blue-100 { + color: #b3e5fc; +} +.sass-text.Light-Blue-200 { + color: #81d4fa; +} +.sass-text.Light-Blue-300 { + color: #4fc3f7; +} +.sass-text.Light-Blue-400 { + color: #29b6f6; +} +.sass-text.Light-Blue-500 { + color: #03a9f4; +} +.sass-text.Light-Blue-600 { + color: #039be5; +} +.sass-text.Light-Blue-700 { + color: #0288d1; +} +.sass-text.Light-Blue-800 { + color: #0277bd; +} +.sass-text.Light-Blue-900 { + color: #01579b; +} +.sass-text.Light-Blue-A100 { + color: #80d8ff; +} +.sass-text.Light-Blue-A200 { + color: #40c4ff; +} +.sass-text.Light-Blue-A400 { + color: #00b0ff; +} +.sass-text.Light-Blue-A700 { + color: #0091ea; +} +.sass-text.Cyan { + color: #00bcd4; +} +.sass-text.Cyan-50 { + color: #e0f7fa; +} +.sass-text.Cyan-100 { + color: #b2ebf2; +} +.sass-text.Cyan-200 { + color: #80deea; +} +.sass-text.Cyan-300 { + color: #4dd0e1; +} +.sass-text.Cyan-400 { + color: #26c6da; +} +.sass-text.Cyan-500 { + color: #00bcd4; +} +.sass-text.Cyan-600 { + color: #00acc1; +} +.sass-text.Cyan-700 { + color: #0097a7; +} +.sass-text.Cyan-800 { + color: #00838f; +} +.sass-text.Cyan-900 { + color: #006064; +} +.sass-text.Cyan-A100 { + color: #84ffff; +} +.sass-text.Cyan-A200 { + color: #18ffff; +} +.sass-text.Cyan-A400 { + color: #00e5ff; +} +.sass-text.Cyan-A700 { + color: #00b8d4; +} +.sass-text.Teal { + color: #009688; +} +.sass-text.Teal-50 { + color: #e0f2f1; +} +.sass-text.Teal-100 { + color: #b2dfdb; +} +.sass-text.Teal-200 { + color: #80cbc4; +} +.sass-text.Teal-300 { + color: #4db6ac; +} +.sass-text.Teal-400 { + color: #26a69a; +} +.sass-text.Teal-500 { + color: #009688; +} +.sass-text.Teal-600 { + color: #00897b; +} +.sass-text.Teal-700 { + color: #00796b; +} +.sass-text.Teal-800 { + color: #00695c; +} +.sass-text.Teal-900 { + color: #004d40; +} +.sass-text.Teal-A100 { + color: #a7ffeb; +} +.sass-text.Teal-A200 { + color: #64ffda; +} +.sass-text.Teal-A400 { + color: #1de9b6; +} +.sass-text.Teal-A700 { + color: #00bfa5; +} +.sass-text.Green { + color: #259b24; +} +.sass-text.Green-50 { + color: #d0f8ce; +} +.sass-text.Green-100 { + color: #a3e9a4; +} +.sass-text.Green-200 { + color: #72d572; +} +.sass-text.Green-300 { + color: #42bd41; +} +.sass-text.Green-400 { + color: #2baf2b; +} +.sass-text.Green-500 { + color: #259b24; +} +.sass-text.Green-600 { + color: #0a8f08; +} +.sass-text.Green-700 { + color: #0a7e07; +} +.sass-text.Green-800 { + color: #056f00; +} +.sass-text.Green-900 { + color: #0d5302; +} +.sass-text.Green-A100 { + color: #a2f78d; +} +.sass-text.Green-A200 { + color: #5af158; +} +.sass-text.Green-A400 { + color: #14e715; +} +.sass-text.Green-A700 { + color: #12c700; +} +.sass-text.Light-Green { + color: #8bc34a; +} +.sass-text.Light-Green-50 { + color: #f1f8e9; +} +.sass-text.Light-Green-100 { + color: #dcedc8; +} +.sass-text.Light-Green-200 { + color: #c5e1a5; +} +.sass-text.Light-Green-300 { + color: #aed581; +} +.sass-text.Light-Green-400 { + color: #9ccc65; +} +.sass-text.Light-Green-500 { + color: #8bc34a; +} +.sass-text.Light-Green-600 { + color: #7cb342; +} +.sass-text.Light-Green-700 { + color: #689f38; +} +.sass-text.Light-Green-800 { + color: #558b2f; +} +.sass-text.Light-Green-900 { + color: #33691e; +} +.sass-text.Light-Green-A100 { + color: #ccff90; +} +.sass-text.Light-Green-A200 { + color: #b2ff59; +} +.sass-text.Light-Green-A400 { + color: #76ff03; +} +.sass-text.Light-Green-A700 { + color: #64dd17; +} +.sass-text.Lime { + color: #cddc39; +} +.sass-text.Lime-50 { + color: #f9fbe7; +} +.sass-text.Lime-100 { + color: #f0f4c3; +} +.sass-text.Lime-200 { + color: #e6ee9c; +} +.sass-text.Lime-300 { + color: #dce775; +} +.sass-text.Lime-400 { + color: #d4e157; +} +.sass-text.Lime-500 { + color: #cddc39; +} +.sass-text.Lime-600 { + color: #c0ca33; +} +.sass-text.Lime-700 { + color: #afb42b; +} +.sass-text.Lime-800 { + color: #9e9d24; +} +.sass-text.Lime-900 { + color: #827717; +} +.sass-text.Lime-A100 { + color: #f4ff81; +} +.sass-text.Lime-A200 { + color: #eeff41; +} +.sass-text.Lime-A400 { + color: #c6ff00; +} +.sass-text.Lime-A700 { + color: #aeea00; +} +.sass-text.Yellow { + color: #ffeb3b; +} +.sass-text.Yellow-50 { + color: #fffde7; +} +.sass-text.Yellow-100 { + color: #fff9c4; +} +.sass-text.Yellow-200 { + color: #fff59d; +} +.sass-text.Yellow-300 { + color: #fff176; +} +.sass-text.Yellow-400 { + color: #ffee58; +} +.sass-text.Yellow-500 { + color: #ffeb3b; +} +.sass-text.Yellow-600 { + color: #fdd835; +} +.sass-text.Yellow-700 { + color: #fbc02d; +} +.sass-text.Yellow-800 { + color: #f9a825; +} +.sass-text.Yellow-900 { + color: #f57f17; +} +.sass-text.Yellow-A100 { + color: #ffff8d; +} +.sass-text.Yellow-A200 { + color: #ffff00; +} +.sass-text.Yellow-A400 { + color: #ffea00; +} +.sass-text.Yellow-A700 { + color: #ffd600; +} +.sass-text.Amber { + color: #ffc107; +} +.sass-text.Amber-50 { + color: #fff8e1; +} +.sass-text.Amber-100 { + color: #ffecb3; +} +.sass-text.Amber-200 { + color: #ffe082; +} +.sass-text.Amber-300 { + color: #ffd54f; +} +.sass-text.Amber-400 { + color: #ffca28; +} +.sass-text.Amber-500 { + color: #ffc107; +} +.sass-text.Amber-600 { + color: #ffb300; +} +.sass-text.Amber-700 { + color: #ffa000; +} +.sass-text.Amber-800 { + color: #ff8f00; +} +.sass-text.Amber-900 { + color: #ff6f00; +} +.sass-text.Amber-A100 { + color: #ffe57f; +} +.sass-text.Amber-A200 { + color: #ffd740; +} +.sass-text.Amber-A400 { + color: #ffc400; +} +.sass-text.Amber-A700 { + color: #ffab00; +} +.sass-text.Orange { + color: #ff9800; +} +.sass-text.Orange-50 { + color: #fff3e0; +} +.sass-text.Orange-100 { + color: #ffe0b2; +} +.sass-text.Orange-200 { + color: #ffcc80; +} +.sass-text.Orange-300 { + color: #ffb74d; +} +.sass-text.Orange-400 { + color: #ffa726; +} +.sass-text.Orange-500 { + color: #ff9800; +} +.sass-text.Orange-600 { + color: #fb8c00; +} +.sass-text.Orange-700 { + color: #f57c00; +} +.sass-text.Orange-800 { + color: #ef6c00; +} +.sass-text.Orange-900 { + color: #e65100; +} +.sass-text.Orange-A100 { + color: #ffd180; +} +.sass-text.Orange-A200 { + color: #ffab40; +} +.sass-text.Orange-A400 { + color: #ff9100; +} +.sass-text.Orange-A700 { + color: #ff6d00; +} +.sass-text.Deep-Orange { + color: #ff5722; +} +.sass-text.Deep-Orange-50 { + color: #fbe9e7; +} +.sass-text.Deep-Orange-100 { + color: #ffccbc; +} +.sass-text.Deep-Orange-200 { + color: #ffab91; +} +.sass-text.Deep-Orange-300 { + color: #ff8a65; +} +.sass-text.Deep-Orange-400 { + color: #ff7043; +} +.sass-text.Deep-Orange-500 { + color: #ff5722; +} +.sass-text.Deep-Orange-600 { + color: #f4511e; +} +.sass-text.Deep-Orange-700 { + color: #e64a19; +} +.sass-text.Deep-Orange-800 { + color: #d84315; +} +.sass-text.Deep-Orange-900 { + color: #bf360c; +} +.sass-text.Deep-Orange-A100 { + color: #ff9e80; +} +.sass-text.Deep-Orange-A200 { + color: #ff6e40; +} +.sass-text.Deep-Orange-A400 { + color: #ff3d00; +} +.sass-text.Deep-Orange-A700 { + color: #dd2c00; +} +.sass-text.Brown { + color: #795548; +} +.sass-text.Brown-50 { + color: #efebe9; +} +.sass-text.Brown-100 { + color: #d7ccc8; +} +.sass-text.Brown-200 { + color: #bcaaa4; +} +.sass-text.Brown-300 { + color: #a1887f; +} +.sass-text.Brown-400 { + color: #8d6e63; +} +.sass-text.Brown-500 { + color: #795548; +} +.sass-text.Brown-600 { + color: #6d4c41; +} +.sass-text.Brown-700 { + color: #5d4037; +} +.sass-text.Brown-800 { + color: #4e342e; +} +.sass-text.Brown-900 { + color: #3e2723; +} +.sass-text.Grey { + color: #9e9e9e; +} +.sass-text.Grey-50 { + color: #fafafa; +} +.sass-text.Grey-100 { + color: #f5f5f5; +} +.sass-text.Grey-200 { + color: #eeeeee; +} +.sass-text.Grey-300 { + color: #e0e0e0; +} +.sass-text.Grey-400 { + color: #bdbdbd; +} +.sass-text.Grey-500 { + color: #9e9e9e; +} +.sass-text.Grey-600 { + color: #757575; +} +.sass-text.Grey-700 { + color: #616161; +} +.sass-text.Grey-800 { + color: #424242; +} +.sass-text.Grey-900 { + color: #212121; +} +.sass-text.Blue-Grey { + color: #607d8b; +} +.sass-text.Blue-Grey-50 { + color: #eceff1; +} +.sass-text.Blue-Grey-100 { + color: #cfd8dc; +} +.sass-text.Blue-Grey-200 { + color: #b0bec5; +} +.sass-text.Blue-Grey-300 { + color: #90a4ae; +} +.sass-text.Blue-Grey-400 { + color: #78909c; +} +.sass-text.Blue-Grey-500 { + color: #607d8b; +} +.sass-text.Blue-Grey-600 { + color: #546e7a; +} +.sass-text.Blue-Grey-700 { + color: #455a64; +} +.sass-text.Blue-Grey-800 { + color: #37474f; +} +.sass-text.Blue-Grey-900 { + color: #263238; +} +.sass-text.Black { + color: #000000; +} +.sass-text.Black-500 { + color: #000000; +} +.sass-text.Black-Text { + color: rgba(0, 0, 0, 0.87); +} +.sass-text.Black-Secondary-Text { + color: rgba(0, 0, 0, 0.54); +} +.sass-text.Black-Icons { + color: rgba(0, 0, 0, 0.54); +} +.sass-text.Black-Disabled { + color: rgba(0, 0, 0, 0.26); +} +.sass-text.Black-Hint-Text { + color: rgba(0, 0, 0, 0.26); +} +.sass-text.Black-Dividers { + color: rgba(0, 0, 0, 0.12); +} +.sass-text.White { + color: #ffffff; +} +.sass-text.White-500 { + color: #ffffff; +} +.sass-text.White-Text { + color: #ffffff; +} +.sass-text.White-Secondary-Text { + color: rgba(255, 255, 255, 0.7); +} +.sass-text.White-Icons { + color: #ffffff; +} +.sass-text.White-Disabled { + color: rgba(255, 255, 255, 0.3); +} +.sass-text.White-Hint-Text { + color: rgba(255, 255, 255, 0.3); +} +.sass-text.White-Dividers { + color: rgba(255, 255, 255, 0.12); +} diff --git a/test/sass.scss b/test/sass.scss index d31491e..720f971 100644 --- a/test/sass.scss +++ b/test/sass.scss @@ -1121,6 +1121,30 @@ background-color: palette(Black, 500); } + &.Black-Text { + background-color: palette(Black, Text); + } + + &.Black-Secondary-Text { + background-color: palette(Black, Secondary Text); + } + + &.Black-Icons { + background-color: palette(Black, Icons); + } + + &.Black-Disabled { + background-color: palette(Black, Disabled); + } + + &.Black-Hint-Text { + background-color: palette(Black, Hint Text); + } + + &.Black-Dividers { + background-color: palette(Black, Dividers); + } + &.White { background-color: palette(White); @@ -1130,5 +1154,1210 @@ background-color: palette(White, 500); } + &.White-Text { + background-color: palette(White, Text); + } + + &.White-Secondary-Text { + background-color: palette(White, Secondary Text); + } + + &.White-Icons { + background-color: palette(White, Icons); + } + + &.White-Disabled { + background-color: palette(White, Disabled); + } + + &.White-Hint-Text { + background-color: palette(White, Hint Text); + } + + &.White-Dividers { + background-color: palette(White, Dividers); + } + + +} + +.sass-text { + + &.Red { + color: palette(Red); + } + + &.Red-50 { + color: palette(Red, 50); + } + + &.Red-100 { + color: palette(Red, 100); + } + + &.Red-200 { + color: palette(Red, 200); + } + + &.Red-300 { + color: palette(Red, 300); + } + + &.Red-400 { + color: palette(Red, 400); + } + + &.Red-500 { + color: palette(Red, 500); + } + + &.Red-600 { + color: palette(Red, 600); + } + + &.Red-700 { + color: palette(Red, 700); + } + + &.Red-800 { + color: palette(Red, 800); + } + + &.Red-900 { + color: palette(Red, 900); + } + + &.Red-A100 { + color: palette(Red, A100); + } + + &.Red-A200 { + color: palette(Red, A200); + } + + &.Red-A400 { + color: palette(Red, A400); + } + + &.Red-A700 { + color: palette(Red, A700); + } + + + &.Pink { + color: palette(Pink); + } + + &.Pink-50 { + color: palette(Pink, 50); + } + + &.Pink-100 { + color: palette(Pink, 100); + } + + &.Pink-200 { + color: palette(Pink, 200); + } + + &.Pink-300 { + color: palette(Pink, 300); + } + + &.Pink-400 { + color: palette(Pink, 400); + } + + &.Pink-500 { + color: palette(Pink, 500); + } + + &.Pink-600 { + color: palette(Pink, 600); + } + + &.Pink-700 { + color: palette(Pink, 700); + } + + &.Pink-800 { + color: palette(Pink, 800); + } + + &.Pink-900 { + color: palette(Pink, 900); + } + + &.Pink-A100 { + color: palette(Pink, A100); + } + + &.Pink-A200 { + color: palette(Pink, A200); + } + + &.Pink-A400 { + color: palette(Pink, A400); + } + + &.Pink-A700 { + color: palette(Pink, A700); + } + + + &.Purple { + color: palette(Purple); + } + + &.Purple-50 { + color: palette(Purple, 50); + } + + &.Purple-100 { + color: palette(Purple, 100); + } + + &.Purple-200 { + color: palette(Purple, 200); + } + + &.Purple-300 { + color: palette(Purple, 300); + } + + &.Purple-400 { + color: palette(Purple, 400); + } + + &.Purple-500 { + color: palette(Purple, 500); + } + + &.Purple-600 { + color: palette(Purple, 600); + } + + &.Purple-700 { + color: palette(Purple, 700); + } + + &.Purple-800 { + color: palette(Purple, 800); + } + + &.Purple-900 { + color: palette(Purple, 900); + } + + &.Purple-A100 { + color: palette(Purple, A100); + } + + &.Purple-A200 { + color: palette(Purple, A200); + } + + &.Purple-A400 { + color: palette(Purple, A400); + } + + &.Purple-A700 { + color: palette(Purple, A700); + } + + + &.Deep-Purple { + color: palette(Deep Purple); + } + + &.Deep-Purple-50 { + color: palette(Deep Purple, 50); + } + + &.Deep-Purple-100 { + color: palette(Deep Purple, 100); + } + + &.Deep-Purple-200 { + color: palette(Deep Purple, 200); + } + + &.Deep-Purple-300 { + color: palette(Deep Purple, 300); + } + + &.Deep-Purple-400 { + color: palette(Deep Purple, 400); + } + + &.Deep-Purple-500 { + color: palette(Deep Purple, 500); + } + + &.Deep-Purple-600 { + color: palette(Deep Purple, 600); + } + + &.Deep-Purple-700 { + color: palette(Deep Purple, 700); + } + + &.Deep-Purple-800 { + color: palette(Deep Purple, 800); + } + + &.Deep-Purple-900 { + color: palette(Deep Purple, 900); + } + + &.Deep-Purple-A100 { + color: palette(Deep Purple, A100); + } + + &.Deep-Purple-A200 { + color: palette(Deep Purple, A200); + } + + &.Deep-Purple-A400 { + color: palette(Deep Purple, A400); + } + + &.Deep-Purple-A700 { + color: palette(Deep Purple, A700); + } + + + &.Indigo { + color: palette(Indigo); + } + + &.Indigo-50 { + color: palette(Indigo, 50); + } + + &.Indigo-100 { + color: palette(Indigo, 100); + } + + &.Indigo-200 { + color: palette(Indigo, 200); + } + + &.Indigo-300 { + color: palette(Indigo, 300); + } + + &.Indigo-400 { + color: palette(Indigo, 400); + } + + &.Indigo-500 { + color: palette(Indigo, 500); + } + + &.Indigo-600 { + color: palette(Indigo, 600); + } + + &.Indigo-700 { + color: palette(Indigo, 700); + } + + &.Indigo-800 { + color: palette(Indigo, 800); + } + + &.Indigo-900 { + color: palette(Indigo, 900); + } + + &.Indigo-A100 { + color: palette(Indigo, A100); + } + + &.Indigo-A200 { + color: palette(Indigo, A200); + } + + &.Indigo-A400 { + color: palette(Indigo, A400); + } + + &.Indigo-A700 { + color: palette(Indigo, A700); + } + + + &.Blue { + color: palette(Blue); + } + + &.Blue-50 { + color: palette(Blue, 50); + } + + &.Blue-100 { + color: palette(Blue, 100); + } + + &.Blue-200 { + color: palette(Blue, 200); + } + + &.Blue-300 { + color: palette(Blue, 300); + } + + &.Blue-400 { + color: palette(Blue, 400); + } + + &.Blue-500 { + color: palette(Blue, 500); + } + + &.Blue-600 { + color: palette(Blue, 600); + } + + &.Blue-700 { + color: palette(Blue, 700); + } + + &.Blue-800 { + color: palette(Blue, 800); + } + + &.Blue-900 { + color: palette(Blue, 900); + } + + &.Blue-A100 { + color: palette(Blue, A100); + } + + &.Blue-A200 { + color: palette(Blue, A200); + } + + &.Blue-A400 { + color: palette(Blue, A400); + } + + &.Blue-A700 { + color: palette(Blue, A700); + } + + + &.Light-Blue { + color: palette(Light Blue); + } + + &.Light-Blue-50 { + color: palette(Light Blue, 50); + } + + &.Light-Blue-100 { + color: palette(Light Blue, 100); + } + + &.Light-Blue-200 { + color: palette(Light Blue, 200); + } + + &.Light-Blue-300 { + color: palette(Light Blue, 300); + } + + &.Light-Blue-400 { + color: palette(Light Blue, 400); + } + + &.Light-Blue-500 { + color: palette(Light Blue, 500); + } + + &.Light-Blue-600 { + color: palette(Light Blue, 600); + } + + &.Light-Blue-700 { + color: palette(Light Blue, 700); + } + + &.Light-Blue-800 { + color: palette(Light Blue, 800); + } + + &.Light-Blue-900 { + color: palette(Light Blue, 900); + } + + &.Light-Blue-A100 { + color: palette(Light Blue, A100); + } + + &.Light-Blue-A200 { + color: palette(Light Blue, A200); + } + + &.Light-Blue-A400 { + color: palette(Light Blue, A400); + } + + &.Light-Blue-A700 { + color: palette(Light Blue, A700); + } + + + &.Cyan { + color: palette(Cyan); + } + + &.Cyan-50 { + color: palette(Cyan, 50); + } + + &.Cyan-100 { + color: palette(Cyan, 100); + } + + &.Cyan-200 { + color: palette(Cyan, 200); + } + + &.Cyan-300 { + color: palette(Cyan, 300); + } + + &.Cyan-400 { + color: palette(Cyan, 400); + } + + &.Cyan-500 { + color: palette(Cyan, 500); + } + + &.Cyan-600 { + color: palette(Cyan, 600); + } + + &.Cyan-700 { + color: palette(Cyan, 700); + } + + &.Cyan-800 { + color: palette(Cyan, 800); + } + + &.Cyan-900 { + color: palette(Cyan, 900); + } + + &.Cyan-A100 { + color: palette(Cyan, A100); + } + + &.Cyan-A200 { + color: palette(Cyan, A200); + } + + &.Cyan-A400 { + color: palette(Cyan, A400); + } + + &.Cyan-A700 { + color: palette(Cyan, A700); + } + + + &.Teal { + color: palette(Teal); + } + + &.Teal-50 { + color: palette(Teal, 50); + } + + &.Teal-100 { + color: palette(Teal, 100); + } + + &.Teal-200 { + color: palette(Teal, 200); + } + + &.Teal-300 { + color: palette(Teal, 300); + } + + &.Teal-400 { + color: palette(Teal, 400); + } + + &.Teal-500 { + color: palette(Teal, 500); + } + + &.Teal-600 { + color: palette(Teal, 600); + } + + &.Teal-700 { + color: palette(Teal, 700); + } + + &.Teal-800 { + color: palette(Teal, 800); + } + + &.Teal-900 { + color: palette(Teal, 900); + } + + &.Teal-A100 { + color: palette(Teal, A100); + } + + &.Teal-A200 { + color: palette(Teal, A200); + } + + &.Teal-A400 { + color: palette(Teal, A400); + } + + &.Teal-A700 { + color: palette(Teal, A700); + } + + + &.Green { + color: palette(Green); + } + + &.Green-50 { + color: palette(Green, 50); + } + + &.Green-100 { + color: palette(Green, 100); + } + + &.Green-200 { + color: palette(Green, 200); + } + + &.Green-300 { + color: palette(Green, 300); + } + + &.Green-400 { + color: palette(Green, 400); + } + + &.Green-500 { + color: palette(Green, 500); + } + + &.Green-600 { + color: palette(Green, 600); + } + + &.Green-700 { + color: palette(Green, 700); + } + + &.Green-800 { + color: palette(Green, 800); + } + + &.Green-900 { + color: palette(Green, 900); + } + + &.Green-A100 { + color: palette(Green, A100); + } + + &.Green-A200 { + color: palette(Green, A200); + } + + &.Green-A400 { + color: palette(Green, A400); + } + + &.Green-A700 { + color: palette(Green, A700); + } + + + &.Light-Green { + color: palette(Light Green); + } + + &.Light-Green-50 { + color: palette(Light Green, 50); + } + + &.Light-Green-100 { + color: palette(Light Green, 100); + } + + &.Light-Green-200 { + color: palette(Light Green, 200); + } + + &.Light-Green-300 { + color: palette(Light Green, 300); + } + + &.Light-Green-400 { + color: palette(Light Green, 400); + } + + &.Light-Green-500 { + color: palette(Light Green, 500); + } + + &.Light-Green-600 { + color: palette(Light Green, 600); + } + + &.Light-Green-700 { + color: palette(Light Green, 700); + } + + &.Light-Green-800 { + color: palette(Light Green, 800); + } + + &.Light-Green-900 { + color: palette(Light Green, 900); + } + + &.Light-Green-A100 { + color: palette(Light Green, A100); + } + + &.Light-Green-A200 { + color: palette(Light Green, A200); + } + + &.Light-Green-A400 { + color: palette(Light Green, A400); + } + + &.Light-Green-A700 { + color: palette(Light Green, A700); + } + + + &.Lime { + color: palette(Lime); + } + + &.Lime-50 { + color: palette(Lime, 50); + } + + &.Lime-100 { + color: palette(Lime, 100); + } + + &.Lime-200 { + color: palette(Lime, 200); + } + + &.Lime-300 { + color: palette(Lime, 300); + } + + &.Lime-400 { + color: palette(Lime, 400); + } + + &.Lime-500 { + color: palette(Lime, 500); + } + + &.Lime-600 { + color: palette(Lime, 600); + } + + &.Lime-700 { + color: palette(Lime, 700); + } + + &.Lime-800 { + color: palette(Lime, 800); + } + + &.Lime-900 { + color: palette(Lime, 900); + } + + &.Lime-A100 { + color: palette(Lime, A100); + } + + &.Lime-A200 { + color: palette(Lime, A200); + } + + &.Lime-A400 { + color: palette(Lime, A400); + } + + &.Lime-A700 { + color: palette(Lime, A700); + } + + + &.Yellow { + color: palette(Yellow); + } + + &.Yellow-50 { + color: palette(Yellow, 50); + } + + &.Yellow-100 { + color: palette(Yellow, 100); + } + + &.Yellow-200 { + color: palette(Yellow, 200); + } + + &.Yellow-300 { + color: palette(Yellow, 300); + } + + &.Yellow-400 { + color: palette(Yellow, 400); + } + + &.Yellow-500 { + color: palette(Yellow, 500); + } + + &.Yellow-600 { + color: palette(Yellow, 600); + } + + &.Yellow-700 { + color: palette(Yellow, 700); + } + + &.Yellow-800 { + color: palette(Yellow, 800); + } + + &.Yellow-900 { + color: palette(Yellow, 900); + } + + &.Yellow-A100 { + color: palette(Yellow, A100); + } + + &.Yellow-A200 { + color: palette(Yellow, A200); + } + + &.Yellow-A400 { + color: palette(Yellow, A400); + } + + &.Yellow-A700 { + color: palette(Yellow, A700); + } + + + &.Amber { + color: palette(Amber); + } + + &.Amber-50 { + color: palette(Amber, 50); + } + + &.Amber-100 { + color: palette(Amber, 100); + } + + &.Amber-200 { + color: palette(Amber, 200); + } + + &.Amber-300 { + color: palette(Amber, 300); + } + + &.Amber-400 { + color: palette(Amber, 400); + } + + &.Amber-500 { + color: palette(Amber, 500); + } + + &.Amber-600 { + color: palette(Amber, 600); + } + + &.Amber-700 { + color: palette(Amber, 700); + } + + &.Amber-800 { + color: palette(Amber, 800); + } + + &.Amber-900 { + color: palette(Amber, 900); + } + + &.Amber-A100 { + color: palette(Amber, A100); + } + + &.Amber-A200 { + color: palette(Amber, A200); + } + + &.Amber-A400 { + color: palette(Amber, A400); + } + + &.Amber-A700 { + color: palette(Amber, A700); + } + + + &.Orange { + color: palette(Orange); + } + + &.Orange-50 { + color: palette(Orange, 50); + } + + &.Orange-100 { + color: palette(Orange, 100); + } + + &.Orange-200 { + color: palette(Orange, 200); + } + + &.Orange-300 { + color: palette(Orange, 300); + } + + &.Orange-400 { + color: palette(Orange, 400); + } + + &.Orange-500 { + color: palette(Orange, 500); + } + + &.Orange-600 { + color: palette(Orange, 600); + } + + &.Orange-700 { + color: palette(Orange, 700); + } + + &.Orange-800 { + color: palette(Orange, 800); + } + + &.Orange-900 { + color: palette(Orange, 900); + } + + &.Orange-A100 { + color: palette(Orange, A100); + } + + &.Orange-A200 { + color: palette(Orange, A200); + } + + &.Orange-A400 { + color: palette(Orange, A400); + } + + &.Orange-A700 { + color: palette(Orange, A700); + } + + + &.Deep-Orange { + color: palette(Deep Orange); + } + + &.Deep-Orange-50 { + color: palette(Deep Orange, 50); + } + + &.Deep-Orange-100 { + color: palette(Deep Orange, 100); + } + + &.Deep-Orange-200 { + color: palette(Deep Orange, 200); + } + + &.Deep-Orange-300 { + color: palette(Deep Orange, 300); + } + + &.Deep-Orange-400 { + color: palette(Deep Orange, 400); + } + + &.Deep-Orange-500 { + color: palette(Deep Orange, 500); + } + + &.Deep-Orange-600 { + color: palette(Deep Orange, 600); + } + + &.Deep-Orange-700 { + color: palette(Deep Orange, 700); + } + + &.Deep-Orange-800 { + color: palette(Deep Orange, 800); + } + + &.Deep-Orange-900 { + color: palette(Deep Orange, 900); + } + + &.Deep-Orange-A100 { + color: palette(Deep Orange, A100); + } + + &.Deep-Orange-A200 { + color: palette(Deep Orange, A200); + } + + &.Deep-Orange-A400 { + color: palette(Deep Orange, A400); + } + + &.Deep-Orange-A700 { + color: palette(Deep Orange, A700); + } + + + &.Brown { + color: palette(Brown); + } + + &.Brown-50 { + color: palette(Brown, 50); + } + + &.Brown-100 { + color: palette(Brown, 100); + } + + &.Brown-200 { + color: palette(Brown, 200); + } + + &.Brown-300 { + color: palette(Brown, 300); + } + + &.Brown-400 { + color: palette(Brown, 400); + } + + &.Brown-500 { + color: palette(Brown, 500); + } + + &.Brown-600 { + color: palette(Brown, 600); + } + + &.Brown-700 { + color: palette(Brown, 700); + } + + &.Brown-800 { + color: palette(Brown, 800); + } + + &.Brown-900 { + color: palette(Brown, 900); + } + + + &.Grey { + color: palette(Grey); + } + + &.Grey-50 { + color: palette(Grey, 50); + } + + &.Grey-100 { + color: palette(Grey, 100); + } + + &.Grey-200 { + color: palette(Grey, 200); + } + + &.Grey-300 { + color: palette(Grey, 300); + } + + &.Grey-400 { + color: palette(Grey, 400); + } + + &.Grey-500 { + color: palette(Grey, 500); + } + + &.Grey-600 { + color: palette(Grey, 600); + } + + &.Grey-700 { + color: palette(Grey, 700); + } + + &.Grey-800 { + color: palette(Grey, 800); + } + + &.Grey-900 { + color: palette(Grey, 900); + } + + + &.Blue-Grey { + color: palette(Blue Grey); + } + + &.Blue-Grey-50 { + color: palette(Blue Grey, 50); + } + + &.Blue-Grey-100 { + color: palette(Blue Grey, 100); + } + + &.Blue-Grey-200 { + color: palette(Blue Grey, 200); + } + + &.Blue-Grey-300 { + color: palette(Blue Grey, 300); + } + + &.Blue-Grey-400 { + color: palette(Blue Grey, 400); + } + + &.Blue-Grey-500 { + color: palette(Blue Grey, 500); + } + + &.Blue-Grey-600 { + color: palette(Blue Grey, 600); + } + + &.Blue-Grey-700 { + color: palette(Blue Grey, 700); + } + + &.Blue-Grey-800 { + color: palette(Blue Grey, 800); + } + + &.Blue-Grey-900 { + color: palette(Blue Grey, 900); + } + + + &.Black { + color: palette(Black); + } + + &.Black-500 { + color: palette(Black, 500); + } + + &.Black-Text { + color: palette(Black, Text); + } + + &.Black-Secondary-Text { + color: palette(Black, Secondary Text); + } + + &.Black-Icons { + color: palette(Black, Icons); + } + + &.Black-Disabled { + color: palette(Black, Disabled); + } + + &.Black-Hint-Text { + color: palette(Black, Hint Text); + } + + &.Black-Dividers { + color: palette(Black, Dividers); + } + + + &.White { + color: palette(White); + } + + &.White-500 { + color: palette(White, 500); + } + + &.White-Text { + color: palette(White, Text); + } + + &.White-Secondary-Text { + color: palette(White, Secondary Text); + } + + &.White-Icons { + color: palette(White, Icons); + } + + &.White-Disabled { + color: palette(White, Disabled); + } + + &.White-Hint-Text { + color: palette(White, Hint Text); + } + + &.White-Dividers { + color: palette(White, Dividers); + } + } diff --git a/test/stylus.css b/test/stylus.css index 9bb319e..8366092 100644 --- a/test/stylus.css +++ b/test/stylus.css @@ -823,9 +823,912 @@ .stylus.Black-500 { background-color: #000; } +.stylus.Black-Text { + background-color: rgba(0,0,0,0.87); +} +.stylus.Black-Secondary-Text { + background-color: rgba(0,0,0,0.54); +} +.stylus.Black-Icons { + background-color: rgba(0,0,0,0.54); +} +.stylus.Black-Disabled { + background-color: rgba(0,0,0,0.26); +} +.stylus.Black-Hint-Text { + background-color: rgba(0,0,0,0.26); +} +.stylus.Black-Dividers { + background-color: rgba(0,0,0,0.12); +} .stylus.White { background-color: #fff; } .stylus.White-500 { background-color: #fff; } +.stylus.White-Text { + background-color: #fff; +} +.stylus.White-Secondary-Text { + background-color: rgba(255,255,255,0.7); +} +.stylus.White-Icons { + background-color: #fff; +} +.stylus.White-Disabled { + background-color: rgba(255,255,255,0.3); +} +.stylus.White-Hint-Text { + background-color: rgba(255,255,255,0.3); +} +.stylus.White-Dividers { + background-color: rgba(255,255,255,0.12); +} +.stylus-text.Red { + color: #e51c23; +} +.stylus-text.Red-50 { + color: #fde0dc; +} +.stylus-text.Red-100 { + color: #f9bdbb; +} +.stylus-text.Red-200 { + color: #f69988; +} +.stylus-text.Red-300 { + color: #f36c60; +} +.stylus-text.Red-400 { + color: #e84e40; +} +.stylus-text.Red-500 { + color: #e51c23; +} +.stylus-text.Red-600 { + color: #dd191d; +} +.stylus-text.Red-700 { + color: #d01716; +} +.stylus-text.Red-800 { + color: #c41411; +} +.stylus-text.Red-900 { + color: #b0120a; +} +.stylus-text.Red-A100 { + color: #ff7997; +} +.stylus-text.Red-A200 { + color: #ff5177; +} +.stylus-text.Red-A400 { + color: #ff2d6f; +} +.stylus-text.Red-A700 { + color: #e00032; +} +.stylus-text.Pink { + color: #e91e63; +} +.stylus-text.Pink-50 { + color: #fce4ec; +} +.stylus-text.Pink-100 { + color: #f8bbd0; +} +.stylus-text.Pink-200 { + color: #f48fb1; +} +.stylus-text.Pink-300 { + color: #f06292; +} +.stylus-text.Pink-400 { + color: #ec407a; +} +.stylus-text.Pink-500 { + color: #e91e63; +} +.stylus-text.Pink-600 { + color: #d81b60; +} +.stylus-text.Pink-700 { + color: #c2185b; +} +.stylus-text.Pink-800 { + color: #ad1457; +} +.stylus-text.Pink-900 { + color: #880e4f; +} +.stylus-text.Pink-A100 { + color: #ff80ab; +} +.stylus-text.Pink-A200 { + color: #ff4081; +} +.stylus-text.Pink-A400 { + color: #f50057; +} +.stylus-text.Pink-A700 { + color: #c51162; +} +.stylus-text.Purple { + color: #9c27b0; +} +.stylus-text.Purple-50 { + color: #f3e5f5; +} +.stylus-text.Purple-100 { + color: #e1bee7; +} +.stylus-text.Purple-200 { + color: #ce93d8; +} +.stylus-text.Purple-300 { + color: #ba68c8; +} +.stylus-text.Purple-400 { + color: #ab47bc; +} +.stylus-text.Purple-500 { + color: #9c27b0; +} +.stylus-text.Purple-600 { + color: #8e24aa; +} +.stylus-text.Purple-700 { + color: #7b1fa2; +} +.stylus-text.Purple-800 { + color: #6a1b9a; +} +.stylus-text.Purple-900 { + color: #4a148c; +} +.stylus-text.Purple-A100 { + color: #ea80fc; +} +.stylus-text.Purple-A200 { + color: #e040fb; +} +.stylus-text.Purple-A400 { + color: #d500f9; +} +.stylus-text.Purple-A700 { + color: #a0f; +} +.stylus-text.Deep-Purple { + color: #673ab7; +} +.stylus-text.Deep-Purple-50 { + color: #ede7f6; +} +.stylus-text.Deep-Purple-100 { + color: #d1c4e9; +} +.stylus-text.Deep-Purple-200 { + color: #b39ddb; +} +.stylus-text.Deep-Purple-300 { + color: #9575cd; +} +.stylus-text.Deep-Purple-400 { + color: #7e57c2; +} +.stylus-text.Deep-Purple-500 { + color: #673ab7; +} +.stylus-text.Deep-Purple-600 { + color: #5e35b1; +} +.stylus-text.Deep-Purple-700 { + color: #512da8; +} +.stylus-text.Deep-Purple-800 { + color: #4527a0; +} +.stylus-text.Deep-Purple-900 { + color: #311b92; +} +.stylus-text.Deep-Purple-A100 { + color: #b388ff; +} +.stylus-text.Deep-Purple-A200 { + color: #7c4dff; +} +.stylus-text.Deep-Purple-A400 { + color: #651fff; +} +.stylus-text.Deep-Purple-A700 { + color: #6200ea; +} +.stylus-text.Indigo { + color: #3f51b5; +} +.stylus-text.Indigo-50 { + color: #e8eaf6; +} +.stylus-text.Indigo-100 { + color: #c5cae9; +} +.stylus-text.Indigo-200 { + color: #9fa8da; +} +.stylus-text.Indigo-300 { + color: #7986cb; +} +.stylus-text.Indigo-400 { + color: #5c6bc0; +} +.stylus-text.Indigo-500 { + color: #3f51b5; +} +.stylus-text.Indigo-600 { + color: #3949ab; +} +.stylus-text.Indigo-700 { + color: #303f9f; +} +.stylus-text.Indigo-800 { + color: #283593; +} +.stylus-text.Indigo-900 { + color: #1a237e; +} +.stylus-text.Indigo-A100 { + color: #8c9eff; +} +.stylus-text.Indigo-A200 { + color: #536dfe; +} +.stylus-text.Indigo-A400 { + color: #3d5afe; +} +.stylus-text.Indigo-A700 { + color: #304ffe; +} +.stylus-text.Blue { + color: #5677fc; +} +.stylus-text.Blue-50 { + color: #e7e9fd; +} +.stylus-text.Blue-100 { + color: #d0d9ff; +} +.stylus-text.Blue-200 { + color: #afbfff; +} +.stylus-text.Blue-300 { + color: #91a7ff; +} +.stylus-text.Blue-400 { + color: #738ffe; +} +.stylus-text.Blue-500 { + color: #5677fc; +} +.stylus-text.Blue-600 { + color: #4e6cef; +} +.stylus-text.Blue-700 { + color: #455ede; +} +.stylus-text.Blue-800 { + color: #3b50ce; +} +.stylus-text.Blue-900 { + color: #2a36b1; +} +.stylus-text.Blue-A100 { + color: #a6baff; +} +.stylus-text.Blue-A200 { + color: #6889ff; +} +.stylus-text.Blue-A400 { + color: #4d73ff; +} +.stylus-text.Blue-A700 { + color: #4d69ff; +} +.stylus-text.Light-Blue { + color: #03a9f4; +} +.stylus-text.Light-Blue-50 { + color: #e1f5fe; +} +.stylus-text.Light-Blue-100 { + color: #b3e5fc; +} +.stylus-text.Light-Blue-200 { + color: #81d4fa; +} +.stylus-text.Light-Blue-300 { + color: #4fc3f7; +} +.stylus-text.Light-Blue-400 { + color: #29b6f6; +} +.stylus-text.Light-Blue-500 { + color: #03a9f4; +} +.stylus-text.Light-Blue-600 { + color: #039be5; +} +.stylus-text.Light-Blue-700 { + color: #0288d1; +} +.stylus-text.Light-Blue-800 { + color: #0277bd; +} +.stylus-text.Light-Blue-900 { + color: #01579b; +} +.stylus-text.Light-Blue-A100 { + color: #80d8ff; +} +.stylus-text.Light-Blue-A200 { + color: #40c4ff; +} +.stylus-text.Light-Blue-A400 { + color: #00b0ff; +} +.stylus-text.Light-Blue-A700 { + color: #0091ea; +} +.stylus-text.Cyan { + color: #00bcd4; +} +.stylus-text.Cyan-50 { + color: #e0f7fa; +} +.stylus-text.Cyan-100 { + color: #b2ebf2; +} +.stylus-text.Cyan-200 { + color: #80deea; +} +.stylus-text.Cyan-300 { + color: #4dd0e1; +} +.stylus-text.Cyan-400 { + color: #26c6da; +} +.stylus-text.Cyan-500 { + color: #00bcd4; +} +.stylus-text.Cyan-600 { + color: #00acc1; +} +.stylus-text.Cyan-700 { + color: #0097a7; +} +.stylus-text.Cyan-800 { + color: #00838f; +} +.stylus-text.Cyan-900 { + color: #006064; +} +.stylus-text.Cyan-A100 { + color: #84ffff; +} +.stylus-text.Cyan-A200 { + color: #18ffff; +} +.stylus-text.Cyan-A400 { + color: #00e5ff; +} +.stylus-text.Cyan-A700 { + color: #00b8d4; +} +.stylus-text.Teal { + color: #009688; +} +.stylus-text.Teal-50 { + color: #e0f2f1; +} +.stylus-text.Teal-100 { + color: #b2dfdb; +} +.stylus-text.Teal-200 { + color: #80cbc4; +} +.stylus-text.Teal-300 { + color: #4db6ac; +} +.stylus-text.Teal-400 { + color: #26a69a; +} +.stylus-text.Teal-500 { + color: #009688; +} +.stylus-text.Teal-600 { + color: #00897b; +} +.stylus-text.Teal-700 { + color: #00796b; +} +.stylus-text.Teal-800 { + color: #00695c; +} +.stylus-text.Teal-900 { + color: #004d40; +} +.stylus-text.Teal-A100 { + color: #a7ffeb; +} +.stylus-text.Teal-A200 { + color: #64ffda; +} +.stylus-text.Teal-A400 { + color: #1de9b6; +} +.stylus-text.Teal-A700 { + color: #00bfa5; +} +.stylus-text.Green { + color: #259b24; +} +.stylus-text.Green-50 { + color: #d0f8ce; +} +.stylus-text.Green-100 { + color: #a3e9a4; +} +.stylus-text.Green-200 { + color: #72d572; +} +.stylus-text.Green-300 { + color: #42bd41; +} +.stylus-text.Green-400 { + color: #2baf2b; +} +.stylus-text.Green-500 { + color: #259b24; +} +.stylus-text.Green-600 { + color: #0a8f08; +} +.stylus-text.Green-700 { + color: #0a7e07; +} +.stylus-text.Green-800 { + color: #056f00; +} +.stylus-text.Green-900 { + color: #0d5302; +} +.stylus-text.Green-A100 { + color: #a2f78d; +} +.stylus-text.Green-A200 { + color: #5af158; +} +.stylus-text.Green-A400 { + color: #14e715; +} +.stylus-text.Green-A700 { + color: #12c700; +} +.stylus-text.Light-Green { + color: #8bc34a; +} +.stylus-text.Light-Green-50 { + color: #f1f8e9; +} +.stylus-text.Light-Green-100 { + color: #dcedc8; +} +.stylus-text.Light-Green-200 { + color: #c5e1a5; +} +.stylus-text.Light-Green-300 { + color: #aed581; +} +.stylus-text.Light-Green-400 { + color: #9ccc65; +} +.stylus-text.Light-Green-500 { + color: #8bc34a; +} +.stylus-text.Light-Green-600 { + color: #7cb342; +} +.stylus-text.Light-Green-700 { + color: #689f38; +} +.stylus-text.Light-Green-800 { + color: #558b2f; +} +.stylus-text.Light-Green-900 { + color: #33691e; +} +.stylus-text.Light-Green-A100 { + color: #ccff90; +} +.stylus-text.Light-Green-A200 { + color: #b2ff59; +} +.stylus-text.Light-Green-A400 { + color: #76ff03; +} +.stylus-text.Light-Green-A700 { + color: #64dd17; +} +.stylus-text.Lime { + color: #cddc39; +} +.stylus-text.Lime-50 { + color: #f9fbe7; +} +.stylus-text.Lime-100 { + color: #f0f4c3; +} +.stylus-text.Lime-200 { + color: #e6ee9c; +} +.stylus-text.Lime-300 { + color: #dce775; +} +.stylus-text.Lime-400 { + color: #d4e157; +} +.stylus-text.Lime-500 { + color: #cddc39; +} +.stylus-text.Lime-600 { + color: #c0ca33; +} +.stylus-text.Lime-700 { + color: #afb42b; +} +.stylus-text.Lime-800 { + color: #9e9d24; +} +.stylus-text.Lime-900 { + color: #827717; +} +.stylus-text.Lime-A100 { + color: #f4ff81; +} +.stylus-text.Lime-A200 { + color: #eeff41; +} +.stylus-text.Lime-A400 { + color: #c6ff00; +} +.stylus-text.Lime-A700 { + color: #aeea00; +} +.stylus-text.Yellow { + color: #ffeb3b; +} +.stylus-text.Yellow-50 { + color: #fffde7; +} +.stylus-text.Yellow-100 { + color: #fff9c4; +} +.stylus-text.Yellow-200 { + color: #fff59d; +} +.stylus-text.Yellow-300 { + color: #fff176; +} +.stylus-text.Yellow-400 { + color: #ffee58; +} +.stylus-text.Yellow-500 { + color: #ffeb3b; +} +.stylus-text.Yellow-600 { + color: #fdd835; +} +.stylus-text.Yellow-700 { + color: #fbc02d; +} +.stylus-text.Yellow-800 { + color: #f9a825; +} +.stylus-text.Yellow-900 { + color: #f57f17; +} +.stylus-text.Yellow-A100 { + color: #ffff8d; +} +.stylus-text.Yellow-A200 { + color: #ff0; +} +.stylus-text.Yellow-A400 { + color: #ffea00; +} +.stylus-text.Yellow-A700 { + color: #ffd600; +} +.stylus-text.Amber { + color: #ffc107; +} +.stylus-text.Amber-50 { + color: #fff8e1; +} +.stylus-text.Amber-100 { + color: #ffecb3; +} +.stylus-text.Amber-200 { + color: #ffe082; +} +.stylus-text.Amber-300 { + color: #ffd54f; +} +.stylus-text.Amber-400 { + color: #ffca28; +} +.stylus-text.Amber-500 { + color: #ffc107; +} +.stylus-text.Amber-600 { + color: #ffb300; +} +.stylus-text.Amber-700 { + color: #ffa000; +} +.stylus-text.Amber-800 { + color: #ff8f00; +} +.stylus-text.Amber-900 { + color: #ff6f00; +} +.stylus-text.Amber-A100 { + color: #ffe57f; +} +.stylus-text.Amber-A200 { + color: #ffd740; +} +.stylus-text.Amber-A400 { + color: #ffc400; +} +.stylus-text.Amber-A700 { + color: #ffab00; +} +.stylus-text.Orange { + color: #ff9800; +} +.stylus-text.Orange-50 { + color: #fff3e0; +} +.stylus-text.Orange-100 { + color: #ffe0b2; +} +.stylus-text.Orange-200 { + color: #ffcc80; +} +.stylus-text.Orange-300 { + color: #ffb74d; +} +.stylus-text.Orange-400 { + color: #ffa726; +} +.stylus-text.Orange-500 { + color: #ff9800; +} +.stylus-text.Orange-600 { + color: #fb8c00; +} +.stylus-text.Orange-700 { + color: #f57c00; +} +.stylus-text.Orange-800 { + color: #ef6c00; +} +.stylus-text.Orange-900 { + color: #e65100; +} +.stylus-text.Orange-A100 { + color: #ffd180; +} +.stylus-text.Orange-A200 { + color: #ffab40; +} +.stylus-text.Orange-A400 { + color: #ff9100; +} +.stylus-text.Orange-A700 { + color: #ff6d00; +} +.stylus-text.Deep-Orange { + color: #ff5722; +} +.stylus-text.Deep-Orange-50 { + color: #fbe9e7; +} +.stylus-text.Deep-Orange-100 { + color: #ffccbc; +} +.stylus-text.Deep-Orange-200 { + color: #ffab91; +} +.stylus-text.Deep-Orange-300 { + color: #ff8a65; +} +.stylus-text.Deep-Orange-400 { + color: #ff7043; +} +.stylus-text.Deep-Orange-500 { + color: #ff5722; +} +.stylus-text.Deep-Orange-600 { + color: #f4511e; +} +.stylus-text.Deep-Orange-700 { + color: #e64a19; +} +.stylus-text.Deep-Orange-800 { + color: #d84315; +} +.stylus-text.Deep-Orange-900 { + color: #bf360c; +} +.stylus-text.Deep-Orange-A100 { + color: #ff9e80; +} +.stylus-text.Deep-Orange-A200 { + color: #ff6e40; +} +.stylus-text.Deep-Orange-A400 { + color: #ff3d00; +} +.stylus-text.Deep-Orange-A700 { + color: #dd2c00; +} +.stylus-text.Brown { + color: #795548; +} +.stylus-text.Brown-50 { + color: #efebe9; +} +.stylus-text.Brown-100 { + color: #d7ccc8; +} +.stylus-text.Brown-200 { + color: #bcaaa4; +} +.stylus-text.Brown-300 { + color: #a1887f; +} +.stylus-text.Brown-400 { + color: #8d6e63; +} +.stylus-text.Brown-500 { + color: #795548; +} +.stylus-text.Brown-600 { + color: #6d4c41; +} +.stylus-text.Brown-700 { + color: #5d4037; +} +.stylus-text.Brown-800 { + color: #4e342e; +} +.stylus-text.Brown-900 { + color: #3e2723; +} +.stylus-text.Grey { + color: #9e9e9e; +} +.stylus-text.Grey-50 { + color: #fafafa; +} +.stylus-text.Grey-100 { + color: #f5f5f5; +} +.stylus-text.Grey-200 { + color: #eee; +} +.stylus-text.Grey-300 { + color: #e0e0e0; +} +.stylus-text.Grey-400 { + color: #bdbdbd; +} +.stylus-text.Grey-500 { + color: #9e9e9e; +} +.stylus-text.Grey-600 { + color: #757575; +} +.stylus-text.Grey-700 { + color: #616161; +} +.stylus-text.Grey-800 { + color: #424242; +} +.stylus-text.Grey-900 { + color: #212121; +} +.stylus-text.Blue-Grey { + color: #607d8b; +} +.stylus-text.Blue-Grey-50 { + color: #eceff1; +} +.stylus-text.Blue-Grey-100 { + color: #cfd8dc; +} +.stylus-text.Blue-Grey-200 { + color: #b0bec5; +} +.stylus-text.Blue-Grey-300 { + color: #90a4ae; +} +.stylus-text.Blue-Grey-400 { + color: #78909c; +} +.stylus-text.Blue-Grey-500 { + color: #607d8b; +} +.stylus-text.Blue-Grey-600 { + color: #546e7a; +} +.stylus-text.Blue-Grey-700 { + color: #455a64; +} +.stylus-text.Blue-Grey-800 { + color: #37474f; +} +.stylus-text.Blue-Grey-900 { + color: #263238; +} +.stylus-text.Black { + color: #000; +} +.stylus-text.Black-500 { + color: #000; +} +.stylus-text.Black-Text { + color: rgba(0,0,0,0.87); +} +.stylus-text.Black-Secondary-Text { + color: rgba(0,0,0,0.54); +} +.stylus-text.Black-Icons { + color: rgba(0,0,0,0.54); +} +.stylus-text.Black-Disabled { + color: rgba(0,0,0,0.26); +} +.stylus-text.Black-Hint-Text { + color: rgba(0,0,0,0.26); +} +.stylus-text.Black-Dividers { + color: rgba(0,0,0,0.12); +} +.stylus-text.White { + color: #fff; +} +.stylus-text.White-500 { + color: #fff; +} +.stylus-text.White-Text { + color: #fff; +} +.stylus-text.White-Secondary-Text { + color: rgba(255,255,255,0.7); +} +.stylus-text.White-Icons { + color: #fff; +} +.stylus-text.White-Disabled { + color: rgba(255,255,255,0.3); +} +.stylus-text.White-Hint-Text { + color: rgba(255,255,255,0.3); +} +.stylus-text.White-Dividers { + color: rgba(255,255,255,0.12); +}