@utahdts/utah-design-system 0.0.1

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

@@ -0,0 +1,18 @@
+@use "../../../2-tools/tools-index";
+
+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);
+  box-sizing: border-box;
+	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;
+}

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

@@ -0,0 +1,191 @@
+@use "../../../1-settings/color-swatches";
+@use "../../../2-tools/tools-index";
+
+input[type=checkbox].switch {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.switch {
+  &__label {
+    position: absolute;
+    right: 0;
+    transform: translateX(calc(100% + var(--spacing-2xs)));
+    color: var(--gray-color);
+    min-width: max-content;
+  }
+  &__wrapper {
+    min-width: 20px;
+    background: color-swatches.$neutral-gray-08;
+    color: white;
+    border-radius: var(--radius-circle);
+    min-height: var(--form-ele-small3x);
+    padding: var(--spacing-3xs);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    &--on {
+      background: var(--form-ele-color);
+    }
+
+    @include tools-index.form-ele-hover-medium;
+    &:has(input:focus) {
+      @include tools-index.form-ele-focus-appearance;
+    }
+  }
+  &--small {
+    &.switch__wrapper {
+      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);
+    }
+  }
+  &--large {
+    &.switch__wrapper {
+      min-height: var(--form-ele-small1x);
+    }
+
+    .switch__slider {
+      height: var(--form-ele-small1x);
+      width: var(--form-ele-small1x);
+    }
+  }
+  &__slider {
+    height: var(--form-ele-small3x);
+    width: var(--form-ele-small3x);
+    border-radius: var(--radius-circle);
+    background: white;
+    position: absolute;
+    left: 2px;
+    transition: all var(--timing-quick);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &--on {
+      left: 100%;
+      transform: translateX(calc(-100% - 2px));
+      background: white;
+    }
+    svg {
+      fill: var(--gray-color);
+      width: .65rem;
+      height: .65rem;
+    }
+  }
+  &__inner-label {
+    position: relative;
+    width: 100%;
+    height: var(--form-ele-small3x);
+    font-size: var(--font-size-s);
+    line-height: var(--font-size-s);
+    &-on, &-off {
+      // display: none;
+      // width: 25px;
+      width: calc(100% - var(--form-ele-2small1x));
+      position: absolute;
+      right: 2px;
+      opacity: 0;
+      transition: opacity var(--timing-quick);
+      text-align: center;
+      display: inline-block;
+      &.show {
+        // display: block;
+        opacity: 1;
+      }
+    }
+    &-on {
+      color: white;
+      right: unset;
+      left: 2px;
+    }
+  }
+  &--disabled {
+    background: var(--form-ele-disabled-color);
+    cursor: not-allowed;
+    &.switch__wrapper--on {
+      background: var(--form-ele-color-light);
+    }
+  }
+}
+
+.input-wrapper {
+	&--switch {
+    label {
+      // padding: var(--spacing-3xs) var(--spacing) var(--spacing-3xs) var(--spacing-xl);
+      padding: var(--spacing-3xs) var(--spacing-xs);
+    }
+  }
+}
+
+.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;
+}
+
+.switch-old::after {
+  left: 1px;
+  top: 4px;
+  background-color: #fff;
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  border: 1px solid color-swatches.$warm-gray-08;
+}
+
+.switch-old::after {
+  left: 16px;
+  border-color: color-swatches.$aspen-green-08;
+  color: color-swatches.$aspen-green-08;
+}
+
+.switch-old::before {
+  background-color: color-swatches.$aspen-green-08;
+  border-color: color-swatches.$aspen-green-08;
+}

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

@@ -0,0 +1,15 @@
+@use "../../../2-tools/tools-index";
+
+input[type="text"] {
+  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);
+  box-sizing: border-box;
+
+  @include tools-index.form-ele-hover-medium;
+  @include tools-index.form-ele-focus;
+}

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

@@ -0,0 +1,69 @@
+@use "../../../1-settings/class-vars";
+@use "../../../1-settings/color-swatches";
+
+#{class-vars.$base-class} {
+  .menu-bar {
+    background-color: var(--gray-light-color);
+
+    ul {
+      list-style-type: none;
+      display: flex;
+      margin: 0 var(--spacing-xs) 0 var(--spacing-xs);
+      padding: 0;
+      li {
+
+        &.menu-item__search {
+          margin-left: auto;
+        }
+
+        a {
+          display: flex;
+          align-items: center;
+          text-decoration: none;
+          color: var(--gray-color);
+          padding: var(--spacing-3xs) var(--spacing);
+          margin: var(--spacing-xs) 0;
+          border-radius: 999px;
+          transition: all var(--timing-quick) ease-in-out;
+          position: relative;
+          box-sizing: border-box;
+          font-size: var(--font-size);
+          font-weight: var(--font-weight-semi-bold);
+
+          &::after {
+            content: "";
+            width: 100%;
+            height: var(--spacing-2xs);
+            background: transparent;
+            display: block;
+            position: absolute;
+            top: -9px;
+            left: 0;
+            border-bottom-left-radius: var(--spacing-2xs);
+            border-bottom-right-radius: var(--spacing-2xs);
+          }
+
+          .icon-chevron-down {
+            font-size: 1rem;
+            margin-right: -2px;
+          }
+
+          &:hover {
+            color: black;
+            box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
+          }
+          &.menu-item--selected {
+            &::after {
+              background: var(--primary-color);
+            }
+          }
+
+          .menu-item__search-icon {
+            font-size: var(--font-size-l);
+            line-height: 1rem;
+          }
+        }
+      }
+    }
+  }
+}

