@bpmn-io/form-js-carbon-styles 1.5.0-alpha.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/form-js-carbon-styles",
-  "version": "1.5.0-alpha.0",
+  "version": "1.6.0",
   "description": "Custom carbon styles for form-js",
   "scripts": {
     "all": "run-s test",
@@ -18,13 +18,12 @@
     "url": "https://github.com/bpmn-io"
   },
   "devDependencies": {
-    "@bpmn-io/form-js-viewer": "^1.5.0-alpha.0",
-    "@carbon/elements": "^11.19.1",
-    "@types/styled-components": "^5.1.26",
-    "styled-components": "^6.0.0"
+    "@bpmn-io/form-js-viewer": "^1.6.0",
+    "@carbon/elements": "^11.33.1",
+    "styled-components": "^6.1.1"
   },
   "files": [
     "src"
   ],
-  "gitHead": "dd79ef1e87281d69eef0c052069ce4347d1a7468"
+  "gitHead": "0f868b4c5679af5366998253e7a602f1375754a7"
 }

package/src/carbon-styles.js

@@ -390,7 +390,7 @@ const LABEL_DESCRIPTION_ERROR_STYLES = css`
       letter-spacing: var(--cds-label-01-letter-spacing);
     }
 
-    .fjs-form-field:not(.fjs-form-field-checkbox, .fjs-form-field-group)
+    .fjs-form-field:not(.fjs-form-field-checkbox, .fjs-form-field-grouplike)
       .fjs-form-field-label:first-child {
       margin: 0;
       margin-bottom: var(--cds-spacing-03);

package/src/carbon-styles.scss

@@ -401,6 +401,17 @@
         padding: 2px 0px;
       }
     }
+
+    &.fjs-form-field-dynamiclist button.fjs-repeat-render-add,
+    &.fjs-form-field-dynamiclist button .fjs-repeat-row-remove-icon-container {
+      color: var(--cds-text-on-color-disabled);
+
+      &:hover {
+        color: var(--cds-text-on-color-disabled);
+        background-color: transparent;
+        cursor: not-allowed;
+      }
+    }
   }
 }
 
@@ -492,8 +503,7 @@
     letter-spacing: var(--cds-label-01-letter-spacing);
   }
 
-  .fjs-form-field:not(.fjs-form-field-checkbox, .fjs-form-field-group)
-    .fjs-form-field-label:first-child {
+  .fjs-form-field:not(.fjs-form-field-checkbox, .fjs-form-field-grouplike, .fjs-form-field-table) .fjs-form-field-label:first-child {
     margin: 0;
     margin-bottom: var(--cds-spacing-03);
   }
@@ -1202,3 +1212,162 @@
     color: var(--cds-text-disabled);
   }
 }
+
+// iFrame styles ////////////
+
+.fjs-container {
+  .fjs-iframe-placeholder {
+    background-color: var(--cds-layer);
+    border-color: var(--cds-border-subtle);
+    color: var(--cds-text-helper);
+  }
+
+  .fjs-iframe {
+    border-color: var(--cds-border-subtle);
+  }
+}
+
+// Table styles ////////////
+
+.fjs-container {
+  .fjs-form-field-table {
+    row-gap: var(--cds-spacing-04);
+  }
+
+  .fjs-form-field.fjs-form-field-table .fjs-form-field-label {
+    color: var(--cds-text-secondary);
+    font-size: var(--cds-label-02-font-size);
+    font-weight: var(--cds-label-02-font-weight);
+    line-height: var(--cds-label-02-line-height);
+    letter-spacing: var(--cds-label-02-letter-spacing);
+    margin-bottom: 0;
+  }
+
+  .fjs-table-th {
+    color: var(--cds-color-primary);
+    font-size: var(--cds-heading-compact-01-font-size);
+    font-weight: var(--cds-heading-compact-01-font-weight);
+    line-height: var(--cds-heading-compact-01-line-height);
+    letter-spacing: var(--cds-heading-compact-01-letter-spacing);
+
+    &:focus {
+      outline: 2px solid var(--cds-focus);
+      outline-offset: -2px;
+    }
+  }
+
+  .fjs-table-tr,
+  .fjs-table-nav {
+    block-size: rem(24px);
+  }
+
+  .fjs-table-td,
+  .fjs-table-th {
+    vertical-align: middle;
+  }
+
+  .fjs-table-middle-container.fjs-table-empty {
+    background-color: transparent;
+    color: var(--cds-text-secondary);
+    padding-left: var(--cds-spacing-05);
+    font-size: var(--cds-heading-compact-01-font-size);
+    font-weight: var(--cds-heading-compact-01-font-weight);
+    line-height: var(--cds-heading-compact-01-line-height);
+    letter-spacing: var(--cds-heading-compact-01-letter-spacing);
+  }
+
+  .fjs-table-middle-container {
+    border-radius: 0;
+    background-color: var(--cds-layer);
+  }
+
+  .fjs-table-body .fjs-table-tr:hover {
+    background-color: var(--cds-layer-hover);
+  }
+
+  .fjs-table-nav {
+    color: var(--cds-text-primary);
+    font-size: var(--cds-label-01-font-size);
+    font-weight: var(--cds-label-01-font-weight);
+    line-height: var(--cds-label-01-line-height);
+    letter-spacing: var(--cds-label-01-letter-spacing);
+  }
+
+  .fjs-table-nav-button {
+    color: var(--cds-text-primary);
+
+    &:disabled {
+      color: var(--cds-text-disabled);
+    }
+
+    &:focus {
+      outline: 2px solid var(--cds-focus);
+      outline-offset: -2px;
+    }
+  }
+
+  // To be removed when this issue is fixed upstream: https://github.com/carbon-design-system/carbon/issues/14597
+
+  .fjs-table-body .fjs-table-tr:not(:last-child) {
+    border-bottom: 1px solid var(--cds-border-subtle-02);
+  }
+
+  .fjs-table-middle-container {
+    border: 1px solid var(--cds-border-subtle-02);
+  }
+
+  .fjs-table-nav {
+    border-top: 1px solid var(--cds-border-subtle-02);
+  }
+
+  .fjs-table-nav-button {
+    border-left: 1px solid var(--cds-border-subtle-02);
+  }
+}
+
+// Dynamic lists ////////////
+
+
+.fjs-container .fjs-form-field-dynamiclist {
+  .fjs-repeat-row-container .fjs-repeat-row-remove-icon-container {
+    border-radius: 0;
+    color: var(--cds-button-danger-secondary);
+    min-width: rem(40);
+    min-height: rem(40);
+
+    &:hover {
+      color: var(--cds-text-on-color);
+      background-color: var(--cds-button-danger-hover);
+    }
+  }
+
+  .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible .fjs-repeat-row-remove-icon-container {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: 1px;
+    border-radius: 0;
+  }
+
+  .fjs-repeat-render-footer {
+    padding-left: 8px;
+    padding-right: 8px;
+    margin-right: 0;
+  }
+
+  .fjs-repeat-render-add,
+  .fjs-repeat-render-collapse {
+    min-height: rem(40);
+    padding-inline-end: rem(15);
+
+    &:focus {
+      outline: 2px solid var(--cds-focus);
+      outline-offset: 1px;
+      border: none;
+      border-radius: 0;
+    }
+
+    &:hover {
+      color: var(--cds-link-primary-hover);
+      background-color: var(--cds-background-hover);
+    }
+  }
+}