@fkui/design 6.37.0 → 6.39.0

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

@@ -1,18 +1,25 @@
 @use "../../core";
 @use "../../core/size";
+@use "variables" as *;
 
 $vertical-padding: core.densify(size.$padding-025);
 $horizontal-padding: size.$padding-050;
+$underline-thickness: 3px;
 
 .table-ng__cell {
     padding: $vertical-padding $horizontal-padding;
     text-wrap: nowrap;
-    border: 2px solid transparent;
+    border: 1px solid transparent;
 
     &:focus,
     &:focus-within {
         box-shadow: none;
-        border: 2px solid var(--f-color-focus);
+        outline: 3px solid $table-ng-cell-color-outline;
+        outline-offset: -3px;
+    }
+
+    &:not(&--menu-open):hover:has(button) {
+        background: $table-ng-cell-color-hover-background;
     }
 
     input,
@@ -42,67 +49,94 @@ $horizontal-padding: size.$padding-050;
         }
     }
 
-    &--select {
-        .table-ng__editable__icon--active {
-            rotate: 180deg;
-        }
-    }
-
     &--select,
     &--text {
-        padding: 0 0.25rem;
+        padding: 0;
 
-        &:focus-visible {
-            .table-ng__editable__icon {
-                visibility: visible;
-            }
+        &:hover {
+            background: $table-ng-cell-color-hover-background;
         }
 
-        &:hover {
+        &:focus,
+        &:focus-within {
             .table-ng__editable {
-                @extend %text-hover-state;
+                box-shadow: inset 0 (-$underline-thickness) 0 0 $table-ng-cell-color-underline;
+                border-radius: 0;
             }
         }
     }
 
+    .table-ng__editable {
+        &:focus-within {
+            box-shadow: inset 0 (-$underline-thickness) 0 0 $table-ng-cell-color-underline;
+            border-radius: 0;
+        }
+
+        &:hover {
+            box-shadow: inset 0 (-$underline-thickness) 0 0 $table-ng-cell-color-underline;
+            border-radius: 0;
+        }
+    }
+
+    &--select {
+        .table-ng__editable {
+            border: 3px solid transparent;
+            box-sizing: border-box;
+        }
+    }
+
     &--text {
         &:focus-visible {
-            outline: none !important;
             box-shadow: none !important;
         }
 
         &.table-ng__cell--error:not(:focus-within) {
             .table-ng__editable {
-                @extend %text-error-state;
+                box-shadow: inset 0 (-$underline-thickness) 0 0 $table-ng-cell-color-error;
+                border-radius: 0;
             }
         }
 
         &.table-ng__cell--error:hover:not(:focus-within) {
             .table-ng__editable {
-                @extend %text-error-state;
+                box-shadow: inset 0 (-$underline-thickness) 0 0 $table-ng-cell-color-error;
+                border-radius: 0;
             }
         }
 
         &.table-ng__cell--error:focus {
             .table-ng__editable {
-                @extend %text-error-state;
+                box-shadow: inset 0 (-$underline-thickness) 0 0 $table-ng-cell-color-error;
+                border-radius: 0;
             }
         }
 
         .table-ng__editable {
-            border-width: 2px;
-            border-style: solid;
-            border-color: transparent;
+            border: 3px solid transparent;
+            box-sizing: border-box;
+            position: relative;
 
             &:focus-within {
+                box-shadow: inset 0 (-$underline-thickness) 0 0 $table-ng-cell-color-underline;
+                border-radius: 0;
+
                 .table-ng__editable__text {
-                    display: none;
+                    visibility: hidden;
                 }
 
                 .table-ng__textedit {
-                    flex: 1 0 auto;
+                    position: absolute;
+                    inset: 0;
+                    width: 100%;
+                    min-width: 0;
+                    padding: $vertical-padding $horizontal-padding;
                 }
             }
+
+            &:hover {
+                box-shadow: inset 0 (-$underline-thickness) 0 0 $table-ng-cell-color-underline;
+                border-radius: 0;
+            }
         }
     }
 
@@ -115,6 +149,12 @@ $horizontal-padding: size.$padding-050;
             height: var(--f-icon-size-medium);
             width: var(--f-icon-size-medium);
             vertical-align: middle;
+            accent-color: $table-ng-button-primary-color-background-default;
+        }
+
+        &:hover {
+            background: $table-ng-cell-color-hover-background;
+            accent-color: $table-ng-button-primary-color-background-hover;
         }
     }
 
