@utahdts/utah-design-system 1.17.0 → 2.0.0

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

@@ -39,6 +39,7 @@ variables and settings
   --form-ele-color: #{color-swatches.$azul-05};
   --form-ele-color-light: #{color-swatches.$azul-12};
   --form-ele-disabled-color: #{color-swatches.$neutral-gray-10};
+  --form-ele-placeholder-color: #757575;
 
   /* ######## --------------------------------------------- ######## */
 

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

@@ -11,7 +11,6 @@ elemental html: h1, h2, h3, ul, li, etc.
   line-height: 1.4;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: white;
   color: var(--gray-color);
 
   h1 {

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

@@ -49,6 +49,7 @@ component specific, BEM (Block, Element, Modifier)
 @use "base-components/text/pre-code";
 @use "base-components/forms/input";
 @use "base-components/widgetsIndicators/badge";
+@use "base-components/widgetsIndicators/skeleton";
 @use "base-components/widgetsIndicators/spinner";
 @use "base-components/tablesAndLists/table";
 @use "base-components/templates/on-this-page";

package/css/6-components/base-components/buttons/_tag.scss

@@ -9,16 +9,59 @@
     min-height: var(--form-ele-small);
     line-height: 1;
 
+    &--primary-color {
+      background-color: var(--primary-color);
+      color: white;
+      fill: white;
+    }
+    &--primary-color-light {
+      background-color: var(--primary-color-light);
+    }
+    &--secondary-color {
+      background-color: var(--secondary-color);
+      color: white;
+      fill: white;
+    }
+    &--secondary-color-light {
+      background-color: var(--secondary-color-light);
+    }
+    &--accent-color {
+      background-color: var(--accent-color);
+      color: white;
+      fill: white;
+    }
+    &--accent-color-light {
+      background-color: var(--accent-color-light);
+    }
+
+    &--selected {
+      background-color: var(--gray-color);
+      color: white;
+      fill: white;
+
+      &.tag--primary-color {
+        background-color: var(--primary-color);
+        border: none;
+      }
+      &.tag--secondary-color {
+        background-color: var(--secondary-color);
+        border: none;
+      }
+      &.tag--accent-color {
+        background-color: var(--accent-color);
+        border: none;
+      }
+    }
+
     &__button[type="button"] {
       border: 1px solid var(--gray-medium-color);
       padding: var(--spacing-2xs) var(--spacing-xs);
       border-radius: var(--radius-small);
-      background-color: var(--gray-light-color);
       height: 100%;
       line-height: 1.4;
 
       &.tag--selected {
-        background-color: var(--gray-color);
+        background-color: var(--form-ele-color);
         color: white;
         fill: white;
       }

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

@@ -48,6 +48,7 @@
       z-index: 2000;
       max-height: clamp(300px, 40vh, 40vh);
       overflow: auto;
+      width: max-content;
     }
     &__option {
       padding: var(--spacing-2xs) var(--spacing-s);

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

@@ -4,7 +4,6 @@
   .info-box {
     display: flex;
     align-items: center;
-    min-height: var(--form-ele-medium);
     background: white;
     position: relative;
     border-radius: var(--radius-small);
@@ -25,7 +24,17 @@
     &__content {
       display: flex;
       align-items: center;
-      padding: 0 var(--spacing-s);
+      padding: var(--spacing-xs) var(--spacing-s);
+    }
+
+    &__gray {
+      background-color: var(--gray-light-color);
+    }
+
+    &__primary {
+      &::before {
+        background-color: var(--primary-color);
+      }
     }
 
     &__secondary {
@@ -33,5 +42,29 @@
         background-color: var(--secondary-color);
       }
     }
+
+    &__info {
+      &::before {
+        background-color: var(--info-color);
+      }
+    }
+
+    &__danger {
+      &::before {
+        background-color: var(--danger-color);
+      }
+    }
+
+    &__warning {
+      &::before {
+        background-color: var(--warning-color);
+      }
+    }
+
+    &__success {
+      &::before {
+        background-color: var(--success-color);
+      }
+    }
   }
 }

