refactor: reduce colors

packages/ui/core/src/assets/scss/flow-builder.scss

@@ -6,7 +6,7 @@
   height: 18px;
   width: 18px;
   z-index: 40;
-  background: $add-piece;
+  background: $bleached-gray;
   background-image: url("../img/custom/add-button.svg");
   border-radius: 3px;
   transition: box-shadow 0.3s ease-in-out, background 0.3s ease-in-out, background-image 0.3s ease-in-out;

packages/ui/core/src/assets/scss/variables.scss

@@ -8,15 +8,12 @@ $border: #c2c9d1;
 $white: #ffffff;
 $gray-card: #fafafa;
 $placeholder: #c8c8c8;
-$form-label: #7b7b7b;
 $black: #1d1d1d;
 $disable: #8c8c8c;
-$sidebar: #fafbfc;
 $hover: #fafafa;
 $avatar: #515151;
 $blue-link: #1890ff;
 $gray-select: #f5f5f5;
-$add-piece: #a6b1bf;
 $outline: rgba(0, 0, 0, 0.12);
 $description: #8c8c8c;
 $bleached-gray: #a6b1bf;

packages/ui/core/src/styles.scss

@@ -21,15 +21,12 @@
     --white: #{$white};
     --gray-card: #{$gray-card};
     --placeholder: #{$placeholder};
-    --form-label: #{$form-label};
     --black: #{$black};
     --disable: #{$disable};
-    --sidebar: #{$sidebar};
     --hover: #{$hover};
     --avatar: #{$avatar};
     --blue-link: #{$blue-link};
     --gray-select: #{$gray-select};
-    --add-piece: #{$add-piece};
     --outline: #{$outline};
     --description: #{$description};
     --bleached-gray: #{$bleached-gray};

packages/ui/feature-builder-form-controls/src/lib/components/code-artifact-form-control/code-artifact-control-fullscreen/code-artifact-control-fullscreen.component.scss

@@ -1,13 +1,10 @@
 @import "../../../../../../core//src/assets/scss/variables.scss";
 @import "../../../../../../core/src/assets/scss/derived-variables.scss";
+
 .code-container {
   height: 100%;
 }
 
-.modal-body {
-  background: $sidebar;
-}
-
 .file-active {
   background: $white;
   border: 2px solid $line !important;
@@ -32,9 +29,9 @@
   line-height: 100%;
   vertical-align: "middle";
 }
+
 .test-code-loading-container {
   position: absolute;
   left: 50%;
   top: 50%;
-}
-
+}

packages/ui/feature-builder-header/src/lib/components/publish-or-edit-flow-button/publish-or-edit-flow-button.component.scss

@@ -1,115 +1,5 @@
 @import "../../../../../core/src/assets/scss/variables.scss";
 
