@fkui/design 6.30.0 → 6.31.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/design",
-  "version": "6.30.0",
+  "version": "6.31.1",
   "description": "fkui design",
   "keywords": [
     "fkui",
@@ -39,9 +39,9 @@
     "unit:watch": "node --test --watch"
   },
   "devDependencies": {
-    "@fkui/icon-lib-default": "6.30.0",
-    "@fkui/theme-default": "6.30.0",
-    "autoprefixer": "10.4.22",
+    "@fkui/icon-lib-default": "6.31.0",
+    "@fkui/theme-default": "6.31.1",
+    "autoprefixer": "10.4.23",
     "cssnano": "7.1.2",
     "glob": "13.0.0",
     "picocolors": "1.1.1",
@@ -51,7 +51,7 @@
     "svgo": "4.0.0"
   },
   "peerDependencies": {
-    "@fkui/theme-default": "^6.30.0",
+    "@fkui/theme-default": "^6.31.1",
     "sass": "^1.40.0",
     "stylelint": ">= 14"
   },
@@ -68,5 +68,5 @@
     "npm": ">= 7"
   },
   "sass": "./src/fkui.scss",
-  "gitHead": "2fc11f663fa0023ec1d0670feac5e64467fac8c2"
+  "gitHead": "f60c60ab7b2b67fad8041a6f4f33062950a25ebb"
 }

package/src/components/anchor/_anchor.scss

@@ -1,5 +1,6 @@
 $anchor-svg-margin: 0.25rem;
 @use "../../core/mixins/anchor";
+@use "variables" as *;
 
 .anchor {
     @include anchor.anchor;
@@ -15,12 +16,12 @@ $anchor-svg-margin: 0.25rem;
     }
 
     &.anchor--discrete {
-        color: var(--f-text-color-link-discrete);
-        text-decoration-color: var(--f-border-color-link-discrete);
+        color: $anchor-color-text-discrete-default;
+        text-decoration-color: $anchor-color-text-decoration-discrete-default;
 
         &:hover {
-            color: var(--f-text-color-link-discrete-hover);
-            text-decoration-color: var(--f-text-color-link-discrete-hover);
+            color: $anchor-color-text-discrete-default;
+            text-decoration-color: $anchor-color-text-decoration-discrete-default;
         }
     }
 }

package/src/components/anchor/_variables.scss

@@ -1 +1,2 @@
-// stylelint-disable no-empty-source -- placeholder file
+$anchor-color-text-discrete-default: var(--fkds-color-action-text-secondary-default) !default;
+$anchor-color-text-decoration-discrete-default: var(--fkds-color-border-primary) !default;

package/src/components/badge/_badge.scss

