From 950f470b8ea05ac447c4f89161a64d583001fc87 Mon Sep 17 00:00:00 2001
From: Adrien Revel <adrien@abrege.net>
Date: Tue, 14 Apr 2015 11:52:43 +0200
Subject: [PATCH] Changing #palette for .color__palette

---
 core/modules/color/css/color.admin.css             | 38 +++++++++++-----------
 .../color/templates/color-scheme-form.html.twig    |  2 +-
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/core/modules/color/css/color.admin.css b/core/modules/color/css/color.admin.css
index 5da8c35..4a5ae7a 100644
--- a/core/modules/color/css/color.admin.css
+++ b/core/modules/color/css/color.admin.css
@@ -27,47 +27,47 @@
 [dir="rtl"] .color-form .form-text {
   float: right;
 }
-#palette .hook {
+.color__palette .hook {
   float: left; /* LTR */
   width: 16px;
   height: 16px;
 }
-[dir="rtl"] #palette .hook {
+[dir="rtl"] .color__palette .hook {
   float: right;
 }
-#palette .down,
-#palette .up,
-#palette .both {
+.color__palette .down,
+.color__palette .up,
+.color__palette .both {
   background: url(../images/hook.png) no-repeat 100% 0; /* LTR */
 }
-[dir="rtl"] #palette .down,
-[dir="rtl"] #palette .up,
-[dir="rtl"] #palette .both {
+[dir="rtl"] .color__palette .down,
+[dir="rtl"] .color__palette .up,
+[dir="rtl"] .color__palette .both {
   background: url(../images/hook-rtl.png) no-repeat 0 0;
 }
-#palette .up {
+.color__palette .up {
   background-position: 100% -27px; /* LTR */
 }
-[dir="rtl"] #palette .up {
+[dir="rtl"] .color__palette .up {
   background-position: 0 -27px;
 }
-#palette .both {
+.color__palette .both {
   background-position: 100% -54px; /* LTR */
 }
-[dir="rtl"] #palette .both {
+[dir="rtl"] .color__palette .both {
   background-position: 0 -54px;
 }
-#palette .lock {
+.color__palette .lock {
   float: left; /* LTR */
   width: 20px;
   height: 19px;
   background: url(../images/lock.png) no-repeat 50% 0;
   cursor: pointer;
 }
-[dir="rtl"] #palette .lock {
+[dir="rtl"] .color__palette .lock {
   float: right;
 }
-#palette .unlocked {
+.color__palette .unlocked {
   background-position: 50% -22px;
 }
 
@@ -103,17 +103,17 @@
   [dir="rtl"] .color-form .form-select {
     float: right;
   }
-  #palette .hook {
+  .color__palette .hook {
     float: left; /* LTR */
     margin-top: 3px;
   }
-  [dir="rtl"] #palette .hook {
+  [dir="rtl"] .color__palette .hook {
     float: right;
   }
-  #palette .lock {
+  .color__palette .lock {
     float: left; /* LTR */
   }
-  [dir="rtl"] #palette .lock {
+  [dir="rtl"] .color__palette .lock {
     float: right;
   }
 }
diff --git a/core/modules/color/templates/color-scheme-form.html.twig b/core/modules/color/templates/color-scheme-form.html.twig
index 694c6f7..3d67644 100644
--- a/core/modules/color/templates/color-scheme-form.html.twig
+++ b/core/modules/color/templates/color-scheme-form.html.twig
@@ -17,7 +17,7 @@
 #}
 <div class="color-form clearfix">
   {{ form.scheme }}
-  <div id="palette" class="clearfix">
+  <div id="palette" class="color__palette clearfix">
     {{ form.palette }}
   </div>
   {{ form|without('scheme', 'palette') }}
-- 
2.2.1

From d280e0a9ba41d294645ed04ab1c0187f724d9ce8 Mon Sep 17 00:00:00 2001
From: Adrien Revel <adrien@abrege.net>
Date: Tue, 14 Apr 2015 12:12:28 +0200
Subject: [PATCH] Changing #palette for .color__palette also in Bartik theme
 and preview.js file

