@utahdts/utah-design-system 4.3.0 → 5.0.0

package/css/1-settings/_color-swatches.scss

@@ -439,3 +439,77 @@ $cool-gray-14: #c7cacc;
 $cool-gray-15: #d5d7d9;
 $cool-gray-16: #e3e4e5;
 $cool-gray-17: #f1f1f2;
+
+
+/*
+branding colors
+*/
+$branding-blue-dark: #071D49;
+$branding-blue-medium: #093692;
+$branding-blue-light: #81D0F0;
+$branding-gold-light: #FFB81D;
+$branding-gold-medium: #FF8C03;
+$branding-red: #AA0200;
+
+$clay-00: #E9DCC8;
+$clay-01: #C0B1A1;
+$clay-02: #9C837E;
+$clay-03: #78555A;
+$clay-04: #52393B;
+$clay-05: #2C1E1B;
+
+$green-00: #C6D0BE;
+$green-01: #94AF87;
+$green-02: #4A9044;
+$green-03: #007000;
+$green-04: #1C4C10;
+$green-05: #092908;
+
+$teal-00: #A6C4CA;
+$teal-01: #79B1B1;
+$teal-02: #3D9992;
+$teal-03: #008072;
+$teal-04: #165857;
+$teal-05: #0D262E;
+
+$blue-00: #C1CFE7;
+$blue-01: #89A4D4;
+$blue-02: #467EC8;
+$blue-03: #0258BB;
+$blue-04: #103982;
+$blue-05: #0E1C3B;
+
+$violet-00: #D6CEDF;
+$violet-01: #9F8DB4;
+$violet-02: #7259AA;
+$violet-03: #3F1EAD;
+$violet-04: #301C5C;
+$violet-05: #1F0A45;
+
+$raspberry-00: #D0A7BB;
+$raspberry-01: #C9829E;
+$raspberry-02: #C24177;
+$raspberry-03: #BA004F;
+$raspberry-04: #870746;
+$raspberry-05: #530D3C;
+
+$red-00: #E1ACA1;
+$red-01: #DF897D;
+$red-02: #FF5D5F;
+$red-03: #E70015;
+$red-04: #9B1B15;
+$red-05: #61100A;
+
+$orange-00: #E9C997;
+$orange-01: #E5A873;
+$orange-02: #E37D49;
+$orange-03: #E2521F;
+$orange-04: #A34818;
+$orange-05: #633D11;
+
+$yellow-00: #FAFAD4;
+$yellow-01: #F8FAAF;
+$yellow-02: #F5FA7D;
+$yellow-03: #F2FA00;
+$yellow-04: #CBB60C;
+$yellow-05: #A47217;

package/css/1-settings/_font-stuff.scss

@@ -4,11 +4,62 @@ Font size variables
 */
 @use "../1-settings/class-vars";
 
