feat: Introduce some nicer colors

5 files changed, 102 insertions, 19 deletions

diff --git a/apps/kit/postcss.config.cjs b/apps/kit/postcss.config.cjs
index e48cff5..a53e3b3 100644
--- a/apps/kit/postcss.config.cjs
+++ b/apps/kit/postcss.config.cjs
@@ -1,12 +1,12 @@
 const tailwindcss = require("tailwindcss");
 const autoprefixer = require("autoprefixer");
+const nesting = require("tailwindcss/nesting");
 
 const config = {
   plugins: [
-    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
-    tailwindcss(),
-    //But others, like autoprefixer, need to run after,
-    autoprefixer,
+    nesting,
+    tailwindcss,
+    autoprefixer
   ],
 };
 
diff --git a/apps/kit/src/lib/components/button.svelte b/apps/kit/src/lib/components/button.svelte
index 6566cec..929d728 100644
--- a/apps/kit/src/lib/components/button.svelte
+++ b/apps/kit/src/lib/components/button.svelte
@@ -15,9 +15,8 @@
     export let href: string | undefined = undefined;
     export let text: string;
 
-    let sizeClasses = "px-3 py-2 text-xs";
-    let kindClasses =
-        "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500";
+    let sizeClasses = "";
+    let kindClasses = "";
 
     $: shared_props = {
         type: type,
@@ -36,28 +35,28 @@
             sizeClasses = "px-3 py-2 text-sm";
             break;
         case "md":
-            sizeClasses = "px-4 py-2 text-sm";
+            sizeClasses = "px-3 py-2 text-base";
             break;
         case "lg":
-            sizeClasses = "px-4 py-2 text-base";
+            sizeClasses = "px-3 py-2 text-lg";
             break;
         case "xl":
-            sizeClasses = "px-6 py-3 text-base";
+            sizeClasses = "px-6 py-3 text-xl";
             break;
     }
 
     $: switch (kind) {
         case "secondary":
             kindClasses =
-                "border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500";
+                "border-transparent text-teal-800 bg-teal-100 hover:bg-teal-200 focus:ring-teal-500";
             break;
         case "primary":
             kindClasses =
-                "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500";
+                "border-transparent text-teal-900 bg-teal-300 hover:bg-teal-400 focus:ring-teal-500";
             break;
         case "white":
             kindClasses =
-                "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-500";
+                "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-400";
             break;
     }
 </script>
diff --git a/apps/kit/src/routes/book/+layout.svelte b/apps/kit/src/routes/book/+layout.svelte
index 85ba907..fc55d9d 100644
--- a/apps/kit/src/routes/book/+layout.svelte
+++ b/apps/kit/src/routes/book/+layout.svelte
@@ -14,7 +14,7 @@
         <a
             href="/book/buttons"
             class="link"
-            class:active={$page.url.pathname.startsWith("/book/alerts")}
+            class:active={$page.url.pathname.startsWith("/book/buttons")}
             >Buttons</a
         >
     </nav>
diff --git a/apps/kit/tailwind.config.cjs b/apps/kit/tailwind.config.cjs
index 65b523e..2f80e55 100644
--- a/apps/kit/tailwind.config.cjs
+++ b/apps/kit/tailwind.config.cjs
@@ -1,12 +1,96 @@
+const defaultColors = require("tailwindcss/colors");
+
+const refactoringUiPalette4 = {
+  "blue": {
+    "50": "#DCEEFB",
+    "100": "#B6E0FE",
+    "200": "#84C5F4",
+    "300": "#62B0E8",
+    "400": "#4098D7",
+    "500": "#2680C2",
+    "600": "#186FAF",
+    "700": "#0F609B",
+    "800": "#0A558C",
+    "900": "#003E6B",
+  },
+  "red": {
+    "50": "#FFEEEE",
+    "100": "#FACDCD",
+    "200": "#F29B9B",
+    "300": "#E66A6A",
+    "400": "#D64545",
+    "500": "#BA2525",
+    "600": "#A61B1B",
+    "700": "#911111",
+    "800": "#780A0A",
+    "900": "#610404",
+  },
+  "yellow": {
+    "50": "#FFFAEB",
+    "100": "#FCEFC7",
+    "200": "#F8E3A3",
+    "300": "#F9DA8B",
+    "400": "#F7D070",
+    "500": "#E9B949",
+    "600": "#C99A2E",
+    "700": "#A27C1A",
+    "800": "#7C5E10",
+    "900": "#513C06",
+  },
+  "purple": {
+    "50": "#EAE2F8",
+    "100": "#CFBCF2",
+    "200": "#A081D9",
+    "300": "#8662C7",
+    "400": "#724BB7",
+    "500": "#653CAD",
+    "600": "#51279B",
+    "700": "#421987",
+    "800": "#34126F",
+    "900": "#240754",
+  },
+  "blue-grey": {
+    "50": "#F0F4F8",
+    "100": "#D9E2EC",
+    "200": "#BCCCDC",
+    "300": "#9FB3C8",
+    "400": "#829AB1",
+    "500": "#627D98",
+    "600": "#486581",
+    "700": "#334E68",
+    "800": "#243B53",
+    "900": "#102A43",
+  },
+  "teal": {
+    "50": "#EFFCF6",
+    "100": "#C6F7E2",
+    "200": "#8EEDC7",
+    "300": "#65D6AD",
+    "400": "#3EBD93",
+    "500": "#27AB83",
+    "600": "#199473",
+    "700": "#147D64",
+    "800": "#0C6B58",
+    "900": "#014D40",
+  }
+}
+
 const config = {
   content: ["./src/**/*.{html,js,svelte,ts}"],
-
   theme: {
-    extend: {},
+    colors: {
+      "blue": refactoringUiPalette4.blue,
+      "red": refactoringUiPalette4.red,
+      "yellow": refactoringUiPalette4.yellow,
+      "purple": refactoringUiPalette4.purple,
+      "teal": refactoringUiPalette4.teal,
+      "green": refactoringUiPalette4.teal,
+      "gray": defaultColors.gray,
+      "white": defaultColors.white
+    }
   },
-
   plugins: [
-      require("@tailwindcss/forms")
+    require("@tailwindcss/forms"),
   ],
   safelist: [
     "bg-blue-50",
diff --git a/apps/kit/tsconfig.json b/apps/kit/tsconfig.json
index ed68025..5e89be1 100644
--- a/apps/kit/tsconfig.json
+++ b/apps/kit/tsconfig.json
@@ -28,7 +28,7 @@
     "./**/*.ts",
     "./**/*.js",
     "./**/*.svelte"
-  ],
+, "tailwind.config.cjs"  ],
   "exclude": [
     "./node_modules"
   ]