---
 core/modules/color/preview.js       | 10 +++++-----
 core/themes/bartik/color/preview.js | 18 +++++++++---------
 core/themes/bartik/css/colors.css   |  4 ++--
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/core/modules/color/preview.js b/core/modules/color/preview.js
index 4c99ffa..448d226 100644
--- a/core/modules/color/preview.js
+++ b/core/modules/color/preview.js
@@ -11,11 +11,11 @@
     callback: function (context, settings, form, farb, height, width) {
       var accum, delta;
       // Solid background.
-      form.find('#preview').css('backgroundColor', form.find('#palette input[name="palette[base]"]').val());
+      form.find('#preview').css('backgroundColor', form.find('.color__palette input[name="palette[base]"]').val());
 
       // Text preview
-      form.find('#text').css('color', form.find('#palette input[name="palette[text]"]').val());
-      form.find('#text a, #text h2').css('color', form.find('#palette input[name="palette[link]"]').val());
+      form.find('#text').css('color', form.find('.color__palette input[name="palette[text]"]').val());
+      form.find('#text a, #text h2').css('color', form.find('.color__palette input[name="palette[link]"]').val());
 
       function gradientLineColor(i, element) {
         for (var k in accum) {
@@ -30,8 +30,8 @@
       var color_start, color_end;
       for (var i in settings.gradients) {
         if (settings.gradients.hasOwnProperty(i)) {
-          color_start = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i].colors[0] + ']"]').val());
-          color_end = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i].colors[1] + ']"]').val());
+          color_start = farb.unpack(form.find('.color__palette input[name="palette[' + settings.gradients[i].colors[0] + ']"]').val());
+          color_end = farb.unpack(form.find('.color__palette input[name="palette[' + settings.gradients[i].colors[1] + ']"]').val());
           if (color_start && color_end) {
             delta = [];
             for (var j in color_start) {
diff --git a/core/themes/bartik/color/preview.js b/core/themes/bartik/color/preview.js
index b9fb4d1..19107e3 100644
--- a/core/themes/bartik/color/preview.js
+++ b/core/themes/bartik/color/preview.js
@@ -20,26 +20,26 @@
       }
 
       // Solid background.
-      form.find('#preview').css('backgroundColor', $('#palette input[name="palette[bg]"]').val());
+      form.find('#preview').css('backgroundColor', $('.color__palette input[name="palette[bg]"]').val());
 
       // Text preview.
-      form.find('#preview #preview-main h2, #preview .preview-content').css('color', form.find('#palette input[name="palette[text]"]').val());
-      form.find('#preview #preview-content a').css('color', form.find('#palette input[name="palette[link]"]').val());
+      form.find('#preview #preview-main h2, #preview .preview-content').css('color', form.find('.color__palette input[name="palette[text]"]').val());
+      form.find('#preview #preview-content a').css('color', form.find('.color__palette input[name="palette[link]"]').val());
 
       // Sidebar block.
-      form.find('#preview #preview-sidebar #preview-block').css('background-color', form.find('#palette input[name="palette[sidebar]"]').val());
-      form.find('#preview #preview-sidebar #preview-block').css('border-color', form.find('#palette input[name="palette[sidebarborders]"]').val());
+      form.find('#preview #preview-sidebar #preview-block').css('background-color', form.find('.color__palette input[name="palette[sidebar]"]').val());
+      form.find('#preview #preview-sidebar #preview-block').css('border-color', form.find('.color__palette input[name="palette[sidebarborders]"]').val());
 
       // Footer wrapper background.
-      form.find('#preview #preview-footer-wrapper', form).css('background-color', form.find('#palette input[name="palette[footer]"]').val());
+      form.find('#preview #preview-footer-wrapper', form).css('background-color', form.find('.color__palette input[name="palette[footer]"]').val());
 
       // CSS3 Gradients.
-      var gradient_start = form.find('#palette input[name="palette[top]"]').val();
-      var gradient_end = form.find('#palette input[name="palette[bottom]"]').val();
+      var gradient_start = form.find('.color__palette input[name="palette[top]"]').val();
+      var gradient_end = form.find('.color__palette input[name="palette[bottom]"]').val();
 
       form.find('#preview #preview-header').attr('style', "background-color: " + gradient_start + "; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(" + gradient_start + "), to(" + gradient_end + ")); background-image: -moz-linear-gradient(-90deg, " + gradient_start + ", " + gradient_end + ");");
 
-      form.find('#preview #preview-site-name').css('color', form.find('#palette input[name="palette[titleslogan]"]').val());
+      form.find('#preview #preview-site-name').css('color', form.find('.color__palette input[name="palette[titleslogan]"]').val());
     }
   };
 })(jQuery, Drupal, drupalSettings);
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index 8443b53..1b1a1e7 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -56,14 +56,14 @@ a:active,
 
 /* ---------- Color Form ----------- */
 
