patternfly · mcoker · Nov 1, 2023 · Aug 3, 2023 · Aug 8, 2023 · Aug 8, 2023
diff --git a/.github/upload-preview.js b/.github/upload-preview.js
@@ -27,8 +27,8 @@ switch(uploadFolderName) {
     uploadURL += '-a11y.surge.sh';
     break;
   case 'public':
-    if (!prnum && prbranch === 'main') {
-      uploadURL = 'core-staging.patternfly.org';
+    if (!prnum && prbranch === 'v6') {
+      uploadURL = 'pf6.patternfly.org';
       fs.writeFileSync(path.join(__dirname, '../public/CNAME'), uploadURL);
     }
     else {

diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml
@@ -17,10 +17,10 @@ jobs:
           git checkout tmp
 
       - run: |
-          git rev-parse origin/main
+          git rev-parse origin/v6
           git rev-parse HEAD
-          git rev-parse origin/main..HEAD
-          git log origin/main..HEAD --format="%b"
+          git rev-parse origin/v6..HEAD
+          git log origin/v6..HEAD --format="%b"
 
       # Yes, we really want to checkout the PR
       # Injected by generate-workflows.js

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -3,7 +3,7 @@ name: release
 on:
   push:
     branches:
-      - main
+      - v6
 jobs:
   build-deploy:
     if: "!contains(github.event.head_commit.message, 'ci skip')"

diff --git a/.stylelintrc b/.stylelintrc
@@ -40,7 +40,7 @@
         "stylelint-commands"
       ]
     }],
-    "custom-property-pattern": "^pf-v5-(global|[lcud])-.+$",
+    "custom-property-pattern": "^pf-(v5|t-)-(color|global|[lcud])-.+$",
     "declaration-block-no-redundant-longhand-properties": null,
     "declaration-no-important": true,
     "font-weight-notation": "numeric",

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -1,4 +1,5 @@
 This project is governed by the [Contributor Covenant version 1.4][1]. All contributors and participants agree to abide by its terms. To report violations, send an email to [[email protected]][2].
 
  [1]: https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
- [2]: mailto:[email protected]
+ [2]: mailto:[email protected]
+
diff --git a/package.json b/package.json
@@ -106,6 +106,7 @@
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "access": "public"
+    "access": "public",
+    "tag": "alpha"
   }
 }
