Rename all the things for the lolz / sergio asked for it in the PR
Matt Gaunt
parent
e94f2add01
commit
53589ad4a8
|
|
@ -16,412 +16,412 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="PreviewBlock">
|
||||
<div class="wsk-palettegroup wsk-palettegroup__red">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Red</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__red">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Red</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__pink">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Pink</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__pink">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Pink</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__purple">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Purple</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__purple">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Purple</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__deepPurple">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Deep Purple</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__deep-purple">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Deep Purple</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__indigo">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Indigo</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__indigo">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Indigo</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__blue">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Blue</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__blue">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Blue</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__lightBlue">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Light Blue</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__light-blue">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Light Blue</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A400 dark-text">A400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__cyan">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Cyan</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__cyan">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Cyan</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--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--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__teal">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Teal</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__teal">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Teal</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--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--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__green">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Green</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__green">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Green</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--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--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__lightGreen">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Light Green</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__light-green">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Light Green</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500 dark-text">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600 dark-text">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700 dark-text">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--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--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500 dark-text">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600 dark-text">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700 dark-text">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__lime">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500 dark-text">
|
||||
<div class="wsk-palettegroup--name">Lime</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__lime">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500 dark-text">
|
||||
<div class="wsk-palette-group--name">Lime</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500 dark-text">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600 dark-text">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700 dark-text">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800 dark-text">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--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--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500 dark-text">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600 dark-text">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700 dark-text">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800 dark-text">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__yellow">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500 dark-text">
|
||||
<div class="wsk-palettegroup--name">Yellow</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__yellow">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500 dark-text">
|
||||
<div class="wsk-palette-group--name">Yellow</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500 dark-text">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600 dark-text">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700 dark-text">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800 dark-text">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900 dark-text">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--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--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500 dark-text">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600 dark-text">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700 dark-text">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800 dark-text">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900 dark-text">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__amber">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500 dark-text">
|
||||
<div class="wsk-palettegroup--name">Amber</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__amber">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500 dark-text">
|
||||
<div class="wsk-palette-group--name">Amber</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500 dark-text">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600 dark-text">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700 dark-text">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800 dark-text">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900 dark-text">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--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--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500 dark-text">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600 dark-text">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700 dark-text">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800 dark-text">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900 dark-text">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__orange">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500 dark-text">
|
||||
<div class="wsk-palettegroup--name">Orange</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__orange">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500 dark-text">
|
||||
<div class="wsk-palette-group--name">Orange</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500 dark-text">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600 dark-text">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700 dark-text">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--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--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500 dark-text">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600 dark-text">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700 dark-text">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400 dark-text">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700 dark-text">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__deepOrange">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Deep Orange</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__deep-orange">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Deep Orange</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A100 dark-text">A100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A200 dark-text">A200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A400">A400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--A700">A700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A100 dark-text">A100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A200 dark-text">A200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A400">A400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--A700">A700</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__brown">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Brown</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__brown">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Brown</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__grey">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500 dark-text">
|
||||
<div class="wsk-palettegroup--name">Grey</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__grey">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500 dark-text">
|
||||
<div class="wsk-palette-group--name">Grey</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400 dark-text">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500 dark-text">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--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--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400 dark-text">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500 dark-text">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--1000">1000</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--1000-inverse dark-text">1000</div>
|
||||
</div>
|
||||
|
||||
<div class="wsk-palettegroup wsk-palettegroup__blueGrey">
|
||||
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
|
||||
<div class="wsk-palettegroup--name">Blue Grey</div>
|
||||
<div class="wsk-palette-group wsk-palette-group__blue-grey">
|
||||
<div class="wsk-palette-group--heading wsk-palette-color--500">
|
||||
<div class="wsk-palette-group--name">Blue Grey</div>
|
||||
|
||||
500
|
||||
</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--50 dark-text">50</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--100 dark-text">100</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--200 dark-text">200</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--300 dark-text">300</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--400">400</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--500">500</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--600">600</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--700">700</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--800">800</div>
|
||||
<div class="wsk-palettegroup--color wsk-palettecolor--900">900</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--50 dark-text">50</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--100 dark-text">100</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--200 dark-text">200</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--300 dark-text">300</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--400">400</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--500">500</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--600">600</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--700">700</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--800">800</div>
|
||||
<div class="wsk-palette-group--color wsk-palette-color--900">900</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@import "../typography/typography";
|
||||
|
||||
@mixin colorGroups($palette) {
|
||||
.wsk-palettecolor--50 {
|
||||
.wsk-palette-color--50 {
|
||||
background-color: #{nth($palette, 1)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettecolor--100 {
|
||||
.wsk-palette-color--100 {
|
||||
background-color: #{nth($palette, 2)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettecolor--200 {
|
||||
.wsk-palette-color--200 {
|
||||
background-color: #{nth($palette, 3)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettecolor--300 {
|
||||
.wsk-palette-color--300 {
|
||||
background-color: #{nth($palette, 4)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettecolor--400 {
|
||||
.wsk-palette-color--400 {
|
||||
background-color: #{nth($palette, 5)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettecolor--500 {
|
||||
.wsk-palette-color--500 {
|
||||
background-color: #{nth($palette, 6)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettecolor--600 {
|
||||
.wsk-palette-color--600 {
|
||||
background-color: #{nth($palette, 7)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettecolor--700 {
|
||||
.wsk-palette-color--700 {
|
||||
background-color: #{nth($palette, 8)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettecolor--800 {
|
||||
.wsk-palette-color--800 {
|
||||
background-color: #{nth($palette, 9)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettecolor--900 {
|
||||
.wsk-palette-color--900 {
|
||||
background-color: #{nth($palette, 10)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
}
|
||||
|
||||
@if length($palette) > 10 {
|
||||
.wsk-palettecolor--A100 {
|
||||
.wsk-palette-color--A100 {
|
||||
background-color: #{nth($palette, 11)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettecolor--A200 {
|
||||
.wsk-palette-color--A200 {
|
||||
background-color: #{nth($palette, 12)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettecolor--A400 {
|
||||
.wsk-palette-color--A400 {
|
||||
background-color: #{nth($palette, 13)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettecolor--A700 {
|
||||
.wsk-palette-color--A700 {
|
||||
background-color: #{nth($palette, 14)};
|
||||
|
||||
&:after {
|
||||
|
|
@ -136,13 +136,13 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.wsk-palettegroup {
|
||||
.wsk-palette-group {
|
||||
margin-top: 15px;
|
||||
width: 360px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.wsk-palettegroup--color, .wsk-palettegroup--heading {
|
||||
.wsk-palette-group--color, .wsk-palette-group--heading {
|
||||
@include typo-caption();
|
||||
|
||||
max-width: 300px;
|
||||
|
|
@ -150,86 +150,86 @@
|
|||
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;
|
||||
}
|
||||
|
||||
.wsk-palettegroup--name {
|
||||
.wsk-palette-group--name {
|
||||
padding: 0 0 60px 0;
|
||||
}
|
||||
|
||||
.wsk-palettegroup__red {
|
||||
.wsk-palette-group__red {
|
||||
@include colorGroups($palette-red);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__pink {
|
||||
.wsk-palette-group__pink {
|
||||
@include colorGroups($palette-pink);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__purple {
|
||||
.wsk-palette-group__purple {
|
||||
@include colorGroups($palette-purple);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__deepPurple {
|
||||
.wsk-palette-group__deep-purple {
|
||||
@include colorGroups($palette-deep-purple);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__indigo {
|
||||
.wsk-palette-group__indigo {
|
||||
@include colorGroups($palette-indigo);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__blue {
|
||||
.wsk-palette-group__blue {
|
||||
@include colorGroups($palette-blue);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__lightBlue {
|
||||
.wsk-palette-group__light-blue {
|
||||
@include colorGroups($palette-light-blue);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__cyan {
|
||||
.wsk-palette-group__cyan {
|
||||
@include colorGroups($palette-cyan);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__teal {
|
||||
.wsk-palette-group__teal {
|
||||
@include colorGroups($palette-teal);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__green {
|
||||
.wsk-palette-group__green {
|
||||
@include colorGroups($palette-green);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__lightGreen {
|
||||
.wsk-palette-group__light-green {
|
||||
@include colorGroups($palette-light-green);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__lime {
|
||||
.wsk-palette-group__lime {
|
||||
@include colorGroups($palette-lime);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__yellow {
|
||||
.wsk-palette-group__yellow {
|
||||
@include colorGroups($palette-yellow);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__amber {
|
||||
.wsk-palette-group__amber {
|
||||
@include colorGroups($palette-amber);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__orange {
|
||||
.wsk-palette-group__orange {
|
||||
@include colorGroups($palette-orange);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__deepOrange {
|
||||
.wsk-palette-group__deep-orange {
|
||||
@include colorGroups($palette-deep-orange);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__brown {
|
||||
.wsk-palette-group__brown {
|
||||
@include colorGroups($palette-brown);
|
||||
}
|
||||
|
||||
.wsk-palettegroup__grey {
|
||||
.wsk-palette-group__grey {
|
||||
@include colorGroups($palette-grey);
|
||||
|
||||
.wsk-palettecolor--1000 {
|
||||
.wsk-palette-color--1000 {
|
||||
background-color: #000000;
|
||||
|
||||
&:after {
|
||||
|
|
@ -238,7 +238,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettecolor--1000-inverse {
|
||||
.wsk-palette-color--1000-inverse {
|
||||
background-color: #ffffff;
|
||||
|
||||
&:after {
|
||||
|
|
@ -248,6 +248,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-palettegroup__blueGrey {
|
||||
.wsk-palette-group__blue-grey {
|
||||
@include colorGroups($palette-blue-grey);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue