@utahdts/utah-design-system 0.0.2 → 0.2.0

package/README.md

@@ -30,9 +30,9 @@ $ npm i @utahdts/utah-design-system
 import { DocumentationTemplate, LandingTemplate } from '@utahdts/utah-design-system';
 
 // uncompiled style
-import OnThisPage from '@utahdts/utah-design-system/react/components/navigation/OnThisPage';
-import SidePanelNavigation from '@utahdts/utah-design-system/react/components/navigation/SidePanelNavigation';
-import useCurrentMenuItem from '@utahdts/utah-design-system/react/hooks/useCurrentMenuItem';
+import { OnThisPage } from '@utahdts/utah-design-systemOnThisPage';
+import { SidePanelNavigation } from '@utahdts/utah-design-system';
+import { useCurrentMenuItem } from '@utahdts/utah-design-system';
 
 //import all scss
 import '@utahdts/utah-design-system/css/index.scss';

package/css/1-settings/_color-swatches.scss

@@ -374,7 +374,7 @@ $neutral-gray-06: #616161;
 $neutral-gray-07: #6e6e6e;
 $neutral-gray-08: #7b7b7b;
 $neutral-gray-09: #888888;
-$neutral-gray-10: #959595;
+$neutral-gray-10: #949494;
 $neutral-gray-11: #a3a3a3;
 $neutral-gray-12: #b0b0b0;
 $neutral-gray-13: #bdbdbd;

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

@@ -5,6 +5,9 @@ Font size variables
 @use "../1-settings/class-vars";
 
 #{class-vars.$base-class} {
+  --normal-font-family: 'Source Sans Pro', 'Helvetica Neue', 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

package/css/1-settings/_icons.scss

@@ -1,6 +1,207 @@
 @use "../1-settings/class-vars";
 
