@fkui/design 5.44.0 → 5.45.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/design",
-  "version": "5.44.0",
+  "version": "5.45.1",
   "description": "fkui design",
   "keywords": [
     "fkui",
@@ -35,16 +35,16 @@
     "runner": "jest-light-runner"
   },
   "devDependencies": {
-    "@fkui/css-variables": "5.44.0",
-    "@fkui/icon-lib-default": "5.44.0",
+    "@fkui/css-variables": "5.45.1",
+    "@fkui/icon-lib-default": "5.45.1",
     "autoprefixer": "10.4.20",
     "cssnano": "7.0.6",
     "flush-promises": "1.0.2",
-    "glob": "11.0.0",
+    "glob": "11.0.1",
     "jest-light-runner": "0.6.0",
-    "jest-preset-stylelint": "7.1.0",
+    "jest-preset-stylelint": "7.1.1",
     "picocolors": "1.1.1",
-    "postcss": "8.4.49",
+    "postcss": "8.5.1",
     "postcss-url": "10.1.3",
     "postcss-var-func-fallback": "3.0.1",
     "svgo": "3.3.2"
@@ -66,5 +66,5 @@
     "node": ">= 20",
     "npm": ">= 7"
   },
-  "gitHead": "f04fd4b699713829d5bf82eda42dc59c99a1bec3"
+  "gitHead": "a8c1f1f7408460f91d9d56e97902be8f1485ceb8"
 }

package/src/components/_all.scss

@@ -6,57 +6,47 @@
 @use "card/card";
 
 // Using use syntax
+@use "anchor/anchor";
+@use "badge/badge";
+@use "button/button";
+@use "calendar-day/calendar-day";
+@use "calendar-deprecated/calendar-deprecated";
+@use "checkbox/all" as checkbox;
+@use "chip/chip";
+@use "close-button/close-button";
+@use "combobox/combobox";
+@use "contextmenu/contextmenu";
+@use "crud-dataset/crud-dataset";
+@use "datepicker-field/datepicker-field";
+@use "dialogue-tree/dialogue-tree";
+@use "error-list/error-list";
+@use "expandable-paragraph/expandable-paragraph";
+@use "fieldset/fieldset";
+@use "file-item/file-item";
+@use "file-selector/file-selector";
+@use "file-uploader/file-uploader";
+@use "form/all" as form;
+@use "group/group";
+@use "indent/indent";
+@use "label/label";
 @use "layout-application-template/layout-application-template";
 @use "layout-navigation/layout-navigation";
 @use "layout-secondary/layout-secondary";
-@use "tooltip/tooltip";
+@use "list/list";
+@use "loader/loader";
+@use "message-box/message-box";
 @use "modal/modal";
+@use "navbar/navbar";
+@use "navigation-menu/navigation-menu";
 @use "offline/offline";
-@use "dialogue-tree/dialogue-tree";
-
-// These imports can be removed when all components are standalone
-// These imports shall only contain variables and/or functions and not generate any css themselves.
-@import "../core/mixins/all";
-@import "../core/config-variables";
-@import "../core/utils/all";
-
-// Non Standalone Components (i.e using old import syntax)
-@import "z-index";
-@import "label/label";
-
-@import "anchor/anchor";
-@import "badge/badge";
-@import "button/button";
-@import "calendar-deprecated/calendar-deprecated";
-@import "calendar-day/calendar-day";
-@import "checkbox/all";
-@import "chip/chip";
-@import "close-button/close-button";
-@import "combobox/combobox";
-@import "contextmenu/contextmenu";
-@import "crud-dataset/crud-dataset";
-@import "datepicker-field/datepicker-field";
-@import "expandable-paragraph/expandable-paragraph";
-@import "fieldset/fieldset";
-@import "group/group";
-@import "indent/indent";
-@import "list/list";
-@import "loader/loader";
-@import "message-box/message-box";
-@import "navbar/navbar";
-@import "navigation-menu/navigation-menu";
-@import "output-field/output-field";
-@import "progressbar/progressbar";
-@import "radio-button/all";
-@import "select-field/select-field";
-@import "sort-filter-dataset/sort-filter-dataset";
-@import "table/table";
-@import "textarea-field/textarea-field";
-@import "text-field/text-field";
-@import "form/all";
-@import "error-list/error-list";
-@import "file-selector/file-selector";
-@import "file-item/file-item";
-@import "file-uploader/file-uploader";
-@import "static-panel/static-panel";
-@import "wizard/all";
+@use "output-field/output-field";
+@use "progressbar/progressbar";
+@use "radio-button/all" as radio-button;
+@use "select-field/select-field";
+@use "sort-filter-dataset/sort-filter-dataset";
+@use "static-panel/static-panel";
+@use "table/table";
+@use "text-field/text-field";
+@use "textarea-field/textarea-field";
+@use "tooltip/tooltip";
+@use "wizard/all" as wizard;

