version 1 init

src/constants.scss

@@ -119,7 +119,7 @@ $c-neutrals-100-hover: #e1e1e1;
 $c-neutrals-100-shadow: 4px 4px 0px #e2e2e2;
 $c-neutrals-200: #d5d5e4;
 $c-neutrals-300: #979bba;
-$c-neutrals-600: #001a36;
+$c-neutrals-600: var(--primary-text);
 $c-notification-100: #f9faff;
 $c-shades-white: #ffffff;
 $c-shades-black: #000000;
@@ -143,8 +143,8 @@ $c-pink-active-feed-cards-light: #fcf4ff;
 $c-pink-active-feed-cards: #a75a93;
 $c-pink-hover-feed-cards: #fff9fd;
 $c-gray-5: #f4f5f5;
-$c-gray-10: #eef0f4;
-$c-gray-20: #dcdee7;
+$c-gray-10: var(--gentle-stroke);
+$c-gray-20: var(--gentle-stroke);
 $c-gray-30: #b7bcd2;
 $c-gray-40: #8d91a9;
 $c-gray-50: #7a819c;

src/pages/App/providers/NotificationProvider/Notification/index.scss

@@ -2,17 +2,19 @@
 @import "../../../../../styles/sizes";
 
 .notification-wrapper {
-  background-color: $purple;
+  background-color: var(--primary-background);
   padding: 0.5rem;
   margin: 0.5rem 0;
   display: flex;
   justify-content: space-between;
   border-radius: 0.25rem;
+  box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
+  color: var(--primary-text);
 
   .dismiss-btn {
     background: none;
     border: none;
-    color: $white;
+    color: inherit;
     font-weight: bold;
     cursor: pointer;
     &:hover {

src/pages/MyAccount/components/Billing/AddingCard/index.scss

@@ -8,7 +8,7 @@
   flex-wrap: wrap;
   align-items: center;
   border-radius: 0.875rem;
-  background-color: $light-gray-4;
+  background-color: var(--secondary-background);
   box-sizing: border-box;
   justify-content: space-around;
 }
@@ -30,6 +30,7 @@
   font-size: $xsmall;
   text-align: center;
   white-space: pre-line;
+  color: var(--primary-text);
 }
 
 .billing-adding-card__content__button {

src/pages/MyAccount/components/Billing/index.scss

@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   font-family: PoppinsSans, sans-serif;
-  color: $secondary-blue;
+  color: var(--primary-text);
 
   @include tablet {
     padding-top: 0;

src/pages/MyAccount/components/Profile/DeleteUserModal/MainStep/index.scss

@@ -34,8 +34,8 @@
   margin: 0.875rem 0 1.125rem;
   padding: 1.25rem 1.375rem;
   font-size: $small;
-  background-color: $light-gray-11;
-  border: 1px solid $light-gray-1;
+  background-color: var(--secondary-background);
+  border: 1px solid var(--gentle-stroke);
   border-radius: 0.5rem;
 }
 

src/pages/MyAccount/components/Profile/Profile.module.scss

@@ -5,6 +5,7 @@
 .container {
   position: relative;
   width: 100%;
+  color: var(--primary-text);
 }
 
 .content {
@@ -30,6 +31,7 @@
   position: absolute;
   top: 1.5rem;
   right: 0;
+  color: var(--primary-text);
 
   @include tablet {
     position: static;

src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss

@@ -10,7 +10,7 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  color: $secondary-blue;
+  color: var(--primary-text);
 }
 
 .form {
@@ -153,8 +153,6 @@
 
   .textFieldLabelWrapper {
     @include body-sm-regular;
-
-    color: $c-gray-80;
   }
 
   .textFieldInput {

src/pages/MyAccount/components/Profile/components/UserDetails/components/UserDetailsPreview/UserDetailsPreview.module.scss

@@ -16,7 +16,7 @@
 
 .name {
   @include h6;
-
+  color: var(--primary-text);
   margin: 0 0 0.25rem;
   text-align: left;
 }

src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/AddBankDetails/index.scss

@@ -13,7 +13,6 @@
     font-weight: bold;
     line-height: 1.33;
     text-align: center;
-    color: $secondary-blue;
     margin-top: -1.5rem;
   }
 
@@ -22,7 +21,6 @@
     font-size: 0.875rem;
     line-height: 1.43;
     text-align: center;
-    color: $secondary-blue;
     padding-bottom: 1rem;
     border-bottom: 1px solid $light-gray-1;
     margin-bottom: 2rem;

src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss

@@ -18,13 +18,13 @@
     font-weight: bold;
     line-height: 1.8rem;
     letter-spacing: normal;
-    color: $secondary-blue;
+    color: var(--primary-text);
   }
 
   .members__common-name {
     font-size: $small;
     font-weight: bold;
-    color: $purple-2;
+    color: var(--primary-text);
     margin-top: 0.5rem;
   }
 }
@@ -126,8 +126,8 @@
       justify-content: space-between;
       align-items: center;
       padding: 1rem;
-      background-color: $c-shades-white;
-      box-shadow: 0 0.1875rem 0.5rem $box-shadow-color;
+      background-color: var(--primary-background);
+      box-shadow: 0 0.1875rem 0.5rem var(--drop-shadow);
       margin-bottom: 1rem;
 
       .members__section__common-member-details {
@@ -155,7 +155,7 @@
           font-style: normal;
           font-weight: 700;
           font-size: $xsmall;
-          color: $secondary-blue;
+          color: var(--primary-text);
         }
       }
 

src/pages/billing/Billing.module.scss

@@ -6,8 +6,8 @@
   max-width: 49.5rem;
   padding-top: var(--header-h);
   padding-bottom: 3rem;
-  border-left: 0.0625rem solid $c-gray-10;
-  border-right: 0.0625rem solid $c-gray-10;
+  border-left: 0.0625rem solid var(--gentle-stroke);
+  border-right: 0.0625rem solid var(--gentle-stroke);
 
   @include tablet {
     padding-top: 0;

src/pages/common/components/ChatComponent/ChatComponent.module.scss

@@ -68,7 +68,7 @@
   line-height: 1.5rem;
   border-radius: 1.25rem;
   background-color: var(--secondary-background);
-  border: 0.0625rem solid $c-neutrals-200;
+  border: 0.0625rem solid var(--gentle-stroke);
   outline: none;
   resize: none;
   font-size: 0.875rem;
@@ -106,7 +106,7 @@
   margin-bottom: 0.8rem;
   border: none;
   outline: none;
-  background: $c-input-100;
+  background: transparent;
 
   &:disabled {
     cursor: not-allowed;

src/pages/common/components/ChatComponent/components/MessageReply/MessageReply.module.scss

@@ -3,10 +3,10 @@
 .container {
   display: flex;
   flex-direction: row;
-  background-color: $white;
+  background-color: var(--primary-background);
   padding: 0.4375rem 2rem 0.625rem;
-  border-top: 0.0625rem solid $c-neutrals-100;
-  border-bottom: 0.0625rem solid $c-neutrals-100;
+  border-top: 0.0625rem solid var(--gentle-stroke);
+  border-bottom: 0.0625rem solid var(--gentle-stroke);
 }
 
 .containerEmpty {
@@ -67,4 +67,5 @@
 
 .closeButton {
   margin-left: 1.375rem;
+  color: var(--primary-text);
 }

src/pages/common/components/CommonCard/CommonCard.module.scss

@@ -6,6 +6,6 @@
 }
 .containerWithCardStyles {
   padding: 1.125rem 1.25rem;
-  background-color: $c-shades-white;
-  box-shadow: 0 0.1875rem 0.5rem #{$c-common-card-shadow};
+  background-color: var(--primary-background);
+  box-shadow: 0 0.1875rem 0.5rem var(--drop-shadow);
 }

src/pages/common/components/CommonManagement/CommonManagement.module.scss

@@ -5,7 +5,7 @@
   margin-top: 1.75rem;
   display: flex;
   align-items: center;
-  border-bottom: 0.0625rem solid #{$c-neutrals-200};
+  border-bottom: 0.0625rem solid var(--gentle-stroke);
 }
 
 .tabs {
@@ -15,20 +15,19 @@
 }
 
 .memberInfo {
-  border-left: 0.0625rem solid #{$c-neutrals-100};
+  border-left: 0.0625rem solid var(--gentle-stroke);
 }
 
 .commonMenuButtonContainer {
   height: 100%;
   display: flex;
   align-items: center;
   padding-left: 1.875rem;
-  border-left: 0.0625rem solid #{$c-neutrals-100};
+  border-left: 0.0625rem solid var(--gentle-stroke);
 }
 
 .commonMenuButton {
   padding: 0.625rem;
-  //background-color: $c-neutrals-100;
   border-radius: 0.375rem;
   transition: background-color 0.2s;
 

src/pages/common/components/CommonMemberInfo/components/PopoverButton/PopoverButton.module.scss

@@ -10,7 +10,7 @@
   align-items: center;
 
   &:hover {
-    background-color: $light-gray-11;
+    background-color: var(--hover-fill);
   }
 
   @include tablet {
@@ -44,7 +44,7 @@
   font-weight: bold;
   font-size: $xxsmall-2;
   line-height: 120%;
-  color: $c-neutrals-300;
+  color: var(--primary-text);
 }
 
 .circleNames {
@@ -65,7 +65,7 @@
   height: 1.5rem;
   transform: rotate(90deg);
   transition: all 0.2s;
-  color: $light-gray-2;
+  color: var(--primary-text);
   margin-left: 1rem;
 
   @include tablet {

src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.module.scss

@@ -1,9 +1,9 @@
 @import "../../../../../../constants";
 
 .item {
-  --item-color: #{$c-neutrals-600};
-  --item-bg-color: #{$c-shades-white};
-  --item-border: 0.0625rem solid #{$c-neutrals-100};
+  --item-color: var(--primary-text);
+  --item-bg-color: var(--primary-background);
+  --item-border: 0.0625rem solid var(--gentle-stroke);
 
   display: flex;
   justify-content: space-between;
@@ -67,7 +67,7 @@
 .pendingStatus {
   font-size: $small;
   line-height: 1.25rem;
-  color: $light-gray-2;
+  color: var(--primary-text);
   margin: 0;
 }
 

src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx

@@ -97,7 +97,7 @@ export const PopoverItem: FC<CommonMemberInfoProps> = (props) => {
     return (
       <Button
         className={styles.actionButton}
-        variant={ButtonVariant.OutlineBlue}
+        variant={ButtonVariant.OutlinePink}
         disabled={!canRequestToJoin}
         onClick={() =>
           onJoinCircle(

src/pages/common/components/CommonMemberInfo/components/PopoverPanel/PopoverPanel.module.scss

@@ -21,7 +21,7 @@
   list-style-type: none;
   background-color: $c-shades-white;
   border-radius: var(--items-br);
-  box-shadow: 0 0.25rem 0.9375rem #{$c-sidebar-user-menu-shadow};
+  box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
 
   @include tablet {
     top: 3rem;

src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewDiscussionCreation/components/PermissionSelection/PermissionSelection.module.scss

@@ -1,8 +1,6 @@
 @import "../../../../../../../../../../constants";
 
 .button {
-  --btn-bg-color: transparent;
-
   margin: 0;
   padding: 0 0.25rem;
   display: flex;
@@ -11,10 +9,10 @@
   font-family: PoppinsSans, sans-serif;
   font-size: $xsmall;
   font-weight: normal;
-  color: $c-neutrals-600;
+  color: var(--primary-text);
   line-height: 143%;
   letter-spacing: 0.02em;
-  background-color: $c-neutrals-100;
+  background-color: var(--secondary-background);
   border: 0;
   border-radius: 0.25rem;
   overflow: hidden;
@@ -25,7 +23,7 @@
   box-sizing: border-box;
 
   &:hover {
-    background-color: $c-neutrals-200;
+    background-color: var(--hover-fill);
   }
 
   &:disabled {

src/pages/common/components/FeedCard/FeedCard.module.scss

@@ -11,7 +11,7 @@
   color: $c-neutrals-600;
 }
 .containerActive {
-  border: 0.0625rem solid $c-neutrals-200;
+  border: 0.0625rem solid var(--gentle-stroke);
   border-bottom-width: 0.125rem;
   border-top: none;
   margin: 0 -1.4375rem 0 -1.5rem;

src/pages/common/components/FeedCard/components/FeedCardContent/FeedCardContent.module.scss

@@ -6,7 +6,7 @@
   min-height: 4.5rem;
   justify-content: space-between;
   width: 100%;
-  background-color: $white;
+  background-color: var(--primary-background);
   padding: 1rem var(--feed-card-ph, 1.5rem);
   box-sizing: border-box;
 }
@@ -17,7 +17,7 @@
 
 .title {
   font-size: $moderate;
-  color: $c-neutrals-600;
+  color: var(--primary-text);
   line-height: 1.375rem;
   margin-bottom: 0.5rem;
   font-family: Lexend, sans-serif;