@fkui/design 6.24.1 → 6.25.0

package/lib/fkui.css

@@ -70,7 +70,7 @@ html {
 }
 
 body {
-  color: var(--f-text-color-default, #1b1e23);
+  color: var(--fkds-color-text-primary, #1b1e23);
   font-size: var(--f-font-size-standard, 1rem);
   font-weight: var(--f-font-weight-normal, 400);
   line-height: var(--f-line-height-large, 1.5);
@@ -92,7 +92,7 @@ code {
   font-size: var(--f-font-size-standard, 1rem);
   border-radius: var(--f-border-radius-small, 2px);
   font-family: var(--f-font-family-code, "Consolas", "Liberation Mono", "Courier", monospace);
-  background-color: var(--f-background-code, #f4f4f4);
+  background-color: var(--fkds-color-background-secondary, #f4f4f4);
   display: inline-block;
   margin: 0 0.25rem;
   padding: 0 0.25rem;
@@ -265,7 +265,7 @@ input[type=image]:focus,
 input[type=search]:focus,
 [tabindex]:focus {
   border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
   outline: 3px solid transparent;
 }
 
@@ -1146,7 +1146,7 @@ input[type=search]:focus,
 }
 @media (prefers-color-scheme: dark) {
   .badge--warning {
-    color: var(--fkds-color-text-inverted, #ffffff);
+    color: var(--fkds-color-text-inverted, #fff);
   }
 }
 .badge--warning-inverted {
@@ -1155,7 +1155,7 @@ input[type=search]:focus,
   border-color: var(--fkds-color-feedback-border-warning, #ffbe10);
 }
 .badge--error {
-  color: var(--fkds-color-text-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
   background-color: var(--fkds-color-feedback-background-negative-strong, #ca1515);
   border-color: var(--fkds-color-feedback-background-negative-strong, #ca1515);
 }
@@ -1165,7 +1165,7 @@ input[type=search]:focus,
   border-color: var(--fkds-color-feedback-border-negative, #ca1515);
 }
 .badge--success {
-  color: var(--fkds-color-text-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
   background-color: var(--fkds-color-feedback-background-positive-strong, #35805b);
   border-color: var(--fkds-color-feedback-background-positive-strong, #35805b);
 }
@@ -1175,7 +1175,7 @@ input[type=search]:focus,
   border-color: var(--fkds-color-feedback-border-positive, #35805b);
 }
 .badge--info {
-  color: var(--fkds-color-text-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
   background-color: var(--fkds-color-feedback-background-info-strong, #4a52b6);
   border-color: var(--fkds-color-feedback-background-info-strong, #4a52b6);
 }
@@ -1312,7 +1312,7 @@ input[type=search]:focus,
   background-color: var(--fkds-color-action-background-secondary-default, #f5f6fa);
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
   border-width: var(--f-border-width-medium, 2px);
-  box-shadow: var(--f-button-shadow, 0 1px 3px rgba(0, 0, 0, 0.3));
+  box-shadow: var(--f-button-shadow, 0 1px 3px rgba(0,0,0,.3));
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
   padding: calc(var(--f-button-standard-padding-top, 1rem) * var(--f-density-factor, 1)) var(--f-button-standard-padding-right, 1.5rem) calc(var(--f-button-standard-padding-bottom, 1rem) * var(--f-density-factor, 1)) var(--f-button-standard-padding-left, 1.5rem);
 }
@@ -1320,11 +1320,11 @@ input[type=search]:focus,
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
-  box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
+  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 #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
   outline: 3px solid transparent;
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
@@ -1339,23 +1339,23 @@ input[type=search]:focus,
   background-color: var(--fkds-color-action-background-primary-default, #4a52b6);
   border-color: transparent;
   border-width: var(--f-border-width-medium, 2px);
-  box-shadow: var(--f-button-shadow, 0 1px 3px rgba(0, 0, 0, 0.3));
-  color: var(--fkds-color-action-text-inverted-default, #ffffff);
+  box-shadow: var(--f-button-shadow, 0 1px 3px rgba(0,0,0,.3));
+  color: var(--fkds-color-action-text-inverted-default, #fff);
   padding: calc(var(--f-button-primary-padding-top, 1rem) * var(--f-density-factor, 1)) var(--f-button-primary-padding-right, 1.5rem) calc(var(--f-button-primary-padding-bottom, 1rem) * var(--f-density-factor, 1)) var(--f-button-primary-padding-left, 1.5rem);
 }
 .button.button--primary:hover, .button--primary.calendar-navbar__year-selector-button:hover {
   background-color: var(--fkds-color-action-background-primary-hover, #3b4292);
   border-color: transparent;
-  color: var(--fkds-color-action-text-inverted-default, #ffffff);
-  box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
+  color: var(--fkds-color-action-text-inverted-default, #fff);
+  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 #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
   outline: 3px solid transparent;
   background-color: var(--fkds-color-action-background-primary-hover, #3b4292);
   border-color: transparent;
-  color: var(--fkds-color-action-text-inverted-default, #ffffff);
+  color: var(--fkds-color-action-text-inverted-default, #fff);
 }
 .button.button--primary.disabled, .button--primary.disabled.calendar-navbar__year-selector-button, .button.button--primary.disabled:hover, .button.button--primary:disabled, .button--primary.calendar-navbar__year-selector-button:disabled, .button.button--primary:disabled:hover, .button.button--primary.button--disabled, .button--primary.button--disabled.calendar-navbar__year-selector-button, .button.button--primary.button--disabled:hover {
   background-color: var(--fkds-color-background-disabled, #f4f4f4);
@@ -1366,7 +1366,7 @@ input[type=search]:focus,
   background-color: var(--fkds-color-action-background-secondary-default, #f5f6fa);
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
   border-width: var(--f-border-width-medium, 2px);
-  box-shadow: var(--f-button-shadow, 0 1px 3px rgba(0, 0, 0, 0.3));
+  box-shadow: var(--f-button-shadow, 0 1px 3px rgba(0,0,0,.3));
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
   padding: calc(var(--f-button-secondary-padding-top, 1rem) * var(--f-density-factor, 1)) var(--f-button-secondary-padding-right, 1.5rem) calc(var(--f-button-secondary-padding-bottom, 1rem) * var(--f-density-factor, 1)) var(--f-button-secondary-padding-left, 1.5rem);
 }
@@ -1374,11 +1374,11 @@ input[type=search]:focus,
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
-  box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
+  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 #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
   outline: 3px solid transparent;
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
@@ -1403,18 +1403,18 @@ input[type=search]:focus,
   padding: calc(var(--f-button-discrete-padding-top, initial) * var(--f-density-factor, 1)) var(--f-button-discrete-padding-right, initial) calc(var(--f-button-discrete-padding-bottom, initial) * var(--f-density-factor, 1)) var(--f-button-discrete-padding-left, initial);
 }
 .button.button--discrete:hover, .button--discrete.calendar-navbar__year-selector-button:hover, .button.button--text:hover, .button--text.calendar-navbar__year-selector-button:hover {
-  background-color: var(--f-background-button-discrete-hover, none);
+  background-color: none;
   border-color: transparent;
-  color: var(--f-text-color-button-discrete-hover, #3b4292);
-  box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
+  color: var(--fkds-color-action-text-primary-hover, #3b4292);
+  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 #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
   outline: 3px solid transparent;
-  background-color: var(--f-background-button-discrete-hover, none);
+  background-color: none;
   border-color: transparent;
-  color: var(--f-text-color-button-discrete-hover, #3b4292);
+  color: var(--fkds-color-action-text-primary-hover, #3b4292);
 }
 .button.button--discrete.disabled, .button--discrete.disabled.calendar-navbar__year-selector-button, .button.disabled.button--text, .disabled.button--text.calendar-navbar__year-selector-button, .button.button--discrete.disabled:hover, .button.button--discrete:disabled, .button--discrete.calendar-navbar__year-selector-button:disabled, .button.button--text:disabled, .button--text.calendar-navbar__year-selector-button:disabled, .button.button--discrete:disabled:hover, .button.button--discrete.button--disabled, .button--discrete.button--disabled.calendar-navbar__year-selector-button, .button.button--disabled.button--text, .button--disabled.button--text.calendar-navbar__year-selector-button, .button.button--discrete.button--disabled:hover {
   background-color: transparent;
@@ -1458,22 +1458,22 @@ input[type=search]:focus,
   border-color: transparent;
   border-width: 0;
   box-shadow: none;
-  color: var(--fkds-color-action-text-inverted-default, #ffffff);
+  color: var(--fkds-color-action-text-inverted-default, #fff);
   padding: calc(var(--f-button-discrete-padding-top, initial) * var(--f-density-factor, 1)) var(--f-button-discrete-padding-right, initial) calc(var(--f-button-discrete-padding-bottom, initial) * var(--f-density-factor, 1)) var(--f-button-discrete-padding-left, initial);
 }
 .button.button--discrete-inverted:hover, .button--discrete-inverted.calendar-navbar__year-selector-button:hover {
   background-color: transparent;
   border-color: transparent;
-  color: var(--f-text-color-button-discrete-inverted-hover, #ffffff);
-  box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
+  color: var(--fkds-color-action-text-inverted-hover, #fff);
+  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 #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
   outline: 3px solid transparent;
   background-color: transparent;
   border-color: transparent;
-  color: var(--f-text-color-button-discrete-inverted-hover, #ffffff);
+  color: var(--fkds-color-action-text-inverted-hover, #fff);
 }
 .button.button--discrete-inverted.disabled, .button--discrete-inverted.disabled.calendar-navbar__year-selector-button, .button.button--discrete-inverted.disabled:hover, .button.button--discrete-inverted:disabled, .button--discrete-inverted.calendar-navbar__year-selector-button:disabled, .button.button--discrete-inverted:disabled:hover, .button.button--discrete-inverted.button--disabled, .button--discrete-inverted.button--disabled.calendar-navbar__year-selector-button, .button.button--discrete-inverted.button--disabled:hover {
   background-color: transparent;
@@ -1508,7 +1508,7 @@ input[type=search]:focus,
 }
 .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 #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
   outline: 3px solid transparent;
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: transparent;
@@ -1534,10 +1534,10 @@ input[type=search]:focus,
   border: none;
 }
 .button.button--tertiary--inverted, .button--tertiary--inverted.calendar-navbar__year-selector-button {
-  color: var(--fkds-color-action-text-inverted-default, #ffffff);
+  color: var(--fkds-color-action-text-inverted-default, #fff);
 }
 .button.button--tertiary--inverted:hover, .button--tertiary--inverted.calendar-navbar__year-selector-button:hover, .button.button--tertiary--inverted:active, .button--tertiary--inverted.calendar-navbar__year-selector-button:active, .button.button--tertiary--inverted:focus, .button--tertiary--inverted.calendar-navbar__year-selector-button:focus {
-  color: var(--fkds-color-action-text-inverted-focus, #ffffff);
+  color: var(--fkds-color-action-text-inverted-focus, #fff);
   background-color: transparent;
 }
 .button.button--tertiary--inverted:disabled, .button--tertiary--inverted.calendar-navbar__year-selector-button:disabled {
@@ -1725,7 +1725,7 @@ input[type=search]:focus,
   border: var(--f-border-width-small, 1px) solid var(--fkds-color-border-strong, #5f6165);
 }
 .calendar-day--highlight.calendar-day--selected::before {
-  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-inverted, #ffffff);
+  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-inverted, #fff);
 }
 @media (forced-colors: active) {
   .calendar-day--highlight.calendar-day--selected::before {
@@ -1733,7 +1733,7 @@ input[type=search]:focus,
   }
 }
 .calendar-day--highlight:active:not(.calendar-day--highlight--disabled)::before {
-  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-inverted, #ffffff);
+  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-inverted, #fff);
 }
 @media (forced-colors: active) {
   .calendar-day--highlight:active:not(.calendar-day--highlight--disabled)::before {
@@ -1760,7 +1760,7 @@ input[type=search]:focus,
   width: 60%;
 }
 .calendar-day--selected {
-  color: var(--fkds-color-text-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
   background-color: var(--fkds-color-select-background-primary-default, #4a52b6);
 }
 @media (forced-colors: active) {
@@ -1789,7 +1789,7 @@ input[type=search]:focus,
   }
 }
 .calendar-day:active:not(.calendar-day--disabled), .calendar-day--active:not(.calendar-day--disabled) {
-  color: var(--fkds-color-text-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
   background-color: var(--fkds-color-select-background-primary-default, #4a52b6);
 }
 @media (forced-colors: active) {
@@ -1805,7 +1805,7 @@ input[type=search]:focus,
   margin: calc(1rem * var(--f-density-factor, 1)) 0;
 }
 .card--default {
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
   border-radius: var(--f-border-radius-medium, 4px);
   border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
 }
@@ -1847,18 +1847,18 @@ input[type=search]:focus,
 
 .list__item {
   display: flex;
-  border: var(--f-border-width-medium, 2px) solid var(--f-border-color-grid, #8d8e91);
-  background: var(--f-background-grid-default, #ffffff);
+  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
+  background: var(--fkds-color-background-primary, #fff);
 }
 
 .radio-button-group--border .radio-button-group__content .radio-button:not(.disabled):hover, .checkbox-group--border .checkbox-group__content .checkbox:not(.disabled):hover, .list--hover .list__item:not(.disabled):focus-within,
 .list--hover .list__item:not(.disabled):hover, .list__item--hover:not(.disabled) {
-  background: var(--f-background-grid-hover, #f5f6fa);
+  background: var(--fkds-color-select-background-primary-hover, #e5e5f5);
 }
 
 .list--hover .list__item:focus-within.list__item--active,
 .list--hover .list__item:hover.list__item--active, .list__item--active {
-  background: var(--f-background-grid-active, #e5e5f5);
+  background: var(--fkds-color-select-background-primary-active, #e5e5f5);
 }
 
 .list {
@@ -1907,17 +1907,17 @@ input[type=search]:focus,
   cursor: pointer;
 }
 .radio-button-group--border .radio-button-group__content .radio-button, .checkbox-group--border .checkbox-group__content .checkbox {
-  border: var(--f-border-width-medium, 2px) solid var(--f-border-color-grid, #8d8e91);
+  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
   margin-bottom: 0;
   width: 100%;
   cursor: pointer;
   border-bottom: none;
 }
 .radio-button-group--border .radio-button-group__content .radio-button:last-child, .checkbox-group--border .checkbox-group__content .checkbox:last-child {
-  border-bottom: var(--f-border-width-medium, 2px) solid var(--f-border-color-grid, #8d8e91);
+  border-bottom: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
 }
 .radio-button-group--border .radio-button-group__content .radio-button input:focus + label, .checkbox-group--border .checkbox-group__content .checkbox input:focus + label {
-  outline: 2px solid var(--f-border-color-grid, #8d8e91);
+  outline: 2px solid var(--fkds-color-border-primary, #8d8e91);
   outline-offset: -2px;
 }
 .radio-button-group--border .radio-button-group__content .radio-button input + label::after, .checkbox-group--border .checkbox-group__content .checkbox input + label::after {
@@ -2001,7 +2001,7 @@ input[type=search]:focus,
   width: var(--f-icon-size-medium, 1.25rem);
 }
 .checkbox__label::before {
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
   border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
   border-radius: var(--f-border-radius-small, 2px);
   cursor: pointer;
@@ -2009,7 +2009,7 @@ input[type=search]:focus,
   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: var(--fkds-color-text-inverted, #ffffff);
+  background-color: var(--fkds-color-text-inverted, #fff);
   opacity: 0;
   transition: opacity ease var(--f-animation-duration-medium, 350ms);
 }
@@ -2061,7 +2061,7 @@ input[type=search]:focus,
 }
 .checkbox input[type=checkbox]:focus + .checkbox__label {
   border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
   outline: 3px solid transparent;
 }
 
@@ -2094,7 +2094,7 @@ input[type=search]:focus,
   padding: 0.5rem 1rem;
   border-radius: 20px;
   border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
   color: var(--fkds-color-text-primary, #1b1e23);
   justify-content: center;
   max-width: 400px;
@@ -2121,7 +2121,7 @@ input[type=search]:focus,
 .radio-button-group--chip input[type=radio]:checked + .radio-button__label {
   background: var(--fkds-color-select-background-secondary-default, #35805b);
   border-color: transparent;
-  color: var(--fkds-color-text-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
 }
 @media (forced-colors: active) {
   .radio-button-group--chip input[type=radio]:checked + .radio-button__label {
@@ -2178,7 +2178,7 @@ input[type=search]:focus,
   padding: 0.5rem 1rem;
   border-radius: 20px;
   border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
   color: var(--fkds-color-text-primary, #1b1e23);
   justify-content: center;
   max-width: 400px;
@@ -2205,7 +2205,7 @@ input[type=search]:focus,
 .checkbox-group--chip input[type=checkbox]:checked + .checkbox__label {
   background: var(--fkds-color-select-background-secondary-default, #35805b);
   border-color: transparent;
-  color: var(--fkds-color-text-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
 }
 @media (forced-colors: active) {
   .checkbox-group--chip input[type=checkbox]:checked + .checkbox__label {
@@ -2250,10 +2250,10 @@ input[type=search]:focus,
 }
 
 .popup .popup__wrapper.combobox__listbox {
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
   border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
   border-radius: var(--f-border-radius-medium, 4px);
-  box-shadow: var(--f-box-modal-shadow, 0 0 20px rgba(0, 0, 0, 0.3));
+  box-shadow: var(--f-box-modal-shadow, 0 0 20px rgba(0,0,0,.3));
   margin-top: 4px;
   margin-bottom: 4px;
   padding: 2px;
@@ -2282,7 +2282,7 @@ input[type=search]:focus,
 }
 .calendar__year-selector__year--highlight, .combobox__listbox__option--highlight {
   background-color: var(--fkds-color-select-background-primary-default, #4a52b6);
-  color: var(--fkds-color-text-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
   font-weight: var(--f-font-weight-medium, 700);
 }
 @media (forced-colors: active) {
@@ -2306,7 +2306,7 @@ input[type=search]:focus,
 
 .contextmenu {
   min-width: 260px;
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
   color: var(--fkds-color-text-primary, #1b1e23);
 }
 .contextmenu__list {
@@ -2392,7 +2392,7 @@ input[type=search]:focus,
   margin-top: -16px;
   border-radius: var(--f-border-radius-medium, 4px);
   border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
 }
 .datepicker-field__close {
   display: flex;
@@ -2434,7 +2434,7 @@ input[type=search]:focus,
   border: 1px solid var(--fkds-color-border-primary, #8d8e91);
 }
 .dialogue-tree__list-item {
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
   border-bottom: 1px solid var(--fkds-color-border-primary, #8d8e91);
   padding: 0.25em;
   height: 60px;
@@ -2473,10 +2473,10 @@ input[type=search]:focus,
 
 .entrypoint {
   background-color: var(--fkds-color-action-background-primary-default, #4a52b6);
-  color: var(--fkds-color-action-text-inverted-default, #ffffff);
+  color: var(--fkds-color-action-text-inverted-default, #fff);
   border: var(--f-border-width-medium, 2px) solid transparent;
   border-radius: var(--f-border-radius-medium, 4px);
-  box-shadow: var(--f-button-shadow, 0 1px 3px rgba(0, 0, 0, 0.3));
+  box-shadow: var(--f-button-shadow, 0 1px 3px rgba(0,0,0,.3));
   font-size: var(--f-font-size-standard, 1rem);
   font-weight: var(--f-font-weight-medium, 700);
   transition: background-color var(--f-animation-duration-medium, 350ms) ease-out;
@@ -2610,7 +2610,7 @@ input[type=search]:focus,
 }
 .icon-stack--tooltip .f-icon-i,
 .icon--stack--tooltip .f-icon-i {
-  color: var(--fkds-color-text-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
 }
 .icon-stack--info .f-icon-circle,
 .icon--stack--info .f-icon-circle {
@@ -2703,7 +2703,7 @@ input[type=search]:focus,
 }
 .expandable-panel__icon {
   border-radius: 50%;
-  background-color: var(--f-icon-color-expandable-panel, #ffffff);
+  background-color: var(--f-icon-color-expandable-panel, #fff);
   width: var(--f-icon-size-medium, 1.25rem);
   height: var(--f-icon-size-medium, 1.25rem);
   margin-top: calc((var(--f-line-height-medium, 1.4) * 1em - var(--f-icon-size-medium, 1.25rem)) / 2);
@@ -2736,7 +2736,7 @@ input[type=search]:focus,
   background-color: var(--f-background-heading-expandable-panel, #116a3e);
   border: var(--f-expandable-panel-heading-border-close, none);
   border-radius: var(--f-expandable-panel-heading-border-radius, 4px 4px 0 0);
-  color: var(--f-text-color-heading-expandable-panel, #ffffff);
+  color: var(--f-text-color-heading-expandable-panel, #fff);
   cursor: pointer;
   display: flex;
   margin: 0;
@@ -2751,7 +2751,7 @@ input[type=search]:focus,
 .expandable-panel__notification {
   border-radius: 50%;
   background-color: var(--f-icon-color-notice, #d34503);
-  border: var(--f-border-width-medium, 2px) solid var(--f-icon-color-white, #ffffff);
+  border: var(--f-border-width-medium, 2px) solid var(--f-icon-color-white, #fff);
   width: var(--f-icon-size-x-large, 2rem);
   height: var(--f-icon-size-x-large, 2rem);
   display: inline-block;
@@ -2762,7 +2762,7 @@ input[type=search]:focus,
   line-height: 0;
 }
 .expandable-panel__notification svg {
-  color: var(--f-icon-color-white, #ffffff);
+  color: var(--f-icon-color-white, #fff);
   height: auto;
   width: auto;
 }
@@ -2772,7 +2772,7 @@ input[type=search]:focus,
   transition: height var(--f-animation-duration-medium, 350ms) ease-in;
 }
 .expandable-panel__body {
-  background-color: var(--f-background-expandable-panel, #ffffff);
+  background-color: var(--f-background-expandable-panel, #fff);
   border: var(--f-border-width-medium, 2px) solid var(--f-border-color-panel, #e7f0e9);
   border-top: 0;
   line-height: inherit;
@@ -2805,7 +2805,7 @@ input[type=search]:focus,
   margin-top: calc((var(--f-line-height-medium, 1.4) * 1em - var(--f-icon-size-small, 1rem)) / 2);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   display: flex;
-  color: var(--fkds-color-text-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
   padding: 3px;
   flex-shrink: 0;
   margin-right: 0.5rem;
@@ -2912,7 +2912,7 @@ input[type=search]:focus,
 }
 .file-item__separator {
   margin-bottom: 1.25rem;
-  border: var(--f-border-width-medium, 2px) solid var(--f-border-color-separator, #ddddde);
+  border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-weak, #ddddde);
 }
 
 .file-selector input[type=file] {
@@ -2927,7 +2927,7 @@ input[type=search]:focus,
 }
 .file-selector input[type=file]:focus + label {
   border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
   outline: 3px solid transparent;
 }
 .file-selector label {
@@ -3831,7 +3831,7 @@ input[type=search]:focus,
 .loader__circle {
   animation: bouncedelay 1.2s infinite ease-in-out;
   animation-fill-mode: both;
-  background-color: var(--f-icon-color-loader, #35805b);
+  background-color: var(--fkds-color-text-secondary, #5f6165);
   border-radius: 100%;
   height: 1rem;
   position: absolute;
@@ -3845,7 +3845,7 @@ input[type=search]:focus,
 }
 .loader--overlay .loader__backdrop {
   align-items: center;
-  background: var(--f-background-overlay, rgba(0, 0, 0, 0.75));
+  background: var(--f-background-overlay, rgba(0,0,0,.75));
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -3857,10 +3857,10 @@ input[type=search]:focus,
   z-index: 9999;
 }
 .loader--overlay .loader__wait-text {
-  color: var(--f-text-color-default-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
 }
 .loader--overlay .loader__circle {
-  background-color: var(--f-icon-color-white, #ffffff);
+  background-color: var(--fkds-color-text-inverted, #fff);
 }
 .loader .loader__spinner-1-circle2 {
   animation-delay: -0.9s;
@@ -4145,7 +4145,7 @@ input[type=search]:focus,
 }
 .message-box--banner {
   width: var(--f-width-full, 100%);
-  box-shadow: var(--f-box-modal-shadow, 0 0 20px rgba(0, 0, 0, 0.3));
+  box-shadow: var(--f-box-modal-shadow, 0 0 20px rgba(0,0,0,.3));
   border-collapse: separate;
   padding: calc(1rem * var(--f-density-factor, 1)) 1rem;
   border: var(--f-border-width-medium, 2px) solid;
@@ -4162,7 +4162,7 @@ input[type=search]:focus,
 }
 
 .modal__backdrop {
-  background: var(--f-background-overlay, rgba(0, 0, 0, 0.75));
+  background: var(--f-background-overlay, rgba(0,0,0,.75));
   display: flex;
   height: 100%;
   inset: 0;
@@ -4187,7 +4187,7 @@ input[type=search]:focus,
 .modal__shelf {
   justify-content: flex-end;
   display: flex;
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
   border-top-left-radius: var(--f-border-radius-medium, 4px);
   border-top-right-radius: var(--f-border-radius-medium, 4px);
   margin-bottom: 1rem;
@@ -4246,7 +4246,7 @@ input[type=search]:focus,
   }
 }
 .modal__dialog {
-  background: var(--fkds-color-background-primary, #ffffff);
+  background: var(--fkds-color-background-primary, #fff);
   outline: 2px solid transparent;
   border-radius: var(--f-border-radius-medium, 4px);
   display: flex;
@@ -4291,7 +4291,7 @@ input[type=search]:focus,
   background-color: var(--fkds-color-feedback-background-info-strong, #4a52b6);
 }
 .modal--information .modal__shelf .close-button {
-  color: var(--fkds-color-action-text-inverted-default, #ffffff);
+  color: var(--fkds-color-action-text-inverted-default, #fff);
 }
 .modal--warning .modal__shelf {
   background-color: var(--fkds-color-feedback-background-warning-strong, #ffbe10);
@@ -4300,7 +4300,7 @@ input[type=search]:focus,
   background-color: var(--fkds-color-feedback-background-negative-strong, #ca1515);
 }
 .modal--error .modal__shelf .close-button {
-  color: var(--fkds-color-action-text-inverted-default, #ffffff);
+  color: var(--fkds-color-action-text-inverted-default, #fff);
 }
 
 .imenu__list {
@@ -4398,7 +4398,7 @@ input[type=search]:focus,
 
 .offline {
   width: var(--f-width-full, 100%);
-  box-shadow: var(--f-box-modal-shadow, 0 0 20px rgba(0, 0, 0, 0.3));
+  box-shadow: var(--f-box-modal-shadow, 0 0 20px rgba(0,0,0,.3));
   border-collapse: separate;
   padding: calc(1rem * var(--f-density-factor, 1)) 1rem;
   border: var(--f-border-width-medium, 2px) solid;
@@ -4468,7 +4468,7 @@ input[type=search]:focus,
   display: flex;
   flex-direction: row;
   width: 100%;
-  color: var(--f-text-color-default-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
   background-color: var(--f-background-pageheader-primary, #116a3e);
   padding: 1rem 0 1rem 1rem;
   align-items: center;
@@ -4486,7 +4486,7 @@ input[type=search]:focus,
 }
 .page-header__logo::after {
   content: " ";
-  background-color: var(--f-border-color-separator-pageheader-primary, #ffffff);
+  background-color: var(--f-border-color-separator-pageheader-primary, #fff);
   height: 1.38rem;
   padding: 0.5px;
   margin: 0 1rem 0.155rem;
@@ -4496,7 +4496,7 @@ input[type=search]:focus,
   margin: 0;
   font-size: var(--f-font-size-h3, 1.375rem);
   font-weight: var(--f-font-weight-medium, 700);
-  color: var(--f-text-color-default-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -4517,7 +4517,7 @@ input[type=search]:focus,
 }
 
 .progress {
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
   border-radius: var(--f-border-radius-medium, 4px);
   height: var(--f-height-small, 0.75rem);
   margin-bottom: 1.5rem;
@@ -4597,14 +4597,14 @@ input[type=search]:focus,
   top: 0;
   cursor: pointer;
   width: var(--f-icon-size-medium, 1.25rem);
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
   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::after {
   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);
+  box-shadow: inset 0 0 0 var(--f-border-width-medium, 2px) var(--fkds-color-background-primary, #fff);
   opacity: 0;
 }
 @media (forced-colors: active) {
@@ -4644,7 +4644,7 @@ input[type=search]:focus,
 }
 .radio-button input[type=radio]:focus + label {
   border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
   outline: 3px solid transparent;
 }
 
@@ -4697,8 +4697,8 @@ input[type=search]:focus,
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background-color: var(--fkds-color-background-primary, #ffffff);
-  box-shadow: var(--f-input-shadow-inset, inset 0 2px 3px rgba(0, 0, 0, 0.1));
+  background-color: var(--fkds-color-background-primary, #fff);
+  box-shadow: var(--f-input-shadow-inset, inset 0 2px 3px rgba(0,0,0,.1));
   border-radius: var(--f-border-radius-medium, 4px);
   border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
   color: var(--fkds-color-text-primary, #1b1e23);
@@ -4711,7 +4711,7 @@ input[type=search]:focus,
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
 }
 .select-field__select:focus {
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
 }
 .select-field__select:disabled {
   border-color: var(--fkds-color-border-disabled, #8d8e91);
@@ -4766,7 +4766,7 @@ input[type=search]:focus,
   z-index: 1;
   /* In front of input field */
   width: 1.2rem;
-  color: var(--f-icon-color-sort-filter-dataset-search, #8d8e91);
+  color: var(--fkds-color-text-secondary, #5f6165);
 }
 @media (max-width: 639.98px) {
   .sort-filter-dataset__search__magnify-icon {
@@ -4778,7 +4778,7 @@ input[type=search]:focus,
   position: absolute;
   top: -0.75rem;
   right: 0;
-  color: var(--f-icon-color-sort-filter-dataset-close, #1b1e23);
+  color: var(--fkds-color-text-secondary, #5f6165);
   cursor: pointer;
   padding: 1rem;
 }
@@ -4823,7 +4823,7 @@ input[type=search]:focus,
 }
 
 .table tbody .table__expandable-row, .table tbody .table__row--normal, .table tbody .table__row {
-  background: var(--fkds-color-background-primary, #ffffff);
+  background: var(--fkds-color-background-primary, #fff);
   color: var(--fkds-color-text-primary, #1b1e23);
 }
 
@@ -5056,7 +5056,7 @@ input[type=search]:focus,
 }
 .table__button:active, .table__button:focus {
   border-radius: 0;
-  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
   outline: 3px solid transparent;
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: transparent;
@@ -5096,7 +5096,7 @@ input[type=search]:focus,
 }
 .table-ng caption {
   background: transparent;
-  color: var(--f-text-color-default, #1b1e23);
+  color: var(--fkds-color-text-primary, #1b1e23);
   font-size: var(--f-font-size-standard, 1rem);
   font-weight: var(--f-font-weight-medium, 700);
   line-height: var(--f-line-height-large, 1.5);
@@ -5105,10 +5105,10 @@ input[type=search]:focus,
   text-align: left;
 }
 .table-ng thead th {
-  background: var(--f-background-grid-header, #f4f4f4);
-  border-bottom: 2px solid var(--f-border-color-grid-header, #8d8e91);
-  border-right: 1px solid var(--f-border-color-grid, #8d8e91);
-  color: var(--f-text-color-default, #1b1e23);
+  background: var(--fkds-color-background-secondary, #f4f4f4);
+  border-bottom: 2px solid var(--fkds-color-border-primary, #8d8e91);
+  border-right: 1px solid var(--fkds-color-border-primary, #8d8e91);
+  color: var(--fkds-color-text-primary, #1b1e23);
   font-weight: var(--f-font-weight-medium, 700);
   line-height: var(--f-line-height-large, 1.5);
   padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
@@ -5119,20 +5119,20 @@ input[type=search]:focus,
   border-right: none;
 }
 .table-ng tbody .table-ng__row {
-  background: var(--f-background-grid-default, #ffffff);
-  color: var(--f-text-color-default, #1b1e23);
+  background: var(--fkds-color-background-primary, #fff);
+  color: var(--fkds-color-text-primary, #1b1e23);
 }
 .table-ng tbody .table-ng__row--empty {
   text-align: center;
 }
 .table-ng__column__description {
   background: transparent;
-  color: var(--f-text-color-discrete, #5f6165);
+  color: var(--fkds-color-text-secondary, #5f6165);
   font-weight: var(--f-font-weight-normal, 400);
 }
 .table-ng--striped tbody .table-ng__row:nth-child(even) {
-  background: var(--f-background-grid-striped, #f4f4f4);
-  color: var(--f-text-color-default, #1b1e23);
+  background: var(--fkds-color-background-secondary, #f4f4f4);
+  color: var(--fkds-color-text-primary, #1b1e23);
 }
 
 .table-ng__cell {
@@ -5272,13 +5272,13 @@ input[type=search]:focus,
   padding: calc(0.25rem * var(--f-density-factor, 1));
 }
 .table-ng__column__sort-icon {
-  color: var(--f-icon-color-table-header, #1b1e23);
+  color: var(--fkds-color-text-primary, #1b1e23);
   height: var(--f-icon-size-x-small, 0.75rem);
   width: var(--f-icon-size-x-small, 0.75rem);
   min-width: var(--f-icon-size-x-small, 0.75rem);
 }
 .table-ng__column__sort-icon--discrete {
-  color: var(--f-icon-color-table-header-discrete, #8d8e91);
+  color: var(--fkds-color-text-secondary, #5f6165);
 }
 
 .text-field {
@@ -5317,9 +5317,9 @@ input[type=search]:focus,
   gap: calc(0.5rem * var(--f-density-factor, 1));
 }
 .text-field__input {
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
   color: var(--fkds-color-text-primary, #1b1e23);
-  box-shadow: var(--f-input-shadow-inset, inset 0 2px 3px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--f-input-shadow-inset, inset 0 2px 3px rgba(0,0,0,.1));
   border-radius: var(--f-border-radius-medium, 4px);
   border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
   min-height: calc(var(--f-height-large, 2.5rem) * var(--f-density-factor, 1));
@@ -5420,9 +5420,9 @@ input[type=search]:focus,
   }
 }
 .textarea-field__textarea {
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
   color: var(--fkds-color-text-primary, #1b1e23);
-  box-shadow: var(--f-input-shadow-inset, inset 0 2px 3px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--f-input-shadow-inset, inset 0 2px 3px rgba(0,0,0,.1));
   border-radius: var(--f-border-radius-medium, 4px);
   border: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-primary, #8d8e91);
   box-sizing: border-box;
@@ -5681,7 +5681,7 @@ input[type=search]:focus,
 }
 .wizard-step--done .icon.f-icon-success {
   display: block;
-  color: var(--fkds-color-text-inverted, #ffffff);
+  color: var(--fkds-color-text-inverted, #fff);
   width: 20px;
   height: auto;
 }
@@ -5697,7 +5697,7 @@ input[type=search]:focus,
 }
 .wizard-step--pending .wizard-step__icon-container__circle {
   border: 2px solid var(--fkds-color-border-strong, #5f6165);
-  background-color: var(--fkds-color-background-primary, #ffffff);
+  background-color: var(--fkds-color-background-primary, #fff);
   color: var(--fkds-color-text-primary, #1b1e23);
 }
 @media (forced-colors: active) {
@@ -5775,7 +5775,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 #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
+  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff);
 }
 
 .calendar-navbar__year-selector-button--title, .calendar-navbar__month--title {
@@ -5818,13 +5818,13 @@ input[type=search]:focus,
   text-underline-offset: 3.5px;
 }
 .calendar-navbar__icon {
-  color: var(--fkds-color-action-text-inverted-default, #ffffff);
+  color: var(--fkds-color-action-text-inverted-default, #fff);
   background-color: var(--fkds-color-action-background-primary-default, #4a52b6);
   width: var(--f-icon-size-large, 1.5rem);
   height: var(--f-icon-size-large, 1.5rem);
   padding: 5px;
   border-radius: 50%;
-  box-shadow: var(--f-button-shadow, 0 1px 3px rgba(0, 0, 0, 0.3));
+  box-shadow: var(--f-button-shadow, 0 1px 3px rgba(0,0,0,.3));
 }
 .calendar-navbar__icon--disabled {
   color: var(--fkds-color-text-disabled, #8d8e91);
@@ -6063,7 +6063,7 @@ input[type=search]:focus,
 }
 
 .ipopupmenu {
-  background-color: var(--f-background-popupmenu, #ffffff);
+  background-color: var(--f-background-popupmenu, #fff);
 }
 .ipopupmenu__list {
   margin: 0;
@@ -6110,7 +6110,7 @@ input[type=search]:focus,
   border-radius: var(--f-border-radius-small, 2px);
   position: absolute;
   z-index: 9996;
-  box-shadow: var(--f-box-modal-shadow, 0 0 20px rgba(0, 0, 0, 0.3));
+  box-shadow: var(--f-box-modal-shadow, 0 0 20px rgba(0,0,0,.3));
 }
 .popup--inline {
   position: static;