package/css/6-components/base-components/navigation/_menu-item.scss

@@ -0,0 +1,44 @@
+@use "../../../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  .menu-item {
+
+    &__title {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    &__button-title {
+      border: none;
+      padding: 0;
+      background: none;
+      &:hover {
+        background: none;
+        color: var(--primary-color);
+      }
+    }
+    a {
+      text-decoration: none;
+      color: var(--gray-color);
+      &.menu-item--selected {
+        color: var(--primary-color);
+      }
+    }
+    &__chevron {
+      transform: rotate(-90deg);
+      svg {
+        width: 10px;
+        height: 10px;
+      }
+      &--open {
+        transform: rotate(0deg);
+      }
+    }
+    &__sub-menu {
+      display: none;
+      &--open {
+        display: block;
+      }
+    }
+  }
+}

package/css/6-components/base-components/navigation/_side-panel-navigation.scss

@@ -0,0 +1,83 @@
+@use "../../../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  .menu-side-panel {
+    margin: var(--spacing) 0 0 0;
+    font-size: var(--font-size-xs);
+
+    &:first-child {
+      margin: 0;
+    }
+    &__header {
+      font-size: var(--font-size);
+    }
+    &>ul {
+      margin-left: calc(0px - var(--spacing));
+    }
+    ul {
+      list-style-type: none;
+      padding: 0;
+
+      ul:first-of-type {
+        border-left: 1px solid #DBDBDB;
+        margin-left: var(--spacing)
+      }
+    }
+    .menu-item {
+      &__title {
+        a {
+          flex: 1 0 auto;
+          padding: var(--spacing-2xs) var(--spacing);
+          display: block;
+          border-radius: var(--radius-circle);
+          position: relative;
+          transition: all var(--timing-quick) ease-in-out;
+
+          &:hover {
+            box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
+            color: var(--primary-color);
+          }
+          &.menu-item--selected {
+            font-weight: bold;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
+            //a chiclet
+            &::after {
+              content: '';
+              position: absolute;
+              left: -3px;
+              top: 0;
+              width: 5px;
+              height: 100%;
+              background: var(--primary-color);
+              border-radius: var(--radius-circle);
+            }
+          }
+        }
+      }
+
+      button {
+        min-height: unset;
+        min-width: unset;
+      }
+      &__button-title {
+        flex: 1 0 auto;
+        justify-content: flex-start;
+        font-size: var(--font-size-xs);
+        padding: var(--spacing-2xs) var(--spacing);
+        line-height: 1.7;
+
+        &:hover {
+          box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
+        }
+      }
+      &__chevron {
+        padding: var(--spacing-xs);
+        svg {
+          transition: transform var(--timing-quick) ease;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+table {
+  border-collapse: collapse;
+  thead {
+    border-bottom: 1px solid var(--gray-color);
+    tr {
+      th {
+        text-align: center;
+        font-weight: bold;
+        padding: var(--spacing-s);
+        &.text-left {
+          text-align: left;
+        }
+        &.text-right {
+          text-align: right;
+        }
+      }
+    }
+  }
+  tbody {
+    tr {
+      td {
+        vertical-align: top;
+        padding: var(--spacing-s);
+      }
+    }
+  }
+  &.table {
+    &--alt {
+      tbody {
+        tr:nth-child(2n) {
+          td {
+            background-color: #F5F5F5;
+          }
+        }
+      }
+    }
+    &--lines-x {
+      tbody {
+        tr {
+          td {
+            border-bottom: 1px solid var(--gray-medium-light-color)
+          }
+        }
+        tr:last-child {
+          td {
+            border-bottom: 1px solid var(--gray-color)
+          }
+        }
+      }
+    }
+  };
+}

package/css/6-components/base-components/templates/_documenation-template.scss

@@ -0,0 +1,50 @@
+.documentation-template {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-width: var(--content-width-wide);
+  justify-content: space-around;
+  align-items: flex-start;
+
+  &__wrapper {
+    display: flex;
+    justify-content: center;
+  }
+
+  &__side-panel-left {
+    border-right: 1px solid var(--gray-border);
+    padding: var(--documentation-padding);
+    width: var(--documentation-left-width);
+  }
+  &__content {
+    flex: 1 1 auto;
+    max-width: var(--documentation-width);
+    padding: var(--documentation-padding);
+
+    h1 {
+      margin: calc(-1 * var(--spacing-xs)) 0 0 0;
+    }
+    code {
+      svg {
+        height: 10px;
+      }
+    }
+    table {
+      .props-code-wrapper {
+        display: flex;
+        flex-direction: row;
+        gap: var(--spacing-xs);
+        flex-wrap: wrap;
+      }
+    }
+  }
+  &__side-panel-right{
+    position: sticky;
+    top: 0;
+    border-left: 1px solid var(--gray-border);
+    padding: var(--documentation-padding);
+    width: var(--documentation-right-width);
+  }
+
+
+}

package/css/6-components/base-components/templates/_landing-page-template.scss

@@ -0,0 +1,8 @@
+.landing-page-template {
+  display: flex;
+  justify-content: center;
+
+  .content-width {
+    max-width: var(--content-width-narrow);
+  }
+}

package/css/6-components/base-components/templates/_on-this-page.scss

@@ -0,0 +1,33 @@
+@use "../../../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  .on-this-page {
+    font-size: var(--font-size-xs);
+    &__header {
+      font-size: var(--font-size);
+      font-weight: bold;
+    }
+    &__list {
+      list-style-type: none;
+      padding: 0;
+      margin-left: calc(0px - var(--spacing));
+
+      ul {
+        margin-left: var(--spacing);
+      }
+      a {
+        text-decoration: none;
+        color: var(--gray-color);
+        padding: var(--spacing-2xs) var(--spacing);
+        display: block;
+        margin-right: calc(0px - var(--spacing));
+        border-radius: var(--radius-circle);
+        transition: all var(--timing-quick) ease-in-out;
+        &:hover {
+          box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
+          color: var(--primary-color);
+        }
+      }
+    }
+  }
+}

package/css/6-components/base-components/widgetsInicators/_spinner.scss

@@ -0,0 +1,38 @@
+@use "../../../1-settings/color-swatches";
+.spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  vertical-align: middle;
+  svg {
+    display: block;
+    path {
+      fill: none;
+    }
+  }
+  &__animation {
+    animation: spinner-animation .5s linear infinite;
+
+  }
+  &__track {
+    stroke: color-swatches.$neutral-gray-12;
+  }
+  &__value {
+    stroke: var(--form-ele-color);
+    stroke-linecap: round;
+    transform-origin: center;
+    transition: stroke-dashoffset .2s cubic-bezier(.4,1,.75,.9);
+  }
+}
+
+@keyframes spinner-animation {
+
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(1turn);
+  }
+}

