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

Stuff for fixing the lists and palette

master
Matt Gaunt 2014-12-16 15:05:01 +00:00
parent 9c770150c2
commit fee311669b
3 changed files with 338 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/styleguide/list/_list.scss
View File

@ -6,39 +6,41 @@ $list-container-item-height: 70px;
$list-container-item-border-color: #ddd;
$list-container-view-background: rgba(255,255,255,1);
.List {
.wsk-list {
display : block;
height : $list-container-height;
overflow: scroll;
width : $list-container-width;
}
.List .List-view {
.wsk-list--styled-view {
background: $list-container-view-background;
transition: background 0.3s 0.1s;
z-index : 1;
ul {
display : inline;
list-style-type: none;
li {
&:hover {
background: #efefef;
}
border-bottom: 1px solid $list-container-item-border-color;
height : $list-container-item-height;
left : 0;
right : 0;
}
}
}
.List .List-name {
.wsk-list--styled-view ul {
display : inline;
list-style-type: none;
}
.wsk-list--styled-view li {
border-bottom: 1px solid $list-container-item-border-color;
height : $list-container-item-height;
left : 0;
right : 0;
}
.wsk-list--styled-view li:hover {
background: #efefef;
}
.wsk-list-view--name {
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.List .List-avatar {
.wsk-list-view--avatar {
background : url("images/avatar.png");
background-size: 100%;
border-radius : 50%;
@ -50,13 +52,13 @@ $list-container-view-background: rgba(255,255,255,1);
width : 50px;
}
.List--inline {
.wsk-list--inline {
list-style : none;
margin-left : -5px;
padding-left: 0;
}
.List--inline > li {
.wsk-list--inline > li {
display : inline-block;
padding-left : 5px;
padding-right: 5px;

44
app/styleguide/list/demo.html
View File

@ -35,7 +35,7 @@
<li>Item 5</li>
</ul>
<h3>Inlined</h3>
<ul class="List--inline">
<ul class="wsk-list--inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
@ -48,47 +48,47 @@
<p>
<div class="List">
<p class="Typography-Body-2">Contacts</p>
<div class="List-view">
<div class="wsk-list--styled-view">
<ul>
<li>
<span class="List-avatar"></span>
<span class="List-name">Ali Connors</span>
<span class="wsk-list-view--avatar"></span>
<span class="wsk-list-view--name">Ali Connors</span>
</li>
<li>
<span class="List-avatar"></span>
<span class="List-name">Sandra Williams</span>
<span class="wsk-list-view--avatar"></span>
<span class="wsk-list-view--name">Sandra Williams</span>
</li>
<li>
<span class="List-avatar"></span>
<span class="List-name">Trevor Hansen</span>
<span class="wsk-list-view--avatar"></span>
<span class="wsk-list-view--name">Trevor Hansen</span>
</li>
<li>
<span class="List-avatar"></span>
<span class="List-name">Britta Holt</span>
<span class="wsk-list-view--avatar"></span>
<span class="wsk-list-view--name">Britta Holt</span>
</li>
<li>
<span class="List-avatar"></span>
<span class="List-name">David Park</span>
<span class="wsk-list-view--avatar"></span>
<span class="wsk-list-view--name">David Park</span>
</li>
<li>
<span class="List-avatar"></span>
<span class="List-name">Jennifer Adams</span>
<span class="wsk-list-view--avatar"></span>
<span class="wsk-list-view--name">Jennifer Adams</span>
</li>
<li>
<span class="List-avatar"></span>
<span class="List-name">Frank Connors</span>
<span class="wsk-list-view--avatar"></span>
<span class="wsk-list-view--name">Frank Connors</span>
</li>
<li>
<span class="List-avatar"></span>
<span class="List-name">Sandra Williams</span>
<span class="wsk-list-view--avatar"></span>
<span class="wsk-list-view--name">Sandra Williams</span>
</li>
<li>
<span class="List-avatar"></span>
<span class="List-name">Scott Michaels</span>
<span class="wsk-list-view--avatar"></span>
<span class="wsk-list-view--name">Scott Michaels</span>
</li>
<li>
<span class="List-avatar"></span>
<span class="List-name">Matt Connors</span>
<span class="wsk-list-view--avatar"></span>
<span class="wsk-list-view--name">Matt Connors</span>
</li>
</ul>
</div>

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

@ -16,412 +16,412 @@
</head>
<body>
<div class="PreviewBlock">
<div class="demo-palette-group wsk-palette-group__red">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__red">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Red</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__pink">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__pink">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Pink</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__purple">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__purple">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Purple</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300">300</div>
<div class="demo-palette-group--color wsk-palette-color--400">400</div>
<div class="demo-palette-group--color wsk-palette-color--500">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300">300</div>
<div class="demo-palette-group--color demo-palette-color--400">400</div>
<div class="demo-palette-group--color demo-palette-color--500">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__deep-purple">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__deep-purple">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Deep Purple</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300">300</div>
<div class="demo-palette-group--color wsk-palette-color--400">400</div>
<div class="demo-palette-group--color wsk-palette-color--500">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300">300</div>
<div class="demo-palette-group--color demo-palette-color--400">400</div>
<div class="demo-palette-group--color demo-palette-color--500">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__indigo">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__indigo">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Indigo</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300">300</div>
<div class="demo-palette-group--color wsk-palette-color--400">400</div>
<div class="demo-palette-group--color wsk-palette-color--500">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300">300</div>
<div class="demo-palette-group--color demo-palette-color--400">400</div>
<div class="demo-palette-group--color demo-palette-color--500">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__blue">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__blue">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Blue</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__light-blue">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__light-blue">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Light Blue</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__cyan">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__cyan">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Cyan</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700 dark-text">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__teal">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__teal">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Teal</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700 dark-text">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__green">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__green">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Green</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700 dark-text">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__light-green">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__light-green">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Light Green</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500 dark-text">500</div>
<div class="demo-palette-group--color wsk-palette-color--600 dark-text">600</div>
<div class="demo-palette-group--color wsk-palette-color--700 dark-text">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500 dark-text">500</div>
<div class="demo-palette-group--color demo-palette-color--600 dark-text">600</div>
<div class="demo-palette-group--color demo-palette-color--700 dark-text">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700 dark-text">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__lime">
<div class="demo-palette-group--heading wsk-palette-color--500 dark-text">
<div class="demo-palette-group demo-palette-group__lime">
<div class="demo-palette-group--heading demo-palette-color--500 dark-text">
<div class="demo-palette-group--name">Lime</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500 dark-text">500</div>
<div class="demo-palette-group--color wsk-palette-color--600 dark-text">600</div>
<div class="demo-palette-group--color wsk-palette-color--700 dark-text">700</div>
<div class="demo-palette-group--color wsk-palette-color--800 dark-text">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500 dark-text">500</div>
<div class="demo-palette-group--color demo-palette-color--600 dark-text">600</div>
<div class="demo-palette-group--color demo-palette-color--700 dark-text">700</div>
<div class="demo-palette-group--color demo-palette-color--800 dark-text">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700 dark-text">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__yellow">
<div class="demo-palette-group--heading wsk-palette-color--500 dark-text">
<div class="demo-palette-group demo-palette-group__yellow">
<div class="demo-palette-group--heading demo-palette-color--500 dark-text">
<div class="demo-palette-group--name">Yellow</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500 dark-text">500</div>
<div class="demo-palette-group--color wsk-palette-color--600 dark-text">600</div>
<div class="demo-palette-group--color wsk-palette-color--700 dark-text">700</div>
<div class="demo-palette-group--color wsk-palette-color--800 dark-text">800</div>
<div class="demo-palette-group--color wsk-palette-color--900 dark-text">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500 dark-text">500</div>
<div class="demo-palette-group--color demo-palette-color--600 dark-text">600</div>
<div class="demo-palette-group--color demo-palette-color--700 dark-text">700</div>
<div class="demo-palette-group--color demo-palette-color--800 dark-text">800</div>
<div class="demo-palette-group--color demo-palette-color--900 dark-text">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700 dark-text">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__amber">
<div class="demo-palette-group--heading wsk-palette-color--500 dark-text">
<div class="demo-palette-group demo-palette-group__amber">
<div class="demo-palette-group--heading demo-palette-color--500 dark-text">
<div class="demo-palette-group--name">Amber</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500 dark-text">500</div>
<div class="demo-palette-group--color wsk-palette-color--600 dark-text">600</div>
<div class="demo-palette-group--color wsk-palette-color--700 dark-text">700</div>
<div class="demo-palette-group--color wsk-palette-color--800 dark-text">800</div>
<div class="demo-palette-group--color wsk-palette-color--900 dark-text">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500 dark-text">500</div>
<div class="demo-palette-group--color demo-palette-color--600 dark-text">600</div>
<div class="demo-palette-group--color demo-palette-color--700 dark-text">700</div>
<div class="demo-palette-group--color demo-palette-color--800 dark-text">800</div>
<div class="demo-palette-group--color demo-palette-color--900 dark-text">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700 dark-text">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__orange">
<div class="demo-palette-group--heading wsk-palette-color--500 dark-text">
<div class="demo-palette-group demo-palette-group__orange">
<div class="demo-palette-group--heading demo-palette-color--500 dark-text">
<div class="demo-palette-group--name">Orange</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500 dark-text">500</div>
<div class="demo-palette-group--color wsk-palette-color--600 dark-text">600</div>
<div class="demo-palette-group--color wsk-palette-color--700 dark-text">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500 dark-text">500</div>
<div class="demo-palette-group--color demo-palette-color--600 dark-text">600</div>
<div class="demo-palette-group--color demo-palette-color--700 dark-text">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400 dark-text">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700 dark-text">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__deep-orange">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__deep-orange">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Deep Orange</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color wsk-palette-color--A400">A400</div>
<div class="demo-palette-group--color wsk-palette-color--A700">A700</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--A100 dark-text">A100</div>
<div class="demo-palette-group--color demo-palette-color--A200 dark-text">A200</div>
<div class="demo-palette-group--color demo-palette-color--A400">A400</div>
<div class="demo-palette-group--color demo-palette-color--A700">A700</div>
</div>
<div class="demo-palette-group wsk-palette-group__brown">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__brown">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Brown</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300">300</div>
<div class="demo-palette-group--color wsk-palette-color--400">400</div>
<div class="demo-palette-group--color wsk-palette-color--500">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300">300</div>
<div class="demo-palette-group--color demo-palette-color--400">400</div>
<div class="demo-palette-group--color demo-palette-color--500">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
</div>
<div class="demo-palette-group wsk-palette-group__grey">
<div class="demo-palette-group--heading wsk-palette-color--500 dark-text">
<div class="demo-palette-group demo-palette-group__grey">
<div class="demo-palette-group--heading demo-palette-color--500 dark-text">
<div class="demo-palette-group--name">Grey</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color wsk-palette-color--500 dark-text">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color wsk-palette-color--1000">1000</div>
<div class="demo-palette-group--color wsk-palette-color--1000-inverse dark-text">1000</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400 dark-text">400</div>
<div class="demo-palette-group--color demo-palette-color--500 dark-text">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--1000">1000</div>
<div class="demo-palette-group--color demo-palette-color--1000-inverse dark-text">1000</div>
</div>
<div class="demo-palette-group wsk-palette-group__blue-grey">
<div class="demo-palette-group--heading wsk-palette-color--500">
<div class="demo-palette-group demo-palette-group__blue-grey">
<div class="demo-palette-group--heading demo-palette-color--500">
<div class="demo-palette-group--name">Blue Grey</div>
500
</div>
<div class="demo-palette-group--color wsk-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color wsk-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color wsk-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color wsk-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color wsk-palette-color--400">400</div>
<div class="demo-palette-group--color wsk-palette-color--500">500</div>
<div class="demo-palette-group--color wsk-palette-color--600">600</div>
<div class="demo-palette-group--color wsk-palette-color--700">700</div>
<div class="demo-palette-group--color wsk-palette-color--800">800</div>
<div class="demo-palette-group--color wsk-palette-color--900">900</div>
<div class="demo-palette-group--color demo-palette-color--50 dark-text">50</div>
<div class="demo-palette-group--color demo-palette-color--100 dark-text">100</div>
<div class="demo-palette-group--color demo-palette-color--200 dark-text">200</div>
<div class="demo-palette-group--color demo-palette-color--300 dark-text">300</div>
<div class="demo-palette-group--color demo-palette-color--400">400</div>
<div class="demo-palette-group--color demo-palette-color--500">500</div>
<div class="demo-palette-group--color demo-palette-color--600">600</div>
<div class="demo-palette-group--color demo-palette-color--700">700</div>
<div class="demo-palette-group--color demo-palette-color--800">800</div>
<div class="demo-palette-group--color demo-palette-color--900">900</div>
</div>
</div>
</body>