@bpmn-io/form-js-viewer 1.26.1 → 2.0.0-alpha.0

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

@@ -1,81 +1,94 @@
 /**
  * Theming
  */
+/**
+ * Semantic tokens, copied from `@bpmn-io/theme` to style the components
+ * according to this theme.
+ *
+ * Names and values of the tokens should stay intact with the `@bpmn-io/theme`
+ * source of truth, to ensure matching styles and allow overrides with an
+ * alternative theme.
+ */
+.bio-theme-parent {
+  --bio-surface: hsl(0, 0%, 100%);
+  --bio-surface-medium: hsl(225, 10%, 95%);
+  --bio-surface-strong: hsl(225, 10%, 90%);
+  --bio-text: hsl(225, 10%, 15%);
+  --bio-text-subtle: hsl(225, 10%, 35%);
+  --bio-text-subtlest: hsl(225, 10%, 55%);
+  --bio-text-on-primary: hsl(0, 0%, 100%);
+  --bio-border: hsl(225, 10%, 75%);
+  --bio-border-input: hsl(225, 10%, 75%);
+  --bio-border-subtle: hsl(225, 10%, 85%);
+  --bio-border-disabled: hsl(225, 10%, 90%);
+  --bio-primary: hsl(205, 100%, 40%);
+  --bio-focus: hsl(205, 100%, 40%);
+  --bio-focus-ring: hsla(205, 100%, 40%, 0.35);
+  --bio-focus-ring-danger: hsla(360, 100%, 45%, 0.35);
+  --bio-neutral-subtle: hsl(225, 10%, 80%);
+  --bio-neutral-subtle-hover: hsl(225, 10%, 75%);
+  --bio-danger: hsl(360, 100%, 45%);
+  --bio-danger-surface: hsl(360, 100%, 92%);
+  --bio-danger-surface-subtle: hsl(360, 100%, 97%);
+  --bio-shadow: hsla(0, 0%, 0%, 30%);
+  --bio-radius-sm: 2px;
+  --bio-radius-md: 3px;
+  --bio-radius-lg: 4px;
+}
+
 .fjs-container {
-  --color-grey-225-10-15: hsl(225, 10%, 15%);
-  --color-grey-225-10-35: hsl(225, 10%, 35%);
-  --color-grey-225-10-45: hsl(225, 10%, 45%);
-  --color-grey-225-10-55: hsl(225, 10%, 55%);
-  --color-grey-225-10-75: hsl(225, 10%, 75%);
-  --color-grey-225-10-80: hsl(225, 10%, 80%);
-  --color-grey-225-10-85: hsl(225, 10%, 85%);
-  --color-grey-225-10-90: hsl(225, 10%, 90%);
-  --color-grey-225-10-93: hsl(225, 10%, 93%);
-  --color-grey-225-10-95: hsl(225, 10%, 95%);
-  --color-grey-225-10-97: hsl(225, 10%, 97%);
-  --color-grey-0-0-88: hsl(0, 0%, 88%);
-
-  --color-blue-219-100-53: hsl(219, 99%, 53%);
-  --color-blue-219-100-53-05: hsla(219, 99%, 53%, 0.5);
-  --color-blue-205-100-40: hsl(205, 100%, 40%);
-  --color-blue-205-100-45: hsl(205, 100%, 45%);
-  --color-blue-205-100-50: hsl(205, 100%, 50%);
-  --color-blue-205-100-80: hsl(205, 100%, 80%);
-  --color-blue-205-100-95: hsl(205, 100%, 95%);
-
-  --color-green-150-86-44: hsl(150, 86%, 44%);
-
-  --color-red-360-100-40: hsl(360, 100%, 40%);
-  --color-red-360-100-45: hsl(360, 100%, 45%);
-  --color-red-360-100-92: hsl(360, 100%, 92%);
-  --color-red-360-100-95: hsl(360, 100%, 95%);
-  --color-red-360-100-97: hsl(360, 100%, 97%);
-
-  --color-white: hsl(0, 0%, 100%);
-  --color-black: hsl(0, 0%, 0%);
-
-  /**
-   * Specify color variables in the following schema:
-   * 1 - use specified layer
-   * 2 - use layer one
-   * 3 - use fallback 
-   */
-  --color-background: var(--cds-field, var(--cds-field-01, var(--color-white)));
-  --color-background-disabled: var(--cds-background, var(--color-grey-225-10-95));
-  --color-background-readonly: var(--cds-background, var(--color-grey-225-10-95));
-  --color-background-adornment: var(--cds-field, var(--cds-field-01, var(--color-grey-225-10-95)));
-  --color-background-inverted: var(--cds-background-inverse, var(--color-grey-225-10-90));
-  --color-background-inverted-hover: var(--cds-background-inverse-hover, var(--color-grey-225-10-93));
-  --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
-  --color-layer: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
-  --color-layer-accent: var(--cds-layer-accent, var(--color-grey-0-0-88));
-  --color-background-pre: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
-
-  --color-icon-base: var(--cds-icon-primary, var(--color-black));
-  --color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
-  --color-text: var(--cds-text-primary, var(--color-grey-225-10-15));
-  --color-text-light: var(--cds-text-secondary, var(--color-grey-225-10-35));
-  --color-text-lighter: var(--cds-text-secondary, var(--color-grey-225-10-45));
-  --color-text-lightest: var(--cds-text-placeholder, var(--color-grey-225-10-55));
-  --color-text-inverted: var(--cds-text-inverse, var(--color-text));
-  --color-text-disabled: var(--cds-text-disabled, var(--color-text-light));
-
-  --color-borders: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-55)));
-  --color-borders-group: var(--cds-border-subtle, var(--color-grey-225-10-85));
+
+  --color-background: var(--bio-surface);
+  --color-background-disabled: var(--bio-surface-medium);
+  --color-background-readonly: var(--bio-surface-medium);
+  --color-background-adornment: var(--bio-surface-medium);
+  --color-background-inverted: var(--bio-surface-strong);
+  --color-background-inverted-hover: var(--bio-surface-medium);
+  /* despite the name, form-js applies this on `:hover` and `:focus-visible` */
+  --color-background-active: var(--bio-neutral-subtle-hover);
+  --color-layer: var(--bio-surface);
+  --color-layer-accent: var(--bio-surface-strong);
+  --color-background-pre: var(--bio-surface);
+
+  --color-icon-base: var(--bio-text);
+  --color-icon-inverted: var(--bio-text);
+  --color-text: var(--bio-text);
+  --color-text-light: var(--bio-text-subtle);
+  --color-text-lighter: var(--bio-text-subtlest);
+  --color-text-inverted: var(--color-text);
+  --color-text-disabled: var(--color-text-lighter);
+  --color-text-on-primary: var(--bio-text-on-primary);
+  --color-text-placeholder: var(--bio-text-subtle);
+  --color-focus: var(--bio-focus);
+
+  --button-border-radius: var(--bio-radius-md);
+  --input-border-radius: var(--bio-radius-sm);
+  --surface-border-radius: var(--bio-radius-lg);
+  --color-borders: var(--bio-border-input);
+  --color-borders-group: var(--bio-border-subtle);
   --color-borders-table: var(--color-borders-group);
