google/material-design-lite
1
1
Fork 0
mirror of https://github.com/google/material-design-lite.git synced 2024-09-20 00:32:08 +03:00
Code Issues Projects Releases Wiki Activity

BEM-ifying palette including updating variables

Browse Source
This commit is contained in:
Matt Gaunt 2014-12-16 12:55:53 +00:00
parent 438f6a98f1
commit e94f2add01
19 changed files with 443 additions and 437 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
node_modules
dist
.tmp
.sass-cache

2
app/styleguide/_styleguide_demo_bp.scss
View File

@ -25,6 +25,6 @@ body > h2 {
}
.PreviewBlock {
background: nth($paletteGrey, 2);
background: nth($palette-grey, 2);
padding: 20px;
}

14
app/styleguide/button/_button.scss
View File

@ -12,10 +12,10 @@ $button-active-color: rgba($button-primary-color, 0.40);
$button-focus-color: rgba(black, 0.12);
// Colored button colors.
$button-primary-color-alt: nth($primaryPalette, 6);
$button-primary-color-alt: nth($palette-primary, 6);
$button-secondary-color-alt: #fff;
$button-hover-color-alt: nth($primaryPalette, 7);
$button-active-color-alt: nth($primaryPalette, 8);
$button-hover-color-alt: nth($palette-primary, 7);
$button-active-color-alt: nth($palette-primary, 8);
$button-focus-color-alt: $button-focus-color;
// Ripple color for colored raised buttons and FABs.
@ -26,16 +26,16 @@ $button-primary-color-disabled: rgba(#000, 0.12);
$button-secondary-color-disabled: rgba(#000, 0.26);
// FAB colors and sizes.
$button-fab-color-alt: nth($accentPalette, 5);
$button-fab-hover-color-alt: nth($accentPalette, 6);
$button-fab-active-color-alt: nth($accentPalette, 7);
$button-fab-color-alt: nth($palette-accent, 5);
$button-fab-hover-color-alt: nth($palette-accent, 6);
$button-fab-active-color-alt: nth($palette-accent, 7);
$button-fab-size: 56px;
$button-fab-size-mini: 40px;
$button-fab-font-size: 24px;
// Icon button colors and sizes.
$button-icon-size: 32px;
$button-icon-color: nth($paletteGrey, 8);
$button-icon-color: nth($palette-grey, 8);
$button-icon-focus-color: $button-focus-color;
// Focus shadow mixin.

10
app/styleguide/card/_card.scss
View File

@ -10,12 +10,12 @@ $card-height: 508px;
$card-background-color: white;
$heading-color: white;
$heading-back-color: white;
$heading-back-bgcolor: nth($primaryPalette, 8);
$action-link-color: nth($primaryPalette, 10);
$heading-back-bgcolor: nth($palette-primary, 8);
$action-link-color: nth($palette-primary, 10);
$caption-color: white;
$caption-bgcolor: nth($primaryPalette, 10);
$image-placeholder-color: nth($accentPalette, 5);
$lower-text-color: nth($primaryPalette, 10);
$caption-bgcolor: nth($palette-primary, 10);
$image-placeholder-color: nth($palette-accent, 5);
$lower-text-color: nth($palette-primary, 10);
/* Cover image */
$cover-image-height: 186px;

4
app/styleguide/checkbox/_checkbox.scss
View File

@ -5,8 +5,8 @@
$circleSize: 40px;
$checkboxSize: 16px;
$borderColor: nth($secondaryPalette, 8);
$checkboxColor: nth($primaryPalette, 6);
$borderColor: nth($palette-secondary, 8);
$checkboxColor: nth($palette-primary, 6);
.Checkbox {
border: 2px solid $borderColor;

8
app/styleguide/column-layout/demo.scss
View File

@ -3,19 +3,19 @@
@import '_column-layout';
.column-layout {
background-color: nth($paletteGrey, 2);
background-color: nth($palette-grey, 2);
}
.column-layout > * {
min-height: 300px;
background-color: nth($paletteGreen, 2);
background-color: nth($palette-green, 2);
padding: 16px;
}
.column-layout > *:nth-of-type(3n+1) {
background-color: nth($paletteRed, 2);
background-color: nth($palette-red, 2);
}
.column-layout > *:nth-of-type(3n+2) {
background-color: nth($paletteBlue, 2);
background-color: nth($palette-blue, 2);
}

10
app/styleguide/item/_item.scss
View File

@ -4,13 +4,13 @@
// Default Item Colors
$default-item-text-color: #000;
$default-item-outline-color: nth($secondaryPalette, 5);
$default-item-hover-bg-color: nth($secondaryPalette, 3);
$default-item-focus-bg-color: nth($secondaryPalette, 3);
$default-item-active-bg-color: nth($secondaryPalette, 4);
$default-item-outline-color: nth($palette-secondary, 5);
$default-item-hover-bg-color: nth($palette-secondary, 3);
$default-item-focus-bg-color: nth($palette-secondary, 3);
$default-item-active-bg-color: nth($palette-secondary, 4);
// Disabled Button Colors
$disabled-item-text-color: nth($disabledPalette, 5);
$disabled-item-text-color: nth($palette-disabled, 5);
.PaperItem {
border : none;

16
app/styleguide/layout/_layout.scss
View File

@ -4,12 +4,12 @@
@import '../animation/animation';
// Colors
$sidenav-bg-color: nth($pagePalette, 1);
$sidenav-border-color: nth($pagePalette, 4);
$text-color: nth($pagePalette, 9);
$sidenav-bg-color: nth($palette-page, 1);
$sidenav-border-color: nth($palette-page, 4);
$text-color: nth($palette-page, 9);
$panel-bg-color: nth($primaryPalette, 6);
$panel-text-color: nth($pagePalette, 3);
$panel-bg-color: nth($palette-primary, 6);
$panel-text-color: nth($palette-page, 3);
// Dimensions
$nav-narrow: 240px;
@ -62,7 +62,7 @@ $screen-size-threshold: 850px;
transition-property: transform;
@include material-animation-default();
color: nth($pagePalette, 9);
color: nth($palette-page, 9);
overflow-x: hidden;
overflow-y: auto;
@ -121,7 +121,7 @@ $screen-size-threshold: 850px;
}
a:hover {
background-color: nth($pagePalette, 4);
background-color: nth($palette-page, 4);
}
}
@ -294,7 +294,7 @@ $screen-size-threshold: 850px;
}
a:hover {
background-color: rgba(nth($paletteGrey, 8), 0.6);
background-color: rgba(nth($palette-grey, 8), 0.6);
}
}

