@databricks/design-system 2.0.6 → 2.0.7

package/dist/index-dark.css

@@ -16467,6 +16467,18 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-shape-pill: 999px;
 }
 
+:where(.du-bois-dark) {
+  /* Shape */
+  /* Mirrors the ShapeTokens host-override var used by Card; falls back to the theme radius. */
+  --db-card-border-radius: var(--info-container-border-radius, 8px);
+
+  /* Color */
+  --db-card-surface: var(--db-surface-base);
+  --db-card-text: var(--db-text-base);
+  --db-card-border: var(--db-border-base);
+  --db-card-border-hover: var(--db-border-strong);
+}
+
 :where(.du-bois-dark) {
   /* Shape */
   /* Mirrors the ShapeTokens host-override var used by list items; falls back to the theme radius. */
@@ -16543,6 +16555,28 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-selection-toggle-transition-duration: 120ms;
 }
 
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-avatar-border-radius: var(--db-radius-sm);
+
+  /* Density */
+  --db-avatar-group-gap: var(--db-space-1);
+  --db-avatar-group-border-width: 1px;
+
+  /* Color */
+  /* No v2 token holds the secondary icon glyph yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-avatar-icon: var(--db-color-text-secondary);
+  /* No v2 token holds the default avatar surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-avatar-surface: var(--db-color-tag-background-default);
+  /* No v2 token holds the group divider border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-avatar-group-border-color: var(--db-color-background-primary);
+}
+
+:where(.du-bois-dark) {
+  /* Color */
+  /* No v2 token holds the initials/icon glyph on a colored avatar yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-avatar-text: #e8ecf0;
+}
 
 
 /* Component-tier tokens for the native <Button>, grouped by area (density, shape, typography, color).
@@ -16813,6 +16847,17 @@ span.du-bois-dark-typography-ellipsis-single-line {
 }
 
 
+:where(.du-bois-dark) {
+  /* Color */
+  --db-empty-text: var(--db-text-subtle);
+  --db-empty-image-color: var(--db-text-disabled);
+
+  /* Density */
+  --db-empty-image-size: calc(var(--db-size-8) * 2);
+  --db-empty-image-spacing: var(--db-space-4);
+  --db-empty-description-spacing: var(--db-space-4);
+  --db-empty-max-width: 600px;
+}
 
 
 