package/css/6-components/project-components/_popup.scss

@@ -0,0 +1,22 @@
+/*
+############     _popup.scss      ############
+*/
+
+.popup {
+  position: fixed;
+  top: 25%;
+  left: 2%;
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 10px 10px 20px rgba($color: #000000, $alpha: 0.4);
+  z-index: 1000;
+
+  &__title-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  &__title {
+    padding: var(--spacing);
+  }
+}

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

@@ -0,0 +1,41 @@
+@use "../../1-settings/class-vars";
+
+/*
+############     _popup.scss      ############
+*/
+#{class-vars.$base-class} {
+  .color-family {
+    display: flex;
+    margin: 0 0 var(--spacing-2xs) 0;
+
+    &__title {
+      margin: 0 var(--spacing-s) 0 0;
+      padding: 0 var(--spacing-s);
+      color: white;
+      border-radius: 999px;
+      min-height: unset;
+      border: none;
+      &#{class-vars.$color-is-light} {
+        color: var(--gray-color);
+      }
+    }
+    &__swatches {
+      list-style-type: none;
+      margin: 0 0 0 auto;
+      padding: 0;
+      display: flex;
+      gap: 2px;
+      li {
+        padding: 0;
+      }
+    }
+    &__swatch {
+      width: 20px;
+      height: 20px;
+      border: none;
+      border-radius: 0;
+      min-height: auto;
+      padding: 0;
+    }
+  }
+}

package/css/7-utilities/_animation.scss

@@ -0,0 +1,41 @@
+@keyframes fade-in {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes drop-in {
+	0% {
+		opacity: 0;
+		transform: translate(-50%, -100px);
+	}
+	100% {
+		opacity: 1;
+		transform: translate(-50%, 0);
+	}
+}
+
+@keyframes pop-in {
+	0% {
+		opacity: 0;
+		transform: scale(0.7);
+	}
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@keyframes pop-in-center {
+	0% {
+		opacity: 0;
+		transform: scale(0.7) translateX(-50%);
+	}
+	100% {
+		opacity: 1;
+		transform: scale(1) translateX(-50%);
+	}
+}