From 7d958d67dc23f88766bdcf91592bdaa761f300e3 Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel-git@c0ntroller.de>
Date: Mon, 24 Oct 2022 23:53:00 +0200
Subject: [PATCH] First colors

---
 data/skills.tsx                 | 31 +++++++++++++++++++++++--------
 pages/me.tsx                    |  8 +++-----
 styles/Blog/AboutMe.module.scss |  2 ++
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/data/skills.tsx b/data/skills.tsx
index 1f7d76a..2b42181 100644
--- a/data/skills.tsx
+++ b/data/skills.tsx
@@ -17,6 +17,11 @@ export interface CardColors {
     background: string;
     bars: string;
     heading: string;
+    useDarkColor: boolean;
+    badges?: {
+        background: string;
+        useDarkColor: boolean;
+    }
 }
 
 export interface SkillCard {
@@ -113,11 +118,16 @@ export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSe
                 name: "Spring Boot",
                 icon: <Springboot size={sizeBadgeIcons} />
             }],
-            /*colors: {
-                background: "#2196f3",
-                bars: "#217fff",
-                heading: "#2043ff"
-            }*/
+            colors: {
+                background: "#A4C7EA",
+                bars: "#706EB8",
+                heading: "#2A2885",
+                useDarkColor: true,
+                badges: {
+                    background: "#2A2885",
+                    useDarkColor: false,
+                }
+            }
         }, {
             title: "Embedded Programming",
             skillBars: [{
@@ -132,11 +142,16 @@ export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSe
                 name: "ESP",
                 icon: <Espressif size={sizeBadgeIcons} />
             }],
-            /*colors: {
+            colors: {
                 background: "#EA8585",
                 bars: "#E53E3E",
-                heading: "#661C1C"
-            }*/
+                heading: "#661C1C",
+                useDarkColor: true,
+                badges: {
+                    background: "#661C1C",
+                    useDarkColor: false,
+                }
+            }
         }, {
             title: "Operating Systems",
             skillBars: [],
diff --git a/pages/me.tsx b/pages/me.tsx
index b2a5f42..69d74f4 100644
--- a/pages/me.tsx
+++ b/pages/me.tsx
@@ -29,13 +29,11 @@ const SkillCard: NextPage<{ card: SkillCard }> = ({ card }) => {
         background: card.colors?.background,
         "--ch-color": card.colors?.heading,
         "--bar-color": card.colors?.bars,
-        color: undefined,
+        color: card.colors?.useDarkColor === undefined ? undefined : (card.colors?.useDarkColor ? "#222" : "#ddd"),
+        "--badge-bg": card.colors?.badges?.background,
+        "--badge-color": card.colors?.badges?.useDarkColor === undefined ? undefined : (card.colors?.badges?.useDarkColor ? "#222" : "#ddd"),
     } as React.CSSProperties;
 
-    try {
-        cardStyle.color = Color(cardStyle.background).isDark() ? "#ddd" : "#222";
-    } catch {}
-
     return <div className={styles.skillCard} style={cardStyle}>
     <h3>{card.title}</h3>
     <div className={styles.skillBarsSet}>
diff --git a/styles/Blog/AboutMe.module.scss b/styles/Blog/AboutMe.module.scss
index 260d3c4..13e2ddb 100644
--- a/styles/Blog/AboutMe.module.scss
+++ b/styles/Blog/AboutMe.module.scss
@@ -44,6 +44,8 @@
     border: 1px solid var(--blog_content-border);
     border-radius: 0.5em;
     padding: 5px;
+    background: var(--badge-bg, transparent);
+    color: var(--badge-color, inherit);
 
     & > span {
         align-self: center;