+/* Generated by Glyphter (http://www.glyphter.com) on  Fri Jan 20 2023*/
+@font-face {
+  font-family: 'utah design system';
+  src: url('/fonts/utah-design-system.eot');
+  src: url('/fonts/utah-design-system.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/utah-design-system.woff') format('woff'),
+       url('/fonts/utah-design-system.ttf') format('truetype'),
+       url('/fonts/utah-design-system.svg#utah-design-system') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
 #{class-vars.$base-class} {
   --icon-check-mark-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12.15'%3E%3Cg%3E%3Cpath d='M6.185,12.15L0,5.966,2.335,3.631l3.85,3.849L13.665,0l2.335,2.335L6.185,12.15Z' style='fill: %23fff;'/%3E%3C/g%3E%3C/svg%3E");
   --icon-chevron-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg%3E%3Crect width='14' height='14' style='fill: none;'/%3E%3Cpath d='M3.142,5l3.716,3.71,3.717-3.71,1.142,1.142-4.859,4.858L2,6.142l1.142-1.142Z' style='fill: %23474747;'/%3E%3C/g%3E%3C/svg%3E");
+
+  [class*='utds-icon-after-']::after {
+    display: inline-block;
+    font-family: 'utah design system';
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    margin-left: var(--spacing-2xs);
+  }
+  [class*='utds-icon-before-']::before {
+    display: inline-block;
+    font-family: 'utah design system';
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    margin-right: var(--spacing-2xs);
+  }
+  .utds-icon-before-external-link::before,
+  .utds-icon-after-external-link::after {
+    content: '\0041';
+    font-size: .65em;
+  }
+
+  .utds-icon-before-waffle::before,
+  .utds-icon-after-waffle::after {
+    content: '\0042';
+  }
+
+  .utds-icon-before-alert::before,
+  .utds-icon-after-alert::after {
+    content: '\0043';
+  }
+
+  .utds-icon-before-help::before,
+  .utds-icon-after-help::after {
+    content: '\0044';
+  }
+
+  .utds-icon-before-bookmark::before,
+  .utds-icon-after-bookmark::after {
+    content: '\0045';
+  }
+
+  .utds-icon-before-search::before,
+  .utds-icon-after-search::after {
+    content: '\0046';
+  }
+
+  .utds-icon-before-check::before,
+  .utds-icon-after-check::after {
+    content: '\0047';
+  }
+
+  .utds-icon-before-star::before,
+  .utds-icon-after-star::after {
+    content: '\0048';
+  }
+
+  .utds-icon-before-info::before,
+  .utds-icon-after-info::after {
+    content: '\0049';
+  }
+
+  .utds-icon-before-unfold-less::before,
+  .utds-icon-after-unfold-less::after {
+    content: '\004a';
+  }
+
+  .utds-icon-before-unfold-more::before,
+  .utds-icon-after-unfold-more::after {
+    content: '\004b';
+  }
+
+  .utds-icon-before-circle-chevron-down::before,
+  .utds-icon-after-circle-chevron-down::after {
+    content: '\004c';
+  }
+
+  .utds-icon-before-circle-chevron-up::before,
+  .utds-icon-after-circle-chevron-up::after {
+    content: '\004d';
+  }
+
+  .utds-icon-before-chevron-up::before,
+  .utds-icon-after-chevron-up::after {
+    content: '\004e';
+  }
+
+  .utds-icon-before-chevron-right::before,
+  .utds-icon-after-chevron-right::after {
+    content: '\004f';
+  }
+
+  .utds-icon-before-chevron-down::before,
+  .utds-icon-after-chevron-down::after {
+    content: '\0050';
+  }
+
+  .utds-icon-before-chevron-left::before,
+  .utds-icon-after-chevron-left::after {
+    content: '\0051';
+  }
+
+  .utds-icon-before-arrow-up::before,
+  .utds-icon-after-arrow-up::after {
+    content: '\0052';
+  }
+
+  .utds-icon-before-arrow-right::before,
+  .utds-icon-after-arrow-right::after {
+    content: '\0053';
+  }
+
+  .utds-icon-before-arrow-down::before,
+  .utds-icon-after-arrow-down::after {
+    content: '\0054';
+  }
+
+  .utds-icon-before-arrow-left::before,
+  .utds-icon-after-arrow-left::after {
+    content: '\0055';
+  }
+
+  .utds-icon-before-plus::before,
+  .utds-icon-after-plus::after {
+    content: '\0056';
+  }
+
+  .utds-icon-before-minus::before,
+  .utds-icon-after-minus::after {
+    content: '\0057';
+  }
+
+  .utds-icon-before-x-icon::before,
+  .utds-icon-after-x-icon::after {
+    content: '\0058';
+  }
+
+  .utds-icon-before-edit::before,
+  .utds-icon-after-edit::after {
+    content: '\0059';
+  }
+
+  .utds-icon-before-edit-box::before,
+  .utds-icon-after-edit-box::after {
+    content: '\005a';
+  }
+
+  .utds-icon-before-verified::before,
+  .utds-icon-after-verified::after {
+    content: '\0061';
+  }
+
+  .utds-icon-before-gear::before,
+  .utds-icon-after-gear::after {
+    content: '\0062';
+  }
+
+  .utds-icon-before-doc::before,
+  .utds-icon-after-doc::after {
+    content: '\0063';
+  }
+
+  .utds-icon-before-doc-square::before,
+  .utds-icon-after-doc-square::after {
+    content: '\0064';
+  }
+
+  .utds-icon-before-warning::before,
+  .utds-icon-after-warning::after {
+    content: '\0065';
+  }
+
+  .utds-icon-before-error::before,
+  .utds-icon-after-error::after {
+    content: '\0066';
+  }
+
+  .utds-icon-before-copy::before,
+  .utds-icon-after-copy::after {
+    content: '\0067';
+  }
 }
+
+
+

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

@@ -36,6 +36,7 @@ variables and settings
 
   --gray-color: #{color-swatches.$neutral-gray-04};
   --gray-medium-color: #{color-swatches.$neutral-gray-06};
