@utahdts/utah-design-system 1.14.3 → 1.15.1

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

@@ -28,25 +28,25 @@ Font size variables
   --font-weight-semi-bold: 600;
   --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);     }
-.font-size-m   { font-size: var(--font-size-m);   }
-.font-size-l   { font-size: var(--font-size-l);   }
-.font-size-xl  { font-size: var(--font-size-xl);  }
-.font-size-2xl { font-size: var(--font-size-2xl); }
-.font-size-3xl { font-size: var(--font-size-3xl); }
-.font-size-4xl { font-size: var(--font-size-4xl); }
-.font-size-5xl { font-size: var(--font-size-5xl); }
-.font-size-6xl { font-size: var(--font-size-6xl); }
-.font-size-7xl { font-size: var(--font-size-7xl); }
+  .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);     }
+  .font-size-m   { font-size: var(--font-size-m);   }
+  .font-size-l   { font-size: var(--font-size-l);   }
+  .font-size-xl  { font-size: var(--font-size-xl);  }
+  .font-size-2xl { font-size: var(--font-size-2xl); }
+  .font-size-3xl { font-size: var(--font-size-3xl); }
+  .font-size-4xl { font-size: var(--font-size-4xl); }
+  .font-size-5xl { font-size: var(--font-size-5xl); }
+  .font-size-6xl { font-size: var(--font-size-6xl); }
+  .font-size-7xl { font-size: var(--font-size-7xl); }
 
-.font-extra-light { font-weight: var(--font-weight-extra-light); }
-.font-light { font-weight: var(--font-weight-light); }
-.font-normal { font-weight: var(--font-weight-normal); }
-.font-semi-bold { font-weight: var(--font-weight-semi-bold); }
-.font-bold { font-weight: var(--font-weight-bold); }
-.font-black { font-weight: var(--font-weight-black); }
+  .font-extra-light { font-weight: var(--font-weight-extra-light); }
+  .font-light { font-weight: var(--font-weight-light); }
+  .font-normal { font-weight: var(--font-weight-normal); }
+  .font-semi-bold { font-weight: var(--font-weight-semi-bold); }
+  .font-bold { font-weight: var(--font-weight-bold); }
+  .font-black { font-weight: var(--font-weight-black); }
+}

package/css/1-settings/_grid.scss

@@ -10,30 +10,30 @@ Grid variables
   --grid-fixed-form: calc(var(--grid-fixed) / 2.3);
   --grid-fixed-third: calc(var(--grid-fixed) / 3);
   --grid-fixed-fourth: calc(var(--grid-fixed) / 4);
-}
-
-.grid-wrapper {
-  display: flex;
-  justify-content: center;
-}
-.grid-fixed {
-  max-width: var(--grid-fixed);
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-l);
 
-  &--2col {
-    grid-template-columns: 1fr 1fr;
-  }
-  &--3col {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-  &--4col {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+  .grid-wrapper {
+    display: flex;
+    justify-content: center;
   }
+  .grid-fixed {
+    max-width: var(--grid-fixed);
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--spacing-l);
+
+    &--2col {
+      grid-template-columns: 1fr 1fr;
+    }
+    &--3col {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+    &--4col {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
 
-  .grid-column-span-2 {
-    grid-column: span 2;
+    .grid-column-span-2 {
+      grid-column: span 2;
+    }
   }
 }

package/css/1-settings/_icons.scss

@@ -274,4 +274,34 @@
     .utds-icon-after-trash::after {
       content: "\0073";
     }
+
+    .utds-icon-before-calendar::before,
+    .utds-icon-after-calendar::after {
+      content: "\0074";
+    }
+
+    .utds-icon-before-clock::before,
+    .utds-icon-after-clock::after {
+      content: "\0075";
+    }
+
+    .utds-icon-before-double-arrow-up::before,
+    .utds-icon-after-double-arrow-up::after {
+      content: "\0076";
+    }
+
+    .utds-icon-before-double-arrow-right::before,
+    .utds-icon-after-double-arrow-right::after {
+      content: "\0077";
+    }
+
+    .utds-icon-before-double-arrow-down::before,
+    .utds-icon-after-double-arrow-down::after {
+      content: "\0078";
+    }
+
+    .utds-icon-before-double-arrow-left::before,
+    .utds-icon-after-double-arrow-left::after {
+      content: "\0079";
+    }
 }

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

@@ -37,7 +37,7 @@ variables and settings
   --gray-on-accent-color: #474747;
 
   --form-ele-color: #{color-swatches.$azul-05};
-  --form-ele-color-light: #{color-swatches.$azul-10};
+  --form-ele-color-light: #{color-swatches.$azul-12};
   --form-ele-disabled-color: #{color-swatches.$neutral-gray-10};
 
   /* ######## --------------------------------------------- ######## */

package/css/4-elements/_elements-index.scss

@@ -88,15 +88,6 @@ elemental html: h1, h2, h3, ul, li, etc.
     }
   }
 
