@bpmn-io/form-js-editor 1.3.3 → 1.4.0

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

@@ -55,12 +55,17 @@
     var(--cds-layer-01, var(--color-white))
   );
   --color-palette-field-border: var(
-    --cds-border-strong,
-    var(--cds-border-strong-01, var(--color-grey-225-10-80))
+    --cds-border-subtle,
+    var(--cds-border-subtle-01, var(--color-grey-225-10-93))
   );
+  --color-palette-field-focus: var(--cds-border-interactive, var(--color-blue-205-100-45));
   --color-palette-field-hover-background: var(--cds-background-hover, var(--color-grey-225-10-90));
+  --color-palette-field-hover-border: var(
+    --cds-border-strong,
+    var(--cds-border-strong-01, var(--color-grey-225-10-55))
+  );
   --cursor-palette-field: grab;
-  --palette-width: 250px;
+  --palette-width: 246px;
 }
 
 .fjs-properties-container {
@@ -514,8 +519,7 @@
   display: flex;
   flex-direction: row;
   padding: 4px;
-  margin: 15px;
-  margin-top: 12px;
+  margin: 12px;
   color: var(--color-palette-search);
   border: 1px solid var(--color-palette-search-border);
   background-color: var(--color-palette-search-background);
@@ -570,56 +574,72 @@
 }
 
 .fjs-palette-container .fjs-palette-entries {
-  height: 100%;
+  display: flex;
+  flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
+  gap: 20px;
+  padding-bottom: 20px;
 }
 
 .fjs-palette-container .fjs-palette-group {
-  padding: 5px 15px;
-  padding-right: 0px;
+  display: flex;
+  flex-direction: column;
+  width: 212px;
+  margin: auto;
 }
 
 .fjs-palette-container .fjs-palette-group-title {
   font-size: 14px;
   font-weight: 500;
+  margin-bottom: 4px;
   color: var(--color-palette-group-title);
   user-select: none;
 }
 
 .fjs-palette-container .fjs-palette-fields {
-  height: 100%;
   display: flex;
   flex-wrap: wrap;
-  gap: 3%;
+  gap: 10px;
 }
 
 .fjs-palette-field {
-  height: 68px;
-  margin: 5px 0;
+  height: 64px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   font-size: 11px;
+  align-items: center;
+  border: none;
+  font-family: inherit;
   user-select: none;
   color: var(--color-palette-field);
-  background: var(--color-palette-field-background);
+  background-color: var(--color-palette-field-background);
+  outline: solid 1px var(--color-palette-field-border);
+  outline-offset: 0px;
+  transition: all ease-in-out 0.05s;
 }
 
 .fjs-palette-container .fjs-palette-field {
-  width: 68px;
+  width: 64px;
+}
+
+.fjs-palette-container .fjs-palette-field:focus {
+  outline: solid 1px var(--color-palette-field-focus);
 }
 
-.fjs-palette-field .fjs-palette-field-icon {
+.fjs-palette-field .fjs-palette-field-icon,
+.fjs-palette-field .fjs-field-icon-image {
   margin: 0 auto;
 }
 
 .fjs-palette-field .fjs-palette-field-text {
   text-align: center;
+  width: inherit;
 }
 
 .fjs-palette-container .fjs-palette-field:hover {
-  background-color: var(--color-palette-field-hover-background);
+  outline: solid 1px var(--color-palette-field-hover-border);
   cursor: var(--cursor-palette-field);
 }
 
@@ -676,6 +696,10 @@
   background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #f5f5f5 10px, #f5f5f5 20px);
 }
 
+.fjs-editor-container .fjs-form-field-separator hr {
+  margin: 10px 2px;
+}
+
 /**
  * Custom Dragula Styles
  */
@@ -1334,7 +1358,8 @@ textarea.bio-properties-panel-input {
   resize: vertical;
 }
 
-.bio-properties-panel-entry.has-error .bio-properties-panel-input {
+.bio-properties-panel-entry.has-error .bio-properties-panel-input,
+.bio-properties-panel-entry.has-error .bio-properties-panel-feel-editor__open-popup-placeholder {
   border-color: var(--input-error-border-color);
   background-color: var(--input-error-background-color);
 }
@@ -1940,6 +1965,10 @@ textarea.bio-properties-panel-input {
   border-radius: 3px;
 }
 
+.bio-properties-panel-tooltip-content pre code {
+  border: none;
+}
+
 .bio-properties-panel-tooltip p:first-child {
   margin-top: 0;
 }

package/dist/assets/properties-panel.css

@@ -564,7 +564,8 @@ textarea.bio-properties-panel-input {
   resize: vertical;
 }
 
-.bio-properties-panel-entry.has-error .bio-properties-panel-input {
+.bio-properties-panel-entry.has-error .bio-properties-panel-input,
+.bio-properties-panel-entry.has-error .bio-properties-panel-feel-editor__open-popup-placeholder {
   border-color: var(--input-error-border-color);
   background-color: var(--input-error-background-color);
 }
@@ -1181,6 +1182,10 @@ textarea.bio-properties-panel-input {
   border-radius: 3px;
 }
 
+.bio-properties-panel-tooltip-content pre code {
+  border: none;
+}
+
 .bio-properties-panel-tooltip p:first-child {
   margin-top: 0;
 }