refactor: less variables -> css custom properties

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;

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 {

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;

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 {

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;

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;

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);
         }
     }
 

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);
             }
         }
     }

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 {

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;
     }
 }

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) {

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);
     }
 

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;
 

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);

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;