Merge release/2.3.0 into main branch (#1081)

* Use modal backdrop z index on drawer backdrop (#1063)

* use Inter font (#1062)

* FormGroup - update helper text, focus states (#1066)

* remove window from Avatar classname (#1068)

* add border to Card under Synthesized class (#1071)

* Add Synthesis colors from Figma (#1069)

* add pointer to CheckboxButton and RadioButton (#1074)

* update Button to use Synthesis colors (#1076)

* Implements Synthesis styles for tabs component (#1077)

* Implements Synthesis styles for Select component (#1079)

* Synthesize Alert / Toast colors (#1080)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "dependencies": {
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",

scss/baseline.scss

@@ -2,7 +2,7 @@
 @import './typography';
 
 body {
-  font-family: $font-family;
-  font-size: $font-size-base;
+  font-family: $synth-font-family;
+  font-size: $synth-font-size-base;
   color: $ux-gray-900;
 }

scss/buttons.scss

@@ -18,6 +18,8 @@
   }
 }
 
+$synthesis-primary: $synth-primary-cta-blue;
+
 $primary: $ux-emerald-600;
 $danger: $ux-red;
 $warning: $ux-yellow-400;
@@ -74,6 +76,42 @@ $warning: $ux-yellow-400;
   }
 }
 
+@mixin synthesis-btn-primary {
+  $btn-primary-background: $synthesis-primary;
+  $btn-primary-border: $synthesis-primary;
+  $btn-primary-color: $ux-white;
+
+  $btn-primary-hover-background: $synth-dark-background-selected-blue;
+  $btn-primary-hover-border: $synth-dark-background-selected-blue;
+  $btn-primary-hover-color: $ux-white;
+
+  $btn-primary-active-background: $synth-dark-background-pressed-blue;
+  $btn-primary-active-border: $synth-dark-background-pressed-blue;
+  $btn-primary-active-color: $ux-white;
+
+  @include button-variant(
+    $btn-primary-background, 
+    $btn-primary-border,
+    $btn-primary-color,
+
+    $btn-primary-hover-background,
+    $btn-primary-hover-border,
+    $btn-primary-hover-color,
+
+    $btn-primary-active-background,
+    $btn-primary-active-border,
+    $btn-primary-active-color,
+  );
+
+  &:focus-visible {
+    @include btn-focus-outline;
+  }
+
+  &:active, &:focus {
+    @include btn-remove-bootstrap-focus-outline;
+  }
+}
+
 @mixin btn-outline-primary {
   $btn-outline-primary-color: $primary;
   $btn-outline-primary-color-hover: $ux-white;
@@ -111,6 +149,43 @@ $warning: $ux-yellow-400;
   }
 }
 
+@mixin synthesis-btn-outline-primary {
+  $btn-outline-primary-color: $synthesis-primary;
+  $btn-outline-primary-color-hover: $ux-white;
+
+  $btn-outline-primary-hover-background: $synth-dark-background-selected-blue;
+  $btn-outline-primary-hover-border: $synth-dark-background-selected-blue;
+  $btn-outline-primary-hover-color: $ux-white;
+
+  $btn-outline-primary-border: $synthesis-primary;
+
+  $btn-outline-primary-active-background: $synth-dark-background-pressed-blue;
+  $btn-outline-primary-active-border-color: $synth-dark-background-pressed-blue;
+
+  @include button-outline-variant(
+    $btn-outline-primary-color, 
+    $btn-outline-primary-color-hover,
+
+    $btn-outline-primary-hover-background,
+    $btn-outline-primary-hover-border,
+    $btn-outline-primary-hover-color,
+  );
+  border-color: $btn-outline-primary-border;
+
+  &:active {
+    background-color: $btn-outline-primary-active-background;
+    border-color: $btn-outline-primary-active-border-color;
+  }
+
+  &:focus-visible {
+    @include btn-focus-outline;
+  }
+
+  &:active, &:focus {
+    @include btn-remove-bootstrap-focus-outline;
+  }
+}
+
 @mixin btn-danger {
   $btn-danger-background: $danger;
   $btn-danger-border: $danger;

scss/colors.scss

@@ -2,3 +2,4 @@
 @import './colors/inputs';
 @import './colors/mod_rainbow';
 @import './colors/palette';
+@import './colors/synthesis-palette';

scss/colors/synthesis-palette.scss

@@ -0,0 +1,37 @@
+// stoplight color system
+$synth-success-green-dark: #015029;
+$synth-success-green-medium: #09914f;
+$synth-success-green-light: #d4f6e5;
+
+$synth-error-red-dark: #c71f1f;
+$synth-error-red-medium: #e03131;
+$synth-error-red-light: #fae1e1;
+
+$synth-warning-amber-dark: #fbda36;
+$synth-warning-amber-medium: #ffe356;
+$synth-warning-amber-light: #fff1ab;
+$synth-warning-amber-alternate: #f59c27;
+
+// neutrals
+$synth-alert-bg-neutral: #f4f4f4;
+$synth-div-stroke-neutral: #dedede;
+$synth-header-neutral: #fbfbfb;
+$synth-page-neutral: #fdfdfd;
+$synth-text-neutral: #1b1b1b;
+$synth-unselected-neutral: #5b5b5b;
+
+// main schema - visual hierarchy
+$synth-accent-green: #158d71;
+$synth-dark-background-selected-blue: #162c4e;
+$synth-dark-background-pressed-blue: #010812;
+$synth-hover-state: #eef9f6;
+$synth-indicator-stroke-green: #91cabb;
+$synth-navbar-blue: #010812;
+$synth-primary-cta-blue: #162c4e;
+$synth-selected-state-green: #c6e2db;
+
+// feedback and signifier colors
+$synth-hyperlink-color: #3f6dca;
+
+$synth-hover-blue: #e5ecff;
+$synth-header-gray-blue: #eef2f8;

scss/forms/form_control_label.scss

@@ -3,29 +3,28 @@
 @import '../typography';
 
 .FormControlLabel {
-  @include font-type-30;
+  @include synth-font-type-30;
   align-items: center;
   color: $ux-gray-900;
   display: flex;
   margin-bottom: 0.5rem;
 
   &--with-children {
-    @include font-type-30--medium;
+    @include synth-font-type-30--medium;
 
     align-items: flex-start;
     flex-direction: column;
     display: flex;
   }
 
   &__label {
-    align-items: flex-start;
+    align-items: center;
     display: flex;
     flex-direction: row;
   }
 
   &__helper-text {
-    @include font-type-30--medium;
-    font-weight: 100;
+    @include synth-font-type-10--uppercase;
   }
 
   &__control {
@@ -34,7 +33,7 @@
   }
 
   &__children {
-    @include font-type-30--medium;
+    @include synth-font-type-30--medium;
 
     font-weight: 100;
     margin-top: 0.5rem;

scss/forms/form_group.scss

@@ -15,11 +15,11 @@
     padding: 1rem;
 
     .InputLabel {
-      @include font-type-30--bold;
+      @include synth-font-type-30--bold;
       margin-bottom: 0.5rem;
 
       &__helper-text {
-        @include font-type-30;
+        @include synth-font-type-30;
         font-weight: 100;
         color: $ux-gray-900;
       }
@@ -57,19 +57,17 @@
   }
 
   &__helper-text {
-    @include font-type-20--medium;
-    font-weight: 100;
+    @include synth-font-type-20;
     color: $ux-gray-900;
-    padding: .375rem 0;
-    margin: 0;
+    margin: 0 0 0.75rem;
 
     &--pre {
       white-space: pre-wrap;
     }
   }
 
   &__invalid-feedback {
-    @include font-type-20--medium;
+    @include synth-font-type-20--medium;
     color: $ux-red;
     padding: .375rem 0;
     margin: 0;
@@ -80,12 +78,12 @@
   }
 
   .form-control {
-    @include font-type-30;
+    @include synth-font-type-30;
     height: 2.25rem;
   }
 
   textarea.form-control {
-    @include font-type-30;
+    @include synth-font-type-30;
     height: auto;
   }
 

scss/forms/input_label.scss

@@ -2,14 +2,14 @@
 @import '../typography';
 
 .InputLabel, .InputLegend {
-  @include font-type-30--bold;
+  @include synth-font-type-30--bold;
   display: flex;
+  align-items: center;
   flex-wrap: wrap;
   margin-bottom: 0.375rem;
 
   &__helper-text {
-    @include font-type-30--medium;
-    font-weight: 100;
+    @include synth-font-type-10--uppercase;
     color: $ux-gray-900;
   }
 }

scss/global.scss

@@ -1,3 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
 @import './theme';
 @import './baseline';

scss/inputs.scss

@@ -1,2 +1,2 @@
 $input-box-shadow: inset 0px 2px 2px rgba(225, 228, 232, 0.65);
-$input-focus-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075);
+$input-focus-box-shadow: none;