@@ -16850,6 +16895,21 @@ span.du-bois-dark-typography-ellipsis-single-line {
 }
 
 
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-listbox-border-radius: var(--db-list-item-border-radius);
+  --db-listbox-focus-ring-width: var(--db-focus-ring-width);
+
+  /* Color */
+  --db-listbox-surface: var(--db-list-surface);
+  --db-listbox-empty-text: var(--db-text-subtle);
+  --db-listbox-focus-ring-color: var(--db-focus-ring-color);
+
+  /* Density */
+  --db-listbox-spacing: var(--db-space-2);
+  --db-listbox-empty-spacing-horizontal: var(--db-space-3);
+  --db-listbox-empty-spacing-vertical: calc(var(--db-space-2) * 0.75);
+}
 
 
 :where(.du-bois-dark) {
@@ -16876,6 +16936,36 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-navigation-menu-focus-ring-width: var(--db-focus-ring-width);
 }
 
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-notification-border-radius: var(--db-popup-border-radius);
+
+  /* Density */
+  --db-notification-padding: var(--db-space-3);
+  --db-notification-column-gap: var(--db-space-1);
+  --db-notification-description-gap: var(--db-space-1);
+  --db-notification-close-offset: calc(var(--db-space-1) * 1.5);
+  --db-notification-close-size: var(--db-size-5);
+  --db-notification-viewport-padding: var(--db-space-3);
+  --db-notification-viewport-gap: var(--db-space-3);
+  --db-notification-viewport-margin: var(--db-space-6);
+  --db-notification-viewport-width: 440px;
+
+  /* Color */
+  --db-notification-surface: var(--db-popup-surface);
+  --db-notification-border: var(--db-popup-border);
+  --db-notification-text: var(--db-popup-text);
+  --db-notification-icon: var(--db-text-subtle);
+  --db-notification-icon-success: var(--db-positive-text);
+  --db-notification-icon-warning: var(--db-caution-text);
+  --db-notification-icon-error: var(--db-negative-text);
+}
+
+:where(.du-bois-dark) {
+  /* Elevation */
+  /* No v1/v2 system token holds this dark shadow; --db-elevation-med is theme-invariant (light). TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-notification-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
+}
 
 :where(.du-bois-dark) {
   /* Color */
@@ -16921,6 +17011,45 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-popover-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
 }
 
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-preview-card-border-radius: var(--db-card-border-radius);
+  --db-preview-card-image-border-radius: var(--info-container-border-radius, 4px);
+  --db-preview-card-border-width: 1px;
+
+  /* Density */
+  --db-preview-card-padding: var(--db-space-4);
+  --db-preview-card-padding-large: var(--db-space-6);
+  --db-preview-card-gap: var(--db-space-2);
+  --db-preview-card-gap-large: var(--db-space-4);
+  --db-preview-card-action-spacing: var(--db-space-4);
+
+  /* Color */
+  --db-preview-card-text: var(--db-text-subtle);
+  --db-preview-card-title-text: var(--db-card-text);
+  --db-preview-card-border: var(--db-card-border);
+  /* No v2 token holds the active/focus border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-border-hover: var(--db-color-action-default-border-hover);
+  /* No v2 token holds the focus outline ring yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-border-focus: var(--db-color-action-default-border-focus);
+  /* No v2 token holds the active surface tint yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-surface-active: var(--db-color-action-tertiary-background-press);
+  --db-preview-card-surface-disabled: var(--db-surface-disabled);
+  /* No v2 token holds the disabled border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-border-disabled: var(--db-color-action-disabled-border);
+  --db-preview-card-text-disabled: var(--db-text-disabled);
+
+  /* Typography */
+  --db-preview-card-title-font-weight: var(--db-font-weight-semibold);
+}
+
+:where(.du-bois-dark) {
+  /* Elevation */
+
+  /* No v2 elevation token holds the dark shadows yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.45), 0px 1px 0px 0px rgba(0, 0, 0, 0.26);
+  --db-preview-card-shadow-hover: 0px 3px 6px 0px rgba(0, 0, 0, 0.45);
+}
 
 /* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
  * `.du-bois-dark` subtree instead of freezing at the light values. */
@@ -17217,7 +17346,12 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-switch-transition-duration: var(--db-selection-toggle-transition-duration);
 }
 
-/* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled. */
+/* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled.
+ * Scoped via the `.db-switch-input` class, never a bare `input`: `.db-switch .db-switch-input` is
+ * specificity (0,2,0), which out-ranks a host app's `input[type='checkbox'] { width: auto }` reset
+ * (e.g. Bootstrap, loaded in webapp). A bare `.db-switch input` (0,1,1) merely ties that reset and, losing
+ * on load order, has its `inline-size` overridden to `auto` — collapsing the track to zero width and
+ * leaving only the floating thumb. Mirrors NativeCheckbox's `.db-checkbox-input`. */
 
 /* The thumb. A pseudo-element keeps the input the switch's only element, so nothing can overlay it
  * and intercept clicks. Offset left by the border width to sit flush with the track's outer edge. */

package/dist/index-dark.mitigated.css

@@ -16293,6 +16293,18 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-shape-pill: 999px;
 }
 
+:where(.du-bois-dark) {
+  /* Shape */
+  /* Mirrors the ShapeTokens host-override var used by Card; falls back to the theme radius. */
+  --db-card-border-radius: var(--info-container-border-radius, 8px);
+
+  /* Color */
+  --db-card-surface: var(--db-surface-base);
+  --db-card-text: var(--db-text-base);
+  --db-card-border: var(--db-border-base);
+  --db-card-border-hover: var(--db-border-strong);
+}
+
 :where(.du-bois-dark) {
   /* Shape */
   /* Mirrors the ShapeTokens host-override var used by list items; falls back to the theme radius. */
@@ -16369,6 +16381,28 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-selection-toggle-transition-duration: 120ms;
 }
 
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-avatar-border-radius: var(--db-radius-sm);
+
+  /* Density */
+  --db-avatar-group-gap: var(--db-space-1);
+  --db-avatar-group-border-width: 1px;
+
+  /* Color */
+  /* No v2 token holds the secondary icon glyph yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-avatar-icon: var(--db-color-text-secondary);
+  /* No v2 token holds the default avatar surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-avatar-surface: var(--db-color-tag-background-default);
+  /* No v2 token holds the group divider border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-avatar-group-border-color: var(--db-color-background-primary);
+}
+
+:where(.du-bois-dark) {
+  /* Color */
+  /* No v2 token holds the initials/icon glyph on a colored avatar yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-avatar-text: #e8ecf0;
+}
 
 
 /* Component-tier tokens for the native <Button>, grouped by area (density, shape, typography, color).
@@ -16639,6 +16673,17 @@ span.du-bois-dark-typography-ellipsis-single-line {
 }
 
 
+:where(.du-bois-dark) {
+  /* Color */
+  --db-empty-text: var(--db-text-subtle);
+  --db-empty-image-color: var(--db-text-disabled);
+
+  /* Density */
+  --db-empty-image-size: calc(var(--db-size-8) * 2);
+  --db-empty-image-spacing: var(--db-space-4);
+  --db-empty-description-spacing: var(--db-space-4);
+  --db-empty-max-width: 600px;
+}
 
 
 