-[dir="rtl"] .color-form #palette {
+[dir="rtl"] .color-form .color__palette {
   margin-left: 0;
   margin-right: 20px;
 }
 [dir="rtl"] .color-form .form-item label {
   float: right;
 }
-[dir="rtl"] .color-form #palette .lock {
+[dir="rtl"] .color-form .color__palette .lock {
   right: -20px;
   left: 0;
 }
-- 
2.2.1

From 3fb433f122a10d67c86487e9d1b887153a3d6761 Mon Sep 17 00:00:00 2001
From: Adrien Revel <adrien@abrege.net>
Date: Tue, 14 Apr 2015 12:15:23 +0200
Subject: [PATCH] Changing #palette for .color__palette in color.js

---
 core/modules/color/color.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/modules/color/color.js b/core/modules/color/color.js
index f9eebf2..aa57fb8 100644
--- a/core/modules/color/color.js
+++ b/core/modules/color/color.js
@@ -198,7 +198,7 @@
       }
 
       // Initialize color fields.
-      form.find('#palette input.form-text')
+      form.find('.color__palette input.form-text')
         .each(function () {
           // Extract palette field name
           this.key = this.id.substring(13);
@@ -246,7 +246,7 @@
         })
         .on('focus', focus);
 
-      form.find('#palette label');
+      form.find('.color__palette label');
 
       // Focus first color.
       inputs[0].focus();
-- 
2.2.1

From 3daccd5dc75e20f028f3bfcfb7da50a4d06ff8df Mon Sep 17 00:00:00 2001
From: Adrien Revel <adrien@abrege.net>
Date: Tue, 14 Apr 2015 12:18:03 +0200
Subject: [PATCH] Remove div id #palette in color-scheme-form

---
 core/modules/color/templates/color-scheme-form.html.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/modules/color/templates/color-scheme-form.html.twig b/core/modules/color/templates/color-scheme-form.html.twig
index 3d67644..28fa0b7 100644
--- a/core/modules/color/templates/color-scheme-form.html.twig
+++ b/core/modules/color/templates/color-scheme-form.html.twig
@@ -17,7 +17,7 @@
 #}
 <div class="color-form clearfix">
   {{ form.scheme }}
-  <div id="palette" class="color__palette clearfix">
+  <div class="color__palette clearfix">
     {{ form.palette }}
   </div>
   {{ form|without('scheme', 'palette') }}
-- 
2.2.1

From 9958e7b1c27af058834c90f615ade249c1662df3 Mon Sep 17 00:00:00 2001
From: Adrien Revel <adrien@abrege.net>
Date: Tue, 14 Apr 2015 12:23:04 +0200
Subject: [PATCH] Changing .color-form for .color__form

---
 core/modules/color/color.js                        |  2 +-
 core/modules/color/css/color.admin.css             | 32 +++++++++++-----------
 .../color/templates/color-scheme-form.html.twig    |  2 +-
 core/themes/bartik/css/colors.css                  |  6 ++--
 4 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/core/modules/color/color.js b/core/modules/color/color.js