package/css/6-components/base-components/forms/_switch.scss

@@ -50,17 +50,15 @@
         min-height: var(--form-ele-small4x);
       }
 
-      .switch__slider {
-        height: var(--form-ele-small4x);
-        width: var(--form-ele-small4x);
-      }
-
       .switch__inner-label {
         font-size: var(--font-size-xs);
         height: var(--form-ele-small4x);
         line-height: var(--form-ele-small4x);
       }
       .switch__slider {
+        height: var(--form-ele-small4x);
+        width: var(--form-ele-small4x);
+
         [class*="utds-icon-after-"]::after,
         [class*="utds-icon-before-"]::before {
           font-size: 0.5rem;
@@ -75,9 +73,7 @@
       .switch__slider {
         height: var(--form-ele-small1x);
         width: var(--form-ele-small1x);
-      }
 
-      .switch__slider {
         [class*="utds-icon-after-"]::after,
         [class*="utds-icon-before-"]::before {
           font-size: 1rem;
@@ -161,55 +157,4 @@
       }
     }
   }
-
-  .switch-old {
-    display: block;
-    box-sizing: border-box;
-    border: none;
-    background: none;
-    padding: 0;
-    position: relative;
-    min-height: 20px;
-  }
-
-  .switch-old:focus,
-  .switch-old:hover {
-    outline: none;
-  }
-
-  .switch-old:focus::before,
-  .switch-old:hover::before {
-    box-shadow: 0 0 0.5em color-swatches.$warm-gray-02;
-  }
-
-  .switch-old::before,
-  .switch-old::after {
-    content: "";
-    position: absolute;
-    height: 16px;
-    transition: all 0.25s ease;
-  }
-
-  .switch-old::before {
-    left: 0;
-    top: 0.2em;
-    width: 32px;
-    border: 1px solid color-swatches.$warm-gray-08;
-    background: color-swatches.$warm-gray-08;
-    border-radius: 16px;
-    background-color: color-swatches.$aspen-green-08;
-    border-color: color-swatches.$aspen-green-08;
-  }
-
-  .switch-old::after {
-    top: 4px;
-    background-color: #ffffff;
-    border-radius: 50%;
-    width: 14px;
-    height: 14px;
-    border: 1px solid color-swatches.$warm-gray-08;
-    left: 16px;
-    border-color: color-swatches.$aspen-green-08;
-    color: color-swatches.$aspen-green-08;
-  }
 }

package/css/6-components/base-components/tablesAndLists/_table.scss

@@ -224,6 +224,73 @@
           th {
             background-color: var(--gray-light-color);
             padding: var(--spacing-s) var(--spacing-2xs);
+            &.table-header__cell--filter-date {
+              & > div:not(.table-filter-date__popup) {
+                button{
+                  &:not(.text-input__clear-button) {
+                    border-width: 1px;
+                    box-shadow: var(--hover-gray-color) 0 0 0 0;
+                    transition: box-shadow var(--timing-xquick) ease-in-out;
+                    white-space: nowrap;
+                    padding-left: var(--spacing-2xs);
+                    width: 100%;
+                    &:hover {
+                      box-shadow: var(--hover-gray-color) 0 0 0 5px;
+                      border-color: black;
+                      background: white;
+                      color: var(--gray-color);
+                    }
+
+                    & + .date-input__calendar-icon {
+                      pointer-events: none;
+                      margin-right: var(--spacing-2xs);
+                    }
+
+                    &.table-header__cell--filter-date--is-empty {
+                      color: var(--form-ele-placeholder-color);
+                      justify-content: flex-start;
+                      padding-left: var(--spacing-xs);
+                      &:hover {
+                        color: var(--form-ele-placeholder-color);
+                      }
+                    }
+                  }
+                  &.text-input__clear-button {
+                    margin-top: var(--spacing-3xs);
+                  }
+
+                  .date-input__icon-static {
+                    &::before {
+                      font-size: .75rem;
+                      margin: 0;
+                    }
+                  }
+                }
+              }
+
+              .table-filter-date__popup {
+                .popup__close-button {
+                  position: absolute;
+                  right: 0;
+                  top: 0;
+                }
+              }
+
+              .table-filter-date-popup__selected-date-chiclets {
+                display: flex;
+                flex-direction: row;
+                margin: 0.5rem 0 -0.5rem;
+                padding: 0 0.25rem;
+                .table-filter-date-popup__selected-date-chiclet {
+                  flex: 1;
+                  &--selected {
+                    height: 0.25rem;
+                    background-color: var(--primary-color);
+                    border-radius: 13px 13px 0 0;
+                  }
+                }
+              }
+            }
           }
           th:first-child {
             border-top-left-radius: var(--radius-medium);
@@ -234,9 +301,16 @@
             border-top-right-radius: var(--radius-medium);
             border-bottom-right-radius: var(--radius-medium);
             padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-2xs);
