@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.71

package/components/DescriptionList/description-list.css

@@ -1,25 +1,24 @@
-.pf-v5-c-description-list {
-  --pf-v5-c-description-list--RowGap: var(--pf-v5-global--gutter--md);
-  --pf-v5-c-description-list--ColumnGap: var(--pf-v5-global--spacer--lg);
+:where(:root), :where(.pf-v5-c-description-list) {
+  --pf-v5-c-description-list--RowGap: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-description-list--ColumnGap: var(--pf-t--global--spacer--lg);
   --pf-v5-c-description-list--GridTemplateColumns--count: 1;
   --pf-v5-c-description-list--GridTemplateColumns--width: 1fr;
   --pf-v5-c-description-list--GridTemplateColumns--min: 0;
-  --pf-v5-c-description-list--GridTemplateColumns: repeat(var(--pf-v5-c-description-list--GridTemplateColumns--count), var(--pf-v5-c-description-list--GridTemplateColumns--width));
-  --pf-v5-c-description-list__group--RowGap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-description-list__group--ColumnGap: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-description-list__group--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-description-list__group--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v5-c-description-list__group--GridTemplateColumns: auto;
   --pf-v5-c-description-list__group--GridTemplateRows: auto 1fr;
   --pf-v5-c-description-list__group--GridColumn: auto;
-  --pf-v5-c-description-list--m-compact--RowGap: var(--pf-v5-global--gutter);
-  --pf-v5-c-description-list--m-compact--ColumnGap: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-description-list--m-compact--RowGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-description-list--m-compact--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v5-c-description-list__term--Display: inline;
   --pf-v5-c-description-list__term--sm--Display: flex;
-  --pf-v5-c-description-list__term--FontWeight: var(--pf-v5-global--FontWeight--bold);
-  --pf-v5-c-description-list__term--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-description-list__term--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-description-list__term-icon--MinWidth: var(--pf-v5-global--icon--FontSize--sm);
-  --pf-v5-c-description-list__term-icon--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-description-list__term-icon--Color: var(--pf-v5-global--icon--Color--light);
+  --pf-v5-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-description-list__term-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-description-list__term-icon--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v5-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-v5-c-description-list--GridTemplateColumns--count));
   --pf-v5-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
   --pf-v5-c-description-list--m-horizontal__term--width: 12ch;
@@ -31,52 +30,58 @@
   --pf-v5-c-description-list--m-3-col--GridTemplateColumns--count: 3;
   --pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
   --pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--min);
-  --pf-v5-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-description-list__text--m-help-text--TextDecorationColor: currentcolor;
+  --pf-v5-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
   --pf-v5-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
-  --pf-v5-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-v5-global--Color--100);
-  --pf-v5-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-v5-global--Color--100);
-  --pf-v5-c-description-list--m-display-lg__description--FontSize: var(--pf-v5-global--FontSize--lg);
-  --pf-v5-c-description-list--m-display-2xl__description--FontSize: var(--pf-v5-global--FontSize--2xl);
-  display: grid;
-  grid-template-columns: var(--pf-v5-c-description-list--GridTemplateColumns);
-  row-gap: var(--pf-v5-c-description-list--RowGap);
-  column-gap: var(--pf-v5-c-description-list--ColumnGap);
-  align-items: baseline;
+  --pf-v5-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-description-list--m-display-lg__description--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-description-list--m-display-2xl__description--FontSize: var(--pf-t--global--font--size--heading--lg);
+  --pf-v5-c-description-list--m-horizontal__term--width-on-sm: inherit;
+  --pf-v5-c-description-list--m-horizontal__term--width-on-md: inherit;
+  --pf-v5-c-description-list--m-horizontal__term--width-on-lg: inherit;
+  --pf-v5-c-description-list--m-horizontal__term--width-on-xl: inherit;
+  --pf-v5-c-description-list--m-horizontal__term--width-on-2xl: inherit;
+  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width);
 }
 @media screen and (min-width: 576px) {
-  .pf-v5-c-description-list {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--Display: var(--pf-v5-c-description-list__term--sm--Display);
   }
 }
-.pf-v5-c-description-list[class*=pf-m-horizontal] {
-  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width);
-}
 @media (min-width: 576px) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width));
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width)));
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width))));
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width)))));
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width))))));
   }
 }
+
+.pf-v5-c-description-list {
+  display: grid;
+  grid-template-columns: repeat(var(--pf-v5-c-description-list--GridTemplateColumns--count), var(--pf-v5-c-description-list--GridTemplateColumns--width));
+  row-gap: var(--pf-v5-c-description-list--RowGap);
+  column-gap: var(--pf-v5-c-description-list--ColumnGap);
+  align-items: baseline;
+}
 .pf-v5-c-description-list.pf-m-inline-grid {
   display: inline-grid;
 }
