@fkui/design 6.48.0 → 6.49.0

package/lib/fkui.css

@@ -264,8 +264,7 @@ input[type=tel]:focus,
 input[type=image]:focus,
 input[type=search]:focus,
 [tabindex]:focus {
-  border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background));
   outline: 3px solid transparent;
 }
 
@@ -1239,8 +1238,7 @@ input[type=search]:focus,
   box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0,0,0,.3));
 }
 .button:active, .calendar-navbar__year-selector-button:active, .button:focus, .calendar-navbar__year-selector-button:focus {
-  border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background));
   outline: 3px solid transparent;
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
@@ -1279,8 +1277,7 @@ input[type=search]:focus,
   box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0,0,0,.3));
 }
 .button.button--primary:active, .button--primary.calendar-navbar__year-selector-button:active, .button.button--primary:focus, .button--primary.calendar-navbar__year-selector-button:focus {
-  border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background));
   outline: 3px solid transparent;
   background-color: var(--fkds-color-action-background-primary-hover, #3b4292);
   border-color: transparent;
@@ -1316,8 +1313,7 @@ input[type=search]:focus,
   box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0,0,0,.3));
 }
 .button.button--secondary:active, .button--secondary.calendar-navbar__year-selector-button:active, .button.button--secondary:focus, .button--secondary.calendar-navbar__year-selector-button:focus {
-  border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background));
   outline: 3px solid transparent;
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
@@ -1359,8 +1355,7 @@ input[type=search]:focus,
   box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0,0,0,.3));
 }
 .button.button--discrete:active, .button--discrete.calendar-navbar__year-selector-button:active, .button.button--text:active, .button--text.calendar-navbar__year-selector-button:active, .button.button--discrete:focus, .button--discrete.calendar-navbar__year-selector-button:focus, .button.button--text:focus, .button--text.calendar-navbar__year-selector-button:focus {
-  border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background));
   outline: 3px solid transparent;
   background-color: none;
   border-color: transparent;
@@ -1431,8 +1426,7 @@ input[type=search]:focus,
   box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0,0,0,.3));
 }
 .button.button--discrete-inverted:active, .button--discrete-inverted.calendar-navbar__year-selector-button:active, .button.button--discrete-inverted:focus, .button--discrete-inverted.calendar-navbar__year-selector-button:focus {
-  border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background));
   outline: 3px solid transparent;
   background-color: transparent;
   border-color: transparent;
@@ -1479,8 +1473,7 @@ input[type=search]:focus,
   box-shadow: none;
 }
 .button.button--tertiary:active, .calendar-navbar__year-selector-button:active, .button.button--tertiary:focus, .calendar-navbar__year-selector-button:focus {
-  border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background));
   outline: 3px solid transparent;
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: transparent;
@@ -1506,10 +1499,10 @@ input[type=search]:focus,
     width: auto;
   }
 }
