Skip to content

fix: update HC tokens #148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mcoker merged 3 commits into from
May 8, 2026
Merged

fix: update HC tokens #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0ebc315
fix: update HC tokens
mcoker May 7, 2026
a199e1f
chore: update transformer to read opacity token
mcoker May 7, 2026
256c4f4
chore: updates
mcoker May 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,4 @@ public
!.yarn/releases
!.yarn/sdks
!.yarn/versions
.claude/*.local.*
8 changes: 7 additions & 1 deletion packages/module/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ const build = (selector) => {
StyleDictionary.registerTransform({
name: 'patternfly/global/percentage',
type: 'value',
matcher: (token) => token.attributes.item === 'opacity' && token.original.type === 'number',
matcher: (token) => token.path.includes('opacity') && token.original.type === 'number',
transformer: (token) => `${token.value}%`
});

Expand Down Expand Up @@ -191,6 +191,12 @@ const build = (selector) => {
const highContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.highcontrast.dark.json');
highContrastDarkExtendedSD.buildAllPlatforms();

const chartsHighContrastExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.highcontrast.json');
chartsHighContrastExtendedSD.buildAllPlatforms();

const chartsHighContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.highcontrast.dark.json');
chartsHighContrastDarkExtendedSD.buildAllPlatforms();

// Set glass tokens to initial in highcontrast themes
console.log('Setting glass tokens to initial in highcontrast themes...');
setGlassTokensToInitial(path.join(buildPath, 'tokens-highcontrast.scss'));
Expand Down
6 changes: 4 additions & 2 deletions packages/module/build/css/tokens-charts-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

// Do not edit directly
// Generated on Wed, 10 Sep 2025 19:58:14 GMT
// Generated on Thu, 07 May 2026 20:05:40 GMT

@mixin pf-v6-tokens {
--pf-t--chart--global--BorderWidth--lg: 8;
Expand All @@ -10,9 +10,11 @@
--pf-t--chart--global--FontSize--lg: 18;
--pf-t--chart--global--FontSize--sm: 14;
--pf-t--chart--global--FontSize--xs: 12;
--pf-t--chart--global--fill--opacity--area: 20%;
--pf-t--chart--global--label--margin: 8;
--pf-t--chart--global--label--padding: 10;
--pf-t--chart--global--label--stroke: transparent;
--pf-t--chart--global--label--stroke--color: transparent;
--pf-t--chart--global--label--stroke--width: 0;
--pf-t--chart--global--label--text-anchor: middle;
--pf-t--chart--global--layout--height: 300;
--pf-t--chart--global--layout--padding: 50;
Expand Down
175 changes: 175 additions & 0 deletions packages/module/build/css/tokens-charts-highcontrast-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@

// Do not edit directly
// Generated on Thu, 07 May 2026 20:05:40 GMT

@mixin pf-v6-tokens {
--pf-t--chart--global--BorderWidth--lg: 8;
--pf-t--chart--global--BorderWidth--sm: 2;
--pf-t--chart--global--BorderWidth--xs: 1;
--pf-t--chart--global--FontSize--2xl: 22;
--pf-t--chart--global--FontSize--lg: 18;
--pf-t--chart--global--FontSize--sm: 14;
--pf-t--chart--global--FontSize--xs: 12;
--pf-t--chart--global--fill--opacity--area: 20%;
--pf-t--chart--global--label--margin: 8;
--pf-t--chart--global--label--padding: 10;
--pf-t--chart--global--label--stroke--color: transparent;
--pf-t--chart--global--label--stroke--width: 0;
--pf-t--chart--global--label--text-anchor: middle;
--pf-t--chart--global--layout--height: 300;
--pf-t--chart--global--layout--padding: 50;
--pf-t--chart--global--layout--width: 450;
--pf-t--chart--global--letter-spacing: normal;
--pf-t--chart--global--stroke--width--sm: 2;
--pf-t--chart--global--stroke--width--xs: 1;
--pf-t--chart--global--stroke-line-cap: round;
--pf-t--chart--global--stroke-line-join: round;
--pf-t--chart--color--black--100: var(--pf-t--color--gray--50);
--pf-t--chart--color--black--200: var(--pf-t--color--gray--40);
--pf-t--chart--color--black--300: var(--pf-t--color--gray--30);
--pf-t--chart--color--black--400: var(--pf-t--color--gray--20);
--pf-t--chart--color--black--500: var(--pf-t--color--gray--10);
--pf-t--chart--color--blue--100: var(--pf-t--color--blue--50);
--pf-t--chart--color--blue--200: var(--pf-t--color--blue--40);
--pf-t--chart--color--blue--300: var(--pf-t--color--blue--30);
--pf-t--chart--color--blue--400: var(--pf-t--color--blue--20);
--pf-t--chart--color--blue--500: var(--pf-t--color--blue--10);
--pf-t--chart--color--green--100: var(--pf-t--color--green--50);
--pf-t--chart--color--green--200: var(--pf-t--color--green--40);
--pf-t--chart--color--green--300: var(--pf-t--color--green--30);
--pf-t--chart--color--green--400: var(--pf-t--color--green--20);
--pf-t--chart--color--green--500: var(--pf-t--color--green--10);
--pf-t--chart--color--orange--100: var(--pf-t--color--orange--50);
--pf-t--chart--color--orange--200: var(--pf-t--color--orange--40);
--pf-t--chart--color--orange--300: var(--pf-t--color--orange--30);
--pf-t--chart--color--orange--400: var(--pf-t--color--orange--20);
--pf-t--chart--color--orange--500: var(--pf-t--color--orange--10);
--pf-t--chart--color--purple--100: var(--pf-t--color--purple--50);
--pf-t--chart--color--purple--200: var(--pf-t--color--purple--40);
--pf-t--chart--color--purple--300: var(--pf-t--color--purple--30);
--pf-t--chart--color--purple--400: var(--pf-t--color--purple--20);
--pf-t--chart--color--purple--500: var(--pf-t--color--purple--10);
--pf-t--chart--color--red-orange--100: var(--pf-t--color--red-orange--50);
--pf-t--chart--color--red-orange--200: var(--pf-t--color--red-orange--40);
--pf-t--chart--color--red-orange--300: var(--pf-t--color--red-orange--30);
--pf-t--chart--color--red-orange--400: var(--pf-t--color--red-orange--20);
--pf-t--chart--color--red-orange--500: var(--pf-t--color--red-orange--10);
--pf-t--chart--color--teal--100: var(--pf-t--color--teal--50);
--pf-t--chart--color--teal--200: var(--pf-t--color--teal--40);
--pf-t--chart--color--teal--300: var(--pf-t--color--teal--30);
--pf-t--chart--color--teal--400: var(--pf-t--color--teal--20);
--pf-t--chart--color--teal--500: var(--pf-t--color--teal--10);
--pf-t--chart--color--yellow--100: var(--pf-t--color--yellow--50);
--pf-t--chart--color--yellow--200: var(--pf-t--color--yellow--40);
--pf-t--chart--color--yellow--300: var(--pf-t--color--yellow--30);
--pf-t--chart--color--yellow--400: var(--pf-t--color--yellow--20);
--pf-t--chart--color--yellow--500: var(--pf-t--color--yellow--10);
--pf-t--chart--global--danger--color--100: var(--pf-t--color--red-orange--40);
--pf-t--chart--global--fill--color--100: var(--pf-t--color--gray--60);
--pf-t--chart--global--fill--color--200: var(--pf-t--color--gray--50);
--pf-t--chart--global--fill--color--300: var(--pf-t--color--gray--40);
--pf-t--chart--global--fill--color--400: var(--pf-t--color--gray--30);
--pf-t--chart--global--fill--color--500: var(--pf-t--color--gray--20);
--pf-t--chart--global--fill--color--700: var(--pf-t--color--gray--10);
--pf-t--chart--global--fill--color--900: var(--pf-t--color--white);
--pf-t--chart--global--fill--color--white: var(--pf-t--color--white);
--pf-t--chart--global--label--fill: var(--pf-t--color--white);
--pf-t--chart--global--success--color--100: var(--pf-t--color--blue--30);
--pf-t--chart--global--warning--color--100: var(--pf-t--color--orange--30);
--pf-t--chart--global--warning--color--200: var(--pf-t--color--yellow--30);
--pf-t--chart--theme--colorscales--blue--colorscale--100: var(--pf-t--chart--color--blue--300);
--pf-t--chart--theme--colorscales--blue--colorscale--200: var(--pf-t--chart--color--blue--100);
--pf-t--chart--theme--colorscales--blue--colorscale--300: var(--pf-t--chart--color--blue--500);
--pf-t--chart--theme--colorscales--blue--colorscale--400: var(--pf-t--chart--color--blue--200);
--pf-t--chart--theme--colorscales--blue--colorscale--500: var(--pf-t--chart--color--blue--400);
--pf-t--chart--theme--colorscales--gray--colorscale--100: var(--pf-t--chart--color--black--300);
--pf-t--chart--theme--colorscales--gray--colorscale--200: var(--pf-t--chart--color--black--100);
--pf-t--chart--theme--colorscales--gray--colorscale--300: var(--pf-t--chart--color--black--500);
--pf-t--chart--theme--colorscales--gray--colorscale--400: var(--pf-t--chart--color--black--200);
--pf-t--chart--theme--colorscales--gray--colorscale--500: var(--pf-t--chart--color--black--400);
--pf-t--chart--theme--colorscales--green--colorscale--100: var(--pf-t--chart--color--green--300);
--pf-t--chart--theme--colorscales--green--colorscale--200: var(--pf-t--chart--color--green--100);
--pf-t--chart--theme--colorscales--green--colorscale--300: var(--pf-t--chart--color--green--500);
--pf-t--chart--theme--colorscales--green--colorscale--400: var(--pf-t--chart--color--green--200);
--pf-t--chart--theme--colorscales--green--colorscale--500: var(--pf-t--chart--color--green--400);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--100: var(--pf-t--chart--color--blue--200);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1000: var(--pf-t--chart--color--orange--300);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1100: var(--pf-t--chart--color--blue--500);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1200: var(--pf-t--chart--color--green--100);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1400: var(--pf-t--chart--color--yellow--100);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1500: var(--pf-t--chart--color--orange--500);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1600: var(--pf-t--chart--color--blue--100);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1700: var(--pf-t--chart--color--green--500);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1800: var(--pf-t--chart--color--teal--100);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1900: var(--pf-t--chart--color--yellow--500);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--200: var(--pf-t--chart--color--green--300);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2000: var(--pf-t--chart--color--orange--100);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2100: var(--pf-t--chart--color--blue--400);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2200: var(--pf-t--chart--color--green--400);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2300: var(--pf-t--chart--color--teal--400);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2400: var(--pf-t--chart--color--yellow--400);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2500: var(--pf-t--chart--color--orange--400);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--300: var(--pf-t--chart--color--teal--200);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--400: var(--pf-t--chart--color--yellow--300);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--500: var(--pf-t--chart--color--orange--200);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--600: var(--pf-t--chart--color--blue--300);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--700: var(--pf-t--chart--color--green--200);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--800: var(--pf-t--chart--color--teal--300);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--900: var(--pf-t--chart--color--yellow--200);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--100: var(--pf-t--chart--color--blue--200);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1000: var(--pf-t--chart--color--green--300);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1100: var(--pf-t--chart--color--purple--200);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1200: var(--pf-t--chart--color--orange--300);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1300: var(--pf-t--chart--color--teal--200);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1400: var(--pf-t--chart--color--black--300);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1500: var(--pf-t--chart--color--blue--100);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1600: var(--pf-t--chart--color--yellow--500);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1700: var(--pf-t--chart--color--green--100);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1800: var(--pf-t--chart--color--purple--500);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1900: var(--pf-t--chart--color--orange--100);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--200: var(--pf-t--chart--color--yellow--300);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2000: var(--pf-t--chart--color--teal--500);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2100: var(--pf-t--chart--color--black--100);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2200: var(--pf-t--chart--color--blue--500);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2300: var(--pf-t--chart--color--yellow--100);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2400: var(--pf-t--chart--color--green--500);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2500: var(--pf-t--chart--color--purple--100);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2600: var(--pf-t--chart--color--orange--500);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2700: var(--pf-t--chart--color--teal--100);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2800: var(--pf-t--chart--color--black--500);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2900: var(--pf-t--chart--color--blue--400);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--300: var(--pf-t--chart--color--green--200);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3000: var(--pf-t--chart--color--yellow--400);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3100: var(--pf-t--chart--color--green--400);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3200: var(--pf-t--chart--color--purple--400);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3300: var(--pf-t--chart--color--orange--400);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3400: var(--pf-t--chart--color--teal--400);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3500: var(--pf-t--chart--color--black--400);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--400: var(--pf-t--chart--color--purple--300);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--500: var(--pf-t--chart--color--orange--200);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--600: var(--pf-t--chart--color--teal--300);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--700: var(--pf-t--chart--color--black--200);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--800: var(--pf-t--chart--color--blue--300);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--900: var(--pf-t--chart--color--yellow--200);
--pf-t--chart--theme--colorscales--orange--colorscale--100: var(--pf-t--chart--color--orange--300);
--pf-t--chart--theme--colorscales--orange--colorscale--200: var(--pf-t--chart--color--orange--100);
--pf-t--chart--theme--colorscales--orange--colorscale--300: var(--pf-t--chart--color--orange--500);
--pf-t--chart--theme--colorscales--orange--colorscale--400: var(--pf-t--chart--color--orange--200);
--pf-t--chart--theme--colorscales--orange--colorscale--500: var(--pf-t--chart--color--orange--400);
--pf-t--chart--theme--colorscales--purple--colorscale--100: var(--pf-t--chart--color--purple--300);
--pf-t--chart--theme--colorscales--purple--colorscale--200: var(--pf-t--chart--color--purple--100);
--pf-t--chart--theme--colorscales--purple--colorscale--300: var(--pf-t--chart--color--purple--500);
--pf-t--chart--theme--colorscales--purple--colorscale--400: var(--pf-t--chart--color--purple--200);
--pf-t--chart--theme--colorscales--purple--colorscale--500: var(--pf-t--chart--color--purple--400);
--pf-t--chart--theme--colorscales--teal--colorscale--100: var(--pf-t--chart--color--teal--300);
--pf-t--chart--theme--colorscales--teal--colorscale--200: var(--pf-t--chart--color--teal--100);
--pf-t--chart--theme--colorscales--teal--colorscale--300: var(--pf-t--chart--color--teal--500);
--pf-t--chart--theme--colorscales--teal--colorscale--400: var(--pf-t--chart--color--teal--200);
--pf-t--chart--theme--colorscales--teal--colorscale--500: var(--pf-t--chart--color--teal--400);
--pf-t--chart--theme--colorscales--yellow--colorscale--100: var(--pf-t--chart--color--yellow--300);
--pf-t--chart--theme--colorscales--yellow--colorscale--200: var(--pf-t--chart--color--yellow--100);
--pf-t--chart--theme--colorscales--yellow--colorscale--300: var(--pf-t--chart--color--yellow--500);
--pf-t--chart--theme--colorscales--yellow--colorscale--400: var(--pf-t--chart--color--yellow--200);
--pf-t--chart--theme--colorscales--yellow--colorscale--500: var(--pf-t--chart--color--yellow--400);
}
Loading
Loading