From 8cb344ddde35e629bf63e54ce91a075c0a92958c Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Wed, 23 Feb 2022 15:41:50 -0600
Subject: [PATCH] UX: Change color functions to match original primary,
 tertiary functions (#16040)

* UX: Change the way new primary colors are calculated
---
 .../foundation/color_transformations.scss     | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/common/foundation/color_transformations.scss b/app/assets/stylesheets/common/foundation/color_transformations.scss
index 6f73dab6a48..ed24ed6f2f6 100644
--- a/app/assets/stylesheets/common/foundation/color_transformations.scss
+++ b/app/assets/stylesheets/common/foundation/color_transformations.scss
@@ -11,16 +11,16 @@ $primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
 $primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;
 
 //primary-numbers
-$primary-50: blend-two-colors($primary, $secondary, 5%) !default;
-$primary-100: blend-two-colors($primary, $secondary, 10%) !default;
-$primary-200: blend-two-colors($primary, $secondary, 20%) !default;
-$primary-300: blend-two-colors($primary, $secondary, 30%) !default;
-$primary-400: blend-two-colors($primary, $secondary, 40%) !default;
-$primary-500: blend-two-colors($primary, $secondary, 50%) !default;
-$primary-600: blend-two-colors($primary, $secondary, 60%) !default;
-$primary-700: blend-two-colors($primary, $secondary, 70%) !default;
-$primary-800: blend-two-colors($primary, $secondary, 80%) !default;
-$primary-900: blend-two-colors($primary, $secondary, 90%) !default;
+$primary-50: dark-light-diff($primary, $secondary, 97%, -82%) !default;
+$primary-100: dark-light-diff($primary, $secondary, 94%, -80%) !default;
+$primary-200: dark-light-diff($primary, $secondary, 90%, -78%) !default;
+$primary-300: dark-light-diff($primary, $secondary, 80%, -60%) !default;
+$primary-400: dark-light-diff($primary, $secondary, 70%, -45%) !default;
+$primary-500: dark-light-diff($primary, $secondary, 60%, -40%) !default;
+$primary-600: dark-light-diff($primary, $secondary, 50%, -35%) !default;
+$primary-700: dark-light-diff($primary, $secondary, 30%, -30%) !default;
+$primary-800: dark-light-diff($primary, $secondary, 30%, -25%) !default;
+$primary-900: dark-light-diff($primary, $secondary, 15%, -10%) !default;
 
 $header_primary-low: blend-header-primary-background(10%) !default;
 $header_primary-low-mid: blend-header-primary-background(35%) !default;
@@ -45,16 +45,16 @@ $tertiary-hover: dark-light-choose(
 ) !default;
 
 //tertiary-numbers
-$tertiary-50: dark-light-diff($tertiary, $secondary, 95%, -80%) !default;
-$tertiary-100: dark-light-diff($tertiary, $secondary, 90%, -75%) !default;
-$tertiary-200: dark-light-diff($tertiary, $secondary, 80%, -65%) !default;
-$tertiary-300: dark-light-diff($tertiary, $secondary, 70%, -55%) !default;
-$tertiary-400: dark-light-diff($tertiary, $secondary, 60%, -45%) !default;
-$tertiary-500: dark-light-diff($tertiary, $secondary, 50%, -35%) !default;
-$tertiary-600: dark-light-diff($tertiary, $secondary, 40%, -25%) !default;
-$tertiary-700: dark-light-diff($tertiary, $secondary, 30%, -15%) !default;
-$tertiary-800: dark-light-diff($tertiary, $secondary, 20%, -5%) !default;
-$tertiary-900: dark-light-diff($tertiary, $secondary, 10%, 0%) !default;
+$tertiary-50: dark-light-diff($tertiary, $secondary, 90%, -75%) !default;
+$tertiary-100: dark-light-diff($tertiary, $secondary, 88%, -72%) !default;
+$tertiary-200: dark-light-diff($tertiary, $secondary, 87%, -69%) !default;
+$tertiary-300: dark-light-diff($tertiary, $secondary, 85%, -65%) !default;
+$tertiary-400: dark-light-diff($tertiary, $secondary, 74%, -58%) !default;
+$tertiary-500: dark-light-diff($tertiary, $secondary, 63%, -52%) !default;
+$tertiary-600: dark-light-diff($tertiary, $secondary, 50%, -45%) !default;
+$tertiary-700: dark-light-diff($tertiary, $secondary, 40%, -38%) !default;
+$tertiary-800: dark-light-diff($tertiary, $secondary, 30%, -31%) !default;
+$tertiary-900: dark-light-diff($tertiary, $secondary, 20%, -25%) !default;
 
 //quaternary
 $quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%) !default;