-.button.button--tertiary--black, .calendar-navbar__year-selector-button {
+.button.button--tertiary--muted, .calendar-navbar__year-selector-button, .button.button--tertiary--black {
   color: var(--fkds-color-action-text-secondary-default, #1b1e23);
 }
-.button.button--tertiary--black:hover, .calendar-navbar__year-selector-button:hover, .button.button--tertiary--black:active, .calendar-navbar__year-selector-button:active, .button.button--tertiary--black:focus, .calendar-navbar__year-selector-button:focus {
+.button.button--tertiary--muted:hover, .calendar-navbar__year-selector-button:hover, .button.button--tertiary--muted:active, .calendar-navbar__year-selector-button:active, .button.button--tertiary--muted:focus, .calendar-navbar__year-selector-button:focus, .button.button--tertiary--black:hover, .button.button--tertiary--black:active, .button.button--tertiary--black:focus {
   color: var(--fkds-color-action-text-secondary-default, #1b1e23);
 }
 .button.button--tertiary--inverted, .button--tertiary--inverted.calendar-navbar__year-selector-button {
@@ -2090,8 +2083,7 @@ input[type=search]:focus,
   opacity: 1;
 }
 .checkbox input[type=checkbox]:focus + .checkbox__label {
-  border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background));
   outline: 3px solid transparent;
 }
 
@@ -2506,8 +2498,7 @@ input[type=search]:focus,
 }
 .dialogue-tree__list-item:focus-within {
   z-index: 2;
-  border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background));
   outline: 3px solid transparent;
 }
 .dialogue-tree__list-item:focus-within:not(:first-child) {
@@ -2760,9 +2751,8 @@ input[type=search]:focus,
   }
 }
 .expandable-panel__content {
-  height: 0;
   overflow: hidden;
-  transition: height var(--f-animation-duration-medium, 350ms) ease-in;
+  transition: height 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
 }
 .expandable-panel__body {
   background-color: var(--fkds-color-background-primary, #fff);
@@ -2833,6 +2823,8 @@ input[type=search]:focus,
 .expandable-paragraph__content {
   margin-top: calc(0.75rem * var(--f-density-factor, 1));
   margin-bottom: calc(1rem * var(--f-density-factor, 1));
+  overflow: hidden;
+  transition: height 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
 }
 .expandable-paragraph__separator {
   border-bottom: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
@@ -2914,8 +2906,7 @@ input[type=search]:focus,
   border: 0;
 }
 .file-selector input[type=file]:focus + label {
-  border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background));
   outline: 3px solid transparent;
 }
 @media (forced-colors: active) {
@@ -3797,7 +3788,7 @@ input[type=search]:focus,
   margin-right: 0;
 }
 .layout-navigation__navigation {
-  background-color: #f4f4f4;
+  background-color: var(--fkds-color-background-secondary, #f4f4f4);
   display: flex;
   position: fixed;
   z-index: 9994;
@@ -3805,11 +3796,11 @@ input[type=search]:focus,
   bottom: 0;
 }
 .layout-navigation__navigation .button.button--tertiary:hover {
-  background-color: var(--f-background-sidepanel-button-tertiary-hover, #e5e5f5);
+  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
 }
 .layout-navigation__navigation__border {
   width: 4px;
-  background-color: #f4f4f4;
+  background-color: var(--fkds-color-background-secondary, #f4f4f4);
   cursor: w-resize;
   flex-shrink: 0;
   display: flex;
@@ -3818,14 +3809,14 @@ input[type=search]:focus,
   flex-direction: column;
 }
 .layout-navigation__navigation__border__dot {
-  background-color: #8d8e91;
+  background-color: var(--fkds-color-action-text-secondary-default, #1b1e23);
   width: 4px;
   height: 4px;
   border-radius: 2px;
   margin-top: 4px;
 }
 .layout-navigation__navigation__border:hover {
-  background-color: #e5e5f5;
+  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
 }
 .layout-navigation__navigation__inner {
   flex-grow: 1;
@@ -3859,8 +3850,8 @@ input[type=search]:focus,
   width: 6px;
 }
 .layout-navigation__navigation__inner__content::-webkit-scrollbar-thumb {
-  background: #8d8e91;
-  border: 1px solid #8d8e91;
+  background: var(--fkds-color-border-primary, #8d8e91);
+  border: 1px solid var(--fkds-color-border-primary, #8d8e91);
   box-sizing: border-box;
   border-radius: 33px;
 }
@@ -3885,7 +3876,7 @@ input[type=search]:focus,
   margin-right: 0;
 }
 .layout-secondary__secondary {
-  background-color: #f4f4f4;
+  background-color: var(--fkds-color-background-secondary, #f4f4f4);
   position: fixed;
   display: flex;
   right: 0;
@@ -3893,11 +3884,11 @@ input[type=search]:focus,
   z-index: 9994;
 }
 .layout-secondary__secondary .button.button--tertiary:hover {
-  background-color: var(--f-background-sidepanel-button-tertiary-hover, #e5e5f5);
+  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
 }
 .layout-secondary__secondary__border {
   width: 5px;
-  background-color: #f4f4f4;
+  background-color: var(--fkds-color-background-secondary, #f4f4f4);
   cursor: w-resize;
   flex-shrink: 0;
   display: flex;
@@ -3906,14 +3897,14 @@ input[type=search]:focus,
   flex-direction: column;
 }
 .layout-secondary__secondary__border__dot {
-  background-color: #8d8e91;
+  background-color: var(--fkds-color-action-text-secondary-default, #1b1e23);
   width: 4px;
   height: 4px;
   border-radius: 2px;
   margin-top: 4px;
 }
 .layout-secondary__secondary__border:hover {
-  background-color: #e5e5f5;
+  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
 }
 .layout-secondary__secondary__inner {
   position: relative;
@@ -3949,8 +3940,8 @@ input[type=search]:focus,
   width: 6px;
 }
 .layout-secondary__secondary__inner__content::-webkit-scrollbar-thumb {
-  background: #8d8e91;
-  border: 1px solid #8d8e91;
+  background: var(--fkds-color-border-primary, #8d8e91);
+  border: 1px solid var(--fkds-color-border-primary, #8d8e91);
   box-sizing: border-box;
   border-radius: 33px;
 }
@@ -4945,8 +4936,7 @@ input[type=search]:focus,
   opacity: 1;
 }
 .radio-button input[type=radio]:focus + label {
-  border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background));
   outline: 3px solid transparent;
 }
 
@@ -5341,8 +5331,7 @@ input[type=search]:focus,
   box-shadow: none;
 }
 .table__button:active, .table__button:focus {
-  border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background));
   outline: 3px solid transparent;
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: transparent;
@@ -6218,7 +6207,7 @@ input[type=search]:focus,
   z-index: 9997;
 }
 .calendar-month__button:focus[tabindex="-1"] {
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background));
 }
 
 .calendar-navbar__year-selector-button--title, .calendar-navbar__month--title {