-  --color-borders-documentPreview: var(--cds-border-subtle, var(--color-grey-225-10-85));
-  --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
-  --color-borders-adornment: var(--cds-border-subtle, var(--cds-border-subtle-01, var(--color-grey-225-10-85)));
-  --color-borders-readonly: var(--cds-border-subtle, var(--color-grey-225-10-75));
-  --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
-  --color-borders-pre: var(--cds-border-subtle, var(--color-grey-225-10-85));
-
-  --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
-  --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
-  --color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
-  --color-accent-readonly: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-55)));
-  --color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
-  --color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
+  --color-borders-documentPreview: var(--bio-border-subtle);
+  --color-borders-disabled: var(--bio-border);
+  --color-borders-adornment: var(--bio-border-subtle);
+  --color-borders-readonly: var(--bio-border);
+  --color-borders-inverted: var(--bio-border-disabled);
+  --color-borders-pre: var(--bio-border-subtle);
+
+  --color-warning: var(--bio-danger);
+  --color-warning-light: var(--bio-danger-surface);
+  --color-accent: var(--bio-primary);
+  --color-accent-readonly: var(--bio-text-subtlest);
+  --color-shadow: var(--bio-shadow);
+
+  --color-datepicker-background: var(--bio-surface);
+  --color-datepicker-border: var(--bio-border);
+  --color-datepicker-header-background: var(--bio-surface-medium);
+  --color-datepicker-header-color: var(--bio-text-subtle);
+  --color-datepicker-day-color: var(--bio-text);
+  --color-datepicker-day-hover-background: var(--bio-surface-strong);
+  --color-datepicker-day-disabled-color: var(--bio-text-subtlest);
+  --color-datepicker-range-background: var(--bio-surface-medium);
+  --color-datepicker-focused-day: var(--bio-text-subtlest);
 
   --font-family: 'IBM Plex Sans', sans-serif;
 
