google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rename all the things for the lolz / sergio asked for it in the PR

master
Matt Gaunt 2014-12-16 13:14:58 +00:00
parent e94f2add01
commit 53589ad4a8
2 changed files with 352 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

626
app/styleguide/palette/demo.html
View File

@ -16,412 +16,412 @@
</head> </head>
<body> <body>
<div class="PreviewBlock"> <div class="PreviewBlock">
<div class="wsk-palettegroup wsk-palettegroup__red"> <div class="wsk-palette-group wsk-palette-group__red">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Red</div> <div class="wsk-palette-group--name">Red</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div> <div class="wsk-palette-group--color wsk-palette-color--500">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__pink"> <div class="wsk-palette-group wsk-palette-group__pink">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Pink</div> <div class="wsk-palette-group--name">Pink</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div> <div class="wsk-palette-group--color wsk-palette-color--500">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__purple"> <div class="wsk-palette-group wsk-palette-group__purple">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Purple</div> <div class="wsk-palette-group--name">Purple</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300">300</div> <div class="wsk-palette-group--color wsk-palette-color--300">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400">400</div> <div class="wsk-palette-group--color wsk-palette-color--400">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div> <div class="wsk-palette-group--color wsk-palette-color--500">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__deepPurple"> <div class="wsk-palette-group wsk-palette-group__deep-purple">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Deep Purple</div> <div class="wsk-palette-group--name">Deep Purple</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300">300</div> <div class="wsk-palette-group--color wsk-palette-color--300">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400">400</div> <div class="wsk-palette-group--color wsk-palette-color--400">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div> <div class="wsk-palette-group--color wsk-palette-color--500">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__indigo"> <div class="wsk-palette-group wsk-palette-group__indigo">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Indigo</div> <div class="wsk-palette-group--name">Indigo</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300">300</div> <div class="wsk-palette-group--color wsk-palette-color--300">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400">400</div> <div class="wsk-palette-group--color wsk-palette-color--400">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div> <div class="wsk-palette-group--color wsk-palette-color--500">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__blue"> <div class="wsk-palette-group wsk-palette-group__blue">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Blue</div> <div class="wsk-palette-group--name">Blue</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div> <div class="wsk-palette-group--color wsk-palette-color--500">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__lightBlue"> <div class="wsk-palette-group wsk-palette-group__light-blue">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Light Blue</div> <div class="wsk-palette-group--name">Light Blue</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div> <div class="wsk-palette-group--color wsk-palette-color--500">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400 dark-text">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__cyan"> <div class="wsk-palette-group wsk-palette-group__cyan">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Cyan</div> <div class="wsk-palette-group--name">Cyan</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div> <div class="wsk-palette-group--color wsk-palette-color--500">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400 dark-text">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700 dark-text">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__teal"> <div class="wsk-palette-group wsk-palette-group__teal">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Teal</div> <div class="wsk-palette-group--name">Teal</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div> <div class="wsk-palette-group--color wsk-palette-color--500">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400 dark-text">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700 dark-text">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__green"> <div class="wsk-palette-group wsk-palette-group__green">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Green</div> <div class="wsk-palette-group--name">Green</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div> <div class="wsk-palette-group--color wsk-palette-color--500">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400 dark-text">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700 dark-text">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__lightGreen"> <div class="wsk-palette-group wsk-palette-group__light-green">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Light Green</div> <div class="wsk-palette-group--name">Light Green</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500 dark-text">500</div> <div class="wsk-palette-group--color wsk-palette-color--500 dark-text">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600 dark-text">600</div> <div class="wsk-palette-group--color wsk-palette-color--600 dark-text">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700 dark-text">700</div> <div class="wsk-palette-group--color wsk-palette-color--700 dark-text">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400 dark-text">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700 dark-text">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__lime"> <div class="wsk-palette-group wsk-palette-group__lime">
<div class="wsk-palettegroup--heading wsk-palettecolor--500 dark-text"> <div class="wsk-palette-group--heading wsk-palette-color--500 dark-text">
<div class="wsk-palettegroup--name">Lime</div> <div class="wsk-palette-group--name">Lime</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500 dark-text">500</div> <div class="wsk-palette-group--color wsk-palette-color--500 dark-text">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600 dark-text">600</div> <div class="wsk-palette-group--color wsk-palette-color--600 dark-text">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700 dark-text">700</div> <div class="wsk-palette-group--color wsk-palette-color--700 dark-text">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800 dark-text">800</div> <div class="wsk-palette-group--color wsk-palette-color--800 dark-text">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400 dark-text">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700 dark-text">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__yellow"> <div class="wsk-palette-group wsk-palette-group__yellow">
<div class="wsk-palettegroup--heading wsk-palettecolor--500 dark-text"> <div class="wsk-palette-group--heading wsk-palette-color--500 dark-text">
<div class="wsk-palettegroup--name">Yellow</div> <div class="wsk-palette-group--name">Yellow</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500 dark-text">500</div> <div class="wsk-palette-group--color wsk-palette-color--500 dark-text">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600 dark-text">600</div> <div class="wsk-palette-group--color wsk-palette-color--600 dark-text">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700 dark-text">700</div> <div class="wsk-palette-group--color wsk-palette-color--700 dark-text">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800 dark-text">800</div> <div class="wsk-palette-group--color wsk-palette-color--800 dark-text">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900 dark-text">900</div> <div class="wsk-palette-group--color wsk-palette-color--900 dark-text">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400 dark-text">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700 dark-text">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__amber"> <div class="wsk-palette-group wsk-palette-group__amber">
<div class="wsk-palettegroup--heading wsk-palettecolor--500 dark-text"> <div class="wsk-palette-group--heading wsk-palette-color--500 dark-text">
<div class="wsk-palettegroup--name">Amber</div> <div class="wsk-palette-group--name">Amber</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500 dark-text">500</div> <div class="wsk-palette-group--color wsk-palette-color--500 dark-text">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600 dark-text">600</div> <div class="wsk-palette-group--color wsk-palette-color--600 dark-text">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700 dark-text">700</div> <div class="wsk-palette-group--color wsk-palette-color--700 dark-text">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800 dark-text">800</div> <div class="wsk-palette-group--color wsk-palette-color--800 dark-text">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900 dark-text">900</div> <div class="wsk-palette-group--color wsk-palette-color--900 dark-text">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400 dark-text">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700 dark-text">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__orange"> <div class="wsk-palette-group wsk-palette-group__orange">
<div class="wsk-palettegroup--heading wsk-palettecolor--500 dark-text"> <div class="wsk-palette-group--heading wsk-palette-color--500 dark-text">
<div class="wsk-palettegroup--name">Orange</div> <div class="wsk-palette-group--name">Orange</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500 dark-text">500</div> <div class="wsk-palette-group--color wsk-palette-color--500 dark-text">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600 dark-text">600</div> <div class="wsk-palette-group--color wsk-palette-color--600 dark-text">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700 dark-text">700</div> <div class="wsk-palette-group--color wsk-palette-color--700 dark-text">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400 dark-text">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700 dark-text">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__deepOrange"> <div class="wsk-palette-group wsk-palette-group__deep-orange">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Deep Orange</div> <div class="wsk-palette-group--name">Deep Orange</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div> <div class="wsk-palette-group--color wsk-palette-color--500">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div> <div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div> <div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div> <div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div> <div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__brown"> <div class="wsk-palette-group wsk-palette-group__brown">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Brown</div> <div class="wsk-palette-group--name">Brown</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300">300</div> <div class="wsk-palette-group--color wsk-palette-color--300">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400">400</div> <div class="wsk-palette-group--color wsk-palette-color--400">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div> <div class="wsk-palette-group--color wsk-palette-color--500">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__grey"> <div class="wsk-palette-group wsk-palette-group__grey">
<div class="wsk-palettegroup--heading wsk-palettecolor--500 dark-text"> <div class="wsk-palette-group--heading wsk-palette-color--500 dark-text">
<div class="wsk-palettegroup--name">Grey</div> <div class="wsk-palette-group--name">Grey</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div> <div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500 dark-text">500</div> <div class="wsk-palette-group--color wsk-palette-color--500 dark-text">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
<div class="wsk-palettegroup--color wsk-palettecolor--1000">1000</div> <div class="wsk-palette-group--color wsk-palette-color--1000">1000</div>
<div class="wsk-palettegroup--color wsk-palettecolor--1000-inverse dark-text">1000</div> <div class="wsk-palette-group--color wsk-palette-color--1000-inverse dark-text">1000</div>
</div> </div>
<div class="wsk-palettegroup wsk-palettegroup__blueGrey"> <div class="wsk-palette-group wsk-palette-group__blue-grey">
<div class="wsk-palettegroup--heading wsk-palettecolor--500"> <div class="wsk-palette-group--heading wsk-palette-color--500">
<div class="wsk-palettegroup--name">Blue Grey</div> <div class="wsk-palette-group--name">Blue Grey</div>
500 500
</div> </div>
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div> <div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div> <div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div> <div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div> <div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="wsk-palettegroup--color wsk-palettecolor--400">400</div> <div class="wsk-palette-group--color wsk-palette-color--400">400</div>
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div> <div class="wsk-palette-group--color wsk-palette-color--500">500</div>
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div> <div class="wsk-palette-group--color wsk-palette-color--600">600</div>
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div> <div class="wsk-palette-group--color wsk-palette-color--700">700</div>
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div> <div class="wsk-palette-group--color wsk-palette-color--800">800</div>
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div> <div class="wsk-palette-group--color wsk-palette-color--900">900</div>
</div> </div>
</div> </div>
</body> </body>

