karavan-vscode/webview/index.css

html,
body,
#root,
.App {
  height: 100%;
}

body, :root, #root, .karavan {
  --pf-global--primary-color--100: var(--vscode-focusBorder) !important;
  --pf-global--primary-color--200: var(--vscode-focusBorder) !important;
  --pf-global--active-color--100: var(--vscode-focusBorder) !important;
  --pf-global--link--Color: var(--vscode-focusBorder) !important;
  --pf-c-tabs__link--after--BorderColor: var(--vscode-focusBorder) !important;
  --pf-c-switch__input--checked__toggle--BackgroundColor: var(--vscode-focusBorder) !important;
  --pf-c-button--m-plain--Color: var(--vscode-focusBorder) !important;
  --pf-c-button--m-secondary--Color: var(--vscode-focusBorder) !important;

  --pf-global--Color--100: var(--vscode-foreground) !important;

  --step-border-color: var(--pf-global--active-color--200);
  --step-border-color-selected:var(--vscode-focusBorder);
}

.vscode-dark .pf-c-page {
  background-color:  var(--vscode-editor-background);
}

.karavan .pf-c-drawer__content {
  background-color: transparent;
}

.vscode-dark input {
  color: var(--vscode-foreground) !important;
}

.vscode-dark .pf-c-button.pf-m-primary {
  color: var(--vscode-foreground) !important;
  background-color: var(--vscode-focusBorder) !important;
}

.vscode-dark .pf-c-button.pf-m-primary:hover {
  color: var(--pf-c-button--m-primary--hover--Color);
  background-color: var(--vscode-button-hoverBackground)  !important;
}

.vscode-dark .pf-c-button.pf-m-secondary {
  color: var(--vscode-focusBorder) !important;
  background-color: var(--vscode-button-secondaryBackground) !important;
}

.vscode-dark .karavan {
  color: var(--pf-global--Color--200);
}

.vscode-dark .karavan .top-icon {
  fill: var(--pf-global--Color--200);
}

.vscode-dark .karavan .main-tabs {
  background-color: var(--vscode-tab-inactiveBackground);
}

.vscode-dark .karavan .main-tabs .pf-c-tabs__list {
    background-color: var(--vscode-tab-inactiveBackground);
}

.vscode-dark .karavan .main-tabs::before {
  border-color: var(--vscode-tab-inactiveBackground);
}

.vscode-dark .karavan .main-tabs .pf-c-tabs__item.pf-m-current {
  background-color: var(--vscode-tab-activeBackground);
}

.karavan .main-tabs .pf-c-tabs__item-text {
  color: var(--pf-global--palette--black-400);
}

.karavan .loading-page {
  background-color:  transparent;
  height: 100%;
  display: flex;
  margin: auto;
  justify-content: center;
  flex-direction: column;
}

/* .vscode-light .karavan .loading-page {
  background-color:  transparent;
}
.vscode-dark .karavan .loading-page {
  background-color: var(--vscode-editor-background);
} */

/* Tabs */
.vscode-dark .pf-c-tabs__link::after {
  border-color: var(--pf-global--active-color--100);
}

.vscode-dark .pf-c-tabs__scroll-button {
  color: #cecece;
  background-color: var(--vscode-editor-background);
}

.vscode-dark .pf-c-tabs__scroll-button::before {
  border-color: var(--vscode-tab-inactiveBackground);
}

/* Designer */
.vscode-dark .karavan .dsl-page .dsl-page-columns,
.vscode-dark .karavan .rest-page .rest-page-columns,
.vscode-dark .karavan .beans-page .beans-page-columns,
.vscode-dark .karavan .error-page .error-page-columns,
.vscode-dark .karavan .exception-page .exception-page-columns,
.vscode-dark .karavan .templates-page .templates-page-columns {  
  background-color: var(--vscode-editor-background);
}

.vscode-dark .karavan .dsl-page .flows .step-element .header-route {
  color: var(--pf-global--Color--200);
}

.vscode-dark .karavan .dsl-page .flows .step-element-with-steps {
  border-color: var(--pf-global--Color--200);
}

.vscode-dark .step-element .selected .text {
  color: var(--pf-global--info-color--100);
}

.vscode-dark .step-element .selected .header-icon {
  border-color: var(--pf-global--info-color--100);
  background: var(--pf-global--info-color--100);
  border-width: 2px;
}

.vscode-dark .step-element .header-icon {
  background: var(--pf-global--BorderColor--200);
  border-color: var(--pf-global--Color--200);
}

.vscode-dark .step-element .header .text-bottom {
    background-color: rgb(var(--vscode-editor-background), 0.5);
    color: var(--vscode-editor-foreground);
}

.vscode-dark .karavan .step-element .add-button {
  color: var(--vscode-focusBorder); 
}