index aa57fb8..8babd2f 100644
--- a/core/modules/color/color.js
+++ b/core/modules/color/color.js
@@ -11,7 +11,7 @@
     attach: function (context, settings) {
       var i, j, colors;
       // This behavior attaches by ID, so is only valid once on a page.
-      var form = $(context).find('#system-theme-settings .color-form').once('color');
+      var form = $(context).find('#system-theme-settings .color__form').once('color');
       if (form.length === 0) {
         return;
       }
diff --git a/core/modules/color/css/color.admin.css b/core/modules/color/css/color.admin.css
index 4a5ae7a..8952cc4 100644
--- a/core/modules/color/css/color.admin.css
+++ b/core/modules/color/css/color.admin.css
@@ -2,29 +2,29 @@
  * @file
  * Stylesheet for the administration pages of the Color module.
  */
-.color-form {
+.color__form {
   max-width: 50em;
 }
 .farbtastic {
   margin: 0 auto;
 }
-.color-form .form-item {
+.color__form .form-item {
   overflow: hidden;
   margin: 0.5em 0;
 }
-.color-form label {
+.color__form label {
   clear: left; /* LTR */
 }
-[dir="rtl"] .color-form label {
+[dir="rtl"] .color__form label {
   clear: right;
 }
-.color-form .form-text {
+.color__form .form-text {
   float: left; /* LTR */
   width: 86%;
   text-align: center;
   cursor: pointer;
 }
-[dir="rtl"] .color-form .form-text {
+[dir="rtl"] .color__form .form-text {
   float: right;
 }
 .color__palette .hook {
@@ -79,28 +79,28 @@
   [dir="rtl"] #placeholder {
     float: left;
   }
-  .color-form .form-item {
+  .color__form .form-item {
     margin: 0.5em 195px 0.5em 0; /* LTR */
   }
-  [dir="rtl"] .color-form .form-item {
+  [dir="rtl"] .color__form .form-item {
     margin: 0.5em 0 0.5em 195px;
   }
-  .color-form label {
+  .color__form label {
     float: left; /* LTR */
     clear: left; /* LTR */
     width: 15em;
   }
-  [dir="rtl"] .color-form label {
+  [dir="rtl"] .color__form label {
     float: right;
     clear: right;
   }
-  .color-form .form-text,
-  .color-form .form-select {
+  .color__form .form-text,
+  .color__form .form-select {
     float: left; /* LTR */
     width: auto;
   }
-  [dir="rtl"] .color-form .form-text,
-  [dir="rtl"] .color-form .form-select {
+  [dir="rtl"] .color__form .form-text,
+  [dir="rtl"] .color__form .form-select {
     float: right;
   }
   .color__palette .hook {
@@ -134,8 +134,8 @@
   float: right;
 }
 @media screen and (max-width: 30em) { /* 480px */
-  .color-form #preview-sidebar,
-  .color-form #preview-content {
+  .color__form #preview-sidebar,
+  .color__form #preview-content {
     width: auto;
     margin: 0;
   }
diff --git a/core/modules/color/templates/color-scheme-form.html.twig b/core/modules/color/templates/color-scheme-form.html.twig
index 28fa0b7..e234224 100644
--- a/core/modules/color/templates/color-scheme-form.html.twig
+++ b/core/modules/color/templates/color-scheme-form.html.twig
@@ -15,7 +15,7 @@
  * @ingroup themeable
  */
 #}
-<div class="color-form clearfix">
+<div class="color__form clearfix">
   {{ form.scheme }}
   <div class="color__palette clearfix">
     {{ form.palette }}
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index 1b1a1e7..82b86b2 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -56,14 +56,14 @@ a:active,
 
 /* ---------- Color Form ----------- */
 
-[dir="rtl"] .color-form .color__palette {
+[dir="rtl"] .color__form .color__palette {
   margin-left: 0;
   margin-right: 20px;
 }
-[dir="rtl"] .color-form .form-item label {
+[dir="rtl"] .color__form .form-item label {
   float: right;
 }
-[dir="rtl"] .color-form .color__palette .lock {
+[dir="rtl"] .color__form .color__palette .lock {
   right: -20px;
   left: 0;
 }
-- 
2.2.1

From 1c40a1d288233fabef904f690c1cbbcea4a57934 Mon Sep 17 00:00:00 2001
From: Adrien Revel <adrien@abrege.net>
Date: Tue, 14 Apr 2015 12:37:41 +0200
Subject: [PATCH] Changing #placeholder for .color__placeholder

---
 core/modules/color/color.js            | 4 ++--
 core/modules/color/css/color.admin.css | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/core/modules/color/color.js b/core/modules/color/color.js
index 8babd2f..2cda33e 100644
--- a/core/modules/color/color.js
+++ b/core/modules/color/color.js
@@ -21,8 +21,8 @@
       var focused = null;
 
       // Add Farbtastic.
-      $('<div id="placeholder"></div>').once('color').prependTo(form);
-      var farb = $.farbtastic('#placeholder');
+      $('<div class="color__placeholder"></div>').once('color').prependTo(form);
+      var farb = $.farbtastic('.color__placeholder');
 
       // Decode reference colors to HSL.
       var reference = settings.color.reference;
diff --git a/core/modules/color/css/color.admin.css b/core/modules/color/css/color.admin.css
index 8952cc4..08a6e3b 100644
--- a/core/modules/color/css/color.admin.css
+++ b/core/modules/color/css/color.admin.css
@@ -73,10 +73,10 @@
 
 /* wide viewport. */
 @media screen and (min-width: 37.5625em) { /* 601px */
-  #placeholder {
+  .color__placeholder {
     float: right; /* LTR */
   }
-  [dir="rtl"] #placeholder {
+  [dir="rtl"] .color__placeholder {
     float: left;
   }
   .color__form .form-item {
-- 
2.2.1

From 886c177e1d82646a8c1aea33fc3e93cdf9bbac6a Mon Sep 17 00:00:00 2001
From: Adrien Revel <adrien@abrege.net>
Date: Tue, 14 Apr 2015 14:24:18 +0200
Subject: [PATCH] Changin #preview for .color__preview in color module and
 bartik theme

---
 core/modules/color/color.js            |  4 ++--
 core/modules/color/css/color.admin.css |  6 +++---
 core/modules/color/preview.html        |  2 +-
 core/modules/color/preview.js          |  2 +-
 core/themes/bartik/color/preview.css   |  4 ++--
 core/themes/bartik/color/preview.html  |  2 +-
 core/themes/bartik/color/preview.js    | 18 +++++++++---------
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/core/modules/color/color.js b/core/modules/color/color.js
index 2cda33e..753b261 100644
--- a/core/modules/color/color.js
+++ b/core/modules/color/color.js
@@ -39,8 +39,8 @@
       for (i in settings.gradients) {
         if (settings.gradients.hasOwnProperty(i)) {
           // Add element to display the gradient.
-          $('#preview').once('color').append('<div id="gradient-' + i + '"></div>');
-          var gradient = $('#preview #gradient-' + i);
+          $('.color__preview').once('color').append('<div id="gradient-' + i + '"></div>');
+          var gradient = $('.color__preview #gradient-' + i);
           // Add height of current gradient to the list (divided by 10).
           height.push(parseInt(gradient.css('height'), 10) / 10);
           // Add width of current gradient to the list (divided by 10).
diff --git a/core/modules/color/css/color.admin.css b/core/modules/color/css/color.admin.css
index 08a6e3b..9c7a6c5 100644
--- a/core/modules/color/css/color.admin.css
+++ b/core/modules/color/css/color.admin.css
@@ -122,15 +122,15 @@
 }
 
 /* Preview */
-#preview {
+.color__preview {
   display: none;
 }
-.js #preview {
+.js .color__preview {
   display: block;
   position: relative;
   float: left; /* LTR */
 }
-.js[dir="rtl"] #preview {
+.js[dir="rtl"] .color__preview {
   float: right;
 }
 @media screen and (max-width: 30em) { /* 480px */
diff --git a/core/modules/color/preview.html b/core/modules/color/preview.html
index e25b7ad..680c374 100644
--- a/core/modules/color/preview.html
+++ b/core/modules/color/preview.html
@@ -1,4 +1,4 @@
-<div id="preview">
+<div class="color__preview">
   <div id="text">
     <h2>Lorem ipsum dolor</h2>
     <p>Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="#">exercitation ullamco</a> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
diff --git a/core/modules/color/preview.js b/core/modules/color/preview.js
index 448d226..3ec5678 100644
--- a/core/modules/color/preview.js
+++ b/core/modules/color/preview.js
@@ -11,7 +11,7 @@
     callback: function (context, settings, form, farb, height, width) {
       var accum, delta;
       // Solid background.
-      form.find('#preview').css('backgroundColor', form.find('.color__palette input[name="palette[base]"]').val());
+      form.find('.color__preview').css('backgroundColor', form.find('.color__palette input[name="palette[base]"]').val());
 
       // Text preview
       form.find('#text').css('color', form.find('.color__palette input[name="palette[text]"]').val());
diff --git a/core/themes/bartik/color/preview.css b/core/themes/bartik/color/preview.css
index 294277f..bcac468 100644
--- a/core/themes/bartik/color/preview.css
+++ b/core/themes/bartik/color/preview.css
@@ -1,9 +1,9 @@
 /* ---------- Preview Styles ----------- */
-.js #preview {
+.js .color__preview {
   clear: both;
   float: none !important;
 }
-#preview {
+.color__preview {
   background-color: #fff;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 14px;
diff --git a/core/themes/bartik/color/preview.html b/core/themes/bartik/color/preview.html
index 3960039..f82c735 100644
--- a/core/themes/bartik/color/preview.html
+++ b/core/themes/bartik/color/preview.html
@@ -1,4 +1,4 @@
-<div id="preview">
+<div class="color__preview">
 
   <div id="preview-header">
     <div id="preview-logo"><img src="../../../core/themes/bartik/logo.svg" alt="Site Logo" /></div>
diff --git a/core/themes/bartik/color/preview.js b/core/themes/bartik/color/preview.js
index 19107e3..31937d5 100644
--- a/core/themes/bartik/color/preview.js
+++ b/core/themes/bartik/color/preview.js
@@ -11,7 +11,7 @@
     callback: function (context, settings, form, farb, height, width) {
       // Change the logo to be the real one.
       if (!this.logoChanged) {
-        $('#preview #preview-logo img').attr('src', drupalSettings.color.logo);
+        $('.color__preview #preview-logo img').attr('src', drupalSettings.color.logo);
         this.logoChanged = true;
       }
       // Remove the logo if the setting is toggled off.
@@ -20,26 +20,26 @@
       }
 
       // Solid background.
-      form.find('#preview').css('backgroundColor', $('.color__palette input[name="palette[bg]"]').val());
+      form.find('.color__preview').css('backgroundColor', $('.color__palette input[name="palette[bg]"]').val());
 
       // Text preview.
-      form.find('#preview #preview-main h2, #preview .preview-content').css('color', form.find('.color__palette input[name="palette[text]"]').val());
-      form.find('#preview #preview-content a').css('color', form.find('.color__palette input[name="palette[link]"]').val());
+      form.find('.color__preview #preview-main h2, .color__preview .preview-content').css('color', form.find('.color__palette input[name="palette[text]"]').val());
+      form.find('.color__preview #preview-content a').css('color', form.find('.color__palette input[name="palette[link]"]').val());
 
       // Sidebar block.
-      form.find('#preview #preview-sidebar #preview-block').css('background-color', form.find('.color__palette input[name="palette[sidebar]"]').val());
-      form.find('#preview #preview-sidebar #preview-block').css('border-color', form.find('.color__palette input[name="palette[sidebarborders]"]').val());
+      form.find('.color__preview #preview-sidebar #preview-block').css('background-color', form.find('.color__palette input[name="palette[sidebar]"]').val());
+      form.find('.color__preview #preview-sidebar #preview-block').css('border-color', form.find('.color__palette input[name="palette[sidebarborders]"]').val());
 
       // Footer wrapper background.
-      form.find('#preview #preview-footer-wrapper', form).css('background-color', form.find('.color__palette input[name="palette[footer]"]').val());
+      form.find('.color__preview #preview-footer-wrapper', form).css('background-color', form.find('.color__palette input[name="palette[footer]"]').val());
 
       // CSS3 Gradients.
       var gradient_start = form.find('.color__palette input[name="palette[top]"]').val();
       var gradient_end = form.find('.color__palette input[name="palette[bottom]"]').val();
 
-      form.find('#preview #preview-header').attr('style', "background-color: " + gradient_start + "; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(" + gradient_start + "), to(" + gradient_end + ")); background-image: -moz-linear-gradient(-90deg, " + gradient_start + ", " + gradient_end + ");");
+      form.find('.color__preview #preview-header').attr('style', "background-color: " + gradient_start + "; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(" + gradient_start + "), to(" + gradient_end + ")); background-image: -moz-linear-gradient(-90deg, " + gradient_start + ", " + gradient_end + ");");
 
-      form.find('#preview #preview-site-name').css('color', form.find('.color__palette input[name="palette[titleslogan]"]').val());
+      form.find('.color__preview #preview-site-name').css('color', form.find('.color__palette input[name="palette[titleslogan]"]').val());
     }
   };
 })(jQuery, Drupal, drupalSettings);
-- 
2.2.1

From a8c626c6dbf597946f941a70fafc9799502ff9b2 Mon Sep 17 00:00:00 2001
From: Adrien Revel <adrien@abrege.net>
Date: Tue, 14 Apr 2015 14:44:39 +0200
Subject: [PATCH] Changing #preview-sidebar & #preview-content for
 .color__preview-sidebar & .color__preview-content for color module and bartik
 theme

---
 core/modules/color/css/color.admin.css |  4 ++--
 core/themes/bartik/color/preview.css   | 20 ++++++++++----------
 core/themes/bartik/color/preview.html  |  4 ++--
 core/themes/bartik/color/preview.js    |  6 +++---
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/core/modules/color/css/color.admin.css b/core/modules/color/css/color.admin.css
index 9c7a6c5..7dcb9cf 100644
--- a/core/modules/color/css/color.admin.css
+++ b/core/modules/color/css/color.admin.css
@@ -134,8 +134,8 @@
   float: right;
 }
 @media screen and (max-width: 30em) { /* 480px */
-  .color__form #preview-sidebar,
-  .color__form #preview-content {
+  .color__form .color__preview-sidebar,
+  .color__form .color__preview-content {
     width: auto;
     margin: 0;
   }
diff --git a/core/themes/bartik/color/preview.css b/core/themes/bartik/color/preview.css
index bcac468..38bc71f 100644
--- a/core/themes/bartik/color/preview.css
+++ b/core/themes/bartik/color/preview.css
@@ -70,38 +70,38 @@
   list-style-type: none;
   padding: 0.6em 0 0.4em;
 }
-#preview-sidebar,
-#preview-content {
+.color__preview-sidebar,
+.color__preview-content {
   display: inline;
   float: left; /* LTR */
   position: relative;
 }
-[dir="rtl"] #preview-sidebar,
-[dir="rtl"] #preview-content {
+[dir="rtl"] .color__preview-sidebar,
+[dir="rtl"] .color__preview-content {
     float: right;
 }
-#preview-sidebar {
+.color__preview-sidebar {
   margin-left: 15px; /* LTR */
   width: 210px;
 }
-[dir="rtl"] #preview-sidebar {
+[dir="rtl"] .color__preview-sidebar {
   margin-left: 0;
   margin-right: 15px;
 }
-#preview-content {
+.color__preview-content {
   margin-left: 30px; /* LTR */
   width: 26.5em;
 }
-[dir="rtl"] #preview-content {
+[dir="rtl"] .color__preview-content {
   margin-left: 0;
   margin-right: 30px;
 }
-#preview-sidebar .preview-block {
+.color__preview-sidebar .preview-block {
   border: 1px solid;
   margin: 20px 0;
   padding: 15px 20px;
 }
-#preview-sidebar h2 {
+.color__preview-sidebar h2 {
   border-bottom: 1px solid #d6d6d6;
   font-size: 1.071em;
   font-weight: normal;
diff --git a/core/themes/bartik/color/preview.html b/core/themes/bartik/color/preview.html
index f82c735..8f4d647 100644
--- a/core/themes/bartik/color/preview.html
+++ b/core/themes/bartik/color/preview.html
@@ -13,7 +13,7 @@
   </div>
 
   <div id="preview-main" class="clearfix">
-    <div id="preview-sidebar">
+    <div class="color__preview-sidebar">
       <div id="preview-block" class="preview-block">
         <h2>Etiam est risus</h2>
         <div class="preview-content">
@@ -22,7 +22,7 @@
         </div>
       </div>
     </div>
-    <div id="preview-content">
+    <div class="color__preview-content">
       <h1 id="preview-page-title">Lorem ipsum dolor</h1>
       <div id="preview-node">
         <div class="preview-content">
diff --git a/core/themes/bartik/color/preview.js b/core/themes/bartik/color/preview.js
index 31937d5..0d68770 100644
--- a/core/themes/bartik/color/preview.js
+++ b/core/themes/bartik/color/preview.js
@@ -24,11 +24,11 @@
 
       // Text preview.
       form.find('.color__preview #preview-main h2, .color__preview .preview-content').css('color', form.find('.color__palette input[name="palette[text]"]').val());
-      form.find('.color__preview #preview-content a').css('color', form.find('.color__palette input[name="palette[link]"]').val());
+      form.find('.color__preview .color__preview-content a').css('color', form.find('.color__palette input[name="palette[link]"]').val());
 
       // Sidebar block.
-      form.find('.color__preview #preview-sidebar #preview-block').css('background-color', form.find('.color__palette input[name="palette[sidebar]"]').val());
-      form.find('.color__preview #preview-sidebar #preview-block').css('border-color', form.find('.color__palette input[name="palette[sidebarborders]"]').val());
+      form.find('.color__preview .color__preview-sidebar #preview-block').css('background-color', form.find('.color__palette input[name="palette[sidebar]"]').val());
+      form.find('.color__preview .color__preview-sidebar #preview-block').css('border-color', form.find('.color__palette input[name="palette[sidebarborders]"]').val());
 
       // Footer wrapper background.
       form.find('.color__preview #preview-footer-wrapper', form).css('background-color', form.find('.color__palette input[name="palette[footer]"]').val());
-- 
2.2.1

From c8c63182489107790092207ce4efc11076c014e5 Mon Sep 17 00:00:00 2001
From: Adrien Revel <adrien@abrege.net>
Date: Tue, 14 Apr 2015 14:56:07 +0200
Subject: [PATCH] Correct a bug in preview.css of bartik theme changing
 #preview for .color__preview

---
 core/themes/bartik/color/preview.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/themes/bartik/color/preview.css b/core/themes/bartik/color/preview.css
index 38bc71f..e0b35ab 100644
--- a/core/themes/bartik/color/preview.css
+++ b/core/themes/bartik/color/preview.css
@@ -110,11 +110,11 @@
   padding-bottom: 5px;
   text-shadow: 0 1px 0 #fff;
 }
-#preview .preview-block .preview-content {
+.color__preview .preview-block .preview-content {
   margin-top: 1em;
 }
-#preview .preview-block-menu .preview-content,
-#preview .preview-block-menu .preview-content ul {
+.color__preview .preview-block-menu .preview-content,
+.color__preview .preview-block-menu .preview-content ul {
   margin-top: 0;
 }
 #preview-main {
-- 
2.2.1