@fkui/design 6.3.1 → 6.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/design",
-  "version": "6.3.1",
+  "version": "6.4.0",
   "description": "fkui design",
   "keywords": [
     "fkui",
@@ -42,14 +42,14 @@
     "runner": "jest-light-runner"
   },
   "devDependencies": {
-    "@fkui/icon-lib-default": "6.3.0",
-    "@fkui/theme-default": "6.3.1",
+    "@fkui/icon-lib-default": "6.4.0",
+    "@fkui/theme-default": "6.4.0",
     "autoprefixer": "10.4.21",
     "cssnano": "7.0.6",
     "flush-promises": "1.0.2",
     "glob": "11.0.1",
     "jest-light-runner": "0.6.0",
-    "jest-preset-stylelint": "7.2.0",
+    "jest-preset-stylelint": "7.3.0",
     "picocolors": "1.1.1",
     "postcss": "8.5.3",
     "postcss-url": "10.1.3",
@@ -57,7 +57,7 @@
     "svgo": "3.3.2"
   },
   "peerDependencies": {
-    "@fkui/theme-default": "^6.3.1",
+    "@fkui/theme-default": "^6.4.0",
     "sass": "^1.40.0",
     "stylelint": ">= 14"
   },
@@ -73,5 +73,5 @@
     "node": ">= 20",
     "npm": ">= 7"
   },
-  "gitHead": "bc7431b02d30435cc2a179f6e5e1ab205ca2f7f4"
+  "gitHead": "a5c516be9b76d94394962a524abaf3e6efe0a7be"
 }

package/src/components/card/_card.scss

@@ -9,8 +9,9 @@ $CARD_SELECTOR: ".card" !default;
     margin: densify(size.$margin-100) 0;
 
     &--default {
+        background-color: $card-color-background;
         border-radius: var(--f-border-radius-medium);
-        border: var(--f-border-width-medium) solid var(--f-border-color-card);
+        border: var(--f-border-width-medium) solid $card-color-border;
     }
 
     &--error {
@@ -19,6 +20,7 @@ $CARD_SELECTOR: ".card" !default;
     }
 
     &__content {
+        color: $card-color-text;
         > p,
         > div {
             &:last-child {
@@ -34,7 +36,7 @@ $CARD_SELECTOR: ".card" !default;
 
     &__header {
         &-label {
-            color: var(--f-text-color-default);
+            color: $card-color-heading;
             font-size: var(--f-font-size-large);
             font-weight: var(--f-font-weight-bold);
             line-height: var(--f-line-height-large);

package/src/components/card/_variables.scss

@@ -1,2 +1,6 @@
+$card-color-heading: var(--fkds-color-text-primary);
+$card-color-text: var(--fkds-color-text-primary);
+$card-color-border: var(--fkds-color-border-primary);
+$card-color-background: var(--fkds-color-background-primary);
 $card-color-border-error: var(--fkds-color-feedback-border-negative);
 $card-color-text-error: var(--f-text-color-error);

package/src/components/entrypoint/_entrypoint.scss

@@ -1,32 +1,36 @@
-@use "../button/button";
-@use "../../core/mixins";
 @use "../../core/size";
+@use "variables" as *;
+@use "../../core/utils/functions" as *;
 
 $ENTRYPOINT_SELECTOR: ".entrypoint" !default;
 
 #{$ENTRYPOINT_SELECTOR} {
     /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
-    @extend .button;
-    @include mixins.make-button-variant($ENTRYPOINT_SELECTOR, button.$button--primary...);
-
-    & {
-        text-align: left;
-        padding: size.$padding-100 calc(size.$padding-200 * 2) size.$padding-100 size.$padding-100;
-        line-height: var(--f-line-height-large);
-        width: 100%;
-    }
+    background-color: $entrypoint-color-background-default;
+    color: $entrypoint-color-text-default;
+    border: var(--f-border-width-medium) solid transparent; // forced-colors mode
+    border-radius: var(--f-border-radius-medium);
+    box-shadow: var(--f-button-shadow);
+    font-size: var(--f-font-size-standard);
+    font-weight: var(--f-font-weight-medium);
+    transition: background-color var(--f-animation-duration-medium) ease-out;
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    margin-bottom: densify(size.$margin-150);
+    margin-top: densify(size.$margin-025);
+    text-align: left;
+    padding: densify(size.$padding-100) size.$padding-100;
+    line-height: var(--f-line-height-large);
+    width: 100%;
 
     &__icon {
-        /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
-        @extend .button__icon--end;
-
-        color: var(--f-icon-color-white);
-        top: 50%;
-        transform: translate(0, -50%);
+        margin-left: 2rem;
+        flex-shrink: 0;
     }
 
     &:hover {
-        // override anchor's underline hover effect
-        padding-bottom: size.$padding-100;
+        background-color: $entrypoint-color-background-hover;
     }
 }

package/src/components/entrypoint/_variables.scss

@@ -0,0 +1,3 @@
+$entrypoint-color-background-default: var(--fkds-color-action-background-primary-default);
+$entrypoint-color-background-hover: var(--fkds-color-action-background-primary-hover);
+$entrypoint-color-text-default: var(--fkds-color-action-text-inverted-default);

package/src/components/list/_list.scss

@@ -23,10 +23,6 @@ $list-selectpane-padding: calc(var(--f-list-item-itempane-padding) - 0.2rem);
     background: var(--f-background-grid-hover);
 }
 
-%list-item-selected {
-    background: var(--f-background-grid-selected);
-}
-
 %list-item-active {
     background: var(--f-background-grid-active);
 }
@@ -46,10 +42,6 @@ $list-selectpane-padding: calc(var(--f-list-item-itempane-padding) - 0.2rem);
             @extend %list-item-hover;
         }
 
-        &--selected {
-            @extend %list-item-selected;
-        }
-
         &--active {
             @extend %list-item-active;
         }
@@ -107,10 +99,6 @@ $list-selectpane-padding: calc(var(--f-list-item-itempane-padding) - 0.2rem);
                 &--active {
                     @extend %list-item-active;
                 }
-
-                &--selected {
-                    @extend %list-item-selected;
-                }
             }
         }
     }

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

