@fkui/design 6.0.1 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/design",
-  "version": "6.0.1",
+  "version": "6.2.0",
   "description": "fkui design",
   "keywords": [
     "fkui",
@@ -16,12 +16,18 @@
   },
   "license": "MIT",
   "author": "Försäkringskassan",
+  "sideEffects": [
+    "./dist/**/*.css",
+    "./src/**/*.scss"
+  ],
   "main": "./lib/fkui.css",
   "sass": "./src/fkui.scss",
+  "types": "type-stub.d.ts",
   "files": [
     "lib",
     "src",
     "stylelint",
+    "type-stub.d.ts",
     "!**/*.spec.js"
   ],
   "scripts": {
@@ -36,8 +42,8 @@
     "runner": "jest-light-runner"
   },
   "devDependencies": {
-    "@fkui/icon-lib-default": "6.0.0",
-    "@fkui/theme-default": "6.0.0",
+    "@fkui/icon-lib-default": "6.2.0",
+    "@fkui/theme-default": "6.2.0",
     "autoprefixer": "10.4.20",
     "cssnano": "7.0.6",
     "flush-promises": "1.0.2",
@@ -45,13 +51,13 @@
     "jest-light-runner": "0.6.0",
     "jest-preset-stylelint": "7.2.0",
     "picocolors": "1.1.1",
-    "postcss": "8.5.1",
+    "postcss": "8.5.3",
     "postcss-url": "10.1.3",
     "postcss-var-func-fallback": "3.0.1",
     "svgo": "3.3.2"
   },
   "peerDependencies": {
-    "@fkui/theme-default": "^6.0.0",
+    "@fkui/theme-default": "^6.2.0",
     "sass": "^1.40.0",
     "stylelint": ">= 14"
   },
@@ -67,5 +73,5 @@
     "node": ">= 20",
     "npm": ">= 7"
   },
-  "gitHead": "57374ff76f56c2587a9290facb0894c89bbe7ea6"
+  "gitHead": "b75730a2c2bee0c0fe8243d2de511b77c88dcbee"
 }

package/src/components/_all.scss

@@ -37,7 +37,6 @@
 @use "logo/logo";
 @use "message-box/message-box";
 @use "modal/modal";
-@use "navbar/navbar";
 @use "navigation-menu/navigation-menu";
 @use "offline/offline";
 @use "output-field/output-field";

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

package/src/components/icon/_variables.scss

@@ -0,0 +1,15 @@
+// INFO
+$icon-info-color-border: var(--fkds-icon-color-feedback-border-info);
+$icon-info-color-background: var(--fkds-icon-color-feedback-background-info);
+
+// WARNING
+$icon-warning-color-border: var(--fkds-icon-color-feedback-border-warning);
+$icon-warning-color-background: var(--fkds-icon-color-feedback-background-warning);
+
+// ERROR
+$icon-error-color-border: var(--fkds-icon-color-feedback-border-negative);
+$icon-error-color-background: var(--fkds-icon-color-feedback-background-negative);
+
+// SUCCESS
+$icon-success-color-border: var(--fkds-icon-color-feedback-border-positive);
+$icon-success-color-background: var(--fkds-icon-color-feedback-background-positive);

package/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 {

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

package/src/components/modal/_modal.scss

@@ -2,6 +2,7 @@
 @use "../../core/size";
 @use "../z-index";
 @use "../../core/mixins/breakpoints";
+@use "variables" as *;
 
 $MODAL_SELECTOR: ".modal" !default;
 $modal-sizes: (
@@ -42,7 +43,7 @@ $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
     &__shelf {
         justify-content: flex-end;
         display: flex;
-        background-color: var(--f-background-modal-shelf);
+        background-color: $modal-shelf-color-background;
         border-top-left-radius: var(--f-border-radius-medium);
         border-top-right-radius: var(--f-border-radius-medium);
         margin-bottom: size.$margin-100;
@@ -58,7 +59,7 @@ $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
             font-size: var(--f-modal-title-font-size);
             margin-bottom: 0;
             margin-top: 0;
-            color: var(--f-text-color-default);
+            color: $modal-text-color-default;
         }
     }
 
@@ -103,7 +104,8 @@ $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
     }
 
     &__dialog {
-        background: var(--f-background-content);
+        background: $modal-color-background;
+        outline: 2px solid transparent; // forced-colors
         border-radius: var(--f-border-radius-medium);
         display: flex;
         flex-direction: column-reverse;
@@ -151,17 +153,21 @@ $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
         }
     }
 
