From 0437db117f8b2f073daa1e4aee0015bde0d6f0a5 Mon Sep 17 00:00:00 2001
From: Gary Kang <gary.kang@powerhrg.com>
Date: Thu, 29 Aug 2024 11:53:18 -0400
Subject: [PATCH] Remove all calc() / revert PLAY-1414 changes

---
 .../pb_avatar_action_button/_avatar_action_button.scss    | 2 +-
 playbook/app/pb_kits/playbook/pb_badge/_badge.scss        | 4 ++--
 .../pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss   | 2 +-
 .../pb_date_picker/sass_partials/_input_styles.scss       | 2 +-
 .../playbook/pb_date_picker/sass_partials/_overrides.scss | 4 ++--
 .../playbook/pb_date_range_inline/_date_range_inline.scss | 8 ++++----
 .../playbook/pb_date_time_stacked/_date_time_stacked.scss | 8 ++++----
 playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss  | 2 +-
 .../app/pb_kits/playbook/pb_form_pill/_form_pill.scss     | 4 ++--
 .../app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss | 2 +-
 .../app/pb_kits/playbook/pb_label_value/_label_value.scss | 2 +-
 .../app/pb_kits/playbook/pb_message/_message_mixins.scss  | 2 +-
 .../playbook/pb_multiple_users/_multiple_users.scss       | 2 +-
 .../app/pb_kits/playbook/pb_passphrase/_passphrase.scss   | 6 +++---
 .../pb_phone_number_input/_phone_number_input.scss        | 2 +-
 playbook/app/pb_kits/playbook/pb_pill/_pill.scss          | 4 ++--
 .../playbook/pb_progress_simple/_progress_simple.scss     | 4 ++--
 .../playbook/pb_rich_text_editor/_rich_text_editor.scss   | 4 ++--
 playbook/app/pb_kits/playbook/pb_select/_select.scss      | 2 +-
 .../playbook/pb_selectable_card/_selectable_card.scss     | 6 +++---
 .../app/pb_kits/playbook/pb_text_input/_text_input.scss   | 2 +-
 .../playbook/pb_time_range_inline/_time_range_inline.scss | 8 ++++----
 playbook/app/pb_kits/playbook/pb_toggle/_toggle.scss      | 4 ++--
 23 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss b/playbook/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss
index 4d2a58f197..769d017096 100644
--- a/playbook/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss
+++ b/playbook/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss
@@ -59,7 +59,7 @@
         left: $icon_size * 1.5;
       }
       &[class*=_left] [class^=pb_avatar_kit] {
-        padding-left: calc($icon_size / 2);
+        padding-left: $icon_size / 2;
       }
     }
   }
diff --git a/playbook/app/pb_kits/playbook/pb_badge/_badge.scss b/playbook/app/pb_kits/playbook/pb_badge/_badge.scss
index ed82ad511b..5f37e6cea0 100644
--- a/playbook/app/pb_kits/playbook/pb_badge/_badge.scss
+++ b/playbook/app/pb_kits/playbook/pb_badge/_badge.scss
@@ -11,7 +11,7 @@
   align-items: center;
   justify-content: center;
   border-radius: $border_rad_light;
-  padding: 0 calc($space_xs/2);
+  padding: 0 $space_xs/2;
   border-width: 1px;
   border-style: solid;
   border-color: $card_light;
@@ -34,7 +34,7 @@
     height: $pb_badge_height;
     min-height: $pb_badge_height;
     min-width: $pb_badge_height;
