@patternfly/design-tokens 1.12.0 → 1.13.1

package/build/css/tokens-charts-dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 02 Jul 2024 18:11:52 GMT
+// Generated on Fri, 13 Sep 2024 01:51:18 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--chart--global--BorderWidth--lg: 8;

package/build/css/tokens-charts.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 02 Jul 2024 18:11:52 GMT
+// Generated on Fri, 13 Sep 2024 01:51:18 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--chart--global--BorderWidth--lg: 8;

package/build/css/tokens-dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 02 Jul 2024 18:11:52 GMT
+// Generated on Fri, 13 Sep 2024 01:51:18 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
@@ -21,6 +21,7 @@
   --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
   --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
   --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
+  --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
   --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
   --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
   --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
@@ -32,9 +33,9 @@
   --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
   --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
   --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
-  --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
-  --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
-  --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
+  --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
+  --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
+  --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
   --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
   --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
   --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -77,7 +78,7 @@
   --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
   --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
   --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
-  --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
+  --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
   --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
   --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
   --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -87,6 +88,7 @@
   --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
   --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
   --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
+  --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
   --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
   --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
   --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
@@ -101,15 +103,16 @@
   --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
   --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
   --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
+  --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
   --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
   --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
   --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
   --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
   --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
   --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
-  --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
-  --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
-  --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
+  --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
+  --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
+  --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
   --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
   --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
   --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -243,9 +246,9 @@
   --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
   --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
   --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
-  --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
-  --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
-  --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
+  --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
+  --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
   --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
   --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
   --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -309,9 +312,9 @@
   --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
   --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
   --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
-  --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
-  --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
-  --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
+  --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
+  --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
   --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
   --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
   --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);

package/build/css/tokens-default.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 02 Jul 2024 18:11:52 GMT
+// Generated on Fri, 13 Sep 2024 01:51:18 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -55,9 +55,9 @@
   --pf-t--global--duration--50: 50ms;
   --pf-t--global--duration--500: 500ms;
   --pf-t--global--duration--600: 600ms;
-  --pf-t--global--font--family--100: Red Hat Text VF;
-  --pf-t--global--font--family--200: Red Hat Display VF;
-  --pf-t--global--font--family--300: Red Hat Mono VF;
+  --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
+  --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
+  --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
   --pf-t--global--font--line-height--100: 1.2999999523162842;
   --pf-t--global--font--line-height--200: 1.5;
   --pf-t--global--font--size--100: 0.75rem;
@@ -65,17 +65,17 @@
   --pf-t--global--font--size--300: 1rem;
   --pf-t--global--font--size--400: 1.125rem;
   --pf-t--global--font--size--500: 1.25rem;
-  --pf-t--global--font--size--600: 1.375rem;
+  --pf-t--global--font--size--600: 1.5rem;
   --pf-t--global--font--size--700: 1.75rem;
   --pf-t--global--font--size--800: 2.25rem;
   --pf-t--global--font--weight--100: 400;
   --pf-t--global--font--weight--200: 500;
-  --pf-t--global--font--weight--300: 700;
+  --pf-t--global--font--weight--300: 500;
   --pf-t--global--font--weight--400: 700;
   --pf-t--global--icon--size--100: 0.75rem;
   --pf-t--global--icon--size--200: 0.875rem;
   --pf-t--global--icon--size--250: 1rem;
-  --pf-t--global--icon--size--300: 1.375rem;
+  --pf-t--global--icon--size--300: 1.5rem;
   --pf-t--global--icon--size--400: 3.5rem;
   --pf-t--global--icon--size--500: 6rem;
   --pf-t--global--spacer--100: 0.25rem;
@@ -86,6 +86,10 @@
   --pf-t--global--spacer--600: 3rem;
   --pf-t--global--spacer--700: 4rem;
   --pf-t--global--spacer--800: 5rem;
+  --pf-t--global--text-decoration--line--100: none;
+  --pf-t--global--text-decoration--line--200: underline;
+  --pf-t--global--text-decoration--style--100: solid;
+  --pf-t--global--text-decoration--style--200: dashed;
   --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
   --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
   --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
@@ -107,6 +111,7 @@
   --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
   --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
   --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
+  --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
   --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
   --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
   --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -236,8 +241,8 @@
   --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
   --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
   --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
-  --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
-  --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
+  --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
+  --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
   --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
   --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
   --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
@@ -246,8 +251,10 @@
   --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
   --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500);
   --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
-  --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--100);
-  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--300);
+  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
+  --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100);
+  --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
+  --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
   --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
   --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
   --pf-t--global--icon--color--300: var(--pf-t--color--white);