@@ -96,7 +109,7 @@
 
   --border-definition: 1px solid var(--color-borders);
   --border-definition-adornment: 1px solid var(--color-borders-adornment);
-  --outline-definition: 1px solid var(--cds-focus, var(--color-borders));
+  --outline-definition: 2px solid var(--bio-focus-ring);
   --button-warning-outline-definition: 2px solid var(--color-warning);
   --border-definition-disabled: 1px solid var(--color-borders-disabled);
   --border-definition-readonly: 1px solid var(--color-borders-readonly);
@@ -104,42 +117,6 @@
   height: 100%;
 }
 
-.fjs-no-theme {
-  --cds-field: initial;
-  --cds-field-01: initial;
-  --cds-background: initial;
-  --cds-background-inverse: initial;
-  --cds-background-inverse-hover: initial;
-  --cds-background-active: initial;
-  --cds-layer: initial;
-  --cds-layer-01: initial;
-  --cds-layer-02: initial;
-  --cds-icon-primary: initial;
-  --cds-icon-secondary: initial;
-  --cds-icon-inverse: initial;
-  --cds-text-primary: initial;
-  --cds-text-secondary: initial;
-  --cds-text-placeholder: initial;
-  --cds-text-inverse: initial;
-  --cds-text-disabled: initial;
-  --cds-border-strong: initial;
-  --cds-border-strong-01: initial;
-  --cds-border-disabled: initial;
-  --cds-border-subtle: initial;
-  --cds-border-subtle-01: initial;
-  --cds-border-inverse: initial;
-  --cds-text-error: initial;
-  --cds-link-primary: initial;
-  --cds-button-primary: initial;
-  --cds-shadow: initial;
-  --cds-focus: initial;
-  --cds-interactive: initial;
-  --cds-border-interactive: initial;
-  --cds-highlight: initial;
-  --cds-field-02: initial;
-  --cds-field-hover-02: initial;
-  --cds-toggle-off: initial;
-}
 
 /**
  * Layout styles
@@ -277,7 +254,7 @@
 .fjs-container .fjs-select [disabled],
 .fjs-container .fjs-select > option:read-only,
 .fjs-container .fjs-select [read-only] {
-  color: var(--color-text-lightest);
+  color: var(--color-text-light);
   font-size: var(--font-size-input);
   line-height: var(--line-height-input);
   letter-spacing: var(--letter-spacing-input);
@@ -290,12 +267,16 @@
   display: flex;
 }
 
+.fjs-container .fjs-inline-label > .fjs-form-field-label {
+  margin-top: 3px;
+}
+
 .fjs-container .fjs-form-field-label {
   display: flex;
   align-items: center;
   white-space: nowrap;
   overflow: hidden;
-  color: var(--color-text-light);
+  color: var(--color-text);
 }
 
 .fjs-container .fjs-incollapsible-label {
@@ -311,7 +292,7 @@
 }
 
 .fjs-container .fjs-form-field-description {
-  color: var(--color-text-lighter);
+  color: var(--color-text-light);
 }
 
 .fjs-container .fjs-form-field-grouplike {
@@ -427,7 +408,7 @@
   border-color: var(--color-borders-adornment);
   background-color: var(--color-background-adornment);
   line-height: var(--line-height-input);
-  color: var(--color-text-lighter);
+  color: var(--color-text-light);
   padding: 8px;
   width: auto !important;
   min-width: min(34px, 20%);
@@ -477,7 +458,7 @@
   padding: 8px;
   margin: 4px 0;
   border: var(--border-definition);
-  border-radius: 3px;
+  border-radius: var(--input-border-radius);
 }
 
 .fjs-container .fjs-input-group .fjs-input[type='text'],
@@ -521,7 +502,8 @@
   height: var(--form-field-height);
   margin: 4px 0;
   border: var(--border-definition);
-  border-radius: 3px;
+  border-radius: var(--input-border-radius);
+  background-color: var(--color-background);
 }
 
 .fjs-container .fjs-input-group .fjs-input[type='text'],
@@ -555,7 +537,7 @@
 .fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
 .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display,
 .fjs-container .fjs-readonly .fjs-input-group .fjs-select-display {
-  color: var(--color-text-lighter);
+  color: var(--color-text-light);
   line-height: var(--line-height-input);
 }
 
@@ -572,15 +554,15 @@
 }
 
 .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-right {
-  border-radius: 0 3px 3px 0;
+  border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
 }
 
 .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-left {
-  border-radius: 3px 0 0 3px;
+  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
 }
 
 .fjs-container .fjs-input-group .fjs-input {
-  border-radius: 3px;
+  border-radius: var(--input-border-radius);
 }
 
 .fjs-container .flatpickr-wrapper {
@@ -598,13 +580,16 @@
 
 .fjs-container .fjs-select-cross,
 .fjs-container .fjs-select-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 6px 10px;
 }
 
 .fjs-container .fjs-number-arrow-container {
   display: flex;
   flex-direction: column;
-  border-radius: 0 2px 2px 0;
+  border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
   width: clamp(16px, 40%, 23px);
   overflow: clip;
   border-left: var(--border-definition-adornment);
@@ -618,6 +603,9 @@
 .fjs-container .fjs-number-arrow-container button {
   border: none;
   flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: var(--color-text);
   background-color: var(--color-background);
   font-weight: bold;
@@ -627,7 +615,7 @@
 
 .fjs-container .fjs-number-arrow-container button:hover {
   background-color: var(--color-background-inverted-hover);
-  color: var(--cds-text-inverse, var(--color-text));
+  color: var(--color-text-inverted);
 }
 
 .fjs-container .fjs-form-field-number.fjs-readonly .fjs-number-arrow-container {
@@ -642,11 +630,14 @@
 .fjs-container .fjs-input[type='checkbox'],
 .fjs-container .fjs-input[type='radio'] {
   margin: 6px 10px 6px 4px;
+
+  /* native controls take their checked fill from the browser accent otherwise */
+  accent-color: var(--color-accent);
 }
 
 .fjs-container .fjs-button[type='submit'],
 .fjs-container .fjs-button[type='button'] {
-  color: var(--cds-text-inverse, var(--color-white));
+  color: var(--color-text-on-primary);
   background-color: var(--color-accent);
   border-color: var(--color-accent);
 }
