Skip to content

Commit

Permalink
Merge pull request #33 from srambach/32-generate-charts-dark
Browse files Browse the repository at this point in the history 
feat(tokens): generate dark charts tokens file
  • Loading branch information
@srambach
srambach authored Apr 18, 2024
2 parents ba08833 + d261786 commit 0e76044
Show file tree
Hide file tree
Showing 10 changed files with 1,155 additions and 317 deletions.
2 changes: 2 additions & 0 deletions packages/module/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,14 @@ const defaultExtendedSD = StyleDictionary.extend(__dirname + '/config.default.js
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');
const chartDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.chart.dark.json');

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


console.log('\n============================');
Expand Down
169 changes: 169 additions & 0 deletions packages/module/build/css/_tokens-charts-dark.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@

// Do not edit directly
// Generated on Wed, 17 Apr 2024 14:31:33 GMT

:root {
--pf-t--chart--global--layout--width: 450;
--pf-t--chart--global--layout--height: 300;
--pf-t--chart--global--layout--padding: 50;
--pf-t--chart--global--label--stroke--width: 0;
--pf-t--chart--global--label--margin: 8;
--pf-t--chart--global--label--padding: 10;
--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--stroke--width--sm: 2;
--pf-t--chart--global--stroke--width--xs: 1;
--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--label--fill: var(--pf-t--color--gray--90);
--pf-t--chart--global--danger--color--100: var(--pf-t--color--red-orange--50);
--pf-t--chart--global--success--color--100: var(--pf-t--color--blue--30);
--pf-t--chart--global--warning--color--200: var(--pf-t--color--yellow--30);
--pf-t--chart--global--warning--color--100: var(--pf-t--color--orange--30);
--pf-t--chart--global--fill--color--white: var(--pf-t--color--white);
--pf-t--chart--global--fill--color--900: var(--pf-t--color--white);
--pf-t--chart--global--fill--color--700: var(--pf-t--color--gray--10);
--pf-t--chart--global--fill--color--500: var(--pf-t--color--gray--20);
--pf-t--chart--global--fill--color--400: var(--pf-t--color--gray--30);
--pf-t--chart--global--fill--color--300: var(--pf-t--color--gray--40);
--pf-t--chart--global--fill--color--200: var(--pf-t--color--gray--50);
--pf-t--chart--global--fill--color--100: var(--pf-t--color--gray--60);
--pf-t--chart--color--black--500: var(--pf-t--color--gray--10);
--pf-t--chart--color--black--400: var(--pf-t--color--gray--20);
--pf-t--chart--color--black--300: var(--pf-t--color--gray--30);
--pf-t--chart--color--black--200: var(--pf-t--color--gray--40);
--pf-t--chart--color--black--100: var(--pf-t--color--gray--50);
--pf-t--chart--color--red-orange--500: var(--pf-t--color--red-orange--10);
--pf-t--chart--color--red-orange--400: var(--pf-t--color--red-orange--20);
--pf-t--chart--color--red-orange--300: var(--pf-t--color--red-orange--30);
--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--50);
--pf-t--chart--color--orange--500: var(--pf-t--color--orange--10);
--pf-t--chart--color--orange--400: var(--pf-t--color--orange--20);
--pf-t--chart--color--orange--300: var(--pf-t--color--orange--30);
--pf-t--chart--color--orange--200: var(--pf-t--color--orange--40);
--pf-t--chart--color--orange--100: var(--pf-t--color--orange--50);
--pf-t--chart--color--yellow--500: var(--pf-t--color--yellow--10);
--pf-t--chart--color--yellow--400: var(--pf-t--color--yellow--20);
--pf-t--chart--color--yellow--300: var(--pf-t--color--yellow--30);
--pf-t--chart--color--yellow--200: var(--pf-t--color--yellow--40);
--pf-t--chart--color--yellow--100: var(--pf-t--color--yellow--50);
--pf-t--chart--color--purple--500: var(--pf-t--color--purple--20);
--pf-t--chart--color--purple--400: var(--pf-t--color--purple--30);
--pf-t--chart--color--purple--300: var(--pf-t--color--purple--40);
--pf-t--chart--color--purple--200: var(--pf-t--color--purple--50);
--pf-t--chart--color--purple--100: var(--pf-t--color--purple--60);
--pf-t--chart--color--teal--500: var(--pf-t--color--teal--10);
--pf-t--chart--color--teal--400: var(--pf-t--color--teal--20);
--pf-t--chart--color--teal--300: var(--pf-t--color--teal--30);
--pf-t--chart--color--teal--200: var(--pf-t--color--teal--40);
--pf-t--chart--color--teal--100: var(--pf-t--color--teal--50);
--pf-t--chart--color--green--500: var(--pf-t--color--green--10);
--pf-t--chart--color--green--400: var(--pf-t--color--green--20);
--pf-t--chart--color--green--300: var(--pf-t--color--green--30);
--pf-t--chart--color--green--200: var(--pf-t--color--green--40);
--pf-t--chart--color--green--100: var(--pf-t--color--green--50);
--pf-t--chart--color--blue--500: var(--pf-t--color--blue--10);
--pf-t--chart--color--blue--400: var(--pf-t--color--blue--20);
--pf-t--chart--color--blue--300: var(--pf-t--color--blue--30);
--pf-t--chart--color--blue--200: var(--pf-t--color--blue--40);
--pf-t--chart--color--blue--100: var(--pf-t--color--blue--50);
--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--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--3200: var(--pf-t--chart--color--purple--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--3000: var(--pf-t--chart--color--yellow--400);
--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--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--2600: var(--pf-t--chart--color--orange--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--2400: var(--pf-t--chart--color--green--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--2200: var(--pf-t--chart--color--blue--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--2000: var(--pf-t--chart--color--teal--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--1800: var(--pf-t--chart--color--purple--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--1600: var(--pf-t--chart--color--yellow--500);
--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--1400: var(--pf-t--chart--color--black--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--1200: var(--pf-t--chart--color--orange--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--1000: var(--pf-t--chart--color--green--300);
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--900: var(--pf-t--chart--color--yellow--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--700: var(--pf-t--chart--color--black--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--500: var(--pf-t--chart--color--orange--200);
--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--200);
--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--200);
--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--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--400);
--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--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--1800: var(--pf-t--chart--color--teal--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--1600: var(--pf-t--chart--color--blue--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--1400: var(--pf-t--chart--color--yellow--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--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--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-ordered--colorscale--800: var(--pf-t--chart--color--teal--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--600: var(--pf-t--chart--color--blue--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--400: var(--pf-t--chart--color--yellow--300);
--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--200: var(--pf-t--chart--color--green--300);
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--100: var(--pf-t--chart--color--blue--200);
--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);
}
Loading

0 comments on commit 0e76044

Please sign in to comment.