Update color theme (#3863)

* - add primary new primary and secondary palettes in app.css
- also add testing palettes that have stronger contrast with existing colors

* - add definitions for primary colors to tailwind config
- find and replace `-blue-` with `-primary-` throughtout the app

* clean up generateColorPalette

* a bit more cleanup in actions.ts

* removing code commented out between 12-14 months ago

* update comment

* remove unused chip color defs

* color defs moved to tailwind.config.js

* - get color maps working
- move color defs to color-config.ts as single source of truth
- update tailwind config to ts

* cleanups

* add comment

* update colors for "welcome to Rill" page

* fix typo

* fix typos

* add comments

* update ShadCN primary and secondary

* more ShadCN update

Author: bcolloran

package-lock.json

@@ -26,7 +26,7 @@
       <li class="w-full h-[52px] border rounded">
         <a
           href={`/${organization}/${project}/${dashboard.meta.name.name}`}
-          class="w-full h-full overflow-x-auto p-3 flex items-center gap-x-6 text-gray-700 hover:text-blue-600 hover:bg-slate-50"
+          class="w-full h-full overflow-x-auto p-3 flex items-center gap-x-6 text-gray-700 hover:text-primary-600 hover:bg-slate-50"
         >
           <!-- Icon -->
           <div

web-admin/src/features/dashboards/listing/DashboardList.svelte

@@ -23,7 +23,9 @@
 >
   <div class="flex gap-x-2 items-center">
     <DashboardIcon size={"14px"} className="text-slate-500" />
-    <div class="text-gray-700 text-sm font-semibold group-hover:text-blue-600">
+    <div
+      class="text-gray-700 text-sm font-semibold group-hover:text-primary-600"
+    >
       {title !== "" ? title : name}
     </div>
     {#if error !== ""}

web-admin/src/features/dashboards/listing/DashboardsTableCompositeCell.svelte

@@ -80,10 +80,10 @@
   const statusDisplays: Record<V1DeploymentStatus, StatusDisplay> = {
     [V1DeploymentStatus.DEPLOYMENT_STATUS_OK]: {
       icon: CheckCircle,
-      iconProps: { className: "text-blue-600 hover:text-blue-500" },
+      iconProps: { className: "text-primary-600 hover:text-primary-500" },
       text: "ready",
-      textClass: "text-blue-600",
-      wrapperClass: "bg-blue-50 border-blue-300",
+      textClass: "text-primary-600",
+      wrapperClass: "bg-primary-50 border-primary-300",
     },
     [V1DeploymentStatus.DEPLOYMENT_STATUS_PENDING]: {
       icon: Spinner,

web-admin/src/features/projects/status/ProjectDeploymentStatusChip.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <button
-  class="text-gray-500 hover:text-blue-500 hover:bg-slate-200 grid place-items-center rounded-sm"
+  class="text-gray-500 hover:text-primary-500 hover:bg-slate-200 grid place-items-center rounded-sm"
   on:click={() => console.log(`open actions for ${reportName}`)}
 >
   <ThreeDot size="16px" />

web-admin/src/features/scheduled-reports/listing/ReportsTableActionCell.svelte

@@ -23,14 +23,16 @@
 <a href={`reports/${id}`} class="flex flex-col gap-y-0.5 group px-4 py-[5px]">
   <div class="flex gap-x-2 items-center">
     <ReportIcon size={"14px"} className="text-slate-500" />
-    <div class="text-gray-700 text-sm font-semibold group-hover:text-blue-600">
+    <div
+      class="text-gray-700 text-sm font-semibold group-hover:text-primary-600"
+    >
       {title}
     </div>
     {#if lastRun}
       {#if lastRunErrorMessage}
         <CancelCircleInverse className="text-red-500" />
       {:else}
-        <CheckCircleOutline className="text-blue-500" />
+        <CheckCircleOutline className="text-primary-500" />
       {/if}
     {/if}
   </div>

web-admin/src/features/scheduled-reports/listing/ReportsTableCompositeCell.svelte

@@ -1,7 +1,7 @@
 module.exports = {
-  presets: [require('../web-common/tailwind.config.cjs')],
+  presets: [require("../web-common/tailwind.config.ts")],
   content: [
     "./src/**/*.{html,js,svelte,ts}",
     "../web-common/**/*.{html,js,svelte,ts}",
-  ]
+  ],
 };

web-admin/tailwind.config.cjs web-admin/tailwind.config.tsweb-admin/tailwind.config.cjs renamed to web-admin/tailwind.config.ts

@@ -21,7 +21,7 @@
   let inputClasses =
     "h-10 px-4 py-2 border border-slate-300 rounded-sm text-base";
   let focusClasses =
-    "ring-offset-2 focus:ring-2 focus:ring-blue-300 focus:outline-none";
+    "ring-offset-2 focus:ring-2 focus:ring-primary-ry-300 focus:outline-none";
 
   $: type = showPassword ? "text" : "password";
 

web-auth/src/components/EmailPassForm.svelte

@@ -15,7 +15,7 @@
   let inputClasses =
     "h-10 px-4 py-2 border border-slate-300 rounded-sm text-base";
   let focusClasses =
-    "ring-offset-2 focus:ring-2 focus:ring-blue-300 focus:outline-none";
+    "ring-offset-2 focus:ring-2 focus:ring-primary-300 focus:outline-none";
 
   function handleSubmit() {
     if (!showForm) {

web-auth/src/components/SSOForm.svelte

@@ -1,7 +1,7 @@
 module.exports = {
-  presets: [require('../web-common/tailwind.config.cjs')],
+  presets: [require("../web-common/tailwind.config.ts")],
   content: [
     "./src/**/*.{html,js,svelte,ts}",
     "../web-common/**/*.{html,js,svelte,ts}",
-  ]
+  ],
 };