/* Connections */
.vscode-dark .karavan .dsl-page .graph .connections .arrow {
  stroke: var(--pf-global--BorderColor--light-100);
  fill: var(--pf-global--BorderColor--light-100);
}

.vscode-dark .karavan .dsl-page .graph .connections .path {
   stroke: var(--pf-global--BorderColor--light-100);
}

.vscode-dark .karavan .dsl-page .graph .connections .path-incoming {
  stroke: var(--pf-global--BorderColor--light-100);
}
.vscode-dark .karavan .dsl-page .graph .connections .circle-outgoing,
.vscode-dark .karavan .dsl-page .graph .connections .circle-incoming {
  stroke: var(--pf-global--Color--200);
  fill: var(--pf-global--BorderColor--200);
}

/* Properties */
.vscode-dark .karavan .properties {
  border: none;
  background: var(--vscode-tab-inactiveBackground);
  color: var(--vscode-input-foreground);
}

.vscode-dark .karavan .pf-c-drawer__splitter {
  background: var(--vscode-tab-inactiveBackground);
}

.vscode-dark .karavan .pf-c-drawer__splitter::after {
  border: var(--vscode-tab-inactiveBackground) solid;
  border-width: 2px;
}

.vscode-dark .karavan .pf-c-switch {
  --pf-c-switch__input--checked__toggle--BackgroundColor: var(--vscode-focusBorder);
}

.vscode-dark .karavan .properties .text-field {
  background-color: var(--vscode-input-background);
  border-color: var(--vscode-input-background);
  color: var(--vscode-input-foreground);
}

.vscode-dark .pf-c-select {
  --pf-c-select__toggle--BackgroundColor: var(--vscode-input-background);
  --pf-c-select__toggle--before--BorderTopColor: var(--vscode-input-background);
  --pf-c-select__toggle--before--BorderRightColor: var(--vscode-input-background);
  --pf-c-select__toggle--before--BorderBottomColor: var(--vscode-input-background);
  --pf-c-select__toggle--before--BorderLeftColor: var(--vscode-input-background);
  --pf-c-select__toggle--Color: var(--pf-global--Color--200);
}

.vscode-dark .pf-c-select__menu {
  background-color: var(--vscode-input-background);
  box-shadow: var(--pf-c-select__menu--BoxShadow);
}

.vscode-dark .karavan .properties .pf-c-select__menu-item {
  color: var(--vscode-input-foreground);
}

.vscode-dark .karavan .properties .pf-c-select__menu-item:hover {
  color: var(--vscode-input-foreground);
  background-color: var(--vscode-focusBorder);
}

.vscode-dark .karavan .properties .pf-c-select__menu-item:hover .pf-c-select__menu-item-description {
  color: var(--vscode-input-foreground);
}

.vscode-dark .karavan .properties .pf-c-select__toggle-typeahead {
  color: var(--vscode-input-foreground);
}

.vscode-dark .karavan .properties .pf-c-input-group, 
.vscode-dark .karavan .properties .pf-c-text-input-group {
  background-color: var(--vscode-input-background);
  border-color: var(--vscode-input-foreground);;
  color: var(--vscode-input-foreground);
  --pf-c-text-input-group__text--before--BorderColor: transparent;
  --pf-c-text-input-group__text--after--BorderBottomColor: transparent;
}

.vscode-dark .karavan .properties .pf-c-input-group .pf-m-control {
  background-color: transparent;
  color: var(--vscode-input-foreground);
}

.vscode-dark .karavan .properties .pf-c-input-group .pf-c-button.pf-m-control::after {
  border-radius: initial;
  border-right: none;
  border-top: none;
  border-left-color: var(--vscode-tab-inactiveBackground);
  border-bottom-color: transparent;
}

.vscode-dark .karavan .properties .pf-c-input-group .pf-c-button.pf-m-control:hover::after {
  border-bottom-color: var(--vscode-focusBorder);
}

.vscode-dark .karavan .properties .input-group .pf-c-chip-group .pf-c-chip {
  --pf-c-chip--BackgroundColor: transparent;
  --pf-c-chip__text--Color: var(--vscode-input-foreground);
  --pf-c-chip--before--BorderColor: var(--vscode-input-foreground);
}

.vscode-dark .karavan .properties .input-group .pf-c-chip-group li:last-child .pf-c-chip {
  --pf-c-chip--before--BorderColor: transparent;
}

.vscode-dark .karavan .properties .pf-c-select__toggle-text {
  color: var(--vscode-input-foreground);
}

.vscode-dark .karavan .properties .pf-c-expandable-section__toggle-icon {
  color: var(--vscode-focusBorder);
}

/* Popover */
.vscode-dark .pf-c-popover {
  --pf-c-popover__content--BackgroundColor: var(--vscode-tab-activeBackground);
  --pf-c-popover__arrow--BackgroundColor: var(--vscode-tab-activeBackground);
}

