@fkui/design 6.16.0 → 6.17.0

package/lib/fkui.css

@@ -1302,10 +1302,7 @@ input[type=search]:focus,
 }
 .button--text--black {
   /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
-  color: var(--f-text-color-default, #1b1e23);
-}
-.button--text--black > .button__icon {
-  color: var(--f-icon-color-black, #1b1e23);
+  color: var(--fkds-color-action-text-secondary-default, #1b1e23);
 }
 
 .button, .calendar-navbar__year-selector-button {
@@ -1313,13 +1310,13 @@ input[type=search]:focus,
   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));
-  color: var(--f-text-color-button-standard, #4a52b6);
+  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);
 }
 .button:hover, .calendar-navbar__year-selector-button:hover {
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
-  color: var(--f-text-color-button-standard, #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));
 }
 .button:active, .calendar-navbar__year-selector-button:active, .button:focus, .calendar-navbar__year-selector-button:focus {
@@ -1328,7 +1325,7 @@ input[type=search]:focus,
   outline: 2px solid transparent;
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
   border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
-  color: var(--f-text-color-button-standard, #4a52b6);
+  color: var(--fkds-color-action-text-primary-default, #4a52b6);
 }
 .button.disabled, .disabled.calendar-navbar__year-selector-button, .button.disabled:hover, .button:disabled, .calendar-navbar__year-selector-button:disabled, .button:disabled:hover, .button.button--disabled, .button--disabled.calendar-navbar__year-selector-button, .button.button--disabled:hover {
   background-color: var(--fkds-color-background-disabled, #f4f4f4);
@@ -1399,7 +1396,7 @@ input[type=search]:focus,
   border-color: transparent;
   border-width: 0;
   box-shadow: none;
-  color: var(--f-text-color-button-discrete, #4a52b6);
+  color: var(--fkds-color-action-text-primary-default, #4a52b6);
   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 {
@@ -1419,7 +1416,7 @@ input[type=search]:focus,
 .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;
   border-color: transparent;
-  color: var(--f-text-color-button-discrete-disabled, #8d8e91);
+  color: var(--fkds-color-text-disabled, #8d8e91);
 }
 @media (max-width: 639.98px) {
   .button.button--discrete, .button--discrete.calendar-navbar__year-selector-button, .button.button--text, .button--text.calendar-navbar__year-selector-button {
@@ -1433,10 +1430,7 @@ input[type=search]:focus,
   padding-bottom: calc(var(--f-button-discrete-black-padding-bottom, initial) * var(--f-density-factor, 1));
   padding-left: var(--f-button-discrete-black-padding-left, initial);
   /* stylelint-enable declaration-block-no-redundant-longhand-properties */
-  color: var(--f-text-color-default, #1b1e23);
-}
-.button.button--discrete--black > .button__icon, .button--discrete--black.calendar-navbar__year-selector-button > .button__icon, .button.button--text--black > .button__icon, .button--text--black.calendar-navbar__year-selector-button > .button__icon {
-  color: var(--f-icon-color-black, #1b1e23);
+  color: var(--fkds-color-action-text-secondary-default, #1b1e23);
 }
 .button.button--discrete:hover, .button--discrete.calendar-navbar__year-selector-button:hover, .button.button--text:hover, .button--text.calendar-navbar__year-selector-button:hover {
   box-shadow: none;
@@ -1461,7 +1455,7 @@ input[type=search]:focus,
   border-color: transparent;
   border-width: 0;
   box-shadow: none;
-  color: var(--f-text-color-button-discrete-inverted, #ffffff);
+  color: var(--fkds-color-action-text-inverted-default, #ffffff);
   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 {
@@ -1481,7 +1475,7 @@ input[type=search]:focus,
 .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;
   border-color: transparent;
-  color: var(--f-text-color-button-discrete-inverted-disabled, #e5e5f5);
+  color: var(--fkds-color-text-disabled, #8d8e91);
 }
 @media (max-width: 639.98px) {
   .button.button--discrete-inverted, .button--discrete-inverted.calendar-navbar__year-selector-button {
@@ -1533,6 +1527,9 @@ input[type=search]:focus,
 .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 {
   color: var(--fkds-color-action-text-secondary-default, #1b1e23);
 }
+.button.button--tertiary:disabled, .calendar-navbar__year-selector-button:disabled {
+  border: none;
+}
 .button.button--tertiary--inverted, .button--tertiary--inverted.calendar-navbar__year-selector-button {
   color: var(--fkds-color-action-text-inverted-default, #ffffff);
 }
@@ -1542,6 +1539,7 @@ input[type=search]:focus,
 }
 .button.button--tertiary--inverted:disabled, .button--tertiary--inverted.calendar-navbar__year-selector-button:disabled {
   color: var(--fkds-color-text-disabled, #8d8e91);
+  border: none;
   border-width: 0;
   background-color: transparent;
 }
@@ -1656,6 +1654,7 @@ input[type=search]:focus,
   justify-content: center;
   height: 2.75rem;
   width: 100%;
+  color: var(--fkds-color-text-primary, #1b1e23);
 }
 .calendar-day--highlight {
   position: relative;
@@ -1709,6 +1708,7 @@ input[type=search]:focus,
 }
 .calendar-day:hover:not(.calendar-day--disabled, .calendar-day--selected), .calendar-day--hover:not(.calendar-day--disabled, .calendar-day--selected) {
   background-color: var(--fkds-color-select-background-primary-hover, #e5e5f5);
+  color: var(--fkds-color-text-primary, #1b1e23);
 }
 .calendar-day:active:not(.calendar-day--disabled), .calendar-day--active:not(.calendar-day--disabled) {
   color: var(--fkds-color-text-inverted, #ffffff);
@@ -1757,7 +1757,7 @@ input[type=search]:focus,
   margin-bottom: 0 !important;
 }
 .card__error-message {
-  color: var(--f-text-color-error, #d23838);
+  color: var(--fkds-color-feedback-text-negative, #ca1515);
 }
 
 .list__item {
@@ -2118,7 +2118,7 @@ input[type=search]:focus,
   align-items: center;
   background: inherit;
   border: none;
-  color: var(--f-text-color-close-button, #1b1e23);
+  color: var(--fkds-color-action-text-secondary-default, #1b1e23);
   cursor: pointer;
   display: flex;
   font-weight: 700;
@@ -2156,7 +2156,7 @@ input[type=search]:focus,
   background-color: var(--fkds-color-select-background-primary-hover, #e5e5f5);
   color: var(--fkds-color-text-primary, #1b1e23);
 }
-.calendar__year-selector__year--highlight {
+.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);
   font-weight: var(--f-font-weight-medium, 700);
@@ -2175,11 +2175,12 @@ input[type=search]:focus,
 
 .contextmenu {
   min-width: 260px;
-  background-color: var(--f-background-popupmenu, #ffffff);
+  background-color: var(--fkds-color-background-primary, #ffffff);
+  color: var(--fkds-color-text-primary, #1b1e23);
 }
 .contextmenu__list {
   margin: 0;
-  border: 1px solid var(--f-border-color-popupmenu, #ddddde);
+  border: var(--f-border-width-small, 1px) solid var(--fkds-color-border-primary, #8d8e91);
   padding: 0.5rem;
   display: block;
   list-style-type: none;
@@ -2194,11 +2195,11 @@ input[type=search]:focus,
 .contextmenu__list__item a,
 .contextmenu__list__item a:visited,
 .contextmenu__list__item a:active {
-  color: var(--f-text-color-popupmenu, #1b1e23);
+  color: var(--fkds-color-text-primary, #1b1e23);
 }
 .contextmenu__list__item:hover {
-  color: var(--f-text-color-popupmenu-hover, #1b1e23);
-  background-color: var(--f-background-popupmenu-vertical-hover, #ddddde);
+  color: var(--fkds-color-text-primary, #1b1e23);
+  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
 }
 @media (min-width: 640px) {
   .contextmenu__list__item {
@@ -2209,7 +2210,7 @@ input[type=search]:focus,
   margin: 0.75rem;
   height: 1px;
   border: none;
-  border-top: 1px solid var(--f-border-color-separator-contextmenu, #8d8e91);
+  border-top: var(--f-border-width-small, 1px) solid var(--fkds-color-border-primary, #8d8e91);
 }
 .contextmenu__lefticon {
   margin-right: 0.75rem;
@@ -2765,9 +2766,6 @@ input[type=search]:focus,
   border: var(--f-border-width-medium, 2px) solid var(--f-border-color-separator, #ddddde);
 }
 
-.file-selector svg {
-  color: var(--f-icon-color-primary, #4a52b6);
-}
 .file-selector input[type=file] {
   position: absolute;
   width: 1px;
@@ -3815,6 +3813,7 @@ input[type=search]:focus,
 .message-box {
   padding: calc(1.5rem * var(--f-density-factor, 1)) 1.5rem;
   margin: 0.5rem 0 calc(2rem * var(--f-density-factor, 1)) 0;
+  color: var(--fkds-color-text-primary, #1b1e23);
 }
 .message-box__heading {
   font-size: var(--f-font-size-h3, 1.375rem);
@@ -5254,6 +5253,7 @@ input[type=search]:focus,
   font-size: 1.25rem;
   font-weight: bold;
   text-align: center;
+  color: var(--fkds-color-text-primary, #1b1e23);
   transition: background-color 400ms ease-out, border-color 400ms ease-out, opacity 400ms ease-out;
 }
 @media (max-width: 639.98px) {
@@ -5323,12 +5323,11 @@ input[type=search]:focus,
 }
 .wizard-step--done .wizard-step__header__title .anchor {
   color: var(--fkds-color-feedback-text-positive, #35805b);
-  text-decoration-color: var(--fkds-color-feedback-text-positive, #35805b);
+  text-decoration-color: currentcolor;
   text-decoration-thickness: 2px;
   text-underline-offset: 0.25em;
 }
 .wizard-step--done .wizard-step__header__title .anchor:hover {
-  text-decoration-color: var(--fkds-color-feedback-text-positive, #35805b);
   text-decoration-thickness: 3px;
   text-underline-offset: 0.25em;
 }
@@ -5339,19 +5338,19 @@ input[type=search]:focus,
   height: auto;
 }
 .wizard-step--done .wizard-step__icon-container__circle {
-  background-color: var(--f-icon-color-wizard-step-done, #35805b);
-  border-color: var(--f-icon-color-wizard-step-done, #35805b);
+  background-color: var(--fkds-color-feedback-background-positive-strong, #35805b);
+  border-color: var(--fkds-color-feedback-border-positive, #35805b);
 }
 .wizard-step--done .wizard-step__icon-container__number {
   display: none;
 }
 .wizard-step--pending .wizard-step__header__title {
-  color: var(--f-text-color-discrete, #5f6165);
+  color: var(--fkds-color-text-primary, #1b1e23);
 }
 .wizard-step--pending .wizard-step__icon-container__circle {
   border: 2px solid var(--fkds-color-border-strong, #5f6165);
-  background-color: var(--fkds-color-background-disabled, #f4f4f4);
-  color: var(--f-icon-color-discrete, #5f6165);
+  background-color: var(--fkds-color-background-primary, #ffffff);
+  color: var(--fkds-color-text-primary, #1b1e23);
 }
 @media (forced-colors: active) {
   .wizard-step .icon.f-icon-success {
@@ -5443,6 +5442,7 @@ input[type=search]:focus,
   align-items: center;
   text-align: center;
   border-bottom: var(--f-border-width-medium, 2px) solid var(--fkds-color-border-weak, #ddddde);
+  color: var(--fkds-color-text-primary, #1b1e23);
   padding: 1rem;
   gap: 1rem;
   margin-bottom: 0.75rem;
@@ -5648,7 +5648,7 @@ input[type=search]:focus,
   display: flex;
   justify-content: space-between;
   padding: 0.5em 10px;
-  background: var(--f-border-color-error, #ca1515);
+  background: var(--fkds-icon-color-feedback-border-negative, #ca1515);
   line-height: 24px;
   position: relative;
 }
@@ -5666,51 +5666,51 @@ input[type=search]:focus,
   inset: 0;
   padding: var(--f-border-width-medium, 2px);
   border-radius: inherit;
-  background: var(--f-background-error, #fcf3f3) content-box;
+  background: var(--fkds-icon-color-feedback-background-negative, #fcf3f3) content-box;
 }
 .popup-error--top {
   border-radius: min(5.7735026919px, 100% - var(--i-popup-error-offset, 24px) - 60deg) min(5.7735026919px, 100% - (100% - var(--i-popup-error-offset, 24px)) - 60deg) 5.7735026919px 5.7735026919px/5.7735026919px;
-  -o-border-image: conic-gradient(var(--f-border-color-error, #ca1515) 0 0) 0/0 max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/10px 0 0 0;
-     border-image: conic-gradient(var(--f-border-color-error, #ca1515) 0 0) fill 0/0 max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/10px 0 0 0;
+  -o-border-image: conic-gradient(var(--fkds-icon-color-feedback-border-negative, #ca1515) 0 0) 0/0 max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/10px 0 0 0;
+     border-image: conic-gradient(var(--fkds-icon-color-feedback-border-negative, #ca1515) 0 0) fill 0/0 max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/10px 0 0 0;
   clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, min(100%, 100% - var(--i-popup-error-offset, 24px) + 5.7735026919px) 0, calc(100% - var(--i-popup-error-offset, 24px)) -10px, max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0);
 }
 .popup-error--bottom {
   border-radius: 5.7735026919px 5.7735026919px min(5.7735026919px, 100% - (100% - var(--i-popup-error-offset, 24px)) - 60deg) min(5.7735026919px, 100% - var(--i-popup-error-offset, 24px) - 60deg)/5.7735026919px;
-  -o-border-image: conic-gradient(var(--f-border-color-error, #ca1515) 0 0) 0/0.2em max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0 max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/0 0 10px 0;
-     border-image: conic-gradient(var(--f-border-color-error, #ca1515) 0 0) fill 0/0.2em max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0 max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/0 0 10px 0;
+  -o-border-image: conic-gradient(var(--fkds-icon-color-feedback-border-negative, #ca1515) 0 0) 0/0.2em max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0 max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/0 0 10px 0;
+     border-image: conic-gradient(var(--fkds-icon-color-feedback-border-negative, #ca1515) 0 0) fill 0/0.2em max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0 max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/0 0 10px 0;
   clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%, min(100%, 100% - var(--i-popup-error-offset, 24px) + 5.7735026919px) 100%, calc(100% - var(--i-popup-error-offset, 24px)) calc(100% + 10px), max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 100%);
 }
 .popup-error--left {
   border-radius: 5.7735026919px/min(5.7735026919px, 100% - var(--i-popup-error-offset, 24px) - 60deg) 5.7735026919px 5.7735026919px min(5.7735026919px, 100% - (100% - var(--i-popup-error-offset, 24px)) - 60deg);
-  -o-border-image: conic-gradient(var(--f-border-color-error, #ca1515) 0 0) 0/max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0.2em max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0/0 0 0 10px;
-     border-image: conic-gradient(var(--f-border-color-error, #ca1515) 0 0) fill 0/max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0.2em max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0/0 0 0 10px;
+  -o-border-image: conic-gradient(var(--fkds-icon-color-feedback-border-negative, #ca1515) 0 0) 0/max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0.2em max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0/0 0 0 10px;
+     border-image: conic-gradient(var(--fkds-icon-color-feedback-border-negative, #ca1515) 0 0) fill 0/max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0.2em max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0/0 0 0 10px;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 min(100%, 100% - var(--i-popup-error-offset, 24px) + 5.7735026919px), -10px calc(100% - var(--i-popup-error-offset, 24px)), 0 max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px));
 }
 .popup-error--right {
   border-radius: 5.7735026919px/5.7735026919px min(5.7735026919px, 100% - var(--i-popup-error-offset, 24px) - 60deg) min(5.7735026919px, 100% - (100% - var(--i-popup-error-offset, 24px)) - 60deg) 5.7735026919px;
-  -o-border-image: conic-gradient(var(--f-border-color-error, #ca1515) 0 0) 0/max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0 max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em/0 10px 0 0;
-     border-image: conic-gradient(var(--f-border-color-error, #ca1515) 0 0) fill 0/max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0 max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em/0 10px 0 0;
+  -o-border-image: conic-gradient(var(--fkds-icon-color-feedback-border-negative, #ca1515) 0 0) 0/max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0 max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em/0 10px 0 0;
+     border-image: conic-gradient(var(--fkds-icon-color-feedback-border-negative, #ca1515) 0 0) fill 0/max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0 max(0%, 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em/0 10px 0 0;
   clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%, 100% min(100%, 100% - var(--i-popup-error-offset, 24px) + 5.7735026919px), calc(100% + 10px) calc(100% - var(--i-popup-error-offset, 24px)), 100% max(0%, 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px));
 }
 .popup-error--top::before {
   clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, min(100% - var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) + 5.7735026919px - var(--f-border-width-medium, 2px) * 0.5773502692) var(--f-border-width-medium, 2px), calc(100% - var(--i-popup-error-offset, 24px)) calc(var(--f-border-width-medium, 2px) / 0.5 - 10px), max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px + var(--f-border-width-medium, 2px) * 0.5773502692) var(--f-border-width-medium, 2px));
-  -o-border-image: conic-gradient(var(--f-background-error, #fcf3f3) 0 0) 0/0 max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/10px 0 0 0;
-     border-image: conic-gradient(var(--f-background-error, #fcf3f3) 0 0) fill 0/0 max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/10px 0 0 0;
+  -o-border-image: conic-gradient(var(--fkds-icon-color-feedback-background-negative, #fcf3f3) 0 0) 0/0 max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/10px 0 0 0;
+     border-image: conic-gradient(var(--fkds-icon-color-feedback-background-negative, #fcf3f3) 0 0) fill 0/0 max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/10px 0 0 0;
 }
 .popup-error--bottom::before {
   clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%, min(100% - var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) + 5.7735026919px - var(--f-border-width-medium, 2px) * 0.5773502692) calc(100% - var(--f-border-width-medium, 2px)), calc(100% - var(--i-popup-error-offset, 24px)) calc(100% + 10px - var(--f-border-width-medium, 2px) / 0.5), max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px + var(--f-border-width-medium, 2px) * 0.5773502692) calc(100% - var(--f-border-width-medium, 2px)));
-  -o-border-image: conic-gradient(var(--f-background-error, #fcf3f3) 0 0) 0/0.2em max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0 max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/0 0 10px 0;
-     border-image: conic-gradient(var(--f-background-error, #fcf3f3) 0 0) fill 0/0.2em max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0 max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/0 0 10px 0;
+  -o-border-image: conic-gradient(var(--fkds-icon-color-feedback-background-negative, #fcf3f3) 0 0) 0/0.2em max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0 max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/0 0 10px 0;
+     border-image: conic-gradient(var(--fkds-icon-color-feedback-background-negative, #fcf3f3) 0 0) fill 0/0.2em max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0 max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px)/0 0 10px 0;
 }
 .popup-error--left::before {
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--f-border-width-medium, 2px) min(100% - var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) + 5.7735026919px - var(--f-border-width-medium, 2px) * 0.5773502692), calc(var(--f-border-width-medium, 2px) / 0.5 - 10px) calc(100% - var(--i-popup-error-offset, 24px)), var(--f-border-width-medium, 2px) max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px + var(--f-border-width-medium, 2px) * 0.5773502692));
-  -o-border-image: conic-gradient(var(--f-background-error, #fcf3f3) 0 0) 0/max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0.2em max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0/0 0 0 10px;
-     border-image: conic-gradient(var(--f-background-error, #fcf3f3) 0 0) fill 0/max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0.2em max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0/0 0 0 10px;
+  -o-border-image: conic-gradient(var(--fkds-icon-color-feedback-background-negative, #fcf3f3) 0 0) 0/max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0.2em max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0/0 0 0 10px;
+     border-image: conic-gradient(var(--fkds-icon-color-feedback-background-negative, #fcf3f3) 0 0) fill 0/max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0.2em max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0/0 0 0 10px;
 }
 .popup-error--right::before {
   clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%, calc(100% - var(--f-border-width-medium, 2px)) min(100% - var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) + 5.7735026919px - var(--f-border-width-medium, 2px) * 0.5773502692), calc(100% + 10px - var(--f-border-width-medium, 2px) / 0.5) calc(100% - var(--i-popup-error-offset, 24px)), calc(100% - var(--f-border-width-medium, 2px)) max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px + var(--f-border-width-medium, 2px) * 0.5773502692));
-  -o-border-image: conic-gradient(var(--f-background-error, #fcf3f3) 0 0) 0/max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0 max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em/0 10px 0 0;
-     border-image: conic-gradient(var(--f-background-error, #fcf3f3) 0 0) fill 0/max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0 max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em/0 10px 0 0;
+  -o-border-image: conic-gradient(var(--fkds-icon-color-feedback-background-negative, #fcf3f3) 0 0) 0/max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0 max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em/0 10px 0 0;
+     border-image: conic-gradient(var(--fkds-icon-color-feedback-background-negative, #fcf3f3) 0 0) fill 0/max(var(--f-border-width-medium, 2px), 100% - var(--i-popup-error-offset, 24px) - 5.7735026919px) 0 max(var(--f-border-width-medium, 2px), 100% - (100% - var(--i-popup-error-offset, 24px)) - 5.7735026919px) 0.2em/0 10px 0 0;
 }
 
 .ipopupmenu {