@@ -122,13 +127,13 @@
 .pf-v5-c-description-list.pf-m-fill-columns {
   display: block;
   column-count: var(--pf-v5-c-description-list--GridTemplateColumns--count);
-  margin-bottom: calc(var(--pf-v5-c-description-list--RowGap) * -1);
+  margin-block-end: calc(var(--pf-v5-c-description-list--RowGap) * -1);
 }
 .pf-v5-c-description-list.pf-m-fill-columns .pf-v5-c-description-list__group,
 .pf-v5-c-description-list.pf-m-fill-columns > .pf-v5-c-card {
   display: inline-grid;
   width: 100%;
-  margin-bottom: var(--pf-v5-c-description-list--RowGap);
+  margin-block-end: var(--pf-v5-c-description-list--RowGap);
   break-inside: avoid;
   page-break-inside: avoid;
   -webkit-column-break-inside: avoid;
@@ -142,7 +147,10 @@
 }
 .pf-v5-c-description-list > .pf-v5-c-card {
   align-self: stretch;
-  padding: var(--pf-v5-c-card--first-child--PaddingTop) var(--pf-v5-c-card--child--PaddingRight) var(--pf-v5-c-card--child--PaddingBottom) var(--pf-v5-c-card--child--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-card--first-child--PaddingTop);
+  padding-block-end: var(--pf-v5-c-card--child--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-card--child--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-card--child--PaddingRight);
 }
 
 .pf-v5-c-description-list__group,
@@ -159,7 +167,7 @@
 .pf-v5-c-description-list__term,
 .pf-v5-c-description-list__description {
   min-width: 0;
-  text-align: left;
+  text-align: start;
   overflow-wrap: break-word;
 }
 
@@ -176,7 +184,7 @@
 .pf-v5-c-description-list__term-icon {
   flex-shrink: 0;
   min-width: var(--pf-v5-c-description-list__term-icon--MinWidth);
-  margin-right: var(--pf-v5-c-description-list__term-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-description-list__term-icon--MarginRight);
   color: var(--pf-v5-c-description-list__term-icon--Color);
 }
 

package/components/DescriptionList/description-list.scss

@@ -1,40 +1,39 @@
 // @debug $data-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 
-.#{$description-list} {
-  --#{$description-list}--RowGap: var(--#{$pf-global}--gutter--md);
-  --#{$description-list}--ColumnGap: var(--#{$pf-global}--spacer--lg);
+:where(:root), :where(.#{$description-list}) {
+  --#{$description-list}--RowGap: var(--pf-t--global--spacer--lg);
+  --#{$description-list}--ColumnGap: var(--pf-t--global--spacer--lg);
   --#{$description-list}--GridTemplateColumns--count: 1;
   --#{$description-list}--GridTemplateColumns--width: 1fr;
   --#{$description-list}--GridTemplateColumns--min: 0;
-  --#{$description-list}--GridTemplateColumns: repeat(var(--#{$description-list}--GridTemplateColumns--count), var(--#{$description-list}--GridTemplateColumns--width));
 
   // group
-  --#{$description-list}__group--RowGap: var(--#{$pf-global}--spacer--sm);
-  --#{$description-list}__group--ColumnGap: var(--#{$pf-global}--spacer--sm);
+  --#{$description-list}__group--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$description-list}__group--ColumnGap: var(--pf-t--global--spacer--sm);
   --#{$description-list}__group--GridTemplateColumns: auto;
   --#{$description-list}__group--GridTemplateRows: auto 1fr;
   --#{$description-list}__group--GridColumn: auto;
 
   // compact
-  --#{$description-list}--m-compact--RowGap: var(--#{$pf-global}--gutter);
-  --#{$description-list}--m-compact--ColumnGap: var(--#{$pf-global}--spacer--sm);
+  --#{$description-list}--m-compact--RowGap: var(--pf-t--global--spacer--md);
+  --#{$description-list}--m-compact--ColumnGap: var(--pf-t--global--spacer--sm);
 
   // term
   --#{$description-list}__term--Display: inline;
   --#{$description-list}__term--sm--Display: flex;
-  --#{$description-list}__term--FontWeight: var(--#{$pf-global}--FontWeight--bold);
-  --#{$description-list}__term--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$description-list}__term--LineHeight: var(--#{$pf-global}--LineHeight--sm);
+  --#{$description-list}__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$description-list}__term--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$description-list}__term--LineHeight: var(--pf-t--global--font--line-height--body);
 
   @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
     --#{$description-list}__term--Display: var(--#{$description-list}__term--sm--Display);
   }
 
   // icon
-  --#{$description-list}__term-icon--MinWidth: var(--#{$pf-global}--icon--FontSize--sm);
-  --#{$description-list}__term-icon--MarginRight: var(--#{$pf-global}--spacer--sm);
-  --#{$description-list}__term-icon--Color: var(--#{$pf-global}--icon--Color--light);
+  --#{$description-list}__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
+  --#{$description-list}__term-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$description-list}__term-icon--Color: var(--pf-t--global--icon--color--subtle);
 
   // vertical
   --#{$description-list}--m-vertical__group--GridTemplateColumns: repeat(var(--#{$description-list}--GridTemplateColumns--count));
