Merge pull request #2530 from SpareBank1/semantiske-farger-lists

Semantiske farger lists

Author: antidecaf

packages/ffe-lists-react/src/DetailListCard.tsx

@@ -3,23 +3,19 @@ import classNames from 'classnames';
 
 export interface DetailListCardProps
     extends React.ComponentPropsWithoutRef<'dl'> {
-    bgColor?: 'sand-30' | 'sand-70' | 'frost-30' | 'syrin-30' | 'syrin-70';
-    bgDarkmodeColor?: 'natt' | 'svart' | 'koksgraa';
+    bgColor?: 'primary' | 'secondary' | 'tertiary';
 }
 
 export const DetailListCard: React.FC<DetailListCardProps> = ({
     className,
     bgColor,
-    bgDarkmodeColor,
     children,
     ...rest
 }) => {
     return (
         <dl
             className={classNames('ffe-detail-list-card', className, {
                 [`ffe-detail-list-card--bg-${bgColor}`]: bgColor,
-                [`ffe-detail-list-card--dm-bg-${bgDarkmodeColor}`]:
-                    bgDarkmodeColor,
             })}
             {...rest}
         >

packages/ffe-lists/less/description-list.less

@@ -10,7 +10,7 @@
     }
 
     .ffe-description-list__term {
-        color: var(--ffe-v-lists-title-color);
+        color: var(--ffe-color-foreground-emphasis);
         font-size: var(--ffe-fontsize-h6);
         &:extend(.ffe-strong-text);
     }
@@ -20,7 +20,7 @@
     .ffe-description-list__description {
         padding-bottom: var(--vertical-seperation);
         margin-left: 0;
-        color: var(--ffe-v-lists-description-description-color);
+        color: var(--ffe-color-foreground-default);
     }
 
     .ffe-description-list__description + .ffe-description-list__description {

packages/ffe-lists/less/detail-list-card.less

@@ -1,14 +1,15 @@
 .ffe-detail-list-card {
-    --detail-list-bg-color: var(--ffe-v-detail-list-card-background-color);
+    --detail-list-bg-color: var(--ffe-color-surface-primary-default);
 
     background-color: var(--detail-list-bg-color);
+    border: 1px solid var(--ffe-color-border-primary-subtle);
     border-radius: var(--ffe-v-detail-list-card-border-radius);
     font-family: var(--ffe-g-font);
     font-variant-numeric: tabular-nums;
     container-type: inline-size;
 
     &__item:not(:last-child) {
-        border-bottom: 1px solid var(--ffe-v-detail-list-card-border-color);
+        border-bottom: 1px solid var(--ffe-color-border-primary-subtle);
     }
 
     &__item {
@@ -45,13 +46,14 @@
 
         &-label {
             font-family: var(--ffe-g-font-heading-small);
-            color: var(--ffe-g-secondary-color);
+            color: var(--ffe-color-foreground-emphasis);
         }
 
         &-value {
             margin: 0; // Removes the default dd-element margin when it breaks to a new line
             display: flex;
             align-items: center;
+            color: var(--ffe-color-foreground-default);
 
             & > a,
             & > button {
@@ -65,41 +67,15 @@
         }
     }
 
-    &--bg-sand-30 {
-        --detail-list-bg-color: var(--ffe-farge-sand-30);
+    &--bg-primary {
+        --detail-list-bg-color: var(--ffe-color-surface-primary-default);
     }
 
-    &--bg-sand-70 {
-        --detail-list-bg-color: var(--ffe-farge-sand-70);
+    &--bg-secondary {
+        --detail-list-bg-color: var(--ffe-color-surface-secondary-default);
     }
 
-    &--bg-frost-30 {
-        --detail-list-bg-color: var(--ffe-farge-frost-30);
-    }
-
-    &--bg-syrin-30 {
-        --detail-list-bg-color: var(--ffe-farge-syrin-30);
-    }
-
-    &--bg-syrin-70 {
-        --detail-list-bg-color: var(--ffe-farge-syrin-70);
-    }
-}
-
-.regard-color-scheme-preference & {
-    @media (prefers-color-scheme: dark) {
-        .ffe-detail-list-card {
-            &--dm-bg-svart {
-                --detail-list-bg-color: var(--ffe-farge-svart);
-            }
-
-            &--dm-bg-natt {
-                --detail-list-bg-color: var(--ffe-farge-natt);
-            }
-
-            &--dm-bg-koksgraa {
-                --detail-list-bg-color: var(--ffe-farge-koksgraa);
-            }
-        }
+    &--bg-tertiary {
+        --detail-list-bg-color: var(--ffe-color-surface-tertiary-default);
     }
 }

packages/ffe-lists/less/regular-lists.less

@@ -4,6 +4,7 @@
 .ffe-numbered-list,
 .ffe-bullet-list {
     font-family: var(--ffe-g-font);
+    color: var(--ffe-color-foreground-default);
     padding: 0;
     text-align: left;
     margin: 0 0 var(--ffe-spacing-sm);
@@ -59,6 +60,7 @@
 .ffe-check-list,
 .ffe-stylized-numbered-list {
     font-family: var(--ffe-g-font);
+    color: var(--ffe-color-foreground-default);
     padding: 0;
     text-align: left;
     margin: 0 0 var(--ffe-spacing-sm);
@@ -83,11 +85,11 @@
         grid-row: 1 e('/') 2;
         place-self: center;
         &--check.ffe-icons {
-            color: var(--ffe-v-lists-check-list-check-icon-color);
+            color: var(--ffe-color-fill-feedback-success);
         }
 
         &--cross.ffe-icons {
-            color: var(--ffe-v-lists-check-list-cross-icon-color);
+            color: var(--ffe-color-fill-feedback-critical);
         }
     }
 
@@ -122,7 +124,7 @@
         content: counter(list-elements);
         grid-column: 1 e('/') 2;
         grid-row: 1 e('/') 2;
-        color: var(--ffe-v-lists-title-color);
+        color: var(--ffe-color-foreground-emphasis);
         &:extend(.ffe-strong-text);
     }
 }