web: Rename custom colors

web/components/AceEditor/ace-editor.css

@@ -3,7 +3,7 @@
  */
 
 .ace-github-dark .ace_gutter {
-  @apply text-white bg-ld-darkerblue;
+  @apply text-white bg-storm-600;
 }
 
 .ace-github-dark .ace_print-margin {
@@ -29,24 +29,24 @@
 
 .ace-github-dark .ace_marker-layer .ace_selection {
   @screen lg {
-    @apply bg-gray-600;
+    @apply bg-stone-500;
   }
 }
 
 .ace-github-dark .ace_gutter-active-line {
-  @apply bg-gray-600;
+  @apply bg-stone-500;
 }
 
 .ace-github-dark .ace_entity.ace_name.ace_tag,
 .ace-github-dark .ace_keyword,
 .ace-github-dark .ace_meta.ace_tag,
 .ace-github-dark .ace_storage {
-  @apply text-ld-orange;
+  @apply text-coral-400;
 }
 
 .ace-github .ace_constant.ace_buildin,
 .ace-github .ace_support.ace_function {
-  @apply text-acc-hoverlinkblue;
+  @apply text-sky-600;
 }
 
 .ace-github-dark .ace_constant.ace_buildin,

web/components/CellButtons/index.module.css

@@ -10,7 +10,7 @@
 }
 
 .check {
-  @apply inline-block h-5 w-5 ml-1.5 mb-1 text-acc-green;
+  @apply inline-block h-5 w-5 ml-1.5 mb-1 text-green-500;
 }
 
 .error {
@@ -28,13 +28,13 @@
 }
 
 .foreignKeyDropdown {
-  @apply absolute -top-[0.3rem] left-[8.2rem] bg-white widget-shadow-hover z-100 rounded px-3 py-1 border border-ld-lightgrey w-fit;
+  @apply absolute -top-[0.3rem] left-[8.2rem] bg-white widget-shadow-hover z-100 rounded px-3 py-1 border border-stone-100 w-fit;
 
   a {
-    @apply text-acc-linkblue font-semibold font-sans;
+    @apply text-link-1 font-semibold font-sans;
 
     &:hover {
-      @apply text-acc-hoverlinkblue;
+      @apply text-link-2;
     }
   }
 }
@@ -52,9 +52,9 @@
 }
 
 .history:hover .button:disabled ~ .popup {
-  @apply block absolute -top-0.5 left-24 bg-white widget-shadow-hover z-100 rounded px-3 py-2 border border-ld-lightgrey max-w-[12rem];
+  @apply block absolute -top-0.5 left-24 bg-white widget-shadow-hover z-100 rounded px-3 py-2 border border-stone-100 max-w-[12rem];
 }
 
 .loading {
-  @apply italic text-ld-darkgrey;
+  @apply italic text-storm-200;
 }

web/components/CommitGraph/utils.tsx

@@ -20,14 +20,14 @@ export function getCommits(
 
 // colors to choose from for branch paths
 export const branchPathColors = [
-  customColors["ld-darkblue"],
-  customColors["ld-orange"],
-  customColors["acc-hoverlinkblue"],
-  customColors["ld-brightgreen"],
+  customColors.ocean["700"],
+  customColors.coral["400"],
+  customColors.sky["600"],
+  customColors.mint["200"],
   "#C5A15A",
   "#FA7978",
-  customColors["acc-darkgrey"],
-  customColors["acc-green"],
+  customColors.stone["500"],
+  customColors.green["500"],
   "#5C5AC5",
   "#EB7340",
 ];

web/components/DataTable/AddRowsButton/index.module.css

@@ -4,10 +4,10 @@
   @screen lg {
     @apply block fixed right-5 bottom-5 z-10;
     a {
-      @apply text-ld-darkgrey font-normal text-sm;
+      @apply text-storm-200 font-normal text-sm;
     }
     svg {
-      @apply text-ld-darkgrey bg-white rounded-full;
+      @apply text-storm-200 bg-white rounded-full;
     }
   }
 }
