Hotfix/color sass funcs

package.json

@@ -30,7 +30,11 @@
     "@vimeo/player": "^2.16.3",
     "ably": "^1.2.34",
     "assert": "^2.1.0",
+<<<<<<< HEAD
+    "attendee-to-attendee-widget": "3.1.1-beta.29",
+=======
     "attendee-to-attendee-widget": "3.1.1-beta.34",
+>>>>>>> 78e77932ec454702bb017a6984777b0606729704
     "autoprefixer": "10.4.14",
     "awesome-bootstrap-checkbox": "^1.0.1",
     "axios": "^0.19.2",

src/components/summit-my-orders-tickets/components/TicketPopup/ticket-popup.scss

@@ -1,4 +1,6 @@
 @import "../../styles/variables";
+@import "../../../../styles/utils.scss";
+@import "../../../../styles/colors.scss";
 
 .ticket-popup {
   z-index: 1000;
@@ -110,7 +112,7 @@
   }
 
   .ticket-popup-title {
-    color: $color-primary-contrast;
+    @include get-contrasting-text-color($color-primary, $color-text-light, $color-text-dark);
     white-space: normal;
     overflow: hidden;
 

src/components/summit-my-orders-tickets/styles/_variables.scss

@@ -3,6 +3,7 @@ $color-primary: var(--color_primary, #d4e5f4);
 $color-primary-contrast: var(--color_primary_contrast, #e6f3ff);
 $color-secondary-contrast: var(--color_secondary_contrast, #3fa2f7);
 $color-text-dark: var(--color_text_dark, #3486cd);
+$color-text-light: var(--color_text_light, #ffffff);
 $color-text-input-hints: var(--color_text_input_hints, #a4c7e6);
 
 $color-white: #fff;

src/styles/colors.scss

@@ -1,19 +1,13 @@
-/**
-* Warning:
-* Dont edit this file by hand, has been generated by colors scss util
-* Uses default colors as base and then overriden by colors set via marketing
-**/
-
 $color_accent: #ff5e32;
 $color_alerts: #ff0000;
 $color_background_light: #ffffff;
 $color_background_dark: #000000;
 $color_button_background_color: #ffffff;
 $color_button_color: #000000;
-$color_gray_lighter: #F2F2F2;
-$color_gray_light: #DFDFDF;
+$color_gray_lighter: #f2f2f2;
+$color_gray_light: #dfdfdf;
 $color_gray_dark: #999999;
-$color_gray_darker: #4A4A4A;
+$color_gray_darker: #4a4a4a;
 $color_horizontal_rule_light: #e5e5e5;
 $color_horizontal_rule_dark: #7b7b7b;
 $color_icon_light: #ffffff;
@@ -25,13 +19,13 @@ $color_input_text_color_light: #363636;
 $color_input_text_color_dark: #ffffff;
 $color_input_text_color_disabled_light: #ffffff;
 $color_input_text_color_disabled_dark: #ffffff;
-$color_primary: #6d6e71;
-$color_primary_contrast: #f1f2f2;
-$color_secondary: #00CEC4;
-$color_secondary_contrast: #ff5e32;
+$color_primary: #b3965a;
+$color_primary_contrast: #fafaf7;
+$color_secondary: #b3965a;
+$color_secondary_contrast: #342512;
 $color_text_light: #ffffff;
 $color_text_med: #828282;
-$color_text_dark: #333333;
+$color_text_dark: #000000;
 $color_text_input_hints_light: #7b7b7b;
 $color_text_input_hints_dark: #7b7b7b;
 $color_text_input_hints: #c4c4c4;

src/styles/utils.scss

@@ -0,0 +1,34 @@
+// Helper function to convert HEX to RGB
+@function hex-to-rgb($hex) {
+    $r: red($hex);
+    $g: green($hex);
+    $b: blue($hex);
+    @return ($r, $g, $b);
+}
+
+// calculate luminance val
+@function luminance-value($color) { 
+    $normalized: $color / 255; 
+    @if $normalized <= 0.03928 {  
+      @return $normalized / 12.92; 
+    } @else { 
+      @return pow(($normalized + 0.055) / 1.055, 2.4);  
+    }
+}
+
+// Helper function to calculate luminance
+@function luminance($r, $g, $b) {  
+    $lum: luminance-value($r) * 0.2126 + luminance-value($g) * 0.7152 + luminance-value($b) * 0.0722;
+    @return $lum; 
+}
+
+// Mixin to get contrasting text color
+@mixin get-contrasting-text-color($bg-color, $light-color, $dark-color) {
+    $rgb: hex-to-rgb($bg-color);  
+    $r: nth($rgb, 1);  
+    $g: nth($rgb, 2); 
+    $b: nth($rgb, 3);    
+    $lum: luminance($r, $g, $b);
+    $contrast-color: if($lum > 0.179, $dark-color, $light-color);
+    color: $contrast-color;
+}