feat: adds background dark/light mode to Tag

varianter · Nov 30, 2024 · 6d9058f · 6d9058f
1 parent ba2c1be
commit 6d9058f
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 10 deletions.
diff --git a/src/components/sections/contact-box/ContactBox.tsx b/src/components/sections/contact-box/ContactBox.tsx
@@ -55,6 +55,7 @@ export default async function ContactBox({
               employeesPageSlug={employeesPageSlug}
               contactPoints={contactPoints}
               language={language}
+              background={section.designMode}
             />
           </Suspense>
         </div>

diff --git a/src/components/sections/contact-box/ContactSelector.tsx b/src/components/sections/contact-box/ContactSelector.tsx
@@ -18,12 +18,14 @@ export type ContactSelectorProps = {
   contactPoints: Promise<EmployeeAndTag[]>;
   employeesPageSlug: string;
   language: string;
+  background?: "dark" | "light";
 };
 
 export default function ContactSelector({
   contactPoints: contactPointsPromise,
   employeesPageSlug,
   language,
+  background = "dark",
 }: ContactSelectorProps) {
   const contactPoints = use(contactPointsPromise);
 
@@ -39,6 +41,7 @@ export default function ContactSelector({
             key={contactPoint.tagSlug}
             type="button"
             role="tab"
+            background={background}
             aria-selected={selectedTag === contactPoint.tagSlug}
             aria-controls={`panel-${contactPoint.tagSlug}`}
             id={`tab-${contactPoint.tagSlug}`}

diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx
@@ -16,11 +16,19 @@ type TagInner =
 
 type TagProps = {
   active?: boolean;
+  background?: "light" | "dark";
   text: string;
 } & TagInner;
 
-export const Tag = ({ text, active = false, ...props }: TagProps) => {
-  const className = `${styles.tag} ${active ? styles["tag--active"] : ""}`;
+export const Tag = ({
+  text,
+  background = "light",
+  active = false,
+  ...props
+}: TagProps) => {
+  const activeClass = active ? styles["tag--active"] : "";
+  const bgDarkClass = background === "dark" ? styles["tag--bgDark"] : "";
+  const className = `${styles.tag} ${activeClass} ${bgDarkClass}`;
   if (props.type === "button") {
     return (
       <button className={className} onClick={props.onClick}>

diff --git a/src/components/tag/tag.module.css b/src/components/tag/tag.module.css
@@ -1,26 +1,51 @@
 .tag {
+  --_tag-background: transparent;
+
+  /* @TODO Should be different property? */
+  --_tag-borderColor: var(--text-primary);
+  --_tag-color: var(--text-primary);
+
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.375rem 0.75rem;
-  border: 1px solid var(--text-primary, #222424);
-  background: transparent;
   border-radius: 9999px;
-}
 
+  border: 1px solid var(--_tag-borderColor);
+  background: var(--_tag-background);
+  color: var(--_tag-color);
+}
 .tag:hover {
-  background: var(--background-bg-light-secondary, #eaeaea);
+  --_tag-background: var(--background-bg-light-secondary);
 }
 .tag:active {
-  background: var(--background-bg-light-secondary, #eaeaea);
+  --_tag-borderColor: var(--background-bg-light-secondary);
 }
 .tag:focus {
   outline: 2px solid var(--surface-yellow, #ffd02f);
 }
+
+.tag--bgDark {
+  --_tag-borderColor: var(--background-bg-light-secondary);
+  --_tag-color: var(--text-primary-light);
+}
+.tag--bgDark:active {
+  --_tag-background: var(--background-bg-light-secondary);
+  --_tag-color: var(--text-primary);
+}
+.tag--bgDark:hover {
+  --_tag-color: var(--background-bg-light-secondary);
+  --_tag-background: transparent;
+}
+
 .tag--active {
-  background: var(--background-bg-dark, #2d2d2d);
-  color: var(--text-primary-light);
+  --_tag-background: var(--background-bg-dark);
+  --_tag-color: var(--text-primary-light);
 }
 .tag--active:hover {
-  background: var(--background-bg-dark, #2d2d2d);
+  --_tag-background: var(--background-bg-dark);
+}
+.tag--active.tag--bgDark {
+  --_tag-background: var(--background-bg-light-primary);
+  --_tag-color: var(--text-primary);
 }