@fkui/design 5.38.0 → 5.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/design",
-  "version": "5.38.0",
+  "version": "5.40.0",
   "description": "fkui design",
   "keywords": [
     "fkui",
@@ -35,8 +35,8 @@
     "runner": "jest-light-runner"
   },
   "devDependencies": {
-    "@fkui/css-variables": "5.38.0",
-    "@fkui/icon-lib-default": "5.38.0",
+    "@fkui/css-variables": "5.40.0",
+    "@fkui/icon-lib-default": "5.40.0",
     "autoprefixer": "10.4.20",
     "cssnano": "7.0.6",
     "flush-promises": "1.0.2",
@@ -44,7 +44,7 @@
     "jest-light-runner": "0.6.0",
     "jest-preset-stylelint": "7.1.0",
     "picocolors": "1.1.1",
-    "postcss": "8.4.47",
+    "postcss": "8.4.49",
     "postcss-url": "10.1.3",
     "postcss-var-func-fallback": "3.0.0",
     "svgo": "3.3.2"
@@ -66,5 +66,5 @@
     "node": ">= 20",
     "npm": ">= 7"
   },
-  "gitHead": "999e94ae55b1f2388a4be51d7542c2f9c2589c83"
+  "gitHead": "6cd48f3625440d79dd0bb851e9c3875f772ce451"
 }

package/src/components/_all.scss

@@ -43,6 +43,7 @@
 @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";

package/src/components/badge/_badge.scss

@@ -1,8 +1,10 @@
 @use "../../core/utils/functions" as *;
+@use "variables" as *;
 
 $BADGE_SELECTOR: ".badge" !default;
 
