Skip to content

Commit

Permalink
Merge pull request #14 from srambach/charts-tokens
Browse files Browse the repository at this point in the history 
Refresh token files and add chart tokens to the build
  • Loading branch information
@srambach
srambach authored Feb 2, 2024
2 parents 0de0b96 + 4e3cbdc commit 415afec
Show file tree
Hide file tree
Showing 15 changed files with 3,364 additions and 1,725 deletions.
6 changes: 5 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
# design-tokens
## Patternfly Design Tokens

# Usage
`yarn build:scss` to build the SCSS files to the /build directory

# Note
We are temporarily pushing the built SCSS files to the repo for ease of access. Additional PRs should rebuild and repush updated SCSS files if they would be affected by the PR changes, to keep them up to date.
2 changes: 2 additions & 0 deletions packages/module/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,13 @@ StyleDictionary.registerTransformGroup({
const defaultExtendedSD = StyleDictionary.extend(__dirname + '/config.default.json');
const darkExtendedSD = StyleDictionary.extend(__dirname + '/config.dark.json');
const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
const chartExtendedSD = StyleDictionary.extend(__dirname + '/config.chart.json');

// Build all
defaultExtendedSD.buildAllPlatforms();
darkExtendedSD.buildAllPlatforms();
paletteExtendedSD.buildAllPlatforms();
chartExtendedSD.buildAllPlatforms();

console.log('\n============================');
console.log('\nBuild completed.');
159 changes: 159 additions & 0 deletions packages/module/build/css/_tokens-charts.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
// /**
// * Do not edit directly
// * Generated on Thu, 01 Feb 2024 18:21:44 GMT
// */

:root {
--pf-t--chart--stroke--width--sm: 2px;
--pf-t--chart--stroke--width--xs: 1px;
--pf-t--chart--BorderWidth--lg: 8px;
--pf-t--chart--BorderWidth--sm: 2px;
--pf-t--chart--BorderWidth--xs: 1px;
--pf-t--chart--color--fills-and-strokes--fill--color--white: var(--pf-t--color--white);
--pf-t--chart--color--fills-and-strokes--fill--color--900: var(--pf-t--color--gray--90);
--pf-t--chart--color--fills-and-strokes--fill--color--700: var(--pf-t--color--gray--70);
--pf-t--chart--color--fills-and-strokes--fill--color--500: var(--pf-t--color--gray--50);
--pf-t--chart--color--fills-and-strokes--fill--color--400: var(--pf-t--color--gray--40);
--pf-t--chart--color--fills-and-strokes--fill--color--300: var(--pf-t--color--gray--30);
--pf-t--chart--color--fills-and-strokes--fill--color--200: var(--pf-t--color--gray--20);
--pf-t--chart--color--fills-and-strokes--fill--color--100: var(--pf-t--color--gray--10);
--pf-t--chart--color--fills-and-strokes--warning--color--200: var(--pf-t--color--yellow--40);
--pf-t--chart--color--fills-and-strokes--warning--color--100: var(--pf-t--color--orange--40);
--pf-t--chart--color--fills-and-strokes--success--color--100: var(--pf-t--color--blue--50);
--pf-t--chart--color--black--500: var(--pf-t--color--gray--50);
--pf-t--chart--color--black--400: var(--pf-t--color--gray--40);
--pf-t--chart--color--black--300: var(--pf-t--color--gray--30);
--pf-t--chart--color--black--200: var(--pf-t--color--gray--20);
--pf-t--chart--color--black--100: var(--pf-t--color--gray--10);
--pf-t--chart--color--red-orange--500: var(--pf-t--color--red-orange--70);
--pf-t--chart--color--red-orange--400: var(--pf-t--color--red-orange--60);
--pf-t--chart--color--red-orange--300: 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--100: var(--pf-t--color--red-orange--30);
--pf-t--chart--color--orange--500: var(--pf-t--color--orange--70);
--pf-t--chart--color--orange--400: var(--pf-t--color--orange--60);
--pf-t--chart--color--orange--300: var(--pf-t--color--orange--50);
--pf-t--chart--color--orange--200: var(--pf-t--color--orange--40);
--pf-t--chart--color--orange--100: var(--pf-t--color--orange--30);
--pf-t--chart--color--yellow--500: var(--pf-t--color--yellow--60);
--pf-t--chart--color--yellow--400: var(--pf-t--color--yellow--50);
--pf-t--chart--color--yellow--300: var(--pf-t--color--yellow--40);
--pf-t--chart--color--yellow--200: var(--pf-t--color--yellow--30);
--pf-t--chart--color--yellow--100: var(--pf-t--color--yellow--20);
--pf-t--chart--color--purple--500: var(--pf-t--color--purple--70);
--pf-t--chart--color--purple--400: var(--pf-t--color--purple--60);
--pf-t--chart--color--purple--300: var(--pf-t--color--purple--50);
--pf-t--chart--color--purple--200: var(--pf-t--color--purple--40);
--pf-t--chart--color--purple--100: var(--pf-t--color--purple--30);
--pf-t--chart--color--teal--500: var(--pf-t--color--teal--70);
--pf-t--chart--color--teal--400: var(--pf-t--color--teal--60);
--pf-t--chart--color--teal--300: var(--pf-t--color--teal--50);
--pf-t--chart--color--teal--200: var(--pf-t--color--teal--40);
--pf-t--chart--color--teal--100: var(--pf-t--color--teal--30);
--pf-t--chart--color--green--500: var(--pf-t--color--green--70);
--pf-t--chart--color--green--400: var(--pf-t--color--green--60);
--pf-t--chart--color--green--300: var(--pf-t--color--green--50);
--pf-t--chart--color--green--200: var(--pf-t--color--green--40);
--pf-t--chart--color--green--100: var(--pf-t--color--green--30);
--pf-t--chart--color--blue--500: var(--pf-t--color--blue--70);
--pf-t--chart--color--blue--400: var(--pf-t--color--blue--60);
--pf-t--chart--color--blue--300: var(--pf-t--color--blue--50);
--pf-t--chart--color--blue--200: var(--pf-t--color--blue--40);
--pf-t--chart--color--blue--100: var(--pf-t--color--blue--30);
--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--3400: var(--pf-t--chart--color--teal--200);
--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--3200: var(--pf-t--chart--color--purple--200);
--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--3000: var(--pf-t--chart--color--yellow--200);
--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--2800: var(--pf-t--chart--color--black--200);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2700: var(--pf-t--chart--color--teal--400);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2600: var(--pf-t--chart--color--orange--200);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2500: var(--pf-t--chart--color--purple--400);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2400: var(--pf-t--chart--color--green--200);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2300: var(--pf-t--chart--color--yellow--400);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2200: var(--pf-t--chart--color--blue--200);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2100: var(--pf-t--chart--color--black--500);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2000: var(--pf-t--chart--color--teal--100);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1900: var(--pf-t--chart--color--orange--500);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1800: var(--pf-t--chart--color--purple--100);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1700: var(--pf-t--chart--color--green--500);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1600: var(--pf-t--chart--color--yellow--100);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1500: var(--pf-t--chart--color--blue--500);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1400: var(--pf-t--chart--color--black--100);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1200: var(--pf-t--chart--color--orange--100);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1100: var(--pf-t--chart--color--purple--500);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1000: var(--pf-t--chart--color--green--100);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--900: var(--pf-t--chart--color--yellow--500);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--800: var(--pf-t--chart--color--blue--100);
--pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--700: var(--pf-t--chart--color--black--300);
--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--500: var(--pf-t--chart--color--orange--300);
--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--300: var(--pf-t--chart--color--green--300);
--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--100: var(--pf-t--chart--color--blue--300);
--pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2500: var(--pf-t--chart--color--orange--200);
--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--2300: var(--pf-t--chart--color--teal--400);
--pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2200: var(--pf-t--chart--color--green--200);
--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--2000: var(--pf-t--chart--color--orange--400);
--pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1900: var(--pf-t--chart--color--yellow--200);
--pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1800: var(--pf-t--chart--color--teal--200);
--pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1700: var(--pf-t--chart--color--green--400);
--pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1600: var(--pf-t--chart--color--blue--200);
--pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1500: var(--pf-t--chart--color--orange--100);
--pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1400: var(--pf-t--chart--color--yellow--500);
--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--1200: var(--pf-t--chart--color--green--100);
--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--1000: var(--pf-t--chart--color--orange--500);
--pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--900: var(--pf-t--chart--color--yellow--100);
--pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--800: var(--pf-t--chart--color--teal--100);
--pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--700: var(--pf-t--chart--color--green--500);
--pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--600: var(--pf-t--chart--color--blue--100);
--pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--500: var(--pf-t--chart--color--orange--300);
--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--300: var(--pf-t--chart--color--teal--300);
--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--100: var(--pf-t--chart--color--blue--300);
--pf-t--chart--theme--colorscales--orange--colorscale--500: var(--pf-t--chart--color--orange--400);
--pf-t--chart--theme--colorscales--orange--colorscale--400: var(--pf-t--chart--color--orange--200);
--pf-t--chart--theme--colorscales--orange--colorscale--300: var(--pf-t--chart--color--orange--500);
--pf-t--chart--theme--colorscales--orange--colorscale--200: var(--pf-t--chart--color--orange--100);
--pf-t--chart--theme--colorscales--orange--colorscale--100: var(--pf-t--chart--color--orange--300);
--pf-t--chart--theme--colorscales--purple--colorscale--500: var(--pf-t--chart--color--purple--400);
--pf-t--chart--theme--colorscales--purple--colorscale--400: var(--pf-t--chart--color--purple--200);
--pf-t--chart--theme--colorscales--purple--colorscale--300: var(--pf-t--chart--color--purple--500);
--pf-t--chart--theme--colorscales--purple--colorscale--200: var(--pf-t--chart--color--purple--100);
--pf-t--chart--theme--colorscales--purple--colorscale--100: var(--pf-t--chart--color--purple--300);
--pf-t--chart--theme--colorscales--green--colorscale--500: var(--pf-t--chart--color--green--400);
--pf-t--chart--theme--colorscales--green--colorscale--400: var(--pf-t--chart--color--green--200);
--pf-t--chart--theme--colorscales--green--colorscale--300: var(--pf-t--chart--color--green--500);
--pf-t--chart--theme--colorscales--green--colorscale--200: var(--pf-t--chart--color--green--100);
--pf-t--chart--theme--colorscales--green--colorscale--100: var(--pf-t--chart--color--green--300);
--pf-t--chart--theme--colorscales--gray--colorscale--500: var(--pf-t--chart--color--black--400);
--pf-t--chart--theme--colorscales--gray--colorscale--400: var(--pf-t--chart--color--black--200);
--pf-t--chart--theme--colorscales--gray--colorscale--300: var(--pf-t--chart--color--black--500);
--pf-t--chart--theme--colorscales--gray--colorscale--200: var(--pf-t--chart--color--black--100);
--pf-t--chart--theme--colorscales--gray--colorscale--100: var(--pf-t--chart--color--black--300);
--pf-t--chart--theme--colorscales--yellow--colorscale--500: var(--pf-t--chart--color--yellow--400);
--pf-t--chart--theme--colorscales--yellow--colorscale--400: var(--pf-t--chart--color--yellow--200);
--pf-t--chart--theme--colorscales--yellow--colorscale--300: var(--pf-t--chart--color--yellow--500);
--pf-t--chart--theme--colorscales--yellow--colorscale--200: var(--pf-t--chart--color--yellow--100);
--pf-t--chart--theme--colorscales--yellow--colorscale--100: var(--pf-t--chart--color--yellow--300);
--pf-t--chart--theme--colorscales--teal--colorscale--500: var(--pf-t--chart--color--teal--400);
--pf-t--chart--theme--colorscales--teal--colorscale--400: var(--pf-t--chart--color--teal--200);
--pf-t--chart--theme--colorscales--teal--colorscale--300: var(--pf-t--chart--color--teal--500);
--pf-t--chart--theme--colorscales--teal--colorscale--200: var(--pf-t--chart--color--teal--100);
--pf-t--chart--theme--colorscales--teal--colorscale--100: var(--pf-t--chart--color--teal--300);
--pf-t--chart--theme--colorscales--blue--colorscale--500: var(--pf-t--chart--color--blue--400);
--pf-t--chart--theme--colorscales--blue--colorscale--400: var(--pf-t--chart--color--blue--200);
--pf-t--chart--theme--colorscales--blue--colorscale--300: var(--pf-t--chart--color--blue--500);
--pf-t--chart--theme--colorscales--blue--colorscale--200: var(--pf-t--chart--color--blue--100);
--pf-t--chart--theme--colorscales--blue--colorscale--100: var(--pf-t--chart--color--blue--300);
--pf-t--chart--color--fills-and-strokes--danger--color--100: var(--pf-t--global--color--status--danger--100);
}
Loading

0 comments on commit 415afec

Please sign in to comment.