+  --gray-3-1-contrast: #{color-swatches.$neutral-gray-10};
   --gray-medium-light-color: #{color-swatches.$neutral-gray-15};
   --gray-light-color: #{color-swatches.$neutral-gray-17};
   --gray-dark-color: #{color-swatches.$neutral-gray-02};
@@ -46,6 +47,10 @@ variables and settings
   --code-color: #{color-swatches.$neutral-gray-16};
   --gray-border: #{color-swatches.$neutral-gray-15};
 
+  --danger-color: #ba0000;
+  --warning-color: #ba6300;
+  --info-color: var(--secondary-color);
+  --success-color: #2f8700;
 
   /* transition timings */
   --timing-xquick: 100ms;
@@ -61,10 +66,10 @@ variables and settings
   --radius-circle: 999px;
 
   /* form element sizes */
-  --form-ele-small4x: .75rem;      //small switch
+  --form-ele-small4x: .75rem;    //small switch
   --form-ele-small3x: 1rem;
   --form-ele-small2x: 1.25rem;
-  --form-ele-small1x: 1.5rem;
+  --form-ele-small1x: 1.5rem;    //small1x button
   --form-ele-small: 1.875rem;    //small button
   --form-ele-medium: 2.25rem;    //medium button
   --form-ele-large: 2.5rem;      //large button
@@ -82,6 +87,13 @@ variables and settings
   --documentation-left-width: 200px;
   --documentation-right-width: 200px;
   --documentation-padding: var(--spacing-2xl) var(--spacing-xl);
+
+  /* elevation box shadows */
+  --drop-shadow-color: rgba(0, 0, 0, 0.3);
+  --elevation-small: 0 3px 6px var(--drop-shadow-color);
+  --elevation-medium: 0 6px 12px var(--drop-shadow-color);
+  --elevation-large: 0 12px 16px var(--drop-shadow-color);
+
 }
 
  /* color utility classes */
@@ -114,3 +126,4 @@ variables and settings
 
 .white-color { color: white; }
 
+

package/css/1-settings/_spacing.scss

@@ -36,6 +36,14 @@
   .mx-spacing-l { margin-left: var(--spacing-l); margin-right: var(--spacing-l); }
   .my-spacing-l { margin-top: var(--spacing-l); margin-bottom: var(--spacing-l); }
 
+  .m-spacing-s { margin: var(--spacing-s); }
+  .mt-spacing-s { margin-top: var(--spacing-s); }
+  .mr-spacing-s { margin-right: var(--spacing-s); }
+  .mb-spacing-s { margin-bottom: var(--spacing-s); }
+  .ml-spacing-s { margin-left: var(--spacing-s); }
+  .mx-spacing-s { margin-left: var(--spacing-s); margin-right: var(--spacing-s); }
+  .my-spacing-s { margin-top: var(--spacing-s); margin-bottom: var(--spacing-s); }
+
   .m-spacing-xs { margin: var(--spacing-xs); }
   .mt-spacing-xs { margin-top: var(--spacing-xs); }
   .mr-spacing-xs { margin-right: var(--spacing-xs); }

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

@@ -5,13 +5,13 @@ elemental html: h1, h2, h3, ul, li, etc.
 @use "../1-settings/class-vars";
 
 #{class-vars.$base-class} {
-	margin: 0;
-	font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif;
+  margin: 0;
+  font-family: var(--normal-font-family);
   font-size: 16px;
-  line-height: 1.3;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	background: white;
+  line-height: 1.4;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: white;
   color: var(--gray-color);
 
   h1 {
@@ -46,10 +46,10 @@ elemental html: h1, h2, h3, ul, li, etc.
   }
 
   code {
-    font-family: 'Source Code Pro', monospace;
-    font-size: .95em;
+    font-family: var(--fixed-width-font-family);
+    font-size: .95rem;
     background: var(--code-color);
-    padding: var(--spacing-3xs) var(--spacing-xs);
+    padding: var(--spacing-3xs) var(--spacing-2xs);
     border-radius: var(--radius-small1x);
     &.primary-color {
       color: var(--primary-color);
@@ -57,12 +57,19 @@ elemental html: h1, h2, h3, ul, li, etc.
     }
   }
   pre {
+    font-family: var(--fixed-width-font-family);
+    font-size: .95rem;
     white-space: pre-wrap;
     word-wrap: break-word;
+    margin: 0 0 var(--spacing) 0;
+    &.gray-block {
+      background: var(--gray-light-color);
+      padding: var(--spacing-s) var(--spacing);
+      border-radius: var(--radius-medium);
+    }
   }
 
