Develop flytte darkmode til theme feedback

packages/ffe-feedback-react/README.md

@@ -12,7 +12,7 @@ npm install --save @sb1/ffe-feedback-react
 
 Full documentation is not yet available, but will be added to https://design.sparebank1.no/komponenter.
 
-This package depends on `@sb1/ffe-buttons-react` and `@sb1/ffe-form-react`.
+This package depends on `@sb1/ffe-buttons-react`, `@sb1/ffe-icons-react` and `@sb1/ffe-form-react`.
 Make sure you import the less-files.
 
 ## Development

packages/ffe-feedback-react/src/FeedbackThumbs.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { txt } from './i18n/texts';
-import { ThumbUp, ThumbUpFill, ThumbDown, ThumbDownFill } from './icons';
 
 export type Thumb = 'THUMB_UP' | 'THUMB_DOWN';
 
@@ -24,18 +23,16 @@ export const FeedbackThumbs: React.FC<FeedbackThumbsProps> = ({
                 onClick={() => onClick('THUMB_UP')}
                 type="button"
             >
-                <ThumbUp className="ffe-feedback__thumb-icon" />
-                <ThumbUpFill className="ffe-feedback__thumb-icon--fill" />
+                <span className="ffe-icons ffe-icons--xl" />
             </button>
             <button
                 aria-label={txt[locale].ARIA_LABEL_THUMB_DOWN}
                 aria-describedby={headingId}
-                className="ffe-feedback__thumb"
+                className="ffe-feedback__thumb ffe-feedback__thumb--down"
                 onClick={() => onClick('THUMB_DOWN')}
                 type="button"
             >
-                <ThumbDown className="ffe-feedback__thumb-icon" />
-                <ThumbDownFill className="ffe-feedback__thumb-icon--fill" />
+                <span className="ffe-icons ffe-icons--xl" />
             </button>
         </div>
     );

packages/ffe-feedback/less/feedback-container.less

@@ -2,40 +2,36 @@
     width: 100%;
     flex-grow: 1;
     padding: var(--ffe-spacing-md);
+    background-color: var(--ffe-v-feedback-background-color);
 
-    // Tilgjengelige farger
     &--bg-hvit {
-        background-color: var(--ffe-farge-hvit);
+        --ffe-v-feedback-background-color: var(--ffe-farge-hvit);
     }
 
     &--bg-frost-30 {
-        background-color: var(--ffe-farge-frost-30);
+        --ffe-v-feedback-background-color: var(--ffe-farge-frost-30);
     }
 
     &--bg-sand-30 {
-        background-color: var(--ffe-farge-sand-30);
+        --ffe-v-feedback-background-color: var(--ffe-farge-sand-30);
     }
 
     &--bg-syrin-30 {
-        background-color: var(--ffe-farge-syrin-30);
+        --ffe-v-feedback-background-color: var(--ffe-farge-syrin-30);
     }
 
     &--bg-vann-30 {
-        background-color: var(--ffe-farge-vann-30);
+        --ffe-v-feedback-background-color: var(--ffe-farge-vann-30);
     }
 
-    &--dm-bg-svart {
+    @media (prefers-color-scheme: dark) {
         .regard-color-scheme-preference & {
-            @media (prefers-color-scheme: dark) {
-                background-color: var(--ffe-farge-svart);
+            &--dm-bg-svart {
+                --ffe-v-feedback-background-color: var(--ffe-farge-svart);
             }
-        }
-    }
 
-    &--dm-bg-natt {
-        .regard-color-scheme-preference & {
-            @media (prefers-color-scheme: dark) {
-                background-color: var(--ffe-farge-natt);
+            &--dm-bg-natt {
+                --ffe-v-feedback-background-color: var(--ffe-farge-natt);
             }
         }
     }

packages/ffe-feedback/less/feedback-input.less

@@ -1,6 +1,6 @@
 .ffe-feedback {
     &__content {
-        padding: 10px 0 40px;
+        padding: var(--ffe-spacing-xs) 0 var(--ffe-spacing-xl);
         margin-right: auto;
         margin-left: auto;
         max-width: 420px;

packages/ffe-feedback/less/feedback-thumb.less

@@ -1,40 +1,27 @@
-.ffe-feedback {
-    &__thumb {
-        border: none;
-        background: none;
-        cursor: pointer;
-        fill: var(--ffe-farge-fjell);
-        margin: 0 var(--ffe-spacing-xs);
-        outline: none; // Remove focus outline
+.ffe-feedback__thumb {
+    --thumb-up-filled-xl: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iNDgiPjxwYXRoIGQ9Ik04NDIuMzA2LTYxNC4zMDZxMjIuMjMxIDAgMzkuOTYyIDE3LjczIDE3LjczMSAxNy43MzEgMTcuNzMxIDM5Ljk2MnY2Ni4yMjlxMCA5LjQ2Mi0yLjExNiAyMS40NjItMi4xMTUgMTEuOTk5LTUuOTYxIDIwLjY5Mkw3ODAuMTUzLTE4Ny45MjRxLTguNjE2IDE5Ljg0Ni0yOC41MzkgMzMuODg0LTE5LjkyMyAxNC4wMzktNDEuNzY5IDE0LjAzOUgzMjIuNDYycS0yMy44NDYgMC00MC43NjktMTYuOTIzLTE2LjkyMy0xNi45MjQtMTYuOTIzLTQwLjc3di0zOTIuOTk3cTAtMTEgNC41LTIxLjYxNSA0LjUtMTAuNjE2IDEyLjExNS0xOC42MTZsMjA0LjMwOC0yMTEuNDYxcTEwLjkyMy0xMS4zMDcgMjUuOTk5LTEzLjkyMyAxNS4wNzctMi42MTUgMjguMjMgNC42OTIgMTIuNzY5IDcuMzA4IDE5LjE1NCAyMS40NjIgNi4zODQgMTQuMTUzIDMuMTU0IDMwLjA3NmwtMzggMTg1Ljc3aDMxOC4wNzZaTTE1NS40NjMtMTQwLjAwMXEtMjIuNjE1IDAtMzkuMDM5LTE2LjQyMy0xNi40MjMtMTYuNDI0LTE2LjQyMy0zOS4wMzl2LTM2My4zODJxMC0yMi4yMzEgMTYuNDIzLTM4Ljg0NiAxNi40MjQtMTYuNjE1IDM5LjAzOS0xNi42MTVoOC40NjJxMjIuNjE1IDAgMzkuMDM4IDE2LjYxNXQxNi40MjMgMzguODQ2djM2My43NjdxMCAyMi42MTUtMTYuNDIzIDM4Ljg0Ni0xNi40MjMgMTYuMjMxLTM5LjAzOCAxNi4yMzFoLTguNDYyWiIvPjwvc3ZnPg==');
+    --thumb-up-open-400-xl: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iNDgiPjxwYXRoIGQ9Ik04NTUtNjMycTI0IDAgNDIgMTh0MTggNDJ2ODEuODM5cTAgNy4xNjEgMS41IDE0LjY2MVQ5MTUtNDYxTDc4OS0xNzFxLTguODc4IDIxLjI1LTI5LjU5NSAzNi4xMjVRNzM4LjY4OS0xMjAgNzE2LTEyMEgyNzJ2LTUxMmwyMjUtMjM4cTEzLjYtMTQgMzIuMTg3LTE2LjVRNTQ3Ljc3My04ODkgNTY1LTg3OXExNyAxMCAyNS41IDI3LjV0NC4yIDM2LjVMNTU2LTYzMmgyOTlabS01MjMgMjV2NDI3aDM5N2wxMjYtMjk5di05M0g0ODJsNTMtMjQ5LTIwMyAyMTRaTTEzOS0xMjBxLTI0Ljc1IDAtNDIuMzc1LTE3LjYyNVQ3OS0xODB2LTM5MnEwLTI0Ljc1IDE3LjYyNS00Mi4zNzVUMTM5LTYzMmgxMzN2NjBIMTM5djM5MmgxMzN2NjBIMTM5Wm0xOTMtNjB2LTQyNyA0MjdaIi8+PC9zdmc+');
 
-        @media (prefers-color-scheme: dark) {
-            .regard-color-scheme-preference & {
-                fill: var(--ffe-farge-vann-70);
-            }
-        }
+    all: unset;
+    margin: 0 var(--ffe-spacing-xs);
+    cursor: pointer;
 
-        .ffe-feedback__thumb-icon--fill {
-            display: none;
-        }
+    .ffe-icons {
+        mask-image: var(--thumb-up-open-400-xl);
+        color: var(--ffe-v-feedback-thumb-color);
+    }
 
-        @media (hover: hover) and (pointer: fine) {
-            &:hover {
-                .ffe-feedback__thumb-icon--fill {
-                    display: block;
-                }
-                .ffe-feedback__thumb-icon {
-                    display: none;
-                }
-            }
-        }
+    &:focus-visible .ffe-icons {
+        mask-image: var(--thumb-up-filled-xl);
+    }
 
-        &:focus {
-            .ffe-feedback__thumb-icon--fill {
-                display: block;
-            }
-            .ffe-feedback__thumb-icon {
-                display: none;
-            }
+    @media (hover: hover) and (pointer: fine) {
+        &:hover .ffe-icons {
+            mask-image: var(--thumb-up-filled-xl);
         }
     }
+
+    &--down {
+        transform: rotate(180deg);
+    }
 }

packages/ffe-feedback/less/feedback.less

@@ -1,3 +1,4 @@
+@import 'theme';
 @import 'feedback-container';
 @import 'feedback-input';
 @import 'feedback-thumb';

packages/ffe-feedback/less/theme.less

@@ -0,0 +1,11 @@
+:root,
+:host {
+    --ffe-v-feedback-background-color: transparent;
+    --ffe-v-feedback-thumb-color: var(--ffe-farge-fjell);
+
+    @media (prefers-color-scheme: dark) {
+        .regard-color-scheme-preference {
+            --ffe-v-feedback-thumb-color: var(--ffe-farge-vann-70);
+        }
+    }
+}