@@ -662,6 +653,7 @@
 .fjs-container .fjs-button[type='reset'] {
   min-width: 100px;
   width: auto;
+  border-radius: var(--button-border-radius);
 }
 
 .fjs-container .fjs-button[type='submit'],
@@ -681,6 +673,7 @@
 .fjs-container .fjs-textarea:focus,
 .fjs-container .fjs-select:focus {
   outline: var(--outline-definition);
+  border-color: var(--color-focus);
 }
 
 .fjs-container .fjs-input-group .fjs-input,
@@ -705,12 +698,12 @@
 .fjs-container .fjs-taglist.fjs-disabled,
 .fjs-container .fjs-disabled .fjs-input-group {
   color: var(--color-text-disabled);
-  background-color: var(--cds-field, var(--color-background-disabled));
+  background-color: var(--color-background-disabled);
   border-color: var(--color-borders-disabled);
 }
 
 .fjs-container .fjs-number-arrow-container.fjs-disabled button {
-  background-color: var(--cds-toggle-off, var(--color-background-disabled));
+  background-color: var(--color-background-disabled);
 }
 
 .fjs-container .fjs-readonly .fjs-input:read-only:not(:disabled),
@@ -739,19 +732,11 @@
 .fjs-container .fjs-button[type='submit']:disabled,
 .fjs-container .fjs-button[type='button']:disabled,
 .fjs-container .fjs-button[type='reset']:disabled {
-  color: var(--cds-text-on-color-disabled, var(--color-text-light));
+  color: var(--color-text-disabled);
   background-color: var(--color-background-disabled);
   border-color: var(--color-borders-disabled);
 }
 