-  ul {
-    list-style-type: disc;
+  ul, ol {
     padding: 0 0 0 var(--spacing-2xl);
     margin: 0;
     line-height: 1.7;
@@ -86,4 +93,13 @@ elemental html: h1, h2, h3, ul, li, etc.
       color: var(--primary-color-dark);
     }
   }
+
+  .external-link::after {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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: .7rem;
+    width: .7rem;
+    background-position: top left;
+
+    display: inline-block;
+  }
 }

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

@@ -19,6 +19,7 @@ component specific, BEM (Block, Element, Modifier)
 @use "base-components/navigation/main-menu";
 @use "base-components/navigation/menu-item";
 @use "base-components/navigation/side-panel-navigation";
+@use "base-components/popups/popups";
 @use "base-components/templates/documenation-template";
 @use "base-components/templates/landing-page-template";
 @use "base-components/forms/input";

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

@@ -19,13 +19,15 @@
     transition: all 200ms ease-in-out, transform 100ms ease, box-shadow 100ms ease;
     color: var(--gray-color);
     text-decoration: none;
+    position: relative;
+
+    svg {
+      fill: currentColor;
+    }
 
     &:hover {
       background: var(--gray-color);
       color: white;
-      svg {
-        fill: currentColor;
-      }
     }
 
     &[disabled], &[disable]:hover {
@@ -33,12 +35,12 @@
       background: white !important;
       color: var(--form-ele-disabled-color) !important;
       border-color: var(--form-ele-disabled-color) !important;
-      &:active {
+      &:active, &.active {
         transform: none;
         box-shadow: none;
       }
     }
-    &:active {
+    &:active, &--active {
       transform: scale(.96);
       box-shadow: inset 0 3px 5px rgba(0,0,0,0.5);
     }
@@ -49,6 +51,13 @@
   .button {
 
     /* ------------ SIZES ------------ */
+    &--small1x {
+      font-size: .85rem;
+      min-height: var(--form-ele-small1x);
+      padding: 0 var(--spacing-xs);
+      border-width: 1px;
+    }
+
     &--small {
       font-size: .938rem;
       min-height: var(--form-ele-small);

package/css/6-components/base-components/buttons/_icon-button.scss

@@ -6,40 +6,68 @@
 #{class-vars.$base-class} {
 
   .icon-button {
-    background: white;
     border-radius: 999px;
-    border: 2px solid var(--gray-color);
     font-size: 1rem;
-    min-height: 36px;
-    min-width: 36px;
+    min-height: var(--form-ele-medium);
+    min-width: var(--form-ele-medium);
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all 200ms ease-in-out;
-    color: var(--gray-color);
-    
-    &:hover {
-      background: var(--gray-color);
-      color: white;
-    }
-
-    &--solid {
-      background: var(--gray-color);
-      color: white;
-      &:hover {
-        background-color: var(--gray-dark-color);
-        border-color: var(--gray-dark-color);
-      }
-    }
 
-    &--plain {
+    &--borderless {
       border-color: transparent;
+      background: transparent;
       &:hover {
-        background-color: color-swatches.$neutral-gray-16;
-        border-color: color-swatches.$neutral-gray-16;
         color: var(--gray-dark-color);
+        background: var(--hover-gray-color);
+      }
+      &.button--primary-color {
+        &:hover {
+          color: var(--primary-color-dark);
+        }
+      }
+      &.button--secondary-color {
+        &:hover {
+          color: var(--secondary-color-dark);
+        }
+      }
+      &.button--accent-color {
+        &:hover {
+          color: var(--accent-color-dark);
+        }
+      }
+      @at-root #{class-vars.$primary-color-is-light}#{&} {
+        &.button--primary-color {
+          border-color: transparent;
+          &:hover {
+            color: var(--primary-color-dark);
+            background: var(--hover-gray-color);
+          }
+        }
+      }
+      @at-root #{class-vars.$secondary-color-is-light}#{&} {
+        &.button--secondary-color {
+          border-color: transparent;
+          &:hover {
+            color: var(--secondary-color-dark);
+            background: var(--hover-gray-color);
+          }
+        }
+      }
+      @at-root #{class-vars.$accent-color-is-light}#{&} {
+        &.button--accent-color {
+          border-color: transparent;
+          &:hover {
+            color: var(--accent-color-dark);
+            background: var(--hover-gray-color);
+          }
+        }
+      }
+      &[disabled], &[disable]:hover {
+        background: transparent !important;
+        border-color: transparent !important;
       }
     }
 
@@ -50,5 +78,55 @@
       }
     }
 
+    [class*='utds-icon-before-'] {
+      line-height: .5;
+      &::before {
+        margin: 0;
+        font-size: 1.25rem;
+      }
+    }
+
+    /* ------------ SIZES ------------ */
+    &--small1x {
+      font-size: .85rem;
+      min-height: var(--form-ele-small1x);
+      min-width: var(--form-ele-small1x);
+      border-width: 1px;
+
+      [class*='utds-icon-before-']::before {
+        font-size: 1rem;
+      }
+    }
+
+    &--small {
+      font-size: .938rem;
+      min-height: var(--form-ele-small);
+      min-width: var(--form-ele-small);
+
+      [class*='utds-icon-before-']::before {
+        font-size: 1.125rem;
+      }
+    }
+
+    &--large {
+      font-size: 1.25rem;
+      min-height: var(--form-ele-large);
+      min-width: var(--form-ele-large);
+
+      [class*='utds-icon-before-']::before {
+        font-size: 1.45rem;
+      }
+    }
+
+    &--large1x {
+      font-size: 1.5rem;
+      min-height: var(--form-ele-large1x);
+      min-width: var(--form-ele-large1x);
+
+      [class*='utds-icon-before-']::before {
+        font-size: 1.7rem;
+      }
+    }
+
   }
 }

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