package/src/components/checkbox/_all.scss

@@ -1,2 +1,2 @@
-@import "checkbox-group";
-@import "checkbox";
+@use "checkbox-group";
+@use "checkbox";

package/src/components/chip/_variables.scss

@@ -6,9 +6,9 @@ $chip-color-text-hover: var(--fkds-color-text-primary);
 
 // BACKGROUND
 $chip-color-background-default: var(--fkds-color-background-primary);
-$chip-color-background-selected: var(--fkds-color-action-background-select-default);
+$chip-color-background-selected: var(--fkds-color-select-background-primary-default);
 $chip-color-background-disabled: var(--fkds-color-background-disabled);
-$chip-color-background-hover: var(--fkds-color-action-background-select-hover);
+$chip-color-background-hover: var(--fkds-color-select-background-primary-hover);
 
 // BORDER
 $chip-color-border-default: var(--fkds-color-border-primary);

package/src/components/combobox/_combobox.scss

@@ -40,4 +40,8 @@
     color: $combobox-f-icon-arrow-down-color-content-default;
     margin: 0;
     padding: 0;
+
+    &:disabled {
+        color: $combobox-f-icon-arrow-down-color-content-disabled;
+    }
 }

package/src/components/combobox/_variables.scss

@@ -1,8 +1,9 @@
-$combobox-color-background-hover: var(--fkds-color-action-background-select-hover);
-$combobox-color-background-selected: var(--fkds-color-action-background-select-default);
+$combobox-color-background-hover: var(--fkds-color-select-background-primary-hover);
+$combobox-color-background-selected: var(--fkds-color-select-background-primary-default);
 $combobox-color-background: var(--fkds-color-background-primary);
 $combobox-color-text-hover: var(--fkds-color-text-primary);
 $combobox-color-text-selected: var(--fkds-color-text-inverted);
 $combobox-color-text: var(--fkds-color-text-primary);
 $combobox-color-border: var(--fkds-color-border-primary);
 $combobox-f-icon-arrow-down-color-content-default: var(--fkds-icon-color-action-content-primary-default);
+$combobox-f-icon-arrow-down-color-content-disabled: var(--fkds-icon-color-action-content-primary-disabled);

package/src/components/form/_all.scss

@@ -1,2 +1,2 @@
-@import "form";
-@import "form-step";
+@use "form";
+@use "form-step";

package/src/components/modal/_modal.scss

@@ -12,19 +12,6 @@ $modal-sizes: (
 ) !default;
 $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
 