+
+            & > div:not(.table-filter-date__popup) button:not(.text-input__clear-button) + .date-input__calendar-icon,
+            & > div:not(.table-filter-date__popup) button.text-input__clear-button {
+              margin-top: 0;
+              margin-right: calc(var(--spacing-s) + var(--spacing-2xs));
+            }
           }
-          .input-wrapper {
-            margin: 0;
+
+          // target just the filter inputs in the `th`; nested popups (like date range filter) still show their labels
+          th > .input-wrapper {
             label {
               /* visually hidden */
               border: 0;
@@ -248,6 +322,9 @@
               position: absolute;
               width: 1px;
             }
+          }
+          .input-wrapper {
+            margin: 0;
             input[type="text"] {
               border-radius: var(--radius-circle);
             }

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

@@ -0,0 +1,28 @@
+@use "../../../1-settings/color-swatches";
+@use "../../../1-settings/class-vars";
+@use "../../../1-settings/font-stuff";
+@use "../../../7-utilities/animation";
+
+#{class-vars.$base-class} {
+  .skeleton {
+    animation: skeleton 2s ease-in-out .5s infinite;
+    background-color: var(--gray-3-1-contrast);
+    border-radius: var(--radius-small1x);
+
+    &--rectangle {
+      min-width: calc(2 * var(--spacing-6xl));
+      min-height: var(--spacing-4xl);
+    }
+
+    &--circle {
+      min-height: var(--spacing-4xl);
+      min-width: var(--spacing-4xl);
+      border-radius: var(--radius-circle);
+    }
+
+    &--line {
+      min-width: calc(2 * var(--spacing-6xl));
+      min-height: var(--spacing-l);
+    }
+  }
+}

package/css/7-utilities/_animation.scss

@@ -64,4 +64,18 @@
       transform: translate(0, 0);
     }
   }
+
+  @keyframes skeleton {
+    0% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0.4;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
 }

package/css/7-utilities/_utilities-index.scss

@@ -18,6 +18,14 @@ utility classes, atomic css
     height: 100%;
   }
 
+  .auto-width {
+    min-width: auto;
+  }
+
+  .auto-height {
+    min-height: auto;
+  }
+
   .visually-hidden, &.visually-hidden {
     border: 0;
     clip: rect(0 0 0 0);
@@ -139,4 +147,11 @@ utility classes, atomic css
   .whitespace-no-wrap {
     white-space: nowrap;
   }
+
+  /* ----- Radius ---- */
+  .radius-xs { border-radius: var(--radius-small1x); }
+  .radius-s { border-radius: var(--radius-small); }
+  .radius { border-radius: var(--radius-medium); }
+  .radius-l { border-radius: var(--radius-large); }
+  .radius-circle { border-radius: var(--radius-circle); }
 }