refactor colors

apps/schools/domains/circle/components/changeCircleForm/styles/styles.module.scss

@@ -57,7 +57,7 @@
         .mapButton {
           width: 24%;
           margin-top: 38px;
-          color: $main-blue-color;
+          color: $color-main;
           padding-left: 1%;
         }
       }
@@ -74,4 +74,4 @@
       }
     }
   }
-}
+}

apps/schools/domains/circle/components/createCircleForm/styles/styles.module.scss

@@ -95,7 +95,7 @@
         .mapButton {
           width: 30%;
           margin-top: 38px;
-          color: $main-blue-color;
+          color: $color-main;
           padding-left: 1%;
         }
       }
@@ -145,4 +145,4 @@
       line-height: 130%;
     }
   }
-}
+}

apps/schools/domains/circle/components/currentCircle/styles/styles.module.scss

@@ -14,19 +14,19 @@
   margin-bottom: 15px;
 
   .colorCountAllQueries {
-    color: $color-field-value
+    color: $color-text-title
   }
 
   .colorCountAllQueries {
 
   }
 
   .colorCountInProgressQueries {
-    color: $main-blue-color
+    color: $color-main
   }
 
   .colorCountAcceptedQueries {
-    color: $main-green-semi-lite-color
+    color: $color-green
   }
 }
 

apps/schools/domains/circle/components/map/adressMap/styles/styles.module.scss

@@ -40,16 +40,16 @@
 
   .cancelButton {
     background-color: white;
-    color: $main-blue-color;
+    color: $color-main;
     width: 79px;
-    border-color: $main-blue-color;
+    border-color: $color-main;
 
     &:hover {
       background-color: $background-blue-dark-color;
     }
 
     &:active {
-      background-color: $main-blue-semi-color;
+      background-color: $color-blue;
       color: $color-white;
     }
   }

apps/schools/domains/circle/components/map/confirmMap/styles/styles.module.scss

@@ -45,34 +45,34 @@
 
   .cancelButton {
     background-color: white;
-    color: $main-blue-color;
+    color: $color-main;
     width: auto;
     padding: 8px 16px;
-    border-color: $main-blue-color;
+    border-color: $color-main;
 
     &:hover {
       background-color: $background-blue-dark-color;
     }
 
     &:active {
-      background-color: $main-blue-semi-color;
+      background-color: $color-blue;
       color: $color-white;
     }
   }
 
   .changeAddressButton {
     background-color: white;
-    color: $main-blue-color;
+    color: $color-main;
     width: auto;
     padding: 8px 16px;
-    border-color: $main-blue-color;
+    border-color: $color-main;
 
     &:hover {
       background-color: $background-blue-dark-color;
     }
 
     &:active {
-      background-color: $main-blue-semi-color;
+      background-color: $color-blue;
       color: $color-white;
     }
   }

apps/schools/domains/common/components/Logo/styles/styles.module.scss

@@ -7,10 +7,10 @@
 }
 
 .logoText {
-  color: $main-blue-color;
+  color: $color-main;
   font-family: "Roboto", sans-serif;
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
   line-height: 28px;
-}
+}

apps/schools/domains/common/components/backPage/styles/styles.module.scss

@@ -12,11 +12,11 @@
   align-items: center;
   gap: 10px;
   cursor: pointer;
-  color: $main-blue-color;
+  color: $color-main;
   position: relative;
   top: -16px;
 
   .text {
-    color: $main-blue-color;
+    color: $color-main;
   }
 }

apps/schools/domains/common/components/containers/BaseLayoutComponents/BaseLayout/styles/styles.module.scss

@@ -76,8 +76,8 @@
     padding: 0 40px;
     height: 75px;
     width: 100vw;
