@utahdts/utah-design-system 4.3.0 → 5.0.1

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,11 @@
   &.main-menu__outer {
     position: relative;
     z-index: 2500;
+
+    // Only elevate z-index if a child popup is currently active/visible
+    &:has(.popup__wrapper:not(.popup__wrapper--hidden)) {
+      z-index: 4000;
+    }
   }
   .main-menu {
     &__wrapper {
@@ -15,7 +20,7 @@
       padding: 0 var(--spacing-l) 0 var(--spacing-xs);
 
       .utds-icon-before-search::before {
-       font-size: 1.1rem;
+        font-size: 1.1rem;
       }
     }
 
@@ -49,7 +54,7 @@
           padding: var(--spacing-3xs) var(--spacing);
           margin: var(--spacing-xs) 0;
           border-radius: 999px;
-          transition: all var(--timing-quick) ease-in-out;
+          transition: box-shadow var(--timing-quick) ease-in-out;
           position: relative;
           box-sizing: border-box;
           font-size: var(--font-size);
@@ -78,7 +83,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/navigation/_vertical-menu.scss

@@ -75,6 +75,7 @@
       padding: var(--spacing-2xs) var(--spacing);
       text-align: left;
       text-decoration: none;
+      transition: background-color var(--timing-quick) ease-in-out;
       width: 100%;
       position: relative;
 

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/_citizen-experience.scss

@@ -1,3 +1,5 @@
+@use "../../1-settings/class-vars";
+
 .utds-citizen-experience-wrapper {
   display: flex;
   justify-content: flex-end;
@@ -10,4 +12,18 @@
   .main-menu__search {
     margin-right: var(--spacing);
   }
+
+}
+
+#{class-vars.$base-class} {
+  .utds-utah-id__button {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    padding: 0 var(--spacing);
+  }
 }
+

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,10 +118,23 @@
 @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;
       }
     }
   }
 }
 
+@media screen and (max-width: #{media-size-vars.$media-size-mobile}) {
+  .utah-design-system {
+    .utds {
+      &-title-wrapper__logo {
+        flex: 1 0 auto;
+      }
+      &-title-wrapper__title {
+        flex: 1 1 auto;
+        white-space: normal;
+      }
+    }
+  }
+}

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;