@utahdts/utah-design-system 0.5.4 → 0.6.0

package/css/1-settings/_icons.scss

@@ -1,5 +1,8 @@
 @use "../1-settings/class-vars";
 
+// icon google font settings:
+// fill: 0, weight 400, grade 0, optical size: 20px
+
 /* Generated by Glyphter (http://www.glyphter.com) on  Fri Jan 20 2023*/
 @font-face {
   font-family: 'utah design system';
@@ -32,7 +35,7 @@
     font-style: normal;
     font-weight: normal;
     line-height: 1;
-    -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     margin-right: var(--spacing-2xs);
   }
@@ -216,4 +219,9 @@
   .utds-icon-after-account::after {
     content: '\006a';
   }
+
+  .utds-icon-before-lock::before,
+  .utds-icon-after-lock::after {
+    content: '\006b';
+  }
 }

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

@@ -73,6 +73,9 @@ elemental html: h1, h2, h3, ul, li, etc.
         overflow-x: scroll;
         box-sizing: border-box;
       }
+      &--padded {
+        padding: 0 var(--spacing);
+      }
     }
     .pre-block__overflow-content {
       width: max-content;

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

@@ -1,67 +1,70 @@
 @use "../../../2-tools/tools-index";
+@use "../../../1-settings/class-vars";
 
-input[type="checkbox"] {
-  width: var(--form-checkbox-medium);
-  height: var(--form-checkbox-medium);
-  position: relative;
-  border-radius: var(--radius-small1x);
-  border: 1px solid var(--gray-color);
-  background-color: white;
-  box-sizing: border-box;
-  appearance: none;
+#{class-vars.$base-class} {
+  input[type="checkbox"] {
+    width: var(--form-checkbox-medium);
+    height: var(--form-checkbox-medium);
+    position: relative;
+    border-radius: var(--radius-small1x);
+    border: 1px solid var(--gray-color);
+    background-color: white;
+    box-sizing: border-box;
+    appearance: none;
 
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    border-radius: var(--radius-circle);
-    z-index: -1;
-    @include tools-index.form-ele-hover-base;
-  }
-  &:hover {
-    border-color: black;
     &::after {
-      @include tools-index.form-ele-hover-hovered(7px);
+      content: '';
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      border-radius: var(--radius-circle);
+      z-index: -1;
+      @include tools-index.form-ele-hover-base;
+    }
+    &:hover {
+      border-color: black;
+      &::after {
+        @include tools-index.form-ele-hover-hovered(7px);
+      }
     }
-  }
 
-  &::before {
-    content: '';
-    display: block;
-    background: var(--form-ele-color);
-    background-image: var(--icon-check-mark-light);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 30%;
-    border-radius: var(--radius-small1x);
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-  }
-  &:checked {
-    border-width: 0;
-    background-color: var(--form-ele-color);
     &::before {
-      opacity: 1;
-      background-size: 80%;
-      transition: background-size var(--timing-quick) ease, opacity var(--timing-quick) ease;
+      content: '';
+      display: block;
+      background: var(--form-ele-color);
+      background-image: var(--icon-check-mark-light);
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: 30%;
+      border-radius: var(--radius-small1x);
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+    }
+    &:checked {
+      border-width: 0;
+      background-color: var(--form-ele-color);
+      &::before {
+        opacity: 1;
+        background-size: 80%;
+        transition: background-size var(--timing-quick) ease, opacity var(--timing-quick) ease;
+      }
     }
   }
-}
-.input-wrapper {
-  &--checkbox {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    align-items: center;
-    position: relative;
-    z-index: 1;
-  }
-  label {
-    padding: 0 0 0 var(--spacing-2xs);
+  .input-wrapper {
+    &--checkbox {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: flex-end;
+      align-items: center;
+      position: relative;
+      z-index: 1;
+    }
+    label {
+      padding: 0 0 0 var(--spacing-2xs);
+    }
   }
 }

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

@@ -1,23 +1,27 @@
-.info-box {
-  display: flex;
-  align-items: center;
-  min-height: var(--form-ele-medium);
-  background: white;
-  position: relative;
-  border-radius: var(--radius-small);
+@use "../../../1-settings/class-vars";
 
-  &::before {
-    content: '';
-    display: block;
-    width: var(--spacing-xs);
-    height: 100%;
-    border-top-left-radius: var(--radius-small);
-    border-bottom-left-radius: var(--radius-small);
-    background-color: var(--secondary-color);
-  }
-  &__content {
+#{class-vars.$base-class} {
+  .info-box {
     display: flex;
     align-items: center;
-    padding: 0 var(--spacing-s);
+    min-height: var(--form-ele-medium);
+    background: white;
+    position: relative;
+    border-radius: var(--radius-small);
+
+    &::before {
+      content: '';
+      display: block;
+      width: var(--spacing-xs);
+      height: 100%;
+      border-top-left-radius: var(--radius-small);
+      border-bottom-left-radius: var(--radius-small);
+      background-color: var(--secondary-color);
+    }
+    &__content {
+      display: flex;
+      align-items: center;
+      padding: 0 var(--spacing-s);
+    }
   }
 }

package/css/6-components/base-components/forms/_input-wrapper.scss

@@ -1,9 +1,13 @@
-.input-wrapper {
-  margin: 0 0 var(--spacing-s) 0;
-  .form.form--stacked & {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-    align-items: flex-start;
+@use "../../../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  .input-wrapper {
+    margin: 0 0 var(--spacing-s) 0;
+    .form.form--stacked & {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+      align-items: flex-start;
+    }
   }
 }

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

@@ -1,10 +1,14 @@
-input.input,
-.input {
-  &--height-small {
-    min-height: var(--form-ele-small);
-  }
+@use "../../../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  input.input,
+  .input {
+    &--height-small {
+      min-height: var(--form-ele-small);
+    }
 
-  &--height-small1x {
-    min-height: var(--form-ele-small1x);
+    &--height-small1x {
+      min-height: var(--form-ele-small1x);
+    }
   }
 }

package/css/6-components/base-components/forms/_radio-button.scss

@@ -1,60 +1,52 @@
-// label {
-//   margin-right: var(--spacing);
-// }
-input[type="radio"] {
-  appearance: none;
-  border-radius: var(--radius-circle);
-  border: 1px solid var(--gray-color);
-  width: var(--form-ele-small1x);
-  height: var(--form-ele-small1x);
-  position: relative;
-  top: var(--spacing-2xs);
-  margin-right: var(--spacing-xs);
-  &::before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
+@use "../../../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  input[type="radio"] {
+    appearance: none;
     border-radius: var(--radius-circle);
-    box-shadow: rgba(0,0,0,0.2) 0px 0px 0px 0px;
-    transition: box-shadow var(--timing-xquick) ease-in-out;
-  }
-  &:hover::before {
-    box-shadow: rgba(0,0,0,0.2) 0px 0px 0px 7px;
-  }
-  &:checked {
-    background-color: var(--secondary-color);
-    border: 1px solid var(--secondary-color);
-    &::after {
+    border: 1px solid var(--gray-color);
+    width: var(--form-ele-small1x);
+    height: var(--form-ele-small1x);
+    position: relative;
+    top: var(--spacing-2xs);
+    margin-right: var(--spacing-xs);
+    &::before {
       content: '';
       display: block;
-      width: 50%;
-      height: 50%;
+      width: 100%;
+      height: 100%;
       border-radius: var(--radius-circle);
-      background-color: white;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
+      box-shadow: rgba(0,0,0,0.2) 0px 0px 0px 0px;
+      transition: box-shadow var(--timing-xquick) ease-in-out;
+    }
+    &:hover::before {
+      box-shadow: rgba(0,0,0,0.2) 0px 0px 0px 7px;
+    }
+    &:checked {
+      background-color: var(--secondary-color);
+      border: 1px solid var(--secondary-color);
+      &::after {
+        content: '';
+        display: block;
+        width: 50%;
+        height: 50%;
+        border-radius: var(--radius-circle);
+        background-color: white;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
     }
   }
-  // accent-color: var(--secondary-color);
-}
 
 
-.checkbox:hover ~ span:first-of-type {
-  box-shadow: rgb(240 241 242) 0px 0px 0px 7px;
-}
+  .checkbox:hover ~ span:first-of-type {
+    box-shadow: rgb(240 241 242) 0px 0px 0px 7px;
+  }
 
-span {
-  border-radius: 999px;
-  box-shadow: rgb(240 241 242) 0px 0px 0px 0px;
+  span {
+    border-radius: 999px;
+    box-shadow: rgb(240 241 242) 0px 0px 0px 0px;
+  }
 }
-
-// .input__input input {
-//   margin-top: 5px;
-// }
-// input[type="radio"] {
-//   margin-top: 7px;
-//   margin-right: 20px;
-// }

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

@@ -1,17 +1,20 @@
 @use "../../../2-tools/tools-index";
+@use "../../../1-settings/class-vars";
 
-select {
-  color: var(--gray-color);
-  min-height: var(--form-ele-medium);
-  border-radius: var(--radius-small);
-  box-sizing: border-box;
-  border: 1px solid var(--gray-color);
-  width: 100%;
-  padding: 0 var(--spacing-xs);
-  appearance: none;
-  background: white var(--icon-chevron-dark) no-repeat right 5px center;
-  background-size: 16px;
+#{class-vars.$base-class} {
+  select {
+    color: var(--gray-color);
+    min-height: var(--form-ele-medium);
+    border-radius: var(--radius-small);
+    box-sizing: border-box;
+    border: 1px solid var(--gray-color);
+    width: 100%;
+    padding: 0 var(--spacing-xs);
+    appearance: none;
+    background: white var(--icon-chevron-dark) no-repeat right 5px center;
+    background-size: 16px;
 
-  @include tools-index.form-ele-hover-medium;
-  @include tools-index.form-ele-focus;
+    @include tools-index.form-ele-hover-medium;
+    @include tools-index.form-ele-focus;
+  }
 }