@fkui/design 6.0.1 → 6.2.0

package/lib/fkui.css

@@ -1144,8 +1144,8 @@ input[type=search]:focus,
 
 .icon-stack--tooltip .f-icon-circle,
 .icon--stack--tooltip .f-icon-circle {
-  color: var(--f-icon-color-info, #4a52b6);
   fill: var(--f-icon-color-info, #4a52b6);
+  color: var(--f-icon-color-info, #4a52b6);
 }
 .icon-stack--tooltip .f-icon-i,
 .icon--stack--tooltip .f-icon-i {
@@ -1153,23 +1153,23 @@ input[type=search]:focus,
 }
 .icon-stack--info .f-icon-circle,
 .icon--stack--info .f-icon-circle {
-  color: var(--f-icon-color-white, #ffffff);
-  fill: var(--f-icon-color-info, #4a52b6);
+  color: var(--fkds-icon-color-feedback-background-info, #f5f6fa);
+  fill: var(--fkds-icon-color-feedback-border-info, #4a52b6);
 }
 .icon-stack--warning .f-icon-circle,
 .icon--stack--warning .f-icon-circle {
-  color: var(--f-icon-color-white, #ffffff);
-  fill: var(--f-icon-color-warning, #ffbe10);
+  color: var(--fkds-icon-color-feedback-background-warning, #fffcf3);
+  fill: var(--fkds-icon-color-feedback-border-warning, #ffbe10);
 }
 .icon-stack--error .f-icon-triangle,
 .icon--stack--error .f-icon-triangle {
-  color: var(--f-icon-color-white, #ffffff);
-  fill: var(--f-icon-color-error, #ca1515);
+  color: var(--fkds-icon-color-feedback-background-negative, #fcf3f3);
+  fill: var(--fkds-icon-color-feedback-border-negative, #ca1515);
 }
 .icon-stack--success .f-icon-circle,
 .icon--stack--success .f-icon-circle {
-  color: var(--f-icon-color-white, #ffffff);
-  fill: var(--f-icon-color-success, #35805b);
+  color: var(--fkds-icon-color-feedback-background-positive, #f3f8f5);
+  fill: var(--fkds-icon-color-feedback-border-positive, #35805b);
 }
 .icon-stack--success .f-icon-success,
 .icon--stack--success .f-icon-success {
@@ -4536,7 +4536,7 @@ input[type=search]:focus,
 .message-box__heading {
   font-size: var(--f-font-size-h3, 1.375rem);
   font-weight: var(--f-font-weight-medium, 700);
-  color: var(--f-text-color-default, #1b1e23);
+  color: var(--fkds-color-text-primary, #1b1e23);
   line-height: var(--f-line-height-medium, 1.4);
   align-items: flex-start;
   margin-bottom: calc(0.5rem * var(--f-density-factor, 1));
@@ -4549,20 +4549,20 @@ input[type=search]:focus,
 }
 .message-box--info {
   border: var(--f-border-width-medium, 2px) solid;
-  border-color: var(--f-border-color-info, #4a52b6);
-  background-color: var(--f-background-info, #f5f6fa);
+  border-color: var(--fkds-color-feedback-border-info, #4a52b6);
+  background-color: var(--fkds-color-feedback-background-info, #f5f6fa);
   border-radius: var(--f-border-radius-small, 2px);
-  border-top: 1rem solid var(--f-border-color-info, #4a52b6);
+  border-top: 1rem solid var(--fkds-color-feedback-border-info, #4a52b6);
 }
 .message-box--info .iflex__item > p {
   margin-bottom: 0;
 }
 .message-box--info-short {
   border: var(--f-border-width-medium, 2px) solid;
-  border-color: var(--f-border-color-info, #4a52b6);
-  background-color: var(--f-background-info, #f5f6fa);
+  border-color: var(--fkds-color-feedback-border-info, #4a52b6);
+  background-color: var(--fkds-color-feedback-background-info, #f5f6fa);
   border-radius: var(--f-border-radius-small, 2px);
-  border-left: 1rem solid var(--f-border-color-info, #4a52b6);
+  border-left: 1rem solid var(--fkds-color-feedback-border-info, #4a52b6);
 }
 .message-box--info-short .message-box__icon {
   font-size: 0;
@@ -4579,7 +4579,7 @@ input[type=search]:focus,
   transform: translateY(-0.05rem);
 }
 .message-box--info-short .message-box__icon .icon__banner {
-  fill: var(--f-icon-color-error, #ca1515);
+  fill: var(--fkds-icon-color-feedback-content-negative, #1b1e23);
   color: white;
 }
 .message-box--info-short .message-box__icon__banner {
@@ -4590,20 +4590,20 @@ input[type=search]:focus,
 }
 .message-box--error {
   border: var(--f-border-width-medium, 2px) solid;
-  border-color: var(--f-border-color-error, #ca1515);
-  background-color: var(--f-background-error, #fcf3f3);
+  border-color: var(--fkds-color-feedback-border-negative, #ca1515);
+  background-color: var(--fkds-color-feedback-background-negative, #fcf3f3);
   border-radius: var(--f-border-radius-small, 2px);
-  border-top: 1rem solid var(--f-border-color-error, #ca1515);
+  border-top: 1rem solid var(--fkds-color-feedback-border-negative, #ca1515);
 }
 .message-box--error .iflex__item > p {
   margin-bottom: 0;
 }
 .message-box--error-short {
   border: var(--f-border-width-medium, 2px) solid;
-  border-color: var(--f-border-color-error, #ca1515);
-  background-color: var(--f-background-error, #fcf3f3);
+  border-color: var(--fkds-color-feedback-border-negative, #ca1515);
+  background-color: var(--fkds-color-feedback-background-negative, #fcf3f3);
   border-radius: var(--f-border-radius-small, 2px);
-  border-left: 1rem solid var(--f-border-color-error, #ca1515);
+  border-left: 1rem solid var(--fkds-color-feedback-border-negative, #ca1515);
 }
 .message-box--error-short .message-box__icon {
   font-size: 0;
@@ -4620,7 +4620,7 @@ input[type=search]:focus,
   transform: translateY(-0.05rem);
 }
 .message-box--error-short .message-box__icon .icon__banner {
-  fill: var(--f-icon-color-error, #ca1515);
+  fill: var(--fkds-icon-color-feedback-content-negative, #1b1e23);
   color: white;
 }
 .message-box--error-short .message-box__icon__banner {
@@ -4631,20 +4631,20 @@ input[type=search]:focus,
 }
 .message-box--warning {
   border: var(--f-border-width-medium, 2px) solid;
-  border-color: var(--f-border-color-warning, #ffbe10);
-  background-color: var(--f-background-warning, #fffcf3);
+  border-color: var(--fkds-color-feedback-border-warning, #ffbe10);
+  background-color: var(--fkds-color-feedback-background-warning, #fffcf3);
   border-radius: var(--f-border-radius-small, 2px);
-  border-top: 1rem solid var(--f-border-color-warning, #ffbe10);
+  border-top: 1rem solid var(--fkds-color-feedback-border-warning, #ffbe10);
 }
 .message-box--warning .iflex__item > p {
   margin-bottom: 0;
 }
 .message-box--warning-short {
   border: var(--f-border-width-medium, 2px) solid;
-  border-color: var(--f-border-color-warning, #ffbe10);
-  background-color: var(--f-background-warning, #fffcf3);
+  border-color: var(--fkds-color-feedback-border-warning, #ffbe10);
+  background-color: var(--fkds-color-feedback-background-warning, #fffcf3);
   border-radius: var(--f-border-radius-small, 2px);
-  border-left: 1rem solid var(--f-border-color-warning, #ffbe10);
+  border-left: 1rem solid var(--fkds-color-feedback-border-warning, #ffbe10);
 }
 .message-box--warning-short .message-box__icon {
   font-size: 0;
@@ -4661,7 +4661,7 @@ input[type=search]:focus,
   transform: translateY(-0.05rem);
 }
 .message-box--warning-short .message-box__icon .icon__banner {
-  fill: var(--f-icon-color-error, #ca1515);
+  fill: var(--fkds-icon-color-feedback-content-negative, #1b1e23);
   color: white;
 }
 .message-box--warning-short .message-box__icon__banner {
@@ -4672,20 +4672,20 @@ input[type=search]:focus,
 }
 .message-box--success {
   border: var(--f-border-width-medium, 2px) solid;
-  border-color: var(--f-border-color-success, #35805b);
-  background-color: var(--f-background-success, #f3f8f5);
+  border-color: var(--fkds-color-feedback-border-positive, #35805b);
+  background-color: var(--fkds-color-feedback-background-positive, #f3f8f5);
   border-radius: var(--f-border-radius-small, 2px);
-  border-top: 1rem solid var(--f-border-color-success, #35805b);
+  border-top: 1rem solid var(--fkds-color-feedback-border-positive, #35805b);
 }
 .message-box--success .iflex__item > p {
   margin-bottom: 0;
 }
 .message-box--success-short {
   border: var(--f-border-width-medium, 2px) solid;
-  border-color: var(--f-border-color-success, #35805b);
-  background-color: var(--f-background-success, #f3f8f5);
+  border-color: var(--fkds-color-feedback-border-positive, #35805b);
+  background-color: var(--fkds-color-feedback-background-positive, #f3f8f5);
   border-radius: var(--f-border-radius-small, 2px);
-  border-left: 1rem solid var(--f-border-color-success, #35805b);
+  border-left: 1rem solid var(--fkds-color-feedback-border-positive, #35805b);
 }
 .message-box--success-short .message-box__icon {
   font-size: 0;
@@ -4702,7 +4702,7 @@ input[type=search]:focus,
   transform: translateY(-0.05rem);
 }
 .message-box--success-short .message-box__icon .icon__banner {
-  fill: var(--f-icon-color-error, #ca1515);
+  fill: var(--fkds-icon-color-feedback-content-negative, #1b1e23);
   color: white;
 }
 .message-box--success-short .message-box__icon__banner {
@@ -4717,10 +4717,10 @@ input[type=search]:focus,
   border-collapse: separate;
   padding: calc(1rem * var(--f-density-factor, 1)) 1rem;
   border: var(--f-border-width-medium, 2px) solid;
-  border-color: var(--f-border-color-error, #ca1515);
-  background-color: var(--f-background-error, #fcf3f3);
+  border-color: var(--fkds-color-feedback-border-negative, #ca1515);
+  background-color: var(--fkds-color-feedback-background-negative, #fcf3f3);
   border-radius: var(--f-border-radius-small, 2px);
-  border-top: 1rem solid var(--f-border-color-error, #ca1515);
+  border-top: 1rem solid var(--fkds-color-feedback-border-negative, #ca1515);
 }
 .message-box--banner .iflex__item > p {
   margin-bottom: 0;
@@ -4762,7 +4762,7 @@ input[type=search]:focus,
 .modal__shelf {
   justify-content: flex-end;
   display: flex;
-  background-color: var(--f-background-modal-shelf, #ffffff);
+  background-color: var(--fkds-color-background-primary, #ffffff);
   border-top-left-radius: var(--f-border-radius-medium, 4px);
   border-top-right-radius: var(--f-border-radius-medium, 4px);
   margin-bottom: 1rem;
@@ -4777,7 +4777,7 @@ input[type=search]:focus,
   font-size: var(--f-modal-title-font-size, 1.25rem);
   margin-bottom: 0;
   margin-top: 0;
-  color: var(--f-text-color-default, #1b1e23);
+  color: var(--fkds-color-text-primary, #1b1e23);
 }
 .modal__dialog-container {
   background: transparent;
@@ -4820,7 +4820,8 @@ input[type=search]:focus,
   }
 }
 .modal__dialog {
-  background: var(--f-background-content, #ffffff);
+  background: var(--fkds-color-background-primary, #ffffff);
+  outline: 2px solid transparent;
   border-radius: var(--f-border-radius-medium, 4px);
   display: flex;
   flex-direction: column-reverse;
@@ -4860,149 +4861,20 @@ input[type=search]:focus,
   margin: var(--f-modal-close-button-margin, 1rem 1rem 0);
   padding: var(--f-modal-close-button-padding, none);
 }
-.modal--information {
-  --f-background-modal-shelf: var(--f-border-color-info, #4a52b6);
-  --f-text-color-close-button: var(--f-text-color-default-inverted, #ffffff);
-}
-.modal--warning {
-  --f-background-modal-shelf: var(--f-border-color-warning, #ffbe10);
-}
-.modal--error {
-  --f-background-modal-shelf: var(--f-border-color-error, #ca1515);
-  --f-text-color-close-button: var(--f-text-color-default-inverted, #ffffff);
-}
-
-.navbar__header {
-  color: var(--f-text-color-pageheader, #116a3e);
-  background-color: var(--f-background-pageheader-standard, #ffffff);
-  padding: 0.25rem;
-  height: 5rem;
-  display: flex;
-}
-.navbar__header-logo, .navbar__header-logo--small {
-  min-width: 1.25rem;
-  justify-content: flex-start;
-  margin: 0.75rem 1.75rem;
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-.navbar__header-logo {
-  background-image: url("assets/images/fk-logo-primary.svg");
-  flex-grow: 0.3;
-}
-@media (max-width: 1279.98px) {
-  .navbar__header-logo {
-    background-image: url("assets/images/fk-logo-small.svg");
-    flex-grow: 0.03;
-    min-width: 1.75rem;
-  }
-}
-.navbar__header-logo--small {
-  background-image: url("assets/images/fk-logo-small.svg");
-  flex-grow: 0.03;
-}
-.navbar__header-logo, .navbar__header-start, .navbar__header-end {
-  display: flex;
-  align-items: center;
-}
-.navbar__header-start {
-  justify-content: flex-start;
-  flex-grow: 0;
-}
-.navbar__header-start::before {
-  content: " ";
-  background-color: var(--f-border-color-separator-pageheader-standard, #116a3e);
-  position: relative;
-  height: 80%;
-  width: 2px;
-}
-.navbar__header-end {
-  justify-content: flex-end;
-  flex-grow: 1;
-}
-.navbar__header-item {
-  padding: 0.75rem 1.75rem;
-}
-.navbar__header-app-name {
-  margin: 0;
-  font-size: var(--f-font-size-h4, 1.25rem);
-}
-.navbar__header--separator {
-  border-bottom: 2px solid var(--f-border-color-separator-pageheader-standard, #116a3e);
-}
-
-.navbar__nav {
-  color: var(--f-text-color-navbar, #ffffff);
-  background-color: var(--f-background-navbar, #116a3e);
-  display: flex;
-  align-items: center;
-}
-.navbar__nav-item {
-  height: inherit;
-  padding: 0 2rem 0.25rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-.navbar__nav-item:hover {
-  background-color: var(--f-background-navbar-hover, #5f9e6c);
-  border-bottom: 2px solid var(--f-border-color-navbar-hover, #ffffff);
-  color: var(--f-text-color-navbar-active, #ffffff);
-}
-.navbar__nav-item--active {
-  border-bottom: 2px solid var(--f-border-color-navbar-active, #ffffff);
-  color: var(--f-text-color-navbar-active, #ffffff);
-  font-weight: bold;
-}
-
-.navbar--primary .navbar__header {
-  color: var(--f-text-color-default-inverted, #ffffff);
-  background-color: var(--f-background-pageheader-primary, #116a3e);
-}
-.navbar--primary .navbar__header-app-name {
-  color: var(--f-text-color-default-inverted, #ffffff);
-}
-.navbar--primary .navbar__header-logo {
-  background-image: url("assets/images/fk-logo-default.svg");
-}
-@media (max-width: 1279.98px) {
-  .navbar--primary .navbar__header-logo {
-    background-image: url("assets/images/fk-logo-small.svg");
-    flex-grow: 0.03;
-    min-width: 1.75rem;
-  }
-}
-.navbar--primary .navbar__header-logo--small {
-  background-image: url("assets/images/fk-logo-small.svg");
-}
-.navbar--primary .navbar__header-start::before {
-  background-color: var(--f-border-color-separator-pageheader-primary, #ffffff);
-}
-.navbar--primary .navbar__header--separator {
-  border-color: var(--f-border-color-separator-pageheader-primary, #ffffff);
-}
-.navbar--secondary .navbar__header {
-  background-color: var(--f-background-pageheader-secondary, #e7f0e9);
-}
-.navbar--secondary .navbar__header-logo {
-  background-image: url("assets/images/fk-logo-primary.svg");
+.modal--information .modal__shelf {
+  background-color: var(--fkds-color-feedback-background-info-strong, #4a52b6);
 }
-@media (max-width: 1279.98px) {
-  .navbar--secondary .navbar__header-logo {
-    background-image: url("assets/images/fk-logo-small.svg");
-    flex-grow: 0.03;
-    min-width: 1.75rem;
-  }
+.modal--information .modal__shelf .close-button {
+  color: var(--fkds-color-action-text-inverted-default, #ffffff);
 }
-.navbar--secondary .navbar__header-logo--small {
-  background-image: url("assets/images/fk-logo-small.svg");
+.modal--warning .modal__shelf {
+  background-color: var(--fkds-color-feedback-background-warning-strong, #ffbe10);
 }
-.navbar--secondary .navbar__header-start::before {
-  background-color: var(--f-border-color-separator-pageheader-secondary, #116a3e);
+.modal--error .modal__shelf {
+  background-color: var(--fkds-color-feedback-background-negative-strong, #ca1515);
 }
-.navbar--secondary .navbar__header--separator {
-  border-color: var(--f-border-color-separator-pageheader-secondary, #116a3e);
+.modal--error .modal__shelf .close-button {
+  color: var(--fkds-color-action-text-inverted-default, #ffffff);
 }
 
 .imenu__list {
@@ -5104,10 +4976,10 @@ input[type=search]:focus,
   border-collapse: separate;
   padding: calc(1rem * var(--f-density-factor, 1)) 1rem;
   border: var(--f-border-width-medium, 2px) solid;
-  border-color: var(--f-border-color-error, #ca1515);
-  background-color: var(--f-background-error, #fcf3f3);
+  border-color: var(--fkds-color-feedback-border-negative, #ca1515);
+  background-color: var(--fkds-color-feedback-background-negative, #fcf3f3);
   border-radius: var(--f-border-radius-small, 2px);
-  border-left: 1rem solid var(--f-border-color-error, #ca1515);
+  border-left: 1rem solid var(--fkds-color-feedback-border-negative, #ca1515);
 }
 .offline .offline__icon {
   font-size: 0;
@@ -5124,7 +4996,7 @@ input[type=search]:focus,
   transform: translateY(-0.05rem);
 }
 .offline .offline__icon .icon__banner {
-  fill: var(--f-icon-color-error, #ca1515);
+  fill: var(--fkds-icon-color-feedback-content-negative, #1b1e23);
   color: white;
 }
 .offline .offline__icon__banner {
@@ -5554,6 +5426,9 @@ input[type=search]:focus,
   font-weight: var(--f-font-weight-medium, 700);
   line-height: calc(1.5rem * var(--f-density-factor, 1));
 }
+.table tbody .table__column--action {
+  white-space: nowrap;
+}
 .table tbody .table__column--selectable {
   padding: calc(0.2rem * var(--f-density-factor, 1)) 0.2rem;
 }
@@ -6358,7 +6233,8 @@ input[type=search]:focus,
   text-align: center;
   background-color: white;
 }
-.calendar-month__header-cell abbr {
+.calendar-month__header-cell abbr,
+.calendar-month__header-cell span {
   font-weight: var(--f-font-weight-normal, 400);
   text-decoration: none;
   border-bottom: none;