@fkui/design 6.7.1 → 6.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/design",
-  "version": "6.7.1",
+  "version": "6.8.0",
   "description": "fkui design",
   "keywords": [
     "fkui",
@@ -42,8 +42,8 @@
     "runner": "jest-light-runner"
   },
   "devDependencies": {
-    "@fkui/icon-lib-default": "6.7.0",
-    "@fkui/theme-default": "6.7.0",
+    "@fkui/icon-lib-default": "6.8.0",
+    "@fkui/theme-default": "6.8.0",
     "autoprefixer": "10.4.21",
     "cssnano": "7.0.7",
     "flush-promises": "1.0.2",
@@ -57,7 +57,7 @@
     "svgo": "3.3.2"
   },
   "peerDependencies": {
-    "@fkui/theme-default": "^6.7.0",
+    "@fkui/theme-default": "^6.8.0",
     "sass": "^1.40.0",
     "stylelint": ">= 14"
   },
@@ -73,5 +73,5 @@
     "node": ">= 20",
     "npm": ">= 7"
   },
-  "gitHead": "05d2236591164ac5d328dee0331643d3544df402"
+  "gitHead": "c76b7bb4c189847cdf9ab69abd426eb462761226"
 }

package/src/components/button/_button.scss

@@ -320,47 +320,27 @@ $button--tertiary: (
         &--black {
             color: $button-tertiary-black-color-text-default;
 
-            & > .button__icon {
-                color: $button-tertiary-black-icon-color-content-default;
-            }
-
             &:hover,
             &:active,
             &:focus {
                 color: $button-tertiary-black-color-text-focus;
-
-                & > .button__icon {
-                    color: $button-tertiary-black-icon-color-content-focus;
-                }
             }
         }
 
         &--inverted {
             color: $button-tertiary-inverted-color-text-default;
 
-            & > .button__icon {
-                color: $button-tertiary-inverted-icon-color-content-default;
-            }
-
             &:hover,
             &:active,
             &:focus {
                 color: $button-tertiary-inverted-color-text-focus;
                 background-color: $button-tertiary-inverted-color-background-focus;
-
-                & > .button__icon {
-                    color: $button-tertiary-inverted-icon-color-content-focus;
-                }
             }
 
             &:disabled {
                 color: $button-tertiary-inverted-color-text-disabled;
                 border-width: 0;
                 background-color: $button-tertiary-inverted-color-background-disabled;
-
-                & > .button__icon {
-                    color: $button-tertiary-inverted-icon-color-content-disabled;
-                }
             }
         }
 

package/src/components/button/_variables.scss

@@ -32,4 +32,4 @@ $button-tertiary-inverted-icon-color-content-focus: var(--fkds-icon-color-action
 $button-tertiary-inverted-color-background-focus: transparent;
 $button-tertiary-inverted-color-background-disabled: transparent;
 $button-tertiary-inverted-color-text-disabled: var(--fkds-color-text-disabled);
-$button-tertiary-inverted-icon-color-content-disabled: var(--fkds-icon-color-action-content-primary-disabled);
+$button-tertiary-inverted-icon-color-content-disabled: var(--fkds-icon-color-content-disabled);

package/src/components/combobox/_variables.scss

@@ -6,4 +6,4 @@ $combobox-color-text-selected: var(--fkds-color-text-inverted);
 $combobox-color-text: var(--fkds-color-text-primary);
 $combobox-color-border: var(--fkds-color-border-primary);
 $combobox-f-icon-arrow-down-color-content-default: var(--fkds-icon-color-action-content-primary-default);
-$combobox-f-icon-arrow-down-color-content-disabled: var(--fkds-icon-color-action-content-primary-disabled);
+$combobox-f-icon-arrow-down-color-content-disabled: var(--fkds-icon-color-content-disabled);

package/src/components/select-field/_variables.scss

@@ -13,6 +13,6 @@ $selectfield-color-background-focus: var(--fkds-color-background-primary);
 $selectfield-color-background-disabled: var(--fkds-color-background-disabled);
 
 // BORDER
-$selectfield-color-border-disabled: var(--fkds-color-border-primary);
+$selectfield-color-border-disabled: var(--fkds-color-border-disabled);
 $selectfield-color-border-default: var(--fkds-color-border-primary);
 $selectfield-color-border-error: var(--fkds-color-feedback-border-negative);

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

@@ -4,7 +4,7 @@ $textfield-color-background-disabled: var(--fkds-color-background-disabled);
 
 // BORDER
 $textfield-color-border-default: var(--fkds-color-border-primary);
-$textfield-color-border-disabled: var(--fkds-color-border-primary);
+$textfield-color-border-disabled: var(--fkds-color-border-disabled);
 $textfield-color-border-error: var(--fkds-color-feedback-border-negative);
 
 // ICON

package/src/components/textarea-field/_variables.scss

@@ -4,7 +4,7 @@ $textareafield-color-background-disabled: var(--fkds-color-background-disabled);
 
 // BORDER
 $textareafield-color-border-default: var(--fkds-color-border-primary);
-$textareafield-color-border-disabled: var(--fkds-color-border-primary);
+$textareafield-color-border-disabled: var(--fkds-color-border-disabled);
 $textareafield-color-border-error: var(--fkds-color-feedback-border-negative);
 
 // TEXT

package/src/core/mixins/_button.scss

@@ -10,10 +10,6 @@
     $color--hover: $color,
     $color--focus: $color--hover,
     $color--disabled: $button-color-text-disabled,
-    $icon-color: $color,
-    $icon-color--hover: $color--hover,
-    $icon-color--focus: $color--focus,
-    $icon-color--disabled: $color--disabled,
     $background-color--hover: $background-color,
     $background-color--focus: $background-color--hover,
     $background-color--disabled: $button-color-background-disabled,
@@ -34,19 +30,11 @@
     color: $color;
     padding: $padding-top $padding-right $padding-bottom $padding-left;
 
-    & > .button__icon {
-        color: $icon-color;
-    }
-
     &:hover {
         background-color: $background-color--hover;
         border-color: $border-color--hover;
         color: $color--hover;
         box-shadow: $shadow-hover;
-
-        & > .button__icon {
-            color: $icon-color--hover;
-        }
     }
 
     &:active,
@@ -56,10 +44,6 @@
         background-color: $background-color--focus;
         border-color: $border-color--focus;
         color: $color--focus;
-
-        & > .button__icon {
-            color: $icon-color--focus;
-        }
     }
 
     &.disabled,
@@ -71,9 +55,5 @@
         background-color: $background-color--disabled;
         border-color: $border-color--disabled;
         color: $color--disabled;
-
-        & > .button__icon {
-            color: $icon-color--disabled;
-        }
     }
 }

