feat: added semantic tokens to Messagebox (refs SFKUI-6986)

Forsakringskassan · Jan 21, 2025 · c6cb705 · c6cb705
1 parent a63ce45
commit c6cb705
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 20 deletions.
diff --git a/packages/design/src/components/icon/_icon.scss b/packages/design/src/components/icon/_icon.scss
@@ -1,5 +1,6 @@
 @use "../../core/size";
 @use "../../core/utils/functions" as *;
+@use "variables" as *;
 
 $ICON_SELECTOR: ".icon" !default;
 
@@ -86,8 +87,8 @@ $ICON_SELECTOR: ".icon" !default;
 
     &--tooltip {
         .f-icon-circle {
-            color: var(--f-icon-color-info);
             fill: var(--f-icon-color-info);
+            color: var(--f-icon-color-info);
         }
 
         .f-icon-i {
@@ -97,29 +98,29 @@ $ICON_SELECTOR: ".icon" !default;
 
     &--info {
         .f-icon-circle {
-            color: var(--f-icon-color-white);
-            fill: var(--f-icon-color-info);
+            color: $icon-info-color-background;
+            fill: $icon-info-color-border;
         }
     }
 
     &--warning {
         .f-icon-circle {
-            color: var(--f-icon-color-white);
-            fill: var(--f-icon-color-warning);
+            color: $icon-warning-color-background;
+            fill: $icon-warning-color-border;
         }
     }
 
     &--error {
         .f-icon-triangle {
-            color: var(--f-icon-color-white);
-            fill: var(--f-icon-color-error);
+            color: $icon-error-color-background;
+            fill: $icon-error-color-border;
         }
     }
 
     &--success {
         .f-icon-circle {
-            color: var(--f-icon-color-white);
-            fill: var(--f-icon-color-success);
+            color: $icon-success-color-background;
+            fill: $icon-success-color-border;
         }
         .f-icon-success {
             transform: scale(0.6);

diff --git a/packages/design/src/components/icon/_variables.scss b/packages/design/src/components/icon/_variables.scss
@@ -0,0 +1,15 @@
+// INFO
+$icon-info-color-border: var(--fkds-color-feedback-border-info);
+$icon-info-color-background: var(--fkds-icon-color-background-primary);
+
+// WARNING
+$icon-warning-color-border: var(--fkds-color-feedback-border-warning);
+$icon-warning-color-background: var(--fkds-icon-color-background-primary);
+
+// ERROR
+$icon-error-color-border: var(--fkds-color-feedback-border-negative);
+$icon-error-color-background: var(--fkds-icon-color-background-primary);
+
+// SUCCESS
+$icon-success-color-border: var(--fkds-color-feedback-border-positive);
+$icon-success-color-background: var(--fkds-icon-color-background-primary);
diff --git a/packages/design/src/components/message-box/_message-box.scss b/packages/design/src/components/message-box/_message-box.scss
@@ -1,6 +1,7 @@
 @use "../../core/size";
 @use "../../core/mixins/breakpoints";
 @use "../../core/utils/functions" as *;
+@use "variables" as *;
 
 $MESSAGE_BOX_SELECTOR: ".message-box" !default;
 
@@ -28,7 +29,7 @@ $MESSAGE_BOX_SELECTOR: ".message-box" !default;
                         transform: translateY(-0.05rem);
                     }
                     &__banner {
-                        fill: var(--f-icon-color-error);
+                        fill: $messagebox-error-icon-error-color-border;
                         color: white;
                     }
                 }
@@ -52,7 +53,7 @@ $MESSAGE_BOX_SELECTOR: ".message-box" !default;
     border-collapse: separate;
     padding: densify(size.$padding-100) size.$padding-100;
 
-    @include make-box-variant($selector, var(--f-background-error), var(--f-border-color-error), $short-layout);
+    @include make-box-variant($selector, $messagebox-error-color-background, $messagebox-error-color-border, $short-layout);
 
     .iflex__item > p {
         margin-bottom: 0;
@@ -66,7 +67,7 @@ $MESSAGE_BOX_SELECTOR: ".message-box" !default;
     &__heading {
         font-size: var(--f-font-size-h3);
         font-weight: var(--f-font-weight-medium);
-        color: var(--f-text-color-default);
+        color: $messagebox-info-color-heading;
         line-height: var(--f-line-height-medium);
         align-items: flex-start;
         margin-bottom: densify(size.$margin-050);
@@ -78,35 +79,35 @@ $MESSAGE_BOX_SELECTOR: ".message-box" !default;
     }
 
     &--info {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-info), var(--f-border-color-info));
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-info-color-background, $messagebox-info-color-border);
     }
 
     &--info-short {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-info), var(--f-border-color-info), $short-layout: true);
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-info-color-background, $messagebox-info-color-border, $short-layout: true);
     }
 
     &--error {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-error), var(--f-border-color-error));
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-error-color-background, $messagebox-error-color-border);
     }
 
     &--error-short {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-error), var(--f-border-color-error), $short-layout: true);
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-error-color-background, $messagebox-error-color-border, $short-layout: true);
     }
 
     &--warning {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-warning), var(--f-border-color-warning));
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-warning-color-background, $messagebox-warning-color-border);
     }
 
     &--warning-short {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-warning), var(--f-border-color-warning), $short-layout: true);
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-warning-color-background, $messagebox-warning-color-border, $short-layout: true);
     }
 
     &--success {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-success), var(--f-border-color-success));
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-success-color-background, $messagebox-success-color-border);
     }
 
     &--success-short {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-success), var(--f-border-color-success), $short-layout: true);
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-success-color-background, $messagebox-success-color-border, $short-layout: true);
     }
 
     &--banner {

diff --git a/packages/design/src/components/message-box/_variables.scss b/packages/design/src/components/message-box/_variables.scss
@@ -0,0 +1,10 @@
+$messagebox-info-color-background: var(--fkds-color-feedback-background-info);
+$messagebox-info-color-border: var(--fkds-color-feedback-border-info);
+$messagebox-error-color-background: var(--fkds-color-feedback-background-negative);
+$messagebox-error-color-border: var(--fkds-color-feedback-border-negative);
+$messagebox-warning-color-background: var(--fkds-color-feedback-background-warning);
+$messagebox-warning-color-border: var(--fkds-color-feedback-border-warning);
+$messagebox-success-color-background: var(--fkds-color-feedback-background-positive);
+$messagebox-success-color-border: var(--fkds-color-feedback-border-positive);
+$messagebox-info-color-heading: var(--fkds-color-text-primary);
+$messagebox-error-icon-error-color-border: var(--fkds-icon-color-feedback-content-negative);