@@ -33,9 +33,6 @@
 
     &--warning {
         @include make-badge-variant($badge-color-text-warning, $badge-color-background-warning);
-        @media (prefers-color-scheme: dark) {
-            color: var(--fkds-color-text-inverted);
-        }
     }
 
     &--warning-inverted {

package/src/components/fieldset/_fieldset.scss

@@ -10,8 +10,11 @@
     width: var(--f-width-full);
 
     &__label {
-        padding: 0;
-        margin-bottom: core.densify(size.$margin-075);
+        // make this selector more specific than .label
+        &.label {
+            padding: 0;
+            margin-bottom: core.densify(size.$margin-075);
+        }
     }
 
     &__content {

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

@@ -34,8 +34,8 @@
         @extend .anchor--block;
 
         flex: 0 1 auto;
-        overflow: hidden;
         white-space: nowrap;
+        cursor: pointer;
     }
 
     &__file-remove {

package/src/components/indent/_indent.scss

@@ -1,9 +1,10 @@
 @use "../../core/size";
+@use "variables" as *;
 
 $radio_button_label_offset: 0.1rem;
 
 .indent {
-    border-left: var(--f-border-width-medium) solid var(--f-border-color-separator);
+    border-left: var(--f-border-width-medium) solid $indent-color-seperator;
     margin-bottom: size.$margin-100;
     margin-left: size.$margin-050;
     padding-left: size.$padding-150;

package/src/components/indent/_variables.scss

@@ -1 +1 @@
-// stylelint-disable no-empty-source -- placeholder file
+$indent-color-seperator: var(--fkds-color-border-weak) !default;

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

@@ -8,7 +8,7 @@ $page-header-separator-width: 1px !default;
     flex-direction: row;
     width: 100%;
     color: $pageheader-color-text-inverted;
-    background-color: var(--f-background-pageheader-primary);
+    background-color: $pageheader-color-background;
     padding: size.$padding-100 0 size.$padding-100 size.$padding-100;
     align-items: center;
     overflow: hidden;
@@ -25,7 +25,7 @@ $page-header-separator-width: 1px !default;
         }
         &::after {
             content: " ";
-            background-color: var(--f-border-color-separator-pageheader-primary);
+            background-color: $pageheader-color-separator-inverted;
             height: 1.38rem;
             padding: calc($page-header-separator-width / 2);
             margin: 0 size.$padding-100 0.155rem;

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

@@ -1,2 +1,4 @@
 $pageheader-color-text-inverted: var(--fkds-color-text-inverted) !default;
 $pageheader-appname-color-text-inverted: var(--fkds-color-text-inverted) !default;
+$pageheader-color-separator-inverted: var(--fkds-color-border-inverted) !default;
+$pageheader-color-background: var(--fkds-color-header-background-primary) !default;

package/src/components/paginator/_paginator.scss

@@ -28,7 +28,7 @@ $paginator-width-full: $button-width + $gap-size + $page-width * $number-of-page
     &__previous,
     &__next {
         border: none;
-        color: black;
+        color: var(--fkds-color-text-primary);
         height: $button-height;
         background-color: transparent;
         padding: size.$padding-025;
@@ -36,12 +36,11 @@ $paginator-width-full: $button-width + $gap-size + $page-width * $number-of-page
         cursor: pointer;
 
         &--active {
-            color: white;
+            color: var(--fkds-color-action-text-inverted-default);
             background-color: var(--fkds-color-action-background-primary-default);
         }
 
         &:hover:enabled:not(&--active) {
-            color: black;
             background-color: var(--fkds-color-action-background-secondary-hover);
         }
     }

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

@@ -133,7 +133,7 @@ $horizontal-padding: size.$padding-050;
         padding: core.densify(size.$padding-025);
     }
 
-    &--select {
+    &--selectable {
         width: var(--f-icon-size-medium);
     }
 

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

@@ -17,7 +17,7 @@ $horizontal-padding: size.$padding-050;
         border-right: 1px solid var(--f-color-focus);
     }
 
-    &--select {
+    &--selectable {
         text-align: center;
         padding: core.densify(size.$padding-025);
 
@@ -33,6 +33,11 @@ $horizontal-padding: size.$padding-050;
         padding: core.densify(size.$padding-025);
     }
 
+    &--shrink {
+        width: 1px;
+        white-space: nowrap;
+    }
+
     &__sort-icon {
         color: $table-ng-color-icon-sort-selected;
         height: var(--f-icon-size-x-small);

package/src/components/wizard/_wizard-step.scss

@@ -46,6 +46,10 @@ $icon-size: 30px;
         }
     }
 
+    .button-group:last-of-type {
+        margin-top: calc(4rem * var(--f-density-factor));
+    }
+
     #{$title-selector} {
         font-size: 1.125rem;
         margin-top: 2px;
@@ -111,10 +115,6 @@ $icon-size: 30px;
         margin-top: $line-gap-to-circle;
     }
 
-    #{$line-down-selector} {
-        grid-area: wizard-step__line-down;
-    }
-
     .wizard-step__content {
         margin-left: 0.5rem;
         min-width: 0;
@@ -154,6 +154,10 @@ $icon-size: 30px;
         .wizard-step__content {
             margin-left: 0;
         }
+
+        #{$line-down-selector} {
+            grid-area: wizard-step__line-down;
+        }
     }
 
     &--open {
@@ -194,6 +198,10 @@ $icon-size: 30px;
         #{$number-selector} {
             display: none;
         }
