@bpmn-io/form-js-editor 0.15.0-alpha.0 → 1.0.0-alpha.0

package/dist/assets/form-js-editor-base.css

@@ -189,8 +189,11 @@
   --list-entry-add-entry-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
   --list-entry-add-entry-fill-color: var(--cds-icon-inverse, var(--color-white));
 
-  --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-35));
+  --feel-background-color: var(--cds-field-02, var(--color-grey-225-10-97));
+  --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-45));
   --feel-inactive-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
+  --feel-hover-background-color: var(--cds-field-hover-02, var(--color-grey-225-10-90));
+  --feel-active-background-color: var(--cds-field-02, var(--color-grey-225-10-97));
 
   --feel-indicator-background-color: var(--cds-background-hover, var(--color-grey-225-10-90));
 }
@@ -247,8 +250,10 @@
   background-color: var(--color-children-selected-background);
 }
 
-.fjs-editor-container .fjs-children .fjs-element:hover {
+.fjs-editor-container .fjs-children .fjs-element:hover,
+.fjs-editor-container .fjs-children .fjs-element:focus-within {
   border-color: var(--color-children-hover-border);
+  outline: none;
 }
 
 .fjs-editor-container .fjs-input:disabled,
@@ -259,6 +264,10 @@
   pointer-events: none;
 }
 
+.fjs-editor-container .fjs-readonly {
+  pointer-events: none;
+}
+
 .fjs-editor-container .fjs-drag-container,
 .fjs-editor-container .fjs-drop-container-vertical {
   user-select: none;
@@ -415,6 +424,11 @@
   color: var(--color-context-pad-item-hover-fill);
 }
 
+.fjs-editor-container .fjs-context-pad-item:focus-visible {
+  outline: 2px solid var(--color-children-selected-border);
+  border-radius: 2px;
+}
+
 /**
  * Palette
  */

package/dist/assets/form-js-editor.css

@@ -168,8 +168,11 @@
   --list-entry-add-entry-label-color: var(--cds-text-inverse, var(--color-white));
   --list-entry-add-entry-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
   --list-entry-add-entry-fill-color: var(--cds-icon-inverse, var(--color-white));
-  --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-35));
+  --feel-background-color: var(--cds-field-02, var(--color-grey-225-10-97));
+  --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-45));
   --feel-inactive-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
+  --feel-hover-background-color: var(--cds-field-hover-02, var(--color-grey-225-10-90));
+  --feel-active-background-color: var(--cds-field-02, var(--color-grey-225-10-97));
   --feel-indicator-background-color: var(--cds-background-hover, var(--color-grey-225-10-90));
 }
 
@@ -225,8 +228,10 @@
   background-color: var(--color-children-selected-background);
 }
 
-.fjs-editor-container .fjs-children .fjs-element:hover {
+.fjs-editor-container .fjs-children .fjs-element:hover,
+.fjs-editor-container .fjs-children .fjs-element:focus-within {
   border-color: var(--color-children-hover-border);
+  outline: none;
 }
 
 .fjs-editor-container .fjs-input:disabled,
@@ -237,6 +242,10 @@
   pointer-events: none;
 }
 
+.fjs-editor-container .fjs-readonly {
+  pointer-events: none;
+}
+
 .fjs-editor-container .fjs-drag-container,
 .fjs-editor-container .fjs-drop-container-vertical {
   user-select: none;
@@ -391,6 +400,11 @@
   color: var(--color-context-pad-item-hover-fill);
 }
 
+.fjs-editor-container .fjs-context-pad-item:focus-visible {
+  outline: 2px solid var(--color-children-selected-border);
+  border-radius: 2px;
+}
+
 /**
  * Palette
  */
@@ -782,8 +796,11 @@
   --dropdown-item-background-color: var(--color-white);
   --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
   --dropdown-separator-background-color: var(--color-grey-225-10-75);
-  --feel-active-color: var(--color-blue-205-100-35);
+  --feel-background-color: var(--color-grey-225-10-95);
+  --feel-active-color: var(--color-blue-205-100-45);
   --feel-inactive-color: var(--color-grey-225-10-35);
