Issue #2866801 by harsha012, joelpittet, BrightBold, droplet, Akshay kashyap,...

Issue #2866801 by harsha012, joelpittet, BrightBold, droplet, Akshay kashyap, arunkumark, bmx269: Update stylelint rules color-hex-length to be consistent with Drupal's CSS standards

core/.stylelintrc.json

@@ -4,7 +4,6 @@
     "stylelint-no-browser-hacks/lib"
   ],
   "rules": {
-    "color-hex-length": null,
     "comment-empty-line-before": null,
     "declaration-block-no-duplicate-properties": null,
     "function-linear-gradient-no-nonstandard-direction": null,

core/misc/dialog/off-canvas.base.css

@@ -31,7 +31,7 @@
 }
 #drupal-off-canvas hr {
   height: 1px;
-  background: #cccccc;
+  background: #ccc;
 }
 #drupal-off-canvas summary,
 #drupal-off-canvas .fieldgroup:not(.form-composite) > legend {

core/misc/dialog/off-canvas.theme.css

@@ -45,7 +45,7 @@
 .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
 .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
   background-image: url(../icons/ffffff/ex.svg);
-  border: 3px solid #ffffff;
+  border: 3px solid #fff;
 }
 [dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
   left: 1em;

core/modules/block_place/css/block-place.css

@@ -14,8 +14,8 @@
 
 .block-place-region a.button {
   position: relative;
-  background: url(../../../misc/icons/bebebe/plus.svg) #ffffff center center / 16px 16px no-repeat;
-  border: 1px solid #cccccc;
+  background: url(../../../misc/icons/bebebe/plus.svg) #fff center center / 16px 16px no-repeat;
+  border: 1px solid #ccc;
   box-sizing: border-box;
   font-size: 1rem;
   padding: 0;

core/modules/color/tests/modules/color_test/themes/color_test_theme/css/colors.css

 html {
-  color: #0000ff;
+  color: #00f;
 }
 
 body {
-  color: #ff0000;
+  color: #f00;
 }

core/modules/layout_builder/css/layout-builder.css

@@ -22,8 +22,8 @@
 
 .layout-section .remove-section {
   position: relative;
-  background: url(../../../misc/icons/bebebe/ex.svg) #ffffff center center / 16px 16px no-repeat;
-  border: 1px solid #cccccc;
+  background: url(../../../misc/icons/bebebe/ex.svg) #fff center center / 16px 16px no-repeat;
+  border: 1px solid #ccc;
   box-sizing: border-box;
   font-size: 1rem;
   padding: 0;

core/modules/shortcut/css/shortcut.theme.css

@@ -32,11 +32,11 @@
   margin-right: 0.3em;
 }
 .shortcut-action__message {
-  background: #000000;
+  background: #000;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 5px;
   padding: 0 5px;
-  color: #ffffff;
+  color: #fff;
   display: inline-block;
   margin-left: 0.3em; /* LTR */
   opacity: 0;

core/modules/toolbar/css/toolbar.menu.css

@@ -61,38 +61,38 @@
  */
 .toolbar .level-2 > ul {
   background-color: #fafafa;
-  border-bottom-color: #cccccc;
+  border-bottom-color: #ccc;
   border-top-color: #e5e5e5;
 }
 .toolbar .level-3 > ul {
   background-color: #f5f5f5;
   border-bottom-color: #c5c5c5;
-  border-top-color: #dddddd;
+  border-top-color: #ddd;
 }
 .toolbar .level-4 > ul {
-  background-color: #eeeeee;
-  border-bottom-color: #bbbbbb;
+  background-color: #eee;
+  border-bottom-color: #bbb;
   border-top-color: #d5d5d5;
 }
 .toolbar .level-5 > ul {
   background-color: #e5e5e5;
   border-bottom-color: #b5b5b5;
-  border-top-color: #cccccc;
+  border-top-color: #ccc;
 }
 .toolbar .level-6 > ul {
-  background-color: #eeeeee;
-  border-bottom-color: #aaaaaa;
+  background-color: #eee;
+  border-bottom-color: #aaa;
   border-top-color: #c5c5c5;
 }
 .toolbar .level-7 > ul {
   background-color: #fafafa;
   border-bottom-color: #b5b5b5;
-  border-top-color: #cccccc;
+  border-top-color: #ccc;
 }
 .toolbar .level-8 > ul {
-  background-color: #dddddd;
-  border-bottom-color: #cccccc;
-  border-top-color: #dddddd;
+  background-color: #ddd;
+  border-bottom-color: #ccc;
+  border-top-color: #ddd;
 }
 
 /**

core/modules/toolbar/css/toolbar.theme.css

@@ -31,13 +31,13 @@
 .toolbar .toolbar-bar {
   background-color: #0f0f0f;
   box-shadow: -1px 0 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
-  color: #dddddd;
+  color: #ddd;
 }
 [dir="rtl"] .toolbar .toolbar-bar {
   box-shadow: 1px 0 3px 1px rgba(0, 0, 0, 0.3333);
 }
 .toolbar .toolbar-bar .toolbar-item {
-  color: #ffffff;
+  color: #fff;
 }
 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item {
   font-weight: bold;
@@ -56,7 +56,7 @@
  * Toolbar tray.
  */
 .toolbar .toolbar-tray {
-  background-color: #ffffff;
+  background-color: #fff;
 }
 .toolbar-horizontal .toolbar-tray > .toolbar-lining {
   padding-right: 5em; /* LTR */
@@ -67,16 +67,16 @@
 }
 .toolbar .toolbar-tray-vertical {
   background-color: #f5f5f5;
-  border-right: 1px solid #aaaaaa; /* LTR */
+  border-right: 1px solid #aaa; /* LTR */
   box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */
 }
 [dir="rtl"] .toolbar .toolbar-tray-vertical {
-  border-left: 1px solid #aaaaaa;
+  border-left: 1px solid #aaa;
   border-right: 0 none;
   box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333);
 }
 .toolbar-horizontal .toolbar-tray {
-  border-bottom: 1px solid #aaaaaa;
+  border-bottom: 1px solid #aaa;
   box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
 }
 [dir="rtl"] .toolbar-horizontal .toolbar-tray {
@@ -99,33 +99,33 @@
   text-decoration: underline;
 }
 .toolbar .toolbar-menu {
-  background-color: #ffffff;
+  background-color: #fff;
 }
 .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
-  border-left: 1px solid #dddddd; /* LTR */
+  border-left: 1px solid #ddd; /* LTR */
 }
 [dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
   border-left: 0 none;
-  border-right: 1px solid #dddddd;
+  border-right: 1px solid #ddd;
 }
 .toolbar-horizontal .toolbar-tray .menu-item:last-child {
-  border-right: 1px solid #dddddd; /* LTR */
+  border-right: 1px solid #ddd; /* LTR */
 }
 [dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item:last-child {
-  border-left: 1px solid #dddddd;
+  border-left: 1px solid #ddd;
 }
 .toolbar .toolbar-tray-vertical .menu-item + .menu-item {
-  border-top: 1px solid #dddddd;
+  border-top: 1px solid #ddd;
 }
 .toolbar .toolbar-tray-vertical .menu-item:last-child {
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid #ddd;
 }
 .toolbar .toolbar-tray-vertical .menu-item .menu-item {
   border: 0 none;
 }
 .toolbar .toolbar-tray-vertical .toolbar-menu ul ul {
-  border-bottom: 1px solid #dddddd;
-  border-top: 1px solid #dddddd;
+  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #ddd;
 }
 .toolbar .toolbar-tray-vertical .menu-item:last-child > ul {
   border-bottom: 0;

core/profiles/demo_umami/themes/umami/css/base.css

@@ -20,7 +20,7 @@ a {
 a:hover,
 a:focus {
   background-color: #e6eee0;
-  color: #444444;
+  color: #444;
   text-decoration: none;
 }
 
@@ -82,7 +82,7 @@ button:focus,
 .button:focus {
   background-color: #e6eee0;
   border: 3px solid #00836d;
-  color: #000000;
+  color: #000;
   text-decoration: none;
   transition: background-color 0.5s ease;
 }

core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css

@@ -68,7 +68,7 @@
   .block-type-banner-block .summary {
     margin: 0;
     flex: 0 0 30%;
-    color: #ffffff;
+    color: #fff;
   }
 
   .block-type-banner-block .field--name-field-banner-image {

core/profiles/demo_umami/themes/umami/css/components/content/full/node-full.css

@@ -3,7 +3,7 @@
  * This file is used to style the 'full' view mode.
  */
 .node--view-mode-full {
-  background-color: #ffffff;
+  background-color: #fff;
   border-bottom: 1px solid #fcece7;
   border-left: none;
   border-right: none;

core/profiles/demo_umami/themes/umami/css/components/navigation/menu-footer/menu-footer.css

@@ -20,7 +20,7 @@
   background-color: transparent;
   text-decoration: none;
   font-weight: bold;
-  color: #ffffff;
+  color: #fff;
 }
 
 .menu-footer .menu-footer__link:active,

core/themes/bartik/css/colors.css

@@ -8,14 +8,14 @@ body {
 #main-wrapper,
 .region-primary-menu .menu-item a.is-active,
 .region-primary-menu .menu-item--active-trail a {
-  background: #ffffff;
+  background: #fff;
 }
 .tabs ul.primary li a.is-active {
-  background-color: #ffffff;
+  background-color: #fff;
 }
 .tabs ul.primary li.is-active a {
-  background-color: #ffffff;
-  border-bottom-color: #ffffff;
+  background-color: #fff;
+  border-bottom-color: #fff;
 }
 #header {
   background-color: #1d84c3;

core/themes/bartik/css/components/demo-block.css

@@ -4,7 +4,7 @@
  */
 
 .demo-block {
-  background: #ffff66;
+  background: #ff6;
   border: 1px dotted #9f9e00;
   color: #000;
   font: 90% "Lucida Grande", "Lucida Sans Unicode", sans-serif;

core/themes/bartik/css/components/tabs.css

@@ -21,7 +21,7 @@ div.tabs {
   text-shadow: 0 1px 0 #fff;
 }
 .tabs ul.primary li.is-active a {
-  background-color: #ffffff;
+  background-color: #fff;
   border: 1px solid #bbb;
 }
 

core/themes/classy/css/components/dropbutton.css

@@ -5,7 +5,7 @@
 
 .js .dropbutton-widget {
   background-color: white;
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
 }
 .js .dropbutton-widget:hover {
   border-color: #b8b8b8;

core/themes/seven/css/base/elements.css

@@ -23,7 +23,7 @@ hr {
   padding: 0;
   border: none;
   height: 1px;
-  background: #cccccc;
+  background: #ccc;
 }
 summary,
 .fieldgroup:not(.form-composite) > legend {

core/themes/seven/css/components/dialog.css

@@ -30,7 +30,7 @@
   font-size: 1.231em;
   font-weight: 600;
   margin: 0;
-  color: #ffffff;
+  color: #fff;
   -webkit-font-smoothing: antialiased;
 }
 .ui-dialog .ui-dialog-titlebar-close {
@@ -49,7 +49,7 @@
 }
 .ui-dialog .ui-dialog-titlebar-close:hover,
 .ui-dialog .ui-dialog-titlebar-close:focus {
-  border-color: #ffffff;
+  border-color: #fff;
 }
 [dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
   right: auto;
@@ -60,7 +60,7 @@
   margin-top: -8px;
 }
 .ui-dialog .ui-widget-content.ui-dialog-content {
-  background: #ffffff;
+  background: #fff;
   overflow: auto;
   padding: 1em;
 }

core/themes/seven/css/components/dropbutton.component.css

@@ -9,7 +9,7 @@
 .js .dropbutton .dropbutton-action > input,
 .js .dropbutton .dropbutton-action > a,
 .js .dropbutton .dropbutton-action > button {
-  color: #333333;
+  color: #333;
   text-decoration: none;
   padding: 0;
   margin: 0;
@@ -173,7 +173,7 @@
   background-color: #f2f1eb;
   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
-  color: #333333;
+  color: #333;
   text-decoration: none;
   text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
   font-weight: 600;