@@ -286,6 +293,18 @@
   --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
   --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
   --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
+  --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
+  --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
   --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
   --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
   --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
@@ -294,6 +313,7 @@
   --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
   --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100);
   --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
+  --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
   --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
   --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
   --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
@@ -308,6 +328,7 @@
   --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
   --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
   --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
+  --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
   --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
   --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
   --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
@@ -435,10 +456,9 @@
   --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
   --pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md);
   --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg);
-  --pf-t--global--spacer--action--horizontal--plain: var(--pf-t--global--spacer--sm);
+  --pf-t--global--spacer--action--horizontal--plain--compact: var(--pf-t--global--spacer--xs);
+  --pf-t--global--spacer--action--horizontal--plain--default: var(--pf-t--global--spacer--sm);
   --pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl);
-  --pf-t--global--spacer--action--vertical--compact: var(--pf-t--global--spacer--xs);
-  --pf-t--global--spacer--action--vertical--spacious: var(--pf-t--global--spacer--md);
   --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm);
   --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md);
   --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm);
@@ -446,14 +466,20 @@
   --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs);
   --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm);
   --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--sm);
+  --pf-t--global--spacer--control--vertical--spacious: var(--pf-t--global--spacer--md);
   --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md);
   --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs);
   --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
   --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
   --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
-  --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
-  --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
+  --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
+  --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl);
+  --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
+  --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg);
+  --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
   --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
+  --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
+  --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
   --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
   --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
   --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
@@ -467,6 +493,8 @@
   --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
   --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
   --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
+  --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
+  --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
   --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
   --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
   --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);

package/build/css/tokens-palette.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 02 Jul 2024 18:11:52 GMT
+// Generated on Fri, 13 Sep 2024 01:51:18 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--color--black: #000000;

package/build.js

@@ -2,6 +2,21 @@
 const StyleDictionary = require('style-dictionary');
 const config = require('./config.default.json'); // Adjust the path if necessary
 const basePxFontSize = config.basePxFontSize || 16;
+const getTokenLayer = ({ filePath }) => {
+  if (filePath.includes('semantic.json')) return ['semantic', 'colors'];
+  if (filePath.includes('semantic.dark.json')) return ['semantic', 'colors'];
+  if (filePath.includes('semantic.dimension.json')) return ['semantic', 'dimension'];
+  if (filePath.includes('semantic.motion.json')) return ['semantic', 'motion'];
+  if (filePath.includes('base.json')) return ['base', 'colors'];
+  if (filePath.includes('base.dark.json')) return ['base', 'colors'];
+  if (filePath.includes('base.dimension.json')) return ['base', 'dimension'];
+  if (filePath.includes('base.motion.json')) return ['base', 'motion'];
+  if (filePath.includes('chart')) return ['chart'];
+  if (filePath.includes('palette.color.json')) return ['palette'];
+  return ['palette'];
+};
+// returns subdirectory within 'tokens' directory (ex: default, dark, etc)
+const getTheme = ({ filePath }) => /tokens\/([^\/]*)\//gm.exec(filePath)[1];
 
 const build = (selector) => {
   const { fileHeader, formattedVariables, sortByName } = StyleDictionary.formatHelpers;
@@ -25,6 +40,43 @@ const build = (selector) => {
     }
   });
 
