From e94f2add015b1011711b294de51c1521cdcd5860 Mon Sep 17 00:00:00 2001 From: Matt Gaunt Date: Tue, 16 Dec 2014 12:55:53 +0000 Subject: [PATCH 1/2] BEM-ifying palette including updating variables --- .gitignore | 1 + app/styleguide/_styleguide_demo_bp.scss | 2 +- app/styleguide/button/_button.scss | 14 +- app/styleguide/card/_card.scss | 10 +- app/styleguide/checkbox/_checkbox.scss | 4 +- app/styleguide/column-layout/demo.scss | 8 +- app/styleguide/item/_item.scss | 10 +- app/styleguide/layout/_layout.scss | 16 +- app/styleguide/layout/demo.scss | 6 +- app/styleguide/palette/_palette.scss | 48 +- app/styleguide/palette/demo.html | 626 +++++++++++------------ app/styleguide/palette/demo.scss | 116 ++--- app/styleguide/radio/_radio.scss | 2 +- app/styleguide/ripple/_ripple.scss | 2 +- app/styleguide/shadow/_shadow.scss | 5 + app/styleguide/slider/_slider.scss | 2 +- app/styleguide/styleguide.scss | 2 +- app/styleguide/textfield/_textfield.scss | 4 +- app/styleguide/tooltip/_tooltip.scss | 2 +- 19 files changed, 443 insertions(+), 437 deletions(-) diff --git a/.gitignore b/.gitignore index 9e051592..339c946f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules dist .tmp +.sass-cache \ No newline at end of file diff --git a/app/styleguide/_styleguide_demo_bp.scss b/app/styleguide/_styleguide_demo_bp.scss index 274371c6..96fe9531 100644 --- a/app/styleguide/_styleguide_demo_bp.scss +++ b/app/styleguide/_styleguide_demo_bp.scss @@ -25,6 +25,6 @@ body > h2 { } .PreviewBlock { - background: nth($paletteGrey, 2); + background: nth($palette-grey, 2); padding: 20px; } diff --git a/app/styleguide/button/_button.scss b/app/styleguide/button/_button.scss index fcd13e98..6113dbf0 100644 --- a/app/styleguide/button/_button.scss +++ b/app/styleguide/button/_button.scss @@ -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. diff --git a/app/styleguide/card/_card.scss b/app/styleguide/card/_card.scss index 3ba17440..fc1f7f5b 100644 --- a/app/styleguide/card/_card.scss +++ b/app/styleguide/card/_card.scss @@ -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; diff --git a/app/styleguide/checkbox/_checkbox.scss b/app/styleguide/checkbox/_checkbox.scss index 120d7873..f72143ed 100644 --- a/app/styleguide/checkbox/_checkbox.scss +++ b/app/styleguide/checkbox/_checkbox.scss @@ -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; diff --git a/app/styleguide/column-layout/demo.scss b/app/styleguide/column-layout/demo.scss index 7fe7c39e..878d58aa 100644 --- a/app/styleguide/column-layout/demo.scss +++ b/app/styleguide/column-layout/demo.scss @@ -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); } diff --git a/app/styleguide/item/_item.scss b/app/styleguide/item/_item.scss index 2b2f8efc..f620ff74 100644 --- a/app/styleguide/item/_item.scss +++ b/app/styleguide/item/_item.scss @@ -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; diff --git a/app/styleguide/layout/_layout.scss b/app/styleguide/layout/_layout.scss index facb5938..f0c2895e 100644 --- a/app/styleguide/layout/_layout.scss +++ b/app/styleguide/layout/_layout.scss @@ -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); } } diff --git a/app/styleguide/layout/demo.scss b/app/styleguide/layout/demo.scss index 37ada433..afcc1540 100644 --- a/app/styleguide/layout/demo.scss +++ b/app/styleguide/layout/demo.scss @@ -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. diff --git a/app/styleguide/palette/_palette.scss b/app/styleguide/palette/_palette.scss index 844fecb2..77413ca9 100644 --- a/app/styleguide/palette/_palette.scss +++ b/app/styleguide/palette/_palette.scss @@ -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; diff --git a/app/styleguide/palette/demo.html b/app/styleguide/palette/demo.html index 5bf9ed4e..0e0d9cd6 100644 --- a/app/styleguide/palette/demo.html +++ b/app/styleguide/palette/demo.html @@ -16,412 +16,412 @@
-
-
-
Red
+
+
+
Red
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Pink
+
+
+
Pink
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Purple
+
+
+
Purple
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Deep Purple
+
+
+
Deep Purple
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Indigo
+
+
+
Indigo
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Blue
+
+
+
Blue
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Light Blue
+
+
+
Light Blue
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Cyan
+
+
+
Cyan
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Teal
+
+
+
Teal
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Green
+
+
+
Green
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Light Green
+
+
+
Light Green
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Lime
+
+
+
Lime
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Yellow
+
+
+
Yellow
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Amber
+
+
+
Amber
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Orange
+
+
+
Orange
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Deep Orange
+
+
+
Deep Orange
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Brown
+
+
+
Brown
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
-
-
-
Grey
+
+
+
Grey
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
1000
-
1000
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+
1000
-
-
-
Blue Grey
+
+
+
Blue Grey
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
diff --git a/app/styleguide/palette/demo.scss b/app/styleguide/palette/demo.scss index d9d50fe7..4c4b29a7 100644 --- a/app/styleguide/palette/demo.scss +++ b/app/styleguide/palette/demo.scss @@ -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); } diff --git a/app/styleguide/radio/_radio.scss b/app/styleguide/radio/_radio.scss index d0942f65..f6dfb11a 100644 --- a/app/styleguide/radio/_radio.scss +++ b/app/styleguide/radio/_radio.scss @@ -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); diff --git a/app/styleguide/ripple/_ripple.scss b/app/styleguide/ripple/_ripple.scss index 8a512cb1..a0442dfd 100644 --- a/app/styleguide/ripple/_ripple.scss +++ b/app/styleguide/ripple/_ripple.scss @@ -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; diff --git a/app/styleguide/shadow/_shadow.scss b/app/styleguide/shadow/_shadow.scss index d7fa2c81..9bb88906 100644 --- a/app/styleguide/shadow/_shadow.scss +++ b/app/styleguide/shadow/_shadow.scss @@ -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(); } diff --git a/app/styleguide/slider/_slider.scss b/app/styleguide/slider/_slider.scss index 5aebb32f..5503daa0 100644 --- a/app/styleguide/slider/_slider.scss +++ b/app/styleguide/slider/_slider.scss @@ -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 { diff --git a/app/styleguide/styleguide.scss b/app/styleguide/styleguide.scss index 957f8299..44c17c16 100644 --- a/app/styleguide/styleguide.scss +++ b/app/styleguide/styleguide.scss @@ -30,7 +30,7 @@ body { .styleguide-masthead { height: 256px; - background: nth($primaryPalette, 10); + background: nth($palette-primary, 10); padding: 115px 16px 0; } diff --git a/app/styleguide/textfield/_textfield.scss b/app/styleguide/textfield/_textfield.scss index 66906570..eb450db9 100644 --- a/app/styleguide/textfield/_textfield.scss +++ b/app/styleguide/textfield/_textfield.scss @@ -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; diff --git a/app/styleguide/tooltip/_tooltip.scss b/app/styleguide/tooltip/_tooltip.scss index aa26bf74..c4994564 100644 --- a/app/styleguide/tooltip/_tooltip.scss +++ b/app/styleguide/tooltip/_tooltip.scss @@ -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; From 53589ad4a8a79941d1f43efc9a3ee4fbfbe55313 Mon Sep 17 00:00:00 2001 From: Matt Gaunt Date: Tue, 16 Dec 2014 13:14:58 +0000 Subject: [PATCH 2/2] Rename all the things for the lolz / sergio asked for it in the PR --- app/styleguide/palette/demo.html | 626 +++++++++++++++---------------- app/styleguide/palette/demo.scss | 78 ++-- 2 files changed, 352 insertions(+), 352 deletions(-) diff --git a/app/styleguide/palette/demo.html b/app/styleguide/palette/demo.html index 0e0d9cd6..f82bf9b3 100644 --- a/app/styleguide/palette/demo.html +++ b/app/styleguide/palette/demo.html @@ -16,412 +16,412 @@
-
-
-
Red
+
+
+
Red
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Pink
+
+
+
Pink
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Purple
+
+
+
Purple
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Deep Purple
+
+
+
Deep Purple
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Indigo
+
+
+
Indigo
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Blue
+
+
+
Blue
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Light Blue
+
+
+
Light Blue
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Cyan
+
+
+
Cyan
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Teal
+
+
+
Teal
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Green
+
+
+
Green
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Light Green
+
+
+
Light Green
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Lime
+
+
+
Lime
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Yellow
+
+
+
Yellow
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Amber
+
+
+
Amber
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Orange
+
+
+
Orange
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Deep Orange
+
+
+
Deep Orange
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
A100
-
A200
-
A400
-
A700
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
A100
+
A200
+
A400
+
A700
-
-
-
Brown
+
+
+
Brown
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
-
-
-
Grey
+
+
+
Grey
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
1000
-
1000
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
1000
+
1000
-
-
-
Blue Grey
+
+
+
Blue Grey
500
-
50
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
diff --git a/app/styleguide/palette/demo.scss b/app/styleguide/palette/demo.scss index 4c4b29a7..a16926ed 100644 --- a/app/styleguide/palette/demo.scss +++ b/app/styleguide/palette/demo.scss @@ -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); }