+  --feel-hover-background-color: var(--color-grey-225-10-90);
+  --feel-active-background-color: var(--color-grey-225-10-95);
   --feel-indicator-background-color: var(--color-grey-225-10-90);
   --text-size-base: 14px;
   --text-size-small: 13px;
@@ -792,7 +809,9 @@
   --line-height-condensed: 17px;
   --font-family: sans-serif;
   --font-family-monospace: monospace;
-  display: none;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
   position: relative;
   height: 100%;
   width: 100%;
@@ -814,12 +833,6 @@
   font-family: var(--font-family);
 }
 
-.bio-properties-panel.open {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
 /**
  * Placeholder (empty, multi select, ...)
  */
@@ -1194,7 +1207,7 @@ select.bio-properties-panel-input {
 }
 
 .bio-properties-panel-input[type=checkbox]:focus {
-  outline: 1px solid var(--input-focus-border-color);
+  outline: 2px solid var(--input-focus-border-color);
   outline-offset: 0;
 }
 
@@ -1264,10 +1277,23 @@ textarea.bio-properties-panel-input {
   align-items: center;
 }
 
+.bio-properties-panel-toggle-switch.inline {
+  display: flex;
+  flex-direction: row;
+}
+
+.bio-properties-panel-toggle-switch.inline .bio-properties-panel-field-wrapper {
+  margin-left: auto;
+}
+
 .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
   font-size: var(--text-size-base);
 }
 
+.bio-properties-panel-toggle-switch.inline > .bio-properties-panel-label {
+  font-size: var(--text-size-small);
+}
+
 .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
   margin: 0;
   margin-left: 6px;
@@ -1280,6 +1306,11 @@ textarea.bio-properties-panel-input {
   height: 16px;
 }
 
+.bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher:focus-within {
+  outline: 2px solid var(--input-focus-border-color);
+  outline-offset: 1px;
+}
+
 .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type=checkbox] {
   opacity: 0;
   width: 0;
@@ -1288,6 +1319,7 @@ textarea.bio-properties-panel-input {
 
 .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
   position: absolute;
+  cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
@@ -1634,34 +1666,56 @@ textarea.bio-properties-panel-input {
   padding-right: 2em;
 }
 
+.bio-properties-panel-feel-entry .bio-properties-panel-label {
+  display: flex;
+}
+
 .bio-properties-panel-feel-icon {
-  display: inline-block;
-  height: 16px;
-  border-radius: 8px;
+  display: inline-flex;
+  height: 22px;
+  width: 22px;
   vertical-align: text-bottom;
   padding: 0;
   margin: 0 3px;
   align-items: center;
   align-self: center;
+  justify-content: center;
   border: none;
   background: none;
+  border-radius: 3px;
 }
 
 .bio-properties-panel-feel-icon.optional {
   cursor: pointer;
+  background: var(--feel-background-color);
 }
 
 .bio-properties-panel-feel-icon svg * {
-  color: var(--feel-inactive-color);
+  fill: var(--feel-inactive-color);
+}
+
+.bio-properties-panel-feel-icon:hover {
+  background: var(--feel-hover-background-color);
+}
+
+.bio-properties-panel-feel-icon.active {
+  background: var(--feel-active-background-color);
+}
+
+.bio-properties-panel-feel-icon.active:hover {
+  background: var(--feel-hover-background-color);
+}
+
+.bio-properties-panel-feel-icon.required.active {
+  background: none;
 }
 
 .bio-properties-panel-feel-icon.active svg * {
-  color: var(--feel-active-color);
+  fill: var(--feel-active-color);
 }
 
-.bio-properties-panel-feel-icon svg {
-  width: 16px;
-  height: 16px;
+.bio-properties-panel-feel-icon.required.active svg * {
+  fill: var(--feel-inactive-color);
 }
 
 .bio-properties-panel-feel-editor-container {
@@ -1718,3 +1772,20 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-feel-container .cm-editor {
   min-height: 100%;
 }
+
+.bio-properties-panel-feel-checkbox,
+.bio-properties-panel-feel-toggle-switch {
+  padding-top: 1px;
+}
+
+.bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active),
+.bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container,
+.bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container {
+  margin-left: auto;
+}