-@mixin make-badge-variant($BADGE_SELECTOR, $background-color, $border-color: "") {
+@mixin make-badge-variant($BADGE_SELECTOR, $text-color, $background-color, $border-color: "") {
+    color: $text-color;
     background-color: $background-color;
 
     @if $border-color != "" {
@@ -17,7 +19,6 @@ $BADGE_SELECTOR: ".badge" !default;
     border-style: solid;
     border-width: var(--f-border-width-small);
     box-sizing: border-box;
-    color: var(--f-text-color-default);
     display: inline-block;
     font-size: var(--f-font-size-standard);
     line-height: densify(var(--f-line-height-large));
@@ -25,48 +26,62 @@ $BADGE_SELECTOR: ".badge" !default;
     padding: 0 0.5rem;
 
     &--default {
-        @include make-badge-variant($BADGE_SELECTOR, var(--f-background-badge-default));
+        @include make-badge-variant($BADGE_SELECTOR, $badge-color-text-default, $badge-color-background-default);
     }
 
     &--default-inverted {
-        @include make-badge-variant($BADGE_SELECTOR, var(--f-background-badge-default-inverted), var(--f-border-color-badge-default));
+        @include make-badge-variant(
+            $BADGE_SELECTOR,
+            $badge-color-text-default-inverted,
+            $badge-color-background-default-inverted,
+            $badge-color-border-default-inverted
+        );
     }
 
     &--warning {
-        @include make-badge-variant($BADGE_SELECTOR, var(--f-background-badge-warning));
+        @include make-badge-variant($BADGE_SELECTOR, $badge-color-text-warning, $badge-color-background-warning);
     }
 
     &--warning-inverted {
-        @include make-badge-variant($BADGE_SELECTOR, var(--f-background-badge-warning-inverted), var(--f-border-color-badge-warning));
+        @include make-badge-variant(
+            $BADGE_SELECTOR,
+            $badge-color-text-warning-inverted,
+            $badge-color-background-warning-inverted,
+            $badge-color-border-warning-inverted
+        );
     }
 
     &--error {
-        color: var(--f-text-color-default-inverted);
-
-        @include make-badge-variant($BADGE_SELECTOR, var(--f-background-badge-error));
+        @include make-badge-variant($BADGE_SELECTOR, $badge-color-text-error, $badge-color-background-error);
     }
 
     &--error-inverted {
-        @include make-badge-variant($BADGE_SELECTOR, var(--f-background-badge-error-inverted), var(--f-border-color-badge-error));
+        @include make-badge-variant(
+            $BADGE_SELECTOR,
+            $badge-color-text-error-inverted,
+            $badge-color-background-error-inverted,
+            $badge-color-border-error-inverted
+        );
     }
 
     &--success {
-        color: var(--f-text-color-default-inverted);
-
-        @include make-badge-variant($BADGE_SELECTOR, var(--f-background-badge-success));
+        @include make-badge-variant($BADGE_SELECTOR, $badge-color-text-success, $badge-color-background-success);
     }
 
     &--success-inverted {
-        @include make-badge-variant($BADGE_SELECTOR, var(--f-background-badge-success-inverted), var(--f-border-color-badge-success));
+        @include make-badge-variant(
+            $BADGE_SELECTOR,
+            $badge-color-text-success-inverted,
+            $badge-color-background-success-inverted,
+            $badge-color-border-success-inverted
+        );
     }
 
     &--info {
-        color: var(--f-text-color-default-inverted);
-
-        @include make-badge-variant($BADGE_SELECTOR, var(--f-background-badge-info));
+        @include make-badge-variant($BADGE_SELECTOR, $badge-color-text-info, $badge-color-background-info);
     }
 
     &--info-inverted {
-        @include make-badge-variant($BADGE_SELECTOR, var(--f-background-badge-info-inverted), var(--f-border-color-badge-info));
+        @include make-badge-variant($BADGE_SELECTOR, $badge-color-text-info-inverted, $badge-color-background-info-inverted, $badge-color-border-info-inverted);
     }
 }

package/src/components/badge/_variables.scss

@@ -0,0 +1,25 @@
+$badge-color-text-default: var(--fkds-color-text-primary);
+$badge-color-background-default: var(--fkds-color-feedback-background-neutral-strong);
+$badge-color-text-default-inverted: var(--fkds-color-text-primary);
+$badge-color-background-default-inverted: var(--fkds-color-feedback-background-neutral);
+$badge-color-border-default-inverted: var(--fkds-color-feedback-border-neutral);
+$badge-color-text-warning: var(--fkds-color-text-primary);
+$badge-color-background-warning: var(--fkds-color-feedback-background-warning-strong);
+$badge-color-text-warning-inverted: var(--fkds-color-text-primary);
+$badge-color-background-warning-inverted: var(--fkds-color-feedback-background-warning);
+$badge-color-border-warning-inverted: var(--fkds-color-feedback-border-warning);
+$badge-color-text-error: var(--fkds-color-text-inverted);
+$badge-color-background-error: var(--fkds-color-feedback-background-negative-strong);
+$badge-color-text-error-inverted: var(--fkds-color-text-primary);
+$badge-color-background-error-inverted: var(--fkds-color-feedback-background-negative);
+$badge-color-border-error-inverted: var(--fkds-color-feedback-border-negative);
+$badge-color-text-success: var(--fkds-color-text-inverted);
+$badge-color-background-success: var(--fkds-color-feedback-background-positive-strong);
+$badge-color-text-success-inverted: var(--fkds-color-text-primary);
+$badge-color-background-success-inverted: var(--fkds-color-feedback-background-positive);
+$badge-color-border-success-inverted: var(--fkds-color-feedback-border-positive);
+$badge-color-text-info: var(--fkds-color-text-inverted);
+$badge-color-background-info: var(--fkds-color-feedback-background-info-strong);
+$badge-color-text-info-inverted: var(--fkds-color-text-primary);
+$badge-color-background-info-inverted: var(--fkds-color-feedback-background-info);
+$badge-color-border-info-inverted: var(--fkds-color-feedback-border-info);

package/src/{internal-components/IMenu/_imenu.scss → components/navigation-menu/_navigation-menu.scss}

@@ -5,9 +5,8 @@
 $IMENU_SELECTOR: ".imenu" !default;
 
 #{$IMENU_SELECTOR} {
-    background-color: var(--f-background-menu);
-
     &__list {
+        background-color: var(--f-background-menu);
         margin: 0;
         padding: 0;
 
@@ -27,6 +26,21 @@ $IMENU_SELECTOR: ".imenu" !default;
             }
         }
     }
+
+    &__popup-item {
+        position: relative;
+        list-style-type: none;
+        white-space: nowrap;
+
+        &__wrapper {
+            display: inline-flex;
+            position: absolute;
+            left: 0;
+            padding-top: size.$padding-100;
+            padding-left: size.$padding-075;
+            padding-right: size.$padding-075;
+        }
+    }
 }
 
 #{$IMENU_SELECTOR}--vertical {