6
app/styleguide/layout/demo.scss
View File

@ -23,16 +23,16 @@
// Styles for fixed drawer demos.
.Layout-header .ExpandableIcon {
border-color: nth($pagePalette, 3);
border-color: nth($palette-page, 3);
border-radius: 50%;
}
.Layout-header .ExpandableIcon:hover {
background-color: rgba(nth($paletteGrey, 8), 0.6);
background-color: rgba(nth($palette-grey, 8), 0.6);
}
.Layout-header .TextField {
color: nth($pagePalette, 3);
color: nth($palette-page, 3);
}
// Styles for fixed header demo.

48
app/styleguide/palette/_palette.scss
View File

@ -10,70 +10,70 @@
// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200,
// A400, A700.
$paletteRed: #ffebee #ffcdd2 #ef9a9a #e57373 #ef5350 #f44336 #e53935
$palette-red: #ffebee #ffcdd2 #ef9a9a #e57373 #ef5350 #f44336 #e53935
#d32f2f #c62828 #b71c1c #ff8a80 #ff5252 #ff1744 #d50000;
$palettePink: #fce4ec #f8bbd0 #f8bbd0 #f06292 #ec407a #e91e63 #d81b60
$palette-pink: #fce4ec #f8bbd0 #f8bbd0 #f06292 #ec407a #e91e63 #d81b60
#c2185b #ad1457 #880e4f #ff80ab #ff4081 #f50057 #c51162;
$palettePurple: #f3e5f5 #e1bee7 #ce93d8 #ba68c8 #ab47bc #9c27b0 #8e24aa
$palette-purple: #f3e5f5 #e1bee7 #ce93d8 #ba68c8 #ab47bc #9c27b0 #8e24aa
#7b1fa2 #6a1b9a #4a148c #ea80fc #e040fb #d500f9 #aa00ff;
$paletteDeepPurple: #ede7f6 #d1c4e9 #b39ddb #9575cd #7e57c2 #673ab7
$palette-deep-purple: #ede7f6 #d1c4e9 #b39ddb #9575cd #7e57c2 #673ab7
#5e35b1 #512da8 #4527a0 #311b92 #b388ff #7c4dff #651fff
#6200ea;
$paletteIndigo: #e8eaf6 #c5cae9 #9fa8da #7986cb #5c6bc0 #3f51b5 #3949ab
$palette-indigo: #e8eaf6 #c5cae9 #9fa8da #7986cb #5c6bc0 #3f51b5 #3949ab
#303f9f #283593 #1a237e #8c9eff #536dfe #3d5afe #304ffe;
$paletteBlue: #e3f2fd #bbdefb #90caf9 #64b5f6 #42a5f5 #2196f3 #1e88e5
$palette-blue: #e3f2fd #bbdefb #90caf9 #64b5f6 #42a5f5 #2196f3 #1e88e5
#1976d2 #1565c0 #0d47a1 #82b1ff #448aff #2979ff #2962ff;
$paletteLightBlue: #e1f5fe #b3e5fc #81d4fa #4fc3f7 #29b6f6 #03a9f4 #039be5
$palette-light-blue: #e1f5fe #b3e5fc #81d4fa #4fc3f7 #29b6f6 #03a9f4 #039be5
#0288d1 #0277bd #01579b #80d8ff #40c4ff #00b0ff #0091ea;
$paletteCyan: #e0f7fa #b2ebf2 #80deea #4dd0e1 #26c6da #00bcd4 #00acc1
$palette-cyan: #e0f7fa #b2ebf2 #80deea #4dd0e1 #26c6da #00bcd4 #00acc1
#0097a7 #00838f #006064 #84ffff #18ffff #00e5ff #00b8d4;
$paletteTeal: #e0f2f1 #b2dfdb #80cbc4 #4db6ac #26a69a #009688 #00897b
$palette-teal: #e0f2f1 #b2dfdb #80cbc4 #4db6ac #26a69a #009688 #00897b
#00796b #00695c #004d40 #a7ffeb #64ffda #1de9b6 #00bfa5;
$paletteGreen: #e8f5e9 #c8e6c9 #a5d6a7 #81c784 #66bb6a #4caf50 #43a047
$palette-green: #e8f5e9 #c8e6c9 #a5d6a7 #81c784 #66bb6a #4caf50 #43a047
#388e3c #2e7d32 #1b5e20 #b9f6ca #69f0ae #00e676 #00c853;
$paletteLightGreen: #f1f8e9 #dcedc8 #c5e1a5 #aed581 #9ccc65 #8bc34a #7cb342
$palette-light-green: #f1f8e9 #dcedc8 #c5e1a5 #aed581 #9ccc65 #8bc34a #7cb342
#689f38 #558b2f #33691e #ccff90 #b2ff59 #76ff03 #64dd17;
$paletteLime: #f9fbe7 #f0f4c3 #e6ee9c #dce775 #d4e157 #cddc39 #c0ca33
$palette-lime: #f9fbe7 #f0f4c3 #e6ee9c #dce775 #d4e157 #cddc39 #c0ca33
#afb42b #9e9d24 #827717 #f4ff81 #eeff41 #c6ff00 #aeea00;
$paletteYellow: #fffde7 #fff9c4 #fff59d #fff176 #ffee58 #ffeb3b #fdd835
$palette-yellow: #fffde7 #fff9c4 #fff59d #fff176 #ffee58 #ffeb3b #fdd835
#fbc02d #f9a825 #f57f17 #ffff8d #ffff00 #ffea00 #ffd600;
$paletteAmber: #fff8e1 #ffecb3 #ffe082 #ffd54f #ffca28 #ffc107 #ffb300
$palette-amber: #fff8e1 #ffecb3 #ffe082 #ffd54f #ffca28 #ffc107 #ffb300
#ffa000 #ff8f00 #ff6f00 #ffe57f #ffd740 #ffc400 #ffab00;
$paletteOrange: #fff3e0 #ffe0b2 #ffcc80 #ffb74d #ffa726 #ff9800 #fb8c00
$palette-orange: #fff3e0 #ffe0b2 #ffcc80 #ffb74d #ffa726 #ff9800 #fb8c00
#f57c00 #ef6c00 #e65100 #ffd180 #ffab40 #ff9100 #ff6d00;
$paletteDeepOrange: #fbe9e7 #ffccbc #ffab91 #ff8a65 #ff7043 #ff5722 #f4511e
$palette-deep-orange: #fbe9e7 #ffccbc #ffab91 #ff8a65 #ff7043 #ff5722 #f4511e
#e64a19 #d84315 #bf360c #ff9e80 #ff6e40 #ff3d00 #dd2c00;
// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
$paletteBrown: #efebe9 #d7ccc8 #bcaaa4 #a1887f #8d6e63
$palette-brown: #efebe9 #d7ccc8 #bcaaa4 #a1887f #8d6e63
#795548 #6d4c41 #5d4037 #4e342e #3e2723;
$paletteGrey: #fafafa #f5f5f5 #eeeeee #e0e0e0 #bdbdbd
$palette-grey: #fafafa #f5f5f5 #eeeeee #e0e0e0 #bdbdbd
#9e9e9e #757575 #616161 #424242 #212121;
$paletteBlueGrey: #eceff1 #cfd8dc #b0bec5 #90a4ae #78909c
$palette-blue-grey: #eceff1 #cfd8dc #b0bec5 #90a4ae #78909c
#607d8b #546e7a #455a64 #37474f #263238;
/* ========== Used Palettes ========== */
$primaryPalette: $paletteBlue;
$accentPalette: $palettePink;
$secondaryPalette: $paletteGrey;
$disabledPalette: $paletteGrey;
$pagePalette: $paletteGrey;
$palette-primary: $palette-blue !default;
$palette-accent: $palette-pink !default;
$palette-secondary: $palette-grey !default;
$palette-disabled: $palette-grey !default;
$palette-page: $palette-grey !default;

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