-// @at-root is used to set these classes globally due to styling scope issue where the component is used out of the styling scope
-@at-root {
-    #{$MODAL_SELECTOR} {
-        &__open {
-            // both of these properties is used to prevent scrolling in the background
-            overflow: hidden;
-            position: fixed;
-            left: 0;
-            right: 0;
-        }
-    }
-}
-
 #{$MODAL_SELECTOR} {
     &__backdrop {
         background: var(--f-background-overlay);

package/src/components/navbar/_navbar.scss

@@ -2,8 +2,8 @@
 @use "../../core/config-variables" as config;
 @use "../../core/mixins/breakpoints" as bp;
 
-@import "navbar-header";
-@import "navbar-nav";
+@use "navbar-header";
+@use "navbar-nav";
 
 $NAVBAR_SELECTOR: ".navbar" !default;
 

package/src/components/navigation-menu/_navigation-menu.scss

@@ -1,6 +1,6 @@
 @use "../../core/size";
 @use "../../core/mixins/breakpoints";
-@import "../../core/config-variables";
+@use "../../core/config-variables";
 
 $IMENU_SELECTOR: ".imenu" !default;
 

package/src/components/radio-button/_all.scss

@@ -1,2 +1,2 @@
-@import "radio-button";
-@import "radio-button-group";
+@use "radio-button";
+@use "radio-button-group";

package/src/components/radio-button/_item.scss

@@ -1,16 +1,16 @@
-@import ".././list/list";
+@use ".././list/list";
 
 $RADIO_BUTTON_SELECTOR: ".radio-button" !default;
 $CHECKBOX_SELECTOR: ".checkbox" !default;
 
 %selectable-item {
-    border: $list-border;
+    border: list.$list-border;
     margin-bottom: 0;
     width: 100%;
     cursor: pointer;
     border-bottom: none;
     &:last-child {
-        border-bottom: $list-border;
+        border-bottom: list.$list-border;
     }
 
     input:focus + label {

package/src/components/radio-button/_radio-button-group.scss

@@ -1,7 +1,7 @@
 @use "../../core/size";
 @use "../../core/mixins/breakpoints" as bp;
-@import "./radio-button";
-@import "./item";
+@use "./radio-button";
+@use "./item";
 
 $RADIO_BUTTON_GROUP_SELECTOR: ".radio-button-group" !default;
 
@@ -15,14 +15,14 @@ $RADIO_BUTTON_GROUP_SELECTOR: ".radio-button-group" !default;
         #{$RADIO_BUTTON_GROUP_SELECTOR}__content {
             flex-direction: row;
 
-            #{$RADIO_BUTTON_SELECTOR} {
+            #{radio-button.$RADIO_BUTTON_SELECTOR} {
                 margin-bottom: 0;
             }
 
             @include bp.breakpoint-down(sm) {
                 flex-direction: column;
 
-                #{$RADIO_BUTTON_SELECTOR} {
+                #{radio-button.$RADIO_BUTTON_SELECTOR} {
                     margin-bottom: size.$margin-100;
                 }
             }

package/src/components/select-field/_select-field.scss

@@ -2,6 +2,7 @@
 @use "../icon/icon";
 @use "../../core/size";
 @use "../../core/utils/functions" as *;
+@use "variables" as *;
 
 $SELECT_FIELD_SELECTOR: ".select-field" !default;
 
@@ -29,34 +30,34 @@ $SELECT_FIELD_SELECTOR: ".select-field" !default;
 
     &__select {
         appearance: none;
-        background-color: var(--f-background-input);
+        background-color: $selectfield-color-background-default;
         box-shadow: var(--f-input-shadow-inset);
         border-radius: var(--f-border-radius-medium);
-        border: var(--f-border-width-medium) solid var(--f-border-color-input);
-        color: var(--f-text-color-default);
+        border: var(--f-border-width-medium) solid $selectfield-color-border-default;
+        color: $selectfield-color-text-default;
         cursor: pointer;
         min-height: densify(var(--f-height-large));
         padding: var(--padding-input-fields);
         width: var(--f-width-full);
 
         &:hover {
-            background-color: var(--f-background-input-hover);
+            background-color: $selectfield-color-background-hover;
         }
 
         &:focus {
-            background-color: var(--f-background-input);
+            background-color: $selectfield-color-background-focus;
         }
 
         &:disabled {
-            border-color: var(--f-border-color-input-disabled);
-            color: var(--f-text-color-input-disabled);
-            background-color: var(--f-background-input-disabled);
+            border-color: $selectfield-color-border-disabled;
+            color: $selectfield-color-text-disabled;
+            background-color: $selectfield-color-background-disabled;
             opacity: 1;
         }
     }
 
     &__select:disabled + &__icon {
-        color: var(--f-text-color-button-disabled);
+        color: $selectfield-icon-color-content-disabled;
     }
 
     &__icon-wrapper {
@@ -66,7 +67,7 @@ $SELECT_FIELD_SELECTOR: ".select-field" !default;
     &__icon {
         @extend %icon--inset-top-right;
 
-        color: var(--f-icon-color-primary);
+        color: $selectfield-f-icon-arrow-down-color-content-default;
     }
 
     &__error-popup-icon {
@@ -82,7 +83,7 @@ $SELECT_FIELD_SELECTOR: ".select-field" !default;
     }
     &--error {
         #{$SELECT_FIELD_SELECTOR}__select {
-            border-color: var(--f-border-color-error);
+            border-color: $selectfield-color-border-error;
         }
     }
 }

package/src/components/select-field/_variables.scss

@@ -0,0 +1,18 @@
+// TEXT
+$selectfield-color-text-default: var(--fkds-color-text-primary);
+$selectfield-color-text-disabled: var(--fkds-color-text-disabled);
+
+// ICON
+$selectfield-icon-color-content-disabled: var(--fkds-icon-color-content-disabled);
+$selectfield-f-icon-arrow-down-color-content-default: var(--fkds-icon-color-action-content-primary-default);
+
+// BACKGROUND
+$selectfield-color-background-hover: var(--fkds-color-action-background-secondary-hover);
+$selectfield-color-background-default: var(--fkds-color-background-primary);
+$selectfield-color-background-focus: var(--fkds-color-background-primary);
+$selectfield-color-background-disabled: var(--fkds-color-background-disabled);
+
+// BORDER
+$selectfield-color-border-disabled: var(--fkds-color-border-primary);
+$selectfield-color-border-default: var(--fkds-color-border-primary);
+$selectfield-color-border-error: var(--fkds-color-feedback-border-negative);