@@ -1,32 +1,32 @@
 @use "../../../2-tools/tools-index";
 
 input[type="checkbox"] {
-	width: var(--form-checkbox-medium);
-	height: var(--form-checkbox-medium);
-	position: relative;
+  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;
+  border: 1px solid var(--gray-color);
+  background-color: white;
   box-sizing: border-box;
-	appearance: none;
+  appearance: none;
 
-	&::after {
-		content: '';
-		display: block;
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		left: 0;
-		border-radius: var(--radius-circle);
-		z-index: -1;
+  &::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 {
+  }
+  &:hover {
     border-color: black;
-		&::after {
+    &::after {
       @include tools-index.form-ele-hover-hovered(7px);
-		}
+    }
   }
 
   &::before {
@@ -37,12 +37,12 @@ input[type="checkbox"] {
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 30%;
-		border-radius: var(--radius-small1x);
+    border-radius: var(--radius-small1x);
     width: 100%;
     height: 100%;
     opacity: 0;
   }
-	&:checked {
+  &:checked {
     border-width: 0;
     background-color: var(--form-ele-color);
     &::before {
@@ -50,18 +50,18 @@ input[type="checkbox"] {
       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);
-	}
+  &--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/_input-wrapper.scss

@@ -1,5 +1,5 @@
 .input-wrapper {
-	margin: 0 0 var(--spacing-s) 0;
+  margin: 0 0 var(--spacing-s) 0;
   .form.form--stacked & {
     display: flex;
     flex-direction: column;