-.btn-light-green {
-  color: #fff;
-  background-color: #14ae5c;
-  border-color: #14ae5c;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.375rem;
-
-  &[disabled] {
-    background-color: #d4d4d4;
-    border-color: #d4d4d4;
-    color: $form-label;
-  }
-}
-
-.btn-section {
-  padding: 0px 0.75rem;
-  margin-bottom: 0.9375rem;
-  gap: 0.5rem;
-}
-
-.publish-popover-container {
-  padding: 0.3125rem;
-  border-radius: 3px;
-  background-color: $white;
-  min-width: 19.3125rem;
-  max-width: 19.3125rem;
-
-  .btn {
-    padding: 0.3125rem 0.6875rem;
-  }
-}
-
-.environments-list-section {
-  padding: 0px 0.75rem;
-
-  ul {
-    padding: 0px;
-    max-height: 7.875rem;
-    margin-bottom: 0px;
-    padding-bottom: 10px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    list-style-type: none;
-    scrollbar-width: thin;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-  }
-
-  li {
-    padding-bottom: 0.3125rem;
-
-    .version-tag {
-      background: rgba(0, 0, 0, 0.05);
-      border-radius: 130px;
-      padding: 0.0938rem 0.375rem;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 16px;
-      color: $body;
-    }
-  }
-}
-
-.publish-to-text {
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  padding: 0.3125rem 0px;
-  color: $form-label;
-}
-
-.publish-popover-separator {
-  border-top: 1px solid $dividers;
-}
-
-.older-versions-text {
-  color: $blue-link;
-  margin: 0.625rem 0.75rem 0.625rem 0.75rem;
-  font-size: 0.875rem;
-}
-
-.publish-popover-chevron {
-  fill: $white;
-  height: 5px;
-  width: 10px;
-
-  &.flip {
-    svg {
-      transform: rotate((180deg));
-    }
-  }
-}
-
-.publish-popover-text {
-  gap: 10px;
-}
-
-@keyframes loading-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .loading-spin-animation {
   svg {
     transform-origin: 7.5px 7.5px 0;
@@ -130,24 +20,3 @@
 .loading-template {
   gap: 4px;
 }
-
-.environment-published-text {
-  color: #14ae5c;
-}
-
-.environment-name {
-  white-space: nowrap;
-  max-width: 9.5rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.environment-name-container {
-  gap: 0.5ch;
-}
-
-.invalid-publish {
-  svg {
-    fill: rgba(0, 0, 0, 0.26);
-  }
-}

packages/ui/feature-builder-left-sidebar/src/lib/components/run-details/steps-results-list/step-result.component.scss

@@ -86,7 +86,7 @@
   .loop-caret {
     width: 10px;
     height: 10px;
-    fill: $add-piece;
+    fill: $bleached-gray;
     transform: rotate(-45deg);
   }
   .step-icon {

packages/ui/feature-builder-right-sidebar/src/lib/edit-step-sidebar/edit-step-form-container/edit-step-form-container.component.scss

@@ -5,79 +5,7 @@
   margin-right: 0.3125rem;
   border-radius: 4px;
 
-  .inside-panel-item-title {
-    padding-top: 1.5625rem;
-    font-weight: 400;
-    font-size: 0.875rem;
-    line-height: 1.375rem;
-    color: $form-label;
-    -webkit-touch-callout: none;
-    /* iOS Safari */
-    -webkit-user-select: none;
-    /* Safari */
-    -khtml-user-select: none;
-    /* Konqueror HTML */
-    -moz-user-select: none;
-    /* Old versions of Firefox */
-    -ms-user-select: none;
-    /* Internet Explorer/Edge */
-    user-select: none;
-    /* Non-prefixed version, currently
-                                    supported by Chrome, Edge, Opera and Firefox */
-  }
-
-  .learn-variable-text {
-    color: $body;
-  }
-
-  .flip-chevorn-up {
-    transform: rotate(180deg);
-  }
-
-  // Learn how to variable
-
-  .doc-text:hover {
-    color: black;
-  }
-
-  .doc-text {
-    color: $body;
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .doc-container {
-    display: flex;
-    padding: 0.5rem;
-    background-color: $sidebar;
-    align-items: center;
-  }
 
-  .flip-transition {
-    transition: transform 0.5s ease;
-    display: inline-block;
-  }
-
-  .expansion-panel-transition {
-    transition: background-color 1s ease;
-  }
-
-  .expansion-panel-opened {
-    background-color: #fafafa;
-  }
-
-  .chevorn-margin-left {
-    margin-left: auto;
-    margin-right: -6px;
-  }
-
-  .expansion-panel-body {
-    margin-top: -5px;
-  }
-
-  .mat-expansion-panel-spacing {
-    margin: 0px;
-  }
 }
 
 .take-remaining-height-in-flex-column {

packages/ui/feature-builder-right-sidebar/src/lib/edit-step-sidebar/edit-step-sidebar.component.ts

@@ -22,7 +22,7 @@ import { PieceMetadataService } from '@activepieces/ui/feature-pieces';
 @Component({
   selector: 'app-edit-step-sidebar',
   templateUrl: './edit-step-sidebar.component.html',
-  styleUrls: ['./edit-step-sidebar.component.css'],
+  styleUrls: [],
 })
 export class EditStepSidebarComponent implements OnInit {
   constructor(