@@ -16676,6 +16721,21 @@ span.du-bois-dark-typography-ellipsis-single-line {
 }
 
 
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-listbox-border-radius: var(--db-list-item-border-radius);
+  --db-listbox-focus-ring-width: var(--db-focus-ring-width);
+
+  /* Color */
+  --db-listbox-surface: var(--db-list-surface);
+  --db-listbox-empty-text: var(--db-text-subtle);
+  --db-listbox-focus-ring-color: var(--db-focus-ring-color);
+
+  /* Density */
+  --db-listbox-spacing: var(--db-space-2);
+  --db-listbox-empty-spacing-horizontal: var(--db-space-3);
+  --db-listbox-empty-spacing-vertical: calc(var(--db-space-2) * 0.75);
+}
 
 
 :where(.du-bois-dark) {
@@ -16702,6 +16762,36 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-navigation-menu-focus-ring-width: var(--db-focus-ring-width);
 }
 
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-notification-border-radius: var(--db-popup-border-radius);
+
+  /* Density */
+  --db-notification-padding: var(--db-space-3);
+  --db-notification-column-gap: var(--db-space-1);
+  --db-notification-description-gap: var(--db-space-1);
+  --db-notification-close-offset: calc(var(--db-space-1) * 1.5);
+  --db-notification-close-size: var(--db-size-5);
+  --db-notification-viewport-padding: var(--db-space-3);
+  --db-notification-viewport-gap: var(--db-space-3);
+  --db-notification-viewport-margin: var(--db-space-6);
+  --db-notification-viewport-width: 440px;
+
+  /* Color */
+  --db-notification-surface: var(--db-popup-surface);
+  --db-notification-border: var(--db-popup-border);
+  --db-notification-text: var(--db-popup-text);
+  --db-notification-icon: var(--db-text-subtle);
+  --db-notification-icon-success: var(--db-positive-text);
+  --db-notification-icon-warning: var(--db-caution-text);
+  --db-notification-icon-error: var(--db-negative-text);
+}
+
+:where(.du-bois-dark) {
+  /* Elevation */
+  /* No v1/v2 system token holds this dark shadow; --db-elevation-med is theme-invariant (light). TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-notification-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
+}
 
 :where(.du-bois-dark) {
   /* Color */
@@ -16747,6 +16837,45 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-popover-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
 }
 
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-preview-card-border-radius: var(--db-card-border-radius);
+  --db-preview-card-image-border-radius: var(--info-container-border-radius, 4px);
+  --db-preview-card-border-width: 1px;
+
+  /* Density */
+  --db-preview-card-padding: var(--db-space-4);
+  --db-preview-card-padding-large: var(--db-space-6);
+  --db-preview-card-gap: var(--db-space-2);
+  --db-preview-card-gap-large: var(--db-space-4);
+  --db-preview-card-action-spacing: var(--db-space-4);
+
+  /* Color */
+  --db-preview-card-text: var(--db-text-subtle);
+  --db-preview-card-title-text: var(--db-card-text);
+  --db-preview-card-border: var(--db-card-border);
+  /* No v2 token holds the active/focus border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-border-hover: var(--db-color-action-default-border-hover);
+  /* No v2 token holds the focus outline ring yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-border-focus: var(--db-color-action-default-border-focus);
+  /* No v2 token holds the active surface tint yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-surface-active: var(--db-color-action-tertiary-background-press);
+  --db-preview-card-surface-disabled: var(--db-surface-disabled);
+  /* No v2 token holds the disabled border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-border-disabled: var(--db-color-action-disabled-border);
+  --db-preview-card-text-disabled: var(--db-text-disabled);
+
+  /* Typography */
+  --db-preview-card-title-font-weight: var(--db-font-weight-semibold);
+}
+
+:where(.du-bois-dark) {
+  /* Elevation */
+
+  /* No v2 elevation token holds the dark shadows yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.45), 0px 1px 0px 0px rgba(0, 0, 0, 0.26);
+  --db-preview-card-shadow-hover: 0px 3px 6px 0px rgba(0, 0, 0, 0.45);
+}
 
 /* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
  * `.du-bois-dark` subtree instead of freezing at the light values. */
@@ -17043,7 +17172,12 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-switch-transition-duration: var(--db-selection-toggle-transition-duration);
 }
 