+  StyleDictionary.registerFormat({
+    name: 'json/flat-categories',
+    formatter: function (dictionary) {
+      let tokens = {
+        semantic: {
+          colors: {},
+          dimension: {},
+          motion: {}
+        },
+        base: {
+          colors: {},
+          dimension: {},
+          motion: {}
+        },
+        palette: {},
+        chart: {}
+      };
+      dictionary.allTokens.map((token) => {
+        // determine token type based on tokens filepath
+        const theme = getTheme(token);
+        const layer = getTokenLayer(token);
+        let insertLayer = tokens;
+        while (layer.length) {
+          insertLayer = insertLayer[layer.shift()];
+        }
+        // assign each token object to token.name
+        insertLayer[token.name] = {};
+        insertLayer[token.name][theme] = token;
+        // attach references to build token chain
+        if (dictionary.usesReference(token.original.value)) {
+          token.references = dictionary.getReferences(token.original.value);
+        }
+      });
+      return JSON.stringify(tokens, null, 2);
+    }
+  });
+
   // Register custom transforms
   StyleDictionary.registerTransform({
     name: 'patternfly/global/px',
@@ -39,9 +91,7 @@ const build = (selector) => {
     name: 'patternfly/global/pxToRem',
     type: 'value',
     matcher: (token) =>
-      token.attributes.type === 'spacer' ||
-      token.attributes.item === 'size' ||
-      token.attributes.type === 'breakpoint',
+      token.attributes.type === 'spacer' || token.attributes.item === 'size' || token.attributes.type === 'breakpoint',
     transformer: (token) => `${token.value / basePxFontSize}rem`
   });
 
@@ -83,6 +133,8 @@ const build = (selector) => {
   const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
   const chartsExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.json');
   const chartsDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.dark.json');
+  const layersSD = StyleDictionary.extend(__dirname + '/config.layers.json');
+  const layersDarkSD = StyleDictionary.extend(__dirname + '/config.layers.dark.json');
 
   // Build all
   defaultExtendedSD.buildAllPlatforms();
@@ -90,6 +142,8 @@ const build = (selector) => {
   paletteExtendedSD.buildAllPlatforms();
   chartsExtendedSD.buildAllPlatforms();
   chartsDarkExtendedSD.buildAllPlatforms();
+  layersSD.buildAllPlatforms();
+  layersDarkSD.buildAllPlatforms();
 
   console.log('\n============================');
   console.log('\nBuild completed.');

package/cli.js

@@ -1,5 +1,5 @@
 const { program } = require('commander');
-const {build} = require('./build');
+const { build } = require('./build');
 
 program
   .version(require('./package.json').version)

package/config.layers.dark.json

@@ -0,0 +1,20 @@
+{
+  "include": ["tokens/default/*.json"],
+  "source": ["tokens/dark/*.json"],
+  "platforms": {
+    "json/default": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "patternfly-docs/content/",
+      "prefix": "pf-t",
+      "files": [
+        {
+          "destination": "token-layers-dark.json",
+          "format": "json/flat-categories",
+          "options": {
+            "outputReferences": false
+          }
+        }
+      ]
+    }
+  }
+}

package/config.layers.json

@@ -0,0 +1,19 @@
+{
+  "source": ["tokens/default/*.json"],
+  "platforms": {
+    "json/default": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "patternfly-docs/content/",
+      "prefix": "pf-t",
+      "files": [
+        {
+          "destination": "token-layers-default.json",
+          "format": "json/flat-categories",
+          "options": {
+            "outputReferences": false
+          }
+        }
+      ]
+    }
+  }
+}

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@patternfly/design-tokens",
-  "version": "1.12.0",
+  "version": "1.13.1",
   "description": "Define the design tokens for patternfly design system and component library",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "scripts": {
-    "build": "yarn build:js-from-scss",
+    "build": "yarn build:scss",
     "build:fed:packages": "node generate-fed-package-json.js",
     "build:scss": "node ./cli.js",
-    "build:js-from-scss": "node ./build-js-for-docs.js",
     "build:plugin": "webpack",
     "clean": "rimraf dist",
     "docs:develop": "pf-docs-framework start",
-    "docs:build": "yarn build:js-from-scss && pf-docs-framework build all --output public",
+    "docs:build": "yarn build:scss && pf-docs-framework build all --output public",
     "docs:serve": "pf-docs-framework serve public --port 5000",
     "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
@@ -32,7 +31,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.36",
+    "@patternfly/react-core": "6.0.0-alpha.94",
     "commander": "^12.0.0"
   },
   "peerDependencies": {
@@ -41,11 +40,11 @@
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.95.0",
-    "@patternfly/documentation-framework": "6.0.0-alpha.12",
-    "@patternfly/patternfly": "6.0.0-alpha.91",
+    "@patternfly/documentation-framework": "^6.0.0-alpha.66",
+    "@patternfly/patternfly": "6.0.0-alpha.205",
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/react-code-editor": "6.0.0-alpha.36",
-    "@patternfly/react-table": "6.0.0-alpha.36",
+    "@patternfly/react-code-editor": "6.0.0-alpha.94",
+    "@patternfly/react-table": "6.0.0-alpha.95",
     "css-loader": "^7.1.2",
     "html-inline-script-webpack-plugin": "^3.2.1",
     "html-webpack-plugin": "^5.6.0",

package/patternfly-docs/content/all-patternfly-tokens.md

@@ -3,7 +3,8 @@ section: tokens
 id: All PatternFly tokens
 ---
 
-
+import * as defaultTokens from './token-layers-default.json';
+import * as darkTokens from './token-layers-dark.json';
 import { TokensTable } from './tokensTable.js';
 
-<TokensTable/>
+<TokensTable tokenJson={{default: defaultTokens, dark: darkTokens}} />