Stylelint updates (#1022)

* Add additional stylelint rules

* Lint SCSS

* Add protocol color tokens

.stylelintrc.json

@@ -10,13 +10,32 @@
     "static/scss/libs/**"
   ],
   "rules": {
+    "at-rule-empty-line-before": [
+      "always",
+      {
+        "except": ["after-same-name", "first-nested"],
+        "ignore": ["after-comment"]
+      }
+    ],
     "at-rule-no-unknown": null,
+    "block-opening-brace-newline-after": "always",
+    "block-closing-brace-newline-after": "always",
     "color-hex-case": "upper",
     "declaration-block-semicolon-newline-after": "always",
+    "declaration-colon-space-after": "always",
+    "declaration-colon-space-before": "never",
     "function-url-quotes": "always",
     "indentation": 4,
     "no-descending-specificity": null,
+    "no-missing-end-of-source-newline": true,
     "number-leading-zero": "never",
+    "rule-empty-line-before": [
+      "always", 
+      {
+        "except": ["after-single-line-comment"],
+        "ignore": ["after-comment"]
+      }
+    ],
     "scss/at-rule-no-unknown": true
   }
-}
+}

static/scss/components/banners.scss

@@ -3,70 +3,84 @@
     border-radius: $border-radius-md;
     padding: $spacing-xl $spacing-lg;
     width: 100%;
+
     img {
         display: none;
         height: auto;
         align-self: center;
         max-width: 280px;
         padding: 0 $spacing-xl;    
     }
+
     h2 {
         font-size: 1.25rem;
         margin: 0 0 $spacing-sm;
         padding: 0;
         color: $color-black;
     }
+
     p {
         margin: 0 0 $spacing-md;
         padding: 0;
     }
+
     form {
         margin-bottom: $spacing-md;
     }
+
     input {
         width: 100%;
         display: block;
         border-radius: $border-radius-sm;
         padding: $spacing-sm $spacing-md;
         margin-bottom: $spacing-sm;
+
         &[type='text'] {
-            border: 1px solid #CCCCCC;
+            border: 1px solid $color-light-gray-20;
             width: 100%;
         }
 
     }
+
     .warning {
         font-size: .9rem;
         font-weight: 700;
         color: $color-warning;
     }
+
     .border {
-        border-left:  1px solid #ECECEC;
+        border-left: 1px solid $color-light-gray-20;
         display: none;
     }
 }
 
 @media screen and (min-width: 540px) {
-    .mpp-choose-subdomain form {   
+
+    .mpp-choose-subdomain form {
         display: flex;
+
         input {
             width: auto;
+
             &[type='submit'] {
                 margin-left: $spacing-md;
             }
         }
     }
 }
-
 @media screen and (min-width: 768px) {
-    .mpp-choose-subdomain {   
+
+    .mpp-choose-subdomain {
         display: flex;
+
         img {
             display: block;
         }
+
         .border {
             display: block;
         }
+
         .mpp-choose-subdomain-form {
             padding-left: $spacing-xl;
         }

static/scss/components/buttons.scss

@@ -14,7 +14,7 @@
     color: $color-blue-50;
 }
 
-.btn--blue { 
+.btn--blue {
     background-color: $color-blue-50;
     color: $color-white;
 }
@@ -23,13 +23,15 @@
     border: 2px solid $color-blue-50;
     color: $color-blue-50;
     background: none;
+
     &:hover {
         color: $color-white;
         background-color: $color-blue-50;
     }
 }
 
 .c-button-toggle {
+
     form {
         display: flex;
         align-items: center;

static/scss/components/filter-bar.scss

@@ -4,6 +4,7 @@
     margin-bottom: $spacing-md;
 
     .c-filter-search-form {
+
         &.is-hidden {
             display: none;
         }
@@ -29,6 +30,7 @@
 
     @media screen and (min-width: 768px) {
         justify-content: flex-end;
+
         &.is-search-active {
             margin-bottom: $spacing-md;
 
@@ -56,13 +58,15 @@
         padding-right: 90px;
         position: relative;
         z-index: 0;
+
         &.is-filtered + .c-filter-search-controls {
             opacity: 1;
         }
 
         &:focus + .c-filter-search-controls {
             opacity: 1;
         }
+
         &:focus, &:hover {
             background-image: url("/static/images/icon-search-blue.svg");
         }
@@ -91,9 +95,11 @@
     @media #{$mq-md} {
         align-self: flex-start;
         margin-right: auto;
+
         form {
             display: block;
         }
+
         .c-filter-icon {
             display: none;
         }
@@ -102,6 +108,7 @@
 
 .c-filter-action {
     margin-left: auto;
+
     @media #{$mq-md} {
         margin-left: 0;
     }
@@ -129,13 +136,15 @@
 .c-filter-icon-search {
     background-size: auto 1.25rem;
     background-image: url("/static/images/icon-search.svg");
+
     &.is-enabled, &:hover {
         background-image: url("/static/images/icon-search-blue.svg");        
     }
 }
 
 .c-filter-icon-calendar {
     background-image: url("/static/images/icon-calendar.svg");
+
     &.is-enabled, &:hover {
         background-image: url("/static/images/icon-calendar-blue.svg");        
     }
@@ -169,4 +178,4 @@
         width: 1rem;
         display: block;
     }
-}
+}

static/scss/includes/variables.scss

@@ -174,4 +174,4 @@ $gradient-blue: radial-gradient(100% 100% at 100% 0%, #B833E1 0%, #9059FF 37.1%,
 // Base Colors
 $color-purple: $color-violet-90;
 $color-green: $color-green-50;
-$color-grey: $color-grey-60;
+$color-grey: $color-grey-60;

static/scss/partials/banners.scss

@@ -87,6 +87,7 @@
 }
 
 @media screen and (max-width: 800px) {
+
     #micro-survey-banner {
         display: none;
     }