@boomerang-io/carbon-addons-boomerang-react 4.6.10-beta.6 → 4.6.11-beta.0

package/scss/global/index.scss

@@ -1,401 +1,402 @@
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// Defaults
-$use-theme-boomerang: false !default;
-$use-theme-advantage-white: false !default;
-
-// ====================//
-// Imports and Exports //
-// ====================//
-@use "sass:map";
-@use '@carbon/styles/scss/theme' as theme;
-@use '@carbon/react/scss/components/button/tokens' as button-tokens;
-@use 'config' as *;
-
-@use "./themes/default" as theme-default;
-@use "./themes/boomerang" as theme-boomerang;
-@use "./themes/shell-tokens" as shell;
-@use "./utils";
-
-// Import local styles for custom components
-@use '../components/AboutPlatform/aboutPlatform';
-@use '../components/AdvantageSideNav/advantageSideNav';
-@use '../components/AutoSuggest/autoSuggest';
-@use '../components/Avatar/avatar';
-@use '../components/CheckboxList/checkboxList';
-@use '../components/ComboBox/combobox';
-@use '../components/ComboBoxMultiSelect/comboBoxMultiSelect';
-@use '../components/ConfirmModal/confirmModal';
-@use '../components/Creatable/creatable';
-@use '../components/DateInput/dateInput';
-@use '../components/Feedback/feedback';
-@use '../components/DecisionButtons/decisionButtons';
-@use '../components/DynamicFormik/dynamicFormik';
-@use '../components/ErrorMessage/errorMessage';
-@use '../components/ErrorBoundary/errorBoundary';
-@use '../components/ErrorDragon/errorDragon';
-@use '../components/ErrorPage/errorPage';
-@use '../components/ErrorPageCore/errorPageCore';
-@use '../components/FeatureHeader/featureHeader';
-@use '../components/FeatureNavTab/featureNavTab';
-@use '../components/FeatureSideNav/featureSideNav';
-@use '../components/FeatureSideNavLink/featureSideNavLink';
-@use '../components/PrivacyRedirect/privacyRedirect';
-@use '../components/Header/header';
-@use '../components/Header/headerAppSwitcher';
-@use '../components/Header/headerTeamSwitcher';
-@use '../components/Header/headerMenu';
-@use '../components/Header/headerMenuItem';
-@use '../components/Header/userRequests';
-@use '../components/ImageModal/imageModal';
-@use '../components/MemberBar/memberBar';
-@use '../components/Modal/modal' as addons-modal;
-@use '../components/ModalConfirmEdit/modalConfirmEdit';
-@use '../components/Notifications/notifications';
-@use '../components/PlatformBanner/platformBanner';
-@use '../components/PlatformNotifications/platformNotifications';
-@use '../components/PrivacyStatement/privacyStatement';
-@use '../components/ProfileSettings/profileSettings';
-@use '../components/ProtectedRoute/protectedRoute';
-@use '../components/RadioGroup/radioGroup';
-@use '../components/SignOut/signOut';
-@use '../components/SupportCenter/supportCenter';
-@use '../components/RichTextArea/richTextArea';
-@use '../components/TextArea/textArea';
-@use '../components/TextInput/textInput';
-@use '../components/Toggle/toggle' as addons-toggle;
-@use '../components/TooltipHover/tooltip' as addons-tooltip;
-
-// css for external libs
-@use "./tippy";
-
-// UIShell tokens, create css properties for them by default
-:root {
-  @if ($use-theme-advantage-white) {
-    @include utils.create-properties(theme-default.$shell-white-tokens);
-  } @else {
-    @include utils.create-properties(theme-default.$shell-tokens);
-  }
-}
-
-.#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active) {
-  > .#{$prefix}--side-nav__link:hover {
-    > span {
-      color: shell.$bmrg-theme-primary;
-    }
-  }
-}
-
-//style for advantage sidenav
-.#{$prefix}--side-nav__icon {
-  svg {
-    fill: shell.$bmrg-theme-primary;
-  }
-}
-
-.#{$prefix}--side-nav__item--active {
-  .#{$prefix}--side-nav__icon {
-    svg {
-      fill: shell.$bmrg-theme-primary;
-    }
-  }
-}
-
-.#{$prefix}--side-nav__submenu,
-.#{$prefix}--header__action {
-  &:focus {
-    border-color: shell.$bmrg-accent;
-    outline: shell.$bmrg-accent 0.0625rem solid !important;
-  }
-}
-
-.#{$prefix}--skip-to-content {
-  background-color: shell.$bmrg-theme-background !important;
-  color: shell.$bmrg-theme-primary !important;
-}
-
-// Styles for the UIShell from addons
-.#{$prefix}--bmrg-header-modal {
-  .#{$prefix}--modal-container {
-    background-color: shell.$bmrg-theme-background;
-    border-radius: var(--cds-border-radius, 0);
-
-    * {
-      &:focus,
-      &::before {
-        outline-color: shell.$bmrg-secondary !important;
-        border-color: shell.$bmrg-secondary !important;
-      }
-    }
-
-    .#{$prefix}--btn:focus {
-      outline-color: shell.$bmrg-primary;
-      border: initial !important;
-    }
-
-    .#{$prefix}--modal-content {
-      color: var(--cds-text-primary);
-      padding: 0 1rem;
-      margin-bottom: 4rem;
-    }
-  }
-
-  .#{$prefix}--modal {
-    background-color: shell.$bmrg-header-modal-overlay; //default isrgba(theme.$layer-accent-01, 0.5)
-  }
-
-  .#{$prefix}--modal-close {
-    &:hover {
-      background-color: shell.$bmrg-header-hover-background;
-    }
-    &:focus {
-      outline: utils.rem(1px) solid shell.$bmrg-secondary;
-    }
-    svg {
-      fill: shell.$bmrg-theme-primary;
-    }
-  }
-
-  .#{$prefix}--modal-content {
-    width: 100%;
-  }
-
-  .#{$prefix}--modal-header__label {
-    color: shell.$bmrg-theme-primary;
-    text-transform: initial;
-  }
-
-  .#{$prefix}--modal-header__heading {
-    height: utils.rem(26px);
-    color: shell.$bmrg-theme-primary;
-    font-size: utils.rem(20px);
-  }
-
-  .#{$prefix}--modal-close__icon {
-    svg,
-    polygon,
-    path {
-      fill: shell.$bmrg-brand-white;
-    }
-  }
-  .#{$prefix}--modal-footer {
-    background-color: shell.$bmrg-primary;
-    margin: 0;
-    /** carbon 10 override */
-    padding: 0;
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    left: 0;
-
-    .#{$prefix}--btn {
-      border-radius: 0;
-
-      &.#{$prefix}--btn--primary {
-        border-bottom-right-radius: var(--cds-border-radius, 0);
-
-        &.#{$prefix}--btn:disabled {
-          opacity: 0.5;
-          border: unset;
-        }
-      }
-
-      &.#{$prefix}--btn--secondary {
-        border-bottom-left-radius: var(--cds-border-radius, 0);
-      }
-    }
-  }
-
-  .#{$prefix}--accordion__heading {
-    &:hover:before {
-      background-color: shell.$bmrg-header-hover-background;
-    }
-
-    &:focus:before {
-      border-color: shell.$bmrg-secondary;
-    }
-  }
-}
-
-// Styles for Boomerang theme
-@if ($use-theme-boomerang) {
-  // Some additional overrides to carbon base styles
-  // add :root to have a higher level of specificity and not rely in import order
-
-  // Set at root, only if theme is actually set
-  :root[data-carbon-theme="boomerang"] {
-    @include utils.create-properties(theme-boomerang.$shell-tokens);
-
-    button,
-    html [type="button"],
-    [type="reset"],
-    [type="submit"] {
-      appearance: none;
-    }
-
-    .#{$prefix}--btn {
-      border-radius: var(--cds-border-radius, 0);
-    }
-
-    .#{$prefix}--tooltip {
-      z-index: 9999;
-    }
-
-    .#{$prefix}--loading-overlay {
-      //harcoded to the RGBA value of the ui-background variable
-      background-color: rgba(242, 244, 248, 0.5);
-    }
-
-    .#{$prefix}--skeleton {
-      .#{$prefix}--data-table-header,
-      .#{$prefix}--table-toolbar {
-        display: none;
-      }
-    }
-
-    .#{$prefix}--form-item {
-      .#{$prefix}--text-input,
-      .#{$prefix}--text-area,
-      .#{$prefix}--number input[type="number"] {
-        border: none;
-        border-bottom: none;
-        border-radius: var(--cds-border-radius, 0);
-      }
-    }
-
-    .#{$prefix}--date-picker__input,
-    .#{$prefix}--dropdown,
-    .#{$prefix}--dropdown-text,
-    .#{$prefix}--overflow-menu-options,
-    .#{$prefix}--select-input,
-    .#{$prefix}--search .#{$prefix}--search-input,
-    .#{$prefix}--list-box,
-    .#{$prefix}--list-box input[role="combobox"],
-    .#{$prefix}--list-box__field[aria-expanded="true"],
-    .#{$prefix}--list-box__field,
-    .#{$prefix}--text-area,
-    .#{$prefix}--text-input {
-      border: none;
-      border-radius: var(--cds-border-radius, 0);
-    }
-
-    .#{$prefix}--text-area__wrapper {
-      width: 100%;
-    }
-
-    .#{$prefix}--form-requirement {
-      color: theme.$support-error;
-      &::before {
-        content: "";
-      }
-    }
-
-    .#{$prefix}--label,
-    .#{$prefix}--list-box__label {
-      color: theme.$text-primary;
-      font-family: "IBM Plex Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
-    }
-
-    .#{$prefix}--modal-container {
-      border-radius: var(--cds-border-radius, 0);
-    }
-
-    .#{$prefix}--modal-footer {
-      border-bottom-right-radius: var(--cds-border-radius, 0);
-      border-bottom-left-radius: var(--cds-border-radius, 0);
-      .#{$prefix}--btn {
-        border-radius: 0;
-
-        &:first-child {
-          border-bottom-left-radius: var(--cds-border-radius, 0);
-        }
-
-        &:last-child {
-          border-bottom-right-radius: var(--cds-border-radius, 0);
-        }
-
-        &:last-child:first-child {
-          border-bottom-left-radius: 0;
-        }
-      }
-    }
-
-    .#{$prefix}--search--xl {
-      .#{$prefix}--search-input,
-      .#{$prefix}--search-close {
-        height: 2.5rem;
-      }
-    }
-
-    // .#{$prefix}--btn--field {
-    //   height: 2.5rem;
-    //   min-height: 2.5rem;
-    // }
-
-    .#{$prefix}--checkbox-label::before {
-      border-radius: 0.15rem;
-    }
-
-    .#{$prefix}--checkbox:checked:focus + .#{$prefix}--checkbox-label:before,
-    .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label:before {
-      border-color: #005d5d;
-    }
-
-    .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::before {
-      background-color: theme.$support-success;
-      border-color: theme.$support-success;
-    }
-
-    .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu {
-      max-height: 24rem;
-    }
-
-    .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition {
-      border-bottom: none;
-    }
-
-    .#{$prefix}--tag {
-      font-size: 0.75rem;
-    }
-
-    .#{$prefix}--side-nav__item--large.#{$prefix}--side-nav__submenu {
-      height: 3rem;
-    }
-
-    // DataTable Overrides
-    .#{$prefix}--data-table:not(.#{$prefix}--skeleton)
-      th:first-of-type:not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-checkbox) {
-      padding-left: 0;
-    }
-
-    .#{$prefix}--data-table .#{$prefix}--table-header-label {
-      padding: 0.875rem 1rem;
-    }
-
-    .#{$prefix}--table-sort {
-      padding: 0 1rem 0 0;
-    }
-
-    .#{$prefix}--data-table:not(.#{$prefix}--skeleton) th:not(.#{$prefix}--table-column-checkbox) {
-      padding: 0;
-    }
-
-    .#{$prefix}--data-table td {
-      max-width: 20rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-}
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+
+
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Defaults
+$use-theme-boomerang: false !default;
+$use-theme-advantage-white: false !default;
+
+// ====================//
+// Imports and Exports //
+// ====================//
+@use "sass:map";
+@use '@carbon/styles/scss/theme' as theme;
+@use '@carbon/react/scss/components/button/tokens' as button-tokens;
+@use 'config' as *;
+
+@use "./themes/default" as theme-default;
+@use "./themes/boomerang" as theme-boomerang;
+@use "./themes/shell-tokens" as shell;
+@use "./utils";
+
+// Import local styles for custom components
+@use '../components/AboutPlatform/aboutPlatform';
+@use '../components/AdvantageSideNav/advantageSideNav';
+@use '../components/AutoSuggest/autoSuggest';
+@use '../components/Avatar/avatar';
+@use '../components/CheckboxList/checkboxList';
+@use '../components/ComboBox/combobox';
+@use '../components/ComboBoxMultiSelect/comboBoxMultiSelect';
+@use '../components/ConfirmModal/confirmModal';
+@use '../components/Creatable/creatable';
+@use '../components/DateInput/dateInput';
+@use '../components/Feedback/feedback';
+@use '../components/DecisionButtons/decisionButtons';
+@use '../components/DynamicFormik/dynamicFormik';
+@use '../components/ErrorMessage/errorMessage';
+@use '../components/ErrorBoundary/errorBoundary';
+@use '../components/ErrorDragon/errorDragon';
+@use '../components/ErrorPage/errorPage';
+@use '../components/ErrorPageCore/errorPageCore';
+@use '../components/FeatureHeader/featureHeader';
+@use '../components/FeatureNavTab/featureNavTab';
+@use '../components/FeatureSideNav/featureSideNav';
+@use '../components/FeatureSideNavLink/featureSideNavLink';
+@use '../components/PrivacyRedirect/privacyRedirect';
+@use '../components/Header/header';
+@use '../components/Header/headerAppSwitcher';
+@use '../components/Header/headerMenu';
+@use '../components/Header/headerMenuItem';
+@use '../components/Header/userRequests';
+@use '../components/ImageModal/imageModal';
+@use '../components/MemberBar/memberBar';
+@use '../components/Modal/modal' as addons-modal;
+@use '../components/ModalConfirmEdit/modalConfirmEdit';
+@use '../components/Notifications/notifications';
+@use '../components/PlatformBanner/platformBanner';
+@use '../components/PlatformNotifications/platformNotifications';
+@use '../components/PrivacyStatement/privacyStatement';
+@use '../components/ProfileSettings/profileSettings';
+@use '../components/ProtectedRoute/protectedRoute';
+@use '../components/RadioGroup/radioGroup';
+@use '../components/SignOut/signOut';
+@use '../components/SupportCenter/supportCenter';
+@use '../components/RichTextArea/richTextArea';
+@use '../components/TextArea/textArea';
+@use '../components/TextInput/textInput';
+@use '../components/Toggle/toggle' as addons-toggle;
+@use '../components/TooltipHover/tooltip' as addons-tooltip;
+
+
+// css for external libs
+@use "./tippy";
+
+// UIShell tokens, create css properties for them by default
+:root {
+  @if ($use-theme-advantage-white) {
+    @include utils.create-properties(theme-default.$shell-white-tokens);
+  } @else {
+    @include utils.create-properties(theme-default.$shell-tokens);
+  }
+}
+
+.#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active) {
+  >.#{$prefix}--side-nav__link:hover {
+    >span {
+      color: shell.$bmrg-theme-primary;
+    }
+  }
+}
+
+//style for advantage sidenav
+.#{$prefix}--side-nav__icon {
+  svg {
+    fill: shell.$bmrg-theme-primary;
+  }
+} 
+
+.#{$prefix}--side-nav__item--active {
+  .#{$prefix}--side-nav__icon {
+    svg {
+      fill: shell.$bmrg-theme-primary;
+    }
+  }
+}
+
+
+.#{$prefix}--side-nav__submenu, .#{$prefix}--header__action {
+  &:focus {
+    border-color: shell.$bmrg-accent;
+    outline: shell.$bmrg-accent 0.0625rem solid !important;
+  }
+}
+
+.#{$prefix}--skip-to-content {
+  background-color: shell.$bmrg-theme-background !important;
+  color: shell.$bmrg-theme-primary !important;
+}
+
+// Styles for the UIShell from addons
+.#{$prefix}--bmrg-header-modal {
+  .#{$prefix}--modal-container {
+    background-color: shell.$bmrg-theme-background;
+    border-radius: var(--cds-border-radius, 0);
+
+    * {
+      &:focus,
+      &::before {
+        outline-color: shell.$bmrg-secondary !important;
+        border-color: shell.$bmrg-secondary !important;
+      }
+    }
+
+    .#{$prefix}--btn:focus {
+      outline-color: shell.$bmrg-primary;
+      border: initial !important;
+    }
+
+    .#{$prefix}--modal-content {
+      color: var(--cds-text-primary);
+      padding: 0 1rem;
+      margin-bottom: 4rem;
+    }
+  }
+
+  .#{$prefix}--modal {
+    background-color: shell.$bmrg-header-modal-overlay; //default isrgba(theme.$layer-accent-01, 0.5)
+  }
+  
+  .#{$prefix}--modal-close {
+    &:hover {
+      background-color: shell.$bmrg-header-hover-background;
+    }
+    &:focus {
+      outline: utils.rem(1px) solid shell.$bmrg-secondary;
+    }
+    svg {
+      fill: shell.$bmrg-theme-primary;
+    }
+  }
+
+  .#{$prefix}--modal-content {
+    width: 100%;
+  }
+
+  .#{$prefix}--modal-header__label {
+    color: shell.$bmrg-theme-primary;
+    text-transform: initial;
+  }
+
+  .#{$prefix}--modal-header__heading {
+    height: utils.rem(26px);
+    color: shell.$bmrg-theme-primary;
+    font-size: utils.rem(20px);
+  }
+
+  .#{$prefix}--modal-close__icon {
+    svg,
+    polygon,
+    path {
+      fill: shell.$bmrg-brand-white;
+    }
+  }
+  .#{$prefix}--modal-footer {
+    background-color: shell.$bmrg-primary;
+    margin: 0;
+    /** carbon 10 override */
+    padding: 0;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    left: 0;
+
+    .#{$prefix}--btn {
+      border-radius: 0;
+
+      &.#{$prefix}--btn--primary {
+        border-bottom-right-radius: var(--cds-border-radius, 0);
+
+        &.#{$prefix}--btn:disabled {
+          opacity: 0.5;
+          border: unset;
+        }
+      }
+
+      &.#{$prefix}--btn--secondary {
+        border-bottom-left-radius: var(--cds-border-radius, 0);
+      }
+    }
+  }
+
+  .#{$prefix}--accordion__heading {
+    &:hover:before {
+      background-color: shell.$bmrg-header-hover-background;
+    }
+
+    &:focus:before {
+      border-color: shell.$bmrg-secondary;
+    }
+  }
+}
+
+// Styles for Boomerang theme
+@if ($use-theme-boomerang) {
+  // Some additional overrides to carbon base styles
+  // add :root to have a higher level of specificity and not rely in import order
+
+  // Set at root, only if theme is actually set
+  :root[data-carbon-theme="boomerang"] {
+    @include utils.create-properties(theme-boomerang.$shell-tokens);
+
+    button,
+    html [type="button"],
+    [type="reset"],
+    [type="submit"] {
+      appearance: none;
+    }
+
+    .#{$prefix}--btn {
+      border-radius: var(--cds-border-radius, 0);
+    }
+
+    .#{$prefix}--tooltip {
+      z-index: 9999;
+    }
+
+    .#{$prefix}--loading-overlay {
+      //harcoded to the RGBA value of the ui-background variable
+      background-color: rgba(242, 244, 248, 0.5);
+    }
+
+    .#{$prefix}--skeleton {
+      .#{$prefix}--data-table-header,
+      .#{$prefix}--table-toolbar {
+        display: none;
+      }
+    }
+
+    .#{$prefix}--form-item {
+      .#{$prefix}--text-input,
+      .#{$prefix}--text-area,
+      .#{$prefix}--number input[type="number"] {
+        border: none;
+        border-bottom: none;
+        border-radius: var(--cds-border-radius, 0);
+      }
+    }
+
+    .#{$prefix}--date-picker__input,
+    .#{$prefix}--dropdown,
+    .#{$prefix}--dropdown-text,
+    .#{$prefix}--overflow-menu-options,
+    .#{$prefix}--select-input,
+    .#{$prefix}--search .#{$prefix}--search-input,
+    .#{$prefix}--list-box,
+    .#{$prefix}--list-box input[role="combobox"],
+    .#{$prefix}--list-box__field[aria-expanded="true"],
+    .#{$prefix}--list-box__field,
+    .#{$prefix}--text-area,
+    .#{$prefix}--text-input {
+      border: none;
+      border-radius: var(--cds-border-radius, 0);
+    }
+
+    .#{$prefix}--text-area__wrapper {
+      width: 100%;
+    }
+
+    .#{$prefix}--form-requirement {
+      color: theme.$support-error;
+      &::before {
+        content: "";
+      }
+    }
+
+    .#{$prefix}--label,
+    .#{$prefix}--list-box__label {
+      color: theme.$text-primary;
+      font-family: "IBM Plex Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+    }
+
+    .#{$prefix}--modal-container {
+      border-radius: var(--cds-border-radius, 0);
+    }
+
+    .#{$prefix}--modal-footer {
+      border-bottom-right-radius: var(--cds-border-radius, 0);
+      border-bottom-left-radius: var(--cds-border-radius, 0);
+      .#{$prefix}--btn {
+        border-radius: 0;
+
+        &:first-child {
+          border-bottom-left-radius: var(--cds-border-radius, 0);
+        }
+
+        &:last-child {
+          border-bottom-right-radius: var(--cds-border-radius, 0);
+        }
+
+        &:last-child:first-child {
+          border-bottom-left-radius: 0;
+        }
+      }
+    }
+
+    .#{$prefix}--search--xl {
+      .#{$prefix}--search-input,
+      .#{$prefix}--search-close {
+        height: 2.5rem;
+      }
+    }
+
+    // .#{$prefix}--btn--field {
+    //   height: 2.5rem;
+    //   min-height: 2.5rem;
+    // }
+
+    .#{$prefix}--checkbox-label::before {
+      border-radius: 0.15rem;
+    }
+
+    .#{$prefix}--checkbox:checked:focus + .#{$prefix}--checkbox-label:before,
+    .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label:before {
+      border-color: #005d5d;
+    }
+
+    .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::before {
+      background-color: theme.$support-success;
+      border-color: theme.$support-success;
+    }
+
+    .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu {
+      max-height: 24rem;
+    }
+
+    .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition {
+      border-bottom: none;
+    }
+
+    .#{$prefix}--tag {
+      font-size: 0.75rem;
+    }
+
+    .#{$prefix}--side-nav__item--large.#{$prefix}--side-nav__submenu {
+      height: 3rem;
+    }
+
+    // DataTable Overrides
+    .#{$prefix}--data-table:not(.#{$prefix}--skeleton)
+      th:first-of-type:not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-checkbox) {
+      padding-left: 0;
+    }
+
+    .#{$prefix}--data-table .#{$prefix}--table-header-label {
+      padding: 0.875rem 1rem;
+    }
+
+    .#{$prefix}--table-sort {
+      padding: 0 1rem 0 0;
+    }
+
+    .#{$prefix}--data-table:not(.#{$prefix}--skeleton) th:not(.#{$prefix}--table-column-checkbox) {
+      padding: 0;
+    }
+
+    .#{$prefix}--data-table td {
+      max-width: 20rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}