feat: add large short modal size and fix cloud colors (#680)

Author: jake-bassett

projects/assets-library/assets/styles/_color-palette.scss

@@ -78,9 +78,9 @@ $gray-7: #272c2e;
 $gray-8: #171a1c;
 $gray-9: #080909;
 
-$cloud-1: #a1c5e0;
+$cloud-1: #edf4f9;
 $cloud-2: #c7ddec;
-$cloud-3: #edf4f9;
+$cloud-3: #a1c5e0;
 
 $brown-1: #9e4c41;
 
@@ -111,7 +111,7 @@ $color-text: $gray-7;
 $color-text-label: $gray-4;
 $color-text-body: $gray-9;
 $color-text-disabled: $gray-5;
-$color-text-highlight: $cloud-1;
+$color-text-highlight: $cloud-3;
 $color-text-emphasis: $blue-5;
 
 // Elements

projects/components/src/modal/modal-container.component.scss

@@ -21,6 +21,11 @@
     width: 456px;
   }
 
+  &.modal-size-large-short {
+    height: 540px;
+    width: 640px;
+  }
+
   &.modal-size-large {
     height: 720px;
     width: 640px;

projects/components/src/modal/modal.ts

@@ -13,6 +13,7 @@ export interface ModalConfig<TData = unknown> {
 export const enum ModalSize {
   Small = 'small',
   Medium = 'medium',
+  LargeShort = 'large-short',
   Large = 'large',
   LargeTall = 'large-tall',
   MediumWide = 'medium-wide'