+@font-face {
+  font-family: "UT Industry";
+  src:
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff2/UTIndustry-Regular.woff2") format("woff2"),
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff/UTIndustry-Regular.woff") format("woff"),
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/otf/UTIndustry-Regular.otf") format("opentype"),
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/ttf/UTIndustry-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: "UT Industry";
+  src:
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff2/UTIndustry-Medium.woff2") format("woff2"),
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff/UTIndustry-Medium.woff") format("woff"),
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/otf/UTIndustry-Medium.otf") format("opentype"),
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/ttf/UTIndustry-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: "UT Industry";
+  src:
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff2/UTIndustry-Bold.woff2") format("woff2"),
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff/UTIndustry-Bold.woff") format("woff"),
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/otf/UTIndustry-Bold.otf") format("opentype"),
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/ttf/UTIndustry-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: "UT Industry";
+  src:
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff2/UTIndustry-Heavy.woff2") format("woff2"),
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff/UTIndustry-Heavy.woff") format("woff"),
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/otf/UTIndustry-Heavy.otf") format("opentype"),
+    url("https://cdn.utah.gov/design-system/fonts/ut-industry/ttf/UTIndustry-Heavy.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: block;
+}
+
+:root {
+  --ut-industry-font-family: 'UT Industry', Georgia, serif;
+}
+
 #{class-vars.$base-class} {
   --normal-font-family: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Helvetica, sans-serif;
   --fixed-width-font-family: 'Source Code Pro', monospace;
 
-  --font-size-2xs: .8125rem; //13
   --font-size-xs:  .875rem;  //14
   --font-size-s:   .9375rem; //15
   --font-size:     1rem;     //16
@@ -29,7 +80,6 @@ Font size variables
   --font-weight-bold: 700;
   --font-weight-black: 900;
 
-  .font-size-2xs { font-size: var(--font-size-2xs); }
   .font-size-xs  { font-size: var(--font-size-xs);  }
   .font-size-s   { font-size: var(--font-size-s);   }
   .font-size     { font-size: var(--font-size);     }

package/css/1-settings/_settings-index.scss

@@ -18,30 +18,109 @@ variables and settings
 @forward "media-size-vars";
 @use "media-size-vars";
 
+:root {
+  /* ######## ---------- Branding --------- ######## */
+  --utah-brand-primary-color-blue-dark: #{color-swatches.$branding-blue-dark};
+  --utah-brand-primary-color-blue-medium: #{color-swatches.$branding-blue-medium};
+  --utah-brand-primary-color-blue-light: #{color-swatches.$branding-blue-light};
+  --utah-brand-primary-color-gold-light: #{color-swatches.$branding-gold-light};
+  --utah-brand-primary-color-gold-medium: #{color-swatches.$branding-gold-medium};
+  --utah-brand-primary-color-red: #{color-swatches.$branding-red};
+
+  --utah-brand-secondary-color-clay-00: #{color-swatches.$clay-00};
+  --utah-brand-secondary-color-clay-01: #{color-swatches.$clay-01};
+  --utah-brand-secondary-color-clay-02: #{color-swatches.$clay-02};
+  --utah-brand-secondary-color-clay-03: #{color-swatches.$clay-03};
+  --utah-brand-secondary-color-clay-04: #{color-swatches.$clay-04};
+  --utah-brand-secondary-color-clay-05: #{color-swatches.$clay-05};
+
+  --utah-brand-secondary-color-green-00: #{color-swatches.$green-00};
+  --utah-brand-secondary-color-green-01: #{color-swatches.$green-01};
+  --utah-brand-secondary-color-green-02: #{color-swatches.$green-02};
+  --utah-brand-secondary-color-green-03: #{color-swatches.$green-03};
+  --utah-brand-secondary-color-green-04: #{color-swatches.$green-04};
+  --utah-brand-secondary-color-green-05: #{color-swatches.$green-05};
+
+  --utah-brand-secondary-color-teal-00: #{color-swatches.$teal-00};
+  --utah-brand-secondary-color-teal-01: #{color-swatches.$teal-01};
+  --utah-brand-secondary-color-teal-02: #{color-swatches.$teal-02};
+  --utah-brand-secondary-color-teal-03: #{color-swatches.$teal-03};
+  --utah-brand-secondary-color-teal-04: #{color-swatches.$teal-04};
+  --utah-brand-secondary-color-teal-05: #{color-swatches.$teal-05};
+
+  --utah-brand-secondary-color-blue-00: #{color-swatches.$blue-00};
+  --utah-brand-secondary-color-blue-01: #{color-swatches.$blue-01};
+  --utah-brand-secondary-color-blue-02: #{color-swatches.$blue-02};
+  --utah-brand-secondary-color-blue-03: #{color-swatches.$blue-03};
+  --utah-brand-secondary-color-blue-04: #{color-swatches.$blue-04};
+  --utah-brand-secondary-color-blue-05: #{color-swatches.$blue-05};
+
+  --utah-brand-secondary-color-violet-00: #{color-swatches.$violet-00};
+  --utah-brand-secondary-color-violet-01: #{color-swatches.$violet-01};
+  --utah-brand-secondary-color-violet-02: #{color-swatches.$violet-02};
+  --utah-brand-secondary-color-violet-03: #{color-swatches.$violet-03};
+  --utah-brand-secondary-color-violet-04: #{color-swatches.$violet-04};
+  --utah-brand-secondary-color-violet-05: #{color-swatches.$violet-05};
+
+  --utah-brand-secondary-color-raspberry-00: #{color-swatches.$raspberry-00};
+  --utah-brand-secondary-color-raspberry-01: #{color-swatches.$raspberry-01};
+  --utah-brand-secondary-color-raspberry-02: #{color-swatches.$raspberry-02};
+  --utah-brand-secondary-color-raspberry-03: #{color-swatches.$raspberry-03};
+  --utah-brand-secondary-color-raspberry-04: #{color-swatches.$raspberry-04};
+  --utah-brand-secondary-color-raspberry-05: #{color-swatches.$raspberry-05};
+
+  --utah-brand-secondary-color-red-00: #{color-swatches.$red-00};
+  --utah-brand-secondary-color-red-01: #{color-swatches.$red-01};
+  --utah-brand-secondary-color-red-02: #{color-swatches.$red-02};
+  --utah-brand-secondary-color-red-03: #{color-swatches.$red-03};
+  --utah-brand-secondary-color-red-04: #{color-swatches.$red-04};
+  --utah-brand-secondary-color-red-05: #{color-swatches.$red-05};
+
+  --utah-brand-secondary-color-orange-00: #{color-swatches.$orange-00};
+  --utah-brand-secondary-color-orange-01: #{color-swatches.$orange-01};
+  --utah-brand-secondary-color-orange-02: #{color-swatches.$orange-02};
+  --utah-brand-secondary-color-orange-03: #{color-swatches.$orange-03};
+  --utah-brand-secondary-color-orange-04: #{color-swatches.$orange-04};
+  --utah-brand-secondary-color-orange-05: #{color-swatches.$orange-05};
+
+  --utah-brand-secondary-color-yellow-00: #{color-swatches.$yellow-00};
+  --utah-brand-secondary-color-yellow-01: #{color-swatches.$yellow-01};
+  --utah-brand-secondary-color-yellow-02: #{color-swatches.$yellow-02};
+  --utah-brand-secondary-color-yellow-03: #{color-swatches.$yellow-03};
+  --utah-brand-secondary-color-yellow-04: #{color-swatches.$yellow-04};
+  --utah-brand-secondary-color-yellow-05: #{color-swatches.$yellow-05};
+  /* ######## --------------------------------------------- ######## */
+}
+
 #{class-vars.$base-class} {
   /* color */
   /* ######## Pick these colors to match your desired style ######## */
-  --primary-color: #{color-swatches.$red-rock-05};
-  --primary-color-dark: #{color-swatches.$red-rock-01};
-  --primary-color-light: #{color-swatches.$red-rock-17};
-  --gray-on-primary-color: #474747;
-
-  --secondary-color: #{color-swatches.$celadon-blue-05};
-  --secondary-color-dark: #{color-swatches.$celadon-blue-00};
-  --secondary-color-light: #{color-swatches.$celadon-blue-17};
+  --primary-color: var(--utah-brand-primary-color-blue-medium);
+  --primary-color-dark: var(--utah-brand-primary-color-blue-dark);
+  --primary-color-light: var(--utah-brand-primary-color-blue-light);
+  --gray-on-primary-color: white;
+
+  --secondary-color: var(--utah-brand-secondary-color-teal-03);
+  --secondary-color-dark: var(--utah-brand-secondary-color-teal-05);
+  --secondary-color-light: var(--utah-brand-secondary-color-teal-00);
   --gray-on-secondary-color: #474747;
 
-  --accent-color: #{color-swatches.$electric-yellow-05};
-  --accent-color-dark: #{color-swatches.$electric-yellow-00};
-  --accent-color-light: #{color-swatches.$electric-yellow-17};
+  --accent-color: var(--utah-brand-primary-color-gold-light);
+  --accent-color-dark: var(--utah-brand-primary-color-gold-medium);
+  --accent-color-light: var(--utah-brand-secondary-color-yellow-00);
   --gray-on-accent-color: #474747;
 
   --form-ele-color: #{color-swatches.$azul-05};
   --form-ele-color-light: #{color-swatches.$azul-12};
+  --form-ele-color-dark: #{color-swatches.$azul-02};
   --form-ele-disabled-color: #{color-swatches.$neutral-gray-10};
   --form-ele-placeholder-color: #757575;
 
-  /* ######## --------------------------------------------- ######## */
+  --header-primary-color: var(--primary-color);
+  --header-primary-color-dark: var(--primary-color-dark);
+  --header-title-color: var(--utah-brand-primary-color-blue-dark);
+  --notifications-drawer-color: var(--form-ele-color);
+  --notifications-drawer-color-dark: var(--form-ele-color-dark);
 
   --gray-color: #{color-swatches.$neutral-gray-04};
   --gray-medium-color: #{color-swatches.$neutral-gray-06};

package/css/6-components/base-components/containers/_drawer.scss

@@ -26,7 +26,7 @@
       display: inline-block;
       height: 100%;
       overflow-y: auto;
-      padding: var(--spacing);
+      padding: 0;
 
       &.drawer--right {
         animation: 200ms ease-in-out 100ms right-in both;

package/css/6-components/base-components/containers/_tab-group.scss

@@ -51,6 +51,9 @@
       &--selected {
         display: block;
       }
+      &:focus-visible {
+        outline-offset: 2px;
+      }
     }
     &--vertical {
       display: flex;

package/css/6-components/base-components/footer/_utah-footer.scss

@@ -52,8 +52,11 @@
       height: 100%;
     }
     &__official-site {
-      font-size: var(--font-size-l);
+      font-size: var(--font-size);
       font-weight: var(--font-weight-semi-bold);
+      &-wrapper {
+        line-height: var(--spacing);
+      }
     }
     &__copyright {
       font-size: var(--font-size-s);

package/css/6-components/base-components/forms/_text-input.scss

@@ -58,6 +58,7 @@
       position: relative;
       input[type="text"] {
         border-radius: var(--radius-circle);
+        margin: 0;
         padding: var(--spacing-s) 170px var(--spacing-s) var(--spacing-3xl);
       }
     }

package/css/6-components/base-components/navigation/_main-menu.scss

@@ -5,6 +5,9 @@
   &.main-menu__outer {
     position: relative;
     z-index: 2500;
+    &:hover {
+      z-index: 4000;
+    }
   }
   .main-menu {
     &__wrapper {
@@ -78,7 +81,7 @@
               content: "";
               width: 100%;
               height: var(--spacing-2xs);
-              background: var(--primary-color);
+              background: var(--header-primary-color);
               display: block;
               position: absolute;
               top: 0;

package/css/6-components/base-components/popups/_search-modal.scss

@@ -46,5 +46,13 @@
         font-size: 1.3rem;
       }
     }
+    .button.button--solid.button--primary-color {
+      background-color: var(--header-primary-color);
+      border-color: var(--header-primary-color);
+      &:hover {
+        background-color: var(--header-primary-color-dark);
+        border-color: var(--header-primary-color-dark);
+      }
+    }
   }
 }