@ -16,412 +16,412 @@
</head>
<body>
<div class="PreviewBlock">
<div class="PaletteGroup PaletteGroup__red">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Red</div>
<div class="wsk-palettegroup wsk-palettegroup__red">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Red</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200">A200</div>
<div class="PaletteGroup--color PaletteColor--A400">A400</div>
<div class="PaletteGroup--color PaletteColor--A700">A700</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>
<div class="PaletteGroup PaletteGroup__pink">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Pink</div>
<div class="wsk-palettegroup wsk-palettegroup__pink">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Pink</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200">A200</div>
<div class="PaletteGroup--color PaletteColor--A400">A400</div>
<div class="PaletteGroup--color PaletteColor--A700">A700</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>
<div class="PaletteGroup PaletteGroup__purple">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Purple</div>
<div class="wsk-palettegroup wsk-palettegroup__purple">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Purple</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300">300</div>
<div class="PaletteGroup--color PaletteColor--400">400</div>
<div class="PaletteGroup--color PaletteColor--500">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200">A200</div>
<div class="PaletteGroup--color PaletteColor--A400">A400</div>
<div class="PaletteGroup--color PaletteColor--A700">A700</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>
<div class="PaletteGroup PaletteGroup__deepPurple">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Deep Purple</div>
<div class="wsk-palettegroup wsk-palettegroup__deepPurple">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Deep Purple</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300">300</div>
<div class="PaletteGroup--color PaletteColor--400">400</div>
<div class="PaletteGroup--color PaletteColor--500">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200">A200</div>
<div class="PaletteGroup--color PaletteColor--A400">A400</div>
<div class="PaletteGroup--color PaletteColor--A700">A700</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>
<div class="PaletteGroup PaletteGroup__indigo">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Indigo</div>
<div class="wsk-palettegroup wsk-palettegroup__indigo">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Indigo</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300">300</div>
<div class="PaletteGroup--color PaletteColor--400">400</div>
<div class="PaletteGroup--color PaletteColor--500">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200">A200</div>
<div class="PaletteGroup--color PaletteColor--A400">A400</div>
<div class="PaletteGroup--color PaletteColor--A700">A700</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>
<div class="PaletteGroup PaletteGroup__blue">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Blue</div>
<div class="wsk-palettegroup wsk-palettegroup__blue">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Blue</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200">A200</div>
<div class="PaletteGroup--color PaletteColor--A400">A400</div>
<div class="PaletteGroup--color PaletteColor--A700">A700</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>
<div class="PaletteGroup PaletteGroup__lightBlue">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Light Blue</div>
<div class="wsk-palettegroup wsk-palettegroup__lightBlue">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Light Blue</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200 dark-text">A200</div>
<div class="PaletteGroup--color PaletteColor--A400 dark-text">A400</div>
<div class="PaletteGroup--color PaletteColor--A700">A700</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>
<div class="PaletteGroup PaletteGroup__cyan">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Cyan</div>
<div class="wsk-palettegroup wsk-palettegroup__cyan">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Cyan</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200 dark-text">A200</div>
<div class="PaletteGroup--color PaletteColor--A400 dark-text">A400</div>
<div class="PaletteGroup--color PaletteColor--A700 dark-text">A700</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>
<div class="PaletteGroup PaletteGroup__teal">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Teal</div>
<div class="wsk-palettegroup wsk-palettegroup__teal">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Teal</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200 dark-text">A200</div>
<div class="PaletteGroup--color PaletteColor--A400 dark-text">A400</div>
<div class="PaletteGroup--color PaletteColor--A700 dark-text">A700</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>
<div class="PaletteGroup PaletteGroup__green">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Green</div>
<div class="wsk-palettegroup wsk-palettegroup__green">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Green</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200 dark-text">A200</div>
<div class="PaletteGroup--color PaletteColor--A400 dark-text">A400</div>
<div class="PaletteGroup--color PaletteColor--A700 dark-text">A700</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>
<div class="PaletteGroup PaletteGroup__lightGreen">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Light Green</div>
<div class="wsk-palettegroup wsk-palettegroup__lightGreen">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Light Green</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500 dark-text">500</div>
<div class="PaletteGroup--color PaletteColor--600 dark-text">600</div>
<div class="PaletteGroup--color PaletteColor--700 dark-text">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200 dark-text">A200</div>
<div class="PaletteGroup--color PaletteColor--A400 dark-text">A400</div>
<div class="PaletteGroup--color PaletteColor--A700 dark-text">A700</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>
<div class="PaletteGroup PaletteGroup__lime">
<div class="PaletteGroup--heading PaletteColor--500 dark-text">
<div class="PaletteGroup--name">Lime</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>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500 dark-text">500</div>
<div class="PaletteGroup--color PaletteColor--600 dark-text">600</div>
<div class="PaletteGroup--color PaletteColor--700 dark-text">700</div>
<div class="PaletteGroup--color PaletteColor--800 dark-text">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200 dark-text">A200</div>
<div class="PaletteGroup--color PaletteColor--A400 dark-text">A400</div>
<div class="PaletteGroup--color PaletteColor--A700 dark-text">A700</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>
<div class="PaletteGroup PaletteGroup__yellow">
<div class="PaletteGroup--heading PaletteColor--500 dark-text">
<div class="PaletteGroup--name">Yellow</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>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500 dark-text">500</div>
<div class="PaletteGroup--color PaletteColor--600 dark-text">600</div>
<div class="PaletteGroup--color PaletteColor--700 dark-text">700</div>
<div class="PaletteGroup--color PaletteColor--800 dark-text">800</div>
<div class="PaletteGroup--color PaletteColor--900 dark-text">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200 dark-text">A200</div>
<div class="PaletteGroup--color PaletteColor--A400 dark-text">A400</div>
<div class="PaletteGroup--color PaletteColor--A700 dark-text">A700</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>
<div class="PaletteGroup PaletteGroup__amber">
<div class="PaletteGroup--heading PaletteColor--500 dark-text">
<div class="PaletteGroup--name">Amber</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>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500 dark-text">500</div>
<div class="PaletteGroup--color PaletteColor--600 dark-text">600</div>
<div class="PaletteGroup--color PaletteColor--700 dark-text">700</div>
<div class="PaletteGroup--color PaletteColor--800 dark-text">800</div>
<div class="PaletteGroup--color PaletteColor--900 dark-text">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200 dark-text">A200</div>
<div class="PaletteGroup--color PaletteColor--A400 dark-text">A400</div>
<div class="PaletteGroup--color PaletteColor--A700 dark-text">A700</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>
<div class="PaletteGroup PaletteGroup__orange">
<div class="PaletteGroup--heading PaletteColor--500 dark-text">
<div class="PaletteGroup--name">Orange</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>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500 dark-text">500</div>
<div class="PaletteGroup--color PaletteColor--600 dark-text">600</div>
<div class="PaletteGroup--color PaletteColor--700 dark-text">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200 dark-text">A200</div>
<div class="PaletteGroup--color PaletteColor--A400 dark-text">A400</div>
<div class="PaletteGroup--color PaletteColor--A700 dark-text">A700</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>
<div class="PaletteGroup PaletteGroup__deepOrange">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Deep Orange</div>
<div class="wsk-palettegroup wsk-palettegroup__deepOrange">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Deep Orange</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--A100 dark-text">A100</div>
<div class="PaletteGroup--color PaletteColor--A200 dark-text">A200</div>
<div class="PaletteGroup--color PaletteColor--A400">A400</div>
<div class="PaletteGroup--color PaletteColor--A700">A700</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>
<div class="PaletteGroup PaletteGroup__brown">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Brown</div>
<div class="wsk-palettegroup wsk-palettegroup__brown">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Brown</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300">300</div>
<div class="PaletteGroup--color PaletteColor--400">400</div>
<div class="PaletteGroup--color PaletteColor--500">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</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>
<div class="PaletteGroup PaletteGroup__grey">
<div class="PaletteGroup--heading PaletteColor--500 dark-text">
<div class="PaletteGroup--name">Grey</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>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400 dark-text">400</div>
<div class="PaletteGroup--color PaletteColor--500 dark-text">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</div>
<div class="PaletteGroup--color PaletteColor--1000">1000</div>
<div class="PaletteGroup--color PaletteColor--1000-inverse dark-text">1000</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>
<div class="PaletteGroup PaletteGroup__blueGrey">
<div class="PaletteGroup--heading PaletteColor--500">
<div class="PaletteGroup--name">Blue Grey</div>
<div class="wsk-palettegroup wsk-palettegroup__blueGrey">
<div class="wsk-palettegroup--heading wsk-palettecolor--500">
<div class="wsk-palettegroup--name">Blue Grey</div>
500
</div>
<div class="PaletteGroup--color PaletteColor--50 dark-text">50</div>
<div class="PaletteGroup--color PaletteColor--100 dark-text">100</div>
<div class="PaletteGroup--color PaletteColor--200 dark-text">200</div>
<div class="PaletteGroup--color PaletteColor--300 dark-text">300</div>
<div class="PaletteGroup--color PaletteColor--400">400</div>
<div class="PaletteGroup--color PaletteColor--500">500</div>
<div class="PaletteGroup--color PaletteColor--600">600</div>
<div class="PaletteGroup--color PaletteColor--700">700</div>
<div class="PaletteGroup--color PaletteColor--800">800</div>
<div class="PaletteGroup--color PaletteColor--900">900</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>
</div>
</body>

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