diff --git a/release.config.js b/release.config.js
@@ -2,7 +2,8 @@ module.exports = {
   branches: [
     'do-not-delete',
     { name: 'v4', channel: 'prerelease-v4', range: '4.x' },
-    { name: 'main', channel: 'prerelease', prerelease: 'prerelease' }
+    { name: 'main', channel: 'prerelease', prerelease: 'prerelease' },
+    { name: 'v6', channel: 'alpha', prerelease: 'alpha' }
   ],
   analyzeCommits: {
     preset: 'angular'

diff --git a/src/patternfly/base/_globals.scss b/src/patternfly/base/_globals.scss
@@ -47,11 +47,12 @@
     height: 100%;
   }
 
+  // TODO
   :where(body) {
-    font-family: var(--#{$pf-global}--FontFamily--text);
-    font-size: var(--#{$pf-global}--FontSize--md);
-    font-weight: var(--#{$pf-global}--FontWeight--normal);
-    line-height: var(--#{$pf-global}--LineHeight--md);
+    font-family: var(--pf-t--global--font--family--body);
+    font-size: var(--pf-t--global--font--size--body);
+    font-weight: var(--pf-t--global--font--weight--body);
+    line-height: var(--pf-t--global--font--line-height--body);
   }
 
   :where(
@@ -63,7 +64,7 @@
     h6
    ) {
     font-size: 100%;
-    font-weight: var(--#{$pf-global}--FontWeight--normal);
+    font-weight: var(--pf-t--global--font--weight--body);
   }
 
   :where(ul) {
@@ -80,8 +81,8 @@
     margin: 0;
     font-family: inherit;
     font-size: 100%;
-    line-height: var(--#{$pf-global}--LineHeight--md);
-    color: var(--#{$pf-global}--Color--100);
+    line-height: var(--pf-t--global--font--line-height--body);
+    color: var(--pf-t--global--text--color--regular);
   }
 
   :where(
@@ -117,18 +118,17 @@
     code,
     pre
   ) {
-    font-family: var(--#{$pf-global}--FontFamily--monospace);
+    font-family: var(--pf-t--global--font--family--mono);
   }
 
   :where(a) {
-    font-weight: var(--#{$pf-global}--link--FontWeight);
-    color: var(--#{$pf-global}--link--Color);
-    text-decoration: var(--#{$pf-global}--link--TextDecoration);
+    color: var(--pf-t--global--text--color--link--default);
+    text-decoration: var(--pf-t--global--link--text-decoration);
   }
 
   :where(a:hover) {
-    --#{$pf-global}--link--Color: var(--#{$pf-global}--link--Color--hover);
-    --#{$pf-global}--link--TextDecoration: var(--#{$pf-global}--link--TextDecoration--hover);
+    --#{$pf-global}--link--Color: var(--pf-t--global--text--color--link--hover);
+    --#{$pf-global}--link--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
   }
 
   :where(

diff --git a/src/patternfly/base/_variables.scss b/src/patternfly/base/_variables.scss
@@ -297,3 +297,8 @@
 @include pf-v5-theme-dark {
   @include pf-v5-theme-dark-variables;
 }
+
+@import "./tokens/tokens-palette";
+@import "./tokens/tokens-default";
+@import "./tokens/tokens-font";
+@import "./tokens/tokens-dark";
diff --git a/src/patternfly/base/tokens/_tokens-dark.scss b/src/patternfly/base/tokens/_tokens-dark.scss
diff --git a/src/patternfly/base/tokens/_tokens-default.scss b/src/patternfly/base/tokens/_tokens-default.scss
diff --git a/src/patternfly/base/tokens/_tokens-font.scss b/src/patternfly/base/tokens/_tokens-font.scss
@@ -0,0 +1,96 @@
+// FONT TOKENS
+// Manually added from hackathon values
+// Currently not being exported from Figma because they are styles rather than variables
+// The ability to make font variables is reportedly coming by the end of the year
+
+:root {
+  // Base tokens for fonts
+  --pf-t--global--font--family--100: redhattext;
+  --pf-t--global--font--family--200: redhatdisplay;
+  --pf-t--global--font--family--300: redhatmono;
+  --pf-t--global--font--line-height--100: 1.3;
+  --pf-t--global--font--line-height--200: 1.5;
+  --pf-t--global--font--weight--body--100: 400;
+  --pf-t--global--font--weight--body--200: 600;
+  --pf-t--global--font--weight--heading--100: 700; // what should this be?
+  --pf-t--global--font--weight--heading--200: 700;
+  --pf-t--global--font--size--body--100: 12px;
+  --pf-t--global--font--size--body--200: 14px;
+  --pf-t--global--font--size--body--300: 16px;
+  --pf-t--global--font--size--heading--100: 16px;
+  --pf-t--global--font--size--heading--200: 18px;
+  --pf-t--global--font--size--heading--300: 20px;
+  --pf-t--global--font--size--heading--400: 24px;
+  --pf-t--global--font--size--heading--500: 28px;
+  --pf-t--global--font--size--heading--600: 36px;
+
+  // Semantic tokens for fonts
+  --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--weight--body: var(--pf-t--global--font--weight--body--100);
+  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
+  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
+  --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
+  --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--body--100);
+  --pf-t--global--font--size--body--md: var(--pf-t--global--font--size--body--200);
+  --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--body--300);
+  --pf-t--global--font--size--body: var(--pf-t--global--font--size--body--md);
+  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--heading--100);
+  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--heading--200);
+  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--heading--300);
+  --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
+  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
+  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
+
+  // Other missing ones
+  // text-decoration
+  --pf-t--global--text-decoration--100: none;
+  --pf-t--global--text-decoration--200: underline;
+  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
+  --pf-t--global--link--text-decoration--hover: var(--pf-t--global--text-decoration--200);
+
+  // blend modes 
+  --pf-t--global--mix-blend-mode--100: multiply;
+  --pf-t--global--mix-blend-mode--200: screen;
+  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
+
+  // semantic border width
+  --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
+  --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
+  --pf-t--global--border--width--control--active: var(--pf-t--global--border--width--200);
+
+  // box-shadow
+  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 16%);
+  --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 16%);
+  --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 16%);
+  --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 16%);
+  --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 16%);
+  --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--md--top: 0px -4px 8px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--md--bottom: 0px 4px 8px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--md--left: -4px 0px 8px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--md--right: 4px 0px 8px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--lg--top: 0px -8px 24px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--lg--bottom: 0px 8px 24px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--lg--left: -8px 0px 24px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--lg--right: 8px 0px 24px 0px rgb(0 0 0 / 12%);
+
+  &:where(.pf-v5-theme-dark) {
+    // blend mode
+    --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
+
+    // box shadow
+    --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
+    --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
+    --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
+    --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
+    --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
+    --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
+    --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
+  }
+}
+
diff --git a/src/patternfly/base/tokens/_tokens-palette.scss b/src/patternfly/base/tokens/_tokens-palette.scss
@@ -0,0 +1,75 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 04 Oct 2023 12:59:21 GMT
+ */
+
+:root {
+  --pf-t--color--white: #fff;
+  --pf-t--color--black: #000;
+  --pf-t--color--gray--1000: #151515;
+  --pf-t--color--gray--900: #1f1f1f;
+  --pf-t--color--gray--800: #292929;
+  --pf-t--color--gray--700: #383838;
+  --pf-t--color--gray--600: #4d4d4d;
+  --pf-t--color--gray--500: #6e6e6e;
+  --pf-t--color--gray--400: #a3a3a3;
+  --pf-t--color--gray--300: #c7c7c7;
+  --pf-t--color--gray--200: #e0e0e0;
+  --pf-t--color--gray--100: #f2f2f2;
+  --pf-t--color--cyan--700: #023233;
+  --pf-t--color--cyan--600: #074c4d;
+  --pf-t--color--cyan--500: #187577;
+  --pf-t--color--cyan--400: #42adaf;
+  --pf-t--color--cyan--300: #88dadb;
+  --pf-t--color--cyan--200: #b3ebec;
+  --pf-t--color--cyan--100: #e3fcfc;
+  --pf-t--color--blue--700: #001c43;
+  --pf-t--color--blue--600: #002b68;
+  --pf-t--color--blue--500: #0043a0;
+  --pf-t--color--blue--400: #0c61d9;
+  --pf-t--color--blue--300: #60a2ff;
+  --pf-t--color--blue--200: #9cc5ff;
+  --pf-t--color--blue--100: #d9e9ff;
+  --pf-t--color--gold--700: #4e3500;
+  --pf-t--color--gold--600: #755200;
+  --pf-t--color--gold--500: #ac7a00;
+  --pf-t--color--gold--400: #f0ab00;
+  --pf-t--color--gold--300: #ffcd5b;
+  --pf-t--color--gold--200: #ffdc9b;
+  --pf-t--color--gold--100: #ffefd9;
+  --pf-t--color--green--700: #062901;
+  --pf-t--color--green--600: #0b3906;
+  --pf-t--color--green--500: #1b5813;
+  --pf-t--color--green--400: #3e8635;
+  --pf-t--color--green--300: #83c079;
+  --pf-t--color--green--200: #b2deaa;
+  --pf-t--color--green--100: #e7fce3;
+  --pf-t--color--orange--700: #501d00;
+  --pf-t--color--orange--600: #792f04;
+  --pf-t--color--orange--500: #b14e14;
+  --pf-t--color--orange--400: #f7823d;
+  --pf-t--color--orange--300: #ffb989;
+  --pf-t--color--orange--200: #ffd1b2;
+  --pf-t--color--orange--100: #ffe7d9;
+  --pf-t--color--orangered--700: #331500;
+  --pf-t--color--orangered--600: #552000;
+  --pf-t--color--orangered--500: #882d00;
+  --pf-t--color--orangered--400: #cc3a00;
+  --pf-t--color--orangered--300: #ff542e;
+  --pf-t--color--orangered--200: #ff947c;
+  --pf-t--color--orangered--100: #ffd3c9;
+  --pf-t--color--purple--700: #1c1337;
+  --pf-t--color--purple--600: #291b55;
+  --pf-t--color--purple--500: #3e2882;
+  --pf-t--color--purple--400: #5f40be;
+  --pf-t--color--purple--300: #9a81e5;
+  --pf-t--color--purple--200: #c0b0f1;
+  --pf-t--color--purple--100: #eae3fc;
+  --pf-t--color--red--700: #3a0400;
+  --pf-t--color--red--600: #5a0600;
+  --pf-t--color--red--500: #8a0a00;
+  --pf-t--color--red--400: #c9190b;
+  --pf-t--color--red--300: #ee665b;
+  --pf-t--color--red--200: #f69f98;
+  --pf-t--color--red--100: #ffdbd9;
+}
diff --git a/src/patternfly/components/Alert/alert-group.scss b/src/patternfly/components/Alert/alert-group.scss
@@ -3,29 +3,31 @@
 // Tabs
 .#{$alert-group} {
   // Alert group variables
-  --#{$alert-group}__item--MarginTop: var(--#{$pf-global}--spacer--sm);
+  --#{$alert-group}__item--MarginTop: var(--pf-t--global--spacer--md);
 
   // Toast variables
-  --#{$alert-group}--m-toast--Top: var(--#{$pf-global}--spacer--2xl);
-  --#{$alert-group}--m-toast--Right: var(--#{$pf-global}--spacer--xl);
+  --#{$alert-group}--m-toast--Top: var(--pf-t--global--spacer--2xl);
+  --#{$alert-group}--m-toast--Right: var(--pf-t--global--spacer--xl);
   --#{$alert-group}--m-toast--MaxWidth: #{pf-size-prem(600px)};
   --#{$alert-group}--m-toast--ZIndex: var(--#{$pf-global}--ZIndex--2xl);
 
   // Overflow button
   --#{$alert-group}__overflow-button--BorderWidth: 0;
-  --#{$alert-group}__overflow-button--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$alert-group}__overflow-button--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$alert-group}__overflow-button--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$alert-group}__overflow-button--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$alert-group}__overflow-button--Color: var(--#{$pf-global}--link--Color);
-  --#{$alert-group}__overflow-button--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
-  --#{$alert-group}__overflow-button--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$alert-group}__overflow-button--hover--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$alert-group}__overflow-button--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--lg), var(--#{$pf-global}--BoxShadow--lg-bottom);
-  --#{$alert-group}__overflow-button--focus--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$alert-group}__overflow-button--focus--BoxShadow: var(--#{$pf-global}--BoxShadow--lg), var(--#{$pf-global}--BoxShadow--lg-bottom);
-  --#{$alert-group}__overflow-button--active--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$alert-group}__overflow-button--active--BoxShadow: var(--#{$pf-global}--BoxShadow--lg), var(--#{$pf-global}--BoxShadow--lg-bottom);
+  --#{$alert-group}__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$alert-group}__overflow-button--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$alert-group}__overflow-button--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$alert-group}__overflow-button--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$alert-group}__overflow-button--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$alert-group}__overflow-button--Color: var(--pf-t--global--text--color--link--default);
+  --#{$alert-group}__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
+  --#{$alert-group}__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --#{$alert-group}__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
+  --#{$alert-group}__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
+  --#{$alert-group}__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
+  --#{$alert-group}__overflow-button--focus--Color: var(--pf-t--global--text--color--link--hover);
+  --#{$alert-group}__overflow-button--focus--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
+  --#{$alert-group}__overflow-button--active--Color: var(--pf-t--global--text--color--link--hover);
+  --#{$alert-group}__overflow-button--active--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
 
   // Spacing between alerts
   > * + * {
@@ -53,10 +55,12 @@
   color: var(--#{$alert-group}__overflow-button--Color);
   background-color: var(--#{$alert-group}__overflow-button--BackgroundColor);
   border-width: var(--#{$alert-group}__overflow-button--BorderWidth);
+  border-radius: var(--#{$alert-group}__overflow-button--BorderRadius);
   box-shadow: var(--#{$alert-group}__overflow-button--BoxShadow);
 
   &:hover {
     --#{$alert-group}__overflow-button--Color: var(--#{$alert-group}__overflow-button--hover--Color);
+    --#{$alert-group}__overflow-button--BackgroundColor: var(--#{$alert-group}__overflow-button--hover--BackgroundColor);
     --#{$alert-group}__overflow-button--BoxShadow: var(--#{$alert-group}__overflow-button--hover--BoxShadow);
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ name: release @@
     on:
       push:
         branches:
-          - main
+          - v6
     jobs:
       build-deploy:
         if: "!contains(github.event.head_commit.message, 'ci skip')"
@@ Expand Down @@