feat: Add Carbon compatibility styles

bpmn-io · Dec 8, 2023 · 07ee419 · 07ee419
1 parent 467e66c
commit 07ee419
Showing 1 changed file with 126 additions and 21 deletions.
diff --git a/packages/form-js-carbon-styles/src/carbon-styles.scss b/packages/form-js-carbon-styles/src/carbon-styles.scss
@@ -1,7 +1,7 @@
 @use "sass:math";
 
 @function rem($value) {
-  $remValue: math.div($value, 16) + rem; 
+  $remValue: math.div($value, 16) + rem;
   @return $remValue;
 }
 
@@ -52,6 +52,7 @@
   }
 
   @media (width < 66rem) {
+
     // Carbon lg width breakpoint
     .fjs-layout-column .fjs-form-field {
       margin-left: 0;
@@ -72,16 +73,17 @@
     .fjs-form-field-number .fjs-input-group {
       .fjs-number-arrow-container {
         .fjs-number-arrow-down {
-          background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMxNjE2MTYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTVIMjRWMTdIOHoiIC8+PC9zdmc+")        }
-
+          background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMxNjE2MTYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTVIMjRWMTdIOHoiIC8+PC9zdmc+")
+        }
+
         .fjs-number-arrow-up {
           background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMxNjE2MTYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTE3IDE1TDE3IDggMTUgOCAxNSAxNSA4IDE1IDggMTcgMTUgMTcgMTUgMjQgMTcgMjQgMTcgMTcgMjQgMTcgMjQgMTV6IiAvPjwvc3ZnPg==");
         }
-  
+
         &.fjs-disabled .fjs-number-arrow-up {
           background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjIsIDIyLCAyMiwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTE3IDE1TDE3IDggMTUgOCAxNSAxNSA4IDE1IDggMTcgMTUgMTcgMTUgMjQgMTcgMjQgMTcgMTcgMjQgMTcgMjQgMTV6IiAvPjwvc3ZnPg==");
         }
-  
+
         &.fjs-disabled .fjs-number-arrow-down {
           background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjIsIDIyLCAyMiwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTVIMjRWMTdIOHoiIC8+PC9zdmc+");
         }
@@ -122,15 +124,15 @@
         .fjs-number-arrow-down {
           background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmNGY0ZjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTVIMjRWMTdIOHoiIC8+PC9zdmc+");
         }
-  
+
         .fjs-number-arrow-up {
           background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmNGY0ZjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTE3IDE1TDE3IDggMTUgOCAxNSAxNSA4IDE1IDggMTcgMTUgMTcgMTUgMjQgMTcgMjQgMTcgMTcgMjQgMTcgMjQgMTV6IiAvPjwvc3ZnPg==");
         }
-  
+
         &.fjs-disabled .fjs-number-arrow-up {
           background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjQ0LCAyNDQsIDI0NCwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTE3IDE1TDE3IDggMTUgOCAxNSAxNSA4IDE1IDggMTcgMTUgMTcgMTUgMjQgMTcgMjQgMTcgMTcgMjQgMTcgMjQgMTV6IiAvPjwvc3ZnPg==");
         }
-  
+
         &.fjs-disabled .fjs-number-arrow-down {
           background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjQ0LCAyNDQsIDI0NCwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTVIMjRWMTdIOHoiIC8+PC9zdmc+")
         }
@@ -288,7 +290,9 @@
     outline: 1px solid var(--cds-focus);
   }
 
-  &:active, &:active:visited, &:active:visited:hover {
+  &:active,
+  &:active:visited,
+  &:active:visited:hover {
     color: var(--cds-text-primary);
   }
 
@@ -305,6 +309,7 @@
 
 .fjs-container {
   .fjs-readonly {
+
     .fjs-input:read-only:not(:disabled),
     .fjs-textarea:read-only:not(:disabled),
     .fjs-select:read-only:not(:disabled),
@@ -408,6 +413,7 @@
 
 .fjs-container {
   .fjs-disabled {
+
     &.fjs-form-field-textfield .fjs-input,
     &.fjs-form-field-datetime .fjs-input,
     & .fjs-textarea:disabled,
@@ -447,6 +453,7 @@
 
   .fjs-form-field.fjs-disabled.fjs-checked .fjs-input[type='checkbox'] {
     cursor: var(--cursor-disabled, not-allowed);
+
     &:before {
       border-color: var(--cds-icon-disabled);
       background-color: var(--cds-icon-disabled);
@@ -460,6 +467,7 @@
 
   .fjs-form-field.fjs-disabled .fjs-input[type='checkbox'] {
     cursor: var(--cursor-disabled, not-allowed);
+
     &:before {
       border-color: var(--cds-icon-disabled);
       cursor: var(--cursor-disabled, not-allowed);
@@ -492,22 +500,18 @@
     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-group, .fjs-form-field-table) .fjs-form-field-label:first-child {
     margin: 0;
     margin-bottom: var(--cds-spacing-03);
   }
 
-  .fjs-form-field.fjs-form-field-radio
-    .fjs-form-field-label:not(:first-of-type),
-  .fjs-form-field.fjs-form-field-checklist
-    .fjs-form-field-label:not(:first-of-type) {
+  .fjs-form-field.fjs-form-field-radio .fjs-form-field-label:not(:first-of-type),
+  .fjs-form-field.fjs-form-field-checklist .fjs-form-field-label:not(:first-of-type) {
     margin: 0;
     margin-bottom: 0.1875rem;
   }
 
-  .fjs-form-field.fjs-form-field-radio
-    .fjs-form-field-label:not(:first-of-type) {
+  .fjs-form-field.fjs-form-field-radio .fjs-form-field-label:not(:first-of-type) {
     min-height: #{rem(27)};
   }
 
@@ -537,6 +541,7 @@
 // Checkbox styles /////////////
 
 .fjs-container {
+
   .fjs-input[type='checkbox'],
   .fjs-input[type='checkbox']:focus {
     all: unset;
@@ -598,9 +603,7 @@
   }
 
   .fjs-form-field.fjs-checked .fjs-input[type='checkbox'],
-  .fjs-form-field
-    .fjs-form-field-label.fjs-checked
-    .fjs-input[type='checkbox'] {
+  .fjs-form-field .fjs-form-field-label.fjs-checked .fjs-input[type='checkbox'] {
     &:before {
       border: none;
       border-width: 1px;
@@ -645,6 +648,7 @@
   }
 
   .fjs-taglist .fjs-taglist-input {
+
     &,
     &::placeholder {
       color: var(--cds-text-primary);
@@ -1069,6 +1073,7 @@
 // Remaining input styles /////////////
 
 .fjs-container {
+
   .fjs-form-field-textfield .fjs-input-group,
   .fjs-form-field-datetime .fjs-input-group,
   .fjs-textarea,
@@ -1084,6 +1089,7 @@
       outline-offset: -2px;
     }
   }
+
   .fjs-form-field-textfield .fjs-input,
   .fjs-form-field-datetime .fjs-input {
     background-color: var(--cds-field);
@@ -1115,6 +1121,7 @@
 // Dropdown styles /////////////
 
 .fjs-container {
+
   .fjs-form-field-taglist .fjs-taglist-anchor .fjs-dropdownlist,
   .fjs-form-field-datetime .fjs-timepicker-anchor .fjs-dropdownlist,
   .fjs-form-field-select .fjs-select-anchor .fjs-dropdownlist {
@@ -1170,7 +1177,7 @@
       padding-top: 1px;
     }
 
-    & .fjs-dropdownlist-item.focused + .fjs-dropdownlist-item {
+    & .fjs-dropdownlist-item.focused+.fjs-dropdownlist-item {
       border: none;
       padding-top: 1px;
     }
@@ -1216,3 +1223,101 @@
     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);
+  }
+}