-.fjs-container .fjs-button[type='submit']:read-only,
-.fjs-container .fjs-button[type='button']:read-only,
-.fjs-container .fjs-button[type='reset']:read-only {
-  color: var(--text-light);
-  background-color: var(--color-background-readonly);
-  border-color: var(--color-borders-readonly);
-}
-
 .fjs-container .fjs-disabled .fjs-input-group .fjs-input-adornment,
 .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container,
 .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator {
@@ -776,23 +761,23 @@
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group,
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group .fjs-input {
   border-color: var(--color-warning);
-  outline-color: var(--color-warning);
+  outline-color: var(--bio-focus-ring-danger);
 }
 
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container {
-  border-color: var(--color-red-360-100-92);
+  border-color: var(--bio-danger-surface);
 }
 
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-separator {
-  background-color: var(--color-red-360-100-92);
+  background-color: var(--bio-danger-surface);
 }
 
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button {
-  background-color: var(--color-red-360-100-97);
+  background-color: var(--bio-danger-surface-subtle);
 }
 
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button:hover {
-  background-color: var(--color-red-360-100-95);
+  background-color: var(--bio-danger-surface);
 }
 
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
@@ -860,6 +845,10 @@
   border: 1px solid var(--color-borders-pre);
   background: var(--color-background-pre);
   padding: 4px;
+
+  /* `pre` does not wrap, so a long line escapes the form instead of reflowing */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
 .fjs-container .fjs-taglist-anchor,
@@ -887,7 +876,7 @@
   flex-wrap: wrap;
   gap: 5px;
   border: var(--color-borders) solid 1px;
-  border-radius: 3px;
+  border-radius: var(--input-border-radius);
   margin: 4px 0;
   padding: 5px;
   background-color: var(--color-background);
@@ -919,7 +908,7 @@
   user-select: none;
   color: var(--color-text-inverted);
   background-color: var(--color-background-inverted);
-  border-radius: 2px;
+  border-radius: var(--button-border-radius);
 }
 
 .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag,
@@ -946,15 +935,15 @@
   overflow: clip;
   width: 24px;
   height: 24px;
-  text-align: center;
-  line-height: 28px;
-  background-color: var(--cds-background-inverse, var(--color-grey-225-10-80));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bio-neutral-subtle);
   border: none;
-  padding: 1px 0;
+  padding: 0;
 }
 
 .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove > svg {
-  margin-bottom: 4px;
   opacity: 0.6;
   color: var(--color-icon-inverted);
 }
@@ -988,7 +977,7 @@
   user-select: none;
   overflow-y: auto;
   width: 100%;
-  border-radius: 3px;
+  border-radius: var(--surface-border-radius);
   margin-top: 3px;
   box-shadow: 0px 0px 5px var(--color-shadow);
   background-color: var(--color-layer);
@@ -1011,7 +1000,7 @@
 
 .fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
   padding: 6px 8px;