-  .external-link::after {
-    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 18.1143 18.1138'%3E%3Cg%3E%3Cpath d='m15.0996,18.1138H1c-.5527,0-1-.4478-1-1V3.0142c0-.5522.4473-1,1-1h7.043v2H2v12.0996h12.0996v-6.043h2v7.043c0,.5522-.4473,1-1,1Z' style='fill: var(--primary-color);'/%3E%3Crect x='6.5977' y='4.5318' width='11.9697' height='1.9998' transform='translate(-.2262 10.5174) rotate(-45)' style='fill: currentColor;'/%3E%3Cpolygon points='18.1143 8.0425 16.1143 8.0425 16.1143 2 10.0713 2 10.0713 0 18.1143 0 18.1143 8.0425' style='fill: currentColor;'/%3E%3C/g%3E%3C/svg%3E%0A");
-    height: 0.7rem;
-    width: 0.7rem;
-    background-position: top left;
-
-    display: inline-block;
-  }
-
   dialog {
     border: none;
   }

package/css/6-components/_components-index.scss

@@ -18,6 +18,8 @@ component specific, BEM (Block, Element, Modifier)
 @use "base-components/forms/text-input";
 @use "base-components/forms/combo-box-input";
 @use "base-components/forms/multi-select-input";
+@use "base-components/forms/date-input";
+@use "base-components/forms/calendar-input";
 @use "base-components/forms/character-count";
 @use "base-components/forms/checkbox";
 @use "base-components/forms/select-input";
@@ -25,6 +27,7 @@ component specific, BEM (Block, Element, Modifier)
 @use "base-components/forms/radio-button";
 @use "base-components/forms/switch";
 @use "base-components/forms/fieldset";
+@use "base-components/forms/file-input";
 @use "base-components/navigation/main-menu";
 @use "base-components/navigation/menu-item";
 @use "base-components/navigation/pagination";

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

@@ -0,0 +1,96 @@
+@use "../../../1-settings/class-vars";
+@use "../../../2-tools/tools-index";
+
+#{class-vars.$base-class} {
+  .calendar-input {
+    &__grid {
+      display: grid;
+      grid-auto-rows: 1fr;
+      gap: 2px;
+      border-top: 1px solid var(--gray-3-1-contrast);
+      border-bottom: 1px solid var(--gray-3-1-contrast);
+      background: white;
+    }
+    &__row {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+      gap: 2px;
+    }
+    &__cell-header {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    &__cell {
+      border: none;
+      padding: 0;
+      min-height: 26px;
+      min-width: 26px;
+      justify-self: center;
+      background: none;
+
+      &--focused {
+        background: var(--form-ele-color-light);
+        color: var(--gray-dark-color);
+      }
+
+      &--selected {
+        background: var(--form-ele-color);
+        color: white;
+      }
+
+      &--today {
+        border: 2px solid var(--form-ele-color-light);
+      }
+
+      &:focus {
+        @include tools-index.form-ele-focus-appearance;
+      }
+
+      &--next-month, &--previous-month {
+        color: var(--gray-3-1-contrast);
+      }
+
+    }
+
+    &__controls {
+      background: var(--gray-light-color);
+      padding: var(--spacing-2xs) 0 ;
+      &-month, &-year {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [class*="utds-icon-before-"]:before {
+        font-size: .8rem;
+        color: var(--form-ele-color);
+      }
+      [class*="utds-icon-before-double-arrow"]:before {
+        font-size: .9rem;
+      }
+    }
+    &__month {
+      min-width: 85px;
+      text-align: center;
+    }
+    &__year {
+      min-width: 45px;
+      text-align: center;
+    }
+
+    &__today {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--spacing-xs) 0;
+      background: var(--gray-light-color);
+    }
+  }
+  // if the calendar input doesn't have a today button don't draw a border on the bottom of the grid.
+  .date-input__popup {
+    .calendar-input__grid:not(:has(+ .calendar-input__today)) {
+      border-bottom: 0;
+    }
+  }
+}

package/css/6-components/base-components/forms/_combo-box-input.scss

@@ -59,6 +59,12 @@
         background: var(--hover-gray-color);
         color: black;
       }