package/src/core/mixins/_variables.scss

@@ -1,4 +1,4 @@
 $button-color-border-default: transparent;
-$button-color-background-disabled: var(--fkds-color-action-background-disabled);
-$button-color-border-disabled: var(--fkds-color-action-border-disabled);
-$button-color-text-disabled: var(--fkds-color-action-text-disabled);
+$button-color-background-disabled: var(--fkds-color-background-disabled);
+$button-color-border-disabled: var(--fkds-color-border-disabled);
+$button-color-text-disabled: var(--fkds-color-text-disabled);

package/src/internal-components/calendar-navbar/_navbar.scss

@@ -11,22 +11,20 @@ $calendar-icon-disabled-padding: calc($calendar-icon-padding - $calendar-icon-di
     text-align: center;
     border-bottom: 1px solid var(--f-border-color-calendar-navbar);
     padding: 1rem;
+    gap: 1rem;
     margin-bottom: 0.75rem;
     font-size: var(--f-font-size-h4);
 
     &__month {
-        order: 2;
+        margin-right: auto;
+        font-size: 1.5rem;
+        font-weight: bold;
     }
 
     &__arrow--previous {
-        order: 1;
         transform: scaleX(-1);
     }
 
-    &__arrow--next {
-        order: 3;
-    }
-
     &__icon {
         color: var(--f-icon-color-white);
         background-color: var(--f-icon-color-primary);