+
+        #{$line-down-selector} {
+            display: none;
+        }
     }
 
     &--pending {
@@ -206,6 +214,10 @@ $icon-size: 30px;
             background-color: $wizardstep-color-circle-background-pending;
             color: $wizardstep-color-circle-content-pending;
         }
+
+        #{$line-down-selector} {
+            display: none;
+        }
     }
 
     @media (forced-colors: active) {

package/src/core/mixins/_anchor.scss

@@ -1,17 +1,20 @@
+@use "variables" as *;
+
 $anchor-underline-width: 2px !default;
 
 @mixin anchor() {
     $anchor-underline-offset: 0.25em;
 
-    color: var(--f-text-color-link);
+    color: $anchor-color-text-standard-default;
     text-decoration: underline;
     text-decoration-thickness: $anchor-underline-width;
     text-underline-offset: $anchor-underline-offset;
-    text-decoration-color: var(--f-text-color-link);
+    text-decoration-color: $anchor-color-text-standard-default;
     font-weight: var(--f-font-weight-medium);
 
     &:hover {
-        color: var(--f-text-color-link-hover);
-        text-decoration-color: var(--f-border-color-link-hover);
+        text-decoration-thickness: 3px;
+        color: $anchor-color-text-standard-default;
+        text-decoration-color: $anchor-color-text-standard-default;
     }
 }

package/src/core/mixins/_variables.scss

@@ -2,3 +2,6 @@ $button-color-border-default: transparent !default;
 $button-color-background-disabled: var(--fkds-color-background-disabled) !default;
 $button-color-border-disabled: var(--fkds-color-border-disabled) !default;
 $button-color-text-disabled: var(--fkds-color-text-disabled) !default;
+
+// ANCHOR
+$anchor-color-text-standard-default: var(--fkds-color-action-text-primary-default) !default;

package/src/core/utils/_functions.scss

@@ -26,12 +26,19 @@
 
 @function get-min-for($key) {
     $value: map.get(config-variables.$f-breakpoints, $key);
-    @return if($value != 0, $value, null);
+    @if $value != 0 {
+        @return $value;
+    } @else {
+        @return null;
+    }
 }
 
 @function get-max-for($key) {
     $breakpoint-keys: map.keys(config-variables.$f-breakpoints);
     $index: list.index($breakpoint-keys, $key);
-    $next: if($index < list.length($breakpoint-keys), list.nth($breakpoint-keys, $index + 1), null);
-    @return if($next, get-min-for($next) - 0.02px, null);
+    @if $index < list.length($breakpoint-keys) {
+        @return get-min-for(list.nth($breakpoint-keys, $index + 1)) - 0.02px;
+    } @else {
+        @return null;
+    }
 }

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

@@ -4,7 +4,7 @@
 @use "variables" as *;
 
 .ipopupmenu {
-    background-color: --fkds-color-background-primary;
+    background-color: $popupmenu-color-background;
 
     &__list {
         margin: 0;

package/src/internal-components/skip-link/_skip-link.scss

@@ -6,9 +6,14 @@
     top: -200px;
 
     &:focus {
-        color: black;
-        background-color: var(--f-background-skiplink-focus);
-        left: 10px;
-        top: 45px;
+        color: var(--fkds-color-action-text-primary-default);
+        background-color: var(--fkds-color-background-primary);
+        left: 20px;
+        top: 20px;
+        font-size: var(--f-font-size-standard);
+        font-weight: var(--f-font-weight-medium);
+        text-decoration: underline;
+        text-underline-offset: 0.25em;
+        padding: size.$padding-025 size.$padding-050;
     }
 }