@fkui/design 6.11.0 → 6.13.0

package/lib/fkui.css

@@ -2164,7 +2164,10 @@ input[type=search]:focus,
   flex-direction: column;
 }
 .checkbox__label::after {
-  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhZ2VyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgMjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cmVjdCB4PSIzLjQ3NCIgeT0iOS4xOTQiIGZpbGw9IiMzQzU1OTIiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiLz4KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTguMzc2LDE1LjAwNWMtMC40MTYsMC0wLjgzMi0wLjE1OC0xLjE0OS0wLjQ3NWwtMy4yNS0zLjI0M2MtMC42MzUtMC42MzQtMC42MzUtMS42NiwwLTIuMjkzCgljMC42MzUtMC42MzMsMS42NjMtMC42MzMsMi4yOTgsMGwyLjEwMSwyLjA5N2w1LjM1MS01LjM0YzAuNjM1LTAuNjM0LDEuNjYzLTAuNjM0LDIuMjk4LDBjMC42MzUsMC42MzMsMC42MzUsMS42NTksMCwyLjI5MwoJbC02LjUsNi40ODdDOS4yMDcsMTQuODQ3LDguNzkyLDE1LjAwNSw4LjM3NiwxNS4wMDV6Ii8+Cjwvc3ZnPgo=");
+  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImNoZWNrYm94LWljb24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHJlY3QgeD0iMy40NzQiIHk9IjkuMTk0IiBmaWxsPSIjM0M1NTkyIiB3aWR0aD0iMCIgaGVpZ2h0PSIwIi8+CjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTguMzc2LDE1LjAwNWMtMC40MTYsMC0wLjgzMi0wLjE1OC0xLjE0OS0wLjQ3NWwtMy4yNS0zLjI0M2MtMC42MzUtMC42MzQtMC42MzUtMS42NiwwLTIuMjkzCiAgICAgICAgYzAuNjM1LTAuNjMzLDEuNjYzLTAuNjMzLDIuMjk4LDBsMi4xMDEsMi4wOTdsNS4zNTEtNS4zNGMwLjYzNS0wLjYzNCwxLjY2My0wLjYzNCwyLjI5OCwwYzAuNjM1LDAuNjMzLDAuNjM1LDEuNjU5LDAsMi4yOTMKICAgICAgICBsLTYuNSw2LjQ4N0M5LjIwNywxNC44NDcsOC43OTIsMTUuMDA1LDguMzc2LDE1LjAwNXoiLz4KPC9zdmc+Cg==");
+          mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImNoZWNrYm94LWljb24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHJlY3QgeD0iMy40NzQiIHk9IjkuMTk0IiBmaWxsPSIjM0M1NTkyIiB3aWR0aD0iMCIgaGVpZ2h0PSIwIi8+CjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTguMzc2LDE1LjAwNWMtMC40MTYsMC0wLjgzMi0wLjE1OC0xLjE0OS0wLjQ3NWwtMy4yNS0zLjI0M2MtMC42MzUtMC42MzQtMC42MzUtMS42NiwwLTIuMjkzCiAgICAgICAgYzAuNjM1LTAuNjMzLDEuNjYzLTAuNjMzLDIuMjk4LDBsMi4xMDEsMi4wOTdsNS4zNTEtNS4zNGMwLjYzNS0wLjYzNCwxLjY2My0wLjYzNCwyLjI5OCwwYzAuNjM1LDAuNjMzLDAuNjM1LDEuNjU5LDAsMi4yOTMKICAgICAgICBsLTYuNSw2LjQ4N0M5LjIwNywxNC44NDcsOC43OTIsMTUuMDA1LDguMzc2LDE1LjAwNXoiLz4KPC9zdmc+Cg==");
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
 }
 
 .checkbox {
@@ -2209,36 +2212,60 @@ input[type=search]:focus,
   width: var(--f-icon-size-medium, 1.25rem);
 }
 .checkbox__label::before {
-  background: var(--f-background-input, #ffffff);
-  border: var(--f-border-width-medium, 2px) solid var(--f-border-color-input, #8d8e91);
+  background-color: var(--fkds-color-background-primary, #ffffff);
+  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
   border-radius: var(--f-border-radius-small, 2px);
   cursor: pointer;
   display: block;
   transition: background-color ease var(--f-animation-duration-medium, 350ms), border-color ease var(--f-animation-duration-medium, 350ms), opacity ease var(--f-animation-duration-medium, 350ms);
 }
 .checkbox__label::after {
-  background-color: transparent;
+  background-color: var(--fkds-icon-color-content-inverted, #ffffff);
   opacity: 0;
   transition: opacity ease var(--f-animation-duration-medium, 350ms);
 }
+@media (forced-colors: active) {
+  .checkbox__label::after {
+    background-color: Canvas;
+  }
+}
 .checkbox.disabled {
-  color: var(--f-text-color-input-disabled, #8d8e91);
+  color: var(--fkds-color-text-disabled, #8d8e91);
+}
+@media (forced-colors: active) {
+  .checkbox.disabled {
+    color: GrayText;
+  }
 }
 .checkbox.disabled .checkbox__label {
   cursor: default;
 }
 .checkbox.disabled .checkbox__label::before {
-  border: var(--f-border-width-medium, 2px) solid var(--f-text-color-input-disabled, #8d8e91);
+  background-color: var(--fkds-color-background-disabled, #f4f4f4);
+  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-disabled, #8d8e91);
   cursor: inherit;
 }
 .checkbox.disabled input[type=checkbox]:checked + label::before {
-  background: var(--f-background-input-selected-disabled, #8d8e91);
+  background-color: var(--fkds-color-background-disabled, #f4f4f4);
+  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-disabled, #8d8e91);
+}
+@media (forced-colors: active) {
+  .checkbox.disabled input[type=checkbox]:checked + label::before {
+    border-color: GrayText;
+  }
+}
+.checkbox.disabled input[type=checkbox]:checked + .checkbox__label::after {
+  background-color: var(--fkds-icon-color-content-disabled, #8d8e91);
 }
 .checkbox input[type=checkbox]:checked + label::before {
-  background-color: var(--f-background-input-selected, #4a52b6);
+  background-color: var(--fkds-color-select-background-primary-default, #4a52b6);
+  border: var(--f-border-width-medium, 2px) solid transparent;
 }
-.checkbox input[type=checkbox]:not(:checked) + .checkbox__label::before {
-  box-shadow: var(--f-input-shadow-inset, inset 0 2px 3px rgba(0, 0, 0, 0.1));
+@media (forced-colors: active) {
+  .checkbox input[type=checkbox]:checked + label::before {
+    background-color: HighLight;
+    border-color: HighLight;
+  }
 }
 .checkbox input[type=checkbox]:checked + .checkbox__label::after {
   opacity: 1;
@@ -2563,11 +2590,11 @@ input[type=search]:focus,
   padding-left: 0;
   list-style-type: none;
   border-radius: 2px;
-  border: 1px solid var(--f-border-color-dialogue-tree, #8d8e91);
+  border: 1px solid var(--fkds-color-border-primary, #8d8e91);
 }
 .dialogue-tree__list-item {
-  background-color: var(--f-background-dialogue-tree, #ffffff);
-  border-bottom: 1px solid var(--f-border-color-dialogue-tree, #8d8e91);
+  background-color: var(--fkds-color-background-primary, #ffffff);
+  border-bottom: 1px solid var(--fkds-color-border-primary, #8d8e91);
   padding: 0.25em;
   height: 60px;
 }
@@ -2575,7 +2602,7 @@ input[type=search]:focus,
   border-bottom: none;
 }
 .dialogue-tree__list-item:hover {
-  background-color: var(--f-background-dialogue-tree-hover, #e5e5f5);
+  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
 }
 .dialogue-tree__list-item button {
   padding: 0 0.75em;
@@ -2594,7 +2621,7 @@ input[type=search]:focus,
   overflow: hidden;
   font-weight: var(--f-font-weight-medium, 700);
   font-size: var(--f-font-size-standard, 1rem);
-  color: var(--f-text-color-default, #1b1e23);
+  color: var(--fkds-color-action-text-secondary-default, #1b1e23);
   text-align: left;
   cursor: pointer;
 }
@@ -2604,7 +2631,7 @@ input[type=search]:focus,
 }
 
 .error-list {
-  color: var(--f-text-color-error, #d23838);
+  color: var(--fkds-color-feedback-text-negative, #ca1515);
   margin: 0 0 calc(var(--f-margin-component-bottom, 1.5rem) * var(--f-density-factor, 1));
 }
 .error-list--list-style-none {
@@ -2619,7 +2646,7 @@ input[type=search]:focus,
   line-height: max(1.5, 2 * var(--f-density-factor, 1));
 }
 .error-list__bullet::before {
-  color: var(--f-text-color-error, #d23838);
+  color: var(--fkds-color-feedback-text-negative, #ca1515);
   content: "•";
   display: inline;
   font-size: var(--f-font-size-h4, 1.25rem);
@@ -2627,13 +2654,16 @@ input[type=search]:focus,
   margin-right: 0.75rem;
 }
 .error-list__link {
-  color: var(--f-text-color-error, #d23838);
-  cursor: pointer;
+  color: var(--fkds-color-feedback-text-negative, #ca1515);
   list-style-position: inside;
   text-decoration: underline;
+  text-underline-offset: 0.25em;
 }
 .error-list__link a {
-  color: var(--f-text-color-error, #d23838);
+  color: var(--fkds-color-feedback-text-negative, #ca1515);
+}
+.error-list__link:hover {
+  text-decoration-thickness: 2px;
 }
 .error-list__icon {
   max-width: none;
@@ -2759,9 +2789,6 @@ input[type=search]:focus,
 .file-item__file-remove {
   flex: 0 0 auto;
 }
-.file-item__file-remove svg {
-  color: var(--f-icon-color-primary, #4a52b6);
-}
 .file-item__file-abort {
   flex: 0 0 auto;
 }
@@ -2781,10 +2808,6 @@ input[type=search]:focus,
   margin-bottom: 1.25rem;
   border: var(--f-border-width-medium, 2px) solid var(--f-border-color-separator, #ddddde);
 }
-.file-item__file-uploading .progress__meter--inprogress {
-  background: var(--f-background-progress-file-item-ongoing, #ffc834);
-  border: var(--f-border-width-small, 1px) solid var(--f-border-color-progress-file-item-ongoing, #5f6165);
-}
 
 .file-selector svg {
   color: var(--f-icon-color-primary, #4a52b6);
@@ -4461,29 +4484,39 @@ input[type=search]:focus,
 }
 
 .progress {
-  background-color: var(--f-background-progress, #ddddde);
-  border-radius: var(--f-height-medium, 1.25rem);
-  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
+  background-color: var(--fkds-color-background-primary, #ffffff);
+  border-radius: var(--f-border-radius-medium, 4px);
   height: var(--f-height-small, 0.75rem);
   margin-bottom: 1.5rem;
   padding: 0;
+  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-feedback-border-positive, #35805b);
+}
+@media (forced-colors: active) {
+  .progress {
+    border: var(--f-border-width-medium, 2px) solid highlight;
+  }
 }
 .progress__meter {
-  border-radius: var(--f-height-medium, 1.25rem);
   display: block;
   float: left;
-  height: var(--f-height-small, 0.75rem);
-  margin: calc(-1 * var(--f-border-width-small, 1px));
+  height: calc(var(--f-height-small, 0.75rem) - var(--f-border-width-medium, 2px) * 2);
   transition: width var(--f-animation-duration-medium, 350ms) ease-out, background-color var(--f-animation-duration-medium, 350ms) ease-out;
 }
 .progress__meter--inprogress {
-  background: var(--f-background-progress-ongoing, #ffc834);
-  border: var(--f-border-width-small, 1px) solid var(--f-border-color-progress-ongoing, #5f6165);
+  background: var(--fkds-color-feedback-background-positive-strong, #35805b);
+}
+@media (forced-colors: active) {
+  .progress__meter--inprogress {
+    background: highlight;
+  }
 }
 .progress__meter--finished {
-  background: var(--f-background-progress-finished, #77ad82);
-  border: var(--f-border-width-small, 1px) solid var(--f-border-color-progress-finished, #4c7e56);
-  width: calc(100% + 2 * var(--f-border-width-small, 1px));
+  background: var(--fkds-color-feedback-background-positive-strong, #35805b);
+}
+@media (forced-colors: active) {
+  .progress__meter--finished {
+    background: highlight;
+  }
 }
 
 .radio-button {
@@ -4530,33 +4563,49 @@ input[type=search]:focus,
   top: 0;
   cursor: pointer;
   width: var(--f-icon-size-medium, 1.25rem);
-  border: var(--f-border-width-medium, 2px) solid var(--f-border-color-input, #8d8e91);
+  background-color: var(--fkds-color-background-primary, #ffffff);
+  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
   display: block;
   transition: background-color ease var(--f-animation-duration-medium, 350ms), border-color ease var(--f-animation-duration-medium, 350ms), opacity ease var(--f-animation-duration-medium, 350ms);
 }
-.radio-button__label::before {
-  background: var(--f-background-input, #ffffff);
-  box-shadow: inset 0 0 0 var(--f-border-width-medium, 2px) var(--f-border-color-input-inner, #e5e5f5);
-}
 .radio-button__label::after {
-  background: var(--f-background-input-selected, #4a52b6);
-  box-shadow: inset 0 0 0 var(--f-border-width-medium, 2px) var(--f-border-color-input-inner-selected, #e5e5f5);
+  background-color: var(--fkds-color-select-background-primary-default, #4a52b6);
+  box-shadow: inset 0 0 0 var(--f-border-width-medium, 2px) var(--fkds-color-background-primary, #ffffff);
   opacity: 0;
 }
+@media (forced-colors: active) {
+  .radio-button__label::after {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    box-shadow: inset 0 0 0 var(--f-border-width-medium, 2px) Canvas;
+  }
+}
 .radio-button.disabled {
-  color: var(--f-text-color-input-disabled, #8d8e91);
+  color: var(--fkds-color-text-disabled, #8d8e91);
+}
+@media (forced-colors: active) {
+  .radio-button.disabled {
+    color: GrayText;
+  }
+}
+.radio-button.disabled .radio-button__label {
+  cursor: default;
 }
 .radio-button.disabled .radio-button__label::before, .radio-button.disabled .radio-button__label::after {
-  border: var(--f-border-width-medium, 2px) solid var(--f-text-color-input-disabled, #8d8e91);
-  box-shadow: inset 0 0 0 var(--f-border-width-medium, 2px) var(--f-border-color-input-inner-disabled, #ffffff);
+  background: var(--fkds-color-background-disabled, #f4f4f4);
+  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-disabled, #8d8e91);
+  cursor: default;
 }
-.radio-button.disabled .radio-button__label::after {
-  background: var(--f-background-input-selected-disabled, #8d8e91);
+@media (forced-colors: active) {
+  .radio-button.disabled .radio-button__label::before, .radio-button.disabled .radio-button__label::after {
+    border: var(--f-border-width-medium, 2px) solid GrayText;
+  }
 }
 .radio-button input[type=radio] + label::after {
   opacity: 0;
 }
 .radio-button input[type=radio]:checked + label::after {
+  border: var(--f-border-width-medium, 2px) solid transparent;
   opacity: 1;
 }
 .radio-button input[type=radio]:focus + label {