@@ -17,7 +17,7 @@
 }
 
 .expand {
-  @apply hidden border border-ld-darkgrey rounded-2xl px-2 pb-[0.1rem] bg-white;
+  @apply hidden border border-storm-200 rounded-2xl px-2 pb-[0.1rem] bg-white;
 
   svg {
     @apply inline-block mb-[0.2rem] mr-1;

web/components/DataTable/Table/index.module.css

@@ -39,7 +39,7 @@
 
   th,
   td {
-    @apply border-b border-ld-lightgrey relative pr-10 pl-6 lg:pl-2;
+    @apply border-b border-stone-100 relative pr-10 pl-6 lg:pl-2;
 
     &:first-of-type {
       @apply pl-0 pr-1 border-none bg-white min-w-0;
@@ -50,7 +50,7 @@
     @apply text-left text-primary;
   }
   tbody {
-    @apply whitespace-nowrap text-ld-darkergrey;
+    @apply whitespace-nowrap text-stone-500;
 
     &::after {
       @apply bg-white absolute left-0  h-80 bottom-0 lg:w-[10000px];
@@ -60,16 +60,16 @@
   }
 
   tr.addedRow:hover {
-    @apply bg-[#ebffef];
+    @apply bg-mint-50;
   }
   tr.removedRow:hover {
-    @apply bg-[#fff3f4];
+    @apply bg-coral-50;
   }
   td.added:hover {
-    @apply text-acc-green;
+    @apply text-green-500;
   }
   tr:hover {
-    @apply bg-ld-lightblue;
+    @apply bg-stone-50;
   }
 }
 
@@ -78,23 +78,23 @@
 }
 
 .key {
-  @apply inline-block ml-2 text-ld-darkgrey mb-0.5;
+  @apply inline-block ml-2 text-storm-200 mb-0.5;
 }
 
 .added {
-  @apply text-acc-green;
+  @apply text-green-500;
 }
 
 .removed {
-  @apply text-acc-hoverred;
+  @apply text-red-500;
 }
 
 .addedRow {
-  @apply bg-[#defbe4];
+  @apply bg-green-50;
 }
 
 .removedRow {
-  @apply bg-[#ffeaec];
+  @apply bg-red-50/70;
 }
 
 .cell {
@@ -109,16 +109,16 @@
 }
 
 .cellIsNull {
-  @apply text-acc-grey;
+  @apply text-stone-300;
 }
 .cell:hover,
 .active {
-  @apply bg-ld-lightgrey text-primary;
+  @apply bg-stone-100 text-primary;
 
   @screen lg {
     /* Applies background color to full column on hover */
     &::after {
-      @apply bg-ld-lightblue absolute left-0 w-full h-[10000px] -top-[5000px];
+      @apply bg-stone-50 absolute left-0 w-full h-[10000px] -top-[5000px];
       content: "\00a0";
       z-index: -5;
     }
@@ -131,7 +131,7 @@
     @apply min-w-[20rem];
   }
   &:hover {
-    @apply bg-gray-100;
+    @apply bg-stone-50;
   }
 }
 
@@ -162,12 +162,12 @@
 }
 
 .primaryKey {
-  @apply text-acc-hoverblue;
+  @apply text-sky-900;
 }
 
 .added .cell:hover,
 .added .active {
-  @apply text-acc-green;
+  @apply text-green-500;
 }
 
 .addedRow .cell:hover,
@@ -177,7 +177,7 @@
 
 .removed .cell:hover,
 .removed .active {
-  @apply text-acc-red;
+  @apply text-red-400;
 }
 
 .removedRow .cell:hover,

web/components/DataTable/index.module.css

@@ -19,7 +19,7 @@
 }
 
 .gradientOverlay {
-  @apply sticky right-0 w-12 bg-gradient-to-r from-transparent to-ld-darkgrey opacity-10;
+  @apply sticky right-0 w-12 bg-gradient-to-r from-transparent to-storm-200 opacity-10;
   @screen lg {
     @apply hidden;
   }

web/components/DatabaseHeaderAndNav/AddItemDropdown/index.module.css

@@ -19,7 +19,7 @@
 }
 
 .disabledItem {
-  @apply text-ld-darkgrey font-semibold;
+  @apply text-storm-200 font-semibold;
 }
 
 .button {

web/components/DatabaseHeaderAndNav/index.module.css

@@ -11,7 +11,7 @@
 }
 
 .headerDetails {
-  @apply inline-block h-fit py-6 px-8 justify-between bg-ld-mediumblue relative;
+  @apply inline-block h-fit py-6 px-8 justify-between bg-storm-500 relative;
 
   @screen lg {
     @apply flex pt-6 h-28;
@@ -53,7 +53,7 @@
   }
 
   a {
-    @apply px-0.5 hover:text-ld-blue;
+    @apply px-0.5 hover:text-sky-300;
   }
 
   @screen lg {
@@ -92,5 +92,5 @@
 }
 
 .resetButton {
-  @apply mr-5 text-xl text-white hover:text-ld-lightblue hidden lg:block;
+  @apply mr-5 text-xl text-white hover:text-stone-50 hidden lg:block;
 }

web/components/DatabaseNav/index.module.css

@@ -35,7 +35,7 @@
 }
 
 .disabledTab {
-  @apply flex justify-center ml-4 mr-12 text-acc-lightgrey;
+  @apply flex justify-center ml-4 mr-12 text-stone-100;
 }
 
 .innerTab {

web/components/DatabaseOptionsDropdown/index.module.css

@@ -11,7 +11,7 @@
 }
 
 .optionButton {
-  @apply flex items-center text-xs mx-2 my-3 py-0.5 font-semibold hover:text-acc-hoverblue;
+  @apply flex items-center text-xs mx-2 my-3 py-0.5 font-semibold hover:text-sky-900;
 
   .help {
     @apply mb-1;

web/components/DatabaseTableHeader/DatabaseTableHeaderMobile/index.module.css

@@ -1,5 +1,5 @@
 .editorContainer {
-  @apply block pt-4 px-6 pb-2 border-b-2 border-ld-lightgrey bg-ld-lightpurple;
+  @apply block pt-4 px-6 pb-2 border-b-2 border-stone-100 bg-stone-50;
   @screen lg {
     @apply px-6;
   }
@@ -14,20 +14,20 @@
 }
 
 .sampleQueryDir {
-  @apply text-sm text-ld-darkgrey font-normal;
+  @apply text-sm text-storm-200 font-normal;
   @screen lg {
     @apply ml-4;
   }
 }
 
 .caret {
-  @apply text-lg text-acc-hoverlinkblue mt-0.5 mr-4 ml-8;
+  @apply text-lg text-link-1 mt-0.5 mr-4 ml-8;
 }
 
 .err {
   @apply pt-0 mb-4;
 }
 
 .empty {
-  @apply p-6 bg-acc-hoverlinkblue text-white;
+  @apply p-6 bg-link-1 text-white;
 }

web/components/DatabaseTableHeader/index.module.css

@@ -1,7 +1,7 @@
 .editorContainer {
   @apply hidden;
   @screen lg {
-    @apply block px-6 pt-4 pb-2 border-b-2 border-ld-lightgrey bg-ld-lightpurple;
+    @apply block px-6 pt-4 pb-2 border-b-2 border-stone-100 bg-stone-50;
   }
 }
 
@@ -22,13 +22,13 @@
 }
 
 .sampleQueryDir {
-  @apply text-sm text-ld-darkgrey ml-4 font-normal;
+  @apply text-sm text-storm-200 ml-4 font-normal;
 
   button {
     @apply font-semibold;
 
     &:hover {
-      @apply text-acc-linkblue;
+      @apply text-button-2;
     }
 
     &:focus {

web/components/DatabaseTableNav/Section/index.module.css

@@ -1,5 +1,5 @@
 .section {
-  @apply border-ld-lightgrey;
+  @apply border-stone-100;
 }
 
 .icon {