@@ -127,7 +167,11 @@ $horizontal-padding: size.$padding-050;
             min-width: var(--f-icon-size-medium);
             width: 100%;
             background: inherit;
+            color: $table-ng-button-primary-color-background-default;
             cursor: pointer;
+            &:hover {
+                color: $table-ng-button-primary-color-background-hover;
+            }
 
             svg {
                 vertical-align: middle;
@@ -142,6 +186,10 @@ $horizontal-padding: size.$padding-050;
 
     &--selectable {
         width: var(--f-icon-size-medium);
+
+        &:hover {
+            background: $table-ng-cell-color-hover-background;
+        }
     }
 
     &--rowheader {
@@ -151,11 +199,25 @@ $horizontal-padding: size.$padding-050;
 
     &--custom {
         padding: $vertical-padding $horizontal-padding;
-        border: 2px solid transparent;
+        border: 1px solid transparent;
 
         &:focus {
             box-shadow: none;
-            border: 2px solid var(--f-color-focus);
+            outline: 3px solid $table-ng-cell-color-outline;
+            outline-offset: -3px;
+        }
+    }
+
+    &--menu-open,
+    &--menu-open:hover {
+        background: $table-ng-cell-color-active-menu;
+
+        .icon-button {
+            color: $table-ng-cell-color-active-menu-text;
+        }
+
+        .table-ng__editable:hover {
+            background: transparent;
         }
     }
 }
@@ -169,7 +231,6 @@ $horizontal-padding: size.$padding-050;
 
     &:focus {
         box-shadow: none !important;
-        outline: none !important;
     }
 }
 
@@ -177,10 +238,7 @@ $horizontal-padding: size.$padding-050;
     padding: $vertical-padding $horizontal-padding;
     display: flex;
     align-items: center;
-
-    &:hover:not(:focus-within) &__icon {
-        visibility: visible;
-    }
+    margin-block: 2px;
 
     &__text {
         flex: 1 1 auto;
@@ -192,19 +250,31 @@ $horizontal-padding: size.$padding-050;
             font-feature-settings: "tnum" 1;
         }
     }
+}
 
-    &__icon {
-        visibility: hidden;
-        margin-left: 1rem;
-        flex: none;
-        color: var(--fkds-color-action-text-primary-default);
+@media (forced-colors: active) {
+    .table-ng__editable {
+        forced-color-adjust: none;
+        color: CanvasText;
     }
-}
 
-%text-hover-state {
-    background: var(--fkds-color-action-background-secondary-hover);
-}
+    .table-ng__cell--text:hover .table-ng__editable,
+    .table-ng__cell--select:hover .table-ng__editable,
+    .table-ng__cell--text:focus-within .table-ng__editable,
+    .table-ng__cell--select:focus-within .table-ng__editable {
+        box-shadow: inset 0 (-$underline-thickness) 0 0 Highlight;
+        border-radius: 0;
+    }
 
-%text-error-state {
-    border-bottom-color: var(--fkds-color-feedback-text-negative);
+    .table-ng [tabindex="0"]:focus,
+    .table-ng [tabindex="0"]:focus-visible {
+        outline: 3px solid CanvasText;
+        outline-offset: -3px;
+        background: transparent;
+    }
+
+    .table-ng__cell :is(button, a, input, select, [role="combobox"]):focus,
+    .table-ng__cell :is(button, a, input, select, [role="combobox"]):focus-visible {
+        outline: none;
+    }
 }

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

@@ -25,6 +25,7 @@ $horizontal-padding: size.$padding-050;
             height: var(--f-icon-size-medium);
             width: var(--f-icon-size-medium);
             vertical-align: middle;
+            accent-color: $table-ng-button-primary-color-background-default;
         }
     }
 

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

