CF-296 CF-317 follow button colors change

FDMediagroep · Nov 7, 2023 · cb6d47f · cb6d47f
1 parent 6da308d
commit cb6d47f
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 45 deletions.
diff --git a/src/components/button/ButtonFollow.module.scss b/src/components/button/ButtonFollow.module.scss
@@ -7,18 +7,19 @@
     border-radius: 2px;
     white-space: nowrap;
     padding: 5px 10px;
-    border: 1px solid var(--primary);
-    color: var(--primary);
-    background-color: transparent;
+    border: 1px solid var(--button-follow-outline);
+    color: var(--button-follow-text);
+    background-color: var(--button-follow);
     cursor: pointer;
     transition: background-color 0.2s;
     font-family: map-deep-get($typography, 'font-family', 'regular'), sans-serif;
     font-size: 0.875rem;
 
-    &:hover {
-        background-color: var(--primary);
-        border-color: var(--primary);
-        color: var(--content-background);
+    &:hover,
+    &:focus {
+        background-color: transparent;
+        border-color: var(--button-follow-outline);
+        color: var(--button-follow-text-hover);
     }
     .cross {
         &:before {
@@ -46,11 +47,12 @@
     }
 
     &[data-selected='true'] {
-        background-color: var(--primary);
-        color: var(--content-background);
+        background-color: var(--button-follow-active);
+        color: var(--button-follow-active-text);
+        &:focus,
         &:hover {
-            color: var(--primary);
-            background-color: transparent;
+            color: var(--button-follow-text-active-hover);
+            background-color: var(--button-follow-active-hover);
         }
         .cross {
             transform: rotate(45deg);
@@ -64,32 +66,4 @@
             display: inline;
         }
     }
-
-    &.persoonlijk {
-        .cross,
-        .buttonText {
-            color: #000000;
-        }
-
-        &:hover {
-            .cross,
-            .buttonText {
-                color: #ffffff;
-            }
-        }
-
-        &[data-selected='true'] {
-            .buttonText,
-            .cross {
-                color: #ffffff;
-            }
-            &:hover {
-                .buttonText,
-                .cross {
-                    color: #000000;
-                    background-color: transparent;
-                }
-            }
-        }
-    }
 }
diff --git a/src/components/button/ButtonFollow.tsx b/src/components/button/ButtonFollow.tsx
@@ -9,10 +9,6 @@ interface Props {
     tag: string;
     addText?: string;
     removeText?: string;
-    /**
-     * variant-1: persoonlijk
-     */
-    variant?: 'variant-1';
     [x: string]: any;
 }
 
@@ -26,8 +22,8 @@ function ButtonFollow(props: Props) {
             <button
                 {...props}
                 className={`${styles.fdFollowButton}${
-                    props.variant ? ` ${styles.persoonlijk}` : ''
-                }${props.className ? ` ${props.className}` : ''}`}
+                    props.className ? ` ${props.className}` : ''
+                }`}
                 data-tag={props.tag}
                 data-selected={props.selected}
                 data-addurl={props.addUrl ?? '/add-interest'}

diff --git a/src/design-tokens/mixins/dark-tokens.scss b/src/design-tokens/mixins/dark-tokens.scss
@@ -205,6 +205,30 @@
     --button-ghost-active-text: #{map-deep-get($colors, 'colors', 'primary', 75)};
     --button-ghost-active: #{map-deep-get($colors, 'colors', 'primary', 25)};
     --button-ghost-disabled: #{map-deep-get($colors, 'colors', 'neutral', 30)};
+    --button-follow-text: #{map-deep-get($colors, 'colors', 'neutral', 10)};
+    --button-follow: #{map-deep-get($colors, 'colors', 'neutral', 90)};
+    --button-follow-active: transparent;
+    --button-follow-active-hover: #{map-deep-get(
+            $colors,
+            'colors',
+            'neutral',
+            90
+        )};
+    --button-follow-text-active: #{map-deep-get(
+            $colors,
+            'colors',
+            'neutral',
+            90
+        )};
+    --button-follow-text-active-hover: #{map-deep-get(
+            $colors,
+            'colors',
+            'neutral',
+            10
+        )};
+    --button-follow-hover: #{map-deep-get($colors, 'colors', 'neutral', 10)};
+    --button-follow-text-hover: #{map-deep-get($colors, 'colors', 'neutral', 90)};
+    --button-follow-outline: #{map-deep-get($colors, 'colors', 'neutral', 90)};
 
     --upsell-gradient: linear-gradient(
         to bottom,

diff --git a/src/design-tokens/mixins/light-tokens.scss b/src/design-tokens/mixins/light-tokens.scss
@@ -203,6 +203,30 @@
     --button-ghost-active-text: #{map-deep-get($colors, 'colors', 'primary', 75)};
     --button-ghost-active: transparent;
     --button-ghost-disabled: #{map-deep-get($colors, 'colors', 'neutral', 60)};
+    --button-follow-text: #{map-deep-get($colors, 'colors', 'neutral', 90)};
+    --button-follow: #{map-deep-get($colors, 'colors', 'neutral', 10)};
+    --button-follow-active: transparent;
+    --button-follow-active-hover: #{map-deep-get(
+            $colors,
+            'colors',
+            'neutral',
+            10
+        )};
+    --button-follow-text-active: #{map-deep-get(
+            $colors,
+            'colors',
+            'neutral',
+            90
+        )};
+    --button-follow-text-active-hover: #{map-deep-get(
+            $colors,
+            'colors',
+            'neutral',
+            90
+        )};
+    --button-follow-hover: #{map-deep-get($colors, 'colors', 'neutral', 90)};
+    --button-follow-text-hover: #{map-deep-get($colors, 'colors', 'neutral', 10)};
+    --button-follow-outline: #{map-deep-get($colors, 'colors', 'neutral', 10)};
 
     --upsell-gradient: linear-gradient(
         to bottom,