-  color: var(--color-text-lightest);
+  color: var(--color-text-light);
 }
 
 .fjs-container .fjs-image-container {
@@ -1072,7 +1061,7 @@
   flex-direction: column;
   overflow-x: hidden;
   border: 1px solid var(--color-borders-group);
-  border-radius: 3px;
+  border-radius: var(--surface-border-radius);
 }
 
 .fjs-container .fjs-table-middle-container.fjs-table-empty {
@@ -1089,7 +1078,8 @@
 
 .fjs-container .fjs-table {
   overflow-y: auto;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
 }
 
 .fjs-container .fjs-table-head {
@@ -1101,6 +1091,15 @@
   cursor: pointer;
 }
 
+/* match the container radius, minus its border, so the focus outline is not clipped */
+.fjs-container .fjs-table-th:first-child {
+  border-top-left-radius: calc(var(--surface-border-radius) - 1px);
+}
+
+.fjs-container .fjs-table-th:last-child {
+  border-top-right-radius: calc(var(--surface-border-radius) - 1px);
+}
+
 .fjs-container .fjs-table-th-label {
   user-select: none;
   display: flex;
@@ -1111,7 +1110,7 @@
 
 .fjs-container .fjs-table-th:focus {
   outline: var(--outline-definition);
-  outline-offset: -1px;
+  outline-offset: -2px;
 }
 
 .fjs-container .fjs-table-th,
@@ -1122,7 +1121,7 @@
   vertical-align: center;
 }
 
-.fjs-container .fjs-table-body .fjs-table-tr:not(:last-child) {
+.fjs-container .fjs-table-body .fjs-table-tr:not(:last-child) .fjs-table-td {
   border-bottom: 1px solid var(--color-borders-group);
 }
 
@@ -1150,9 +1149,13 @@
   margin-left: 16px;
 }
 
+.fjs-container .fjs-table-nav-button:last-of-type {
+  border-bottom-right-radius: calc(var(--surface-border-radius) - 1px);
+}
+
 .fjs-container .fjs-table-nav-button:focus {
   outline: var(--outline-definition);
-  outline-offset: -1px;
+  outline-offset: -2px;
 }
 
 .fjs-container .fjs-table-nav-button svg {
@@ -1178,7 +1181,7 @@
   align-items: center;
   justify-content: center;
   border: 1px solid var(--color-borders-documentPreview);
-  border-radius: 3px;
+  border-radius: var(--surface-border-radius);
 
   .fjs-form-field-error {
     align-self: flex-start;
@@ -1216,7 +1219,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 3px;
+  border-radius: var(--button-border-radius);
   border: 1px solid var(--color-borders-documentPreview);
   background: var(--color-layer);
   padding: 0;
@@ -1269,7 +1272,7 @@
   display: flex;
   width: 24px;
   height: 24px;
-  border-radius: 2px;
+  border-radius: var(--button-border-radius);
   align-items: center;
   justify-content: center;
 }
@@ -1358,11 +1361,16 @@
 }
 
 .fjs-container .flatpickr-days,
-.flatpickr-weekdays {
+.fjs-container .flatpickr-weekdays {
   padding: 10px;
   width: 100%;
 }
 
+.fjs-container .flatpickr-calendar.open,
+.fjs-container .dayContainer {
+  height: auto;
+}
+
 .fjs-container .flatpickr-calendar.hasTime.noCalendar {
   width: auto;
   max-width: 250px;
@@ -1372,6 +1380,124 @@
   width: 326px;
 }
 
+/* the vendored flatpickr theme hard-codes its palette, so the picker is themed here instead */
+.fjs-container .flatpickr-calendar,
+.fjs-container .flatpickr-innerContainer,
+.fjs-container .flatpickr-time {
+  background: var(--color-datepicker-background);
+}
+
+.fjs-container .flatpickr-calendar {
+  box-shadow: 0 3px 13px var(--color-shadow);
+}
+
+.fjs-container .flatpickr-days,
+.fjs-container .flatpickr-weekwrapper .flatpickr-weeks,
+.fjs-container .flatpickr-innerContainer,
+.fjs-container .flatpickr-calendar.hasTime .flatpickr-time,
+.fjs-container .numInputWrapper span {
+  border-color: var(--color-datepicker-border);
+}
+
+.fjs-container .flatpickr-calendar:not(.hasTime) .flatpickr-innerContainer {
+  border-bottom: 0;
+}
+
+.fjs-container .flatpickr-days {
+  border-left: 0;
+  border-right: 0;
+}
+
+.fjs-container .flatpickr-calendar.arrowTop::before,
+.fjs-container .flatpickr-calendar.arrowTop::after {
+  border-bottom-color: var(--color-datepicker-header-background);
+}
+
+.fjs-container .flatpickr-calendar.arrowBottom::before,
+.fjs-container .flatpickr-calendar.arrowBottom::after {
+  border-top-color: var(--color-datepicker-header-background);
+}
+
+.fjs-container .flatpickr-months .flatpickr-month,
+.fjs-container .flatpickr-weekdays,
+.fjs-container span.flatpickr-weekday,
+.fjs-container .flatpickr-current-month .flatpickr-monthDropdown-months {
+  background: var(--color-datepicker-header-background);
+  color: var(--color-datepicker-header-color);
+  fill: var(--color-datepicker-header-color);
+}
+
+.fjs-container .flatpickr-months .flatpickr-prev-month,
+.fjs-container .flatpickr-months .flatpickr-next-month {
+  color: var(--color-datepicker-header-color);
+  fill: var(--color-datepicker-header-color);
+}
+
+.fjs-container .flatpickr-months .flatpickr-prev-month:hover svg,
+.fjs-container .flatpickr-months .flatpickr-next-month:hover svg {
+  fill: var(--color-datepicker-day-color);
+}
+
+.fjs-container .flatpickr-day {
+  color: var(--color-datepicker-day-color);
+}
+
+.fjs-container .flatpickr-day:hover,
+.fjs-container .flatpickr-day:focus {
+  background: var(--color-datepicker-day-hover-background);
+  border-color: var(--color-datepicker-day-hover-background);
+}
+
+.fjs-container .flatpickr-day.prevMonthDay,
+.fjs-container .flatpickr-day.nextMonthDay,
+.fjs-container .flatpickr-day.flatpickr-disabled {
+  color: var(--color-datepicker-day-disabled-color);
+}
+
+.fjs-container .flatpickr-day.inRange {
+  background: var(--color-datepicker-range-background);
+  border-color: var(--color-datepicker-range-background);
+  box-shadow:
+    -5px 0 0 var(--color-datepicker-range-background),
+    5px 0 0 var(--color-datepicker-range-background);
+}
+
+.fjs-container .flatpickr-time input,
+.fjs-container .flatpickr-time .flatpickr-time-separator,
+.fjs-container .flatpickr-time .flatpickr-am-pm {
+  color: var(--color-datepicker-day-color);
+}
+
+.fjs-container .flatpickr-time input:hover,
+.fjs-container .flatpickr-time .flatpickr-am-pm:hover {
+  background: var(--color-datepicker-day-hover-background);
+}
+
+.fjs-container .numInputWrapper:hover,
+.fjs-container .numInputWrapper span:hover {
+  background: var(--color-datepicker-day-hover-background);
+}
+
+.fjs-container .numInputWrapper span svg path {
+  fill: var(--color-datepicker-header-color);
+}
+
+.fjs-container .flatpickr-current-month .numInputWrapper span.arrowUp::after {
+  border-bottom-color: var(--color-datepicker-header-color);
+}
+
+.fjs-container .flatpickr-current-month .numInputWrapper span.arrowDown::after {
+  border-top-color: var(--color-datepicker-header-color);
+}
+
+.fjs-container .flatpickr-time .numInputWrapper span.arrowUp::after {
+  border-bottom-color: var(--color-datepicker-day-color);
+}
+
+.fjs-container .flatpickr-time .numInputWrapper span.arrowDown::after {
+  border-top-color: var(--color-datepicker-day-color);
+}
+
 .fjs-hidden {
   display: none;
 }