Merge pull request #2587 from SpareBank1/input-visual-bugs

fix(ffe-form): semantiske farger og bugfikser
SpareBank1 · Feb 28, 2025 · 1ad4246 · 1ad4246
2 parents 3775a93 + eaab5ee
commit 1ad4246
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 84 deletions.
diff --git a/packages/ffe-form/less/dropdown.less b/packages/ffe-form/less/dropdown.less
@@ -1,12 +1,12 @@
 .ffe-dropdown {
     appearance: none;
-    background-color: var(--ffe-v-input-bg-color);
+    background-color: var(--ffe-color-surface-primary-default);
     background-size: 24px 24px;
     background-repeat: no-repeat;
     background-position: calc(100% - 6px) 50%;
     border: 2px solid var(--ffe-g-border-color);
     border-radius: var(--ffe-g-border-radius);
-    color: var(--ffe-v-input-color);
+    color: var(--ffe-color-foreground-default);
     display: block;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath fill='%23005aa4' d='M480-373.539q-7.231 0-13.461-2.308-6.231-2.308-11.846-7.923L274.924-563.539q-8.308-8.307-8.5-20.884-.193-12.577 8.5-21.269 8.692-8.692 21.076-8.692t21.076 8.692L480-442.768l162.924-162.924q8.307-8.307 20.884-8.5 12.576-.192 21.268 8.5 8.693 8.692 8.693 21.077 0 12.384-8.693 21.076L505.307-383.77q-5.615 5.615-11.846 7.923-6.23 2.308-13.461 2.308Z'/%3E%3C/svg%3E%0A");
     .regard-color-scheme-preference & {
@@ -31,14 +31,14 @@
 
     &:focus,
     &:active {
-        border-color: var(--ffe-v-input-bg-color);
+        border-color: var(--ffe-color-surface-primary-default);
         box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
         outline: none;
     }
 
     &:focus::-ms-value {
-        background: var(--ffe-v-dropdown-bg-color);
-        color: var(--ffe-v-input-color);
+        background: var(--ffe-color-surface-primary-default);
+        color: var(--ffe-color-foreground-default);
     }
 
     &::-ms-expand {
@@ -55,7 +55,7 @@
     }
 
     &::placeholder {
-        color: var(--ffe-v-input-placeholder-color);
+        color: var(--ffe-color-foreground-subtle);
         opacity: 1;
     }
 }
diff --git a/packages/ffe-form/less/form.less b/packages/ffe-form/less/form.less
@@ -1,5 +1,3 @@
-@import 'theme';
-
 /* Inputs */
 @import 'input-field';
 @import 'textarea';

diff --git a/packages/ffe-form/less/input-field.less b/packages/ffe-form/less/input-field.less
@@ -4,10 +4,10 @@
     padding: var(--ffe-spacing-2xs) var(--ffe-spacing-xs); /* Increased horizontal padding */
     font-family: var(--ffe-g-font);
     font-variant-numeric: tabular-nums;
-    background-color: var(--ffe-color-component-form-input-fill-default);
+    background-color: var(--ffe-color-surface-primary-default);
     color: var(--ffe-color-foreground-default);
     border-radius: var(--ffe-g-border-radius);
-    border: 2px solid var(--ffe-color-border-primary-default);
+    border: 1px solid var(--ffe-color-border-primary-default);
     transition: all var(--ffe-transition-duration) var(--ffe-ease);
     width: 100%;
     font-size: var(--ffe-fontsize-form-input);
@@ -24,15 +24,14 @@
     @media (hover: hover) and (pointer: fine) {
         &:hover {
             border-color: var(--ffe-color-border-primary-hover);
-            background-color: var(
-                --ffe-color-component-form-input-fill-default-hover
-            );
+            box-shadow: 0 0 0 1px var(--ffe-color-border-primary-hover);
         }
     }
 
     &:focus,
     &:focus-within {
-        border: 2px solid var(--ffe-color-border-interactive-focus);
+        border: 1px solid var(--ffe-color-border-interactive-focus);
+        box-shadow: 0 0 0 1px var(--ffe-color-border-interactive-focus);
         outline: none;
     }
 
@@ -52,7 +51,7 @@
     &--text-like.ffe-input-field {
         border: none;
         border-bottom: 2px solid var(--ffe-color-border-primary-default);
-        border-radius: var(--ffe-g-border-width) var(--ffe-g-border-width) 0 0;
+        border-radius: 0;
         box-shadow: none;
         text-align: center;
         padding: 0;
@@ -75,6 +74,7 @@
         }
 
         &[aria-invalid='true'] {
+            background: var(--ffe-color-surface-feedback-critical);
             border-bottom: 2px solid var(--ffe-color-border-feedback-critical);
             border-left-style: none;
             border-right-style: none;

diff --git a/packages/ffe-form/less/input-group.less b/packages/ffe-form/less/input-group.less
@@ -18,6 +18,7 @@
 
     &__description {
         margin-bottom: var(--ffe-spacing-xs);
+        color: var(--ffe-color-foreground-subtle);
     }
 
     &--message {

diff --git a/packages/ffe-form/less/phone-number.less b/packages/ffe-form/less/phone-number.less
@@ -41,13 +41,14 @@
     &__plus {
         font-weight: 400;
         line-height: 1;
-        padding: var(--ffe-v-input-padding);
-        background-color: var(--ffe-v-input-bg-color);
-        border: var(--ffe-g-border-width) solid var(--ffe-g-border-color);
+        padding: 12px var(--ffe-spacing-sm);
+        background-color: var(--ffe-color-surface-primary-default);
+        border: var(--ffe-g-border-width) solid
+            var(--ffe-color-border-primary-default);
         border-radius: var(--ffe-g-border-radius) 0 0 var(--ffe-g-border-radius);
         border-right: 0;
         transition: border-color var(--ffe-transition-duration) var(--ffe-ease);
-        color: var(--ffe-v-input-color);
+        color: var(--ffe-color-foreground-default);
         display: flex;
         align-items: center;
     }

diff --git a/packages/ffe-form/less/textarea.less b/packages/ffe-form/less/textarea.less
@@ -1,40 +1,41 @@
 .ffe-textarea {
     display: block;
     width: 100%;
-    padding: var(--ffe-v-input-padding);
+    padding: 12px var(--ffe-spacing-sm);
     font-family: var(--ffe-g-font);
     font-variant-numeric: tabular-nums;
     border-radius: var(--ffe-g-border-radius);
-    border: var(--ffe-g-border-width) solid var(--ffe-g-border-color);
-    background-color: var(--ffe-v-input-bg-color);
-    color: var(--ffe-v-input-color);
+    border: 1px solid var(--ffe-color-border-primary-default);
+    background-color: var(--ffe-color-surface-primary-default);
+    color: var(--ffe-color-foreground-default);
     transition: border-color var(--ffe-transition-duration) var(--ffe-ease);
     font-size: var(--ffe-fontsize-form-input);
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            border-color: var(--ffe-g-primary-color);
+            border-color: var(--ffe-color-border-primary-hover);
+            box-shadow: 0 0 0 1px var(--ffe-color-border-primary-hover);
         }
     }
 
     &:focus,
     &:active {
-        border: var(--ffe-g-border-width-focus) solid var(--ffe-g-primary-color);
+        border: 1px solid var(--ffe-color-border-interactive-focus);
+        box-shadow: 0 0 0 1px var(--ffe-color-border-interactive-focus);
         outline: none;
     }
 
     &::placeholder {
-        color: var(--ffe-v-input-placeholder-color);
+        color: var(--ffe-color-foreground-subtle);
         opacity: 1;
     }
 }
 
 .ffe-textarea--invalid,
 :where(textarea).ffe-textarea[aria-invalid='true'] {
-    border-color: var(--ffe-g-error-color);
-    border-style: solid;
+    border: 1px solid var(--ffe-color-border-feedback-critical);
 
     &:focus {
-        border: var(--ffe-g-border-width-focus) solid var(--ffe-g-error-color);
+        box-shadow: 0 0 0 1px var(--ffe-color-border-feedback-critical);
     }
 }
diff --git a/packages/ffe-form/less/theme.less b/packages/ffe-form/less/theme.less
diff --git a/packages/ffe-form/less/toggle-switch.less b/packages/ffe-form/less/toggle-switch.less
@@ -12,7 +12,7 @@
         align-items: center;
         position: relative;
         cursor: pointer;
-        color: var(--ffe-g-secondary-color);
+        color: var(--ffe-color-foreground-default);
         font-family: var(--ffe-g-font);
         font-variant-numeric: tabular-nums;
         min-height: 44px;
@@ -51,7 +51,7 @@
             content: '';
             width: 56px;
             height: 30px;
-            background: var(--ffe-g-border-color);
+            background: var(--ffe-color-component-toggleswitch-fill-default);
             border-radius: 52px;
             left: auto;
             right: 0;
@@ -65,7 +65,7 @@
             content: '';
             width: 24px;
             height: 24px;
-            background: var(--ffe-v-input-bg-color);
+            background: var(--ffe-color-surface-primary-default);
             border-radius: 50%;
             position: absolute;
             left: 4px;
@@ -74,7 +74,9 @@
 
         @media (hover: hover) and (pointer: fine) {
             .ffe-toggle-switch__label:hover &::before {
-                background: var(--ffe-v-toggle-switch-hover-color);
+                background: var(
+                    --ffe-color-component-toggleswitch-fill-default-hover
+                );
             }
         }
     }
@@ -84,12 +86,14 @@
     }
 
     &__input:checked + &__label &__switch::before {
-        background: var(--ffe-g-primary-color);
+        background: var(--ffe-color-component-toggleswitch-fill-selected);
     }
 
     @media (hover: hover) and (pointer: fine) {
         &__input:checked + &__label:hover &__switch::before {
-            background: var(--ffe-g-secondary-color);
+            background: var(
+                --ffe-color-component-toggleswitch-fill-selected-hover
+            );
         }
     }
 
@@ -98,6 +102,14 @@
     }
 
     &__input:focus + &__label &__switch::before {
-        box-shadow: var(--ffe-v-toggle-switch-box-shadow);
+        box-shadow:
+            0 0 0 3px var(--ffe-color-surface-primary-default),
+            0 0 0 5px var(--ffe-color-border-interactive-focus);
+    }
+
+    :active + &__label &__switch::before {
+        background: var(
+            --ffe-color-component-toggleswitch-fill-default-pressed
+        );
     }
 }