+      &--disabled {
+        &:hover {
+          color: var(--gray-3-1-contrast);
+        }
+        color: var(--gray-3-1-contrast);
+      }
       @include tools-index.form-ele-focus;
       &:focus-visible {
         outline-offset: -2px;

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

@@ -0,0 +1,59 @@
+@use "../../../1-settings/class-vars";
+@use "../../../2-tools/tools-index";
+
+#{class-vars.$base-class} {
+  .date-input {
+    &[type="text"] {
+      padding: 0 var(--spacing-xl) 0 var(--spacing-xs);
+      &.text-input--clear-icon-visible {
+        padding: 0 var(--spacing-4xl) 0 var(--spacing-xs);
+      }
+    }
+    &__calendar-icon {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: var(--spacing-2xs);
+      font-weight: var(--font-weight-normal);
+      [class*="utds-icon-before-"]::before {
+        font-size: 1.1rem;
+        margin: 0;
+      }
+      &--is-disabled {
+        color: var(--form-ele-disabled-color);
+      }
+    }
+    &__icon-static {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: var(--form-ele-small);
+      min-width: var(--form-ele-small);
+    }
+    &__inner-wrapper {
+      .text-input__clear-button {
+        right: var(--spacing-xl);
+      }
+      .input-wrapper--text-input {
+        margin: 0;
+      }
+      .tooltip__wrapper {
+        z-index: 2001;
+      }
+    }
+    &__popup {
+      background: white;
+      border-radius: var(--radius-small);
+      border: 1px solid var(--gray-3-1-contrast);
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      z-index: 2000;
+      overflow: hidden;
+
+      .input-wrapper--calendar-input {
+        margin: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,87 @@
+@use "../../../1-settings/class-vars";
+@use "../../../1-settings/color-swatches";
+@use "../../../2-tools/tools-index";
+
+#{class-vars.$base-class} {
+  .file-input {
+    &__box {
+      border: 1px dashed var(--gray-color);
+      position: relative;
+      background: white;
+      text-align: center;
+
+      &--dragged, &--dragged > div {
+        background: var(--form-ele-color-light);
+      }
+
+      &--disabled > div {
+        background: var(--disabled-gray);
+      }
+
+      input[type="file"] {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        text-indent: -9999px;
+        cursor: pointer;
+        transition: box-shadow var(--timing-xquick) ease-in-out;
+        z-index: 1;
+
+        &:disabled {
+          cursor: not-allowed;
+        }
+
+        @include tools-index.form-ele-hover-medium;
+        @include tools-index.form-ele-focus;
+      }
+    }
+    &__instructions {
+      padding: var(--spacing-l) var(--spacing);
+      pointer-events: none;
+      position: relative;
+      z-index: 3;
+    }
+
+    &__file-selected {
+      background-color: #{color-swatches.$azul-16};
+      pointer-events: none;
+      position: relative;
+      text-align: left;
+      z-index: 3;
+
+      > div {
+        padding: var(--spacing-s) var(--spacing);
+      }
+
+      hr {
+        margin: 0;
+        border-color: white;
+      }
+    }
+
+    &__file-list {
+      display: flex;
+
+      .tag__wrapper {
+        background: white;
+        pointer-events: all;
+
+        &:not(:last-child) {
+          margin: 0 var(--spacing) var(--spacing) 0;
+        }
+      }
+    }
+
+    &__safari {
+      background: white;
+      height: 100%;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 2;
+    }
+  }
+}

package/css/6-components/base-components/forms/_info-box.scss

@@ -17,14 +17,21 @@
       height: 100%;
       border-top-left-radius: var(--radius-small);
       border-bottom-left-radius: var(--radius-small);
-      background-color: var(--secondary-color);
+      background-color: var(--gray-color);
       position: absolute;
       left: 0;
     }
+
     &__content {
       display: flex;
       align-items: center;
       padding: 0 var(--spacing-s);
     }
+
+    &__secondary {
+      &::before {
+        background-color: var(--secondary-color);
+      }
+    }
   }
 }

package/css/7-utilities/_animation.scss

@@ -1,63 +1,67 @@
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
+@use "../1-settings/class-vars";
 
-@keyframes drop-in {
-  0% {
-    opacity: 0;
-    transform: translate(-50%, -100px);
+#{class-vars.$base-class} {
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
-  100% {
-    opacity: 1;
-    transform: translate(-50%, 0);
-  }
-}
 
-@keyframes pop-in {
-  0% {
-    opacity: 0;
-    transform: scale(0.7);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
+  @keyframes drop-in {
+    0% {
+      opacity: 0;
+      transform: translate(-50%, -100px);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(-50%, 0);
+    }
   }
-}
 
-@keyframes pop-in-center {
-  0% {
-    opacity: 0;
-    transform: scale(0.7) translateX(-50%);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1) translateX(-50%);
+  @keyframes pop-in {
+    0% {
+      opacity: 0;
+      transform: scale(0.7);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
-}
 
-@keyframes left-in {
-  0% {
-    opacity: 0;
-    transform: translate(-100%, 0);
+  @keyframes pop-in-center {
+    0% {
+      opacity: 0;
+      transform: scale(0.7) translateX(-50%);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1) translateX(-50%);
+    }
   }
-  100% {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
-}
 
-@keyframes right-in {
-  0% {
-    opacity: 0;
-    transform: translate(100%, 0);
+  @keyframes left-in {
+    0% {
+      opacity: 0;
+      transform: translate(-100%, 0);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
   }
-  100% {
-    opacity: 1;
-    transform: translate(0, 0);
+
+  @keyframes right-in {
+    0% {
+      opacity: 0;
+      transform: translate(100%, 0);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
   }
 }