Skip to content

chore: update tokens from HC figma file #119

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

Open
mcoker wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore: update tokens from HC figma file #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion 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 Fri, 31 Oct 2025 22:17:29 GMT

@mixin pf-v6-tokens {
--pf-t--chart--global--BorderWidth--lg: 8;
Expand All @@ -10,6 +10,7 @@
--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;
Expand Down
3 changes: 2 additions & 1 deletion packages/module/build/css/tokens-charts.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 Fri, 31 Oct 2025 22:17:29 GMT

@mixin pf-v6-tokens {
--pf-t--chart--global--BorderWidth--lg: 8;
Expand All @@ -10,6 +10,7 @@
--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: 30;
--pf-t--chart--global--label--margin: 8;
--pf-t--chart--global--label--padding: 10;
--pf-t--chart--global--label--stroke: transparent;
Expand Down
37 changes: 36 additions & 1 deletion packages/module/build/css/tokens-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@

// Do not edit directly
// Generated on Wed, 10 Sep 2025 19:58:14 GMT
// Generated on Fri, 31 Oct 2025 22:17:29 GMT

@mixin pf-v6-tokens {
--pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
--pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
--pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
--pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
--pf-t--global--dark--background--color--700: rgba(199, 199, 199, 0.2500);
--pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
--pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
--pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
Expand All @@ -33,6 +34,13 @@
--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);
--pf-t--global--dark--color--brand--accent--100: var(--pf-t--color--red--50);
--pf-t--global--dark--color--brand--accent--200: var(--pf-t--color--red--40);
--pf-t--global--dark--color--brand--accent--300: var(--pf-t--color--red--30);
--pf-t--global--dark--color--brand--accent--400: var(--pf-t--color--red--20);
--pf-t--global--dark--color--brand--subtle--100: var(--pf-t--color--blue--70);
--pf-t--global--dark--color--brand--subtle--200: var(--pf-t--color--blue--60);
--pf-t--global--dark--color--brand--subtle--300: var(--pf-t--color--blue--30);
--pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
--pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
--pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
Expand Down Expand Up @@ -120,6 +128,9 @@
--pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
--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--brand--subtle--clicked: var(--pf-t--global--dark--color--brand--subtle--300);
--pf-t--global--border--color--brand--subtle--default: var(--pf-t--global--dark--color--brand--subtle--200);
--pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--dark--color--brand--subtle--300);
--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);
Expand Down Expand Up @@ -153,9 +164,15 @@
--pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
--pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
--pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
--pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
--pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
--pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
--pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
--pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
--pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
--pf-t--global--color--brand--subtle--clicked: var(--pf-t--global--dark--color--brand--subtle--200);
--pf-t--global--color--brand--subtle--default: var(--pf-t--global--dark--color--brand--subtle--100);
--pf-t--global--color--brand--subtle--hover: var(--pf-t--global--dark--color--brand--subtle--200);
--pf-t--global--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200);
--pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100);
--pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200);
Expand Down Expand Up @@ -233,6 +250,9 @@
--pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
--pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
--pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
--pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
--pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
--pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--hover);
--pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
--pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
--pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
Expand Down Expand Up @@ -260,6 +280,9 @@
--pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
--pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
--pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
--pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
--pf-t--global--icon--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
--pf-t--global--icon--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--hover);
--pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
--pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
--pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
Expand Down Expand Up @@ -290,9 +313,15 @@
--pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--regular);
--pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--subtle--clicked: var(--pf-t--global--icon--color--regular);
--pf-t--global--icon--color--on-brand--subtle--default: var(--pf-t--global--icon--color--regular);
--pf-t--global--icon--color--on-brand--subtle--hover: var(--pf-t--global--icon--color--regular);
--pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
--pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
--pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
Expand Down Expand Up @@ -356,9 +385,15 @@
--pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
--pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--subtle--clicked: var(--pf-t--global--text--color--regular);
--pf-t--global--text--color--on-brand--subtle--default: var(--pf-t--global--text--color--regular);
--pf-t--global--text--color--on-brand--subtle--hover: var(--pf-t--global--text--color--regular);
--pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
--pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
--pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
Expand Down
36 changes: 35 additions & 1 deletion packages/module/build/css/tokens-default.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 Fri, 31 Oct 2025 22:17:29 GMT

@mixin pf-v6-tokens {
--pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
Expand Down Expand Up @@ -221,6 +221,13 @@
--pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
--pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
--pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
--pf-t--global--color--brand--accent--100: var(--pf-t--color--red--50);
--pf-t--global--color--brand--accent--200: var(--pf-t--color--red--60);
--pf-t--global--color--brand--accent--300: var(--pf-t--color--red--70);
--pf-t--global--color--brand--subtle--100: var(--pf-t--color--blue--10);
--pf-t--global--color--brand--subtle--200: var(--pf-t--color--blue--20);
--pf-t--global--color--brand--subtle--300: var(--pf-t--color--blue--40);
--pf-t--global--color--brand--subtle--400: var(--pf-t--color--blue--50);
--pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
--pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
--pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
Expand Down Expand Up @@ -400,6 +407,9 @@
--pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
--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--brand--subtle--clicked: var(--pf-t--global--color--brand--subtle--300);
--pf-t--global--border--color--brand--subtle--default: var(--pf-t--global--color--brand--subtle--200);
--pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--color--brand--subtle--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);
Expand Down Expand Up @@ -436,9 +446,15 @@
--pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
--pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
--pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
--pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
--pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
--pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
--pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300);
--pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
--pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
--pf-t--global--color--brand--subtle--clicked: var(--pf-t--global--color--brand--subtle--200);
--pf-t--global--color--brand--subtle--default: var(--pf-t--global--color--brand--subtle--100);
--pf-t--global--color--brand--subtle--hover: var(--pf-t--global--color--brand--subtle--200);
--pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--200);
--pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--100);
--pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--200);
Expand Down Expand Up @@ -571,6 +587,9 @@
--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--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
--pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
--pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--hover);
--pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
--pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
--pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
Expand All @@ -594,6 +613,9 @@
--pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
--pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
--pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
--pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
--pf-t--global--icon--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
--pf-t--global--icon--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--hover);
--pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
--pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
--pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
Expand Down Expand Up @@ -627,9 +649,15 @@
--pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular);
--pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular);
--pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular);
--pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
--pf-t--global--icon--color--on-brand--subtle--clicked: var(--pf-t--global--icon--color--regular);
--pf-t--global--icon--color--on-brand--subtle--default: var(--pf-t--global--icon--color--regular);
--pf-t--global--icon--color--on-brand--subtle--hover: var(--pf-t--global--icon--color--regular);
--pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
--pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
--pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
Expand Down Expand Up @@ -702,9 +730,15 @@
--pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular);
--pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular);
--pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular);
--pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
--pf-t--global--text--color--on-brand--subtle--clicked: var(--pf-t--global--text--color--regular);
--pf-t--global--text--color--on-brand--subtle--default: var(--pf-t--global--text--color--regular);
--pf-t--global--text--color--on-brand--subtle--hover: var(--pf-t--global--text--color--regular);
--pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
--pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
--pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
Expand Down
Loading