package/src/components/table/_table.scss

@@ -265,7 +265,7 @@ $table-input-offset-horizontal: 0.25rem;
                 padding: densify(0.2rem) 0.2rem;
             }
 
-            &--indented {
+            &--placeholder + .table__column {
                 padding-left: size.$padding-150;
             }
 

package/src/components/text-field/_text-field.scss

@@ -1,6 +1,7 @@
 @use "../../core";
 @use "../../core/size";
 @use "../../core/utils/functions" as *;
+@use "variables" as *;
 
 $TEXT_FIELD_SELECTOR: ".text-field" !default;
 
@@ -36,10 +37,10 @@ $TEXT_FIELD_SELECTOR: ".text-field" !default;
     }
 
     &__input {
-        background-color: var(--f-background-input);
+        background-color: $textfield-color-background-default;
         box-shadow: var(--f-input-shadow-inset);
         border-radius: var(--f-border-radius-medium);
-        border: var(--f-border-width-medium) solid var(--f-border-color-input);
+        border: var(--f-border-width-medium) solid $textfield-color-border-default;
         min-height: densify(var(--f-height-large));
         padding: 0 0.75rem;
         width: var(--f-width-full);
@@ -79,18 +80,18 @@ $TEXT_FIELD_SELECTOR: ".text-field" !default;
     }
 
     &__input:disabled + &__icon {
-        color: var(--f-text-color-button-disabled);
+        color: $textfield-icon-close-color-content-disabled;
     }
 
     &__input:disabled {
-        border-color: var(--f-border-color-input-disabled);
-        color: var(--f-text-color-input-disabled);
-        background-color: var(--f-background-input-disabled);
+        border-color: $textfield-color-border-disabled;
+        color: $textfield-color-text-disabled;
+        background-color: $textfield-color-background-disabled;
     }
 
     &--error {
         #{$TEXT_FIELD_SELECTOR}__input {
-            border-color: var(--f-border-color-error);
+            border-color: $textfield-color-border-error;
         }
     }
 
@@ -110,7 +111,7 @@ $TEXT_FIELD_SELECTOR: ".text-field" !default;
         cursor: pointer;
 
         &__icon {
-            color: var(--f-text-color-discrete);
+            color: $textfield-icon-close-color-content-default;
             height: var(--f-icon-size-x-small);
             width: var(--f-icon-size-x-small);
         }

package/src/components/text-field/_variables.scss

@@ -0,0 +1,15 @@
+// BACKGROUND
+$textfield-color-background-default: var(--fkds-color-background-primary);
+$textfield-color-background-disabled: var(--fkds-color-background-disabled);
+
+// BORDER
+$textfield-color-border-default: var(--fkds-color-border-primary);
+$textfield-color-border-disabled: var(--fkds-color-border-primary);
+$textfield-color-border-error: var(--fkds-color-feedback-border-negative);
+
+// ICON
+$textfield-icon-close-color-content-default: var(--fkds-icon-color-action-content-weak-default);
+$textfield-icon-close-color-content-disabled: var(--fkds-icon-color-content-disabled);
+
+// TEXT
+$textfield-color-text-disabled: var(--fkds-color-text-disabled);

package/src/components/textarea-field/_textarea-field.scss

@@ -1,6 +1,7 @@
 @use "../../core/size";
 @use "../../core";
 @use "../../core/utils/functions" as *;
+@use "variables" as *;
 
 $TEXTAREA_FIELD_SELECTOR: ".textarea-field" !default;
 