@@ -69,6 +83,18 @@ $IMENU_SELECTOR: ".imenu" !default;
             &--highlight {
                 color: var(--f-text-color-menu-horizontal-highlight);
                 font-weight: var(--f-font-weight-medium);
+
+                .imenu__list__anchor-container {
+                    border-bottom: 5px solid var(--f-border-color-menu-horizontal-highlight);
+                }
+
+                .imenu__list__anchor:hover {
+                    font-weight: var(--f-font-weight-medium);
+                }
+            }
+
+            &--hidden {
+                visibility: hidden;
             }
         }
 
@@ -76,10 +102,6 @@ $IMENU_SELECTOR: ".imenu" !default;
             padding-bottom: size.$padding-050;
             border-bottom: 5px solid transparent;
 
-            &--highlight {
-                border-bottom: 5px solid var(--f-border-color-menu-horizontal-highlight);
-            }
-
             &:hover {
                 border-bottom: 5px solid var(--f-border-color-menu-horizontal-hover);
             }
@@ -88,19 +110,12 @@ $IMENU_SELECTOR: ".imenu" !default;
         &__anchor {
             display: inline-flex;
 
-            &--highlight:hover {
-                font-weight: var(--f-font-weight-medium);
-            }
-
             &-icon-right {
                 flex: 1 0 auto;
                 padding-top: size.$padding-025;
+                margin-left: size.$padding-075;
                 color: var(--f-border-color-menu-horizontal-highlight);
             }
-
-            &-span {
-                padding-right: size.$padding-075;
-            }
         }
     }
 }

package/src/components/tooltip/_tooltip.scss

@@ -1,87 +1,173 @@
+// stylelint-disable scss/comment-no-empty -- not sure how to write a longer comment that isn't a documentation block or compiled into output
+
+@use "sass:math";
+@use "sass:list";
 @use "../../core/size";
-@use "../icon/icon";
-@use "../../core/mixins/arrow-creator";
-@use "../../core/mixins/breakpoints";
 @use "../../core/utils/functions" as *;
+@use "variables" as *;
+
+$tooltip-border-radius: var(--f-border-radius-small);
+$tooltip-arrow-width: 20;
+$tooltip-arrow-height: 10;
+$tooltip-border-width: 2;
+
+// Width and height are the sides of the two right angle triangles:
+//
+// +---+---+  --+
+// |  /|\  |    |
+// | / | \ |    h
+// |/α |  \|    |
+// +---+---+  --+
+//
+// |       |
+// +---w---+
+//
+// Note that the width is the combined width of both triangles
+
+// First we calculate the angle α as `atan(w / 2h)`
+$a: math.atan(math.div($tooltip-arrow-width, 2 * $tooltip-arrow-height));
+
+// Given the angle α we can compute
+$b: math.div($tooltip-border-width, math.sin(90deg - $a));
+$c: math.div($tooltip-border-width, math.sin($a));
+
+// prettier-ignore
+$outer-border:
+    math.div($tooltip-arrow-width, 2),
+    $tooltip-arrow-height;
 
-$TOOLTIP_SELECTOR: ".tooltip" !default;
+// prettier-ignore
+$inner-border:
+    math.div(math.round((list.nth($outer-border, 1) - $b) * 10), 10),
+    math.div(math.round((list.nth($outer-border, 2) - $c) * 10), 10);
 