@@ -28,9 +28,6 @@ $CHECKBOX_SELECTOR: ".checkbox" !default;
     &:hover {
         @extend %list-item-hover;
     }
-    &:has(input:checked) {
-        @extend %list-item-selected;
-    }
     label::before {
         top: 0.9rem;
         left: 1rem;

package/src/components/table/_table.scss

@@ -78,11 +78,6 @@ $table-input-offset-horizontal: 0.25rem;
     box-shadow: none;
 }
 
-%table-row-selected {
-    background: var(--f-background-grid-selected);
-    color: $table-row-foreground;
-}
-
 %table-row-active {
     background: var(--f-background-grid-active);
     color: $table-row-foreground;
@@ -141,6 +136,7 @@ $table-input-offset-horizontal: 0.25rem;
             font-weight: $table-header-font-weight;
             line-height: var(--f-line-height-large);
             padding: $table-header-padding;
+            text-align: left;
             vertical-align: top;
 
             &:last-child {
@@ -193,10 +189,6 @@ $table-input-offset-horizontal: 0.25rem;
 
                 // these have higher priority
                 &#{$TABLE_SELECTOR}__row {
-                    &--selected {
-                        @extend %table-row-selected;
-                    }
-
                     &--active {
                         @extend %table-row-active;
                     }
@@ -209,20 +201,12 @@ $table-input-offset-horizontal: 0.25rem;
 
                 // these have higher priority
                 &#{$TABLE_SELECTOR}__row {
-                    &--selected {
-                        @extend %table-row-selected;
-                    }
-
                     &--active {
                         @extend %table-row-active;
                     }
                 }
             }
 
-            &--selected {
-                @extend %table-row-selected;
-            }
-
             &--active {
                 @extend %table-row-active;
             }
@@ -232,7 +216,7 @@ $table-input-offset-horizontal: 0.25rem;
             @extend %table-row-normal;
 
             &--collapsed {
-                visibility: collapse;
+                display: none;
             }
         }
 
@@ -342,10 +326,6 @@ $table-input-offset-horizontal: 0.25rem;
 
             // these have higher priority
             &#{$TABLE_SELECTOR}__row {
-                &--selected {
-                    @extend %table-row-selected;
-                }
-
                 &--active {
                     @extend %table-row-active;
                 }
@@ -359,10 +339,6 @@ $table-input-offset-horizontal: 0.25rem;
 
             // these have higher priority
             &#{$TABLE_SELECTOR}__row {
-                &--selected {
-                    @extend %table-row-selected;
-                }
-
                 &--active {
                     @extend %table-row-active;
                 }

package/src/components/wizard/_variables.scss

@@ -0,0 +1,15 @@
+$wizardstep-stepofselector-color-text: var(--fkds-color-text-secondary);
+$wizardstep-line-color: var(--fkds-color-border-strong);
+$wizardstep-heading-color-default: var(--fkds-color-text-primary);
+$wizardstep-heading-color-done: var(--fkds-color-feedback-text-positive);
+$wizardstep-heading-decoration-color-done-hover: var(--fkds-color-feedback-text-positive);
+
+// CIRCLE
+$wizardstep-circle-color-border: var(--fkds-color-border-strong);
+$wizardstep-circle-color-background-open: var(--fkds-color-background-primary);
+$wizardstep-circle-color-background-pending: var(--fkds-color-background-disabled);
+$wizardstep-circle-color-border-done: var(--fkds-color-feedback-border-positive);
+$wizardstep-circle-color-background-done: var(--fkds-color-feedback-background-positive-strong);
+
+// ICON SUCCESS
+$wizardstep-success-color: var(--fkds-icon-color-content-inverted);

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

@@ -1,4 +1,5 @@
 @use "../../core";
+@use "variables" as *;
 
 $WIZARD_STEP_SELECTOR: ".wizard-step" !default;
 
@@ -82,7 +83,7 @@ $icon-size: 30px;
     }
 
     #{$step-of-selector} {