@@ -18,7 +18,7 @@ $table-ng-description-background: transparent !default;
 $table-ng-description-font-weight: var(--f-font-weight-normal) !default;
 
 .table-ng {
-    border-collapse: separate;
+    border-collapse: collapse;
     border-spacing: 0;
     font-size: $table-ng-font-size;
     margin: $table-ng-margin;
@@ -79,4 +79,11 @@ $table-ng-description-font-weight: var(--f-font-weight-normal) !default;
             color: $table-ng-row-foreground;
         }
     }
+
+    &--divided {
+        tbody > tr > td,
+        tbody > tr > th {
+            border-bottom: 1px solid $table-ng-cell-color-border;
+        }
+    }
 }

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

@@ -16,3 +16,14 @@ $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;
+
+// Cell
+$table-ng-cell-color-hover-background: var(--fkds-color-action-background-secondary-hover) !default;
+$table-ng-button-primary-color-background-default: var(--fkds-color-action-background-primary-default) !default;
+$table-ng-button-primary-color-background-hover: var(--fkds-color-action-background-primary-hover) !default;
+$table-ng-cell-color-error: var(--fkds-color-feedback-text-negative) !default;
+$table-ng-cell-color-outline: var(--fkds-color-text-primary) !default;
+$table-ng-cell-color-underline: var(--fkds-color-border-strong) !default;
+$table-ng-cell-color-border: var(--fkds-color-border-primary) !default;
+$table-ng-cell-color-active-menu: var(--fkds-color-action-background-primary-active) !default;
+$table-ng-cell-color-active-menu-text: var(--fkds-color-text-inverted) !default;

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

@@ -27,6 +27,10 @@
     &__error-popup-icon {
         color: $textfield-color-icon-error;
         height: 16px;
+
+        @media (forced-colors: active) {
+            color: CanvasText;
+        }
     }
 
     &__input-wrapper {

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

@@ -71,14 +71,28 @@
             color: var(--fkds-color-feedback-text-negative);
             min-height: var(--f-icon-size-medium);
             min-width: var(--f-icon-size-medium);
+
+            @media (forced-colors: active) {
+                color: CanvasText;
+            }
         }
 
         .popup-error__button {
-            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             min-height: 24px;
             min-width: 24px;
             padding: 0;
-            padding-left: 5px;
+            border: 1px solid transparent;
+            background-color: transparent;
+        }
+
+        @media (forced-colors: active) {
+            background: CanvasText;
+
+            --fkds-color-feedback-border-negative: CanvasText;
+            --fkds-color-feedback-background-negative: Canvas;
         }
     }
 

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

@@ -1,5 +1,6 @@
 @use "../../core/size";
 @use "../../core/mixins/breakpoints";
+@use "../../core/mixins/forcedcolors";
 @use "../../core/config-variables";
 @use "variables" as *;
 
@@ -20,10 +21,18 @@
             a:visited,
             a:active {
                 color: $popupmenu-color-text-active;
+
+                @media (forced-colors: active) {
+                    color: LinkText;
+                }
             }
 
             a:hover {
                 color: $popupmenu-color-text-hover;
+
+                @media (forced-colors: active) {
+                    color: LinkText;
+                }
             }
         }
     }
@@ -39,14 +48,20 @@
 
             &:hover:not(.ipopupmenu__list__item--highlight) {
                 background-color: $popupmenu-color-background-hover;
+                @include forcedcolors.hover-indicator(outline, 2px);
             }
 
             &--highlight {
                 background-color: $popupmenu-color-background-selected;
                 font-weight: var(--f-font-weight-medium);
+                @include forcedcolors.selected-indicator;
 
                 & a {
                     color: $popupmenu-color-text-selected;
+
+                    @media (forced-colors: active) {
+                        color: HighlightText;
+                    }
                 }
             }
         }