-#{$TOOLTIP_SELECTOR}-before {
-    display: inline-block;
+.tooltip {
+    display: none;
+    overflow: hidden;
+    width: 100%;
+    margin-bottom: densify(size.$margin-100);
 
-    &__label {
+    &.expanded,
+    &.animating {
         display: block;
     }
-}
-
-#{$TOOLTIP_SELECTOR} {
-    display: inline;
-    margin-left: size.$margin-050;
 
     &__container {
-        display: inline;
+        text-wrap: pretty;
+        margin-bottom: densify(size.$margin-025);
+
+        &:has(+ .tooltip.expanded),
+        &:has(+ .tooltip.animating) {
+            margin-bottom: 0;
+        }
+
+        .label {
+            display: inline;
+            width: max-content;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            display: inline;
+            width: max-content;
+        }
+
+        &:has(h1) .tooltip__button {
+            bottom: 0.2lh;
+        }
+
+        &:has(h2) .tooltip__button {
+            bottom: 0.1lh;
+        }
+
+        &:has(h3) .tooltip__button {
+            bottom: 0;
+        }
     }
 
     &__button {
+        display: inline-flex;
+        appearance: none;
         background: none;
         border: 0;
+        padding: 0;
         cursor: pointer;
-        font-size: var(--f-font-size-large);
-        padding: 0.125rem;
-        transform: translateY(0.125rem);
-        height: var(--f-icon-size-large);
-        width: var(--f-icon-size-large);
-
-        #{icon.$ICON_SELECTOR}-stack {
-            height: 100%;
-            width: 100%;
-        }
+        margin-left: 0.25rem;
 
-        #{icon.$ICON_SELECTOR} {
-            height: 100%;
-            width: 100%;
+        // shift it slightly downwards so it aligns better with text
+        position: relative;
+        bottom: -0.1lh;
+
+        // bug in icon?
+        .icon {
+            top: 0;
             left: 0;
         }
-    }
 
-    &__arrow {
-        @include arrow-creator.arrow-creator(
-            $background: var(--f-background-info),
-            $border: var(--f-tooltip-border-color),
-            $position: size.$margin-200,
-            $size: size.$margin-075,
-            $up: true,
-            $width: var(--f-tooltip-border-width)
-        );
-    }
-
-    /// Content wrapper is placed around everything, i.e.
-    /// arrow, close button, header and body.
-    &__content-wrapper {
-        background-color: var(--f-background-info);
-        border: var(--f-tooltip-border-width) solid var(--f-tooltip-border-color);
-        border-radius: var(--f-border-radius-small);
-        box-sizing: content-box;
-        margin-top: size.$margin-075;
-        margin-bottom: size.$margin-050;
-        position: relative;
+        &,
+        .icon,
+        .icon-stack {
+            width: 1em;
+            height: 1em;
+        }
     }
 
-    /// Content is placed around header and body.
-    &__content {
-        margin: densify(size.$margin-100) size.$margin-100 0 size.$margin-100;
+    &__body {
+        padding: 0 size.$padding-100;
     }
 
     &__header {
-        align-items: flex-start;
-        display: flex;
         font-size: var(--f-font-size-large);
         font-weight: var(--f-font-weight-bold);
         line-height: var(--f-line-height-medium);
+        padding: 0 size.$padding-100;
         margin-bottom: size.$margin-050;
     }
 
     .close-button {
         margin: var(--f-tooltip-close-button-margin);
     }
+
+    &__footer {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    &__bubble {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        margin-top: $tooltip-arrow-height * 1px;
+        margin-bottom: size.$margin-050;
+        border: 2px solid $tooltip-color-border;
+        border-radius: $tooltip-border-radius;
+        background-color: $tooltip-color-background;
+        padding-top: size.$padding-100;
+
+        &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: clamp(calc(#{$tooltip-arrow-width}px / 2), var(--f-tooltip-offset), calc(100% - #{$tooltip-arrow-width}px / 2));
+            border-style: solid;
+            border-width: 0 #{list.nth($outer-border, 1)}px #{list.nth($outer-border, 2)}px #{list.nth($outer-border, 1)}px;
+            border-color: transparent transparent $tooltip-color-border;
+            translate: -50% -100%;
+        }
+
+        &::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: clamp(calc(#{$tooltip-arrow-width}px / 2), var(--f-tooltip-offset), calc(100% - #{$tooltip-arrow-width}px / 2));
+            border-style: solid;
+            border-width: 0 #{list.nth($inner-border, 1)}px #{list.nth($inner-border, 2)}px #{list.nth($inner-border, 1)}px;
+            border-color: transparent transparent $tooltip-color-background;
+            translate: -50% -100%;
+        }
+    }
 }

package/src/components/tooltip/_variables.scss

@@ -0,0 +1,2 @@
+$tooltip-color-background: var(--fkds-color-feedback-background-info);
+$tooltip-color-border: var(--fkds-color-feedback-border-info);

package/src/internal-components/_all.scss

@@ -1,6 +1,5 @@
 /* stylelint-disable no-invalid-position-at-import-rule -- technical debt */
 @forward "IFlex/iflex";
-@import "IMenu/imenu";
 @import "IPopupMenu/ipopupmenu";
 @import "popup/popup";
 @import "animate-expand/animate-expand";