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

Forsakringskassan · Feb 12, 2025 · 3472153 · 3472153
1 parent fe39687
commit 3472153
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 24 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);
diff --git a/packages/theme-default/src/_css-variables.scss b/packages/theme-default/src/_css-variables.scss
@@ -57,7 +57,6 @@
     --f-icon-color-primary: #{$palette-color-bluebell-100}; // select-field, file-item, file-selector, calendar
     --f-icon-color-discrete: #{$palette-color-fk-black-70}; // wizard-step
     --f-icon-color-success: #{$palette-color-green-a-85}; // message-box, text-field, form-step
-    --f-icon-color-warning: #{$palette-color-yellow-100}; // message-box, modal
     --f-icon-color-error: #{$palette-color-red-100}; // message-box, text-field, textarea, modal, file-item
     --f-icon-color-input: #{$palette-color-fk-black-50}; // textfield
     --f-icon-color-notice: #{$palette-color-tegel-100}; // expandable-panel
@@ -81,8 +80,6 @@
     --f-background-input-selected: #{$palette-color-bluebell-100}; // checkbox, radiobutton
     --f-background-input-selected-disabled: #{$palette-color-fk-black-50}; // checkbox, radiobutton
     --f-background-error: #{$palette-color-red-5}; // modal, messagebox
-    --f-background-info: #{$palette-color-bluebell-5}; // modal, messagebox, tooltip
-    --f-background-warning: #{$palette-color-yellow-5}; // modal, messagebox
     --f-background-success: #{$palette-color-green-a-5}; // modal, messagebox
     --f-background-overlay: rgba(0, 0, 0, 0.75); // modal, loader
 

diff --git a/packages/theme-default/src/deprecated-variables.json b/packages/theme-default/src/deprecated-variables.json
@@ -133,5 +133,8 @@
     "--f-text-color-button-tertiary-hover",
     "--f-background-button-tertiary-hover",
     "--f-text-color-button-tertiary-inverted",
-    "--f-text-color-button-tertiary-inverted-disabled"
+    "--f-text-color-button-tertiary-inverted-disabled",
+    "--f-icon-color-warning",
+    "--f-background-info",
+    "--f-background-warning"
 ]
diff --git a/packages/theme-default/src/fkui-css-variables-deprecated.scss b/packages/theme-default/src/fkui-css-variables-deprecated.scss
@@ -243,6 +243,9 @@ $palette-color-hav-20: #dbe0ec !default;
     --f-background-button-tertiary-hover: #{$palette-color-bluebell-15};
     --f-text-color-button-tertiary-inverted: #{$palette-color-white-100};
     --f-text-color-button-tertiary-inverted-disabled: #{$palette-color-fk-black-50};
+    --f-icon-color-warning: #{$palette-color-yellow-100};
+    --f-background-info: #{$palette-color-bluebell-5};
+    --f-background-warning: #{$palette-color-yellow-5};
 }
 
 @if $global {