Add Synthesis colors from Figma

user-interviews · Nov 20, 2023 · 26020f6 · 26020f6
1 parent 9aa9e48
commit 26020f6
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git a/scss/colors/synthesis-palette.scss b/scss/colors/synthesis-palette.scss
@@ -0,0 +1,36 @@
+// stoplight color system
+$synth-green-1-success: #015029;
+$synth-green-2-success: #09914f;
+$synth-green-3-success: #d4f6e5;
+
+$synth-red-1-error: #c71f1f;
+$synth-red-2-error: #e03131;
+$synth-red-3-error: #fae1e1;
+
+$synth-yellow-1-warn: #fbda36;
+$synth-yellow-2-warn: #ffe356;
+$synth-yellow-3-warn: #fff1ab;
+
+// neutrals
+$synth-alert-bg-gray: #f4f4f4;
+$synth-div-stroke-gray: #dedede;
+$synth-header-gray: #fbfbfb;
+$synth-page-white: #fdfdfd;
+$synth-text-black: #1b1b1b;
+$synth-unselected-gray: #5b5b5b;
+
+// main schema - visual hierarchy
+$synth-accent-green: #158d71;
+$synth-dark-background-selected-blue: #162c4e;
+$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: #3f6dca;
+$synth-orange-1-warn: #f59c27;
+
+$synth-hover-blue: #e5ecff;
+$synth-header-gray-blue: #eef2f8;
diff --git a/scss/variables.scss b/scss/variables.scss
@@ -1,6 +1,34 @@
 @import './colors/palette';
+@import './colors/synthesis-palette';
 
 :export {
+  SYNTH_GREEN_1_SUCCESS: $synth-green-1-success;
+  SYNTH_GREEN_2_SUCCESS: $synth-green-2-success;
+  SYNTH_GREEN_3_SUCCESS: $synth-green-3-success;
+  SYNTH_RED_1_ERROR: $synth-red-1-error;
+  SYNTH_RED_2_ERROR: $synth-red-2-error;
+  SYNTH_RED_3_ERROR: $synth-red-3-error;
+  SYNTH_YELLOW_1_WARN: $synth-yellow-1-warn;
+  SYNTH_YELLOW_2_WARN: $synth-yellow-2-warn;
+  SYNTH_YELLOW_3_WARN: $synth-yellow-3-warn;
+  SYNTH_ALERT_BG_GRAY: $synth-alert-bg-gray;
+  SYNTH_DIV_STROKE_GRAY: $synth-div-stroke-gray;
+  SYNTH_HEADER_GRAY: $synth-header-gray;
+  SYNTH_PAGE_WHITE: $synth-page-white;
+  SYNTH_TEXT_BLACK: $synth-text-black;
+  SYNTH_UNSELECTED_GRAY: $synth-unselected-gray;
+  SYNTH_ACCENT_GREEN: $synth-accent-green;
+  SYNTH_DARK_BACKGROUND_SELECTED_BLUE: $synth-dark-background-selected-blue;
+  SYNTH_HOVER_STATE: $synth-hover-state;
+  SYNTH_INDICATOR_STROKE_GREEN: $synth-indicator-stroke-green;
+  SYNTH_NAVBAR_BLUE: $synth-navbar-blue;
+  SYNTH_PRIMARY_CTA_BLUE: $synth-primary-cta-blue;
+  SYNTH_SELECTED_STATE_GREEN: $synth-selected-state-green;
+  SYNTH_HYPERLINK: $synth-hyperlink;
+  SYNTH_ORANGE_1_WARN: $synth-orange-1-warn;
+  SYNTH_HOVER_BLUE: $synth-hover-blue;
+  SYNTH_HEADER_GRAY_BLUE: $synth-header-gray-blue;
+
   UX_BLACK: $ux-black;
   UX_BLUE: $ux-blue;
   UX_CREAM: $ux-cream;