@utahdts/utah-design-system 0.0.1

package/css/build/utah-design-system.css

@@ -0,0 +1,2374 @@
+/*
+BEM standard: Block, Element, Modifier
+   Block: use dashes to separate words:
+     - my-react-component
+     - super-list
+     - cats-r-great
+  Element: use two underscores for elements
+    Elements are children at any level of the Block:
+    - my-react-component__block
+    - super-list__name
+    - super-list__info
+    - cats-r-great__whiskers
+  Modifier: use two dashes for modifiers
+    - my-react-component--alt
+    - super-list--flat
+    - cats-r-great--black
+ */
+/*
+############     _settings-index.scss      ############
+CSS Class Variables
+*/
+/*
+############     _spacing.scss      ############
+8px horizontal spacing
+*/
+.utah-design-system {
+  --spacing-3xs: 2px;
+  --spacing-2xs: 4px;
+  --spacing-xs: 8px;
+  --spacing-s: 12px;
+  --spacing: 16px;
+  --spacing-l: 24px;
+  --spacing-xl: 32px;
+  --spacing-2xl: 40px;
+  --spacing-3xl: 48px;
+  --spacing-4xl: 64px;
+  --spacing-5xl: 80px;
+  --spacing-6xl: 96px;
+}
+
+.utah-design-system .m-spacing {
+  margin: var(--spacing);
+}
+
+.utah-design-system .mt-spacing {
+  margin-top: var(--spacing);
+}
+
+.utah-design-system .mr-spacing {
+  margin-right: var(--spacing);
+}
+
+.utah-design-system .mb-spacing {
+  margin-bottom: var(--spacing);
+}
+
+.utah-design-system .ml-spacing {
+  margin-left: var(--spacing);
+}
+
+.utah-design-system .mx-spacing {
+  margin-left: var(--spacing);
+  margin-right: var(--spacing);
+}
+
+.utah-design-system .my-spacing {
+  margin-top: var(--spacing);
+  margin-bottom: var(--spacing);
+}
+
+.utah-design-system .m-spacing-l {
+  margin: var(--spacing-l);
+}
+
+.utah-design-system .mt-spacing-l {
+  margin-top: var(--spacing-l);
+}
+
+.utah-design-system .mr-spacing-l {
+  margin-right: var(--spacing-l);
+}
+
+.utah-design-system .mb-spacing-l {
+  margin-bottom: var(--spacing-l);
+}
+
+.utah-design-system .ml-spacing-l {
+  margin-left: var(--spacing-l);
+}
+
+.utah-design-system .mx-spacing-l {
+  margin-left: var(--spacing-l);
+  margin-right: var(--spacing-l);
+}
+
+.utah-design-system .my-spacing-l {
+  margin-top: var(--spacing-l);
+  margin-bottom: var(--spacing-l);
+}
+
+.utah-design-system .m-spacing-xs {
+  margin: var(--spacing-xs);
+}
+
+.utah-design-system .mt-spacing-xs {
+  margin-top: var(--spacing-xs);
+}
+
+.utah-design-system .mr-spacing-xs {
+  margin-right: var(--spacing-xs);
+}
+
+.utah-design-system .mb-spacing-xs {
+  margin-bottom: var(--spacing-xs);
+}
+
+.utah-design-system .ml-spacing-xs {
+  margin-left: var(--spacing-xs);
+}
+
+.utah-design-system .mx-spacing-xs {
+  margin-left: var(--spacing-xs);
+  margin-right: var(--spacing-xs);
+}
+
+.utah-design-system .my-spacing-xs {
+  margin-top: var(--spacing-xs);
+  margin-bottom: var(--spacing-xs);
+}
+
+.utah-design-system .p-spacing {
+  padding: var(--spacing);
+}
+
+.utah-design-system .pt-spacing {
+  padding-top: var(--spacing);
+}
+
+.utah-design-system .pr-spacing {
+  padding-right: var(--spacing);
+}
+
+.utah-design-system .pb-spacing {
+  padding-bottom: var(--spacing);
+}
+
+.utah-design-system .pl-spacing {
+  padding-left: var(--spacing);
+}
+
+.utah-design-system .px-spacing {
+  padding-left: var(--spacing);
+  padding-right: var(--spacing);
+}
+
+.utah-design-system .py-spacing {
+  padding-top: var(--spacing);
+  padding-bottom: var(--spacing);
+}
+
+.utah-design-system .p-spacing-l {
+  padding: var(--spacing-l);
+}
+
+.utah-design-system .pt-spacing-l {
+  padding-top: var(--spacing-l);
+}
+
+.utah-design-system .pr-spacing-l {
+  padding-right: var(--spacing-l);
+}
+
+.utah-design-system .pb-spacing-l {
+  padding-bottom: var(--spacing-l);
+}
+
+.utah-design-system .pl-spacing-l {
+  padding-left: var(--spacing-l);
+}
+
+.utah-design-system .px-spacing-l {
+  padding-left: var(--spacing-l);
+  padding-right: var(--spacing-l);
+}
+
+.utah-design-system .py-spacing-l {
+  padding-top: var(--spacing-l);
+  padding-bottom: var(--spacing-l);
+}
+
+.utah-design-system .m-auto {
+  margin: auto;
+}
+
+.utah-design-system .mt-auto {
+  margin-top: auto;
+}
+
+.utah-design-system .mr-auto {
+  margin-right: auto;
+}
+
+.utah-design-system .mb-auto {
+  margin-bottom: auto;
+}
+
+.utah-design-system .ml-auto {
+  margin-left: auto;
+}
+
+.utah-design-system .mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.utah-design-system .my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+/*
+############     _font-size.scss      ############
+Grid variables
+*/
+.utah-design-system {
+  --grid-fixed: var(--content-width);
+  --grid-fixed-half: calc(var(--grid-fixed) / 2);
+  --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);
+}
+
+.grid-fixed--2col {
+  grid-template-columns: 1fr 1fr;
+}
+
+.grid-fixed--3col {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.grid-fixed--4col {
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+.grid-fixed .grid-column-span-2 {
+  grid-column: span 2;
+}
+
+/*
+############     _font-size.scss      ############
+Font size variables
+*/
+.utah-design-system {
+  --font-size-2xs: .8125rem;
+  --font-size-xs: .875rem;
+  --font-size-s: .9375rem;
+  --font-size: 1rem;
+  --font-size-m: 1.125rem;
+  --font-size-l: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 1.75rem;
+  --font-size-3xl: 2rem;
+  --font-size-4xl: 2.5rem;
+  --font-size-5xl: 3rem;
+  --font-size-6xl: 3.5rem;
+  --font-size-7xl: 4.5rem;
+}
+
+.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);
+}
+
+.utah-design-system {
+  --font-weight-normal: 400;
+  --font-weight-semi-bold: 600;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
+}
+
+.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);
+}
+
+/*
+############     _color-swatches.scss      ############
+base color swatches for the design system
+*/
+.utah-design-system {
+  --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");
+}
+
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
+.utah-design-system {
+  /* color */
+  /* ######## Pick these colors to match your desired style ######## */
+  --primary-color: purple;
+  --primary-color-dark: rgb(50, 0, 50);
+  --primary-color-light: rgb(219, 159, 219);
+  --gray-on-primary-color: #474747;
+  --secondary-color: rgb(0, 255, 136);
+  --secondary-color-dark: rgb(0, 66, 35);
+  --secondary-color-light: rgb(183, 250, 218);
+  --gray-on-secondary-color: #474747;
+  --accent-color: gold;
+  --accent-color-dark: rgb(114, 97, 0);
+  --accent-color-light: rgb(245, 238, 196);
+  --gray-on-accent-color: #474747;
+  --form-ele-color: #2765e4;
+  --form-ele-color-light: #7aa0ee;
+  --form-ele-disabled-color: #959595;
+  /* ######## --------------------------------------------- ######## */
+  --gray-color: #474747;
+  --gray-medium-color: #616161;
+  --gray-medium-light-color: #d7d7d7;
+  --gray-light-color: #f1f1f1;
+  --gray-dark-color: #333333;
+  --hover-gray-color: rgba(0,0,0,0.07);
+  --hover-gray-color-opaque: rgba(233,233,233);
+  --code-color: #e4e4e4;
+  --gray-border: #d7d7d7;
+  /* transition timings */
+  --timing-xquick: 100ms;
+  --timing-quick: 200ms;
+  --timing-medium: 400ms;
+  --timing-slow: 600ms;
+  /* rounded corners */
+  --radius-small1x: 3px;
+  --radius-small: 6px;
+  --radius-medium: 9px;
+  --radius-large: 12px;
+  --radius-circle: 999px;
+  /* form element sizes */
+  --form-ele-small4x: .75rem;
+  --form-ele-small3x: 1rem;
+  --form-ele-small2x: 1.25rem;
+  --form-ele-small1x: 1.5rem;
+  --form-ele-small: 1.875rem;
+  --form-ele-medium: 2.25rem;
+  --form-ele-large: 2.5rem;
+  --form-ele-large1x: 3.125rem;
+  --form-checkbox-small: 0.875rem;
+  --form-checkbox-medium: 1.125rem;
+  --form-checkbox-large: 1.375rem;
+  /* content layout sizes */
+  --content-width-narrow: 800px;
+  --content-width: 1224px;
+  --content-width-wide: 1432px;
+  --documentation-width: 700px;
+  --documentation-left-width: 200px;
+  --documentation-right-width: 200px;
+  --documentation-padding: var(--spacing-2xl) var(--spacing-xl);
+}
+
+/* color utility classes */
+.primary-color-background {
+  background-color: var(--primary-color);
+}
+
+.primary-color-dark-background {
+  background-color: var(--primary-color-dark);
+}
+
+.primary-color-light-background {
+  background-color: var(--primary-color-light);
+}
+
+.gray-on-primary-background {
+  background-color: var(--gray-on-primary-color);
+}
+
+.primary-color {
+  color: var(--primary-color);
+}
+
+.primary-color-border {
+  border-color: var(--primary-color);
+}
+
+.secondary-color-background {
+  background-color: var(--secondary-color);
+}
+
+.secondary-color-dark-background {
+  background-color: var(--secondary-color-dark);
+}
+
+.secondary-color-light-background {
+  background-color: var(--secondary-color-light);
+}
+
+.gray-on-secondary-background {
+  background-color: var(--gray-on-secondary-color);
+}
+
+.secondary-color {
+  color: var(--secondary-color);
+}
+
+.secondary-color-border {
+  border-color: var(--secondary-color);
+}
+
+.accent-color-background {
+  background-color: var(--accent-color);
+}
+
+.accent-color-dark-background {
+  background-color: var(--accent-color-dark);
+}
+
+.accent-color-light-background {
+  background-color: var(--accent-color-light);
+}
+
+.gray-on-accent-background {
+  background-color: var(--gray-on-accent-color);
+}
+
+.accent-color {
+  color: var(--accent-color);
+}
+
+.accent-color-border {
+  border-color: var(--accent-color);
+}
+
+.gray-color-background {
+  background-color: var(--gray-color);
+}
+
+.gray-color-light-background {
+  background-color: var(--gray-light-color);
+}
+
+.white-color {
+  color: white;
+}
+
+/*
+############     _tools-index.scss      ############
+scss mixins and functions
+*/
+/*
+############     _generic-index.scss      ############
+css resets, etc.
+*/
+/*
+############     _settings-index.scss      ############
+CSS Class Variables
+*/
+/*
+############     _elements-index.scss      ############
+elemental html: h1, h2, h3, ul, li, etc.
+*/
+.utah-design-system {
+  margin: 0;
+  font-family: "Source Sans Pro", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 1.3;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: white;
+  color: var(--gray-color);
+}
+
+.utah-design-system h1 {
+  font-size: var(--font-size-4xl);
+  margin: 0;
+}
+
+.utah-design-system h2 {
+  font-size: var(--font-size-3xl);
+  margin: 0;
+}
+
+.utah-design-system h3 {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-normal);
+  margin: 0;
+}
+
+.utah-design-system h4 {
+  font-size: var(--font-size-l);
+  font-weight: var(--font-weight-normal);
+  margin: 0;
+}
+
+.utah-design-system h5 {
+  font-size: var(--font-size);
+  margin: 0;
+}
+
+.utah-design-system h6 {
+  font-size: var(--font-size);
+  margin: 0;
+}
+
+.utah-design-system p {
+  margin: 0 0 var(--spacing-l);
+}
+
+.utah-design-system code {
+  font-family: "Source Code Pro", monospace;
+  font-size: 0.95em;
+  background: var(--code-color);
+  padding: var(--spacing-3xs) var(--spacing-xs);
+  border-radius: var(--radius-small1x);
+}
+
+.utah-design-system code.primary-color {
+  color: var(--primary-color);
+  background: var(--primary-color-light);
+}
+
+.utah-design-system pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.utah-design-system ul {
+  list-style-type: disc;
+  padding: 0 0 0 var(--spacing-2xl);
+  margin: 0;
+  line-height: 1.7;
+}
+
+.utah-design-system hr {
+  height: 0;
+  width: 100%;
+  border: none;
+  border-top: 1px solid var(--gray-border);
+}
+
+.utah-design-system a[href] {
+  color: var(--primary-color);
+}
+
+.utah-design-system a[href]:hover {
+  box-shadow: -3px -1px 0 0px var(--hover-gray-color-opaque), 3px -1px 0 0px var(--hover-gray-color-opaque), 3px 1px 0 0px var(--hover-gray-color-opaque), -3px 1px 0 0px var(--hover-gray-color-opaque), inset 0 0 0 1000px var(--hover-gray-color-opaque);
+  color: var(--primary-color-dark);
+}
+
+/*
+############     _objects-index.scss      ############
+containers and general design patterns, 2up, 3up, layout grids, etc.
+*/
+.lead-in {
+  font-size: var(--font-size-m);
+  line-height: 1.6rem;
+}
+
+/*
+############     _settings-index.scss      ############
+CSS Class Variables
+*/
+.utah-design-system .accordion__header, .utah-design-system .accordion__header.button {
+  border-radius: 0;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  padding: var(--spacing);
+  border: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.utah-design-system .accordion__content {
+  background: var(--gray-light-color);
+  padding: 0;
+  box-sizing: border-box;
+  height: 0;
+  overflow: hidden;
+}
+
+.utah-design-system .accordion__content--open {
+  height: auto;
+  padding: var(--spacing);
+}
+
+.utah-design-system .tab-group__list {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.utah-design-system .tab-group__list.tab-group--small-text .tab-group__tab-button {
+  font-size: var(--font-size);
+}
+
+.utah-design-system .tab-group__tab {
+  flex: 1 1 auto;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.utah-design-system .tab-group__tab::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--gray-color);
+}
+
+.utah-design-system .tab-group__tab--selected::after {
+  height: 5px;
+  bottom: -2px;
+  border-radius: var(--radius-circle);
+  background-color: var(--primary-color);
+}
+
+.utah-design-system .tab-group__tab-button {
+  border: none;
+  font-size: var(--font-size-l);
+  font-weight: var(--font-weight-semi-bold);
+  background-color: transparent;
+  margin: var(--spacing-xs) 0;
+}
+
+.utah-design-system .tab-group__tab-button:hover {
+  background-color: var(--hover-gray-color);
+  color: inherit;
+}
+
+.utah-design-system .tab-group__tab-button--selected {
+  color: var(--primary-color);
+}
+
+.utah-design-system .tab-group__panel {
+  display: none;
+  padding-top: var(--spacing);
+}
+
+.utah-design-system .tab-group__panel--selected {
+  display: block;
+}
+
+/*
+############     _tools-index.scss      ############
+scss mixins and functions
+*/ /*
+############     _button.scss      ############
+*/
+.utah-design-system {
+  /* ------------ Show a dark contrast color on a light background ------------ */
+  /* ------------ Show a light contrast color on dark background ------------ */
+}
+
+.utah-design-system button, .utah-design-system .button {
+  background: white;
+  border-radius: 999px;
+  border: 2px solid var(--gray-color);
+  font-size: 1rem;
+  min-height: var(--form-ele-medium);
+  padding: 0 var(--spacing-xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 200ms ease-in-out, transform 100ms ease, box-shadow 100ms ease;
+  color: var(--gray-color);
+  text-decoration: none;
+}
+
+.utah-design-system button:hover, .utah-design-system .button:hover {
+  background: var(--gray-color);
+  color: white;
+}
+
+.utah-design-system button:hover svg, .utah-design-system .button:hover svg {
+  fill: currentColor;
+}
+
+.utah-design-system button[disabled], .utah-design-system button[disable]:hover, .utah-design-system .button[disabled], .utah-design-system .button[disable]:hover {
+  cursor: not-allowed;
+  background: white !important;
+  color: var(--form-ele-disabled-color) !important;
+  border-color: var(--form-ele-disabled-color) !important;
+}
+
+.utah-design-system button[disabled]:active, .utah-design-system button[disable]:hover:active, .utah-design-system .button[disabled]:active, .utah-design-system .button[disable]:hover:active {
+  transform: none;
+  box-shadow: none;
+}
+
+.utah-design-system button:active, .utah-design-system .button:active {
+  transform: scale(0.96);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
+}
+
+.utah-design-system button:focus-visible, .utah-design-system .button:focus-visible {
+  outline: 2px solid var(--form-ele-color);
+  outline-offset: 2px;
+  transition: none;
+}
+
+.utah-design-system .button {
+  /* ------------ SIZES ------------ */
+  /* ------------ SOLID COLOR ------------ */
+}
+
+.utah-design-system .button--small {
+  font-size: 0.938rem;
+  min-height: var(--form-ele-small);
+  padding: 0 var(--spacing);
+}
+
+.utah-design-system .button--large {
+  font-size: 1.25rem;
+  min-height: var(--form-ele-large);
+}
+
+.utah-design-system .button--large1x {
+  font-size: 1.5rem;
+  min-height: var(--form-ele-large1x);
+  padding: 0 var(--spacing-2xl);
+}
+
+.utah-design-system .button--icon {
+  display: flex;
+  align-items: center;
+}
+
+.utah-design-system .button--icon svg {
+  height: 0.8rem;
+  width: 0.8rem;
+  fill: currentColor;
+}
+
+.utah-design-system .button--icon-left {
+  margin-right: var(--spacing-xs);
+}
+
+.utah-design-system .button--icon-right {
+  margin-left: var(--spacing-xs);
+}
+
+.utah-design-system .button--primary-color {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.utah-design-system .button--primary-color:hover {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.utah-design-system .button--primary-color:hover svg {
+  fill: white;
+}
+
+.primary-color-is-light.utah-design-system .button--primary-color {
+  border-color: var(--primary-color-dark);
+  color: var(--primary-color-dark);
+}
+
+.primary-color-is-light.utah-design-system .button--primary-color:hover {
+  background-color: var(--primary-color-dark);
+  color: white;
+}
+
+.utah-design-system .button--secondary-color {
+  border-color: var(--secondary-color);
+  color: var(--secondary-color);
+}
+
+.utah-design-system .button--secondary-color:hover {
+  background-color: var(--secondary-color);
+  color: white;
+}
+
+.secondary-color-is-light.utah-design-system .button--secondary-color {
+  border-color: var(--secondary-color-dark);
+  color: var(--secondary-color-dark);
+}
+
+.secondary-color-is-light.utah-design-system .button--secondary-color:hover {
+  background-color: var(--secondary-color-dark);
+  color: white;
+}
+
+.utah-design-system .button--accent-color {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+
+.utah-design-system .button--accent-color:hover {
+  background-color: var(--accent-color);
+  color: white;
+}
+
+.accent-color-is-light.utah-design-system .button--accent-color {
+  border-color: var(--accent-color-dark);
+  color: var(--accent-color-dark);
+}
+
+.accent-color-is-light.utah-design-system .button--accent-color:hover {
+  background-color: var(--accent-color-dark);
+  color: white;
+}
+
+.utah-design-system .button--solid {
+  background: var(--gray-color);
+  color: white;
+}
+
+.utah-design-system .button--solid:hover {
+  background-color: var(--gray-dark-color);
+  border-color: var(--gray-dark-color);
+}
+
+.utah-design-system .button--solid.button--primary-color {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+  color: white;
+}
+
+.utah-design-system .button--solid.button--primary-color:hover {
+  background-color: var(--primary-color-dark);
+  border-color: var(--primary-color-dark);
+}
+
+.primary-color-is-light.utah-design-system .button--solid.button--primary-color {
+  color: var(--gray-on-primary-color);
+  border-color: var(--primary-color-dark);
+}
+
+.primary-color-is-light.utah-design-system .button--solid.button--primary-color:hover {
+  color: white;
+  border-color: var(--primary-color-dark);
+}
+
+.utah-design-system .button--solid.button--primary-color.contrast-border-dark {
+  border-color: var(--gray-on-primary-color);
+}
+
+.utah-design-system .button--solid.button--secondary-color {
+  background-color: var(--secondary-color);
+  border-color: var(--secondary-color);
+  color: white;
+}
+
+.utah-design-system .button--solid.button--secondary-color:hover {
+  background-color: var(--secondary-color-dark);
+  border-color: var(--secondary-color-dark);
+}
+
+.secondary-color-is-light.utah-design-system .button--solid.button--secondary-color {
+  color: var(--gray-on-secondary-color);
+  border-color: var(--secondary-color-dark);
+}
+
+.secondary-color-is-light.utah-design-system .button--solid.button--secondary-color:hover {
+  color: white;
+  border-color: var(--secondary-color-dark);
+}
+
+.utah-design-system .button--solid.button--secondary-color.contrast-border-dark {
+  border-color: var(--gray-on-secondary-color);
+}
+
+.utah-design-system .button--solid.button--accent-color {
+  background-color: var(--accent-color);
+  border-color: var(--accent-color);
+  color: white;
+}
+
+.utah-design-system .button--solid.button--accent-color:hover {
+  background-color: var(--accent-color-dark);
+  border-color: var(--accent-color-dark);
+}
+
+.accent-color-is-light.utah-design-system .button--solid.button--accent-color {
+  color: var(--gray-on-accent-color);
+  border-color: var(--accent-color-dark);
+}
+
+.accent-color-is-light.utah-design-system .button--solid.button--accent-color:hover {
+  color: white;
+  border-color: var(--accent-color-dark);
+}
+
+.utah-design-system .button--solid.button--accent-color.contrast-border-dark {
+  border-color: var(--gray-on-accent-color);
+}
+
+.utah-design-system .button--solid.contrast-border-light {
+  border-color: white;
+}
+
+.utah-design-system .button--solid[disabled], .utah-design-system .button--solid[disable]:hover {
+  cursor: not-allowed;
+  background: var(--form-ele-disabled-color) !important;
+  color: white !important;
+  border-color: var(--form-ele-disabled-color) !important;
+}
+
+.utah-design-system .primary-color-background .button--solid.contrast-border-dark {
+  border-color: var(--gray-on-primary-color);
+}
+
+.utah-design-system .secondary-color-background .button--solid.contrast-border-dark {
+  border-color: var(--gray-on-secondary-color);
+}
+
+.utah-design-system .accent-color-background .button--solid.contrast-border-dark {
+  border-color: var(--gray-on-accent-color);
+}
+
+.utah-design-system .dark-background-color .button {
+  border-color: white;
+  background: none;
+  color: white;
+}
+
+.utah-design-system .dark-background-color .button:hover {
+  border-color: white;
+  background: white;
+  color: var(--gray-color);
+}
+
+.utah-design-system .dark-background-color .button.button--primary-color {
+  border-color: var(--primary-color);
+  background: white;
+  color: var(--primary-color);
+}
+
+.utah-design-system .dark-background-color .button.button--primary-color:hover {
+  border-color: white;
+  background: var(--primary-color);
+  color: white;
+}
+
+.primary-color-is-light.utah-design-system .dark-background-color .button.button--primary-color {
+  border-color: var(--primary-color);
+  background: none;
+  color: var(--primary-color);
+}
+
+.primary-color-is-light.utah-design-system .dark-background-color .button.button--primary-color:hover {
+  background: var(--primary-color);
+  color: var(--gray-color);
+}
+
+.utah-design-system .dark-background-color .button.button--secondary-color {
+  border-color: var(--secondary-color);
+  background: white;
+  color: var(--secondary-color);
+}
+
+.utah-design-system .dark-background-color .button.button--secondary-color:hover {
+  border-color: white;
+  background: var(--secondary-color);
+  color: white;
+}
+
+.secondary-color-is-light.utah-design-system .dark-background-color .button.button--secondary-color {
+  border-color: var(--secondary-color);
+  background: none;
+  color: var(--secondary-color);
+}
+
+.secondary-color-is-light.utah-design-system .dark-background-color .button.button--secondary-color:hover {
+  background: var(--secondary-color);
+  color: var(--gray-color);
+}
+
+.utah-design-system .dark-background-color .button.button--accent-color {
+  border-color: var(--accent-color);
+  background: white;
+  color: var(--accent-color);
+}
+
+.utah-design-system .dark-background-color .button.button--accent-color:hover {
+  border-color: white;
+  background: var(--accent-color);
+  color: white;
+}
+
+.accent-color-is-light.utah-design-system .dark-background-color .button.button--accent-color {
+  border-color: var(--accent-color);
+  background: none;
+  color: var(--accent-color);
+}
+
+.accent-color-is-light.utah-design-system .dark-background-color .button.button--accent-color:hover {
+  background: var(--accent-color);
+  color: var(--gray-color);
+}
+
+.utah-design-system .dark-background-color .button--solid {
+  border-color: white;
+  background: white;
+  color: var(--gray-color);
+}
+
+.utah-design-system .dark-background-color .button--solid:hover {
+  border-color: white;
+  background: none;
+  color: white;
+}
+
+.utah-design-system .dark-background-color .button--solid.button--primary-color {
+  border-color: white;
+  background: var(--primary-color);
+  color: white;
+}
+
+.utah-design-system .dark-background-color .button--solid.button--primary-color:hover {
+  border-color: var(--primary-color);
+  background: white;
+  color: var(--primary-color);
+}
+
+.primary-color-is-light.utah-design-system .dark-background-color .button--solid.button--primary-color {
+  border-color: var(--primary-color);
+  background: var(--primary-color);
+  color: var(--gray-color);
+}
+
+.primary-color-is-light.utah-design-system .dark-background-color .button--solid.button--primary-color:hover {
+  background: var(--primary-color-dark);
+  color: white;
+}
+
+.utah-design-system .dark-background-color .button--solid.button--secondary-color {
+  border-color: white;
+  background: var(--secondary-color);
+  color: white;
+}
+
+.utah-design-system .dark-background-color .button--solid.button--secondary-color:hover {
+  border-color: var(--secondary-color);
+  background: white;
+  color: var(--secondary-color);
+}
+
+.secondary-color-is-light.utah-design-system .dark-background-color .button--solid.button--secondary-color {
+  border-color: var(--secondary-color);
+  background: var(--secondary-color);
+  color: var(--gray-color);
+}
+
+.secondary-color-is-light.utah-design-system .dark-background-color .button--solid.button--secondary-color:hover {
+  background: var(--secondary-color-dark);
+  color: white;
+}
+
+.utah-design-system .dark-background-color .button--solid.button--accent-color {
+  border-color: white;
+  background: var(--accent-color);
+  color: white;
+}
+
+.utah-design-system .dark-background-color .button--solid.button--accent-color:hover {
+  border-color: var(--accent-color);
+  background: white;
+  color: var(--accent-color);
+}
+
+.accent-color-is-light.utah-design-system .dark-background-color .button--solid.button--accent-color {
+  border-color: var(--accent-color);
+  background: var(--accent-color);
+  color: var(--gray-color);
+}
+
+.accent-color-is-light.utah-design-system .dark-background-color .button--solid.button--accent-color:hover {
+  background: var(--accent-color-dark);
+  color: white;
+}
+
+/*
+############     _color-swatches.scss      ############
+base color swatches for the design system
+*/
+/*
+############     _icon-button.scss      ############
+*/
+.utah-design-system .icon-button {
+  background: white;
+  border-radius: 999px;
+  border: 2px solid var(--gray-color);
+  font-size: 1rem;
+  min-height: 36px;
+  min-width: 36px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 200ms ease-in-out;
+  color: var(--gray-color);
+}
+
+.utah-design-system .icon-button:hover {
+  background: var(--gray-color);
+  color: white;
+}
+
+.utah-design-system .icon-button--solid {
+  background: var(--gray-color);
+  color: white;
+}
+
+.utah-design-system .icon-button--solid:hover {
+  background-color: var(--gray-dark-color);
+  border-color: var(--gray-dark-color);
+}
+
+.utah-design-system .icon-button--plain {
+  border-color: transparent;
+}
+
+.utah-design-system .icon-button--plain:hover {
+  background-color: #e4e4e4;
+  border-color: #e4e4e4;
+  color: var(--gray-dark-color);
+}
+
+.utah-design-system .icon-button__icon {
+  transition: all var(--timing-quick) ease-in-out;
+}
+
+.utah-design-system .icon-button__icon--rotate180 {
+  transform: rotate(180deg);
+}
+
+.input-wrapper {
+  margin: 0 0 var(--spacing-s) 0;
+}
+
+.form.form--stacked .input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  align-items: flex-start;
+}
+
+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;
+  box-shadow: var(--hover-gray-color) 0 0 0 0;
+  transition: box-shadow var(--timing-xquick) ease-in-out;
+}
+
+input[type=text]:hover {
+  box-shadow: var(--hover-gray-color) 0 0 0 5px;
+  border-color: black;
+}
+
+input[type=text]:focus-visible {
+  outline: 2px solid var(--form-ele-color);
+  outline-offset: 2px;
+  transition: none;
+}
+
+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;
+}
+
+input[type=checkbox]::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: var(--radius-circle);
+  z-index: -1;
+  box-shadow: var(--hover-gray-color) 0 0 0 0;
+  transition: box-shadow var(--timing-xquick) ease-in-out;
+}
+
+input[type=checkbox]:hover {
+  border-color: black;
+}
+
+input[type=checkbox]:hover::after {
+  box-shadow: var(--hover-gray-color) 0 0 0 7px;
+  border-color: black;
+}
+
+input[type=checkbox]::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;
+}
+
+input[type=checkbox]:checked {
+  border-width: 0;
+  background-color: var(--form-ele-color);
+}
+
+input[type=checkbox]:checked::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;
+}
+
+.input-wrapper label {
+  padding: 0 0 0 var(--spacing-2xs);
+}
+
+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;
+  box-shadow: var(--hover-gray-color) 0 0 0 0;
+  transition: box-shadow var(--timing-xquick) ease-in-out;
+}
+
+select:hover {
+  box-shadow: var(--hover-gray-color) 0 0 0 5px;
+  border-color: black;
+}
+
+select:focus-visible {
+  outline: 2px solid var(--form-ele-color);
+  outline-offset: 2px;
+  transition: none;
+}
+
+.info-box {
+  display: flex;
+  align-items: center;
+  min-height: var(--form-ele-medium);
+  background: white;
+  position: relative;
+  border-radius: var(--radius-small);
+}
+
+.info-box::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);
+}
+
+.info-box__content {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--spacing-s);
+}
+
+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);
+}
+
+input[type=radio]::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  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;
+}
+
+input[type=radio]:hover::before {
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 7px;
+}
+
+input[type=radio]:checked {
+  background-color: var(--secondary-color);
+  border: 1px solid var(--secondary-color);
+}
+
+input[type=radio]:checked::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%);
+}
+
+.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;
+}
+
+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;
+}
+
+.switch__wrapper {
+  min-width: 20px;
+  background: #7b7b7b;
+  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;
+  box-shadow: var(--hover-gray-color) 0 0 0 0;
+  transition: box-shadow var(--timing-xquick) ease-in-out;
+}
+
+.switch__wrapper--on {
+  background: var(--form-ele-color);
+}
+
+.switch__wrapper:hover {
+  box-shadow: var(--hover-gray-color) 0 0 0 5px;
+  border-color: black;
+}
+
+.switch__wrapper:has(input:focus) {
+  outline: 2px solid var(--form-ele-color);
+  outline-offset: 2px;
+  transition: none;
+}
+
+.switch--small.switch__wrapper {
+  min-height: var(--form-ele-small4x);
+}
+
+.switch--small .switch__slider {
+  height: var(--form-ele-small4x);
+  width: var(--form-ele-small4x);
+}
+
+.switch--small .switch__inner-label {
+  font-size: var(--font-size-xs);
+  height: var(--form-ele-small4x);
+  line-height: var(--form-ele-small4x);
+}
+
+.switch--large.switch__wrapper {
+  min-height: var(--form-ele-small1x);
+}
+
+.switch--large .switch__slider {
+  height: var(--form-ele-small1x);
+  width: var(--form-ele-small1x);
+}
+
+.switch__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;
+}
+
+.switch__slider--on {
+  left: 100%;
+  transform: translateX(calc(-100% - 2px));
+  background: white;
+}
+
+.switch__slider svg {
+  fill: var(--gray-color);
+  width: 0.65rem;
+  height: 0.65rem;
+}
+
+.switch__inner-label {
+  position: relative;
+  width: 100%;
+  height: var(--form-ele-small3x);
+  font-size: var(--font-size-s);
+  line-height: var(--font-size-s);
+}
+
+.switch__inner-label-on, .switch__inner-label-off {
+  width: calc(100% - var(--form-ele-2small1x));
+  position: absolute;
+  right: 2px;
+  opacity: 0;
+  transition: opacity var(--timing-quick);
+  text-align: center;
+  display: inline-block;
+}
+
+.switch__inner-label-on.show, .switch__inner-label-off.show {
+  opacity: 1;
+}
+
+.switch__inner-label-on {
+  color: white;
+  right: unset;
+  left: 2px;
+}
+
+.switch--disabled {
+  background: var(--form-ele-disabled-color);
+  cursor: not-allowed;
+}
+
+.switch--disabled.switch__wrapper--on {
+  background: var(--form-ele-color-light);
+}
+
+.input-wrapper--switch label {
+  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 #2a2a28;
+}
+
+.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 #7a7a77;
+  background: #7a7a77;
+  border-radius: 16px;
+}
+
+.switch-old::after {
+  left: 1px;
+  top: 4px;
+  background-color: #fff;
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  border: 1px solid #7a7a77;
+}
+
+.switch-old::after {
+  left: 16px;
+  border-color: #699957;
+  color: #699957;
+}
+
+.switch-old::before {
+  background-color: #699957;
+  border-color: #699957;
+}
+
+.utah-design-system .menu-bar {
+  background-color: var(--gray-light-color);
+}
+
+.utah-design-system .menu-bar ul {
+  list-style-type: none;
+  display: flex;
+  margin: 0 var(--spacing-xs) 0 var(--spacing-xs);
+  padding: 0;
+}
+
+.utah-design-system .menu-bar ul li.menu-item__search {
+  margin-left: auto;
+}
+
+.utah-design-system .menu-bar ul li 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);
+}
+
+.utah-design-system .menu-bar ul li a::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);
+}
+
+.utah-design-system .menu-bar ul li a .icon-chevron-down {
+  font-size: 1rem;
+  margin-right: -2px;
+}
+
+.utah-design-system .menu-bar ul li a:hover {
+  color: black;
+  box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
+}
+
+.utah-design-system .menu-bar ul li a.menu-item--selected::after {
+  background: var(--primary-color);
+}
+
+.utah-design-system .menu-bar ul li a .menu-item__search-icon {
+  font-size: var(--font-size-l);
+  line-height: 1rem;
+}
+
+.utah-design-system .menu-item__title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.utah-design-system .menu-item__button-title {
+  border: none;
+  padding: 0;
+  background: none;
+}
+
+.utah-design-system .menu-item__button-title:hover {
+  background: none;
+  color: var(--primary-color);
+}
+
+.utah-design-system .menu-item a {
+  text-decoration: none;
+  color: var(--gray-color);
+}
+
+.utah-design-system .menu-item a.menu-item--selected {
+  color: var(--primary-color);
+}
+
+.utah-design-system .menu-item__chevron {
+  transform: rotate(-90deg);
+}
+
+.utah-design-system .menu-item__chevron svg {
+  width: 10px;
+  height: 10px;
+}
+
+.utah-design-system .menu-item__chevron--open {
+  transform: rotate(0deg);
+}
+
+.utah-design-system .menu-item__sub-menu {
+  display: none;
+}
+
+.utah-design-system .menu-item__sub-menu--open {
+  display: block;
+}
+
+.utah-design-system .menu-side-panel {
+  margin: var(--spacing) 0 0 0;
+  font-size: var(--font-size-xs);
+}
+
+.utah-design-system .menu-side-panel:first-child {
+  margin: 0;
+}
+
+.utah-design-system .menu-side-panel__header {
+  font-size: var(--font-size);
+}
+
+.utah-design-system .menu-side-panel > ul {
+  margin-left: calc(0px - var(--spacing));
+}
+
+.utah-design-system .menu-side-panel ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.utah-design-system .menu-side-panel ul ul:first-of-type {
+  border-left: 1px solid #DBDBDB;
+  margin-left: var(--spacing);
+}
+
+.utah-design-system .menu-side-panel .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;
+}
+
+.utah-design-system .menu-side-panel .menu-item__title a:hover {
+  box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
+  color: var(--primary-color);
+}
+
+.utah-design-system .menu-side-panel .menu-item__title a.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);
+}
+
+.utah-design-system .menu-side-panel .menu-item__title a.menu-item--selected::after {
+  content: "";
+  position: absolute;
+  left: -3px;
+  top: 0;
+  width: 5px;
+  height: 100%;
+  background: var(--primary-color);
+  border-radius: var(--radius-circle);
+}
+
+.utah-design-system .menu-side-panel .menu-item button {
+  min-height: unset;
+  min-width: unset;
+}
+
+.utah-design-system .menu-side-panel .menu-item__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;
+}
+
+.utah-design-system .menu-side-panel .menu-item__button-title:hover {
+  box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
+}
+
+.utah-design-system .menu-side-panel .menu-item__chevron {
+  padding: var(--spacing-xs);
+}
+
+.utah-design-system .menu-side-panel .menu-item__chevron svg {
+  transition: transform var(--timing-quick) ease;
+}
+
+.documentation-template {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-width: var(--content-width-wide);
+  justify-content: space-around;
+  align-items: flex-start;
+}
+
+.documentation-template__wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.documentation-template__side-panel-left {
+  border-right: 1px solid var(--gray-border);
+  padding: var(--documentation-padding);
+  width: var(--documentation-left-width);
+}
+
+.documentation-template__content {
+  flex: 1 1 auto;
+  max-width: var(--documentation-width);
+  padding: var(--documentation-padding);
+}
+
+.documentation-template__content h1 {
+  margin: calc(-1 * var(--spacing-xs)) 0 0 0;
+}
+
+.documentation-template__content code svg {
+  height: 10px;
+}
+
+.documentation-template__content table .props-code-wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+}
+
+.documentation-template__side-panel-right {
+  position: sticky;
+  top: 0;
+  border-left: 1px solid var(--gray-border);
+  padding: var(--documentation-padding);
+  width: var(--documentation-right-width);
+}
+
+.landing-page-template {
+  display: flex;
+  justify-content: center;
+}
+
+.landing-page-template .content-width {
+  max-width: var(--content-width-narrow);
+}
+
+input.input--height-small,
+.input--height-small {
+  min-height: var(--form-ele-small);
+}
+
+input.input--height-small1x,
+.input--height-small1x {
+  min-height: var(--form-ele-small1x);
+}
+
+.spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  vertical-align: middle;
+}
+
+.spinner svg {
+  display: block;
+}
+
+.spinner svg path {
+  fill: none;
+}
+
+.spinner__animation {
+  animation: spinner-animation 0.5s linear infinite;
+}
+
+.spinner__track {
+  stroke: #b0b0b0;
+}
+
+.spinner__value {
+  stroke: var(--form-ele-color);
+  stroke-linecap: round;
+  transform-origin: center;
+  transition: stroke-dashoffset 0.2s cubic-bezier(0.4, 1, 0.75, 0.9);
+}
+
+@keyframes spinner-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(1turn);
+  }
+}
+table {
+  border-collapse: collapse;
+}
+
+table thead {
+  border-bottom: 1px solid var(--gray-color);
+}
+
+table thead tr th {
+  text-align: center;
+  font-weight: bold;
+  padding: var(--spacing-s);
+}
+
+table thead tr th.text-left {
+  text-align: left;
+}
+
+table thead tr th.text-right {
+  text-align: right;
+}
+
+table tbody tr td {
+  vertical-align: top;
+  padding: var(--spacing-s);
+}
+
+table.table--alt tbody tr:nth-child(2n) td {
+  background-color: #F5F5F5;
+}
+
+table.table--lines-x tbody tr td {
+  border-bottom: 1px solid var(--gray-medium-light-color);
+}
+
+table.table--lines-x tbody tr:last-child td {
+  border-bottom: 1px solid var(--gray-color);
+}
+
+.utah-design-system .on-this-page {
+  font-size: var(--font-size-xs);
+}
+
+.utah-design-system .on-this-page__header {
+  font-size: var(--font-size);
+  font-weight: bold;
+}
+
+.utah-design-system .on-this-page__list {
+  list-style-type: none;
+  padding: 0;
+  margin-left: calc(0px - var(--spacing));
+}
+
+.utah-design-system .on-this-page__list ul {
+  margin-left: var(--spacing);
+}
+
+.utah-design-system .on-this-page__list 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;
+}
+
+.utah-design-system .on-this-page__list a:hover {
+  box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
+  color: var(--primary-color);
+}
+
+/*
+############     _popup.scss      ############
+*/
+.utah-design-system .color-family {
+  display: flex;
+  margin: 0 0 var(--spacing-2xs) 0;
+}
+
+.utah-design-system .color-family__title {
+  margin: 0 var(--spacing-s) 0 0;
+  padding: 0 var(--spacing-s);
+  color: white;
+  border-radius: 999px;
+  min-height: unset;
+  border: none;
+}
+
+.utah-design-system .color-family__title.color-is-light {
+  color: var(--gray-color);
+}
+
+.utah-design-system .color-family__swatches {
+  list-style-type: none;
+  margin: 0 0 0 auto;
+  padding: 0;
+  display: flex;
+  gap: 2px;
+}
+
+.utah-design-system .color-family__swatches li {
+  padding: 0;
+}
+
+.utah-design-system .color-family__swatch {
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 0;
+  min-height: auto;
+  padding: 0;
+}
+
+/*
+############     _popup.scss      ############
+*/
+.popup {
+  position: fixed;
+  top: 25%;
+  left: 2%;
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+}
+
+.popup__title-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.popup__title {
+  padding: var(--spacing);
+}
+
+/*
+############     _components-index.scss      ############
+component specific, BEM (Block, Element, Modifier)
+@media for each component should be contained with the component.
+*/
+/* ---- Base Components ---- */
+/* ---- Project Components ---- */
+@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%);
+  }
+}
+/*
+############     _utilities.scss      ############
+utility classes, atomic css
+*/
+.content-width {
+  width: 100%;
+  max-width: var(--content-width);
+}
+
+.full-width {
+  width: 100%;
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+/* alignment */
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+/* flex */
+.flex {
+  display: flex;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-initial {
+  flex: 0 1 auto;
+}
+
+.flex-none {
+  flex: none;
+}
+
+/* flex - justify content */
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
+/* grid - justify self */
+.justify-self-auto {
+  justify-self: auto;
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
+.justify-self-center {
+  justify-self: center;
+}
+
+.justify-self-stretch {
+  justify-self: stretch;
+}
+
+/* flex - align items */
+.items-start {
+  align-items: flex-start;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-baseline {
+  align-items: baseline;
+}
+
+.items-stretch {
+  align-items: stretch;
+}
+
+/* flex - align self */
+.self-auto {
+  align-self: auto;
+}
+
+.self-start {
+  align-self: flex-start;
+}
+
+.self-end {
+  align-self: flex-end;
+}
+
+.self-center {
+  align-self: center;
+}
+
+.self-stretch {
+  align-self: stretch;
+}
+
+.self-baseline {
+  align-self: baseline;
+}
+
+/* flex/grid - gap */
+.gap-xs {
+  gap: var(--spacing-xs);
+}
+
+.gap-s {
+  gap: var(--spacing-s);
+}
+
+.gap {
+  gap: var(--spacing);
+}
+
+.gap-l {
+  gap: var(--spacing-l);
+}
+
+/* ----- Positioning ---- */
+.hcenter {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.vcenter {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.vcenter.right {
+  right: 0;
+}
+
+.vcenter.left {
+  left: 0;
+}
+
+.vcenter.hcenter {
+  transform: translate(-50%, -50%);
+}
+
+/* ----- Transformation ---- */
+.rotate90 {
+  transform: rotate(90deg);
+}
+
+.rotate180 {
+  transform: rotate(180deg);
+}
+
+.rotate270 {
+  transform: rotate(270deg);
+}
+
+/*
+PRINT SCSS
+ */
+@media print {
+  @page {
+    size: 8.5in 11in;
+    margin: 0.5in;
+  }
+  html, body {
+    font-family: "Source Sans Pro", sans-serif;
+    font-size: 8pt;
+    height: auto;
+    color: #000000;
+  }
+  .no-print {
+    display: none;
+  }
+  .avoid {
+    page-break-inside: avoid;
+  }
+  .page-break {
+    page-break-after: always;
+  }
+  .print-page-no-margin {
+    width: 8.5in;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+  }
+}
+/*
+############     _super-index.scss      ############
+Overall overrides, @media, themes, etc. that supersede styles higher in the pyramid
+*/
+/*
+############     _tip-index.scss      ############
+A place to add css temporarily
+NOTE: CSS added this this file should eventually be removed or
+located to the correct folder/file where it best belongs.
+*/