-    border-radius: calc($pb_badge_height / 2);
+    border-radius: $pb_badge_height / 2;
   }
 
   &[class*=_notification] {
diff --git a/playbook/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss b/playbook/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss
index 0cd91b6b7c..fc5b248253 100644
--- a/playbook/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss
+++ b/playbook/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss
@@ -9,7 +9,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 calc($space_xs/2);
+  padding: 0 $space_xs/2;
 
   svg {
    margin-right: 8px;
diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss b/playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
index e82fc22a81..7bde883ae5 100644
--- a/playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
+++ b/playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
@@ -41,7 +41,7 @@
   &.error {
     .date_picker_input_wrapper {
       [class*=pb_body_kit] {
-        margin-top: calc($space_xs / 2);
+        margin-top: $space_xs / 2;
       }
 
       input,
diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss b/playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
index 21de9d3e78..39a8098036 100644
--- a/playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
+++ b/playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
@@ -6,8 +6,8 @@
     width: 315.88px
   }
   .flatpickr-months {
-    margin-left: calc($space_xs / 4);
-    margin-top: calc($space_xs / 3);
+    margin-left: $space_xs / 4;
+    margin-top: $space_xs / 3;
   }
 }
 @media (max-width: 499px) {
diff --git a/playbook/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss b/playbook/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
index cac84e8277..f59342a851 100644
--- a/playbook/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
+++ b/playbook/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -21,14 +21,14 @@
     display: flex;
     align-items: center;
     [class*=pb_date_range_inline_arrow] {
-      margin-left: calc($space_xs/2);
-      margin-right: calc($space_xs/2);
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
     }
     [class*=pb_date_range_inline_timezone] {
-      margin-left: calc($space_xs/2);
+      margin-left: $space_xs/2;
     }
     [class*=pb_date_range_inline_icon] {
-      margin-right: calc($space_xs/2);
+      margin-right: $space_xs/2;
     }
   }
 }
diff --git a/playbook/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss b/playbook/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
index c1c14e578c..65c189be3e 100644
--- a/playbook/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
+++ b/playbook/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
@@ -1,11 +1,11 @@
 [class^=pb_date_time_stacked] {
 
   [class^=padding_month] {
-    padding-bottom: calc($space_xs + 2px) !important;
+    padding-bottom: $space_xs + 2px !important;
     }
 
   [class^=padding_day] {
-    padding-bottom: calc($space_xs + 2px) !important;
+    padding-bottom: $space_xs + 2px !important;
   }
 
   &[class*=_dark] {
@@ -19,7 +19,7 @@
 
 }
 .date-time-padding {
-  padding-right: calc($space_xs / 2);
-  padding-left: calc($space_xs / 2);
+  padding-right: $space_xs / 2;
+  padding-left: $space_xs / 2;
 }
 
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss
index d5375854c5..a64e52f2aa 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss
@@ -115,7 +115,7 @@
 
     &.error {
       [class*=pb_body_kit] {
-        margin-top: calc($space_xs / 2);
+        margin-top: $space_xs / 2;
       }
 
       [class*="dropdown_trigger_wrapper"] {
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.scss b/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.scss
index acf3ab42ca..d7573f9922 100644
--- a/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.scss
+++ b/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.scss
@@ -17,9 +17,9 @@ $form_pill_colors: (
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 calc($space-md/2);
+  padding: 0 $space-md/2;
   height: $pb_form_pill_height;
-  border-radius: calc($pb_form_pill_height/2);
+  border-radius: $pb_form_pill_height/2;
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
diff --git a/playbook/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss b/playbook/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
index 1e18ae5a5e..660e29a369 100644
--- a/playbook/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
+++ b/playbook/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
@@ -54,7 +54,7 @@ $pb_icon_circle_sizes: (
     &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
-      border-radius: calc($size/2);
+      border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
       font-size: $size * 0.38;
diff --git a/playbook/app/pb_kits/playbook/pb_label_value/_label_value.scss b/playbook/app/pb_kits/playbook/pb_label_value/_label_value.scss
index 2ddeee0cfd..62b948c6de 100644
--- a/playbook/app/pb_kits/playbook/pb_label_value/_label_value.scss
+++ b/playbook/app/pb_kits/playbook/pb_label_value/_label_value.scss
@@ -2,6 +2,6 @@
 
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
-    margin-bottom: calc($space-xs/1.5);
+    margin-bottom: $space-xs/1.5;
   }
 }
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_message/_message_mixins.scss b/playbook/app/pb_kits/playbook/pb_message/_message_mixins.scss
index 735e248a47..dff5bd30ec 100644
--- a/playbook/app/pb_kits/playbook/pb_message/_message_mixins.scss
+++ b/playbook/app/pb_kits/playbook/pb_message/_message_mixins.scss
@@ -17,7 +17,7 @@
     }
 
     .message_text {
-      margin: 0 0 calc($space-xs/2);
+      margin: 0 0 $space-xs/2;
     }
 
     .message_title {
diff --git a/playbook/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss b/playbook/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
index 5e4fa56a04..f2c870aa7b 100644
--- a/playbook/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
+++ b/playbook/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
@@ -18,7 +18,7 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     justify-content: center;
     width: $pb_multiple_users_size;
     height: $pb_multiple_users_size;
-    border-radius: calc($pb_multiple_users_size/2) + 2;
+    border-radius: $pb_multiple_users_size / 2 + 2;
     background: tint($primary, 90%);
     border: $pb_multiple_users_border_size solid $white;
     color: $primary;
diff --git a/playbook/app/pb_kits/playbook/pb_passphrase/_passphrase.scss b/playbook/app/pb_kits/playbook/pb_passphrase/_passphrase.scss
index 9a5b018df0..1a714990f0 100644
--- a/playbook/app/pb_kits/playbook/pb_passphrase/_passphrase.scss
+++ b/playbook/app/pb_kits/playbook/pb_passphrase/_passphrase.scss
@@ -21,14 +21,14 @@
   }
 
   .passphrase-label {
-    margin-right: calc($space_xs/2);
+    margin-right: $space_xs / 2;
   }
 
   .passphrase-text-input-wrapper {
     position: relative;
 
     .pb_text_input_kit_label {
-      margin-bottom: calc($space_xs/2);
+      margin-bottom: $space_xs / 2;
     }
 
     .passphrase-text-input input {
@@ -57,7 +57,7 @@
   }
 
   .pb_progress_simple_wrapper, .pb_progress_simple_wrapper_dark {
-    margin-bottom: calc($space_xs/2);
+    margin-bottom: $space_xs/2;
 
     &.progress-empty-input {
       visibility: hidden;
diff --git a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
index 796b6c8f8b..858729bd02 100644
--- a/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
+++ b/playbook/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
@@ -100,7 +100,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__arrow.iti__arrow--up::before {
-    transform: rotate(-calc($transform-rotate-deg / 3));
+    transform: rotate(-($transform-rotate-deg/3));
     top: $space_xs + 4px;
     color: $primary_action;
   }
diff --git a/playbook/app/pb_kits/playbook/pb_pill/_pill.scss b/playbook/app/pb_kits/playbook/pb_pill/_pill.scss
index 58e6af310b..bd37e9b1da 100644
--- a/playbook/app/pb_kits/playbook/pb_pill/_pill.scss
+++ b/playbook/app/pb_kits/playbook/pb_pill/_pill.scss
@@ -9,9 +9,9 @@ $pb_pill_height: 22px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 calc($space-sm/1.8);
+  padding: 0 $space-sm/1.8;
   height: $pb_pill_height;
-  border-radius: calc($pb_pill_height/2);
+  border-radius: $pb_pill_height/2;
   white-space: nowrap;
 
   &[class*=lowercase] {
diff --git a/playbook/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss b/playbook/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss
index 3d868d816c..f7a62b6ed3 100644
--- a/playbook/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss
+++ b/playbook/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss
@@ -21,7 +21,7 @@ $pb_progress_simple_height: 4px;
 [class^=pb_progress_simple_kit] {
   width: 100%;
   height: $pb_progress_simple_height;
-  border-radius: calc($pb_progress_simple_height/2);
+  border-radius: $pb_progress_simple_height/2;
   background: rgba($primary, $opacity-1);
     &[class*=_positive] {
       .progress_simple_value {
@@ -42,7 +42,7 @@ $pb_progress_simple_height: 4px;
   [class^=progress_simple_value] {
     width: 0%;
     height: 100%;
-    border-radius: calc($pb_progress_simple_height/2);
+    border-radius: $pb_progress_simple_height/2;
     background: $primary;
   }
 
diff --git a/playbook/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss b/playbook/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss
index ef8b6214f5..81c1532927 100644
--- a/playbook/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss
+++ b/playbook/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss
@@ -106,7 +106,7 @@
     .trix-button--icon {
       height: $space_lg;
       width: $space_lg;
-      margin: calc($space_xs / 2);
+      margin: $space_xs / 2;
       border-radius: $border_rad_heavier;
       &::before {
         background-size: auto;
@@ -116,7 +116,7 @@
       background: $white;
       border: 1px solid #E4E8F0;
       border-bottom: none;
-      padding: calc($space_xs / 2);
+      padding: $space_xs / 2;
       border-top-left-radius: $border_rad_heavier;
       border-top-right-radius: $border_rad_heavier;
       .trix-button-group {
diff --git a/playbook/app/pb_kits/playbook/pb_select/_select.scss b/playbook/app/pb_kits/playbook/pb_select/_select.scss
index 64d46968c3..9a670f12a3 100644
--- a/playbook/app/pb_kits/playbook/pb_select/_select.scss
+++ b/playbook/app/pb_kits/playbook/pb_select/_select.scss
@@ -81,7 +81,7 @@
     display: block;
     &.error {
       [class*=pb_body_kit] {
-        margin-top: calc($space_xs / 2);
+        margin-top: $space_xs / 2;
       }
       > select:first-child {
         border-color: $error;
diff --git a/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss b/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss
index 6f51026400..f2dda25c0d 100644
--- a/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss
+++ b/playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss
@@ -43,7 +43,7 @@ $pb_selectable_card_border: 2px;
       align-items: center;
       height: $pb_selectable_card_indicator_size;
       width: $pb_selectable_card_indicator_size;
-      border-radius: calc($pb_selectable_card_indicator_size/2) + calc($pb_selectable_card_border/2);
+      border-radius: $pb_selectable_card_indicator_size/2 + $pb_selectable_card_border/2;
       border-width: $pb_selectable_card_border;
       border-style: solid;
       border-color: $white;
@@ -52,8 +52,8 @@ $pb_selectable_card_border: 2px;
       font-size: $font_smaller;
       text-align: center;
       position: absolute;
-      top: -calc($pb_selectable_card_indicator_size/2);
-      right: -calc($pb_selectable_card_indicator_size/2);
+      top: -($pb_selectable_card_indicator_size/2);
+      right: -($pb_selectable_card_indicator_size/2);
       opacity: 0;
     }
   }
diff --git a/playbook/app/pb_kits/playbook/pb_text_input/_text_input.scss b/playbook/app/pb_kits/playbook/pb_text_input/_text_input.scss
index 4376ce3542..62a0b8be44 100755
--- a/playbook/app/pb_kits/playbook/pb_text_input/_text_input.scss
+++ b/playbook/app/pb_kits/playbook/pb_text_input/_text_input.scss
@@ -101,7 +101,7 @@
   &.error {
     .text_input_wrapper {
       [class*="pb_body_kit"] {
-        margin-top: calc($space_xs / 2);
+        margin-top: $space_xs / 2;
       }
       input,
       .text_input {
diff --git a/playbook/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss b/playbook/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss
index e7e4fd0591..e64820d9c8 100644
--- a/playbook/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss
+++ b/playbook/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss
@@ -22,14 +22,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: calc($space_xs/2);
-      margin-right: calc($space_xs/2);
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: calc($space_xs/2);
+      margin-left: $space_xs/2;
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: calc($space_xs/2);
+      margin-right: $space_xs/2;
     }
   }
 }
diff --git a/playbook/app/pb_kits/playbook/pb_toggle/_toggle.scss b/playbook/app/pb_kits/playbook/pb_toggle/_toggle.scss
index 086732428e..a35e59e567 100644
--- a/playbook/app/pb_kits/playbook/pb_toggle/_toggle.scss
+++ b/playbook/app/pb_kits/playbook/pb_toggle/_toggle.scss
@@ -27,7 +27,7 @@ $transition: .2s ease-in-out;
       &:after {
         transition: $transition;
         content: "";
-        width: calc($width / 2) - 4px;
+        width: $width / 2 - 4px;
         height: $height - 4px;
         background-color: $color_checkbox_default;
         border-radius: 50%;
@@ -68,7 +68,7 @@ $transition: .2s ease-in-out;
         background-color: $color_checkbox_success;
 
         &:after {
-          left: calc($width / 2) + 2px;
+          left: $width / 2 + 2px;
           background-color: $white;
         }
       }