-        color: var(--f-text-color-discrete);
+        color: $wizardstep-stepofselector-color-text;
         font-weight: normal;
         font-size: 1rem;
     }
@@ -94,7 +95,7 @@ $icon-size: 30px;
         height: #{$line-down-length};
         margin-top: $line-gap-to-circle;
         width: #{$line-width};
-        background-color: var(--f-background-wizard-step-line);
+        background-color: $wizardstep-line-color;
     }
 
     #{$line-up-selector} {
@@ -103,7 +104,14 @@ $icon-size: 30px;
         width: #{$line-width};
         margin-top: #{$line-gap-to-circle};
         margin-bottom: #{$line-up-adjustment-down};
-        background-color: var(--f-background-wizard-step-line);
+        background-color: $wizardstep-line-color;
+    }
+
+    @media (forced-colors: active) {
+        #{$line-up-selector,
+        $line-down-selector} {
+            background-color: CanvasText;
+        }
     }
     @include core.breakpoint-up(md) {
         #{$line-up-selector} {
@@ -112,7 +120,7 @@ $icon-size: 30px;
     }
     @include core.breakpoint-up(md) {
         &__connector {
-            border-left: #{$line-width} solid var(--f-border-color-wizard-step-line);
+            border-left: #{$line-width} solid $wizardstep-line-color;
             padding-left: #{$line-desktop-push-content-right};
             margin-top: #{$line-desktop-adjustment-up};
             margin-left: #{$line-desktop-align-line};
@@ -123,12 +131,12 @@ $icon-size: 30px;
 
     &--open #{$header-selector} {
         #{$title-selector} {
-            color: var(--f-text-color-default);
+            color: $wizardstep-heading-color-default;
         }
 
         #{$icon-circle-selector} {
-            fill: var(--f-icon-color-discrete);
-            color: var(--f-icon-color-white);
+            fill: $wizardstep-circle-color-border;
+            color: $wizardstep-circle-color-background-open;
         }
 
         #{$icon-number-selector} {
@@ -150,18 +158,29 @@ $icon-size: 30px;
         #{$line-down-selector} {
             margin-bottom: 0;
         }
+
+        @media (forced-colors: active) {
+            #{$icon-circle-selector} {
+                fill: CanvasText; // circle border
+                color: Canvas; // circle background
+            }
+        }
     }
 
     &--done #{$header-selector} {
         margin-top: $line-gap-to-circle;
 
         #{$title-selector} {
-            color: var(--f-text-color-wizard-step-done);
-            text-decoration-color: var(--f-text-color-wizard-step-done);
+            color: $wizardstep-heading-color-done;
+            text-decoration-color: $wizardstep-heading-color-done;
+            text-decoration-thickness: 2px;
+            text-underline-offset: 0.25em;
         }
 
         #{$title-selector}:hover {
-            text-decoration-color: var(--f-text-color-link-hover);
+            text-decoration-color: $wizardstep-heading-decoration-color-done-hover;
+            text-decoration-thickness: 3px;
+            text-underline-offset: 0.25em;
         }
 
         #{$line-up-selector} {
@@ -173,8 +192,8 @@ $icon-size: 30px;
         }
 
         #{$icon-circle-selector} {
-            fill: var(--f-icon-color-wizard-step-done);
-            color: var(--f-icon-color-wizard-step-done);
+            fill: $wizardstep-circle-color-border-done;
+            color: $wizardstep-circle-color-background-done;
         }
 
         #{$icon-number-selector} {
@@ -183,7 +202,7 @@ $icon-size: 30px;
 
         #{$icon-success-selector} {
             display: block;
-            color: var(--f-icon-color-white);
+            color: $wizardstep-success-color;
             width: 20px;
             height: 20px;
             left: 5px;
@@ -193,6 +212,17 @@ $icon-size: 30px;
         #{$line-adjustment-selector} {
             height: calc(#{$line-down-length} + #{$line-gap-to-circle});
         }
+
+        @media (forced-colors: active) {
+            #{$icon-circle-selector} {
+                fill: CanvasText; // circle border
+                color: Canvas; // circle background
+            }
+
+            #{$icon-success-selector} {
+                color: CanvasText;
+            }
+        }
     }
 
     &--pending #{$header-selector} {
@@ -205,8 +235,8 @@ $icon-size: 30px;
         }
 
         #{$icon-circle-selector} {
-            color: var(--f-icon-color-wizard-step-pending);
-            fill: var(--f-text-color-discrete);
+            fill: $wizardstep-circle-color-border;
+            color: $wizardstep-circle-color-background-pending;
         }
 
         #{$title-placeholder-selector} {
@@ -216,6 +246,13 @@ $icon-size: 30px;
         #{$line-adjustment-selector} {
             height: calc(#{$line-down-length} + (#{$line-gap-to-circle} * 2));
         }
+
+        @media (forced-colors: active) {
+            #{$icon-circle-selector} {
+                fill: CanvasText; // circle border
+                color: Canvas; // circle background
+            }
+        }
     }
 }