78
app/styleguide/palette/demo.scss
View File

@ -3,7 +3,7 @@
@import "../typography/typography"; @import "../typography/typography";
@mixin colorGroups($palette) { @mixin colorGroups($palette) {
.wsk-palettecolor--50 { .wsk-palette-color--50 {
background-color: #{nth($palette, 1)}; background-color: #{nth($palette, 1)};
&:after { &:after {
@ -12,7 +12,7 @@
} }
} }
.wsk-palettecolor--100 { .wsk-palette-color--100 {
background-color: #{nth($palette, 2)}; background-color: #{nth($palette, 2)};
&:after { &:after {
@ -21,7 +21,7 @@
} }
} }
.wsk-palettecolor--200 { .wsk-palette-color--200 {
background-color: #{nth($palette, 3)}; background-color: #{nth($palette, 3)};
&:after { &:after {
@ -30,7 +30,7 @@
} }
} }
.wsk-palettecolor--300 { .wsk-palette-color--300 {
background-color: #{nth($palette, 4)}; background-color: #{nth($palette, 4)};
&:after { &:after {
@ -39,7 +39,7 @@
} }
} }
.wsk-palettecolor--400 { .wsk-palette-color--400 {
background-color: #{nth($palette, 5)}; background-color: #{nth($palette, 5)};
&:after { &:after {
@ -48,7 +48,7 @@
} }
} }
.wsk-palettecolor--500 { .wsk-palette-color--500 {
background-color: #{nth($palette, 6)}; background-color: #{nth($palette, 6)};
&:after { &:after {
@ -57,7 +57,7 @@
} }
} }
.wsk-palettecolor--600 { .wsk-palette-color--600 {
background-color: #{nth($palette, 7)}; background-color: #{nth($palette, 7)};
&:after { &:after {
@ -66,7 +66,7 @@
} }
} }
.wsk-palettecolor--700 { .wsk-palette-color--700 {
background-color: #{nth($palette, 8)}; background-color: #{nth($palette, 8)};
&:after { &:after {
@ -75,7 +75,7 @@
} }
} }
.wsk-palettecolor--800 { .wsk-palette-color--800 {
background-color: #{nth($palette, 9)}; background-color: #{nth($palette, 9)};
&:after { &:after {
@ -84,7 +84,7 @@
} }
} }
.wsk-palettecolor--900 { .wsk-palette-color--900 {
background-color: #{nth($palette, 10)}; background-color: #{nth($palette, 10)};
&:after { &:after {
@ -94,7 +94,7 @@
} }
@if length($palette) > 10 { @if length($palette) > 10 {
.wsk-palettecolor--A100 { .wsk-palette-color--A100 {
background-color: #{nth($palette, 11)}; background-color: #{nth($palette, 11)};
&:after { &:after {
@ -103,7 +103,7 @@
} }
} }
.wsk-palettecolor--A200 { .wsk-palette-color--A200 {
background-color: #{nth($palette, 12)}; background-color: #{nth($palette, 12)};
&:after { &:after {
@ -112,7 +112,7 @@
} }
} }
.wsk-palettecolor--A400 { .wsk-palette-color--A400 {
background-color: #{nth($palette, 13)}; background-color: #{nth($palette, 13)};
&:after { &:after {
@ -121,7 +121,7 @@
} }
} }
.wsk-palettecolor--A700 { .wsk-palette-color--A700 {
background-color: #{nth($palette, 14)}; background-color: #{nth($palette, 14)};
&:after { &:after {
@ -136,13 +136,13 @@
display: inline-block; display: inline-block;
} }
.wsk-palettegroup { .wsk-palette-group {
margin-top: 15px; margin-top: 15px;
width: 360px; width: 360px;
float: left; float: left;
} }
.wsk-palettegroup--color, .wsk-palettegroup--heading { .wsk-palette-group--color, .wsk-palette-group--heading {
@include typo-caption(); @include typo-caption();
max-width: 300px; max-width: 300px;
@ -150,86 +150,86 @@
color: white; color: white;
} }
.wsk-palettegroup .dark-text, .wsk-palettegroup-heading.dark-text .wsk-palettegroup-name { .wsk-palette-group .dark-text, .wsk-palette-group-heading.dark-text .wsk-palette-group-name {
color: #000; color: #000;
} }
.wsk-palettegroup--name { .wsk-palette-group--name {
padding: 0 0 60px 0; padding: 0 0 60px 0;
} }
.wsk-palettegroup__red { .wsk-palette-group__red {
@include colorGroups($palette-red); @include colorGroups($palette-red);
} }
.wsk-palettegroup__pink { .wsk-palette-group__pink {
@include colorGroups($palette-pink); @include colorGroups($palette-pink);
} }
.wsk-palettegroup__purple { .wsk-palette-group__purple {
@include colorGroups($palette-purple); @include colorGroups($palette-purple);
} }
.wsk-palettegroup__deepPurple { .wsk-palette-group__deep-purple {
@include colorGroups($palette-deep-purple); @include colorGroups($palette-deep-purple);
} }
.wsk-palettegroup__indigo { .wsk-palette-group__indigo {
@include colorGroups($palette-indigo); @include colorGroups($palette-indigo);
} }
.wsk-palettegroup__blue { .wsk-palette-group__blue {
@include colorGroups($palette-blue); @include colorGroups($palette-blue);
} }
.wsk-palettegroup__lightBlue { .wsk-palette-group__light-blue {
@include colorGroups($palette-light-blue); @include colorGroups($palette-light-blue);
} }
.wsk-palettegroup__cyan { .wsk-palette-group__cyan {
@include colorGroups($palette-cyan); @include colorGroups($palette-cyan);
} }
.wsk-palettegroup__teal { .wsk-palette-group__teal {
@include colorGroups($palette-teal); @include colorGroups($palette-teal);
} }
.wsk-palettegroup__green { .wsk-palette-group__green {
@include colorGroups($palette-green); @include colorGroups($palette-green);
} }
.wsk-palettegroup__lightGreen { .wsk-palette-group__light-green {
@include colorGroups($palette-light-green); @include colorGroups($palette-light-green);
} }
.wsk-palettegroup__lime { .wsk-palette-group__lime {
@include colorGroups($palette-lime); @include colorGroups($palette-lime);
} }
.wsk-palettegroup__yellow { .wsk-palette-group__yellow {
@include colorGroups($palette-yellow); @include colorGroups($palette-yellow);
} }
.wsk-palettegroup__amber { .wsk-palette-group__amber {
@include colorGroups($palette-amber); @include colorGroups($palette-amber);
} }
.wsk-palettegroup__orange { .wsk-palette-group__orange {
@include colorGroups($palette-orange); @include colorGroups($palette-orange);
} }
.wsk-palettegroup__deepOrange { .wsk-palette-group__deep-orange {
@include colorGroups($palette-deep-orange); @include colorGroups($palette-deep-orange);
} }
.wsk-palettegroup__brown { .wsk-palette-group__brown {
@include colorGroups($palette-brown); @include colorGroups($palette-brown);
} }
.wsk-palettegroup__grey { .wsk-palette-group__grey {
@include colorGroups($palette-grey); @include colorGroups($palette-grey);
.wsk-palettecolor--1000 { .wsk-palette-color--1000 {
background-color: #000000; background-color: #000000;
&:after { &:after {
@ -238,7 +238,7 @@
} }
} }
.wsk-palettecolor--1000-inverse { .wsk-palette-color--1000-inverse {
background-color: #ffffff; background-color: #ffffff;
&:after { &:after {
@ -248,6 +248,6 @@
} }
} }
.wsk-palettegroup__blueGrey { .wsk-palette-group__blue-grey {
@include colorGroups($palette-blue-grey); @include colorGroups($palette-blue-grey);
} }