-/* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled. */
+/* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled.
+ * Scoped via the `.db-switch-input` class, never a bare `input`: `.db-switch .db-switch-input` is
+ * specificity (0,2,0), which out-ranks a host app's `input[type='checkbox'] { width: auto }` reset
+ * (e.g. Bootstrap, loaded in webapp). A bare `.db-switch input` (0,1,1) merely ties that reset and, losing
+ * on load order, has its `inline-size` overridden to `auto` — collapsing the track to zero width and
+ * leaving only the floating thumb. Mirrors NativeCheckbox's `.db-checkbox-input`. */
 
 /* The thumb. A pseudo-element keeps the input the switch's only element, so nothing can overlay it
  * and intercept clicks. Offset left by the border width to sit flush with the track's outer edge. */
@@ -17176,17 +17310,20 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 
   :where(.du-bois-dark-btn-icon-only) > :where(.anticon),
-  :where(.du-bois-dark-btn-icon-only) > :where(.du-bois-dark-btn-loading-icon) {
+  :where(.du-bois-dark-btn-icon-only) > :where(.du-bois-dark-btn-loading-icon),
+  :where(.du-bois-dark-btn-icon-only) > :where(.db-icon) {
     font-size: 15px;
   }
 
   .du-bois-dark-btn-icon-only:where(.du-bois-dark-btn-lg) > .anticon,
-  .du-bois-dark-btn-icon-only:where(.du-bois-dark-btn-lg) > .du-bois-dark-btn-loading-icon {
+  .du-bois-dark-btn-icon-only:where(.du-bois-dark-btn-lg) > .du-bois-dark-btn-loading-icon,
+  .du-bois-dark-btn-icon-only:where(.du-bois-dark-btn-lg) > .db-icon {
     font-size: 20px;
   }
 
   .du-bois-dark-btn-icon-only:where(.du-bois-dark-btn-sm) > .anticon,
-  .du-bois-dark-btn-icon-only:where(.du-bois-dark-btn-sm) > .du-bois-dark-btn-loading-icon {
+  .du-bois-dark-btn-icon-only:where(.du-bois-dark-btn-sm) > .du-bois-dark-btn-loading-icon,
+  .du-bois-dark-btn-icon-only:where(.du-bois-dark-btn-sm) > .db-icon {
     font-size: 13px;
   }
 
@@ -17211,7 +17348,8 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 
   .du-bois-dark-btn:where([disabled]) > .anticon,
-  .du-bois-dark-btn:where([disabled]) > .du-bois-dark-btn-loading-icon {
+  .du-bois-dark-btn:where([disabled]) > .du-bois-dark-btn-loading-icon,
+  .du-bois-dark-btn:where([disabled]) > .db-icon {
     pointer-events: none;
   }
 
@@ -17248,13 +17386,15 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 
   :where(.du-bois-dark-select-multiple) .du-bois-dark-select-selection-item-remove > .anticon,
-  :where(.du-bois-dark-select-multiple) .du-bois-dark-select-selection-item-remove > .du-bois-dark-select-selection-item-remove-icon {
+  :where(.du-bois-dark-select-multiple) .du-bois-dark-select-selection-item-remove > .du-bois-dark-select-selection-item-remove-icon,
+  :where(.du-bois-dark-select-multiple) .du-bois-dark-select-selection-item-remove > .db-icon {
     line-height: 1;
   }
 
 
   :where(.du-bois-dark-select-arrow) > .anticon,
-  :where(.du-bois-dark-select-arrow) > .du-bois-dark-select-arrow-icon {
+  :where(.du-bois-dark-select-arrow) > .du-bois-dark-select-arrow-icon,
+  :where(.du-bois-dark-select-arrow) > .db-icon {
     line-height: 1;
   }
 
@@ -17285,12 +17425,14 @@ span.du-bois-dark-typography-ellipsis-single-line {
   }
 
 
-  :where(.du-bois-dark-picker-suffix) > .anticon {
+  :where(.du-bois-dark-picker-suffix) > .anticon,
+  :where(.du-bois-dark-picker-suffix) > .db-icon {
     vertical-align: top;
   }
 
 
-  :where(.du-bois-dark-picker-clear) > .anticon {
+  :where(.du-bois-dark-picker-clear) > .anticon,
+  :where(.du-bois-dark-picker-clear) > .db-icon {
     vertical-align: top;
   }
 
@@ -17371,7 +17513,7 @@ span.du-bois-dark-typography-ellipsis-single-line {
   }
 
 
-  .du-bois-dark-menu-item:has(> .du-bois-dark-menu-item-icon, > .anticon) > .du-bois-dark-menu-title-content, .du-bois-dark-menu-submenu-title:has(> .du-bois-dark-menu-item-icon, > .anticon) > .du-bois-dark-menu-title-content {
+  .du-bois-dark-menu-item:has(> .du-bois-dark-menu-item-icon, > .anticon) > .du-bois-dark-menu-title-content, .du-bois-dark-menu-submenu-title:has(> .du-bois-dark-menu-item-icon, > .anticon) > .du-bois-dark-menu-title-content, .du-bois-dark-menu-item:has(> .du-bois-dark-menu-item-icon, > .db-icon) > .du-bois-dark-menu-title-content, .du-bois-dark-menu-submenu-title:has(> .du-bois-dark-menu-item-icon, > .db-icon) > .du-bois-dark-menu-title-content {
     margin-left: 10px;
     opacity: 1;
     transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.3s, color 0.3s;
@@ -17385,12 +17527,13 @@ span.du-bois-dark-typography-ellipsis-single-line {
     color: #fff;
   }
 
-  .du-bois-dark-menu-dark .du-bois-dark-menu-item-selected:has(> .du-bois-dark-menu-item-icon, > .anticon) > .du-bois-dark-menu-title-content {
+  .du-bois-dark-menu-dark .du-bois-dark-menu-item-selected:has(> .du-bois-dark-menu-item-icon, > .anticon) > .du-bois-dark-menu-title-content, .du-bois-dark-menu-dark .du-bois-dark-menu-item-selected:has(> .du-bois-dark-menu-item-icon, > .db-icon) > .du-bois-dark-menu-title-content {
     color: #fff;
   }
 
 
-  .du-bois-dark-breadcrumb-link > .anticon:not(:last-child) {
+  .du-bois-dark-breadcrumb-link > .anticon:not(:last-child),
+  .du-bois-dark-breadcrumb-link > .db-icon:not(:last-child) {
     margin-inline-end: 4px;
   }
 
@@ -17420,7 +17563,8 @@ span.du-bois-dark-typography-ellipsis-single-line {
   }
 
 
-  .du-bois-dark-btn > .anticon {
+  .du-bois-dark-btn > .anticon,
+  .du-bois-dark-btn > .db-icon {
     display: inline-block;
   }
 
@@ -17435,14 +17579,17 @@ span.du-bois-dark-typography-ellipsis-single-line {
   }
 
 
-  :where(.du-bois-dark-tag) > .anticon:first-child {
+  :where(.du-bois-dark-tag) > .anticon:first-child,
+  :where(.du-bois-dark-tag) > .db-icon:first-child {
     margin-right: 7px;
   }
-  :where(.du-bois-dark-tag):has(> .anticon:first-child) > .anticon:not(:first-child) {
+  :where(.du-bois-dark-tag):has(> .anticon:first-child) > .anticon:not(:first-child),
+  :where(.du-bois-dark-tag):has(> .db-icon:first-child) > .db-icon:not(:first-child) {
     margin-left: 7px;
   }
 
 
-  .du-bois-dark-btn > .anticon:not(:first-child) {
+  .du-bois-dark-btn > .anticon:not(:first-child),
+  .du-bois-dark-btn > .db-icon:not(:first-child) {
     margin-left: 8px;
   }