@fkui/design 6.24.1 → 6.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/design",
-  "version": "6.24.1",
+  "version": "6.25.0",
   "description": "fkui design",
   "keywords": [
     "fkui",
@@ -39,10 +39,10 @@
     "unit:watch": "node --test --watch"
   },
   "devDependencies": {
-    "@fkui/icon-lib-default": "6.24.0",
-    "@fkui/theme-default": "6.24.1",
+    "@fkui/icon-lib-default": "6.25.0",
+    "@fkui/theme-default": "6.25.0",
     "autoprefixer": "10.4.21",
-    "cssnano": "7.1.1",
+    "cssnano": "7.1.2",
     "glob": "11.0.3",
     "picocolors": "1.1.1",
     "postcss": "8.5.6",
@@ -51,7 +51,7 @@
     "svgo": "4.0.0"
   },
   "peerDependencies": {
-    "@fkui/theme-default": "^6.24.1",
+    "@fkui/theme-default": "^6.25.0",
     "sass": "^1.40.0",
     "stylelint": ">= 14"
   },
@@ -68,5 +68,5 @@
     "npm": ">= 7"
   },
   "sass": "./src/fkui.scss",
-  "gitHead": "861d68a1a4420f45d261c8aa93bc084a496f5aae"
+  "gitHead": "1762b3b4a82c8b3733636ba8fa9c488970187db1"
 }

package/src/components/button/_button.scss