package/css/6-components/base-components/widgetsIndicators/_badge.scss

@@ -8,9 +8,9 @@
     border-radius: var(--radius-circle);
     box-sizing: border-box;
     color: white;
-    font-size: var(--font-size-2xs);
+    font-size: var(--font-size-xs);
     font-weight: var(--font-weight-semi-bold);
-    line-height: var(--font-size-2xs);
+    line-height: var(--font-size-xs);
     min-height: var(--spacing-xs);
     min-width: var(--spacing-2xs);
     padding: var(--spacing-3xs) var(--spacing-2xs);

package/css/6-components/project-components/_swatch-list.scss

@@ -4,6 +4,9 @@
 ############     _popup.scss      ############
 */
 #{class-vars.$base-class} {
+  .swatches {
+    display: inline-block;
+  }
   .color-family {
     display: flex;
     margin: 0 0 var(--spacing-2xs) 0;
@@ -30,8 +33,8 @@
       }
     }
     &__swatch {
-      width: 20px;
-      height: 20px;
+      width: 94px;
+      height: 24px;
       border: none;
       border-radius: 0;
       min-height: auto;

package/css/6-components/utah-header/_badge.scss

@@ -6,11 +6,11 @@
     box-sizing: border-box;
     color: white;
     display: flex;
-    font-size: var(--font-size-2xs);
+    font-size: var(--font-size-xs);
     font-weight: var(--font-weight-semi-bold);
     height: 15px;
     justify-content: center;
-    line-height: var(--font-size-2xs);
+    line-height: var(--font-size-xs);
     min-width: 15px;
     padding: 1px 2px;
     position: absolute;

package/css/6-components/utah-header/_logos.scss

@@ -17,9 +17,7 @@
       display: block;
     }
     &-title-wrapper {
-      font-size: var(--font-size-3xl);
-      font-weight: 600;
-      color: var(--gray-medium-color);
+
       display: flex;
       align-items: center;
       flex: 1;
@@ -51,8 +49,13 @@
         }
       }
       &__title {
+        color: var(--header-title-color);
+        font-family: var(--ut-industry-font-family);
+        font-size: 2.7rem;
+        font-weight: 600;
         line-height: .8;
-        color: var(--gray-medium-color);
+        margin-top: .4rem;
+        white-space: nowrap;
       }
     }
   }
