@utahdts/utah-design-system 0.0.1

package/README.md

@@ -0,0 +1,54 @@
+# utah-design-system
+
+A collection of styles and react components designed to make it quick and simple for developers to create web experiences using the Utah Design System.
+
+## What's included
+
+- Compiled CSS
+- SASS CSS
+- React components
+
+## Documentation
+
+Please see the [documentation site](https://utahdts.github.io/utah-design-system/) for all information related to the Utah Design System.
+
+## Install
+
+[![Build Status](https://img.shields.io/github/workflow/status/utahdts/utah-design-system/Build%20and%20Deploy?branch=dev&style=for-the-badge)](https://github.com/utahdts/utah-design-system/actions/workflows/dev-pages-deploy.yml)
+[![See it on NPM!](https://img.shields.io/npm/v/@utahdts/utah-design-system.svg?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@utahdts/utah-design-system)
+[![License](https://img.shields.io/npm/l/@utahdts/utah-design-system.svg?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
+[![issues](https://img.shields.io/github/issues-raw/utahdts/utah-design-system?style=for-the-badge)](https://github.com/utahdts/utah-design-system/issues)
+
+```bash
+$ npm i @utahdts/utah-design-system
+```
+
+### Using the React components
+
+```JavaScript
+import { DocumentationTemplate, LandingTemplate } from '@utahdts/utah-design-system';
+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';
+```
+
+### Using the files in Sass
+
+In most cases you can simply import the Sass file as illustrated below:
+
+```scss
+@import "~@utahdts/utah-design-system/css/6-components/base-components/buttons/button.scss";
+```
+
+## Pre-processed bundled resource
+
+At a limited scale, some files have been pre-processed to CSS so that it can be delivered via CDN and used in environments where this rendered resource is required.
+
+```
+unpkg.com/:package@:version/:file
+```
+
+| resource                | supports | CDN URL                                                                                 |
+|-------------------------|---|-----------------------------------------------------------------------------------------|
+| index.scss<br>(All CSS) |Auro WCs| https://unpkg.com/@utahdts/utah-design-system@:version/css/build/utah-design-system.css |
+

package/css/1-settings/_class-vars.scss

@@ -0,0 +1,11 @@
+/*
+############     _settings-index.scss      ############
+CSS Class Variables
+*/
+
+$base-class: ".utah-design-system";
+
+$primary-color-is-light: ".primary-color-is-light";
+$secondary-color-is-light: ".secondary-color-is-light";
+$accent-color-is-light: ".accent-color-is-light";
+$color-is-light: ".color-is-light";

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

@@ -0,0 +1,422 @@
+/*
+############     _color-swatches.scss      ############
+base color swatches for the design system
+*/
+
+$purple_00: #503854;
+$purple_01: #4e2d53;
+$purple_02: #4c2353;
+$purple_03: #4a1952;
+$purple_04: #490f52;
+$purple_05: #56205e;
+$purple_06: #63316a;
+$purple_07: #704277;
+$purple_08: #7d5383;
+$purple_09: #8a648f;
+$purple_10: #97759c;
+$purple_11: #a487a8;
+$purple_12: #b198b4;
+$purple_13: #bea9c1;
+$purple_14: #cbbacd;
+$purple_15: #d8cbd9;
+$purple_16: #e5dce6;
+$purple_17: #f2edf2;
+
+$light-purple-00: #4e3250;
+$light-purple-01: #622f65;
+$light-purple-02: #772c7a;
+$light-purple-03: #8b298f;
+$light-purple-04: #a027a5;
+$light-purple-05: #a636ab;
+$light-purple-06: #ad45b1;
+$light-purple-07: #b455b8;
+$light-purple-08: #bb64be;
+$light-purple-09: #c174c5;
+$light-purple-10: #c883cb;
+$light-purple-11: #cf93d2;
+$light-purple-12: #d6a2d8;
+$light-purple-13: #ddb1de;
+$light-purple-14: #e3c1e5;
+$light-purple-15: #ead0eb;
+$light-purple-16: #f1e0f2;
+$light-purple-17: #f8eff8;
+
+$slate-00: #3b3c52;
+$slate-01: #3b3d59;
+$slate-02: #3c3e61;
+$slate-03: #3d3f68;
+$slate-04: #3e4070;
+$slate-05: #4b4d7a;
+$slate-06: #595b84;
+$slate-07: #67688e;
+$slate-08: #757698;
+$slate-09: #8284a3;
+$slate-10: #9091ad;
+$slate-11: #9e9fb7;
+$slate-12: #acadc1;
+$slate-13: #babacb;
+$slate-14: #c7c8d6;
+$slate-15: #d5d6e0;
+$slate-16: #e3e3ea;
+$slate-17: #f1f1f4;
+
+$indigo-00: #343e51;
+$indigo-01: #2a4058;
+$indigo-02: #214360;
+$indigo-03: #174667;
+$indigo-04: #0e496f;
+$indigo-05: #1f5679;
+$indigo-06: #306383;
+$indigo-07: #41708d;
+$indigo-08: #527d98;
+$indigo-09: #648aa2;
+$indigo-10: #7597ac;
+$indigo-11: #86a4b7;
+$indigo-12: #97b1c1;
+$indigo-13: #a8becb;
+$indigo-14: #bacbd5;
+$indigo-15: #cbd8e0;
+$indigo-16: #dce5ea;
+$indigo-17: #edf2f4;
+
+$azul-00: #2f3d5a;
+$azul-01: #29447c;
+$azul-02: #234b9e;
+$azul-03: #1d52c0;
+$azul-04: #175ae2;
+$azul-05: #2765e4;
+$azul-06: #3871e6;
+$azul-07: #487de8;
+$azul-08: #5989ea;
+$azul-09: #6994ec;
+$azul-10: #7aa0ee;
+$azul-11: #8bacf0;
+$azul-12: #9bb8f2;
+$azul-13: #acc4f4;
+$azul-14: #bccff6;
+$azul-15: #cddbf8;
+$azul-16: #dde7fa;
+$azul-17: #eef3fc;
+
+$celadon-blue-00: #27424b;
+$celadon-blue-01: #205162;
+$celadon-blue-02: #1a6179;
+$celadon-blue-03: #147090;
+$celadon-blue-04: #0e80a7;
+$celadon-blue-05: #1f89ad;
+$celadon-blue-06: #3092b3;
+$celadon-blue-07: #419bb9;
+$celadon-blue-08: #52a4c0;
+$celadon-blue-09: #64adc6;
+$celadon-blue-10: #75b6cc;
+$celadon-blue-11: #86bfd3;
+$celadon-blue-12: #97c8d9;
+$celadon-blue-13: #a8d1df;
+$celadon-blue-14: #badae5;
+$celadon-blue-15: #cbe3ec;
+$celadon-blue-16: #dcecf2;
+$celadon-blue-17: #edf5f8;
+
+$celadon-green-00: #2a423f;
+$celadon-green-01: #26524d;
+$celadon-green-02: #23635b;
+$celadon-green-03: #1f7369;
+$celadon-green-04: #1c8478;
+$celadon-green-05: #2c8c81;
+$celadon-green-06: #3c958b;
+$celadon-green-07: #4c9e94;
+$celadon-green-08: #5ca79e;
+$celadon-green-09: #6dafa8;
+$celadon-green-10: #7db8b1;
+$celadon-green-11: #8dc1bb;
+$celadon-green-12: #9dcac5;
+$celadon-green-13: #add3ce;
+$celadon-green-14: #bedbd8;
+$celadon-green-15: #cee4e2;
+$celadon-green-16: #deedeb;
+$celadon-green-17: #eef6f5;
+
+$pine-green-00:#244334;
+$pine-green-01:#1d5037;
+$pine-green-02:#165d3b;
+$pine-green-03:#0f6a3f;
+$pine-green-04:#097843;
+$pine-green-05:#1a8150;
+$pine-green-06:#2c8b5d;
+$pine-green-07:#3d946b;
+$pine-green-08:#4f9e78;
+$pine-green-09:#60a886;
+$pine-green-10:#72b193;
+$pine-green-11:#84bba1;
+$pine-green-12:#95c5ae;
+$pine-green-13:#a7cebb;
+$pine-green-14:#b8d8c9;
+$pine-green-15:#cae2d6;
+$pine-green-16:#dbebe4;
+$pine-green-17:#edf5f1;
+
+$aspen-green-00:#2e4326;
+$aspen-green-01:#2e4e21;
+$aspen-green-02:#2e5a1d;
+$aspen-green-03:#2e6518;
+$aspen-green-04:#2e7114;
+$aspen-green-05:#3c7b24;
+$aspen-green-06:#4b8535;
+$aspen-green-07:#5a8f46;
+$aspen-green-08:#699957;
+$aspen-green-09:#78a367;
+$aspen-green-10:#87ad78;
+$aspen-green-11:#96b889;
+$aspen-green-12:#a5c29a;
+$aspen-green-13:#b4ccab;
+$aspen-green-14:#c3d6bb;
+$aspen-green-15:#d2e0cc;
+$aspen-green-16:#e1eadd;
+$aspen-green-17:#f0f4ee;
+
+$raptor-rock-00:#4b3b27;
+$raptor-rock-01:#634520;
+$raptor-rock-02:#7b501a;
+$raptor-rock-03:#935a13;
+$raptor-rock-04:#ac650d;
+$raptor-rock-05:#b1701e;
+$raptor-rock-06:#b77b2f;
+$raptor-rock-07:#bd8640;
+$raptor-rock-08:#c39152;
+$raptor-rock-09:#c99c63;
+$raptor-rock-10:#cfa774;
+$raptor-rock-11:#d5b286;
+$raptor-rock-12:#dbbd97;
+$raptor-rock-13:#e1c8a8;
+$raptor-rock-14:#e7d3b9;
+$raptor-rock-15:#eddecb;
+$raptor-rock-16:#f3e9dc;
+$raptor-rock-17:#f9f4ed;
+
+$orange-00:#543623;
+$orange-01:#713c1a;
+$orange-02:#8f4211;
+$orange-03:#ad4808;
+$orange-04:#cb4e00;
+$orange-05:#ce5a12;
+$orange-06:#d26724;
+$orange-07:#d67336;
+$orange-08:#d98048;
+$orange-09:#dd8d5b;
+$orange-10:#e1996d;
+$orange-11:#e5a67f;
+$orange-12:#e8b391;
+$orange-13:#ecbfa3;
+$orange-14:#f0ccb6;
+$orange-15:#f3d9c8;
+$orange-16:#f7e5da;
+$orange-17:#fbf2ec;
+
+$red-rock-00:#5d3122;
+$red-rock-01:#71321c;
+$red-rock-02:#853317;
+$red-rock-03:#993412;
+$red-rock-04:#ad360d;
+$red-rock-05:#b2441e;
+$red-rock-06:#b8522f;
+$red-rock-07:#be6140;
+$red-rock-08:#c46f52;
+$red-rock-09:#ca7d63;
+$red-rock-10:#d08c74;
+$red-rock-11:#d69a86;
+$red-rock-12:#dba897;
+$red-rock-13:#e1b7a8;
+$red-rock-14:#e7c5b9;
+$red-rock-15:#edd3cb;
+$red-rock-16:#f3e2dc;
+$red-rock-17:#f9f0ed;
+
+$rose-red-00:#67292c;
+$rose-red-01:#772226;
+$rose-red-02:#881b20;
+$rose-red-03:#99141a;
+$rose-red-04:#aa0d15;
+$rose-red-05:#b01e25;
+$rose-red-06:#b62f36;
+$rose-red-07:#bc4047;
+$rose-red-08:#c25257;
+$rose-red-09:#c86368;
+$rose-red-10:#ce7479;
+$rose-red-11:#d4868a;
+$rose-red-12:#da979a;
+$rose-red-13:#e0a8ab;
+$rose-red-14:#e6b9bc;
+$rose-red-15:#eccbcc;
+$rose-red-16:#f2dcdd;
+$rose-red-17:#f8edee;
+
+$electric-blue-00:#26424e;
+$electric-blue-01:#2d6379;
+$electric-blue-02:#3584a5;
+$electric-blue-03:#3da5d0;
+$electric-blue-04:#45c6ff;
+$electric-blue-05:#52caff;
+$electric-blue-06:#5fceff;
+$electric-blue-07:#6cd2ff;
+$electric-blue-08:#7ad6ff;
+$electric-blue-09:#87daff;
+$electric-blue-10:#94deff;
+$electric-blue-11:#a2e2ff;
+$electric-blue-12:#afe6ff;
+$electric-blue-13:#bceaff;
+$electric-blue-14:#c9eeff;
+$electric-blue-15:#d7f2ff;
+$electric-blue-16:#e4f6ff;
+$electric-blue-17:#f1faff;
+
+$electric-orange-00:#4f392d;
+$electric-orange-01:#7a472b;
+$electric-orange-02:#a6552a;
+$electric-orange-03:#d26328;
+$electric-orange-04:#ff7227;
+$electric-orange-05:#ff7c36;
+$electric-orange-06:#ff8645;
+$electric-orange-07:#ff9055;
+$electric-orange-08:#ff9a64;
+$electric-orange-09:#ffa474;
+$electric-orange-10:#ffae83;
+$electric-orange-11:#ffb893;
+$electric-orange-12:#ffc2a2;
+$electric-orange-13:#ffccb1;
+$electric-orange-14:#ffd6c1;
+$electric-orange-15:#ffe0d0;
+$electric-orange-16:#ffeae0;
+$electric-orange-17:#fff4ef;
+
+$electric-yellow-00:#463d29;
+$electric-yellow-01:#745a1e;
+$electric-yellow-02:#a27714;
+$electric-yellow-03:#d0940a;
+$electric-yellow-04:#ffb100;
+$electric-yellow-05:#ffb612;
+$electric-yellow-06:#ffbc24;
+$electric-yellow-07:#ffc136;
+$electric-yellow-08:#ffc748;
+$electric-yellow-09:#ffcc5b;
+$electric-yellow-10:#ffd26d;
+$electric-yellow-11:#ffd87f;
+$electric-yellow-12:#ffdd91;
+$electric-yellow-13:#ffe3a3;
+$electric-yellow-14:#ffe8b6;
+$electric-yellow-15:#ffeec8;
+$electric-yellow-16:#fff3da;
+$electric-yellow-17:#fff9ec;
+
+$iris-00:#483948;
+$iris-01:#685568;
+$iris-02:#897289;
+$iris-03:#a98faa;
+$iris-04:#caaccb;
+$iris-05:#cdb1ce;
+$iris-06:#d1b7d2;
+$iris-07:#d5bdd6;
+$iris-08:#d9c3d9;
+$iris-09:#dcc9dd;
+$iris-10:#e0cfe1;
+$iris-11:#e4d5e5;
+$iris-12:#e8dbe8;
+$iris-13:#ece1ec;
+$iris-14:#efe7f0;
+$iris-15:#f3edf3;
+$iris-16:#f7f3f7;
+$iris-17:#fbf9fb;
+
+$sage-green-00:#31432e;
+$sage-green-01:#4b6446;
+$sage-green-02:#65855f;
+$sage-green-03:#7fa678;
+$sage-green-04:#9ac791;
+$sage-green-05:#a1cb98;
+$sage-green-06:#a8cfa0;
+$sage-green-07:#afd3a8;
+$sage-green-08:#b6d7b0;
+$sage-green-09:#bedbb8;
+$sage-green-10:#c5dfc0;
+$sage-green-11:#cce3c8;
+$sage-green-12:#d3e7cf;
+$sage-green-13:#daebd7;
+$sage-green-14:#e2efdf;
+$sage-green-15:#e9f3e7;
+$sage-green-16:#f0f7ef;
+$sage-green-17:#f7fbf7;
+
+$light-orange-00: #4f392d;
+$light-orange-01: #7b472b;
+$light-orange-02: #a7552a;
+$light-orange-03: #d36328;
+$light-orange-04: #ff9d55;
+$light-orange-05: #ffa461;
+$light-orange-06: #ffab6d;
+$light-orange-07: #ffb279;
+$light-orange-08: #ffb985;
+$light-orange-09: #ffc091;
+$light-orange-10: #ffc79d;
+$light-orange-11: #ffceaa;
+$light-orange-12: #ffd5b6;
+$light-orange-13: #ffdcc2;
+$light-orange-14: #ffe3ce;
+$light-orange-15: #ffeada;
+$light-orange-16: #fff1e6;
+$light-orange-17: #fff8f2;
+
+$neutral-gray-00: #1f1f1f;
+$neutral-gray-01: #292929;
+$neutral-gray-02: #333333;
+$neutral-gray-03: #3d3d3d;
+$neutral-gray-04: #474747;
+$neutral-gray-05: #545454;
+$neutral-gray-06: #616161;
+$neutral-gray-07: #6e6e6e;
+$neutral-gray-08: #7b7b7b;
+$neutral-gray-09: #888888;
+$neutral-gray-10: #959595;
+$neutral-gray-11: #a3a3a3;
+$neutral-gray-12: #b0b0b0;
+$neutral-gray-13: #bdbdbd;
+$neutral-gray-14: #cacaca;
+$neutral-gray-15: #d7d7d7;
+$neutral-gray-16: #e4e4e4;
+$neutral-gray-17: #f1f1f1;
+
+$warm-gray-00: #101010;
+$warm-gray-01: #1d1d1c;
+$warm-gray-02: #2a2a28;
+$warm-gray-03: #373734;
+$warm-gray-04: #454541;
+$warm-gray-05: #52524e;
+$warm-gray-06: #5f5f5c;
+$warm-gray-07: #6c6c69;
+$warm-gray-08: #7a7a77;
+$warm-gray-09: #878784;
+$warm-gray-10: #949492;
+$warm-gray-11: #a2a2a0;
+$warm-gray-12: #afafad;
+$warm-gray-13: #bcbcbb;
+$warm-gray-14: #c9c9c8;
+$warm-gray-15: #d7d7d6;
+$warm-gray-16: #e4e4e3;
+$warm-gray-17: #f1f1f1;
+
+$cool-gray-00: #1a1e21;
+$cool-gray-01: #22282c;
+$cool-gray-02: #2b3237;
+$cool-gray-03: #343c42;
+$cool-gray-04: #3d474e;
+$cool-gray-05: #4a545a;
+$cool-gray-06: #586167;
+$cool-gray-07: #666e73;
+$cool-gray-08: #747b80;
+$cool-gray-09: #82888d;
+$cool-gray-10: #909599;
+$cool-gray-11: #9ea3a6;
+$cool-gray-12: #abb0b3;
+$cool-gray-13: #b9bdbf;
+$cool-gray-14: #c7cacc;
+$cool-gray-15: #d5d7d9;
+$cool-gray-16: #e3e4e5;
+$cool-gray-17: #f1f1f2;

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

@@ -0,0 +1,48 @@
+/*
+############     _font-size.scss      ############
+Font size variables
+*/
+@use "../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  --font-size-2xs: .8125rem; //13
+  --font-size-xs:  .875rem;  //14
+  --font-size-s:   .9375rem; //15
+  --font-size:     1rem;     //16
+  --font-size-m:   1.125rem; //18
+  --font-size-l:   1.25rem;  //20
+  --font-size-xl:  1.5rem;   //24
+  --font-size-2xl: 1.75rem;  //28
+  --font-size-3xl: 2rem;     //32
+  --font-size-4xl: 2.5rem;   //40
+  --font-size-5xl: 3rem;     //48
+  --font-size-6xl: 3.5rem;   //56
+  --font-size-7xl: 4.5rem;   //72
+}
+
+.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); }
+
+
+#{class-vars.$base-class} {
+  --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); }

package/css/1-settings/_grid.scss

@@ -0,0 +1,39 @@
+/*
+############     _font-size.scss      ############
+Grid variables
+*/
+@use "../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  --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);
+
+  &--2col {
+    grid-template-columns: 1fr 1fr;
+  }
+  &--3col {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  &--4col {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+
+  .grid-column-span-2 {
+    grid-column: span 2;
+  }
+}

package/css/1-settings/_icons.scss

@@ -0,0 +1,6 @@
+@use "../1-settings/class-vars";
+
+#{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");
+}

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

@@ -0,0 +1,116 @@
+/*
+############     _settings-index.scss      ############
+variables and settings
+*/
+
+@use "class-vars";
+@use "spacing";
+@use "grid";
+@use "font-stuff";
+@use "color-swatches";
+@use "icons";
+
+#{class-vars.$base-class} {
+  /* 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: #{color-swatches.$azul-05};
+  --form-ele-color-light: #{color-swatches.$azul-10};
+  --form-ele-disabled-color: #{color-swatches.$neutral-gray-10};
+
+  /* ######## --------------------------------------------- ######## */
+
+  --gray-color: #{color-swatches.$neutral-gray-04};
+  --gray-medium-color: #{color-swatches.$neutral-gray-06};
+  --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};
+
+  --hover-gray-color: rgba(0,0,0,0.07);
+  --hover-gray-color-opaque: rgba(233,233,233);
+
+  --code-color: #{color-swatches.$neutral-gray-16};
+  --gray-border: #{color-swatches.$neutral-gray-15};
+
+
+  /* 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;      //small switch
+  --form-ele-small3x: 1rem;
+  --form-ele-small2x: 1.25rem;
+  --form-ele-small1x: 1.5rem;
+  --form-ele-small: 1.875rem;    //small button
+  --form-ele-medium: 2.25rem;    //medium button
+  --form-ele-large: 2.5rem;      //large button
+  --form-ele-large1x: 3.125rem;  //large1x button
+
+  --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; }
+