@@ -54,26 +53,27 @@ $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   --#{$description-list}--m-auto-fit--GridTemplateColumns--minmax--min: var(--#{$description-list}--m-auto-fit--GridTemplateColumns--min);
 
   // help text
-  --#{$description-list}__text--m-help-text--TextDecorationColor: var(--#{$pf-global}--BorderColor--200);
-  --#{$description-list}__text--m-help-text--TextDecorationThickness: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$description-list}__text--m-help-text--TextDecorationColor: currentcolor;
+  --#{$description-list}__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
   --#{$description-list}__text--m-help-text--TextDecorationOffset: #{pf-size-prem(4px)};
-  --#{$description-list}__text--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--Color--100);
-  --#{$description-list}__text--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--Color--100);
+  --#{$description-list}__text--m-help-text--hover--TextDecorationColor: var(--pf-t--global--border--color--hover);
+  --#{$description-list}__text--m-help-text--focus--TextDecorationColor: var(--pf-t--global--border--color--hover);
 
   // Display modifiers
-  --#{$description-list}--m-display-lg__description--FontSize: var(--#{$pf-global}--FontSize--lg);
-  --#{$description-list}--m-display-2xl__description--FontSize: var(--#{$pf-global}--FontSize--2xl);
+  --#{$description-list}--m-display-lg__description--FontSize: var(--pf-t--global--font--size--body--lg); // TODO replace with new font tokens when available
+  --#{$description-list}--m-display-2xl__description--FontSize: var(--pf-t--global--font--size--heading--lg); // TODO replace with new font tokens when available
+
+  @include pf-v5-output-root-variables("--#{$description-list}--m-horizontal__term--width", $pf-v5-c-description-list--breakpoint-map);
+  @include pf-v5-build-css-variable-stack("--pf-v5-c-description-list__term--width", "--pf-v5-c-description-list--m-horizontal__term--width", $pf-v5-c-description-list--breakpoint-map);
+}
 
+.#{$description-list} { 
   display: grid;
-  grid-template-columns: var(--#{$description-list}--GridTemplateColumns);
+  grid-template-columns: repeat(var(--#{$description-list}--GridTemplateColumns--count), var(--#{$description-list}--GridTemplateColumns--width));  
   row-gap: var(--#{$description-list}--RowGap);
   column-gap: var(--#{$description-list}--ColumnGap);
   align-items: baseline;
 
-  &[class*="pf-m-horizontal"] {
-    @include pf-v5-build-css-variable-stack("--pf-v5-c-description-list__term--width", "--pf-v5-c-description-list--m-horizontal__term--width", $pf-v5-c-description-list--breakpoint-map);
-  }
-
   &.pf-m-inline-grid {
     display: inline-grid;
   }
@@ -100,13 +100,13 @@ $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   &.pf-m-fill-columns {
     display: block;
     column-count: var(--#{$description-list}--GridTemplateColumns--count);
-    margin-bottom: calc(var(--#{$description-list}--RowGap) * -1);
+    margin-block-end: calc(var(--#{$description-list}--RowGap) * -1);
 
     .#{$description-list}__group,
     > .#{$card} {
       display: inline-grid;
       width: 100%;
-      margin-bottom: var(--#{$description-list}--RowGap);
+      margin-block-end: var(--#{$description-list}--RowGap);
       break-inside: avoid;
       page-break-inside: avoid;
 
@@ -127,7 +127,10 @@ $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
 
   > .#{$card} {
     align-self: stretch;
-    padding: var(--#{$card}--first-child--PaddingTop) var(--#{$card}--child--PaddingRight) var(--#{$card}--child--PaddingBottom) var(--#{$card}--child--PaddingLeft);
+    padding-block-start: var(--#{$card}--first-child--PaddingTop);
+    padding-block-end: var(--#{$card}--child--PaddingBottom);
+    padding-inline-start: var(--#{$card}--child--PaddingLeft);
+    padding-inline-end: var(--#{$card}--child--PaddingRight);
   }
 }
 
@@ -145,7 +148,7 @@ $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
 .#{$description-list}__term,
 .#{$description-list}__description {
   min-width: 0; // this allows overflow-wrap to work
-  text-align: left;
+  text-align: start;
   overflow-wrap: break-word;
 }
 
@@ -163,7 +166,7 @@ $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
 .#{$description-list}__term-icon {
   flex-shrink: 0;
   min-width: var(--#{$description-list}__term-icon--MinWidth);
-  margin-right: var(--#{$description-list}__term-icon--MarginRight);
+  margin-inline-end: var(--#{$description-list}__term-icon--MarginRight);
   color: var(--#{$description-list}__term-icon--Color);
 }