diff --git a/packages/ffe-buttons/less/base-button.less b/packages/ffe-buttons/less/base-button.less
index 361f5a609e..091b33c919 100644
--- a/packages/ffe-buttons/less/base-button.less
+++ b/packages/ffe-buttons/less/base-button.less
@@ -3,7 +3,7 @@
     appearance: none;
     border: 2px solid transparent;
     border-radius: var(--ffe-v-buttons-border-radius);
-    color: @ffe-farge-hvit;
+    color: var(--ffe-farge-hvit);
     cursor: pointer;
     display: flex;
     font-family: var(--ffe-g-font);
@@ -14,7 +14,7 @@
     position: relative;
     text-align: center;
     text-decoration: none;
-    transition: all @ffe-transition-duration @ffe-ease;
+    transition: all var(--ffe-transition-duration) var(--ffe-ease);
     user-select: none;
     hyphens: auto;
     width: 100%;
@@ -28,11 +28,11 @@
         background: transparent;
         border-radius: 1.5rem;
         inset: -5px;
-        box-shadow: 0 0 0 2px @ffe-farge-vann;
-        transition: opacity @ffe-transition-duration @ffe-ease;
+        box-shadow: 0 0 0 2px var(--ffe-farge-vann);
+        transition: opacity var(--ffe-transition-duration) var(--ffe-ease);
 
         .native & {
-            box-shadow: 0 0 0 2px @ffe-farge-hvit;
+            box-shadow: 0 0 0 2px var(--ffe-farge-hvit);
         }
     }
 
@@ -156,7 +156,7 @@
 }
 
 .ffe-button--expanded {
-    padding: @ffe-spacing-xs;
+    padding: var(--ffe-spacing-xs);
     width: 45px;
 }
 
@@ -167,9 +167,10 @@
     box-shadow: none;
     color: var(--ffe-v-button-task-primary-color);
     display: inline-block;
-    padding: @ffe-spacing-2xs @ffe-spacing-sm @ffe-spacing-2xs @ffe-spacing-2xs;
+    padding: var(--ffe-spacing-2xs) var(--ffe-spacing-sm) var(--ffe-spacing-2xs)
+        var(--ffe-spacing-2xs);
     text-align: left;