@@ -125,9 +125,9 @@ $button--standard: (
 /// Discrete button
 $button--discrete: (
     color: $button-tertiary-color-text-default,
-    color--hover: var(--f-text-color-button-discrete-hover),
+    color--hover: $button-discrete-color-text-hover,
     color--disabled: $button-tertiary-color-text-disabled,
-    background-color--hover: var(--f-background-button-discrete-hover),
+    background-color--hover: none,
     background-color: transparent,
     background-color--disabled: transparent,
     border-color--disabled: transparent,
@@ -143,7 +143,7 @@ $button--discrete: (
 /// Discrete inverted button
 $button--discrete-inverted: (
     color: $button-tertiary-inverted-color-text-default,
-    color--hover: var(--f-text-color-button-discrete-inverted-hover),
+    color--hover: $button-discrete-inverted-color-text-hover,
     color--disabled: $button-tertiary-inverted-color-text-disabled,
     background-color: transparent,
     background-color--disabled: transparent,

package/src/components/button/_variables.scss

@@ -32,3 +32,9 @@ $button-tertiary-inverted-color-text-disabled: var(--fkds-color-text-disabled) !
 // Inflight animation
 $button-spinner-animation-duration: 1250ms !default;
 $button-spinner-animation-delay: 300ms !default;
+
+// Discrete
+$button-discrete-color-text-hover: var(--fkds-color-action-text-primary-hover) !default;
+
+// Discrete-inverted
+$button-discrete-inverted-color-text-hover: var(--fkds-color-action-text-inverted-hover) !default;

package/src/components/file-item/_file-item.scss

@@ -63,6 +63,6 @@
 
     &__separator {
         margin-bottom: size.$margin-125;
-        border: var(--f-border-width-medium) solid var(--f-border-color-separator);
+        border: var(--f-border-width-medium) solid $fileitem-color-separator;
     }
 }

package/src/components/file-item/_variables.scss

@@ -1 +1,2 @@
-$fileitem-color-icon-error: var(--fkds-color-feedback-text-negative);
+$fileitem-color-icon-error: var(--fkds-color-feedback-text-negative) !default;
+$fileitem-color-separator: var(--fkds-color-border-weak) !default;

package/src/components/list/_list.scss

@@ -1,9 +1,10 @@
 @use "../../core";
 @use "../../core/config-variables";
 @use "../../core/size";
+@use "variables" as *;
 
 // list item specific variables
-$list-border: var(--f-border-width-medium) solid var(--f-border-color-grid);
+$list-border: var(--f-border-width-medium) solid $list-row-color-border;
 $list-padding: size.$padding-075;
 $list-margin: 0 0 core.densify(var(--f-margin-component-bottom));
 $list-input-margin-top: 0.1rem;
@@ -14,15 +15,15 @@ $list-selectpane-padding: calc(var(--f-list-item-itempane-padding) - 0.2rem);
 %list-item {
     display: flex;
     border: $list-border;
-    background: var(--f-background-grid-default);
+    background: $list-row-color-background-default;
 }
 
 %list-item-hover:not(.disabled) {
-    background: var(--f-background-grid-hover);
+    background: $list-row-color-background-hover;
 }
 
 %list-item-active {
-    background: var(--f-background-grid-active);
+    background: $list-row-color-background-active;
 }
 
 .list {

package/src/components/list/_variables.scss

@@ -1 +1,4 @@
-// stylelint-disable no-empty-source -- placeholder file
+$list-row-color-border: var(--fkds-color-border-primary) !default;
+$list-row-color-background-default: var(--fkds-color-background-primary) !default;
+$list-row-color-background-hover: var(--fkds-color-select-background-primary-hover) !default;
+$list-row-color-background-active: var(--fkds-color-select-background-primary-active) !default;

package/src/components/loader/_loader.scss

@@ -1,5 +1,6 @@
 @use "../../core/size";
 @use "../z-index";
+@use "variables" as *;
 
 @keyframes bouncedelay {
     0%,
@@ -49,7 +50,7 @@
     &__circle {
         animation: bouncedelay 1.2s infinite ease-in-out; // prevent first frame from flickering when animation starts
         animation-fill-mode: both;
-        background-color: var(--f-icon-color-loader);
+        background-color: $loader-circle-color-background;
         border-radius: 100%;
         height: size.$padding-100;
         position: absolute;
@@ -79,11 +80,11 @@
         }
 
         .loader__wait-text {
-            color: var(--f-text-color-default-inverted);
+            color: $loader-inverted-color-text;
         }
 
         .loader__circle {
-            background-color: var(--f-icon-color-white);
+            background-color: $loader-circle-inverted-color-background;
         }
     }
 

package/src/components/loader/_variables.scss

@@ -1 +1,3 @@
-// stylelint-disable no-empty-source -- placeholder file
+$loader-inverted-color-text: var(--fkds-color-text-inverted) !default;
+$loader-circle-inverted-color-background: var(--fkds-color-text-inverted) !default;
+$loader-circle-color-background: var(--fkds-color-text-secondary) !default;

package/src/components/page-header/_page-header.scss

@@ -1,4 +1,5 @@
 @use "../../core/size";
+@use "variables" as *;
 
 $page-header-separator-width: 1px !default;
 
@@ -6,7 +7,7 @@ $page-header-separator-width: 1px !default;
     display: flex;
     flex-direction: row;
     width: 100%;
-    color: var(--f-text-color-default-inverted);
+    color: $pageheader-color-text-inverted;
     background-color: var(--f-background-pageheader-primary);
     padding: size.$padding-100 0 size.$padding-100 size.$padding-100;
     align-items: center;
@@ -36,7 +37,7 @@ $page-header-separator-width: 1px !default;
         margin: 0;
         font-size: var(--f-font-size-h3);
         font-weight: var(--f-font-weight-medium);
-        color: var(--f-text-color-default-inverted);
+        color: $pageheader-appname-color-text-inverted;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

package/src/components/page-header/_variables.scss

@@ -1 +1,2 @@
-// stylelint-disable no-empty-source -- placeholder file
+$pageheader-color-text-inverted: var(--fkds-color-text-inverted) !default;
+$pageheader-appname-color-text-inverted: var(--fkds-color-text-inverted) !default;

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

@@ -1,4 +1,5 @@
 @use ".././list/list";
+@use "variables" as *;
 
 %selectable-item {
     border: list.$list-border;
@@ -11,7 +12,7 @@
     }
 
     input:focus + label {
-        outline: 2px solid var(--f-border-color-grid);
+        outline: 2px solid $radio-button-border-color-border-default;
         outline-offset: -2px;
     }
     input + label::after {

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

@@ -11,3 +11,6 @@ $radio-button-color-background-disabled: var(--fkds-color-background-disabled) !
 $radio-button-color-border-default: var(--fkds-color-border-primary) !default;
 $radio-button-color-border-selected: transparent !default;
 $radio-button-color-border-disabled: var(--fkds-color-border-disabled) !default;
+
+// RADIO BUTTON WITH BORDER
+$radio-button-border-color-border-default: var(--fkds-color-border-primary) !default;

package/src/components/sort-filter-dataset/_sort-filter-dataset.scss

@@ -1,5 +1,6 @@
 @use "../../core";
 @use "../../core/size";
+@use "variables" as *;
 
 // Selectfield
 $sortfilter-field-margin-bottom: 0.85rem !default;
@@ -39,7 +40,7 @@ $sortfilter-header-padding-top: size.$padding-025 !default;
 
             /* In front of input field */
             width: 1.2rem;
-            color: var(--f-icon-color-sort-filter-dataset-search);
+            color: $sort-filter-dateset-color-icon-search;
 
             @include core.breakpoint-down(sm) {
                 top: size.$margin-150;
@@ -51,7 +52,7 @@ $sortfilter-header-padding-top: size.$padding-025 !default;
             position: absolute;
             top: calc(-1 * size.$margin-075);
             right: 0;
-            color: var(--f-icon-color-sort-filter-dataset-close);
+            color: $sort-filter-dateset-color-icon-clear;
             cursor: pointer;
             padding: 1rem;
 

package/src/components/sort-filter-dataset/_variables.scss

@@ -1 +1,2 @@
-// stylelint-disable no-empty-source -- placeholder file
+$sort-filter-dateset-color-icon-clear: var(--fkds-color-text-secondary) !default;
+$sort-filter-dateset-color-icon-search: var(--fkds-color-text-secondary) !default;

package/src/components/table-ng/_column.scss

@@ -1,5 +1,6 @@
 @use "../../core";
 @use "../../core/size";
+@use "variables" as *;
 
 $vertical-padding: core.densify(size.$padding-025);
 $horizontal-padding: size.$padding-050;
@@ -32,13 +33,13 @@ $horizontal-padding: size.$padding-050;
     }
 
     &__sort-icon {
-        color: var(--f-icon-color-table-header);
+        color: $table-ng-color-icon-sort-selected;
         height: var(--f-icon-size-x-small);
         width: var(--f-icon-size-x-small);
         min-width: var(--f-icon-size-x-small);
 
         &--discrete {
-            color: var(--f-icon-color-table-header-discrete);
+            color: $table-ng-color-icon-sort-default;
         }
     }
 }

package/src/components/table-ng/_table-ng.scss

@@ -8,12 +8,12 @@ $table-ng-focus-size: 2px !default;
 $table-ng-margin: 0 0 core.densify(var(--f-margin-component-bottom)) !default;
 
 // Header
-$table-ng-header-separator: 1px solid var(--f-border-color-grid) !default;
+$table-ng-header-separator: 1px solid var(--fkds-color-border-primary) !default;
 $table-ng-header-padding: core.densify(size.$padding-025) size.$padding-050 !default;
 $table-ng-header-font-weight: var(--f-font-weight-medium) !default;
 
 // Column description
-$table-ng-description-foreground: var(--f-text-color-discrete) !default;
+$table-ng-description-foreground: var(--fkds-color-text-secondary) !default;
 $table-ng-description-background: transparent !default;
 $table-ng-description-font-weight: var(--f-font-weight-normal) !default;
 

package/src/components/table-ng/_variables.scss

@@ -1,14 +1,18 @@
 // Caption
 $table-ng-caption-background: transparent !default;
-$table-ng-caption-foreground: var(--f-text-color-default) !default;
+$table-ng-caption-foreground: var(--fkds-color-text-primary) !default;
 
 // Header
-$table-ng-header-background: var(--f-background-grid-header) !default;
-$table-ng-header-foreground: var(--f-text-color-default) !default;
-$table-ng-header-border: 2px solid var(--f-border-color-grid-header) !default;
+$table-ng-header-background: var(--fkds-color-background-secondary) !default;
+$table-ng-header-foreground: var(--fkds-color-text-primary) !default;
+$table-ng-header-border: 2px solid var(--fkds-color-border-primary) !default;
 
 // Rows -- Flytta till table-ng-rows.scss?
-$table-ng-row-background: var(--f-background-grid-default) !default;
-$table-ng-row-background-alt: var(--f-background-grid-striped) !default;
-$table-ng-row-foreground: var(--f-text-color-default) !default;
-$table-ng-row-separator: 1px solid var(--f-border-color-grid) !default;
+$table-ng-row-background: var(--fkds-color-background-primary) !default;
+$table-ng-row-background-alt: var(--fkds-color-background-secondary) !default;
+$table-ng-row-foreground: var(--fkds-color-text-primary) !default;
+$table-ng-row-separator: 1px solid var(--fkds-color-border-primary) !default;
+
+// Column
+$table-ng-color-icon-sort-selected: var(--fkds-color-text-primary) !default;
+$table-ng-color-icon-sort-default: var(--fkds-color-text-secondary) !default;

package/src/core/_global.scss

@@ -12,7 +12,7 @@ html {
 
 body {
     // only applies when using FKUI in a non scoped application
-    color: var(--f-text-color-default);
+    color: var(--fkds-color-text-primary);
     font-size: var(--f-font-size-standard);
     font-weight: var(--f-font-weight-normal);
     line-height: var(--f-line-height-large);
@@ -34,7 +34,7 @@ code {
     font-size: var(--f-font-size-standard);
     border-radius: var(--f-border-radius-small);
     font-family: var(--f-font-family-code);
-    background-color: var(--f-background-code);
+    background-color: var(--fkds-color-background-secondary);
     display: inline-block;
     margin: 0 #{size.$margin-025};
     padding: 0 #{size.$padding-025};