diff --git a/package.json b/package.json index b5fb530e..db6b834b 100644 --- a/package.json +++ b/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", diff --git a/src/components/summit-my-orders-tickets/components/TicketPopup/ticket-popup.scss b/src/components/summit-my-orders-tickets/components/TicketPopup/ticket-popup.scss index 41d93296..a2513fab 100644 --- a/src/components/summit-my-orders-tickets/components/TicketPopup/ticket-popup.scss +++ b/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; diff --git a/src/components/summit-my-orders-tickets/styles/_variables.scss b/src/components/summit-my-orders-tickets/styles/_variables.scss index b50af40b..5ac38f83 100644 --- a/src/components/summit-my-orders-tickets/styles/_variables.scss +++ b/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; diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 4d47b2cd..7644ecd0 100644 --- a/src/styles/colors.scss +++ b/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; diff --git a/src/styles/utils.scss b/src/styles/utils.scss new file mode 100644 index 00000000..c1d25e1f --- /dev/null +++ b/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; +} \ No newline at end of file