@@ -18,10 +19,10 @@ $TEXTAREA_FIELD_SELECTOR: ".textarea-field" !default;
     }
 
     &__textarea {
-        background-color: var(--f-background-input);
+        background-color: $textareafield-color-background-default;
         box-shadow: var(--f-input-shadow-inset);
         border-radius: var(--f-border-radius-medium);
-        border: var(--f-border-width-medium) solid var(--f-border-color-input);
+        border: var(--f-border-width-medium) solid $textareafield-color-border-default;
         box-sizing: border-box;
         font-size: var(--f-font-size-standard);
         min-height: densify(var(--f-height-large));
@@ -34,14 +35,14 @@ $TEXTAREA_FIELD_SELECTOR: ".textarea-field" !default;
     }
 
     &__textarea:disabled {
-        border-color: var(--f-border-color-input-disabled);
-        color: var(--f-text-color-input-disabled);
-        background-color: var(--f-background-input-disabled);
+        border-color: $textareafield-color-border-disabled;
+        color: $textareafield-color-text-disabled;
+        background-color: $textareafield-color-background-disabled;
     }
 
     &--error {
         #{$TEXTAREA_FIELD_SELECTOR}__textarea {
-            border-color: var(--f-border-color-error);
+            border-color: $textareafield-color-border-error;
         }
     }
 

package/src/components/textarea-field/_variables.scss

@@ -0,0 +1,11 @@
+// BACKGROUND
+$textareafield-color-background-default: var(--fkds-color-background-primary);
+$textareafield-color-background-disabled: var(--fkds-color-background-disabled);
+
+// BORDER
+$textareafield-color-border-default: var(--fkds-color-border-primary);
+$textareafield-color-border-disabled: var(--fkds-color-border-primary);
+$textareafield-color-border-error: var(--fkds-color-feedback-border-negative);
+
+// TEXT
+$textareafield-color-text-disabled: var(--fkds-color-text-disabled);

package/src/components/wizard/_all.scss

@@ -1,2 +1,2 @@
-@import "wizard";
-@import "wizard-step";
+@use "wizard";
+@use "wizard-step";

package/src/core/_all.scss

@@ -1,5 +1,6 @@
 @use "reset";
 @use "global";
+@forward "config-variables";
 @use "typography/all" as typography;
 @use "helpers/all" as helpers;
 @use "layout/all" as layout;

package/src/core/layout/positioning/_all.scss

@@ -1 +1 @@
-@import "positioning";
+@forward "positioning";

package/src/core/mixins/_all.scss

@@ -1,9 +1,9 @@
-@import "anchor";
-@import "arrow-creator";
-@import "breakpoints";
-@import "button";
-@import "button_icon";
-@import "circle";
-@import "sr-only";
-@import "focus";
-@import "label-inline";
+@forward "anchor";
+@forward "arrow-creator";
+@forward "breakpoints";
+@forward "button";
+@forward "button_icon";
+@forward "circle";
+@forward "sr-only";
+@forward "focus";
+@forward "label-inline";

package/src/internal-components/IFlex/_iflex.scss

@@ -1,6 +1,6 @@
 @use "../../core/size";
 @use "../../core/mixins/breakpoints";
-@import "../../core/config-variables";
+@use "../../core/config-variables";
 
 $IFLEX_SELECTOR: ".iflex" !default;
 $iflex-base-gap: 0.25rem;

package/src/internal-components/IPopupMenu/_ipopupmenu.scss

@@ -1,6 +1,6 @@
 @use "../../core/size";
 @use "../../core/mixins/breakpoints";
-@import "../../core/config-variables";
+@use "../../core/config-variables";
 
 $IPOPUPMENU_SELECTOR: ".ipopupmenu" !default;
 

package/src/internal-components/ISkipLink/_iskiplink.scss

@@ -1,5 +1,5 @@
 @use "../../core/size";
-@import "../../core/config-variables";
+@use "../../core/config-variables";
 
 $ISKIPLINK_SELECTOR: ".iskiplink" !default;
 

package/src/internal-components/_all.scss

@@ -1,10 +1,10 @@
 /* stylelint-disable no-invalid-position-at-import-rule -- technical debt */
-@forward "IFlex/iflex";
-@import "IPopupMenu/ipopupmenu";
-@import "popup/popup";
-@import "animate-expand/animate-expand";
-@import "ISkipLink/iskiplink";
-@import "calendar/calendar";
-@import "calendar-month/month";
-@import "calendar-navbar/navbar";
-@import "popupError/popuperror";
+@use "IFlex/iflex";
+@use "IPopupMenu/ipopupmenu";
+@use "ISkipLink/iskiplink";
+@use "animate-expand/animate-expand";
+@use "calendar-month/month";
+@use "calendar-navbar/navbar";
+@use "calendar/calendar";
+@use "popup/popup";
+@use "popupError/popuperror";

package/src/internal-components/popup/_popup.scss

@@ -1,6 +1,6 @@
 @use "../../core/size";
 @use "../../components/z-index";
-@import "../../core/config-variables";
+@use "../../core/config-variables";
 
 $POPUP_SELECTOR: ".popup" !default;