-    border-bottom: 1px solid $main-blue-lite-color;
-    background-color: $main-blue-color;
+    border-bottom: 1px solid $color-main-stroke;
+    background-color: $color-main;
 
     .leftContainer {
       display: flex;
@@ -99,10 +99,10 @@
       align-items: center;
 
       .acceptButton {
-        color: $main-blue-color;
+        color: $color-main;
         padding: 8px 16px;
         border-radius: 8px;
-        border: 1px solid $second-blue-lite-color;
+        border: 1px solid $color-light-blue;
         background: $color-white;
 
         &:hover {
@@ -111,7 +111,7 @@
         }
 
         &:active {
-          background-color: $main-blue-semi-color;
+          background-color: $color-blue;
           color: $color-white;
         }
       }

apps/schools/domains/common/components/containers/BaseLayoutComponents/Icon/styles/styles.module.scss

@@ -32,7 +32,7 @@
 }
 
 .trigger:hover {
-  color: $main-blue-semi-color;
+  color: $color-blue;
 }
 
 .triggerOutline {
@@ -52,4 +52,4 @@
 .sidebar {
   display: flex;
   flex-direction: row;
-}
+}

apps/schools/domains/common/components/containers/EmptyWrapper/styles/styles.module.scss

@@ -20,7 +20,7 @@
       gap: 8px;
 
       .titleText {
-        color: $color-field-value;
+        color: $color-text-title;
         text-align: center;
         font-family: "Open Sans", sans-serif;
         font-size: 24px;

apps/schools/domains/common/components/containers/ErrorLayout/styles/styles.module.scss

@@ -18,7 +18,7 @@
       gap: 10px;
 
       .logoText {
-        color: $main-blue-color;
+        color: $color-main;
         font-family: "Roboto", sans-serif;
         font-size: 20px;
         font-style: normal;

apps/schools/domains/common/components/errors/styles/styles.module.scss

@@ -21,7 +21,7 @@
       gap: 8px;
 
       .titleText {
-        color: $color-field-value;
+        color: $color-text-title;
         text-align: center;
         font-family: "Open Sans", sans-serif;
         font-size: 24px;

apps/schools/domains/common/components/field/styles/styles.module.scss

@@ -5,7 +5,7 @@
   margin-bottom: 30px;
 
   .fieldName {
-    color: $color-field-name;
+    color: $color-text-lite-gray;
 
     font-family: "Open Sans", sans-serif;
     font-size: 20px;
@@ -15,7 +15,7 @@
   }
 
   .fieldValue {
-    color: $color-field-value;
+    color: $color-text-title;
 
     font-family: "Open Sans", sans-serif;
     font-size: 20px;

apps/schools/domains/common/components/styles/abstracts/_colors.scss

@@ -1,14 +1,11 @@
 // default colors
 $color-white: #ffffff;
 $color-pink: #ff9ea2;
-$color-yellow: #ffc95f;
 $color-yellow-lite: #FDFFE9;
-$color-green: #def6b1;
 $color-black: #000000;
 $color-aqua: #6cc9d4;
 $color-brown: #8a3d24;
 $color-light-yellow: #f5f5dc;
-$color-red: #bc3f45;
 $color-light-red: #ffa9ad;
 $color-gray: #f5f5f5;
 $color-border-gray: #d9d9d9;
@@ -18,16 +15,6 @@ $main-shadow: 4px 4px 8px 7px rgba(0, 0, 0, 0.1),
     -4px -4px 8px 7px rgba(0, 0, 0, 0.1);
 $img-shadow: 4px 4px 8px 7px rgba(0, 0, 0, 0.1);
 
-
-//base colors
-$main-blue-semi-color: #1890ff;
-$main-blue-color: #2698FF;
-$main-blue-lite-color: #D0D3E5;
-$second-blue-lite-color: #EDF6FF;
-$main-green-semi-lite-color: #4CD174;
-$color-field-name: rgba(67, 67, 67, 0.80);
-$color-field-value: #222;
-
 //background colors
 $background-blue-color: #096DD9;
 $background-blue-dark-color: rgba(24, 144, 255, 0.1);
@@ -101,3 +88,47 @@ $color-black-02: rgba(0, 0, 0, 0.20);
 $color-white-01: rgba(255, 255, 255, 0.1);
 $color-white-015: rgba(255, 255, 255, 0.15);
 $color-white-02: rgba(255, 255, 255, 0.2);
+
+//figma colors
+
+//default colors
+$color-main: #2698FF;
+$color-blue: #1890FF;
+$color-light-blue: #EDF6FF;
+$color-green: #4CD174;
+$color-red: #F74A5C;
+$color-white: #FFFFFF;
+$color-black: #000000;
+$color-yellow-comment: #FDFFE9;
+
+//stroke colors
+$color-main-stroke: #D0D3E5;
+$color-gray-line: #D8D8D8;
+$color-gray-stroke: #D9D9D9;
+$color-gray-stroke-circle: #E5E5E5;
+$color-gray-bg: #F5F5F5;
+$color-hover-stroke: #40A9FF;
+$color-stroke-img: #D9D9D9;
+$color-flag-bg: #E6E8F1;
+$color-table-bg: #F2F3F7;
+
+//text colors
+$color-placeholder: rgba(0, 0, 0, 0.25);
+$color-text-title: #222222;
+$color-text-gray: #434343;
+$color-text-lite-gray: rgba(67, 67, 67, 0.80);
+$color-second-text: rgba(34, 34, 34, 0.60);
+
+//tag colors
+$color-tag-text-green: #52C41A;
+$color-tag-stroke-green: #B7EB8F;
+$color-tag-fill-green: #F6FFED;
+$color-tag-text-blue: #2F54EB;
+$color-tag-stroke-blue: #ADC6FF;
+$color-tag-fill-blue: #F0F5FF;
+$color-tag-text-crimson: #EB3468;
+$color-tag-stroke-crimson: #F7ACB4;
+$color-tag-fill-crimson: #FEF5F7;
+$color-tag-text-red: #F5222D;
+$color-tag-stroke-red: #FFA39E;
+$color-tag-fill-red: #FFF1F0;

apps/schools/domains/employee/components/currentEmployee/styles/styles.module.scss

@@ -14,15 +14,15 @@
   margin-bottom: 15px;
 
   .colorCountAllQueries {
-    color: $color-field-value
+    color: $color-text-title
   }
 
   .colorCountAllQueries {
-    color: $main-green-semi-lite-color
+    color: $color-green
   }
 
   .colorCountInProgressQueries {
-    color: $main-blue-color
+    color: $color-main
   }
 }
 

apps/schools/domains/query/components/currentQuery/styles/styles.module.scss

@@ -68,7 +68,7 @@
         }
 
         .row > :first-child {
-          color: $color-field-name;
+          color: $color-text-lite-gray;
           font-family: 'Open Sans', sans-serif;
           font-size: 20px;
           font-style: normal;
@@ -77,7 +77,7 @@
         }
 
         .row > :last-child {
-          color: $color-field-value;
+          color: $color-text-title;
           font-family: 'Open Sans', sans-serif;
           font-size: 20px;
           font-style: normal;
@@ -90,7 +90,7 @@
 
           .queryTextHeader {
             margin-bottom: 10px;
-            color: $color-field-name;
+            color: $color-text-lite-gray;
             font-family: 'Open Sans', sans-serif;
             font-size: 20px;
             font-style: normal;
@@ -99,7 +99,7 @@
           }
 
           .queryTextContent {
-            color: $color-field-value;
+            color: $color-text-title;
             font-family: 'Roboto', sans-serif;
             font-size: 20px;
             font-style: normal;
@@ -127,7 +127,7 @@
                 flex-direction: row;
                 gap: 4px;
                 min-width: 150px;
-                color: $color-field-value;
+                color: $color-text-title;
                 font-family: 'Open Sans', sans-serif;
                 font-size: 16px;
                 font-style: normal;
@@ -140,7 +140,7 @@
               }
 
               .queryHistoryText {
-                color: $color-field-value;
+                color: $color-text-title;
                 font-family: 'Open Sans', sans-serif;
                 font-size: 16px;
                 font-style: normal;
@@ -162,4 +162,4 @@
       }
     }
   }
-}
+}