-    transition: all @ffe-transition-duration @ffe-ease;
+    transition: all var(--ffe-transition-duration) var(--ffe-ease);
     width: auto;
 
     .ffe-button__icon > .ffe-icons {
@@ -208,8 +209,8 @@
 .ffe-button__label {
     align-items: center;
     display: flex;
-    transition: transform @ffe-transition-duration @ffe-ease;
-    gap: @ffe-spacing-xs;
+    transition: transform var(--ffe-transition-duration) var(--ffe-ease);
+    gap: var(--ffe-spacing-xs);
     .ffe-button--loading & {
         transform: translateY(-32px);
         opacity: 0;
@@ -218,7 +219,7 @@
 
 .ffe-button__icon {
     .ffe-button--shortcut & {
-        transition: all @ffe-transition-duration @ffe-ease;
+        transition: all var(--ffe-transition-duration) var(--ffe-ease);
         will-change: transform;
     }
 
@@ -235,15 +236,15 @@
     .ffe-button--task & {
         border: 2px solid var(--ffe-v-button-primary-color);
         border-radius: 50%;
-        background-color: @ffe-farge-hvit;
+        background-color: var(--ffe-farge-hvit);
         color: var(--ffe-v-button-task-primary-color);
         height: 45px;
         display: flex;
         align-items: center;
         justify-content: center;
-        margin: 0 @ffe-spacing-xs 0 0;
+        margin: 0 var(--ffe-spacing-xs) 0 0;
         width: 45px;
-        transition: all @ffe-transition-duration @ffe-ease;
+        transition: all var(--ffe-transition-duration) var(--ffe-ease);
         .native & {
             @media (prefers-color-scheme: dark) {
                 background-color: transparent;
@@ -257,11 +258,11 @@
 
     @media (hover: hover) and (pointer: fine) {
         .ffe-button--expand:hover & {
-            color: @ffe-farge-hvit;
+            color: var(--ffe-farge-hvit);
 
             .native & {
                 @media (prefers-color-scheme: dark) {
-                    color: @ffe-farge-svart;
+                    color: var(--ffe-farge-svart);
                 }
             }
         }
@@ -281,7 +282,7 @@
     opacity: 0;
     position: absolute;
     transform: translateY(24px);
-    transition: all @ffe-transition-duration @ffe-ease;
+    transition: all var(--ffe-transition-duration) var(--ffe-ease);
     visibility: hidden;
     display: grid;
     place-items: center;
diff --git a/packages/ffe-buttons/less/button-group.less b/packages/ffe-buttons/less/button-group.less
index ef6afda4bb..4ce12b1710 100644
--- a/packages/ffe-buttons/less/button-group.less
+++ b/packages/ffe-buttons/less/button-group.less
@@ -22,7 +22,7 @@
     .ffe-button,
     .ffe-inline-button {
         justify-content: center;
-        margin: 0 0 @ffe-spacing-xs;
+        margin: 0 0 var(--ffe-spacing-xs);
     }
 
     &--thin {
@@ -43,7 +43,7 @@
         flex-direction: row;
         width: auto;
         flex-wrap: wrap;
-        gap: @ffe-spacing-xs @ffe-spacing-sm;
+        gap: var(--ffe-spacing-xs) var(--ffe-spacing-sm);
 
         .ffe-button,
         .ffe-inline-button {
diff --git a/packages/ffe-buttons/less/inline-base-button.less b/packages/ffe-buttons/less/inline-base-button.less
index e05f4ec5cb..83dcbbdba1 100644
--- a/packages/ffe-buttons/less/inline-base-button.less
+++ b/packages/ffe-buttons/less/inline-base-button.less
@@ -1,16 +1,3 @@
-// Inline buttons
-//
-// Markup:
-// <button class="ffe-inline-button ffe-inline-button{{modifier_class}}">
-//   <span class="ffe-inline-button__label">Click bait</span>
-// </button>
-//
-// --tertiary  - Tertiary
-// --back      - Back
-// --expand    - Expand
-//
-// Styleguide ffe-buttons.inline-base-button
-
 .ffe-inline-button {
     appearance: none;
     background-color: transparent;
diff --git a/packages/ffe-cards/less/components.less b/packages/ffe-cards/less/components.less
index 2f6d555e62..1d62f45556 100644
--- a/packages/ffe-cards/less/components.less
+++ b/packages/ffe-cards/less/components.less
@@ -1,17 +1,17 @@
 .ffe-card-body {
     &__card-name {
-        margin: 0 0 @ffe-spacing-2xs 0;
+        margin: 0 0 var(--ffe-spacing-2xs) 0;
     }
 
     &__text {
-        margin: @ffe-spacing-2xs 0 0 0;
+        margin: var(--ffe-spacing-2xs) 0 0 0;
     }
 
     &__subtext {
         &:extend(.ffe-small-text);
 
         color: var(--ffe-v-cards-text-color);
-        margin: @ffe-spacing-2xs 0 0 0;
+        margin: var(--ffe-spacing-2xs) 0 0 0;
     }
 
     &__title {
diff --git a/packages/ffe-cards/less/text-card.less b/packages/ffe-cards/less/text-card.less
index 986ecc13af..5557a9513b 100644
--- a/packages/ffe-cards/less/text-card.less
+++ b/packages/ffe-cards/less/text-card.less
@@ -5,7 +5,7 @@
     .common-card-styling();
 
     display: flex;
-    padding: @ffe-spacing-sm @ffe-spacing-lg;
+    padding: var(--ffe-spacing-sm) var(--ffe-spacing-lg);
     flex-flow: column nowrap;
     text-align: center;
     overflow: hidden;
diff --git a/packages/ffe-context-message/less/context-message.less b/packages/ffe-context-message/less/context-message.less
index 7755728404..cfc3abd960 100644
--- a/packages/ffe-context-message/less/context-message.less
+++ b/packages/ffe-context-message/less/context-message.less
@@ -1,52 +1,3 @@
-// Context message
-//
-// Markup:
-// <div class="ffe-context-message ffe-context-message{{modifier_class}}">
-//     <div class="ffe-context-message-content">
-//         <div>
-//             <div class="ffe-body-text">
-//                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-//             </div>
-//         </div>
-//     </div>
-// </div>
-//
-// --compact   - Compact message
-// --info      - Info message
-// --tips       - Handy tips
-// --success   - Success message
-// --error     - Error message
-//
-// Styleguide ffe-context-message.context-message.1
-
-// Context message with icon
-//
-// Markup:
-// <div class="ffe-context-message ffe-context-message{{modifier_class}}">
-//     <div class="ffe-context-message-content">
-//         <div class="ffe-context-message-content__icon">
-//             <svg focusable="false"
-//                  class="ffe-context-message-content__icon-svg"
-//                  viewBox="0 0 200 200" height="150" width="150">
-//                 <path d="m100-0.0003388c-35.47,0-65.5,28.32-65.5,61.88,0"></path>
-//             </svg>
-//         </div>
-//         <div>
-//             <div class="ffe-body-text">
-//                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-//             </div>
-//         </div>
-//     </div>
-// </div>
-//
-// --compact   - Compact message
-// --info      - Info message
-// --tips       - Handy tips
-// --success   - Success message
-// --error     - Error message
-//
-// Styleguide ffe-context-message.context-message.
-
 .ffe-context-message-content {
     align-items: center;
     display: flex;
diff --git a/packages/ffe-core/less/body.less b/packages/ffe-core/less/body.less
index f54347ce98..f4c711853c 100644
--- a/packages/ffe-core/less/body.less
+++ b/packages/ffe-core/less/body.less
@@ -1,10 +1,10 @@
 // Sets default body color, font styles and background color for light and dark themes
 .ffe-body {
-    background-color: @ffe-farge-hvit;
+    background-color: var(--ffe-farge-hvit);
     &.native {
         @media (prefers-color-scheme: dark) {
-            color: @ffe-farge-lysgraa;
-            background-color: @ffe-farge-svart;
+            color: var(--ffe-farge-lysgraa);
+            background-color: var(--ffe-farge-svart);
         }
     }
 
diff --git a/packages/ffe-core/less/waves.less b/packages/ffe-core/less/waves.less
index 33f24a9b28..93afee2057 100644
--- a/packages/ffe-core/less/waves.less
+++ b/packages/ffe-core/less/waves.less
@@ -35,7 +35,7 @@
 
     // Tilgjengelige farger
     &--bg-hvit {
-        background-color: @ffe-farge-hvit;
+        background-color: var(--ffe-farge-hvit);
     }
 
     &--bg-frost-30 {
@@ -73,7 +73,7 @@
     &--dm-bg-svart {
         .native & {
             @media (prefers-color-scheme: dark) {
-                background-color: @ffe-farge-svart;
+                background-color: var(--ffe-farge-svart);
             }
         }
     }
diff --git a/packages/ffe-feedback/less/feedback-container.less b/packages/ffe-feedback/less/feedback-container.less
index 4e615b6bb6..54730f0757 100644
--- a/packages/ffe-feedback/less/feedback-container.less
+++ b/packages/ffe-feedback/less/feedback-container.less
@@ -1,7 +1,7 @@
 .ffe-feedback {
     width: 100%;
     flex-grow: 1;
-    padding: @ffe-spacing-md;
+    padding: var(--ffe-spacing-md);
 
     // Tilgjengelige farger
     &--bg-hvit {
diff --git a/packages/ffe-feedback/less/feedback-input.less b/packages/ffe-feedback/less/feedback-input.less
index c462e4f940..126ae7bd3b 100644
--- a/packages/ffe-feedback/less/feedback-input.less
+++ b/packages/ffe-feedback/less/feedback-input.less
@@ -21,6 +21,6 @@
     }
 
     &__button-group {
-        padding: @ffe-spacing-sm 0 0;
+        padding: var(--ffe-spacing-sm) 0 0;
     }
 }
diff --git a/packages/ffe-feedback/less/feedback-thumb.less b/packages/ffe-feedback/less/feedback-thumb.less
index 3602597302..b54cc054f2 100644
--- a/packages/ffe-feedback/less/feedback-thumb.less
+++ b/packages/ffe-feedback/less/feedback-thumb.less
@@ -4,7 +4,7 @@
         background: none;
         cursor: pointer;
         fill: var(--ffe-farge-fjell);
-        margin: 0 @ffe-spacing-xs;
+        margin: 0 var(--ffe-spacing-xs);
         outline: none; // Remove focus outline
 
         @media (prefers-color-scheme: dark) {
diff --git a/packages/ffe-form/less/checkbox.less b/packages/ffe-form/less/checkbox.less
index 89e323c213..09a86f4a99 100644
--- a/packages/ffe-form/less/checkbox.less
+++ b/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);
     }
 
diff --git a/packages/ffe-form/less/field-message.less b/packages/ffe-form/less/field-message.less
index 65caeea787..773161307c 100644
--- a/packages/ffe-form/less/field-message.less
+++ b/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;
 
diff --git a/packages/ffe-form/less/form-label.less b/packages/ffe-form/less/form-label.less
index 03624e55a6..a7366a2096 100644
--- a/packages/ffe-form/less/form-label.less
+++ b/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);
diff --git a/packages/ffe-form/less/phone-number.less b/packages/ffe-form/less/phone-number.less
index 8199339180..c03f4ba51a 100644
--- a/packages/ffe-form/less/phone-number.less
+++ b/packages/ffe-form/less/phone-number.less
@@ -18,7 +18,7 @@
 
         label {
             white-space: nowrap;
-            margin-right: @ffe-spacing-xs;
+            margin-right: var(--ffe-spacing-xs);
         }
 
         @media (max-width: (@breakpoint-sm - 1)) {
@@ -39,12 +39,12 @@
     &__plus {
         font-weight: 400;
         line-height: 1;
-        padding: 12px @ffe-spacing-xs;
+        padding: 12px var(--ffe-spacing-xs);
         background-color: var(--ffe-v-input-bg-color);
         border: 2px solid var(--ffe-g-border-color);
         border-radius: var(--ffe-g-border-radius) 0 0 var(--ffe-g-border-radius);
         border-right: 0;
-        transition: all @ffe-transition-duration @ffe-ease;
+        transition: all var(--ffe-transition-duration) var(--ffe-ease);
         color: var(--ffe-v-input-color);
         display: flex;
         align-items: center;
diff --git a/packages/ffe-form/less/radio-block.less b/packages/ffe-form/less/radio-block.less
index 5e4d741f1d..cf9c94c850 100644
--- a/packages/ffe-form/less/radio-block.less
+++ b/packages/ffe-form/less/radio-block.less
@@ -6,15 +6,15 @@
 
     font-family: var(--ffe-g-font);
     font-variant-numeric: tabular-nums;
-    margin-top: @ffe-spacing-md;
+    margin-top: var(--ffe-spacing-md);
     width: 100%;
-    transition: width @ffe-transition-duration @ffe-ease-in-out-back;
+    transition: width var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
     overflow-wrap: anywhere;
 
     &__content,
     &__header {
         cursor: pointer;
-        transition: all @ffe-transition-duration @ffe-ease;
+        transition: all var(--ffe-transition-duration) var(--ffe-ease);
     }
 
     &__content {
@@ -24,7 +24,7 @@
         position: relative;
         border: 2px solid var(--ffe-radio-block-border-color);
         border-radius: var(--ffe-g-border-radius);
-        margin-right: @ffe-spacing-xs;
+        margin-right: var(--ffe-spacing-xs);
         color: var(--ffe-v-input-color);
         background-color: var(--ffe-v-input-bg-color);
 
@@ -49,7 +49,8 @@
         grid-column: 2/3;
         grid-row: 1/2;
         display: block;
-        padding: @ffe-spacing-xs @ffe-spacing-3xl @ffe-spacing-xs;
+        padding: var(--ffe-spacing-xs) var(--ffe-spacing-3xl)
+            var(--ffe-spacing-xs);
         border-bottom: thin solid var(--ffe-radio-block-border-color);
         color: var(--ffe-radio-block-header-color);
         background-color: var(--ffe-radio-block-header-bg-color);
@@ -58,7 +59,8 @@
     &__wrapper {
         grid-column: 2/3;
         grid-row: 2/3;
-        padding: @ffe-spacing-sm @ffe-spacing-sm @ffe-spacing-lg;
+        padding: var(--ffe-spacing-sm) var(--ffe-spacing-sm)
+            var(--ffe-spacing-lg);
         cursor: auto;
 
         &--empty {
@@ -70,7 +72,7 @@
         }
 
         @media (min-width: @breakpoint-sm) {
-            padding-left: @ffe-spacing-3xl;
+            padding-left: var(--ffe-spacing-3xl);
         }
     }
 
@@ -109,7 +111,8 @@
     }
 
     &:focus-visible + .ffe-radio-block__content {
-        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);
     }
 }
diff --git a/packages/ffe-form/less/radio-button.less b/packages/ffe-form/less/radio-button.less
index c9615ca0cc..8813c3f128 100644
--- a/packages/ffe-form/less/radio-button.less
+++ b/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 & {
diff --git a/packages/ffe-form/less/radio-switch.less b/packages/ffe-form/less/radio-switch.less
index 723ca61a88..00252d27af 100644
--- a/packages/ffe-form/less/radio-switch.less
+++ b/packages/ffe-form/less/radio-switch.less
@@ -1,7 +1,7 @@
 .ffe-radio-switch {
-    padding: 6px @ffe-spacing-sm;
+    padding: 6px var(--ffe-spacing-sm);
     grid-template-columns: auto 1fr;
-    grid-column-gap: @ffe-spacing-xs;
+    grid-column-gap: var(--ffe-spacing-xs);
     position: relative;
     background-color: var(--ffe-v-input-bg-color);
     border: 2px solid var(--ffe-g-border-color);
@@ -14,10 +14,10 @@
     font-family: var(--ffe-g-font-strong);
     font-variant-numeric: tabular-nums;
     cursor: pointer;
-    transition: all @ffe-transition-duration @ffe-ease;
+    transition: all var(--ffe-transition-duration) var(--ffe-ease);
     box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.05);
-    margin-bottom: @ffe-spacing-2xs;
-    margin-top: @ffe-spacing-sm;
+    margin-bottom: var(--ffe-spacing-2xs);
+    margin-top: var(--ffe-spacing-sm);
     line-height: 1.5;
     overflow-wrap: anywhere;
 
@@ -34,10 +34,10 @@
     }
 
     &.ffe-radio-button--invalid {
-        border-color: @ffe-farge-baer;
+        border-color: var(--ffe-farge-baer);
         .native & {
             @media (prefers-color-scheme: dark) {
-                border-color: @ffe-farge-baer;
+                border-color: var(--ffe-farge-baer);
             }
         }
     }
@@ -47,7 +47,7 @@
     }
 
     & + input + .ffe-radio-switch {
-        margin-left: @ffe-spacing-xs;
+        margin-left: var(--ffe-spacing-xs);
     }
 
     &--condensed {
@@ -72,7 +72,8 @@
     }
 
     &:focus-visible + .ffe-radio-switch {
-        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);
     }
 
diff --git a/packages/ffe-form/less/radioblob-mixin.less b/packages/ffe-form/less/radioblob-mixin.less
index a648ab238d..6d07a1d189 100644
--- a/packages/ffe-form/less/radioblob-mixin.less
+++ b/packages/ffe-form/less/radioblob-mixin.less
@@ -3,7 +3,7 @@
 */
 .ffe-sb1-radioblob() {
     content: '';
-    background-color: @ffe-farge-hvit;
+    background-color: var(--ffe-farge-hvit);
     border: 2px solid var(--ffe-g-border-color);
     width: 20px;
     height: 20px;
@@ -12,8 +12,8 @@
     pointer-events: none;
     .native & {
         @media (prefers-color-scheme: dark) {
-            background-color: @ffe-farge-svart !important;
-            border-color: @ffe-farge-graa !important;
+            background-color: var(--ffe-farge-svart) !important;
+            border-color: var(--ffe-farge-graa) !important;
         }
     }
 }
@@ -23,11 +23,11 @@
 */
 .ffe-sb1-radioblob-active() {
     background-color: var(--ffe-g-primary-color);
-    border: 5px solid @ffe-farge-hvit;
+    border: 5px solid var(--ffe-farge-hvit);
     .native & {
         @media (prefers-color-scheme: dark) {
-            background-color: @ffe-farge-vann-70 !important;
-            border-color: @ffe-farge-svart !important;
+            background-color: var(--ffe-farge-vann-70) !important;
+            border-color: var(--ffe-farge-svart) !important;
         }
     }
 }
diff --git a/packages/ffe-form/less/textarea.less b/packages/ffe-form/less/textarea.less
index 4dce2ea62c..75c908704c 100644
--- a/packages/ffe-form/less/textarea.less
+++ b/packages/ffe-form/less/textarea.less
@@ -1,14 +1,14 @@
 .ffe-textarea {
     display: block;
     width: 100%;
-    padding: @ffe-spacing-sm;
+    padding: var(--ffe-spacing-sm);
     font-family: var(--ffe-g-font);
     font-variant-numeric: tabular-nums;
     border-radius: var(--ffe-g-border-radius);
     border: 2px solid var(--ffe-g-border-color);
     background-color: var(--ffe-v-input-bg-color);
     color: var(--ffe-v-input-color);
-    transition: all @ffe-transition-duration @ffe-ease;
+    transition: all var(--ffe-transition-duration) var(--ffe-ease);
     font-size: var(--ffe-fontsize-form-input);
 
     .native & {
diff --git a/packages/ffe-form/less/toggle-switch.less b/packages/ffe-form/less/toggle-switch.less
index 7456a6a118..ffcd11e8c9 100644
--- a/packages/ffe-form/less/toggle-switch.less
+++ b/packages/ffe-form/less/toggle-switch.less
@@ -14,13 +14,13 @@
         font-family: var(--ffe-g-font);
         font-variant-numeric: tabular-nums;
         min-height: 44px;
-        transition: color @ffe-transition-duration @ffe-ease;
+        transition: color var(--ffe-transition-duration) var(--ffe-ease);
         font-size: var(--ffe-fontsize-h6);
     }
 
     &__label-text {
         margin-right: auto;
-        padding-right: @ffe-spacing-sm;
+        padding-right: var(--ffe-spacing-sm);
     }
 
     &__label-on,
@@ -30,13 +30,13 @@
 
     &__label-description {
         display: block;
-        margin-top: @ffe-spacing-2xs;
+        margin-top: var(--ffe-spacing-2xs);
         .ffe-small-text();
     }
 
     &__switch {
         position: relative;
-        margin: 0 @ffe-spacing-sm;
+        margin: 0 var(--ffe-spacing-sm);
         display: flex;
         align-items: center;
 
@@ -53,8 +53,9 @@
             border-radius: 15px;
             left: auto;
             right: 0;
-            transition: background 0.4s @ffe-ease,
-                box-shadow @ffe-transition-duration @ffe-ease;
+            transition:
+                background 0.4s var(--ffe-ease),
+                box-shadow var(--ffe-transition-duration) var(--ffe-ease);
         }
 
         &::after {
@@ -66,7 +67,7 @@
             border-radius: 50%;
             position: absolute;
             left: 2px;
-            transition: transform @ffe-transition-duration @ffe-ease-in-out-back;
+            transition: transform var(--ffe-transition-duration) var(--ffe-ease)-in-out-back;
 
             .native & {
                 @media (prefers-color-scheme: dark) {
@@ -119,12 +120,14 @@
     }
 
     &__input:focus + &__label &__switch::before {
-        box-shadow: 0 0 0 3px @ffe-farge-hvit,
+        box-shadow:
+            0 0 0 3px @ffe-farge-hvit,
             0 0 0 5px var(--ffe-g-primary-color);
 
         .native & {
             @media (prefers-color-scheme: dark) {
-                box-shadow: 0 0 0 3px @ffe-farge-svart,
+                box-shadow:
+                    0 0 0 3px @ffe-farge-svart,
                     0 0 0 5px @ffe-farge-hvit;
             }
         }
diff --git a/packages/ffe-form/less/tooltip.less b/packages/ffe-form/less/tooltip.less
index bac2a32962..189601dd46 100644
--- a/packages/ffe-form/less/tooltip.less
+++ b/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,7 +47,7 @@
         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;
     }
 
diff --git a/packages/ffe-searchable-dropdown-react/less/ffe-searchable-dropdown.less b/packages/ffe-searchable-dropdown-react/less/ffe-searchable-dropdown.less
index a307097033..14adcfd433 100644
--- a/packages/ffe-searchable-dropdown-react/less/ffe-searchable-dropdown.less
+++ b/packages/ffe-searchable-dropdown-react/less/ffe-searchable-dropdown.less
@@ -128,7 +128,8 @@
         }
 
         &-icon {
-            transition: color @ffe-transition-duration @ffe-ease,
+            transition:
+                color @ffe-transition-duration @ffe-ease,
                 transform @ffe-transition-duration @ffe-ease-in-out-back;
         }
 
diff --git a/packages/ffe-spinner/less/spinner.less b/packages/ffe-spinner/less/spinner.less
index 46b92420e3..8862637afb 100644
--- a/packages/ffe-spinner/less/spinner.less
+++ b/packages/ffe-spinner/less/spinner.less
@@ -1,15 +1,3 @@
-// Spinner
-//
-// Markup:
-// <div>
-//     <span class="ffe-loading-spinner ffe-loading-spinner{{modifier_class}}"></span>
-//     Vennligst vent litt
-// </div>
-//
-// --large  - Large spinner
-//
-// Styleguide ffe-spinner
-
 .ffe-loading-spinner {
     --color: var(--ffe-g-primary-color);
 
diff --git a/packages/ffe-system-message/less/system-message.less b/packages/ffe-system-message/less/system-message.less
index e86cfafad8..3c99e3c63b 100644
--- a/packages/ffe-system-message/less/system-message.less
+++ b/packages/ffe-system-message/less/system-message.less
@@ -1,12 +1,3 @@
-// System message
-//
-// --error      - Error message
-// --info       - Generic info
-// --news       - News
-// --success    - Success message
-//
-// Styleguide ffe-system-message
-
 .ffe-system-message-wrapper {
     color: var(--ffe-farge-svart);
     transition: height var(--ffe-transition-duration)
diff --git a/packages/ffe-tabs/less/tab.less b/packages/ffe-tabs/less/tab.less
index f7b86fa1f3..a343ec7d71 100644
--- a/packages/ffe-tabs/less/tab.less
+++ b/packages/ffe-tabs/less/tab.less
@@ -1,26 +1,16 @@
-// Tab
-//
-// Markup:
-// <button class="ffe-tab ffe-tab{{modifier_class}}">Dette er en tab</button>
-//
-// --selected   - Selected state
-// --condensed  - Condensed tab button
-//
-// Styleguide ffe-tabs.tab
-
 .ffe-tab {
     display: flex;
     background-color: var(--ffe-v-tabs-secondary-color);
     color: var(--ffe-v-tabs-primary-color);
-    padding: @ffe-spacing-xs @ffe-spacing-md;
+    padding: var(--ffe-spacing-xs) var(--ffe-spacing-ms);
     border-radius: 40px;
     border: 2px solid transparent;
-    margin: @ffe-spacing-2xs;
+    margin: var(--ffe-spacing-2xs);
     font-family: var(--ffe-g-font);
     align-self: stretch;
     justify-content: center;
     align-items: center;
-    transition: all @ffe-transition-duration @ffe-ease;
+    transition: all var(--ffe-transition-duration) var(--ffe-ease);
     cursor: pointer;
     width: auto;
     position: relative;
@@ -38,7 +28,7 @@
         border-radius: 1.5rem;
         inset: -5px;
         box-shadow: 0 0 0 2px var(--ffe-v-tabs-tab-focus-color);
-        transition: opacity @ffe-transition-duration @ffe-ease;
+        transition: opacity var(--ffe-transition-duration) var(--ffe-ease);
     }
 
     &:focus::after {
@@ -78,14 +68,14 @@
     @media (min-width: @breakpoint-sm) {
         display: inline-block;
         width: auto;
-        margin-right: @ffe-spacing-xs;
+        margin-right: var(--ffe-spacing-xs);
 
         &:not(:first-child) {
             margin-left: -2px;
         }
 
         &:last-child {
-            margin-right: @ffe-spacing-2xs;
+            margin-right: var(--ffe-spacing-2xs);
         }
     }
 }