feat(ffe-form): support on colored background in some basic components

packages/ffe-form/less/checkbox.less

@@ -9,7 +9,7 @@
     grid-column-gap: var(--ffe-spacing-xs);
     align-items: center;
     cursor: pointer;
-    transition: width @ffe-transition-duration @ffe-ease;
+    transition: width var(--ffe-transition-duration) var(--ffe-ease);
     font-family: var(--ffe-g-font);
     font-variant-numeric: tabular-nums;
     text-align: left;
@@ -37,7 +37,7 @@
         content: '';
         grid-column: 1/2;
         grid-row: 1/2;
-        transition: all @ffe-transition-duration @ffe-ease;
+        transition: all var(--ffe-transition-duration) var(--ffe-ease);
     }
 
     &::before {
@@ -95,7 +95,8 @@
     }
 
     &:focus-visible + .ffe-checkbox::before {
-        box-shadow: 0 0 0 3px var(--ffe-v-input-bg-color),
+        box-shadow:
+            0 0 0 3px var(--ffe-v-input-bg-color),
             0 0 0 5px var(--ffe-v-checkbox-focus-outline-color);
     }
 
@@ -108,3 +109,11 @@
         --square-color: var(--ffe-g-error-color);
     }
 }
+
+.ffe-form-label--on-colored-bg {
+    color: var(--ffe-v-text-on-colored-bg-color);
+}
+
+.ffe-checkbox--on-colored-bg .ffe-checkbox__content {
+    color: var(--ffe-v-text-on-colored-bg-color);
+}

packages/ffe-form/less/field-message.less

@@ -1,10 +1,10 @@
 .ffe-field-message {
     font-family: var(--ffe-g-font);
     color: var(--ffe-v-input-color);
-    margin: @ffe-spacing-2xs 0 @ffe-spacing-xs;
+    margin: var(--ffe-spacing-2xs) 0 var(--ffe-spacing-xs);
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-column-gap: @ffe-spacing-2xs;
+    grid-column-gap: var(--ffe-spacing-2xs);
     font-size: var(--ffe-fontsize-body-text);
     overflow-wrap: anywhere;
 
@@ -41,3 +41,7 @@
         color: var(--ffe-v-error-message-icon-fill);
     }
 }
+
+.ffe-field-message--on-colored-bg {
+    color: var(--ffe-v-text-on-colored-bg-color);
+}

packages/ffe-form/less/form-label.less

@@ -1,6 +1,6 @@
 .ffe-form-label {
     overflow-wrap: anywhere;
-    padding-bottom: @ffe-spacing-xs;
+    padding-bottom: var(--ffe-spacing-xs);
     display: inline-block;
     position: relative;
     font-family: var(--ffe-g-font);
@@ -24,3 +24,7 @@
         max-width: calc(100% - 42px);
     }
 }
+
+.ffe-form-label--on-colored-bg {
+    color: var(--ffe-v-text-on-colored-bg-color);
+}

packages/ffe-form/less/input-group.less

@@ -53,3 +53,9 @@
         }
     }
 }
+
+.ffe-input-group--on-colored-bg {
+    .ffe-input-group__description {
+        color: var(--ffe-farge-hvit);
+    }
+}

packages/ffe-form/less/radio-button.less

@@ -12,7 +12,7 @@
     position: relative;
     color: var(--ffe-g-text-color);
     cursor: pointer;
-    transition: width @ffe-transition-duration @ffe-ease-in-out-back;
+    transition: width var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
     text-align: left;
     padding-left: 0;
     padding-top: 1px;
@@ -64,7 +64,7 @@
         left: 0;
         grid-column: 1/2;
         grid-row: 1/2;
-        transition: all @ffe-transition-duration @ffe-ease;
+        transition: all var(--ffe-transition-duration) var(--ffe-ease);
         place-self: center;
     }
 
@@ -107,7 +107,8 @@
     &:focus-visible + .ffe-radio-button::after {
         --background-color: var(--ffe-farge-hvit);
 
-        box-shadow: 0 0 0 3px var(--background-color),
+        box-shadow:
+            0 0 0 3px var(--background-color),
             0 0 0 5px var(--ffe-g-primary-color);
 
         .native & {
@@ -130,3 +131,7 @@
     grid-column: 2/3;
     grid-row: 1/-1;
 }
+
+.ffe-radio-button--on-colored-bg .ffe-radio-input__content {
+    color: var(--ffe-v-text-on-colored-bg-color);
+}

packages/ffe-form/less/theme.less

@@ -9,6 +9,7 @@
     --ffe-v-success-message-icon-fill: var(--ffe-farge-hvit);
     --ffe-v-error-message-icon-color: var(--ffe-g-error-color);
     --ffe-v-error-message-icon-fill: var(--ffe-farge-hvit);
+    --ffe-v-text-on-colored-bg-color: var(--ffe-farge-hvit);
     --ffe-v-checkbox-color: var(--ffe-g-border-color);
     --ffe-v-checkbox-selected-color: var(--ffe-g-primary-color);
     --ffe-v-checkbox-marker-color: var(--ffe-g-primary-color);

packages/ffe-form/less/tooltip.less

@@ -8,9 +8,9 @@
         cursor: help;
         height: 1.5625rem;
         aspect-ratio: 1;
-        margin: 0 0 @ffe-spacing-2xs @ffe-spacing-sm;
+        margin: 0 0 var(--ffe-spacing-2xs) var(--ffe-spacing-sm);
         padding: 0;
-        transition: border-color @ffe-transition-duration @ffe-ease;
+        transition: border-color var(--ffe-transition-duration) var(--ffe-ease);
         display: inline-grid;
         place-items: center;
         font-family: sans-serif;
@@ -29,7 +29,8 @@
         }
 
         &:focus {
-            box-shadow: 0 0 0 3px var(--ffe-v-input-bg-color),
+            box-shadow:
+                0 0 0 3px var(--ffe-v-input-bg-color),
                 0 0 0 5px var(--ffe-v-checkbox-focus-outline-color);
             outline: none;
         }
@@ -46,15 +47,19 @@
         height: 0;
         overflow: hidden;
         visibility: hidden;
-        transition: height @ffe-transition-duration @ffe-ease;
+        transition: height var(--ffe-transition-duration) var(--ffe-ease);
         overflow-wrap: anywhere;
     }
 
     &--open &__text {
-        margin-bottom: @ffe-spacing-xs;
+        margin-bottom: var(--ffe-spacing-xs);
         padding-bottom: 0;
         height: auto;
         overflow: visible;
         visibility: visible;
     }
 }
+
+.ffe-tooltip--on-colored-bg .ffe-small-text {
+    color: var(--ffe-v-text-on-colored-bg-color);
+}