Merge pull request #2 from Ditectrev/feature/colors-branding

feat: make our branding colors

Author: danieldanielecki

app/not-found.tsx

@@ -15,7 +15,7 @@ export default function NotFound() {
         <p className="mb-8">But dont worry, you can find plenty of other things on our homepage.</p>
         <Link
           href="/"
-          className="focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm leading-5 font-medium text-white shadow-xs transition-colors duration-150 hover:bg-blue-700 focus:outline-hidden dark:hover:bg-blue-500"
+          className="focus:shadow-outline-primary bg-primary-600 hover:bg-primary-700 dark:hover:bg-primary-500 inline rounded-lg border border-transparent px-4 py-2 text-sm leading-5 font-medium text-white shadow-xs transition-colors duration-150 focus:outline-hidden"
         >
           Back to homepage
         </Link>

app/tag-data.json

@@ -9,11 +9,11 @@
   "rest": 1,
   "web-development": 2,
   "web-services": 1,
+  "css": 1,
+  "frontend": 1,
+  "software-development": 2,
   "android": 1,
   "androidx": 1,
   "jetifier": 1,
-  "mobile-development": 1,
-  "software-development": 2,
-  "css": 1,
-  "frontend": 1
+  "mobile-development": 1
 }

components/Header.tsx

@@ -64,7 +64,7 @@ const Header = () => {
               >
                 {link.title}
                 {link.external && (
-                  <ExternalLink className="h-4 w-4 text-blue-500 dark:text-blue-400" />
+                  <ExternalLink className="text-primary-500 dark:text-primary-400 h-4 w-4" />
                 )}
               </Link>
             ))}

components/MobileNav.tsx

@@ -82,7 +82,7 @@ const MobileNav = () => {
                   >
                     {link.title}
                     {link.external && (
-                      <ExternalLink className="h-4 w-4 text-blue-500 dark:text-blue-400" />
+                      <ExternalLink className="text-primary-500 dark:text-primary-400 h-4 w-4" />
                     )}
                   </Link>
                 ))}

css/tailwind.css

@@ -7,22 +7,23 @@
 /* Core theme configuration */
 @theme {
   /* Font families */
-  --font-sans: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+  --font-sans:
+    var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
   /* Colors */
-  /* Copied from https://tailwindcss.com/docs/theme#default-theme-variable-reference */
-  --color-primary-50: oklch(0.971 0.014 343.198);
-  --color-primary-100: oklch(0.948 0.028 342.258);
-  --color-primary-200: oklch(0.899 0.061 343.231);
-  --color-primary-300: oklch(0.823 0.12 346.018);
-  --color-primary-400: oklch(0.718 0.202 349.761);
-  --color-primary-500: oklch(0.656 0.241 354.308);
-  --color-primary-600: oklch(0.592 0.249 0.584);
-  --color-primary-700: oklch(0.525 0.223 3.958);
-  --color-primary-800: oklch(0.459 0.187 3.815);
-  --color-primary-900: oklch(0.408 0.153 2.432);
-  --color-primary-950: oklch(0.284 0.109 3.907);
+  /* Brand color #3f51b5 converted to OKLCH and scaled for accessibility */
+  --color-primary-50: oklch(0.95 0.02 264);
+  --color-primary-100: oklch(0.9 0.04 264);
+  --color-primary-200: oklch(0.82 0.08 264);
+  --color-primary-300: oklch(0.72 0.12 264);
+  --color-primary-400: oklch(0.62 0.16 264);
+  --color-primary-500: oklch(0.52 0.18 264); /* #3f51b5 */
+  --color-primary-600: oklch(0.45 0.16 264);
+  --color-primary-700: oklch(0.38 0.14 264);
+  --color-primary-800: oklch(0.32 0.12 264);
+  --color-primary-900: oklch(0.26 0.1 264);
+  --color-primary-950: oklch(0.18 0.08 264);
 
   --color-gray-50: oklch(0.985 0.002 247.839);
   --color-gray-100: oklch(0.967 0.003 264.542);