@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/components/AppLauncher/app-launcher.scss

@@ -1,308 +0,0 @@
-// Don't remove this magic comment. See gulpfile.js.
-// @import "../../sass-utilities/all";
-// @debug $app-launcher; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-
-.#{$app-launcher} {
-  // Menu
-  --#{$app-launcher}__menu--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
-  --#{$app-launcher}__menu--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$app-launcher}__menu--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu--Top: calc(100% + var(--#{$pf-global}--spacer--xs));
-  --#{$app-launcher}__menu--ZIndex: var(--#{$pf-global}--ZIndex--sm);
-  --#{$app-launcher}--m-top__menu--Top: 0;
-  --#{$app-launcher}--m-top__menu--TranslateY: calc(-100% - var(--#{$pf-global}--spacer--xs)); // The "dropup" menu must be transformed up and this calculates how much to create space between the toggle and menu
-
-  // Expanded
-  --#{$app-launcher}__toggle--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$app-launcher}__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__toggle--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$app-launcher}__toggle--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__toggle--Color: var(--#{$pf-global}--Color--200);
-  --#{$app-launcher}__toggle--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$app-launcher}__toggle--active--Color: var(--#{$pf-global}--Color--100);
-  --#{$app-launcher}__toggle--focus--Color: var(--#{$pf-global}--Color--100);
-  --#{$app-launcher}__toggle--disabled--Color: var(--#{$pf-global}--disabled-color--200);
-  --#{$app-launcher}__toggle--m-expanded--Color: var(--#{$pf-global}--Color--100);
-  --#{$app-launcher}__toggle--BackgroundColor: transparent;
-
-  // Menu input
-  --#{$app-launcher}__menu-search--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu-search--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-search--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-search--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-search--BottomBorderColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$app-launcher}__menu-search--BottomBorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$app-launcher}__menu-search--MarginBottom: var(--#{$pf-global}--spacer--sm);
-
-  // Menu item
-  --#{$app-launcher}__menu-item--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu-item--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-item--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu-item--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-item--Color: var(--#{$pf-global}--Color--dark-100);
-  --#{$app-launcher}__menu-item--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$app-launcher}__menu-item--Width: 100%;
-  --#{$app-launcher}__menu-item--disabled--Color: var(--#{$pf-global}--Color--dark-200);
-  --#{$app-launcher}__menu-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$app-launcher}__menu-item--m-link--PaddingRight: 0;
-  --#{$app-launcher}__menu-item--m-link--hover--BackgroundColor: transparent;
-  --#{$app-launcher}__menu-item--m-action--Color: var(--#{$pf-global}--Color--200);
-  --#{$app-launcher}__menu-item--m-action--Width: auto;
-  --#{$app-launcher}__menu-item--m-action--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
-  --#{$app-launcher}__menu-item--m-action--hover--BackgroundColor: transparent;
-  --#{$app-launcher}__menu-item--hover__menu-item--m-action--Color: var(--#{$pf-global}--Color--200); // remove at breaking change
-  --#{$app-launcher}__menu-item--m-action--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$app-launcher}__menu-item--m-action--disabled--Color: var(--#{$pf-global}--disabled-color--200);
-  --#{$app-launcher}__menu-item--m-favorite__menu-item--m-action--Color: var(--#{$pf-global}--palette--gold-400);
-  --#{$app-launcher}__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--#{$pf-global}--palette--gold-500);
-
-  // Menu item icon
-  --#{$app-launcher}__menu-item-icon--MarginRight: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu-item-icon--Width: var(--#{$pf-global}--icon--FontSize--lg);
-  --#{$app-launcher}__menu-item-icon--Height: var(--#{$pf-global}--icon--FontSize--lg);
-
-  // Menu item external icon
-  --#{$app-launcher}__menu-item-external-icon--Color: var(--#{$pf-global}--link--Color);
-  --#{$app-launcher}__menu-item-external-icon--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-item-external-icon--TranslateY: #{pf-size-prem(-1px)};
-  --#{$app-launcher}__menu-item-external-icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
-
-  // Groups
-  --#{$app-launcher}__group--group--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__group-title--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__group-title--PaddingRight: var(--#{$app-launcher}__menu-item--PaddingRight);
-  --#{$app-launcher}__group-title--PaddingBottom: var(--#{$app-launcher}__menu-item--PaddingBottom);
-  --#{$app-launcher}__group-title--PaddingLeft: var(--#{$app-launcher}__menu-item--PaddingLeft);
-  --#{$app-launcher}__group-title--FontSize: var(--#{$pf-global}--FontSize--xs);
-  --#{$app-launcher}__group-title--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$app-launcher}__group-title--Color: var(--#{$pf-global}--Color--dark-200);
-
-  // Divider
-  --#{$app-launcher}--c-divider--MarginTop: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}--c-divider--MarginBottom: var(--#{$pf-global}--spacer--sm);
-
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-
-  &.pf-m-expanded {
-    > .#{$app-launcher}__toggle {
-      color: var(--#{$app-launcher}__toggle--m-expanded--Color);
-    }
-  }
-
-  .#{$divider} {
-    margin-block-start: var(--#{$app-launcher}--c-divider--MarginTop);
-    margin-block-end: var(--#{$app-launcher}--c-divider--MarginBottom);
-
-    // Support divider as last item in group to separate groups
-    &:last-child {
-      --#{$app-launcher}--c-divider--MarginBottom: 0;
-    }
-  }
-}
-
-.#{$app-launcher}__toggle {
-  padding-block-start: var(--#{$app-launcher}__toggle--PaddingTop);
-  padding-block-end: var(--#{$app-launcher}__toggle--PaddingBottom);
-  padding-inline-start: var(--#{$app-launcher}__toggle--PaddingLeft);
-  padding-inline-end: var(--#{$app-launcher}__toggle--PaddingRight);
-  color: var(--#{$app-launcher}__toggle--Color);
-  background-color: var(--#{$app-launcher}__toggle--BackgroundColor);
-  border: none;
-
-  &:hover {
-    --#{$app-launcher}__toggle--Color: var(--#{$app-launcher}__toggle--hover--Color);
-  }
-
-  &:active,
-  &.pf-m-active {
-    --#{$app-launcher}__toggle--Color: var(--#{$app-launcher}__toggle--active--Color);
-  }
-
-  &:focus {
-    --#{$app-launcher}__toggle--Color: var(--#{$app-launcher}__toggle--focus--Color);
-  }
-
-  &:disabled {
-    --#{$app-launcher}__toggle--Color: var(--#{$app-launcher}__toggle--disabled--Color);
-
-    pointer-events: none;
-  }
-}
-
-.#{$app-launcher}__menu {
-  position: absolute;
-  inset-block-start: var(--#{$app-launcher}__menu--Top);
-  z-index: var(--#{$app-launcher}__menu--ZIndex);
-  min-width: 100%;
-  padding-block-start: var(--#{$app-launcher}__menu--PaddingTop);
-  padding-block-end: var(--#{$app-launcher}__menu--PaddingBottom);
-  background-color: var(--#{$app-launcher}__menu--BackgroundColor);
-  background-clip: padding-box;
-  box-shadow: var(--#{$app-launcher}__menu--BoxShadow);
-
-  &.pf-m-align-right {
-   inset-inline-end: 0;
-  }
-
-  .#{$app-launcher}.pf-m-top & {
-    --#{$app-launcher}__menu--Top: var(--#{$app-launcher}--m-top__menu--Top);
-
-    transform: translateY(var(--#{$app-launcher}--m-top__menu--TranslateY));
-  }
-
-  &.pf-m-static {
-    --#{$app-launcher}--m-top__menu--TranslateY: 0;
-
-    position: static;
-    inset-block-start: auto;
-    inset-block-end: auto;
-    inset-inline-start: auto;
-    inset-inline-end: auto;
-    z-index: auto;
-    min-width: min-content;
-  }
-}
-
-.#{$app-launcher}__menu-search {
-  padding-block-start: var(--#{$app-launcher}__menu-search--PaddingTop);
-  padding-block-end: var(--#{$app-launcher}__menu-search--PaddingBottom);
-  padding-inline-start: var(--#{$app-launcher}__menu-search--PaddingLeft);
-  padding-inline-end: var(--#{$app-launcher}__menu-search--PaddingRight);
-  margin-block-end: var(--#{$app-launcher}__menu-search--MarginBottom);
-  border-block-end: var(--#{$app-launcher}__menu-search--BottomBorderWidth) solid var(--#{$app-launcher}__menu-search--BottomBorderColor);
-}
-
-.#{$app-launcher}__menu-wrapper {
-  display: flex;
-
-  &.pf-m-favorite {
-    --#{$app-launcher}__menu-item--m-action--Color: var(--#{$app-launcher}__menu-item--m-favorite__menu-item--m-action--Color);
-    --#{$app-launcher}__menu-item--m-action--hover--Color: var(--#{$app-launcher}__menu-item--m-favorite__menu-item--m-action--hover--Color);
-  }
-}
-
-.#{$app-launcher}__menu-item {
-  display: flex;
-  align-items: center;
-  width: var(--#{$app-launcher}__menu-item--Width);
-  padding-block-start: var(--#{$app-launcher}__menu-item--PaddingTop);
-  padding-block-end: var(--#{$app-launcher}__menu-item--PaddingBottom);
-  padding-inline-start: var(--#{$app-launcher}__menu-item--PaddingLeft);
-  padding-inline-end: var(--#{$app-launcher}__menu-item--PaddingRight);
-  font-weight: var(--#{$app-launcher}__menu-item--FontWeight);
-  color: var(--#{$app-launcher}__menu-item--Color);
-  white-space: nowrap;
-  background: none;
-  border: 0;
-
-  &:hover,
-  &:focus {
-    --#{$app-launcher}__menu-item--m-action--Color: var(--#{$app-launcher}__menu-item--hover__menu-item--m-action--Color); // remove at breaking change
-
-    text-decoration: none;
-  }
-
-  @at-root .#{$app-launcher}__menu-wrapper:hover,
-  .#{$app-launcher}__menu-wrapper:focus-within,
-  .#{$app-launcher}__menu-wrapper.pf-m-focus,
-  &:hover,
-  &:focus {
-    background-color: var(--#{$app-launcher}__menu-item--hover--BackgroundColor);
-  }
-
-  &:disabled,
-  &.pf-m-disabled {
-    --#{$app-launcher}__menu-item--Color: var(--#{$app-launcher}__menu-item--disabled--Color);
-    --#{$app-launcher}__menu-item--m-action--Color: var(--#{$app-launcher}__menu-item--m-action--disabled--Color);
-
-    pointer-events: none;
-  }
-
-  @at-root .#{$app-launcher}__menu-wrapper,
-  & {
-    &:disabled,
-    &.pf-m-disabled {
-      background-color: transparent;
-    }
-  }
-
-  @at-root .#{$app-launcher}__menu-wrapper,
-  & {
-    &.pf-m-external {
-      &:hover,
-      &:focus {
-        // stylelint-disable-next-line
-        .#{$app-launcher}__menu-item-external-icon {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &.pf-m-link {
-    --#{$app-launcher}__menu-item--PaddingRight: var(--#{$app-launcher}__menu-item--m-link--PaddingRight);
-    --#{$app-launcher}__menu-item--hover--BackgroundColor: var(--#{$app-launcher}__menu-item--m-link--hover--BackgroundColor);
-  }
-
-  &.pf-m-action {
-    --#{$app-launcher}__menu-item--Color: var(--#{$app-launcher}__menu-item--m-action--Color);
-    --#{$app-launcher}__menu-item--Width: var(--#{$app-launcher}__menu-item--m-action--Width);
-    --#{$app-launcher}__menu-item--hover--BackgroundColor: var(--#{$app-launcher}__menu-item--m-action--hover--BackgroundColor);
-
-    font-size: var(--#{$app-launcher}__menu-item--m-action--FontSize);
-
-    &:hover,
-    &:focus {
-      --#{$app-launcher}__menu-item--m-action--Color: var(--#{$app-launcher}__menu-item--m-action--hover--Color);
-    }
-  }
-}
-
-.#{$app-launcher}__menu-item-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--#{$app-launcher}__menu-item-icon--Width);
-  height: var(--#{$app-launcher}__menu-item-icon--Height);
-  margin-inline-end: var(--#{$app-launcher}__menu-item-icon--MarginRight);
-
-  > * {
-    max-width: 100%;
-    max-height: 100%;
-  }
-}
-
-.#{$app-launcher}__menu-item-external-icon {
-  padding-inline-start: var(--#{$app-launcher}__menu-item-external-icon--PaddingLeft);
-  margin-inline-start: auto;
-  font-size: var(--#{$app-launcher}__menu-item-external-icon--FontSize);
-  color: var(--#{$app-launcher}__menu-item-external-icon--Color);
-  opacity: 0;
-  transform: translateY(var(--#{$app-launcher}__menu-item-external-icon--TranslateY)); // move icon a bit to appear more visually centered
-}
-
-.#{$app-launcher}__group {
-  & + & {
-    padding-block-start: var(--#{$app-launcher}__group--group--PaddingTop);
-  }
-}
-
-.#{$app-launcher}__group-title {
-  padding-block-start: var(--#{$app-launcher}__group-title--PaddingTop);
-  padding-block-end: var(--#{$app-launcher}__group-title--PaddingBottom);
-  padding-inline-start: var(--#{$app-launcher}__group-title--PaddingLeft);
-  padding-inline-end: var(--#{$app-launcher}__group-title--PaddingRight);
-  font-size: var(--#{$app-launcher}__group-title--FontSize);
-  font-weight: var(--#{$app-launcher}__group-title--FontWeight);
-  color: var(--#{$app-launcher}__group-title--Color);
-}
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/app-launcher";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-app-launcher;
-}

package/components/AppLauncher/themes/dark/app-launcher.scss

@@ -1,13 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-app-launcher() {
-  .#{$app-launcher} {
-    --#{$app-launcher}__menu--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$app-launcher}__menu--Top: 100%;
-    --#{$app-launcher}__menu-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$app-launcher}__menu-item--disabled--Color: var(--#{$pf-global}--palette--black-300); // question should we have a global var for this
-    --#{$app-launcher}__menu-item--m-action--Color: var(--#{$pf-global}--Color--200);
-    --#{$app-launcher}__menu-item--m-favorite__menu-item--m-action--Color: var(--#{$pf-global}--palette--gold-300);
-    --#{$app-launcher}__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--#{$pf-global}--palette--gold-100);
-  }
-}

package/components/Chip/chip-group.css

@@ -1,93 +0,0 @@
-.pf-v6-c-chip-group {
-  --pf-v6-global--Color--100: var(--pf-v6-global--Color--dark-100);
-  --pf-v6-global--Color--200: var(--pf-v6-global--Color--dark-200);
-  --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--dark-100);
-  --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--dark-100);
-  --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--dark);
-  --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--dark--hover);
-  --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--light-100);
-  --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--dark);
-  --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--dark);
-}
-
-.pf-v6-c-chip-group {
-  color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-chip-group--PaddingTop: 0;
-  --pf-v6-c-chip-group--PaddingRight: 0;
-  --pf-v6-c-chip-group--PaddingBottom: 0;
-  --pf-v6-c-chip-group--PaddingLeft: 0;
-  --pf-v6-c-chip-group--RowGap: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-chip-group--ColumnGap: 0;
-  --pf-v6-c-chip-group__main--RowGap: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip-group__main--ColumnGap: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-chip-group__list--RowGap: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip-group__list--ColumnGap: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip-group--m-category--PaddingTop: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip-group--m-category--PaddingRight: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip-group--m-category--PaddingBottom: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip-group--m-category--PaddingLeft: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-chip-group--m-category--BorderRadius: var(--pf-v6-global--BorderRadius--sm);
-  --pf-v6-c-chip-group--m-category--BackgroundColor: var(--pf-v6-global--BackgroundColor--200);
-  --pf-v6-c-chip-group__label--FontSize: var(--pf-v6-global--FontSize--sm);
-  --pf-v6-c-chip-group__label--MaxWidth: 18ch;
-  --pf-v6-c-chip-group__close--MarginTop: calc(var(--pf-v6-global--spacer--xs) * -1);
-  --pf-v6-c-chip-group__close--MarginBottom: calc(var(--pf-v6-global--spacer--xs) * -1);
-  row-gap: var(--pf-v6-c-chip-group--RowGap);
-  column-gap: var(--pf-v6-c-chip-group--ColumnGap);
-  max-width: 100%;
-  padding-block-start: var(--pf-v6-c-chip-group--PaddingTop);
-  padding-block-end: var(--pf-v6-c-chip-group--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-chip-group--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-chip-group--PaddingRight);
-}
-.pf-v6-c-chip-group.pf-m-category {
-  --pf-v6-c-chip-group--PaddingTop: var(--pf-v6-c-chip-group--m-category--PaddingTop);
-  --pf-v6-c-chip-group--PaddingRight: var(--pf-v6-c-chip-group--m-category--PaddingRight);
-  --pf-v6-c-chip-group--PaddingBottom: var(--pf-v6-c-chip-group--m-category--PaddingBottom);
-  --pf-v6-c-chip-group--PaddingLeft: var(--pf-v6-c-chip-group--m-category--PaddingLeft);
-  background-color: var(--pf-v6-c-chip-group--m-category--BackgroundColor);
-  border-radius: var(--pf-v6-c-chip-group--m-category--BorderRadius);
-}
-
-.pf-v6-c-chip-group__main {
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  row-gap: var(--pf-v6-c-chip-group__main--RowGap);
-  column-gap: var(--pf-v6-c-chip-group__main--ColumnGap);
-  align-items: baseline;
-  min-width: 0;
-}
-
-.pf-v6-c-chip-group,
-.pf-v6-c-chip-group__list {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  min-width: 0;
-}
-
-.pf-v6-c-chip-group__list {
-  row-gap: var(--pf-v6-c-chip-group__list--RowGap);
-  column-gap: var(--pf-v6-c-chip-group__list--ColumnGap);
-}
-
-.pf-v6-c-chip-group__list-item {
-  display: inline-flex;
-  min-width: 0;
-}
-
-.pf-v6-c-chip-group__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: var(--pf-v6-c-chip-group__label--MaxWidth);
-  font-size: var(--pf-v6-c-chip-group__label--FontSize);
-}
-
-.pf-v6-c-chip-group__close {
-  display: flex;
-  align-self: flex-start;
-  margin-block-start: var(--pf-v6-c-chip-group__close--MarginTop);
-  margin-block-end: var(--pf-v6-c-chip-group__close--MarginBottom);
-}

package/components/Chip/chip-group.scss

@@ -1,98 +0,0 @@
-// @debug $chip-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-
-.#{$chip}-group {
-  @include pf-v5-t-light; // force the container follow the light theme
-
-  // Chip group - spaces main and close
-  // column-gap spacer supports legacy chip group
-  --#{$chip}-group--PaddingTop: 0;
-  --#{$chip}-group--PaddingRight: 0;
-  --#{$chip}-group--PaddingBottom: 0;
-  --#{$chip}-group--PaddingLeft: 0;
-  --#{$chip}-group--RowGap: var(--#{$pf-global}--spacer--sm);
-  --#{$chip}-group--ColumnGap: 0;
-
-  // Chip group main - spaces the category label and list
-  --#{$chip}-group__main--RowGap: var(--#{$pf-global}--spacer--xs);
-  --#{$chip}-group__main--ColumnGap: var(--#{$pf-global}--spacer--sm);
-
-  // Chip group list - spaces the chips
-  --#{$chip}-group__list--RowGap: var(--#{$pf-global}--spacer--xs);
-  --#{$chip}-group__list--ColumnGap: var(--#{$pf-global}--spacer--xs);
-
-  // Category modifier
-  --#{$chip}-group--m-category--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$chip}-group--m-category--PaddingRight: var(--#{$pf-global}--spacer--xs);
-  --#{$chip}-group--m-category--PaddingBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$chip}-group--m-category--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$chip}-group--m-category--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
-  --#{$chip}-group--m-category--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-
-  // Label in group
-  --#{$chip}-group__label--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$chip}-group__label--MaxWidth: 18ch;
-
-  // Chip group close - negative margin stretches height for click area
-  --#{$chip}-group__close--MarginTop: calc(var(--#{$pf-global}--spacer--xs) * -1);
-  --#{$chip}-group__close--MarginBottom: calc(var(--#{$pf-global}--spacer--xs) * -1);
-
-  row-gap: var(--#{$chip}-group--RowGap);
-  column-gap: var(--#{$chip}-group--ColumnGap);
-  max-width: 100%;
-  padding-block-start: var(--#{$chip}-group--PaddingTop);
-  padding-block-end: var(--#{$chip}-group--PaddingBottom);
-  padding-inline-start: var(--#{$chip}-group--PaddingLeft);
-  padding-inline-end: var(--#{$chip}-group--PaddingRight);
-
-  &.pf-m-category {
-    --#{$chip}-group--PaddingTop: var(--#{$chip}-group--m-category--PaddingTop);
-    --#{$chip}-group--PaddingRight: var(--#{$chip}-group--m-category--PaddingRight);
-    --#{$chip}-group--PaddingBottom: var(--#{$chip}-group--m-category--PaddingBottom);
-    --#{$chip}-group--PaddingLeft: var(--#{$chip}-group--m-category--PaddingLeft);
-
-    background-color: var(--#{$chip}-group--m-category--BackgroundColor);
-    border-radius: var(--#{$chip}-group--m-category--BorderRadius);
-  }
-}
-
-.#{$chip}-group__main {
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  row-gap: var(--#{$chip}-group__main--RowGap);
-  column-gap: var(--#{$chip}-group__main--ColumnGap);
-  align-items: baseline;
-  min-width: 0;
-}
-
-.#{$chip}-group,
-.#{$chip}-group__list {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  min-width: 0;
-}
-
-.#{$chip}-group__list {
-  row-gap: var(--#{$chip}-group__list--RowGap);
-  column-gap: var(--#{$chip}-group__list--ColumnGap);
-}
-
-.#{$chip}-group__list-item {
-  display: inline-flex;
-  min-width: 0;
-}
-
-.#{$chip}-group__label {
-  @include pf-v5-text-overflow;
-
-  max-width: var(--#{$chip}-group__label--MaxWidth);
-  font-size: var(--#{$chip}-group__label--FontSize);
-}
-
-.#{$chip}-group__close {
-  display: flex;
-  align-self: flex-start;
-  margin-block-start: var(--#{$chip}-group__close--MarginTop);
-  margin-block-end: var(--#{$chip}-group__close--MarginBottom);
-}

package/components/Chip/chip.css

@@ -1,122 +0,0 @@
-.pf-v6-c-chip {
-  --pf-v6-global--Color--100: var(--pf-v6-global--Color--dark-100);
-  --pf-v6-global--Color--200: var(--pf-v6-global--Color--dark-200);
-  --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--dark-100);
-  --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--dark-100);
-  --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--dark);
-  --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--dark--hover);
-  --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--light-100);
-  --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--dark);
-  --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--dark);
-}
-
-.pf-v6-c-chip {
-  --pf-v6-c-chip--PaddingTop: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip--PaddingRight: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-chip--PaddingBottom: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip--PaddingLeft: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-chip--BackgroundColor: var(--pf-v6-global--Color--light-100);
-  --pf-v6-c-chip--BorderRadius: var(--pf-v6-global--BorderRadius--sm);
-  --pf-v6-c-chip--before--BorderColor: var(--pf-v6-global--BorderColor--300);
-  --pf-v6-c-chip--before--BorderWidth: var(--pf-v6-global--BorderWidth--sm);
-  --pf-v6-c-chip--before--BorderRadius: var(--pf-v6-c-chip--BorderRadius);
-  --pf-v6-c-chip--m-overflow__text--Color: var(--pf-v6-global--primary-color--100);
-  --pf-v6-c-chip--m-draggable--BackgroundColor: var(--pf-v6-global--BackgroundColor--200);
-  --pf-v6-c-chip--m-draggable--BoxShadow: var(--pf-v6-global--BoxShadow--sm);
-  --pf-v6-c-chip--m-draggable__icon--FontSize: var(--pf-v6-global--icon--FontSize--sm);
-  --pf-v6-c-chip__content--FontSize: var(--pf-v6-global--FontSize--xs);
-  --pf-v6-c-chip__content--ColumnGap: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip__text--Color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-chip__text--MaxWidth: 16ch;
-  --pf-v6-c-chip__c-badge--MarginLeft: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip__actions--FontSize: var(--pf-v6-global--FontSize--xs);
-  --pf-v6-c-chip__actions--c-button--PaddingTop: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip__actions--c-button--PaddingRight: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-chip__actions--c-button--PaddingBottom: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip__actions--c-button--PaddingLeft: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-chip__actions--c-button--MarginTop: calc(var(--pf-v6-c-chip--PaddingTop) * -1);
-  --pf-v6-c-chip__actions--c-button--MarginRight: calc(var(--pf-v6-c-chip--PaddingRight) / 2 * -1);
-  --pf-v6-c-chip__actions--c-button--MarginBottom: calc(var(--pf-v6-c-chip--PaddingBottom) * -1);
-  --pf-v6-c-chip__actions--c-button--FontSize: var(--pf-v6-global--FontSize--xs);
-  --pf-v6-c-chip__icon--MarginLeft: var(--pf-v6-global--spacer--sm);
-  color: var(--pf-v6-global--Color--100);
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-  padding-block-start: var(--pf-v6-c-chip--PaddingTop);
-  padding-block-end: var(--pf-v6-c-chip--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-chip--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-chip--PaddingRight);
-  list-style: none;
-  background-color: var(--pf-v6-c-chip--BackgroundColor);
-  border-radius: var(--pf-v6-c-chip--BorderRadius);
-}
-.pf-v6-c-chip::before {
-  position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  content: "";
-  border: var(--pf-v6-c-chip--before--BorderWidth) solid var(--pf-v6-c-chip--before--BorderColor);
-  border-radius: var(--pf-v6-c-chip--before--BorderRadius);
-}
-.pf-v6-c-chip.pf-m-overflow {
-  border: 0;
-}
-.pf-v6-c-chip.pf-m-overflow .pf-v6-c-chip__text {
-  color: var(--pf-v6-c-chip--m-overflow__text--Color);
-}
-.pf-v6-c-chip.pf-m-draggable {
-  --pf-v6-c-chip--BackgroundColor: var(--pf-v6-c-chip--m-draggable--BackgroundColor);
-  box-shadow: var(--pf-v6-c-chip--m-draggable--BoxShadow);
-}
-.pf-v6-c-chip.pf-m-draggable .pf-v6-c-chip__icon {
-  font-size: var(--pf-v6-c-chip--m-draggable__icon--FontSize);
-}
-
-.pf-v6-c-chip__text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  position: relative;
-  max-width: var(--pf-v6-c-chip__text--MaxWidth);
-  color: var(--pf-v6-c-chip__text--Color);
-}
-.pf-v6-c-chip__text .pf-v6-c-badge {
-  margin-inline-start: var(--pf-v6-c-chip__c-badge--MarginLeft);
-}
-
-.pf-v6-c-chip__icon + .pf-v6-c-chip__text,
-.pf-v6-c-chip__text + .pf-v6-c-chip__icon {
-  margin-inline-start: var(--pf-v6-c-chip__icon--MarginLeft);
-}
-
-.pf-v6-c-chip__content {
-  display: flex;
-  column-gap: var(--pf-v6-c-chip__content--ColumnGap);
-  align-items: center;
-  font-size: var(--pf-v6-c-chip__content--FontSize);
-}
-
-.pf-v6-c-chip__actions {
-  font-size: var(--pf-v6-c-chip__actions--FontSize);
-}
-.pf-v6-c-chip__actions .pf-v6-c-button {
-  --pf-v6-c-button--PaddingTop: var(--pf-v6-c-chip__actions--c-button--PaddingTop);
-  --pf-v6-c-button--PaddingRight: var(--pf-v6-c-chip__actions--c-button--PaddingRight);
-  --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-chip__actions--c-button--PaddingBottom);
-  --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-chip__actions--c-button--PaddingLeft);
-  --pf-v6-c-button--FontSize: var(--pf-v6-c-chip__actions--c-button--FontSize);
-  margin-block-start: var(--pf-v6-c-chip__actions--c-button--MarginTop);
-  margin-block-end: var(--pf-v6-c-chip__actions--c-button--MarginBottom);
-  margin-inline-end: var(--pf-v6-c-chip__actions--c-button--MarginRight);
-  line-height: 1;
-}
-
-:where(.pf-v6-theme-dark) .pf-v6-c-chip {
-  --pf-v6-c-chip--BackgroundColor: var(--pf-v6-global--BackgroundColor--100);
-  --pf-v6-c-chip--before--BorderColor: var(--pf-v6-global--BorderColor--100);
-  --pf-v6-c-chip--m-draggable--BackgroundColor: var(--pf-v6-global--palette--black-600);
-}