@@ -115,8 +118,8 @@
 @media screen and (max-width: #{media-size-vars.$media-size-tablet-portrait}) {
   .utah-design-system {
     .utds {
-      &-title-wrapper {
-        font-size: var(--font-size-xl);
+      &-title-wrapper__title {
+        font-size: 1.9rem;
       }
     }
   }

package/css/6-components/utah-header/_mobile-menu.scss

@@ -24,10 +24,10 @@
   &.utah-design-system {
     transition: opacity 200ms ease;
     position: absolute;
-    top: 106px;
+    top: 126px;
     left: 0;
     width: 100%;
-    height: calc(100% - 106px);
+    height: calc(100% - 126px);
     z-index: 1000;
     background-color: transparent;
     &.main-menu-is-removed {
@@ -82,7 +82,7 @@
         content: "";
         width: 100%;
         height: var(--spacing-2xs);
-        background: var(--primary-color);
+        background: var(--header-primary-color);
         display: block;
         position: absolute;
         bottom: 0;

package/css/6-components/utah-header/_notifications.scss

@@ -0,0 +1,200 @@
+@use "../../1-settings/class-vars";
+@use "../../1-settings/color-swatches.scss";
+
+#{class-vars.$base-class} {
+  .utds {
+    &-notifications-drawer {
+      .drawer__inner {
+        max-width: 350px;
+        color: var(--gray-color);
+        background: var(--gray-light-color);
+      }
+      .drawer__title {
+        background: white;
+        height: 38px;
+        font-size: 1.5rem;
+        display: flex;
+        align-items: center;
+        gap: .5rem;
+        box-sizing: content-box;
+      }
+      .utds-icon-before-alert {
+        font-size: 1.2rem;
+      }
+      &__header-buttons {
+        background: var(--gray-light-color);
+        display: flex;
+        gap: var(--spacing-s);
+        padding: var(--spacing);
+        border-bottom: 1px solid var(--gray-3-1-contrast);
+
+        .button {
+          padding: 0 var(--spacing);
+        }
+      }
+      a.notifications-settings-button {
+        background: var(--gray-color);
+        color: white;
+        fill: white;
+        &:hover {
+          background-color: var(--gray-dark-color);
+          box-shadow: none;
+          color: white;
+          fill: white;
+        }
+        &:focus-visible {
+          outline: 2px solid var(--notifications-drawer-color);
+          outline-offset: 2px;
+          transition: none;
+        }
+      }
+
+      .utds-notify-list-item:focus, .utds-notify-list-item:focus-visible, [tabindex]:focus, [tabindex]:focus-visible {
+        outline: 3px solid var(--notifications-drawer-color);
+        outline-offset: -3px;
+        border: none;
+        border-bottom: 1px solid var(--gray-3-1-contrast);
+        box-shadow: none;
+      }
+
+      .button--primary-color {
+        border-color: var(--notifications-drawer-color);
+        color: var(--notifications-drawer-color);
+        &:hover {
+          background-color: var(--notifications-drawer-color);
+          color: white;
+        }
+      }
+
+      button.button--solid.button--primary-color {
+        background-color: var(--notifications-drawer-color);
+        border-color: var(--notifications-drawer-color);
+        color: white;
+        &:hover {
+          background-color: var(--notifications-drawer-color-dark);
+          border-color: var(--notifications-drawer-color-dark);
+        }
+      }
+    }
+
+    &-notifications__list {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+      height: calc(100vh - (55px + 68px));
+      overflow: auto;
+      overscroll-behavior: contain;
+    }
+
+    &-notify-list-item {
+      border-bottom: 1px solid var(--gray-3-1-contrast);
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-2xs);
+      padding: 0 0 var(--spacing-s) 0;
+      background: white;
+
+      &:focus-visible, &:focus {
+        outline: 3px solid var(--notifications-drawer-color);
+        outline-offset: -3px;
+      }
+      &:hover {
+        background: var(--gray-light-color);
+        cursor: pointer;
+      }
+
+      &__header {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-s);
+      }
+      &__title {
+        font-size: var(--font-size-m);
+        line-height: 1.1;
+        flex: 1;
+        font-weight: bold;
+      }
+      &__status {
+        position: absolute;
+        top: 4px;
+        left: 0;
+        height: calc(100% - 4px);
+        width: 6px;
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+        background: var(--notifications-drawer-color);
+        &--is-read {
+          background: transparent;
+          font-weight: normal;
+        }
+      }
+      &__icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: var(--spacing-s) 0 var(--spacing-s) var(--spacing);
+        span {
+          font-size: 1.5rem;
+          &[class*='error'] {
+            color: color-swatches.$red-rock-04;
+          }
+          &[class*='clock'] {
+            color: color-swatches.$aspen-green-04;
+          }
+          &[class*='info'] {
+            color: color-swatches.$azul-04;
+          }
+          &[class*='help'] {
+            color: color-swatches.$neutral-gray-07;
+          }
+          &[class*='account'] {
+            color: color-swatches.$azul-04;
+          }
+          &[class*='utds-icon-before']::before {
+            margin: 0;
+          }
+        }
+      }
+      &__time {
+        padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
+        color: var(--gray-medium-color);
+      }
+      &__brand-wrapper {
+        display: flex;
+        height: 34px;
+      }
+      &__brand {
+        max-height: 35px;
+        min-width: 0;
+      }
+      &__message {
+        padding: 0 var(--spacing);
+        line-height: 1.3;
+      }
+      &__footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--spacing-xs) var(--spacing) 0 var(--spacing);
+
+        .utds-notify-list-item__link {
+          flex: 0 0 auto;
+        }
+      }
+
+      &:last-of-type {
+        border-bottom: 1px solid var(--gray-3-1-contrast);
+      }
+
+      &--busy-card {
+        padding: 3rem 1rem;
+      }
+
+      &--is-read {
+        background-color: var(--gray-light-color);
+      }
+    }
+  }
+}