.vscode-dark .pf-c-tooltip {
  --pf-c-tooltip__content--BackgroundColor: var(--vscode-input-background);
}

/* Modal */
.vscode-dark .dsl-modal .dsl-card .icon {
  height: 24px;
  background: var(--pf-global--BorderColor--200);
  border-color: var(--pf-global--Color--200);
  border-radius: 24px;
  padding: 4px;
}

.vscode-dark .pf-c-modal-box {
  --pf-c-modal-box--BackgroundColor: var(--vscode-input-background);
}

.vscode-dark .dsl-modal .search .text-field {
  background-color:  var(--vscode-editor-background);
  border-color:  var(--vscode-input-foreground);
  color:  var(--vscode-input-foreground);
}

/* Tour */
.vscode-dark .reactour__popover {
  color: var(--vscode-editor-foreground);
  background-color: var(--vscode-tab-inactiveBackground);
}

.vscode-dark .reactour__popover [class$="-DefaultArrow"] {
  color: var(--vscode-editor-foreground);
}

/* Help */
.vscode-light .dont-show, 
.vscode-dark .dont-show {
  margin-right: auto;
}

/* Tour */
.vscode-dark .reactour__mask {
  color: var(--vscode-input-placeholderForeground);
}


/* Kamelets page */

.vscode-dark .karavan .kamelet-section,
.vscode-dark .karavan .tools-section,
.vscode-dark .karavan .tools-section .pf-c-toolbar,
.vscode-dark .karavan .kamelets-page {
  background-color: transparent;
  border: none;
}

.vscode-dark .karavan .tools-section h1 {
color: var(--vscode-editor-foreground);
}

.vscode-dark .karavan .kamelets-page .kamelet-card {
  background-color: var(--vscode-badge-background);
}

.vscode-dark .karavan .tools-section .text-field {
  background-color:  var(--vscode-editor-background);
  border-color:  var(--vscode-input-foreground);
  color:  var(--vscode-input-foreground);
}

.vscode-dark .kamelet-modal-card .pf-c-table {
  background-color: transparent;
  color:  var(--vscode-input-foreground);
}

.vscode-dark .pf-c-table {
  --pf-c-table--cell--Color:  var(--vscode-input-foreground);
  color:  var(--vscode-input-foreground);
}

/* Builder */
.vscode-dark .karavan .project-builder {
  background: var(--vscode-editor-background);
  border: none;
}
.vscode-dark .karavan .project-builder .header .pf-c-badge {
  --pf-c-badge--BackgroundColor: var(--pf-global--primary-color--200);
}

.vscode-dark .karavan .project-builder h2,
.vscode-dark .karavan .project-builder .pf-c-card__title,
.vscode-dark .karavan .project-builder .pf-c-form__label-text {
  color: var(--vscode-editor-foreground);
}

.vscode-dark .karavan .project-builder .builder-card {
  background-color: var(--vscode-badge-background);
}

.vscode-dark .karavan .project-builder .builder-card .text-field {
  background-color: var(--vscode-input-background);
  border-color: var(--vscode-input-background);
  color: var(--vscode-input-foreground);
}

.vscode-dark .karavan .project-builder .pf-c-input-group {
  background-color: transparent;
  border-color: var(--vscode-input-foreground);
  color: var(--vscode-input-foreground);
  --pf-c-text-input-group__text--before--BorderColor: transparent;
  --pf-c-text-input-group__text--after--BorderBottomColor: transparent;
}

.vscode-dark .karavan .project-builder .pf-c-toggle-group {
  --pf-c-toggle-group__button--BackgroundColor: transparent;
  --pf-c-toggle-group__button--Color: var(--vscode-editor-foreground);
}

.vscode-dark .karavan .project-builder .pf-c-toggle-group .pf-c-toggle-group__button.pf-m-selected {
  --pf-c-toggle-group__button--BackgroundColor: var(--pf-global--primary-color--200);
}

.vscode-dark .karavan .project-builder .pf-c-toggle-group .pf-c-toggle-group__button:hover {
  --pf-c-toggle-group__button--BackgroundColor: var(--vscode-input-background);
}

.vscode-dark .karavan .project-builder .pf-c-progress-stepper__step-icon {
  background-color: var(--vscode-input-background);
}

.vscode-dark .karavan .project-builder .footer .buttons .pf-c-toolbar {
  background: transparent;
}

.vscode-dark .project-builder .pf-c-table {
  background-color: transparent;
  color:  var(--vscode-input-foreground);
}

.vscode-dark .pf-c-table {
  --pf-c-table--cell--Color:  var(--vscode-input-foreground);
  color:  var(--vscode-input-foreground);
}

.vscode-dark .profile-modal .text-field {
  background-color:  var(--vscode-editor-background);
  border-color:  var(--vscode-input-foreground);
  color:  var(--vscode-input-foreground);
}