-    &--information {
-        --f-background-modal-shelf: var(--f-border-color-info);
-        --f-text-color-close-button: var(--f-text-color-default-inverted);
+    &--information #{$MODAL_SELECTOR}__shelf {
+        background-color: $modal-shelf-info-color-background;
+        .close-button {
+            color: $modal-color-closebutton-text-inverted;
+        }
     }
 
-    &--warning {
-        --f-background-modal-shelf: var(--f-border-color-warning);
+    &--warning #{$MODAL_SELECTOR}__shelf {
+        background-color: $modal-shelf-warning-color-background;
     }
 
-    &--error {
-        --f-background-modal-shelf: var(--f-border-color-error);
-        --f-text-color-close-button: var(--f-text-color-default-inverted);
+    &--error #{$MODAL_SELECTOR}__shelf {
+        background-color: $modal-shelf-error-color-background;
+        .close-button {
+            color: $modal-color-closebutton-text-inverted;
+        }
     }
 }

package/src/components/modal/_variables.scss

@@ -0,0 +1,7 @@
+$modal-shelf-color-background: var(--fkds-color-background-primary);
+$modal-shelf-info-color-background: var(--fkds-color-feedback-background-info-strong);
+$modal-shelf-warning-color-background: var(--fkds-color-feedback-background-warning-strong);
+$modal-shelf-error-color-background: var(--fkds-color-feedback-background-negative-strong);
+$modal-color-background: var(--fkds-color-background-primary);
+$modal-color-closebutton-text-inverted: var(--fkds-color-action-text-inverted-default);
+$modal-text-color-default: var(--fkds-color-text-primary);

package/src/components/table/_table.scss

@@ -261,6 +261,11 @@ $table-input-offset-horizontal: 0.25rem;
                 @extend %table-monospace;
             }
 
+            // only tbody rows should have nowrap, thead should still be the same
+            &--action {
+                white-space: nowrap;
+            }
+
             &--selectable {
                 padding: densify(0.2rem) 0.2rem;
             }

package/src/internal-components/calendar-month/_month.scss

@@ -28,7 +28,8 @@ $day-width: calc((100% - $week-width) / $days);
         text-align: center;
         background-color: white;
 