@ -3,7 +3,7 @@
@import "../typography/typography";
@mixin colorGroups($palette) {
.PaletteColor--50 {
.wsk-palettecolor--50 {
background-color: #{nth($palette, 1)};
&:after {
@ -12,7 +12,7 @@
}
}
.PaletteColor--100 {
.wsk-palettecolor--100 {
background-color: #{nth($palette, 2)};
&:after {
@ -21,7 +21,7 @@
}
}
.PaletteColor--200 {
.wsk-palettecolor--200 {
background-color: #{nth($palette, 3)};
&:after {
@ -30,7 +30,7 @@
}
}
.PaletteColor--300 {
.wsk-palettecolor--300 {
background-color: #{nth($palette, 4)};
&:after {
@ -39,7 +39,7 @@
}
}
.PaletteColor--400 {
.wsk-palettecolor--400 {
background-color: #{nth($palette, 5)};
&:after {
@ -48,7 +48,7 @@
}
}
.PaletteColor--500 {
.wsk-palettecolor--500 {
background-color: #{nth($palette, 6)};
&:after {
@ -57,7 +57,7 @@
}
}
.PaletteColor--600 {
.wsk-palettecolor--600 {
background-color: #{nth($palette, 7)};
&:after {
@ -66,7 +66,7 @@
}
}
.PaletteColor--700 {
.wsk-palettecolor--700 {
background-color: #{nth($palette, 8)};
&:after {
@ -75,7 +75,7 @@
}
}
.PaletteColor--800 {
.wsk-palettecolor--800 {
background-color: #{nth($palette, 9)};
&:after {
@ -84,7 +84,7 @@
}
}
.PaletteColor--900 {
.wsk-palettecolor--900 {
background-color: #{nth($palette, 10)};
&:after {
@ -94,7 +94,7 @@
}
@if length($palette) > 10 {
.PaletteColor--A100 {
.wsk-palettecolor--A100 {
background-color: #{nth($palette, 11)};
&:after {
@ -103,7 +103,7 @@
}
}
.PaletteColor--A200 {
.wsk-palettecolor--A200 {
background-color: #{nth($palette, 12)};
&:after {
@ -112,7 +112,7 @@
}
}
.PaletteColor--A400 {
.wsk-palettecolor--A400 {
background-color: #{nth($palette, 13)};
&:after {
@ -121,7 +121,7 @@
}
}
.PaletteColor--A700 {
.wsk-palettecolor--A700 {
background-color: #{nth($palette, 14)};
&:after {
@ -136,13 +136,13 @@
display: inline-block;
}
.PaletteGroup {
.wsk-palettegroup {
margin-top: 15px;
width: 360px;
float: left;
}
.PaletteGroup--color, .PaletteGroup--heading {
.wsk-palettegroup--color, .wsk-palettegroup--heading {
@include typo-caption();
max-width: 300px;
@ -150,86 +150,86 @@
color: white;
}
.PaletteGroup .dark-text, .PaletteGroup-heading.dark-text .PaletteGroup-name {
.wsk-palettegroup .dark-text, .wsk-palettegroup-heading.dark-text .wsk-palettegroup-name {
color: #000;
}
.PaletteGroup--name {
.wsk-palettegroup--name {
padding: 0 0 60px 0;
}
.PaletteGroup__red {
@include colorGroups($paletteRed);
.wsk-palettegroup__red {
@include colorGroups($palette-red);
}
.PaletteGroup__pink {
@include colorGroups($palettePink);
.wsk-palettegroup__pink {
@include colorGroups($palette-pink);
}
.PaletteGroup__purple {
@include colorGroups($palettePurple);
.wsk-palettegroup__purple {
@include colorGroups($palette-purple);
}
.PaletteGroup__deepPurple {
@include colorGroups($paletteDeepPurple);
.wsk-palettegroup__deepPurple {
@include colorGroups($palette-deep-purple);
}
.PaletteGroup__indigo {
@include colorGroups($paletteIndigo);
.wsk-palettegroup__indigo {
@include colorGroups($palette-indigo);
}
.PaletteGroup__blue {
@include colorGroups($paletteBlue);
.wsk-palettegroup__blue {
@include colorGroups($palette-blue);
}
.PaletteGroup__lightBlue {
@include colorGroups($paletteLightBlue);
.wsk-palettegroup__lightBlue {
@include colorGroups($palette-light-blue);
}
.PaletteGroup__cyan {
@include colorGroups($paletteCyan);
.wsk-palettegroup__cyan {
@include colorGroups($palette-cyan);
}
.PaletteGroup__teal {
@include colorGroups($paletteTeal);
.wsk-palettegroup__teal {
@include colorGroups($palette-teal);
}
.PaletteGroup__green {
@include colorGroups($paletteGreen);
.wsk-palettegroup__green {
@include colorGroups($palette-green);
}
.PaletteGroup__lightGreen {
@include colorGroups($paletteLightGreen);
.wsk-palettegroup__lightGreen {
@include colorGroups($palette-light-green);
}
.PaletteGroup__lime {
@include colorGroups($paletteLime);
.wsk-palettegroup__lime {
@include colorGroups($palette-lime);
}
.PaletteGroup__yellow {
@include colorGroups($paletteYellow);
.wsk-palettegroup__yellow {
@include colorGroups($palette-yellow);
}
.PaletteGroup__amber {
@include colorGroups($paletteAmber);
.wsk-palettegroup__amber {
@include colorGroups($palette-amber);
}
.PaletteGroup__orange {
@include colorGroups($paletteOrange);
.wsk-palettegroup__orange {
@include colorGroups($palette-orange);
}
.PaletteGroup__deepOrange {
@include colorGroups($paletteDeepOrange);
.wsk-palettegroup__deepOrange {
@include colorGroups($palette-deep-orange);
}
.PaletteGroup__brown {
@include colorGroups($paletteBrown);
.wsk-palettegroup__brown {
@include colorGroups($palette-brown);
}
.PaletteGroup__grey {
@include colorGroups($paletteGrey);
.wsk-palettegroup__grey {
@include colorGroups($palette-grey);
.PaletteColor--1000 {
.wsk-palettecolor--1000 {
background-color: #000000;
&:after {
@ -238,7 +238,7 @@
}
}
.PaletteColor--1000-inverse {
.wsk-palettecolor--1000-inverse {
background-color: #ffffff;
&:after {
@ -248,6 +248,6 @@
}
}
.PaletteGroup__blueGrey {
@include colorGroups($paletteBlueGrey);
.wsk-palettegroup__blueGrey {
@include colorGroups($palette-blue-grey);
}

2
app/styleguide/radio/_radio.scss
View File

@ -2,7 +2,7 @@
@import "../animation/animation";
@import "../ripple/ripple";
$radio-color: nth($primaryPalette, 6);
$radio-color: nth($palette-primary, 6);
$radio-off-color: rgba(0, 0, 0, 0.54);
$radio-disabled-color: rgba(0, 0, 0, 0.26);

2
app/styleguide/ripple/_ripple.scss
View File

@ -1,7 +1,7 @@
@import "../palette/palette";
@import "../animation/animation";
$ripple-bg-color: nth($paletteGrey, 10);
$ripple-bg-color: nth($palette-grey, 10);
.wsk-ripple {
background : $ripple-bg-color;

5
app/styleguide/shadow/_shadow.scss
View File

@ -13,18 +13,23 @@
@mixin shadow-z5() {
box-shadow: 0 19px 19px 0 rgba(0,0,0,0.30), 0 15px 6px 0 rgba(0,0,0,0.22);
}
.Shadow--z1 {
@include shadow-z1();
}
.Shadow--z2 {
@include shadow-z2();
}
.Shadow--z3 {
@include shadow-z3();
}
.Shadow--z4 {
@include shadow-z4();
}
.Shadow--z5 {
@include shadow-z5();
}

2
app/styleguide/slider/_slider.scss
View File

@ -3,7 +3,7 @@
// Default Range Colors.
$range-bg-color: rgba(0, 0, 0, 0.26);
$range-color: nth($primaryPalette, 6);
$range-color: nth($palette-primary, 6);
// Some CSS magic to target only IE.
_:-ms-input-placeholder, :root .wsk-slider.wsk-slider {

2
app/styleguide/styleguide.scss
View File

@ -30,7 +30,7 @@ body {
.styleguide-masthead {
height: 256px;
background: nth($primaryPalette, 10);
background: nth($palette-primary, 10);
padding: 115px 16px 0;
}

4
app/styleguide/textfield/_textfield.scss
View File

@ -10,9 +10,9 @@ $input-text-ripple-size: 32px;
$input-text-background-color: transparent;
$input-text-label-color: rgba(0, 0, 0, 0.26);
$input-text-bottom-border-color: rgba(0, 0, 0, 0.12);
$input-text-highlight-color: nth($primaryPalette, 6);
$input-text-highlight-color: nth($palette-primary, 6);
$input-text-disabled-color: $input-text-bottom-border-color;
$input-text-error-color: nth($paletteRed, 7);
$input-text-error-color: nth($palette-red, 7);
$input-text-floating-label-fontsize: 12px;
$input-text-expandable-icon-dim: 24px;

2
app/styleguide/tooltip/_tooltip.scss
View File

@ -5,7 +5,7 @@
.tooltip {
-webkit-transform: scale(0);
-webkit-transform-origin: top center;
background: nth($accentPalette, 7);
background: nth($palette-accent, 7);
border-radius: 5px;
color: #fff;
display: none;