-        abbr {
+        abbr,
+        span {
             font-weight: var(--f-font-weight-normal);
             text-decoration: none;
             border-bottom: none;

package/type-stub.d.ts

@@ -0,0 +1 @@
+export {};

package/src/components/navbar/_navbar-header.scss

@@ -1,77 +0,0 @@
-@use "../../core/size";
-@use "../../core/config-variables" as config;
-@use "../../core/mixins/breakpoints" as bp;
-
-$navbar-header-separator-width: 2px !default;
-
-.navbar__header {
-    color: var(--f-text-color-pageheader);
-    background-color: var(--f-background-pageheader-standard);
-    padding: size.$padding-025;
-    height: calc(4 * size.$padding-125);
-    display: flex;
-
-    &-logo,
-    &-logo--small {
-        min-width: size.$padding-125;
-        justify-content: flex-start;
-        margin: size.$margin-075 size.$margin-175;
-        background-repeat: no-repeat;
-        background-size: contain;
-        background-position: center;
-    }
-
-    &-logo {
-        background-image: url("#{config.$asset-path-images}/fk-logo-primary.svg");
-        flex-grow: 0.3;
-
-        @include bp.breakpoint-down(lg) {
-            background-image: url("#{config.$asset-path-images}/fk-logo-small.svg");
-            flex-grow: 0.03;
-            min-width: size.$padding-175;
-        }
-
-        &--small {
-            background-image: url("#{config.$asset-path-images}/fk-logo-small.svg");
-            flex-grow: 0.03;
-        }
-    }
-
-    &-logo,
-    &-start,
-    &-end {
-        display: flex;
-        align-items: center;
-    }
-
-    &-start {
-        justify-content: flex-start;
-        flex-grow: 0;
-
-        &::before {
-            content: " ";
-            background-color: var(--f-border-color-separator-pageheader-standard);
-            position: relative;
-            height: 80%;
-            width: $navbar-header-separator-width;
-        }
-    }
-
-    &-end {
-        justify-content: flex-end;
-        flex-grow: 1;
-    }
-
-    &-item {
-        padding: size.$padding-075 size.$padding-175;
-    }
-
-    &-app-name {
-        margin: 0;
-        font-size: var(--f-font-size-h4);
-    }
-
-    &--separator {
-        border-bottom: $navbar-header-separator-width solid var(--f-border-color-separator-pageheader-standard);
-    }
-}

package/src/components/navbar/_navbar-nav.scss

@@ -1,30 +0,0 @@
-@use "../../core/size";
-
-$navbar-item-border-bottom-width: 2px !default;
-
-.navbar__nav {
-    color: var(--f-text-color-navbar);
-    background-color: var(--f-background-navbar);
-    display: flex;
-    align-items: center;
-
-    &-item {
-        height: inherit;
-        padding: 0 size.$padding-200 size.$padding-025;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-
-        &:hover {
-            background-color: var(--f-background-navbar-hover);
-            border-bottom: $navbar-item-border-bottom-width solid var(--f-border-color-navbar-hover);
-            color: var(--f-text-color-navbar-active);
-        }
-
-        &--active {
-            border-bottom: $navbar-item-border-bottom-width solid var(--f-border-color-navbar-active);
-            color: var(--f-text-color-navbar-active);
-            font-weight: bold;
-        }
-    }
-}

package/src/components/navbar/_navbar.scss

@@ -1,71 +0,0 @@
-@use "../../core/size";
-@use "../../core/config-variables" as config;
-@use "../../core/mixins/breakpoints" as bp;
-
-@use "navbar-header";
-@use "navbar-nav";
-
-$NAVBAR_SELECTOR: ".navbar" !default;
-
-#{$NAVBAR_SELECTOR} {
-    &--primary {
-        .navbar__header {
-            color: var(--f-text-color-default-inverted);
-            background-color: var(--f-background-pageheader-primary);
-        }
-
-        .navbar__header-app-name {
-            color: var(--f-text-color-default-inverted);
-        }
-
-        .navbar__header-logo {
-            background-image: url("#{config.$asset-path-images}/fk-logo-default.svg");
-
-            @include bp.breakpoint-down(lg) {
-                background-image: url("#{config.$asset-path-images}/fk-logo-small.svg");
-                flex-grow: 0.03;
-                min-width: size.$padding-175;
-            }
-        }
-
-        .navbar__header-logo--small {
-            background-image: url("#{config.$asset-path-images}/fk-logo-small.svg");
-        }
-
-        .navbar__header-start::before {
-            background-color: var(--f-border-color-separator-pageheader-primary);
-        }
-
-        .navbar__header--separator {
-            border-color: var(--f-border-color-separator-pageheader-primary);
-        }
-    }
-
-    &--secondary {
-        .navbar__header {
-            background-color: var(--f-background-pageheader-secondary);
-        }
-
-        .navbar__header-logo {
-            background-image: url("#{config.$asset-path-images}/fk-logo-primary.svg");
-
-            @include bp.breakpoint-down(lg) {
-                background-image: url("#{config.$asset-path-images}/fk-logo-small.svg");
-                flex-grow: 0.03;
-                min-width: size.$padding-175;
-            }
-        }
-
-        .navbar__header-logo--small {
-            background-image: url("#{config.$asset-path-images}/fk-logo-small.svg");
-        }
-
-        .navbar__header-start::before {
-            background-color: var(--f-border-color-separator-pageheader-secondary);
-        }
-
-        .navbar__header--separator {
-            border-color: var(--f-border-color-separator-pageheader-secondary);
-        }
-    }
-}