From 7e21f50e92dd7ec2eecd16dafaf7141758b61671 Mon Sep 17 00:00:00 2001 From: mcoker Date: Fri, 31 Oct 2025 17:23:15 -0500 Subject: [PATCH] chore: update tokens from HC figma file --- .../module/build/css/tokens-charts-dark.scss | 3 +- packages/module/build/css/tokens-charts.scss | 3 +- packages/module/build/css/tokens-dark.scss | 37 +- packages/module/build/css/tokens-default.scss | 36 +- .../build/css/tokens-highcontrast-dark.scss | 37 +- .../module/build/css/tokens-highcontrast.scss | 36 +- packages/module/build/css/tokens-palette.scss | 2 +- .../content/token-layers-dark.json | 8120 ++++++++++++----- .../content/token-layers-default.json | 7903 +++++++++++----- packages/module/tokens/dark/base.dark.json | 120 +- packages/module/tokens/dark/charts.dark.json | 14 +- .../module/tokens/dark/semantic.dark.json | 153 + packages/module/tokens/default/base.json | 32 + packages/module/tokens/default/charts.json | 14 +- .../tokens/default/semantic.dimension.json | 82 +- packages/module/tokens/default/semantic.json | 153 + .../tokens/default/semantic.motion.json | 34 +- .../tokens/highcontrast-dark/base.dark.json | 120 +- .../semantic.highcontrast.dark.json | 153 + packages/module/tokens/highcontrast/base.json | 32 + .../semantic.dimension.highcontrast.json | 82 +- .../highcontrast/semantic.highcontrast.json | 153 + 22 files changed, 12316 insertions(+), 5003 deletions(-) diff --git a/packages/module/build/css/tokens-charts-dark.scss b/packages/module/build/css/tokens-charts-dark.scss index 12a0114..ff94800 100644 --- a/packages/module/build/css/tokens-charts-dark.scss +++ b/packages/module/build/css/tokens-charts-dark.scss @@ -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; @@ -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; diff --git a/packages/module/build/css/tokens-charts.scss b/packages/module/build/css/tokens-charts.scss index c97797c..8fa00ee 100644 --- a/packages/module/build/css/tokens-charts.scss +++ b/packages/module/build/css/tokens-charts.scss @@ -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; @@ -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; diff --git a/packages/module/build/css/tokens-dark.scss b/packages/module/build/css/tokens-dark.scss index 6ec9e91..7db8e79 100644 --- a/packages/module/build/css/tokens-dark.scss +++ b/packages/module/build/css/tokens-dark.scss @@ -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); @@ -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); @@ -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); @@ -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); @@ -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); @@ -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); @@ -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); @@ -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); diff --git a/packages/module/build/css/tokens-default.scss b/packages/module/build/css/tokens-default.scss index 989dc8d..9f75d65 100644 --- a/packages/module/build/css/tokens-default.scss +++ b/packages/module/build/css/tokens-default.scss @@ -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); @@ -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); @@ -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); @@ -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); @@ -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); @@ -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); @@ -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); @@ -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); diff --git a/packages/module/build/css/tokens-highcontrast-dark.scss b/packages/module/build/css/tokens-highcontrast-dark.scss index 6577db5..4266773 100644 --- a/packages/module/build/css/tokens-highcontrast-dark.scss +++ b/packages/module/build/css/tokens-highcontrast-dark.scss @@ -1,11 +1,12 @@ // 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--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); @@ -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); @@ -120,6 +128,12 @@ --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--alt: var(--pf-t--global--background--color--primary--default); + --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--300); + --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--200); + --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--300); + --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--300); @@ -153,9 +167,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--300); + --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400); + --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--300); + --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400); --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); @@ -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); @@ -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--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); @@ -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--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); diff --git a/packages/module/build/css/tokens-highcontrast.scss b/packages/module/build/css/tokens-highcontrast.scss index c44d712..e5c5a27 100644 --- a/packages/module/build/css/tokens-highcontrast.scss +++ b/packages/module/build/css/tokens-highcontrast.scss @@ -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); @@ -205,6 +205,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); @@ -375,6 +382,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--400); + --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--400); --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--400); --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--400); @@ -415,9 +425,15 @@ --pf-t--global--border--width--high-contrast--extra-strong: var(--pf-t--global--border--width--extra-strong); --pf-t--global--border--width--high-contrast--regular: var(--pf-t--global--border--width--regular); --pf-t--global--border--width--high-contrast--strong: var(--pf-t--global--border--width--strong); + --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--300); + --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--200); + --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--300); --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400); --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300); --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--400); + --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--400); --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--300); --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--400); @@ -548,6 +564,9 @@ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default); --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); @@ -569,6 +588,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); @@ -599,9 +621,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); @@ -665,9 +693,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); diff --git a/packages/module/build/css/tokens-palette.scss b/packages/module/build/css/tokens-palette.scss index 2ff5258..2c2b746 100644 --- a/packages/module/build/css/tokens-palette.scss +++ b/packages/module/build/css/tokens-palette.scss @@ -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--color--black: #000000; diff --git a/packages/module/patternfly-docs/content/token-layers-dark.json b/packages/module/patternfly-docs/content/token-layers-dark.json index 29bd5dc..adee9d8 100644 --- a/packages/module/patternfly-docs/content/token-layers-dark.json +++ b/packages/module/patternfly-docs/content/token-layers-dark.json @@ -238,103 +238,107 @@ ] } }, - "pf-t--global--icon--color--on-brand--default": { + "pf-t--global--icon--color--brand--accent--default": { "dark": { - "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "description": "Use as the color for icons that convey your brand and/or are paired with branded text color.", "type": "color", - "value": "#1f1f1f", + "value": "#ee0000", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "description": "Use as the color for icons that convey your brand and/or are paired with branded text color.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.brand.accent.default}" }, - "name": "pf-t--global--icon--color--on-brand--default", + "name": "pf-t--global--icon--color--brand--accent--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "on-brand", - "state": "default" + "subitem": "brand", + "state": "accent" }, "path": [ "global", "icon", "color", - "on-brand", + "brand", + "accent", "default" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use this color for elements that you want to reinforce your brand", "type": "color", - "value": "#1f1f1f", + "value": "#ee0000", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use this color for elements that you want to reinforce your brand", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.dark.color.brand.accent.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--brand--accent--default", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "default" }, "path": [ "global", - "icon", "color", - "inverse" + "brand", + "accent", + "default" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#ee0000", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.red.50}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--color--brand--accent--100", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "item": "color", + "subitem": "brand", + "state": "accent" }, "path": [ "global", "dark", - "icon", "color", - "300" + "brand", + "accent", + "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#ee0000", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#ee0000" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--red--50", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "red", + "item": "50" }, "path": [ "color", - "gray", - "90" + "red", + "50" ] } ] @@ -344,103 +348,107 @@ ] } }, - "pf-t--global--icon--color--on-brand--hover": { + "pf-t--global--icon--color--brand--accent--hover": { "dark": { - "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.", "type": "color", - "value": "#1f1f1f", + "value": "#f56e6e", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.brand.accent.hover}" }, - "name": "pf-t--global--icon--color--on-brand--hover", + "name": "pf-t--global--icon--color--brand--accent--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "on-brand", - "state": "hover" + "subitem": "brand", + "state": "accent" }, "path": [ "global", "icon", "color", - "on-brand", + "brand", + "accent", "hover" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the hover state for elements that have a branded background color", "type": "color", - "value": "#1f1f1f", + "value": "#f56e6e", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the hover state for elements that have a branded background color", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.dark.color.brand.accent.200}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--brand--accent--hover", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "hover" }, "path": [ "global", - "icon", "color", - "inverse" + "brand", + "accent", + "hover" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#f56e6e", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.red.40}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--color--brand--accent--200", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "item": "color", + "subitem": "brand", + "state": "accent" }, "path": [ "global", "dark", - "icon", "color", - "300" + "brand", + "accent", + "200" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#f56e6e", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#f56e6e" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--red--40", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "red", + "item": "40" }, "path": [ "color", - "gray", - "90" + "red", + "40" ] } ] @@ -450,103 +458,107 @@ ] } }, - "pf-t--global--icon--color--on-brand--clicked": { + "pf-t--global--icon--color--brand--accent--clicked": { "dark": { - "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.", "type": "color", - "value": "#1f1f1f", + "value": "#f56e6e", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.brand.accent.clicked}" }, - "name": "pf-t--global--icon--color--on-brand--clicked", + "name": "pf-t--global--icon--color--brand--accent--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "on-brand", - "state": "clicked" + "subitem": "brand", + "state": "accent" }, "path": [ "global", "icon", "color", - "on-brand", + "brand", + "accent", "clicked" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the clicked state for elements that have a brand background color", "type": "color", - "value": "#1f1f1f", + "value": "#f56e6e", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the clicked state for elements that have a brand background color", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.dark.color.brand.accent.200}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--brand--accent--clicked", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "clicked" }, "path": [ "global", - "icon", "color", - "inverse" + "brand", + "accent", + "clicked" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#f56e6e", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.red.40}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--color--brand--accent--200", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "item": "color", + "subitem": "brand", + "state": "accent" }, "path": [ "global", "dark", - "icon", "color", - "300" + "brand", + "accent", + "200" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#f56e6e", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#f56e6e" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--red--40", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "red", + "item": "40" }, "path": [ "color", - "gray", - "90" + "red", + "40" ] } ] @@ -556,103 +568,103 @@ ] } }, - "pf-t--global--icon--color--favorite--default": { + "pf-t--global--icon--color--on-brand--default": { "dark": { - "description": "Use as the icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#ffcc17", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.color.favorite.default}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--favorite--default", + "name": "pf-t--global--icon--color--on-brand--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "favorite", + "subitem": "on-brand", "state": "default" }, "path": [ "global", "icon", "color", - "favorite", + "on-brand", "default" ], "references": [ { - "description": "Use as the default color for elements that have been favorited", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#ffcc17", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for elements that have been favorited", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.dark.color.favorite.100}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--color--favorite--default", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "favorite", - "subitem": "default" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "favorite", - "default" + "inverse" ], "references": [ { "type": "color", - "value": "#ffcc17", + "value": "#1f1f1f", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.yellow.30}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--dark--color--favorite--100", + "name": "pf-t--global--dark--icon--color--300", "attributes": { "category": "global", "type": "dark", - "item": "color", - "subitem": "favorite", - "state": "100" + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ "global", "dark", + "icon", "color", - "favorite", - "100" + "300" ], "references": [ { "type": "color", - "value": "#ffcc17", + "value": "#1f1f1f", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffcc17" + "value": "#1f1f1f" }, - "name": "pf-t--color--yellow--30", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "yellow", - "item": "30" + "type": "gray", + "item": "90" }, "path": [ "color", - "yellow", - "30" + "gray", + "90" ] } ] @@ -662,103 +674,103 @@ ] } }, - "pf-t--global--icon--color--favorite--hover": { + "pf-t--global--icon--color--on-brand--hover": { "dark": { - "description": "Use as the hover state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#ffe072", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.color.favorite.hover}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--favorite--hover", + "name": "pf-t--global--icon--color--on-brand--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "favorite", + "subitem": "on-brand", "state": "hover" }, "path": [ "global", "icon", "color", - "favorite", + "on-brand", "hover" ], "references": [ { - "description": "Use as the hover state for elements that have been favorited", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#ffe072", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state for elements that have been favorited", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.dark.color.favorite.200}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--color--favorite--hover", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "favorite", - "subitem": "hover" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "favorite", - "hover" + "inverse" ], "references": [ { "type": "color", - "value": "#ffe072", + "value": "#1f1f1f", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.yellow.20}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--dark--color--favorite--200", + "name": "pf-t--global--dark--icon--color--300", "attributes": { "category": "global", "type": "dark", - "item": "color", - "subitem": "favorite", - "state": "200" + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ "global", "dark", + "icon", "color", - "favorite", - "200" + "300" ], "references": [ { "type": "color", - "value": "#ffe072", + "value": "#1f1f1f", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffe072" + "value": "#1f1f1f" }, - "name": "pf-t--color--yellow--20", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "yellow", - "item": "20" + "type": "gray", + "item": "90" }, "path": [ "color", - "yellow", - "20" + "gray", + "90" ] } ] @@ -768,103 +780,103 @@ ] } }, - "pf-t--global--icon--color--favorite--clicked": { + "pf-t--global--icon--color--on-brand--clicked": { "dark": { - "description": "Use as the clicked state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#ffe072", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.color.favorite.clicked}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--favorite--clicked", + "name": "pf-t--global--icon--color--on-brand--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "favorite", + "subitem": "on-brand", "state": "clicked" }, "path": [ "global", "icon", "color", - "favorite", + "on-brand", "clicked" ], "references": [ { - "description": "Use as the clicked state for elements that have been favorited", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#ffe072", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state for elements that have been favorited", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.dark.color.favorite.200}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--color--favorite--clicked", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "favorite", - "subitem": "clicked" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "favorite", - "clicked" + "inverse" ], "references": [ { "type": "color", - "value": "#ffe072", + "value": "#1f1f1f", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.yellow.20}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--dark--color--favorite--200", + "name": "pf-t--global--dark--icon--color--300", "attributes": { "category": "global", "type": "dark", - "item": "color", - "subitem": "favorite", - "state": "200" + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ "global", "dark", + "icon", "color", - "favorite", - "200" + "300" ], "references": [ { "type": "color", - "value": "#ffe072", + "value": "#1f1f1f", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffe072" + "value": "#1f1f1f" }, - "name": "pf-t--color--yellow--20", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "yellow", - "item": "20" + "type": "gray", + "item": "90" }, "path": [ "color", - "yellow", - "20" + "gray", + "90" ] } ] @@ -874,107 +886,104 @@ ] } }, - "pf-t--global--icon--color--status--success--default": { + "pf-t--global--icon--color--on-brand--accent--default": { "dark": { - "description": "Use as the default color for text that communicates a success status.", + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#87bb62", + "value": "#f2f2f2", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for text that communicates a success status.", + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.color.status.success.default}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--status--success--default", + "name": "pf-t--global--icon--color--on-brand--accent--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "success" + "subitem": "on-brand", + "state": "accent" }, "path": [ "global", "icon", "color", - "status", - "success", + "on-brand", + "accent", "default" ], "references": [ { - "description": "Use as the default color for any element communicating a favorable outcome, like a success status for alert, progress, select.", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#87bb62", + "value": "#f2f2f2", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for any element communicating a favorable outcome, like a success status for alert, progress, select.", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "{global.dark.color.status.success.100}" + "value": "{global.dark.icon.color.100}" }, - "name": "pf-t--global--color--status--success--default", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", - "type": "color", - "item": "status", - "subitem": "success", - "state": "default" + "type": "icon", + "item": "color", + "subitem": "regular" }, "path": [ "global", + "icon", "color", - "status", - "success", - "default" + "regular" ], "references": [ { "type": "color", - "value": "#87bb62", + "value": "#f2f2f2", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.green.40}" + "value": "{color.gray.10}" }, - "name": "pf-t--global--dark--color--status--success--100", + "name": "pf-t--global--dark--icon--color--100", "attributes": { "category": "global", "type": "dark", - "item": "color", - "subitem": "status", - "state": "success" + "item": "icon", + "subitem": "color", + "state": "100" }, "path": [ "global", "dark", + "icon", "color", - "status", - "success", "100" ], "references": [ { "type": "color", - "value": "#87bb62", + "value": "#f2f2f2", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#87bb62" + "value": "#f2f2f2" }, - "name": "pf-t--color--green--40", + "name": "pf-t--color--gray--10", "attributes": { "category": "color", - "type": "green", - "item": "40" + "type": "gray", + "item": "10" }, "path": [ "color", - "green", - "40" + "gray", + "10" ] } ] @@ -984,107 +993,104 @@ ] } }, - "pf-t--global--icon--color--status--success--hover": { + "pf-t--global--icon--color--on-brand--accent--hover": { "dark": { - "description": "Use as the hover state color for text that communicates a success status.", + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#afdc8f", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state color for text that communicates a success status.", + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.color.status.success.hover}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--success--hover", + "name": "pf-t--global--icon--color--on-brand--accent--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "success" + "subitem": "on-brand", + "state": "accent" }, "path": [ "global", "icon", "color", - "status", - "success", + "on-brand", + "accent", "hover" ], "references": [ { - "description": "Use as the hover state for any element that conveys a success status.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#afdc8f", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state for any element that conveys a success status.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.dark.color.status.success.200}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--color--status--success--hover", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "status", - "subitem": "success", - "state": "hover" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "status", - "success", - "hover" + "inverse" ], "references": [ { "type": "color", - "value": "#afdc8f", + "value": "#1f1f1f", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.green.30}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--dark--color--status--success--200", + "name": "pf-t--global--dark--icon--color--300", "attributes": { "category": "global", "type": "dark", - "item": "color", - "subitem": "status", - "state": "success" + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ "global", "dark", + "icon", "color", - "status", - "success", - "200" + "300" ], "references": [ { "type": "color", - "value": "#afdc8f", + "value": "#1f1f1f", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#afdc8f" + "value": "#1f1f1f" }, - "name": "pf-t--color--green--30", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "green", - "item": "30" + "type": "gray", + "item": "90" }, "path": [ "color", - "green", - "30" + "gray", + "90" ] } ] @@ -1094,107 +1100,104 @@ ] } }, - "pf-t--global--icon--color--status--success--clicked": { + "pf-t--global--icon--color--on-brand--accent--clicked": { "dark": { - "description": "Use as the clicked state color for text that communicates a success status.", + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#afdc8f", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state color for text that communicates a success status.", + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.color.status.success.clicked}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--success--clicked", + "name": "pf-t--global--icon--color--on-brand--accent--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "success" + "subitem": "on-brand", + "state": "accent" }, "path": [ "global", "icon", "color", - "status", - "success", + "on-brand", + "accent", "clicked" ], "references": [ { - "description": "Use as the clicked state for any element that conveys a success status.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#afdc8f", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state for any element that conveys a success status.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.dark.color.status.success.200}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--color--status--success--clicked", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "status", - "subitem": "success", - "state": "clicked" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "status", - "success", - "clicked" + "inverse" ], "references": [ { "type": "color", - "value": "#afdc8f", + "value": "#1f1f1f", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.green.30}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--dark--color--status--success--200", + "name": "pf-t--global--dark--icon--color--300", "attributes": { "category": "global", "type": "dark", - "item": "color", - "subitem": "status", - "state": "success" + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ "global", "dark", + "icon", "color", - "status", - "success", - "200" + "300" ], "references": [ { "type": "color", - "value": "#afdc8f", + "value": "#1f1f1f", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#afdc8f" + "value": "#1f1f1f" }, - "name": "pf-t--color--green--30", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "green", - "item": "30" + "type": "gray", + "item": "90" }, "path": [ "color", - "green", - "30" + "gray", + "90" ] } ] @@ -1204,104 +1207,104 @@ ] } }, - "pf-t--global--icon--color--status--on-success--default": { + "pf-t--global--icon--color--on-brand--subtle--default": { "dark": { - "description": "Use as the default color for icons that are placed on a success background color and/or are paired with on-success colored text", + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#1f1f1f", + "value": "#f2f2f2", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a success background color and/or are paired with on-success colored text", + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--status--on-success--default", + "name": "pf-t--global--icon--color--on-brand--subtle--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "on-success" + "subitem": "on-brand", + "state": "subtle" }, "path": [ "global", "icon", "color", - "status", - "on-success", + "on-brand", + "subtle", "default" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#1f1f1f", + "value": "#f2f2f2", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.dark.icon.color.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "icon", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#f2f2f2", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.gray.10}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--icon--color--100", "attributes": { "category": "global", "type": "dark", "item": "icon", "subitem": "color", - "state": "300" + "state": "100" }, "path": [ "global", "dark", "icon", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#f2f2f2", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#f2f2f2" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--gray--10", "attributes": { "category": "color", "type": "gray", - "item": "90" + "item": "10" }, "path": [ "color", "gray", - "90" + "10" ] } ] @@ -1311,104 +1314,104 @@ ] } }, - "pf-t--global--icon--color--status--on-success--hover": { + "pf-t--global--icon--color--on-brand--subtle--hover": { "dark": { - "description": "Use as the hover state color for icons that are placed on a success background color and/or are paired with on-success colored text", + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#1f1f1f", + "value": "#f2f2f2", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on a success background color and/or are paired with on-success colored text", + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--status--on-success--hover", + "name": "pf-t--global--icon--color--on-brand--subtle--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "on-success" + "subitem": "on-brand", + "state": "subtle" }, "path": [ "global", "icon", "color", - "status", - "on-success", + "on-brand", + "subtle", "hover" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#1f1f1f", + "value": "#f2f2f2", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.dark.icon.color.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "icon", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#f2f2f2", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.gray.10}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--icon--color--100", "attributes": { "category": "global", "type": "dark", "item": "icon", "subitem": "color", - "state": "300" + "state": "100" }, "path": [ "global", "dark", "icon", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#f2f2f2", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#f2f2f2" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--gray--10", "attributes": { "category": "color", "type": "gray", - "item": "90" + "item": "10" }, "path": [ "color", "gray", - "90" + "10" ] } ] @@ -1418,104 +1421,104 @@ ] } }, - "pf-t--global--icon--color--status--on-success--clicked": { + "pf-t--global--icon--color--on-brand--subtle--clicked": { "dark": { - "description": "Use as the clicked state color for icons that are placed on a success background color and/or are paired with on-success colored text", + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#1f1f1f", + "value": "#f2f2f2", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a success background color and/or are paired with on-success colored text", + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--status--on-success--clicked", + "name": "pf-t--global--icon--color--on-brand--subtle--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "on-success" + "subitem": "on-brand", + "state": "subtle" }, "path": [ "global", "icon", "color", - "status", - "on-success", + "on-brand", + "subtle", "clicked" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#1f1f1f", + "value": "#f2f2f2", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.dark.icon.color.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "icon", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#f2f2f2", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.gray.10}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--icon--color--100", "attributes": { "category": "global", "type": "dark", "item": "icon", "subitem": "color", - "state": "300" + "state": "100" }, "path": [ "global", "dark", "icon", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#f2f2f2", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#f2f2f2" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--gray--10", "attributes": { "category": "color", "type": "gray", - "item": "90" + "item": "10" }, "path": [ "color", "gray", - "90" + "10" ] } ] @@ -1525,59 +1528,56 @@ ] } }, - "pf-t--global--icon--color--status--warning--default": { + "pf-t--global--icon--color--favorite--default": { "dark": { - "description": "Use as the default color for text that communicates a warning status.", + "description": "Use as the icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", "type": "color", "value": "#ffcc17", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for text that communicates a warning status.", + "description": "Use as the icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", "type": "color", - "value": "{global.color.status.warning.default}" + "value": "{global.color.favorite.default}" }, - "name": "pf-t--global--icon--color--status--warning--default", + "name": "pf-t--global--icon--color--favorite--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "warning" + "subitem": "favorite", + "state": "default" }, "path": [ "global", "icon", "color", - "status", - "warning", + "favorite", "default" ], "references": [ { - "description": "Use as the default color for any element communicating caution, like a warning status for alert, progress, select.", + "description": "Use as the default color for elements that have been favorited", "type": "color", "value": "#ffcc17", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for any element communicating caution, like a warning status for alert, progress, select.", + "description": "Use as the default color for elements that have been favorited", "type": "color", - "value": "{global.dark.color.status.warning.100}" + "value": "{global.dark.color.favorite.100}" }, - "name": "pf-t--global--color--status--warning--default", + "name": "pf-t--global--color--favorite--default", "attributes": { "category": "global", "type": "color", - "item": "status", - "subitem": "warning", - "state": "default" + "item": "favorite", + "subitem": "default" }, "path": [ "global", "color", - "status", - "warning", + "favorite", "default" ], "references": [ @@ -1590,20 +1590,19 @@ "type": "color", "value": "{color.yellow.30}" }, - "name": "pf-t--global--dark--color--status--warning--100", + "name": "pf-t--global--dark--color--favorite--100", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "status", - "state": "warning" + "subitem": "favorite", + "state": "100" }, "path": [ "global", "dark", "color", - "status", - "warning", + "favorite", "100" ], "references": [ @@ -1635,59 +1634,56 @@ ] } }, - "pf-t--global--icon--color--status--warning--hover": { + "pf-t--global--icon--color--favorite--hover": { "dark": { - "description": "Use as the hover state color for text that communicates a warning status.", + "description": "Use as the hover state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", "type": "color", "value": "#ffe072", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state color for text that communicates a warning status.", + "description": "Use as the hover state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", "type": "color", - "value": "{global.color.status.warning.hover}" + "value": "{global.color.favorite.hover}" }, - "name": "pf-t--global--icon--color--status--warning--hover", + "name": "pf-t--global--icon--color--favorite--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "warning" + "subitem": "favorite", + "state": "hover" }, "path": [ "global", "icon", "color", - "status", - "warning", + "favorite", "hover" ], "references": [ { - "description": "Use as the hover state for any element that conveys a warning status.", + "description": "Use as the hover state for elements that have been favorited", "type": "color", "value": "#ffe072", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state for any element that conveys a warning status.", + "description": "Use as the hover state for elements that have been favorited", "type": "color", - "value": "{global.dark.color.status.warning.200}" + "value": "{global.dark.color.favorite.200}" }, - "name": "pf-t--global--color--status--warning--hover", + "name": "pf-t--global--color--favorite--hover", "attributes": { "category": "global", "type": "color", - "item": "status", - "subitem": "warning", - "state": "hover" + "item": "favorite", + "subitem": "hover" }, "path": [ "global", "color", - "status", - "warning", + "favorite", "hover" ], "references": [ @@ -1700,20 +1696,19 @@ "type": "color", "value": "{color.yellow.20}" }, - "name": "pf-t--global--dark--color--status--warning--200", + "name": "pf-t--global--dark--color--favorite--200", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "status", - "state": "warning" + "subitem": "favorite", + "state": "200" }, "path": [ "global", "dark", "color", - "status", - "warning", + "favorite", "200" ], "references": [ @@ -1745,59 +1740,56 @@ ] } }, - "pf-t--global--icon--color--status--warning--clicked": { + "pf-t--global--icon--color--favorite--clicked": { "dark": { - "description": "Use as the clicked state color for text that communicates a warning status.", + "description": "Use as the clicked state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", "type": "color", "value": "#ffe072", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state color for text that communicates a warning status.", + "description": "Use as the clicked state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", "type": "color", - "value": "{global.color.status.warning.clicked}" + "value": "{global.color.favorite.clicked}" }, - "name": "pf-t--global--icon--color--status--warning--clicked", + "name": "pf-t--global--icon--color--favorite--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "warning" + "subitem": "favorite", + "state": "clicked" }, "path": [ "global", "icon", "color", - "status", - "warning", + "favorite", "clicked" ], "references": [ { - "description": "Use as the clicked state for any element that conveys a warning status.", + "description": "Use as the clicked state for elements that have been favorited", "type": "color", "value": "#ffe072", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state for any element that conveys a warning status.", + "description": "Use as the clicked state for elements that have been favorited", "type": "color", - "value": "{global.dark.color.status.warning.200}" + "value": "{global.dark.color.favorite.200}" }, - "name": "pf-t--global--color--status--warning--clicked", + "name": "pf-t--global--color--favorite--clicked", "attributes": { "category": "global", "type": "color", - "item": "status", - "subitem": "warning", - "state": "clicked" + "item": "favorite", + "subitem": "clicked" }, "path": [ "global", "color", - "status", - "warning", + "favorite", "clicked" ], "references": [ @@ -1810,20 +1802,19 @@ "type": "color", "value": "{color.yellow.20}" }, - "name": "pf-t--global--dark--color--status--warning--200", + "name": "pf-t--global--dark--color--favorite--200", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "status", - "state": "warning" + "subitem": "favorite", + "state": "200" }, "path": [ "global", "dark", "color", - "status", - "warning", + "favorite", "200" ], "references": [ @@ -1855,104 +1846,107 @@ ] } }, - "pf-t--global--icon--color--status--on-warning--default": { + "pf-t--global--icon--color--status--success--default": { "dark": { - "description": "Use as the default color for icons that are placed on a warning background color and/or are paired with on-warning colored text", + "description": "Use as the default color for text that communicates a success status.", "type": "color", - "value": "#1f1f1f", + "value": "#87bb62", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a warning background color and/or are paired with on-warning colored text", + "description": "Use as the default color for text that communicates a success status.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.status.success.default}" }, - "name": "pf-t--global--icon--color--status--on-warning--default", + "name": "pf-t--global--icon--color--status--success--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-warning" + "state": "success" }, "path": [ "global", "icon", "color", "status", - "on-warning", + "success", "default" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for any element communicating a favorable outcome, like a success status for alert, progress, select.", "type": "color", - "value": "#1f1f1f", + "value": "#87bb62", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for any element communicating a favorable outcome, like a success status for alert, progress, select.", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.dark.color.status.success.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--status--success--default", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "status", + "subitem": "success", + "state": "default" }, "path": [ "global", - "icon", "color", - "inverse" + "status", + "success", + "default" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#87bb62", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.green.40}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--color--status--success--100", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "item": "color", + "subitem": "status", + "state": "success" }, "path": [ "global", "dark", - "icon", "color", - "300" + "status", + "success", + "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#87bb62", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#87bb62" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--green--40", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "green", + "item": "40" }, "path": [ "color", - "gray", - "90" + "green", + "40" ] } ] @@ -1962,104 +1956,107 @@ ] } }, - "pf-t--global--icon--color--status--on-warning--hover": { + "pf-t--global--icon--color--status--success--hover": { "dark": { - "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", + "description": "Use as the hover state color for text that communicates a success status.", "type": "color", - "value": "#1f1f1f", + "value": "#afdc8f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", + "description": "Use as the hover state color for text that communicates a success status.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.status.success.hover}" }, - "name": "pf-t--global--icon--color--status--on-warning--hover", + "name": "pf-t--global--icon--color--status--success--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-warning" + "state": "success" }, "path": [ "global", "icon", "color", "status", - "on-warning", + "success", "hover" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the hover state for any element that conveys a success status.", "type": "color", - "value": "#1f1f1f", + "value": "#afdc8f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the hover state for any element that conveys a success status.", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.dark.color.status.success.200}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--status--success--hover", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "status", + "subitem": "success", + "state": "hover" }, "path": [ "global", - "icon", "color", - "inverse" + "status", + "success", + "hover" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#afdc8f", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.green.30}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--color--status--success--200", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "item": "color", + "subitem": "status", + "state": "success" }, "path": [ "global", "dark", - "icon", "color", - "300" + "status", + "success", + "200" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#afdc8f", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#afdc8f" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--green--30", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "green", + "item": "30" }, "path": [ "color", - "gray", - "90" + "green", + "30" ] } ] @@ -2069,104 +2066,107 @@ ] } }, - "pf-t--global--icon--color--status--on-warning--clicked": { + "pf-t--global--icon--color--status--success--clicked": { "dark": { - "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", + "description": "Use as the clicked state color for text that communicates a success status.", "type": "color", - "value": "#1f1f1f", + "value": "#afdc8f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", + "description": "Use as the clicked state color for text that communicates a success status.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.status.success.clicked}" }, - "name": "pf-t--global--icon--color--status--on-warning--clicked", + "name": "pf-t--global--icon--color--status--success--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-warning" + "state": "success" }, "path": [ "global", "icon", "color", "status", - "on-warning", + "success", "clicked" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the clicked state for any element that conveys a success status.", "type": "color", - "value": "#1f1f1f", + "value": "#afdc8f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the clicked state for any element that conveys a success status.", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.dark.color.status.success.200}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--status--success--clicked", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "status", + "subitem": "success", + "state": "clicked" }, "path": [ "global", - "icon", "color", - "inverse" + "status", + "success", + "clicked" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#afdc8f", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.green.30}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--color--status--success--200", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "item": "color", + "subitem": "status", + "state": "success" }, "path": [ "global", "dark", - "icon", "color", - "300" + "status", + "success", + "200" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#afdc8f", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#afdc8f" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--green--30", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "green", + "item": "30" }, "path": [ "color", - "gray", - "90" + "green", + "30" ] } ] @@ -2176,107 +2176,104 @@ ] } }, - "pf-t--global--icon--color--status--danger--default": { + "pf-t--global--icon--color--status--on-success--default": { "dark": { - "description": "Use as the default color for icons that convey danger, like in alerts or banners.", + "description": "Use as the default color for icons that are placed on a success background color and/or are paired with on-success colored text", "type": "color", - "value": "#f0561d", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for icons that convey danger, like in alerts or banners.", + "description": "Use as the default color for icons that are placed on a success background color and/or are paired with on-success colored text", "type": "color", - "value": "{global.color.status.danger.default}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--danger--default", + "name": "pf-t--global--icon--color--status--on-success--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "danger" + "state": "on-success" }, "path": [ "global", "icon", "color", "status", - "danger", + "on-success", "default" ], "references": [ { - "description": "Use as the default color for any element communicating a critical warning or error, like a danger status for alert, progress, select.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#f0561d", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for any element communicating a critical warning or error, like a danger status for alert, progress, select.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.dark.color.status.danger.100}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--color--status--danger--default", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "status", - "subitem": "danger", - "state": "default" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "status", - "danger", - "default" + "inverse" ], "references": [ { "type": "color", - "value": "#f0561d", + "value": "#1f1f1f", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.red-orange.50}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--dark--color--status--danger--100", + "name": "pf-t--global--dark--icon--color--300", "attributes": { "category": "global", "type": "dark", - "item": "color", - "subitem": "status", - "state": "danger" + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ "global", "dark", + "icon", "color", - "status", - "danger", - "100" + "300" ], "references": [ { "type": "color", - "value": "#f0561d", + "value": "#1f1f1f", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#f0561d" + "value": "#1f1f1f" }, - "name": "pf-t--color--red-orange--50", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "red-orange", - "item": "50" + "type": "gray", + "item": "90" }, "path": [ "color", - "red-orange", - "50" + "gray", + "90" ] } ] @@ -2286,107 +2283,104 @@ ] } }, - "pf-t--global--icon--color--status--danger--hover": { + "pf-t--global--icon--color--status--on-success--hover": { "dark": { - "description": "Use as the hover state for icons that indicate danger.", + "description": "Use as the hover state color for icons that are placed on a success background color and/or are paired with on-success colored text", "type": "color", - "value": "#f4784a", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state for icons that indicate danger.", + "description": "Use as the hover state color for icons that are placed on a success background color and/or are paired with on-success colored text", "type": "color", - "value": "{global.color.status.danger.hover}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--danger--hover", + "name": "pf-t--global--icon--color--status--on-success--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "danger" + "state": "on-success" }, "path": [ "global", "icon", "color", "status", - "danger", + "on-success", "hover" ], "references": [ { - "description": "Use as the hover state for any element that conveys a danger status.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#f4784a", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state for any element that conveys a danger status.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.dark.color.status.danger.200}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--color--status--danger--hover", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "status", - "subitem": "danger", - "state": "hover" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "status", - "danger", - "hover" + "inverse" ], "references": [ { "type": "color", - "value": "#f4784a", + "value": "#1f1f1f", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.red-orange.40}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--dark--color--status--danger--200", + "name": "pf-t--global--dark--icon--color--300", "attributes": { "category": "global", "type": "dark", - "item": "color", - "subitem": "status", - "state": "danger" + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ "global", "dark", + "icon", "color", - "status", - "danger", - "200" + "300" ], "references": [ { "type": "color", - "value": "#f4784a", + "value": "#1f1f1f", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#f4784a" + "value": "#1f1f1f" }, - "name": "pf-t--color--red-orange--40", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "red-orange", - "item": "40" + "type": "gray", + "item": "90" }, "path": [ "color", - "red-orange", - "40" + "gray", + "90" ] } ] @@ -2396,107 +2390,104 @@ ] } }, - "pf-t--global--icon--color--status--danger--clicked": { + "pf-t--global--icon--color--status--on-success--clicked": { "dark": { - "description": "Use as the clicked state for icons that indicate danger.", + "description": "Use as the clicked state color for icons that are placed on a success background color and/or are paired with on-success colored text", "type": "color", - "value": "#f4784a", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state for icons that indicate danger.", + "description": "Use as the clicked state color for icons that are placed on a success background color and/or are paired with on-success colored text", "type": "color", - "value": "{global.color.status.danger.clicked}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--danger--clicked", + "name": "pf-t--global--icon--color--status--on-success--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "danger" + "state": "on-success" }, "path": [ "global", "icon", "color", "status", - "danger", + "on-success", "clicked" ], "references": [ { - "description": "Use as the clicked state for any element that conveys a danger status.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#f4784a", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state for any element that conveys a danger status.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.dark.color.status.danger.200}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--color--status--danger--clicked", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "status", - "subitem": "danger", - "state": "clicked" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "status", - "danger", - "clicked" + "inverse" ], "references": [ { "type": "color", - "value": "#f4784a", + "value": "#1f1f1f", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.red-orange.40}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--dark--color--status--danger--200", + "name": "pf-t--global--dark--icon--color--300", "attributes": { "category": "global", "type": "dark", - "item": "color", - "subitem": "status", - "state": "danger" + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ "global", "dark", + "icon", "color", - "status", - "danger", - "200" + "300" ], "references": [ { "type": "color", - "value": "#f4784a", + "value": "#1f1f1f", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#f4784a" + "value": "#1f1f1f" }, - "name": "pf-t--color--red-orange--40", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "red-orange", - "item": "40" + "type": "gray", + "item": "90" }, "path": [ "color", - "red-orange", - "40" + "gray", + "90" ] } ] @@ -2506,427 +2497,106 @@ ] } }, - "pf-t--global--icon--color--status--on-danger--default": { + "pf-t--global--icon--color--status--warning--default": { "dark": { - "description": "Use as the default color for icons that are placed on a danger background color and/or are paired with on-danger colored text", + "description": "Use as the default color for text that communicates a warning status.", "type": "color", - "value": "#1f1f1f", + "value": "#ffcc17", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a danger background color and/or are paired with on-danger colored text", + "description": "Use as the default color for text that communicates a warning status.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.status.warning.default}" }, - "name": "pf-t--global--icon--color--status--on-danger--default", + "name": "pf-t--global--icon--color--status--warning--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-danger" + "state": "warning" }, "path": [ "global", "icon", "color", "status", - "on-danger", + "warning", "default" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for any element communicating caution, like a warning status for alert, progress, select.", "type": "color", - "value": "#1f1f1f", + "value": "#ffcc17", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for any element communicating caution, like a warning status for alert, progress, select.", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.dark.color.status.warning.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--status--warning--default", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "status", + "subitem": "warning", + "state": "default" }, "path": [ "global", - "icon", "color", - "inverse" + "status", + "warning", + "default" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#ffcc17", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.yellow.30}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--color--status--warning--100", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "item": "color", + "subitem": "status", + "state": "warning" }, "path": [ "global", "dark", - "icon", "color", - "300" + "status", + "warning", + "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/dark/palette.color.json", - "isSource": true, - "original": { - "type": "color", - "value": "#1f1f1f" - }, - "name": "pf-t--color--gray--90", - "attributes": { - "category": "color", - "type": "gray", - "item": "90" - }, - "path": [ - "color", - "gray", - "90" - ] - } - ] - } - ] - } - ] - } - }, - "pf-t--global--icon--color--status--on-danger--hover": { - "dark": { - "description": "Use as the hover state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/dark/semantic.dark.json", - "isSource": true, - "original": { - "description": "Use as the hover state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", - "type": "color", - "value": "{global.icon.color.inverse}" - }, - "name": "pf-t--global--icon--color--status--on-danger--hover", - "attributes": { - "category": "global", - "type": "icon", - "item": "color", - "subitem": "status", - "state": "on-danger" - }, - "path": [ - "global", - "icon", - "color", - "status", - "on-danger", - "hover" - ], - "references": [ - { - "description": "Use as the color for icons that are placed on an inverse background color", - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/dark/semantic.dark.json", - "isSource": true, - "original": { - "description": "Use as the color for icons that are placed on an inverse background color", - "type": "color", - "value": "{global.dark.icon.color.300}" - }, - "name": "pf-t--global--icon--color--inverse", - "attributes": { - "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" - }, - "path": [ - "global", - "icon", - "color", - "inverse" - ], - "references": [ - { - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/dark/base.dark.json", - "isSource": true, - "original": { - "type": "color", - "value": "{color.gray.90}" - }, - "name": "pf-t--global--dark--icon--color--300", - "attributes": { - "category": "global", - "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" - }, - "path": [ - "global", - "dark", - "icon", - "color", - "300" - ], - "references": [ - { - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/dark/palette.color.json", - "isSource": true, - "original": { - "type": "color", - "value": "#1f1f1f" - }, - "name": "pf-t--color--gray--90", - "attributes": { - "category": "color", - "type": "gray", - "item": "90" - }, - "path": [ - "color", - "gray", - "90" - ] - } - ] - } - ] - } - ] - } - }, - "pf-t--global--icon--color--status--on-danger--clicked": { - "dark": { - "description": "Use as the clicked state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/dark/semantic.dark.json", - "isSource": true, - "original": { - "description": "Use as the clicked state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", - "type": "color", - "value": "{global.icon.color.inverse}" - }, - "name": "pf-t--global--icon--color--status--on-danger--clicked", - "attributes": { - "category": "global", - "type": "icon", - "item": "color", - "subitem": "status", - "state": "on-danger" - }, - "path": [ - "global", - "icon", - "color", - "status", - "on-danger", - "clicked" - ], - "references": [ - { - "description": "Use as the color for icons that are placed on an inverse background color", - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/dark/semantic.dark.json", - "isSource": true, - "original": { - "description": "Use as the color for icons that are placed on an inverse background color", - "type": "color", - "value": "{global.dark.icon.color.300}" - }, - "name": "pf-t--global--icon--color--inverse", - "attributes": { - "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" - }, - "path": [ - "global", - "icon", - "color", - "inverse" - ], - "references": [ - { - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/dark/base.dark.json", - "isSource": true, - "original": { - "type": "color", - "value": "{color.gray.90}" - }, - "name": "pf-t--global--dark--icon--color--300", - "attributes": { - "category": "global", - "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" - }, - "path": [ - "global", - "dark", - "icon", - "color", - "300" - ], - "references": [ - { - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/dark/palette.color.json", - "isSource": true, - "original": { - "type": "color", - "value": "#1f1f1f" - }, - "name": "pf-t--color--gray--90", - "attributes": { - "category": "color", - "type": "gray", - "item": "90" - }, - "path": [ - "color", - "gray", - "90" - ] - } - ] - } - ] - } - ] - } - }, - "pf-t--global--icon--color--status--info--default": { - "dark": { - "description": "Use as the default color for icons that identify informational messages, like in alerts or banners.", - "type": "color", - "value": "#b6a6e9", - "filePath": "tokens/dark/semantic.dark.json", - "isSource": true, - "original": { - "description": "Use as the default color for icons that identify informational messages, like in alerts or banners.", - "type": "color", - "value": "{global.color.status.info.default}" - }, - "name": "pf-t--global--icon--color--status--info--default", - "attributes": { - "category": "global", - "type": "icon", - "item": "color", - "subitem": "status", - "state": "info" - }, - "path": [ - "global", - "icon", - "color", - "status", - "info", - "default" - ], - "references": [ - { - "description": "Use as the default color for any element communicating information, like an info status for alert, progress, select.", - "type": "color", - "value": "#b6a6e9", - "filePath": "tokens/dark/semantic.dark.json", - "isSource": true, - "original": { - "description": "Use as the default color for any element communicating information, like an info status for alert, progress, select.", - "type": "color", - "value": "{global.dark.color.status.info.100}" - }, - "name": "pf-t--global--color--status--info--default", - "attributes": { - "category": "global", - "type": "color", - "item": "status", - "subitem": "info", - "state": "default" - }, - "path": [ - "global", - "color", - "status", - "info", - "default" - ], - "references": [ - { - "type": "color", - "value": "#b6a6e9", - "filePath": "tokens/dark/base.dark.json", - "isSource": true, - "original": { - "type": "color", - "value": "{color.purple.30}" - }, - "name": "pf-t--global--dark--color--status--info--100", - "attributes": { - "category": "global", - "type": "dark", - "item": "color", - "subitem": "status", - "state": "info" - }, - "path": [ - "global", - "dark", - "color", - "status", - "info", - "100" - ], - "references": [ - { - "type": "color", - "value": "#b6a6e9", + "value": "#ffcc17", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#b6a6e9" + "value": "#ffcc17" }, - "name": "pf-t--color--purple--30", + "name": "pf-t--color--yellow--30", "attributes": { "category": "color", - "type": "purple", + "type": "yellow", "item": "30" }, "path": [ "color", - "purple", + "yellow", "30" ] } @@ -2937,106 +2607,106 @@ ] } }, - "pf-t--global--icon--color--status--info--hover": { + "pf-t--global--icon--color--status--warning--hover": { "dark": { - "description": "Use as the hover state for icons that identify informational messages.", + "description": "Use as the hover state color for text that communicates a warning status.", "type": "color", - "value": "#d0c5f4", + "value": "#ffe072", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state for icons that identify informational messages.", + "description": "Use as the hover state color for text that communicates a warning status.", "type": "color", - "value": "{global.color.status.info.hover}" + "value": "{global.color.status.warning.hover}" }, - "name": "pf-t--global--icon--color--status--info--hover", + "name": "pf-t--global--icon--color--status--warning--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "info" + "state": "warning" }, "path": [ "global", "icon", "color", "status", - "info", + "warning", "hover" ], "references": [ { - "description": "Use as the hover state for any element that conveys an info status.", + "description": "Use as the hover state for any element that conveys a warning status.", "type": "color", - "value": "#d0c5f4", + "value": "#ffe072", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state for any element that conveys an info status.", + "description": "Use as the hover state for any element that conveys a warning status.", "type": "color", - "value": "{global.dark.color.status.info.200}" + "value": "{global.dark.color.status.warning.200}" }, - "name": "pf-t--global--color--status--info--hover", + "name": "pf-t--global--color--status--warning--hover", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "info", + "subitem": "warning", "state": "hover" }, "path": [ "global", "color", "status", - "info", + "warning", "hover" ], "references": [ { "type": "color", - "value": "#d0c5f4", + "value": "#ffe072", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.purple.20}" + "value": "{color.yellow.20}" }, - "name": "pf-t--global--dark--color--status--info--200", + "name": "pf-t--global--dark--color--status--warning--200", "attributes": { "category": "global", "type": "dark", "item": "color", "subitem": "status", - "state": "info" + "state": "warning" }, "path": [ "global", "dark", "color", "status", - "info", + "warning", "200" ], "references": [ { "type": "color", - "value": "#d0c5f4", + "value": "#ffe072", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#d0c5f4" + "value": "#ffe072" }, - "name": "pf-t--color--purple--20", + "name": "pf-t--color--yellow--20", "attributes": { "category": "color", - "type": "purple", + "type": "yellow", "item": "20" }, "path": [ "color", - "purple", + "yellow", "20" ] } @@ -3047,106 +2717,106 @@ ] } }, - "pf-t--global--icon--color--status--info--clicked": { + "pf-t--global--icon--color--status--warning--clicked": { "dark": { - "description": "Use as the clicked state for icons that identify informational messages.", + "description": "Use as the clicked state color for text that communicates a warning status.", "type": "color", - "value": "#d0c5f4", + "value": "#ffe072", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state for icons that identify informational messages.", + "description": "Use as the clicked state color for text that communicates a warning status.", "type": "color", - "value": "{global.color.status.info.clicked}" + "value": "{global.color.status.warning.clicked}" }, - "name": "pf-t--global--icon--color--status--info--clicked", + "name": "pf-t--global--icon--color--status--warning--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "info" + "state": "warning" }, "path": [ "global", "icon", "color", "status", - "info", + "warning", "clicked" ], "references": [ { - "description": "Use as the clicked state for any element that conveys an info status.", + "description": "Use as the clicked state for any element that conveys a warning status.", "type": "color", - "value": "#d0c5f4", + "value": "#ffe072", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state for any element that conveys an info status.", + "description": "Use as the clicked state for any element that conveys a warning status.", "type": "color", - "value": "{global.dark.color.status.info.200}" + "value": "{global.dark.color.status.warning.200}" }, - "name": "pf-t--global--color--status--info--clicked", + "name": "pf-t--global--color--status--warning--clicked", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "info", + "subitem": "warning", "state": "clicked" }, "path": [ "global", "color", "status", - "info", + "warning", "clicked" ], "references": [ { "type": "color", - "value": "#d0c5f4", + "value": "#ffe072", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.purple.20}" + "value": "{color.yellow.20}" }, - "name": "pf-t--global--dark--color--status--info--200", + "name": "pf-t--global--dark--color--status--warning--200", "attributes": { "category": "global", "type": "dark", "item": "color", "subitem": "status", - "state": "info" + "state": "warning" }, "path": [ "global", "dark", "color", "status", - "info", + "warning", "200" ], "references": [ { "type": "color", - "value": "#d0c5f4", + "value": "#ffe072", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#d0c5f4" + "value": "#ffe072" }, - "name": "pf-t--color--purple--20", + "name": "pf-t--color--yellow--20", "attributes": { "category": "color", - "type": "purple", + "type": "yellow", "item": "20" }, "path": [ "color", - "purple", + "yellow", "20" ] } @@ -3157,32 +2827,32 @@ ] } }, - "pf-t--global--icon--color--status--on-info--default": { + "pf-t--global--icon--color--status--on-warning--default": { "dark": { - "description": "Use as the default color for icons that are placed on an info background color and/or are paired with on-info colored text", + "description": "Use as the default color for icons that are placed on a warning background color and/or are paired with on-warning colored text", "type": "color", "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on an info background color and/or are paired with on-info colored text", + "description": "Use as the default color for icons that are placed on a warning background color and/or are paired with on-warning colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--on-info--default", + "name": "pf-t--global--icon--color--status--on-warning--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-info" + "state": "on-warning" }, "path": [ "global", "icon", "color", "status", - "on-info", + "on-warning", "default" ], "references": [ @@ -3264,32 +2934,32 @@ ] } }, - "pf-t--global--icon--color--status--on-info--hover": { + "pf-t--global--icon--color--status--on-warning--hover": { "dark": { - "description": "Use as the hover state color for icons that are placed on an info background color and/or are paired with on-info colored text", + "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", "type": "color", "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on an info background color and/or are paired with on-info colored text", + "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--on-info--hover", + "name": "pf-t--global--icon--color--status--on-warning--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-info" + "state": "on-warning" }, "path": [ "global", "icon", "color", "status", - "on-info", + "on-warning", "hover" ], "references": [ @@ -3371,32 +3041,32 @@ ] } }, - "pf-t--global--icon--color--status--on-info--clicked": { + "pf-t--global--icon--color--status--on-warning--clicked": { "dark": { - "description": "Use as the clicked state color for icons that are placed on an info background color and/or are paired with on-info colored text", + "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", "type": "color", "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on an info background color and/or are paired with on-info colored text", + "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--on-info--clicked", + "name": "pf-t--global--icon--color--status--on-warning--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-info" + "state": "on-warning" }, "path": [ "global", "icon", "color", "status", - "on-info", + "on-warning", "clicked" ], "references": [ @@ -3478,107 +3148,107 @@ ] } }, - "pf-t--global--icon--color--status--custom--default": { + "pf-t--global--icon--color--status--danger--default": { "dark": { - "description": "Use as the default color for icons that convey generic status with no associated severity. This color can be customized.", + "description": "Use as the default color for icons that convey danger, like in alerts or banners.", "type": "color", - "value": "#63bdbd", + "value": "#f0561d", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for icons that convey generic status with no associated severity. This color can be customized.", + "description": "Use as the default color for icons that convey danger, like in alerts or banners.", "type": "color", - "value": "{global.color.status.custom.default}" + "value": "{global.color.status.danger.default}" }, - "name": "pf-t--global--icon--color--status--custom--default", + "name": "pf-t--global--icon--color--status--danger--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "custom" + "state": "danger" }, "path": [ "global", "icon", "color", "status", - "custom", + "danger", "default" ], "references": [ { - "description": "Use as the default color for any element that conveys a generic status with no associated severity. This color can be customized.", + "description": "Use as the default color for any element communicating a critical warning or error, like a danger status for alert, progress, select.", "type": "color", - "value": "#63bdbd", + "value": "#f0561d", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for any element that conveys a generic status with no associated severity. This color can be customized.", + "description": "Use as the default color for any element communicating a critical warning or error, like a danger status for alert, progress, select.", "type": "color", - "value": "{global.dark.color.status.custom.100}" + "value": "{global.dark.color.status.danger.100}" }, - "name": "pf-t--global--color--status--custom--default", + "name": "pf-t--global--color--status--danger--default", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "custom", + "subitem": "danger", "state": "default" }, "path": [ "global", "color", "status", - "custom", + "danger", "default" ], "references": [ { "type": "color", - "value": "#63bdbd", + "value": "#f0561d", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.teal.40}" + "value": "{color.red-orange.50}" }, - "name": "pf-t--global--dark--color--status--custom--100", + "name": "pf-t--global--dark--color--status--danger--100", "attributes": { "category": "global", "type": "dark", "item": "color", "subitem": "status", - "state": "custom" + "state": "danger" }, "path": [ "global", "dark", "color", "status", - "custom", + "danger", "100" ], "references": [ { "type": "color", - "value": "#63bdbd", + "value": "#f0561d", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#63bdbd" + "value": "#f0561d" }, - "name": "pf-t--color--teal--40", + "name": "pf-t--color--red-orange--50", "attributes": { "category": "color", - "type": "teal", - "item": "40" + "type": "red-orange", + "item": "50" }, "path": [ "color", - "teal", - "40" + "red-orange", + "50" ] } ] @@ -3588,107 +3258,107 @@ ] } }, - "pf-t--global--icon--color--status--custom--hover": { + "pf-t--global--icon--color--status--danger--hover": { "dark": { - "description": "Use as the hover state for icons that convey generic status with no associated severity.", + "description": "Use as the hover state for icons that indicate danger.", "type": "color", - "value": "#9ad8d8", + "value": "#f4784a", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state for icons that convey generic status with no associated severity.", + "description": "Use as the hover state for icons that indicate danger.", "type": "color", - "value": "{global.color.status.custom.hover}" + "value": "{global.color.status.danger.hover}" }, - "name": "pf-t--global--icon--color--status--custom--hover", + "name": "pf-t--global--icon--color--status--danger--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "custom" + "state": "danger" }, "path": [ "global", "icon", "color", "status", - "custom", + "danger", "hover" ], "references": [ { - "description": "Use this color as the hover state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "description": "Use as the hover state for any element that conveys a danger status.", "type": "color", - "value": "#9ad8d8", + "value": "#f4784a", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use this color as the hover state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "description": "Use as the hover state for any element that conveys a danger status.", "type": "color", - "value": "{global.dark.color.status.custom.200}" + "value": "{global.dark.color.status.danger.200}" }, - "name": "pf-t--global--color--status--custom--hover", + "name": "pf-t--global--color--status--danger--hover", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "custom", + "subitem": "danger", "state": "hover" }, "path": [ "global", "color", "status", - "custom", + "danger", "hover" ], "references": [ { "type": "color", - "value": "#9ad8d8", + "value": "#f4784a", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.teal.30}" + "value": "{color.red-orange.40}" }, - "name": "pf-t--global--dark--color--status--custom--200", + "name": "pf-t--global--dark--color--status--danger--200", "attributes": { "category": "global", "type": "dark", "item": "color", "subitem": "status", - "state": "custom" + "state": "danger" }, "path": [ "global", "dark", "color", "status", - "custom", + "danger", "200" ], "references": [ { "type": "color", - "value": "#9ad8d8", + "value": "#f4784a", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#9ad8d8" + "value": "#f4784a" }, - "name": "pf-t--color--teal--30", + "name": "pf-t--color--red-orange--40", "attributes": { "category": "color", - "type": "teal", - "item": "30" + "type": "red-orange", + "item": "40" }, "path": [ "color", - "teal", - "30" + "red-orange", + "40" ] } ] @@ -3698,107 +3368,107 @@ ] } }, - "pf-t--global--icon--color--status--custom--clicked": { + "pf-t--global--icon--color--status--danger--clicked": { "dark": { - "description": "Use as the clicked state for icons that convey generic status with no associated severity.", + "description": "Use as the clicked state for icons that indicate danger.", "type": "color", - "value": "#9ad8d8", + "value": "#f4784a", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state for icons that convey generic status with no associated severity.", + "description": "Use as the clicked state for icons that indicate danger.", "type": "color", - "value": "{global.color.status.custom.clicked}" + "value": "{global.color.status.danger.clicked}" }, - "name": "pf-t--global--icon--color--status--custom--clicked", + "name": "pf-t--global--icon--color--status--danger--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "custom" + "state": "danger" }, "path": [ "global", "icon", "color", "status", - "custom", + "danger", "clicked" ], "references": [ { - "description": "Use as the clicked state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "description": "Use as the clicked state for any element that conveys a danger status.", "type": "color", - "value": "#9ad8d8", + "value": "#f4784a", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "description": "Use as the clicked state for any element that conveys a danger status.", "type": "color", - "value": "{global.dark.color.status.custom.200}" + "value": "{global.dark.color.status.danger.200}" }, - "name": "pf-t--global--color--status--custom--clicked", + "name": "pf-t--global--color--status--danger--clicked", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "custom", + "subitem": "danger", "state": "clicked" }, "path": [ "global", "color", "status", - "custom", + "danger", "clicked" ], "references": [ { "type": "color", - "value": "#9ad8d8", + "value": "#f4784a", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.teal.30}" + "value": "{color.red-orange.40}" }, - "name": "pf-t--global--dark--color--status--custom--200", + "name": "pf-t--global--dark--color--status--danger--200", "attributes": { "category": "global", "type": "dark", "item": "color", "subitem": "status", - "state": "custom" + "state": "danger" }, "path": [ "global", "dark", "color", "status", - "custom", + "danger", "200" ], "references": [ { "type": "color", - "value": "#9ad8d8", + "value": "#f4784a", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#9ad8d8" + "value": "#f4784a" }, - "name": "pf-t--color--teal--30", + "name": "pf-t--color--red-orange--40", "attributes": { "category": "color", - "type": "teal", - "item": "30" + "type": "red-orange", + "item": "40" }, "path": [ "color", - "teal", - "30" + "red-orange", + "40" ] } ] @@ -3808,32 +3478,32 @@ ] } }, - "pf-t--global--icon--color--status--on-custom--default": { + "pf-t--global--icon--color--status--on-danger--default": { "dark": { - "description": "Use as the default color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status color, make sure that this token meets contrast requirements with your new custom status color.", + "description": "Use as the default color for icons that are placed on a danger background color and/or are paired with on-danger colored text", "type": "color", "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status color, make sure that this token meets contrast requirements with your new custom status color.", + "description": "Use as the default color for icons that are placed on a danger background color and/or are paired with on-danger colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--on-custom--default", + "name": "pf-t--global--icon--color--status--on-danger--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-custom" + "state": "on-danger" }, "path": [ "global", "icon", "color", "status", - "on-custom", + "on-danger", "default" ], "references": [ @@ -3915,32 +3585,32 @@ ] } }, - "pf-t--global--icon--color--status--on-custom--hover": { + "pf-t--global--icon--color--status--on-danger--hover": { "dark": { - "description": "Use as the hover state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status hover color, make sure that this token meets contrast requirements with your new custom status hover color.", + "description": "Use as the hover state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", "type": "color", "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status hover color, make sure that this token meets contrast requirements with your new custom status hover color.", + "description": "Use as the hover state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--on-custom--hover", + "name": "pf-t--global--icon--color--status--on-danger--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-custom" + "state": "on-danger" }, "path": [ "global", "icon", "color", "status", - "on-custom", + "on-danger", "hover" ], "references": [ @@ -4022,32 +3692,32 @@ ] } }, - "pf-t--global--icon--color--status--on-custom--clicked": { + "pf-t--global--icon--color--status--on-danger--clicked": { "dark": { - "description": "Use as the clicked state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status clicked color, make sure that this token meets contrast requirements with your new custom status clicked color.", + "description": "Use as the clicked state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", "type": "color", "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status clicked color, make sure that this token meets contrast requirements with your new custom status clicked color.", + "description": "Use as the clicked state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--on-custom--clicked", + "name": "pf-t--global--icon--color--status--on-danger--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-custom" + "state": "on-danger" }, "path": [ "global", "icon", "color", "status", - "on-custom", + "on-danger", "clicked" ], "references": [ @@ -4129,105 +3799,107 @@ ] } }, - "pf-t--global--icon--color--status--unread--on-default--default": { + "pf-t--global--icon--color--status--info--default": { "dark": { - "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "description": "Use as the default color for icons that identify informational messages, like in alerts or banners.", "type": "color", - "value": "#1f1f1f", + "value": "#b6a6e9", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "description": "Use as the default color for icons that identify informational messages, like in alerts or banners.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.status.info.default}" }, - "name": "pf-t--global--icon--color--status--unread--on-default--default", + "name": "pf-t--global--icon--color--status--info--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "unread" + "state": "info" }, "path": [ "global", "icon", "color", "status", - "unread", - "on-default", + "info", "default" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for any element communicating information, like an info status for alert, progress, select.", "type": "color", - "value": "#1f1f1f", + "value": "#b6a6e9", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for any element communicating information, like an info status for alert, progress, select.", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.dark.color.status.info.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--status--info--default", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "status", + "subitem": "info", + "state": "default" }, "path": [ "global", - "icon", "color", - "inverse" + "status", + "info", + "default" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#b6a6e9", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.purple.30}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--color--status--info--100", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "item": "color", + "subitem": "status", + "state": "info" }, "path": [ "global", "dark", - "icon", "color", - "300" + "status", + "info", + "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#b6a6e9", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#b6a6e9" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--purple--30", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "purple", + "item": "30" }, "path": [ "color", - "gray", - "90" + "purple", + "30" ] } ] @@ -4237,105 +3909,107 @@ ] } }, - "pf-t--global--icon--color--status--unread--on-default--hover": { + "pf-t--global--icon--color--status--info--hover": { "dark": { - "description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "description": "Use as the hover state for icons that identify informational messages.", "type": "color", - "value": "#1f1f1f", + "value": "#d0c5f4", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "description": "Use as the hover state for icons that identify informational messages.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.status.info.hover}" }, - "name": "pf-t--global--icon--color--status--unread--on-default--hover", + "name": "pf-t--global--icon--color--status--info--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "unread" + "state": "info" }, "path": [ "global", "icon", "color", "status", - "unread", - "on-default", + "info", "hover" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the hover state for any element that conveys an info status.", "type": "color", - "value": "#1f1f1f", + "value": "#d0c5f4", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the hover state for any element that conveys an info status.", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.dark.color.status.info.200}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--status--info--hover", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "status", + "subitem": "info", + "state": "hover" }, "path": [ "global", - "icon", "color", - "inverse" + "status", + "info", + "hover" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#d0c5f4", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.purple.20}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--color--status--info--200", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "item": "color", + "subitem": "status", + "state": "info" }, "path": [ "global", "dark", - "icon", "color", - "300" + "status", + "info", + "200" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#d0c5f4", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#d0c5f4" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--purple--20", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "purple", + "item": "20" }, "path": [ "color", - "gray", - "90" + "purple", + "20" ] } ] @@ -4345,105 +4019,107 @@ ] } }, - "pf-t--global--icon--color--status--unread--on-default--clicked": { + "pf-t--global--icon--color--status--info--clicked": { "dark": { - "description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "description": "Use as the clicked state for icons that identify informational messages.", "type": "color", - "value": "#1f1f1f", + "value": "#d0c5f4", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "description": "Use as the clicked state for icons that identify informational messages.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.status.info.clicked}" }, - "name": "pf-t--global--icon--color--status--unread--on-default--clicked", + "name": "pf-t--global--icon--color--status--info--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "unread" + "state": "info" }, "path": [ "global", "icon", "color", "status", - "unread", - "on-default", + "info", "clicked" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the clicked state for any element that conveys an info status.", "type": "color", - "value": "#1f1f1f", + "value": "#d0c5f4", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the clicked state for any element that conveys an info status.", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.dark.color.status.info.200}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--status--info--clicked", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "status", + "subitem": "info", + "state": "clicked" }, "path": [ "global", - "icon", "color", - "inverse" + "status", + "info", + "clicked" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#d0c5f4", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.purple.20}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--color--status--info--200", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "item": "color", + "subitem": "status", + "state": "info" }, "path": [ "global", "dark", - "icon", "color", - "300" + "status", + "info", + "200" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#d0c5f4", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#d0c5f4" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--purple--20", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "purple", + "item": "20" }, "path": [ "color", - "gray", - "90" + "purple", + "20" ] } ] @@ -4453,33 +4129,1329 @@ ] } }, - "pf-t--global--icon--color--status--unread--on-attention--default": { + "pf-t--global--icon--color--status--on-info--default": { "dark": { - "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "description": "Use as the default color for icons that are placed on an info background color and/or are paired with on-info colored text", "type": "color", "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "description": "Use as the default color for icons that are placed on an info background color and/or are paired with on-info colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--unread--on-attention--default", + "name": "pf-t--global--icon--color--status--on-info--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "unread" + "state": "on-info" }, "path": [ "global", "icon", "color", "status", - "unread", - "on-attention", + "on-info", + "default" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.dark.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.90}" + }, + "name": "pf-t--global--dark--icon--color--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" + }, + "path": [ + "global", + "dark", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--on-info--hover": { + "dark": { + "description": "Use as the hover state color for icons that are placed on an info background color and/or are paired with on-info colored text", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the hover state color for icons that are placed on an info background color and/or are paired with on-info colored text", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--on-info--hover", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "on-info" + }, + "path": [ + "global", + "icon", + "color", + "status", + "on-info", + "hover" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.dark.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.90}" + }, + "name": "pf-t--global--dark--icon--color--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" + }, + "path": [ + "global", + "dark", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--on-info--clicked": { + "dark": { + "description": "Use as the clicked state color for icons that are placed on an info background color and/or are paired with on-info colored text", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the clicked state color for icons that are placed on an info background color and/or are paired with on-info colored text", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--on-info--clicked", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "on-info" + }, + "path": [ + "global", + "icon", + "color", + "status", + "on-info", + "clicked" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.dark.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.90}" + }, + "name": "pf-t--global--dark--icon--color--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" + }, + "path": [ + "global", + "dark", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--custom--default": { + "dark": { + "description": "Use as the default color for icons that convey generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "#63bdbd", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the default color for icons that convey generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "{global.color.status.custom.default}" + }, + "name": "pf-t--global--icon--color--status--custom--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "custom" + }, + "path": [ + "global", + "icon", + "color", + "status", + "custom", + "default" + ], + "references": [ + { + "description": "Use as the default color for any element that conveys a generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "#63bdbd", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the default color for any element that conveys a generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "{global.dark.color.status.custom.100}" + }, + "name": "pf-t--global--color--status--custom--default", + "attributes": { + "category": "global", + "type": "color", + "item": "status", + "subitem": "custom", + "state": "default" + }, + "path": [ + "global", + "color", + "status", + "custom", + "default" + ], + "references": [ + { + "type": "color", + "value": "#63bdbd", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.teal.40}" + }, + "name": "pf-t--global--dark--color--status--custom--100", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "status", + "state": "custom" + }, + "path": [ + "global", + "dark", + "color", + "status", + "custom", + "100" + ], + "references": [ + { + "type": "color", + "value": "#63bdbd", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#63bdbd" + }, + "name": "pf-t--color--teal--40", + "attributes": { + "category": "color", + "type": "teal", + "item": "40" + }, + "path": [ + "color", + "teal", + "40" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--custom--hover": { + "dark": { + "description": "Use as the hover state for icons that convey generic status with no associated severity.", + "type": "color", + "value": "#9ad8d8", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the hover state for icons that convey generic status with no associated severity.", + "type": "color", + "value": "{global.color.status.custom.hover}" + }, + "name": "pf-t--global--icon--color--status--custom--hover", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "custom" + }, + "path": [ + "global", + "icon", + "color", + "status", + "custom", + "hover" + ], + "references": [ + { + "description": "Use this color as the hover state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "#9ad8d8", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use this color as the hover state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "{global.dark.color.status.custom.200}" + }, + "name": "pf-t--global--color--status--custom--hover", + "attributes": { + "category": "global", + "type": "color", + "item": "status", + "subitem": "custom", + "state": "hover" + }, + "path": [ + "global", + "color", + "status", + "custom", + "hover" + ], + "references": [ + { + "type": "color", + "value": "#9ad8d8", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.teal.30}" + }, + "name": "pf-t--global--dark--color--status--custom--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "status", + "state": "custom" + }, + "path": [ + "global", + "dark", + "color", + "status", + "custom", + "200" + ], + "references": [ + { + "type": "color", + "value": "#9ad8d8", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#9ad8d8" + }, + "name": "pf-t--color--teal--30", + "attributes": { + "category": "color", + "type": "teal", + "item": "30" + }, + "path": [ + "color", + "teal", + "30" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--custom--clicked": { + "dark": { + "description": "Use as the clicked state for icons that convey generic status with no associated severity.", + "type": "color", + "value": "#9ad8d8", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the clicked state for icons that convey generic status with no associated severity.", + "type": "color", + "value": "{global.color.status.custom.clicked}" + }, + "name": "pf-t--global--icon--color--status--custom--clicked", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "custom" + }, + "path": [ + "global", + "icon", + "color", + "status", + "custom", + "clicked" + ], + "references": [ + { + "description": "Use as the clicked state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "#9ad8d8", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the clicked state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "{global.dark.color.status.custom.200}" + }, + "name": "pf-t--global--color--status--custom--clicked", + "attributes": { + "category": "global", + "type": "color", + "item": "status", + "subitem": "custom", + "state": "clicked" + }, + "path": [ + "global", + "color", + "status", + "custom", + "clicked" + ], + "references": [ + { + "type": "color", + "value": "#9ad8d8", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.teal.30}" + }, + "name": "pf-t--global--dark--color--status--custom--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "status", + "state": "custom" + }, + "path": [ + "global", + "dark", + "color", + "status", + "custom", + "200" + ], + "references": [ + { + "type": "color", + "value": "#9ad8d8", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#9ad8d8" + }, + "name": "pf-t--color--teal--30", + "attributes": { + "category": "color", + "type": "teal", + "item": "30" + }, + "path": [ + "color", + "teal", + "30" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--on-custom--default": { + "dark": { + "description": "Use as the default color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status color, make sure that this token meets contrast requirements with your new custom status color.", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the default color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status color, make sure that this token meets contrast requirements with your new custom status color.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--on-custom--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "on-custom" + }, + "path": [ + "global", + "icon", + "color", + "status", + "on-custom", + "default" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.dark.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.90}" + }, + "name": "pf-t--global--dark--icon--color--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" + }, + "path": [ + "global", + "dark", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--on-custom--hover": { + "dark": { + "description": "Use as the hover state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status hover color, make sure that this token meets contrast requirements with your new custom status hover color.", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the hover state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status hover color, make sure that this token meets contrast requirements with your new custom status hover color.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--on-custom--hover", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "on-custom" + }, + "path": [ + "global", + "icon", + "color", + "status", + "on-custom", + "hover" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.dark.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.90}" + }, + "name": "pf-t--global--dark--icon--color--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" + }, + "path": [ + "global", + "dark", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--on-custom--clicked": { + "dark": { + "description": "Use as the clicked state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status clicked color, make sure that this token meets contrast requirements with your new custom status clicked color.", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the clicked state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status clicked color, make sure that this token meets contrast requirements with your new custom status clicked color.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--on-custom--clicked", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "on-custom" + }, + "path": [ + "global", + "icon", + "color", + "status", + "on-custom", + "clicked" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.dark.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.90}" + }, + "name": "pf-t--global--dark--icon--color--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" + }, + "path": [ + "global", + "dark", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--unread--on-default--default": { + "dark": { + "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--unread--on-default--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "unread" + }, + "path": [ + "global", + "icon", + "color", + "status", + "unread", + "on-default", + "default" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.dark.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.90}" + }, + "name": "pf-t--global--dark--icon--color--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" + }, + "path": [ + "global", + "dark", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--unread--on-default--hover": { + "dark": { + "description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--unread--on-default--hover", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "unread" + }, + "path": [ + "global", + "icon", + "color", + "status", + "unread", + "on-default", + "hover" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.dark.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.90}" + }, + "name": "pf-t--global--dark--icon--color--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" + }, + "path": [ + "global", + "dark", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--unread--on-default--clicked": { + "dark": { + "description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--unread--on-default--clicked", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "unread" + }, + "path": [ + "global", + "icon", + "color", + "status", + "unread", + "on-default", + "clicked" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.dark.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.90}" + }, + "name": "pf-t--global--dark--icon--color--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" + }, + "path": [ + "global", + "dark", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--unread--on-attention--default": { + "dark": { + "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--unread--on-attention--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "unread" + }, + "path": [ + "global", + "icon", + "color", + "status", + "unread", + "on-attention", "default" ], "references": [ @@ -8957,6 +9929,579 @@ ] } }, + "pf-t--global--border--color--brand--accent--default": { + "dark": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "#ee0000", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.default}" + }, + "name": "pf-t--global--border--color--brand--accent--default", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "border", + "color", + "brand", + "accent", + "default" + ], + "references": [ + { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "#ee0000", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.dark.color.brand.accent.100}" + }, + "name": "pf-t--global--color--brand--accent--default", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "default" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "default" + ], + "references": [ + { + "type": "color", + "value": "#ee0000", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.50}" + }, + "name": "pf-t--global--dark--color--brand--accent--100", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "accent", + "100" + ], + "references": [ + { + "type": "color", + "value": "#ee0000", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ee0000" + }, + "name": "pf-t--color--red--50", + "attributes": { + "category": "color", + "type": "red", + "item": "50" + }, + "path": [ + "color", + "red", + "50" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--border--color--brand--accent--hover": { + "dark": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.hover}" + }, + "name": "pf-t--global--border--color--brand--accent--hover", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "border", + "color", + "brand", + "accent", + "hover" + ], + "references": [ + { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.dark.color.brand.accent.200}" + }, + "name": "pf-t--global--color--brand--accent--hover", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "hover" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "hover" + ], + "references": [ + { + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.40}" + }, + "name": "pf-t--global--dark--color--brand--accent--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "accent", + "200" + ], + "references": [ + { + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#f56e6e" + }, + "name": "pf-t--color--red--40", + "attributes": { + "category": "color", + "type": "red", + "item": "40" + }, + "path": [ + "color", + "red", + "40" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--border--color--brand--accent--clicked": { + "dark": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.clicked}" + }, + "name": "pf-t--global--border--color--brand--accent--clicked", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "border", + "color", + "brand", + "accent", + "clicked" + ], + "references": [ + { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.dark.color.brand.accent.200}" + }, + "name": "pf-t--global--color--brand--accent--clicked", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "clicked" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "clicked" + ], + "references": [ + { + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.40}" + }, + "name": "pf-t--global--dark--color--brand--accent--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "accent", + "200" + ], + "references": [ + { + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#f56e6e" + }, + "name": "pf-t--color--red--40", + "attributes": { + "category": "color", + "type": "red", + "item": "40" + }, + "path": [ + "color", + "red", + "40" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--border--color--brand--subtle--default": { + "dark": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "#004d99", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.dark.color.brand.subtle.200}" + }, + "name": "pf-t--global--border--color--brand--subtle--default", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "brand", + "state": "subtle" + }, + "path": [ + "global", + "border", + "color", + "brand", + "subtle", + "default" + ], + "references": [ + { + "type": "color", + "value": "#004d99", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.60}" + }, + "name": "pf-t--global--dark--color--brand--subtle--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "subtle" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "subtle", + "200" + ], + "references": [ + { + "type": "color", + "value": "#004d99", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#004d99" + }, + "name": "pf-t--color--blue--60", + "attributes": { + "category": "color", + "type": "blue", + "item": "60" + }, + "path": [ + "color", + "blue", + "60" + ] + } + ] + } + ] + } + }, + "pf-t--global--border--color--brand--subtle--hover": { + "dark": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "#92c5f9", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.dark.color.brand.subtle.300}" + }, + "name": "pf-t--global--border--color--brand--subtle--hover", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "brand", + "state": "subtle" + }, + "path": [ + "global", + "border", + "color", + "brand", + "subtle", + "hover" + ], + "references": [ + { + "type": "color", + "value": "#92c5f9", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.30}" + }, + "name": "pf-t--global--dark--color--brand--subtle--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "subtle" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "subtle", + "300" + ], + "references": [ + { + "type": "color", + "value": "#92c5f9", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#92c5f9" + }, + "name": "pf-t--color--blue--30", + "attributes": { + "category": "color", + "type": "blue", + "item": "30" + }, + "path": [ + "color", + "blue", + "30" + ] + } + ] + } + ] + } + }, + "pf-t--global--border--color--brand--subtle--clicked": { + "dark": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "#92c5f9", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.dark.color.brand.subtle.300}" + }, + "name": "pf-t--global--border--color--brand--subtle--clicked", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "brand", + "state": "subtle" + }, + "path": [ + "global", + "border", + "color", + "brand", + "subtle", + "clicked" + ], + "references": [ + { + "type": "color", + "value": "#92c5f9", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.30}" + }, + "name": "pf-t--global--dark--color--brand--subtle--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "subtle" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "subtle", + "300" + ], + "references": [ + { + "type": "color", + "value": "#92c5f9", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#92c5f9" + }, + "name": "pf-t--color--blue--30", + "attributes": { + "category": "color", + "type": "blue", + "item": "30" + }, + "path": [ + "color", + "blue", + "30" + ] + } + ] + } + ] + } + }, "pf-t--global--border--color--status--success--default": { "dark": { "description": "Use as the default color for borders that convey a success status, like in alerts, notifications or status labels.", @@ -15488,6 +17033,486 @@ ] } }, + "pf-t--global--color--brand--accent--default": { + "dark": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "#ee0000", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.dark.color.brand.accent.100}" + }, + "name": "pf-t--global--color--brand--accent--default", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "default" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "default" + ], + "references": [ + { + "type": "color", + "value": "#ee0000", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.50}" + }, + "name": "pf-t--global--dark--color--brand--accent--100", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "accent", + "100" + ], + "references": [ + { + "type": "color", + "value": "#ee0000", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ee0000" + }, + "name": "pf-t--color--red--50", + "attributes": { + "category": "color", + "type": "red", + "item": "50" + }, + "path": [ + "color", + "red", + "50" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--brand--accent--hover": { + "dark": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.dark.color.brand.accent.200}" + }, + "name": "pf-t--global--color--brand--accent--hover", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "hover" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "hover" + ], + "references": [ + { + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.40}" + }, + "name": "pf-t--global--dark--color--brand--accent--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "accent", + "200" + ], + "references": [ + { + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#f56e6e" + }, + "name": "pf-t--color--red--40", + "attributes": { + "category": "color", + "type": "red", + "item": "40" + }, + "path": [ + "color", + "red", + "40" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--brand--accent--clicked": { + "dark": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.dark.color.brand.accent.200}" + }, + "name": "pf-t--global--color--brand--accent--clicked", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "clicked" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "clicked" + ], + "references": [ + { + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.40}" + }, + "name": "pf-t--global--dark--color--brand--accent--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "accent", + "200" + ], + "references": [ + { + "type": "color", + "value": "#f56e6e", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#f56e6e" + }, + "name": "pf-t--color--red--40", + "attributes": { + "category": "color", + "type": "red", + "item": "40" + }, + "path": [ + "color", + "red", + "40" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--default": { + "dark": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "#003366", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.dark.color.brand.subtle.100}" + }, + "name": "pf-t--global--color--brand--subtle--default", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "default" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "default" + ], + "references": [ + { + "type": "color", + "value": "#003366", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.70}" + }, + "name": "pf-t--global--dark--color--brand--subtle--100", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "subtle" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "subtle", + "100" + ], + "references": [ + { + "type": "color", + "value": "#003366", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#003366" + }, + "name": "pf-t--color--blue--70", + "attributes": { + "category": "color", + "type": "blue", + "item": "70" + }, + "path": [ + "color", + "blue", + "70" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--hover": { + "dark": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "#004d99", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.dark.color.brand.subtle.200}" + }, + "name": "pf-t--global--color--brand--subtle--hover", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "hover" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "hover" + ], + "references": [ + { + "type": "color", + "value": "#004d99", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.60}" + }, + "name": "pf-t--global--dark--color--brand--subtle--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "subtle" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "subtle", + "200" + ], + "references": [ + { + "type": "color", + "value": "#004d99", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#004d99" + }, + "name": "pf-t--color--blue--60", + "attributes": { + "category": "color", + "type": "blue", + "item": "60" + }, + "path": [ + "color", + "blue", + "60" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--clicked": { + "dark": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "#004d99", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.dark.color.brand.subtle.200}" + }, + "name": "pf-t--global--color--brand--subtle--clicked", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "clicked" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "clicked" + ], + "references": [ + { + "type": "color", + "value": "#004d99", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.60}" + }, + "name": "pf-t--global--dark--color--brand--subtle--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "subtle" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "subtle", + "200" + ], + "references": [ + { + "type": "color", + "value": "#004d99", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#004d99" + }, + "name": "pf-t--color--blue--60", + "attributes": { + "category": "color", + "type": "blue", + "item": "60" + }, + "path": [ + "color", + "blue", + "60" + ] + } + ] + } + ] + } + }, "pf-t--global--color--brand--default": { "dark": { "description": "Use this color for elements that you want to reinforce your brand", @@ -20497,74 +22522,594 @@ "dark": { "description": "Use as the hover state color for branded text.", "type": "color", - "value": "#e0f0ff", + "value": "#e0f0ff", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the hover state color for branded text.", + "type": "color", + "value": "{global.dark.color.brand.300}" + }, + "name": "pf-t--global--text--color--brand--hover", + "attributes": { + "category": "global", + "type": "text", + "item": "color", + "subitem": "brand", + "state": "hover" + }, + "path": [ + "global", + "text", + "color", + "brand", + "hover" + ], + "references": [ + { + "type": "color", + "value": "#e0f0ff", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.10}" + }, + "name": "pf-t--global--dark--color--brand--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "300" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "300" + ], + "references": [ + { + "type": "color", + "value": "#e0f0ff", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#e0f0ff" + }, + "name": "pf-t--color--blue--10", + "attributes": { + "category": "color", + "type": "blue", + "item": "10" + }, + "path": [ + "color", + "blue", + "10" + ] + } + ] + } + ] + } + }, + "pf-t--global--text--color--brand--clicked": { + "dark": { + "description": "Use as the clicked state color for branded text.", + "type": "color", + "value": "#e0f0ff", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the clicked state color for branded text.", + "type": "color", + "value": "{global.dark.color.brand.300}" + }, + "name": "pf-t--global--text--color--brand--clicked", + "attributes": { + "category": "global", + "type": "text", + "item": "color", + "subitem": "brand", + "state": "clicked" + }, + "path": [ + "global", + "text", + "color", + "brand", + "clicked" + ], + "references": [ + { + "type": "color", + "value": "#e0f0ff", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.10}" + }, + "name": "pf-t--global--dark--color--brand--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "300" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "300" + ], + "references": [ + { + "type": "color", + "value": "#e0f0ff", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#e0f0ff" + }, + "name": "pf-t--color--blue--10", + "attributes": { + "category": "color", + "type": "blue", + "item": "10" + }, + "path": [ + "color", + "blue", + "10" + ] + } + ] + } + ] + } + }, + "pf-t--global--text--color--regular": { + "dark": { + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", + "type": "color", + "value": "{global.dark.text.color.100}" + }, + "name": "pf-t--global--text--color--regular", + "attributes": { + "category": "global", + "type": "text", + "item": "color", + "subitem": "regular" + }, + "path": [ + "global", + "text", + "color", + "regular" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.white}" + }, + "name": "pf-t--global--dark--text--color--100", + "attributes": { + "category": "global", + "type": "dark", + "item": "text", + "subitem": "color", + "state": "100" + }, + "path": [ + "global", + "dark", + "text", + "color", + "100" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } + ] + } + ] + } + }, + "pf-t--global--text--color--subtle": { + "dark": { + "description": "Use as a subtle text color for text in an element that is secondary or less important, like descriptions or inactive tab labels.", + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as a subtle text color for text in an element that is secondary or less important, like descriptions or inactive tab labels.", + "type": "color", + "value": "{global.dark.text.color.200}" + }, + "name": "pf-t--global--text--color--subtle", + "attributes": { + "category": "global", + "type": "text", + "item": "color", + "subitem": "subtle" + }, + "path": [ + "global", + "text", + "color", + "subtle" + ], + "references": [ + { + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.30}" + }, + "name": "pf-t--global--dark--text--color--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "text", + "subitem": "color", + "state": "200" + }, + "path": [ + "global", + "dark", + "text", + "color", + "200" + ], + "references": [ + { + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#c7c7c7" + }, + "name": "pf-t--color--gray--30", + "attributes": { + "category": "color", + "type": "gray", + "item": "30" + }, + "path": [ + "color", + "gray", + "30" + ] + } + ] + } + ] + } + }, + "pf-t--global--text--color--inverse": { + "dark": { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "type": "color", + "value": "{global.dark.text.color.300}" + }, + "name": "pf-t--global--text--color--inverse", + "attributes": { + "category": "global", + "type": "text", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "text", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.90}" + }, + "name": "pf-t--global--dark--text--color--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "text", + "subitem": "color", + "state": "300" + }, + "path": [ + "global", + "dark", + "text", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } + ] + } + ] + } + }, + "pf-t--global--text--color--on-brand--default": { + "dark": { + "description": "Use as the default color for text placed on a brand-colored background.", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the default color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.inverse}" + }, + "name": "pf-t--global--text--color--on-brand--default", + "attributes": { + "category": "global", + "type": "text", + "item": "color", + "subitem": "on-brand", + "state": "default" + }, + "path": [ + "global", + "text", + "color", + "on-brand", + "default" + ], + "references": [ + { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "type": "color", + "value": "{global.dark.text.color.300}" + }, + "name": "pf-t--global--text--color--inverse", + "attributes": { + "category": "global", + "type": "text", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "text", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.90}" + }, + "name": "pf-t--global--dark--text--color--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "text", + "subitem": "color", + "state": "300" + }, + "path": [ + "global", + "dark", + "text", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--text--color--on-brand--hover": { + "dark": { + "description": "Use as the hover state color for text placed on a brand-colored background.", + "type": "color", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state color for branded text.", + "description": "Use as the hover state color for text placed on a brand-colored background.", "type": "color", - "value": "{global.dark.color.brand.300}" + "value": "{global.text.color.inverse}" }, - "name": "pf-t--global--text--color--brand--hover", + "name": "pf-t--global--text--color--on-brand--hover", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "brand", + "subitem": "on-brand", "state": "hover" }, "path": [ "global", "text", "color", - "brand", + "on-brand", "hover" ], "references": [ { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "#e0f0ff", - "filePath": "tokens/dark/base.dark.json", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "{color.blue.10}" + "value": "{global.dark.text.color.300}" }, - "name": "pf-t--global--dark--color--brand--300", + "name": "pf-t--global--text--color--inverse", "attributes": { "category": "global", - "type": "dark", + "type": "text", "item": "color", - "subitem": "brand", - "state": "300" + "subitem": "inverse" }, "path": [ "global", - "dark", + "text", "color", - "brand", - "300" + "inverse" ], "references": [ { "type": "color", - "value": "#e0f0ff", - "filePath": "tokens/dark/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#e0f0ff" + "value": "{color.gray.90}" }, - "name": "pf-t--color--blue--10", + "name": "pf-t--global--dark--text--color--300", "attributes": { - "category": "color", - "type": "blue", - "item": "10" + "category": "global", + "type": "dark", + "item": "text", + "subitem": "color", + "state": "300" }, "path": [ + "global", + "dark", + "text", "color", - "blue", - "10" + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } ] } ] @@ -20572,78 +23117,105 @@ ] } }, - "pf-t--global--text--color--brand--clicked": { + "pf-t--global--text--color--on-brand--clicked": { "dark": { - "description": "Use as the clicked state color for branded text.", + "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", - "value": "#e0f0ff", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state color for branded text.", + "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", - "value": "{global.dark.color.brand.300}" + "value": "{global.text.color.inverse}" }, - "name": "pf-t--global--text--color--brand--clicked", + "name": "pf-t--global--text--color--on-brand--clicked", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "brand", + "subitem": "on-brand", "state": "clicked" }, "path": [ "global", "text", "color", - "brand", + "on-brand", "clicked" ], "references": [ { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "#e0f0ff", - "filePath": "tokens/dark/base.dark.json", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "{color.blue.10}" + "value": "{global.dark.text.color.300}" }, - "name": "pf-t--global--dark--color--brand--300", + "name": "pf-t--global--text--color--inverse", "attributes": { "category": "global", - "type": "dark", + "type": "text", "item": "color", - "subitem": "brand", - "state": "300" + "subitem": "inverse" }, "path": [ "global", - "dark", + "text", "color", - "brand", - "300" + "inverse" ], "references": [ { "type": "color", - "value": "#e0f0ff", - "filePath": "tokens/dark/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#e0f0ff" + "value": "{color.gray.90}" }, - "name": "pf-t--color--blue--10", + "name": "pf-t--global--dark--text--color--300", "attributes": { - "category": "color", - "type": "blue", - "item": "10" + "category": "global", + "type": "dark", + "item": "text", + "subitem": "color", + "state": "300" }, "path": [ + "global", + "dark", + "text", "color", - "blue", - "10" + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } ] } ] @@ -20651,74 +23223,104 @@ ] } }, - "pf-t--global--text--color--regular": { + "pf-t--global--text--color--on-brand--accent--default": { "dark": { - "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", + "description": "Use as the default color for text placed on a brand-colored background.", "type": "color", "value": "#ffffff", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", + "description": "Use as the default color for text placed on a brand-colored background.", "type": "color", - "value": "{global.dark.text.color.100}" + "value": "{global.text.color.regular}" }, - "name": "pf-t--global--text--color--regular", + "name": "pf-t--global--text--color--on-brand--accent--default", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "regular" + "subitem": "on-brand", + "state": "accent" }, "path": [ "global", "text", "color", - "regular" + "on-brand", + "accent", + "default" ], "references": [ { + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", "value": "#ffffff", - "filePath": "tokens/dark/base.dark.json", + "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "{color.white}" + "value": "{global.dark.text.color.100}" }, - "name": "pf-t--global--dark--text--color--100", + "name": "pf-t--global--text--color--regular", "attributes": { "category": "global", - "type": "dark", - "item": "text", - "subitem": "color", - "state": "100" + "type": "text", + "item": "color", + "subitem": "regular" }, "path": [ "global", - "dark", "text", "color", - "100" + "regular" ], "references": [ { "type": "color", "value": "#ffffff", - "filePath": "tokens/dark/palette.color.json", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "{color.white}" }, - "name": "pf-t--color--white", + "name": "pf-t--global--dark--text--color--100", "attributes": { - "category": "color", - "type": "white" + "category": "global", + "type": "dark", + "item": "text", + "subitem": "color", + "state": "100" }, "path": [ + "global", + "dark", + "text", "color", - "white" + "100" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } ] } ] @@ -20726,76 +23328,106 @@ ] } }, - "pf-t--global--text--color--subtle": { + "pf-t--global--text--color--on-brand--accent--hover": { "dark": { - "description": "Use as a subtle text color for text in an element that is secondary or less important, like descriptions or inactive tab labels.", + "description": "Use as the hover state color for text placed on a brand-colored background.", "type": "color", - "value": "#c7c7c7", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as a subtle text color for text in an element that is secondary or less important, like descriptions or inactive tab labels.", + "description": "Use as the hover state color for text placed on a brand-colored background.", "type": "color", - "value": "{global.dark.text.color.200}" + "value": "{global.text.color.inverse}" }, - "name": "pf-t--global--text--color--subtle", + "name": "pf-t--global--text--color--on-brand--accent--hover", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "subtle" + "subitem": "on-brand", + "state": "accent" }, "path": [ "global", "text", "color", - "subtle" + "on-brand", + "accent", + "hover" ], "references": [ { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "#c7c7c7", - "filePath": "tokens/dark/base.dark.json", + "value": "#1f1f1f", + "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "{color.gray.30}" + "value": "{global.dark.text.color.300}" }, - "name": "pf-t--global--dark--text--color--200", + "name": "pf-t--global--text--color--inverse", "attributes": { "category": "global", - "type": "dark", - "item": "text", - "subitem": "color", - "state": "200" + "type": "text", + "item": "color", + "subitem": "inverse" }, "path": [ "global", - "dark", "text", "color", - "200" + "inverse" ], "references": [ { "type": "color", - "value": "#c7c7c7", - "filePath": "tokens/dark/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#c7c7c7" + "value": "{color.gray.90}" }, - "name": "pf-t--color--gray--30", + "name": "pf-t--global--dark--text--color--300", "attributes": { - "category": "color", - "type": "gray", - "item": "30" + "category": "global", + "type": "dark", + "item": "text", + "subitem": "color", + "state": "300" }, "path": [ + "global", + "dark", + "text", "color", - "gray", - "30" + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } ] } ] @@ -20803,76 +23435,106 @@ ] } }, - "pf-t--global--text--color--inverse": { + "pf-t--global--text--color--on-brand--accent--clicked": { "dark": { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", - "value": "{global.dark.text.color.300}" + "value": "{global.text.color.inverse}" }, - "name": "pf-t--global--text--color--inverse", + "name": "pf-t--global--text--color--on-brand--accent--clicked", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "inverse" + "subitem": "on-brand", + "state": "accent" }, "path": [ "global", "text", "color", - "inverse" + "on-brand", + "accent", + "clicked" ], "references": [ { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", "value": "#1f1f1f", - "filePath": "tokens/dark/base.dark.json", + "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "{color.gray.90}" + "value": "{global.dark.text.color.300}" }, - "name": "pf-t--global--dark--text--color--300", + "name": "pf-t--global--text--color--inverse", "attributes": { "category": "global", - "type": "dark", - "item": "text", - "subitem": "color", - "state": "300" + "type": "text", + "item": "color", + "subitem": "inverse" }, "path": [ "global", - "dark", "text", "color", - "300" + "inverse" ], "references": [ { "type": "color", "value": "#1f1f1f", - "filePath": "tokens/dark/palette.color.json", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "{color.gray.90}" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--global--dark--text--color--300", "attributes": { - "category": "color", - "type": "gray", - "item": "90" + "category": "global", + "type": "dark", + "item": "text", + "subitem": "color", + "state": "300" }, "path": [ + "global", + "dark", + "text", "color", - "gray", - "90" + "300" + ], + "references": [ + { + "type": "color", + "value": "#1f1f1f", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#1f1f1f" + }, + "name": "pf-t--color--gray--90", + "attributes": { + "category": "color", + "type": "gray", + "item": "90" + }, + "path": [ + "color", + "gray", + "90" + ] + } ] } ] @@ -20880,103 +23542,102 @@ ] } }, - "pf-t--global--text--color--on-brand--default": { + "pf-t--global--text--color--on-brand--subtle--default": { "dark": { "description": "Use as the default color for text placed on a brand-colored background.", "type": "color", - "value": "#1f1f1f", + "value": "#ffffff", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { "description": "Use as the default color for text placed on a brand-colored background.", "type": "color", - "value": "{global.text.color.inverse}" + "value": "{global.text.color.regular}" }, - "name": "pf-t--global--text--color--on-brand--default", + "name": "pf-t--global--text--color--on-brand--subtle--default", "attributes": { "category": "global", "type": "text", "item": "color", "subitem": "on-brand", - "state": "default" + "state": "subtle" }, "path": [ "global", "text", "color", "on-brand", + "subtle", "default" ], "references": [ { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "#1f1f1f", + "value": "#ffffff", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "{global.dark.text.color.300}" + "value": "{global.dark.text.color.100}" }, - "name": "pf-t--global--text--color--inverse", + "name": "pf-t--global--text--color--regular", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "text", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#ffffff", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.white}" }, - "name": "pf-t--global--dark--text--color--300", + "name": "pf-t--global--dark--text--color--100", "attributes": { "category": "global", "type": "dark", "item": "text", "subitem": "color", - "state": "300" + "state": "100" }, "path": [ "global", "dark", "text", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#ffffff", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#ffffff" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--white", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "white" }, "path": [ "color", - "gray", - "90" + "white" ] } ] @@ -20986,103 +23647,102 @@ ] } }, - "pf-t--global--text--color--on-brand--hover": { + "pf-t--global--text--color--on-brand--subtle--hover": { "dark": { "description": "Use as the hover state color for text placed on a brand-colored background.", "type": "color", - "value": "#1f1f1f", + "value": "#ffffff", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { "description": "Use as the hover state color for text placed on a brand-colored background.", "type": "color", - "value": "{global.text.color.inverse}" + "value": "{global.text.color.regular}" }, - "name": "pf-t--global--text--color--on-brand--hover", + "name": "pf-t--global--text--color--on-brand--subtle--hover", "attributes": { "category": "global", "type": "text", "item": "color", "subitem": "on-brand", - "state": "hover" + "state": "subtle" }, "path": [ "global", "text", "color", "on-brand", + "subtle", "hover" ], "references": [ { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "#1f1f1f", + "value": "#ffffff", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "{global.dark.text.color.300}" + "value": "{global.dark.text.color.100}" }, - "name": "pf-t--global--text--color--inverse", + "name": "pf-t--global--text--color--regular", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "text", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#ffffff", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.white}" }, - "name": "pf-t--global--dark--text--color--300", + "name": "pf-t--global--dark--text--color--100", "attributes": { "category": "global", "type": "dark", "item": "text", "subitem": "color", - "state": "300" + "state": "100" }, "path": [ "global", "dark", "text", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#ffffff", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#ffffff" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--white", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "white" }, "path": [ "color", - "gray", - "90" + "white" ] } ] @@ -21092,103 +23752,102 @@ ] } }, - "pf-t--global--text--color--on-brand--clicked": { + "pf-t--global--text--color--on-brand--subtle--clicked": { "dark": { "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", - "value": "#1f1f1f", + "value": "#ffffff", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", - "value": "{global.text.color.inverse}" + "value": "{global.text.color.regular}" }, - "name": "pf-t--global--text--color--on-brand--clicked", + "name": "pf-t--global--text--color--on-brand--subtle--clicked", "attributes": { "category": "global", "type": "text", "item": "color", "subitem": "on-brand", - "state": "clicked" + "state": "subtle" }, "path": [ "global", "text", "color", "on-brand", + "subtle", "clicked" ], "references": [ { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "#1f1f1f", + "value": "#ffffff", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "{global.dark.text.color.300}" + "value": "{global.dark.text.color.100}" }, - "name": "pf-t--global--text--color--inverse", + "name": "pf-t--global--text--color--regular", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "text", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#ffffff", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.white}" }, - "name": "pf-t--global--dark--text--color--300", + "name": "pf-t--global--dark--text--color--100", "attributes": { "category": "global", "type": "dark", "item": "text", "subitem": "color", - "state": "300" + "state": "100" }, "path": [ "global", "dark", "text", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#ffffff", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#ffffff" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--white", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "white" }, "path": [ "color", - "gray", - "90" + "white" ] } ] @@ -31016,269 +33675,108 @@ ] } }, - "pf-t--global--icon--size--3xl": { - "default": { - "description": "Use for triple extra large icons.", - "type": "number", - "value": "6rem", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": false, - "original": { - "description": "Use for triple extra large icons.", - "type": "number", - "value": "{global.icon.size.500}" - }, - "name": "pf-t--global--icon--size--3xl", - "attributes": { - "category": "global", - "type": "icon", - "item": "size", - "subitem": "3xl" - }, - "path": [ - "global", - "icon", - "size", - "3xl" - ], - "references": [ - { - "type": "number", - "value": "6rem", - "filePath": "tokens/default/base.dimension.json", - "isSource": false, - "original": { - "type": "number", - "value": 96 - }, - "name": "pf-t--global--icon--size--500", - "attributes": { - "category": "global", - "type": "icon", - "item": "size", - "subitem": "500" - }, - "path": [ - "global", - "icon", - "size", - "500" - ] - } - ] - } - }, - "pf-t--global--icon--size--font--body--sm": { - "default": { - "description": "Use for icons that are placed inline with small body text", - "type": "number", - "value": "0.75rem", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": false, - "original": { - "description": "Use for icons that are placed inline with small body text", - "type": "number", - "value": "{global.font.size.body.sm}" - }, - "name": "pf-t--global--icon--size--font--body--sm", - "attributes": { - "category": "global", - "type": "icon", - "item": "size", - "subitem": "font", - "state": "body" - }, - "path": [ - "global", - "icon", - "size", - "font", - "body", - "sm" - ], - "references": [ - { - "description": "Use for a smaller font size in body sections.", - "type": "number", - "value": "0.75rem", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": false, - "original": { - "description": "Use for a smaller font size in body sections.", - "type": "number", - "value": "{global.font.size.xs}" - }, - "name": "pf-t--global--font--size--body--sm", - "attributes": { - "category": "global", - "type": "font", - "item": "size", - "subitem": "body", - "state": "sm" - }, - "path": [ - "global", - "font", - "size", - "body", - "sm" - ], - "references": [ - { - "type": "number", - "value": "0.75rem", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": false, - "original": { - "type": "number", - "value": "{global.font.size.100}" - }, - "name": "pf-t--global--font--size--xs", - "attributes": { - "category": "global", - "type": "font", - "item": "size", - "subitem": "xs" - }, - "path": [ - "global", - "font", - "size", - "xs" - ], - "references": [ - { - "type": "number", - "value": "0.75rem", - "filePath": "tokens/default/base.dimension.json", - "isSource": false, - "original": { - "type": "number", - "value": 12 - }, - "name": "pf-t--global--font--size--100", - "attributes": { - "category": "global", - "type": "font", - "item": "size", - "subitem": "100" - }, - "path": [ - "global", - "font", - "size", - "100" - ] - } - ] - } - ] - } - ] - } - }, - "pf-t--global--icon--size--font--body--default": { + "pf-t--global--icon--size--font--heading--h1": { "default": { - "description": "Use for icons that are placed inline with default body text", + "description": "Use for icons that are placed inline with first level headings", "type": "number", - "value": "0.875rem", + "value": "1.5rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use for icons that are placed inline with default body text", + "description": "Use for icons that are placed inline with first level headings", "type": "number", - "value": "{global.font.size.body.default}" + "value": "{global.font.size.heading.h1}" }, - "name": "pf-t--global--icon--size--font--body--default", + "name": "pf-t--global--icon--size--font--heading--h1", "attributes": { "category": "global", "type": "icon", "item": "size", "subitem": "font", - "state": "body" + "state": "heading" }, "path": [ "global", "icon", "size", "font", - "body", - "default" + "heading", + "h1" ], "references": [ { - "description": "Use as the default font size in body sections.", + "description": "Use as the font size for first level headings.", "type": "number", - "value": "0.875rem", + "value": "1.5rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the default font size in body sections.", + "description": "Use as the font size for first level headings.", "type": "number", - "value": "{global.font.size.sm}" + "value": "{global.font.size.2xl}" }, - "name": "pf-t--global--font--size--body--default", + "name": "pf-t--global--font--size--heading--h1", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "body", - "state": "default" + "subitem": "heading", + "state": "h1" }, "path": [ "global", "font", "size", - "body", - "default" + "heading", + "h1" ], "references": [ { - "description": "Use as the font size for small text that isn’t a heading or in a body section.", + "description": "Use as the font size for double extra large text that isn’t a heading or in a body section.", "type": "number", - "value": "0.875rem", + "value": "1.5rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the font size for small text that isn’t a heading or in a body section.", + "description": "Use as the font size for double extra large text that isn’t a heading or in a body section.", "type": "number", - "value": "{global.font.size.200}" + "value": "{global.font.size.600}" }, - "name": "pf-t--global--font--size--sm", + "name": "pf-t--global--font--size--2xl", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "sm" + "subitem": "2xl" }, "path": [ "global", "font", "size", - "sm" + "2xl" ], "references": [ { "type": "number", - "value": "0.875rem", + "value": "1.5rem", "filePath": "tokens/default/base.dimension.json", "isSource": false, "original": { "type": "number", - "value": 14 + "value": 24 }, - "name": "pf-t--global--font--size--200", + "name": "pf-t--global--font--size--600", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "200" + "subitem": "600" }, "path": [ "global", "font", "size", - "200" + "600" ] } ] @@ -31288,108 +33786,108 @@ ] } }, - "pf-t--global--icon--size--font--body--lg": { + "pf-t--global--icon--size--font--heading--h2": { "default": { - "description": "Use for icons that are placed inline with large body text", + "description": "Use for icons that are placed inline with second level headings", "type": "number", - "value": "1rem", + "value": "1.25rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use for icons that are placed inline with large body text", + "description": "Use for icons that are placed inline with second level headings", "type": "number", - "value": "{global.font.size.body.lg}" + "value": "{global.font.size.heading.h2}" }, - "name": "pf-t--global--icon--size--font--body--lg", + "name": "pf-t--global--icon--size--font--heading--h2", "attributes": { "category": "global", "type": "icon", "item": "size", "subitem": "font", - "state": "body" + "state": "heading" }, "path": [ "global", "icon", "size", "font", - "body", - "lg" + "heading", + "h2" ], "references": [ { - "description": "Use for a larger font size in body sections.", + "description": "Use as the font size for second level headings.", "type": "number", - "value": "1rem", + "value": "1.25rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use for a larger font size in body sections.", + "description": "Use as the font size for second level headings.", "type": "number", - "value": "{global.font.size.md}" + "value": "{global.font.size.xl}" }, - "name": "pf-t--global--font--size--body--lg", + "name": "pf-t--global--font--size--heading--h2", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "body", - "state": "lg" + "subitem": "heading", + "state": "h2" }, "path": [ "global", "font", "size", - "body", - "lg" + "heading", + "h2" ], "references": [ { - "description": "Use as the font size for medium text that isn’t a heading or in a body section.", + "description": "Use as the font size for extra large text that isn’t a heading or in a body section.", "type": "number", - "value": "1rem", + "value": "1.25rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the font size for medium text that isn’t a heading or in a body section.", + "description": "Use as the font size for extra large text that isn’t a heading or in a body section.", "type": "number", - "value": "{global.font.size.300}" + "value": "{global.font.size.500}" }, - "name": "pf-t--global--font--size--md", + "name": "pf-t--global--font--size--xl", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "md" + "subitem": "xl" }, "path": [ "global", "font", "size", - "md" + "xl" ], "references": [ { "type": "number", - "value": "1rem", + "value": "1.25rem", "filePath": "tokens/default/base.dimension.json", "isSource": false, "original": { "type": "number", - "value": 16 + "value": 20 }, - "name": "pf-t--global--font--size--300", + "name": "pf-t--global--font--size--500", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "300" + "subitem": "500" }, "path": [ "global", "font", "size", - "300" + "500" ] } ] @@ -31399,19 +33897,19 @@ ] } }, - "pf-t--global--icon--size--font--heading--h1": { + "pf-t--global--icon--size--font--heading--h3": { "default": { - "description": "Use for icons that are placed inline with first level headings", + "description": "Use for icons that are placed inline with third level headings", "type": "number", - "value": "1.5rem", + "value": "1.125rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use for icons that are placed inline with first level headings", + "description": "Use for icons that are placed inline with third level headings", "type": "number", - "value": "{global.font.size.heading.h1}" + "value": "{global.font.size.heading.h3}" }, - "name": "pf-t--global--icon--size--font--heading--h1", + "name": "pf-t--global--icon--size--font--heading--h3", "attributes": { "category": "global", "type": "icon", @@ -31425,82 +33923,82 @@ "size", "font", "heading", - "h1" + "h3" ], "references": [ { - "description": "Use as the font size for first level headings.", + "description": "Use as the font size for third level headings.", "type": "number", - "value": "1.5rem", + "value": "1.125rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the font size for first level headings.", + "description": "Use as the font size for third level headings.", "type": "number", - "value": "{global.font.size.2xl}" + "value": "{global.font.size.lg}" }, - "name": "pf-t--global--font--size--heading--h1", + "name": "pf-t--global--font--size--heading--h3", "attributes": { "category": "global", "type": "font", "item": "size", "subitem": "heading", - "state": "h1" + "state": "h3" }, "path": [ "global", "font", "size", "heading", - "h1" + "h3" ], "references": [ { - "description": "Use as the font size for double extra large text that isn’t a heading or in a body section.", + "description": "Use as the font size for large text that isn’t a heading or in a body section.", "type": "number", - "value": "1.5rem", + "value": "1.125rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the font size for double extra large text that isn’t a heading or in a body section.", + "description": "Use as the font size for large text that isn’t a heading or in a body section.", "type": "number", - "value": "{global.font.size.600}" + "value": "{global.font.size.400}" }, - "name": "pf-t--global--font--size--2xl", + "name": "pf-t--global--font--size--lg", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "2xl" + "subitem": "lg" }, "path": [ "global", "font", "size", - "2xl" + "lg" ], "references": [ { "type": "number", - "value": "1.5rem", + "value": "1.125rem", "filePath": "tokens/default/base.dimension.json", "isSource": false, "original": { "type": "number", - "value": 24 + "value": 18 }, - "name": "pf-t--global--font--size--600", + "name": "pf-t--global--font--size--400", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "600" + "subitem": "400" }, "path": [ "global", "font", "size", - "600" + "400" ] } ] @@ -31510,19 +34008,19 @@ ] } }, - "pf-t--global--icon--size--font--heading--h2": { + "pf-t--global--icon--size--font--heading--h4": { "default": { - "description": "Use for icons that are placed inline with second level headings", + "description": "Use for icons that are placed inline with fourth level headings", "type": "number", - "value": "1.25rem", + "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use for icons that are placed inline with second level headings", + "description": "Use for icons that are placed inline with fourth level headings", "type": "number", - "value": "{global.font.size.heading.h2}" + "value": "{global.font.size.heading.h4}" }, - "name": "pf-t--global--icon--size--font--heading--h2", + "name": "pf-t--global--icon--size--font--heading--h4", "attributes": { "category": "global", "type": "icon", @@ -31536,82 +34034,82 @@ "size", "font", "heading", - "h2" + "h4" ], "references": [ { - "description": "Use as the font size for second level headings.", + "description": "Use as the font size for fourth-level headings.", "type": "number", - "value": "1.25rem", + "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the font size for second level headings.", + "description": "Use as the font size for fourth-level headings.", "type": "number", - "value": "{global.font.size.xl}" + "value": "{global.font.size.md}" }, - "name": "pf-t--global--font--size--heading--h2", + "name": "pf-t--global--font--size--heading--h4", "attributes": { "category": "global", "type": "font", "item": "size", "subitem": "heading", - "state": "h2" + "state": "h4" }, "path": [ "global", "font", "size", "heading", - "h2" + "h4" ], "references": [ { - "description": "Use as the font size for extra large text that isn’t a heading or in a body section.", + "description": "Use as the font size for medium text that isn’t a heading or in a body section.", "type": "number", - "value": "1.25rem", + "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the font size for extra large text that isn’t a heading or in a body section.", + "description": "Use as the font size for medium text that isn’t a heading or in a body section.", "type": "number", - "value": "{global.font.size.500}" + "value": "{global.font.size.300}" }, - "name": "pf-t--global--font--size--xl", + "name": "pf-t--global--font--size--md", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "xl" + "subitem": "md" }, "path": [ "global", "font", "size", - "xl" + "md" ], "references": [ { "type": "number", - "value": "1.25rem", + "value": "1rem", "filePath": "tokens/default/base.dimension.json", "isSource": false, "original": { "type": "number", - "value": 20 + "value": 16 }, - "name": "pf-t--global--font--size--500", + "name": "pf-t--global--font--size--300", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "500" + "subitem": "300" }, "path": [ "global", "font", "size", - "500" + "300" ] } ] @@ -31621,19 +34119,19 @@ ] } }, - "pf-t--global--icon--size--font--heading--h3": { + "pf-t--global--icon--size--font--heading--h5": { "default": { - "description": "Use for icons that are placed inline with third level headings", + "description": "Use for icons that are placed inline with fifth level headings", "type": "number", - "value": "1.125rem", + "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use for icons that are placed inline with third level headings", + "description": "Use for icons that are placed inline with fifth level headings", "type": "number", - "value": "{global.font.size.heading.h3}" + "value": "{global.font.size.heading.h5}" }, - "name": "pf-t--global--icon--size--font--heading--h3", + "name": "pf-t--global--icon--size--font--heading--h5", "attributes": { "category": "global", "type": "icon", @@ -31647,82 +34145,82 @@ "size", "font", "heading", - "h3" + "h5" ], "references": [ { - "description": "Use as the font size for third level headings.", + "description": "Use as the font size for fifth level headings.", "type": "number", - "value": "1.125rem", + "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the font size for third level headings.", + "description": "Use as the font size for fifth level headings.", "type": "number", - "value": "{global.font.size.lg}" + "value": "{global.font.size.md}" }, - "name": "pf-t--global--font--size--heading--h3", + "name": "pf-t--global--font--size--heading--h5", "attributes": { "category": "global", "type": "font", "item": "size", "subitem": "heading", - "state": "h3" + "state": "h5" }, "path": [ "global", "font", "size", "heading", - "h3" + "h5" ], "references": [ { - "description": "Use as the font size for large text that isn’t a heading or in a body section.", + "description": "Use as the font size for medium text that isn’t a heading or in a body section.", "type": "number", - "value": "1.125rem", + "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the font size for large text that isn’t a heading or in a body section.", + "description": "Use as the font size for medium text that isn’t a heading or in a body section.", "type": "number", - "value": "{global.font.size.400}" + "value": "{global.font.size.300}" }, - "name": "pf-t--global--font--size--lg", + "name": "pf-t--global--font--size--md", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "lg" + "subitem": "md" }, "path": [ "global", "font", "size", - "lg" + "md" ], "references": [ { "type": "number", - "value": "1.125rem", + "value": "1rem", "filePath": "tokens/default/base.dimension.json", "isSource": false, "original": { "type": "number", - "value": 18 + "value": 16 }, - "name": "pf-t--global--font--size--400", + "name": "pf-t--global--font--size--300", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "400" + "subitem": "300" }, "path": [ "global", "font", "size", - "400" + "300" ] } ] @@ -31732,19 +34230,19 @@ ] } }, - "pf-t--global--icon--size--font--heading--h4": { + "pf-t--global--icon--size--font--heading--h6": { "default": { - "description": "Use for icons that are placed inline with fourth level headings", + "description": "Use for icons that are placed inline with sixth level headings", "type": "number", "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use for icons that are placed inline with fourth level headings", + "description": "Use for icons that are placed inline with sixth level headings", "type": "number", - "value": "{global.font.size.heading.h4}" + "value": "{global.font.size.heading.h6}" }, - "name": "pf-t--global--icon--size--font--heading--h4", + "name": "pf-t--global--icon--size--font--heading--h6", "attributes": { "category": "global", "type": "icon", @@ -31758,34 +34256,34 @@ "size", "font", "heading", - "h4" + "h6" ], "references": [ { - "description": "Use as the font size for fourth-level headings.", + "description": "Use as the font size for sixth level headings.", "type": "number", "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the font size for fourth-level headings.", + "description": "Use as the font size for sixth level headings.", "type": "number", "value": "{global.font.size.md}" }, - "name": "pf-t--global--font--size--heading--h4", + "name": "pf-t--global--font--size--heading--h6", "attributes": { "category": "global", "type": "font", "item": "size", "subitem": "heading", - "state": "h4" + "state": "h6" }, "path": [ "global", "font", "size", "heading", - "h4" + "h6" ], "references": [ { @@ -31843,108 +34341,106 @@ ] } }, - "pf-t--global--icon--size--font--heading--h5": { + "pf-t--global--icon--size--font--body--sm": { "default": { - "description": "Use for icons that are placed inline with fifth level headings", + "description": "Use for icons that are placed inline with small body text", "type": "number", - "value": "1rem", + "value": "0.75rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use for icons that are placed inline with fifth level headings", + "description": "Use for icons that are placed inline with small body text", "type": "number", - "value": "{global.font.size.heading.h5}" + "value": "{global.font.size.body.sm}" }, - "name": "pf-t--global--icon--size--font--heading--h5", + "name": "pf-t--global--icon--size--font--body--sm", "attributes": { "category": "global", "type": "icon", "item": "size", "subitem": "font", - "state": "heading" + "state": "body" }, "path": [ "global", "icon", "size", "font", - "heading", - "h5" + "body", + "sm" ], "references": [ { - "description": "Use as the font size for fifth level headings.", + "description": "Use for a smaller font size in body sections.", "type": "number", - "value": "1rem", + "value": "0.75rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the font size for fifth level headings.", + "description": "Use for a smaller font size in body sections.", "type": "number", - "value": "{global.font.size.md}" + "value": "{global.font.size.xs}" }, - "name": "pf-t--global--font--size--heading--h5", + "name": "pf-t--global--font--size--body--sm", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "heading", - "state": "h5" + "subitem": "body", + "state": "sm" }, "path": [ "global", "font", "size", - "heading", - "h5" + "body", + "sm" ], "references": [ { - "description": "Use as the font size for medium text that isn’t a heading or in a body section.", "type": "number", - "value": "1rem", + "value": "0.75rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the font size for medium text that isn’t a heading or in a body section.", "type": "number", - "value": "{global.font.size.300}" + "value": "{global.font.size.100}" }, - "name": "pf-t--global--font--size--md", + "name": "pf-t--global--font--size--xs", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "md" + "subitem": "xs" }, "path": [ "global", "font", "size", - "md" + "xs" ], "references": [ { "type": "number", - "value": "1rem", + "value": "0.75rem", "filePath": "tokens/default/base.dimension.json", "isSource": false, "original": { "type": "number", - "value": 16 + "value": 12 }, - "name": "pf-t--global--font--size--300", + "name": "pf-t--global--font--size--100", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "300" + "subitem": "100" }, "path": [ "global", "font", "size", - "300" + "100" ] } ] @@ -31954,60 +34450,171 @@ ] } }, - "pf-t--global--icon--size--font--heading--h6": { + "pf-t--global--icon--size--font--body--default": { "default": { - "description": "Use for icons that are placed inline with sixth level headings", + "description": "Use for icons that are placed inline with default body text", + "type": "number", + "value": "0.875rem", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": false, + "original": { + "description": "Use for icons that are placed inline with default body text", + "type": "number", + "value": "{global.font.size.body.default}" + }, + "name": "pf-t--global--icon--size--font--body--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "size", + "subitem": "font", + "state": "body" + }, + "path": [ + "global", + "icon", + "size", + "font", + "body", + "default" + ], + "references": [ + { + "description": "Use as the default font size in body sections.", + "type": "number", + "value": "0.875rem", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": false, + "original": { + "description": "Use as the default font size in body sections.", + "type": "number", + "value": "{global.font.size.sm}" + }, + "name": "pf-t--global--font--size--body--default", + "attributes": { + "category": "global", + "type": "font", + "item": "size", + "subitem": "body", + "state": "default" + }, + "path": [ + "global", + "font", + "size", + "body", + "default" + ], + "references": [ + { + "description": "Use as the font size for small text that isn’t a heading or in a body section.", + "type": "number", + "value": "0.875rem", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": false, + "original": { + "description": "Use as the font size for small text that isn’t a heading or in a body section.", + "type": "number", + "value": "{global.font.size.200}" + }, + "name": "pf-t--global--font--size--sm", + "attributes": { + "category": "global", + "type": "font", + "item": "size", + "subitem": "sm" + }, + "path": [ + "global", + "font", + "size", + "sm" + ], + "references": [ + { + "type": "number", + "value": "0.875rem", + "filePath": "tokens/default/base.dimension.json", + "isSource": false, + "original": { + "type": "number", + "value": 14 + }, + "name": "pf-t--global--font--size--200", + "attributes": { + "category": "global", + "type": "font", + "item": "size", + "subitem": "200" + }, + "path": [ + "global", + "font", + "size", + "200" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--size--font--body--lg": { + "default": { + "description": "Use for icons that are placed inline with large body text", "type": "number", "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use for icons that are placed inline with sixth level headings", + "description": "Use for icons that are placed inline with large body text", "type": "number", - "value": "{global.font.size.heading.h6}" + "value": "{global.font.size.body.lg}" }, - "name": "pf-t--global--icon--size--font--heading--h6", + "name": "pf-t--global--icon--size--font--body--lg", "attributes": { "category": "global", "type": "icon", "item": "size", "subitem": "font", - "state": "heading" + "state": "body" }, "path": [ "global", "icon", "size", "font", - "heading", - "h6" + "body", + "lg" ], "references": [ { - "description": "Use as the font size for sixth level headings.", + "description": "Use for a larger font size in body sections.", "type": "number", "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the font size for sixth level headings.", + "description": "Use for a larger font size in body sections.", "type": "number", "value": "{global.font.size.md}" }, - "name": "pf-t--global--font--size--heading--h6", + "name": "pf-t--global--font--size--body--lg", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "heading", - "state": "h6" + "subitem": "body", + "state": "lg" }, "path": [ "global", "font", "size", - "heading", - "h6" + "body", + "lg" ], "references": [ { @@ -32711,53 +35318,53 @@ ] } }, - "pf-t--global--border--width--regular": { + "pf-t--global--icon--size--3xl": { "default": { - "description": "Use as the default border width for elements.", + "description": "Use for triple extra large icons.", "type": "number", - "value": "1px", + "value": "6rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { - "description": "Use as the default border width for elements.", + "description": "Use for triple extra large icons.", "type": "number", - "value": "{global.border.width.100}" + "value": "{global.icon.size.500}" }, - "name": "pf-t--global--border--width--regular", + "name": "pf-t--global--icon--size--3xl", "attributes": { "category": "global", - "type": "border", - "item": "width", - "subitem": "regular" + "type": "icon", + "item": "size", + "subitem": "3xl" }, "path": [ "global", - "border", - "width", - "regular" + "icon", + "size", + "3xl" ], "references": [ { "type": "number", - "value": "1px", + "value": "6rem", "filePath": "tokens/default/base.dimension.json", "isSource": false, "original": { "type": "number", - "value": 1 + "value": 96 }, - "name": "pf-t--global--border--width--100", + "name": "pf-t--global--icon--size--500", "attributes": { "category": "global", - "type": "border", - "item": "width", - "subitem": "100" + "type": "icon", + "item": "size", + "subitem": "500" }, "path": [ "global", - "border", - "width", - "100" + "icon", + "size", + "500" ] } ] @@ -32925,6 +35532,58 @@ ] } }, + "pf-t--global--border--width--regular": { + "default": { + "description": "Use as the default border width for elements.", + "type": "number", + "value": "1px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": false, + "original": { + "description": "Use as the default border width for elements.", + "type": "number", + "value": "{global.border.width.100}" + }, + "name": "pf-t--global--border--width--regular", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "regular" + }, + "path": [ + "global", + "border", + "width", + "regular" + ], + "references": [ + { + "type": "number", + "value": "1px", + "filePath": "tokens/default/base.dimension.json", + "isSource": false, + "original": { + "type": "number", + "value": 1 + }, + "name": "pf-t--global--border--width--100", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "100" + }, + "path": [ + "global", + "border", + "width", + "100" + ] + } + ] + } + }, "pf-t--global--border--width--strong": { "default": { "description": "Use as a stronger/wider border width for elements.", @@ -33081,87 +35740,6 @@ ] } }, - "pf-t--global--border--width--high-contrast--regular": { - "default": { - "type": "number", - "value": "0px", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": false, - "original": { - "type": "number", - "value": 0 - }, - "name": "pf-t--global--border--width--high-contrast--regular", - "attributes": { - "category": "global", - "type": "border", - "item": "width", - "subitem": "high-contrast", - "state": "regular" - }, - "path": [ - "global", - "border", - "width", - "high-contrast", - "regular" - ] - } - }, - "pf-t--global--border--width--high-contrast--strong": { - "default": { - "type": "number", - "value": "0px", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": false, - "original": { - "type": "number", - "value": 0 - }, - "name": "pf-t--global--border--width--high-contrast--strong", - "attributes": { - "category": "global", - "type": "border", - "item": "width", - "subitem": "high-contrast", - "state": "strong" - }, - "path": [ - "global", - "border", - "width", - "high-contrast", - "strong" - ] - } - }, - "pf-t--global--border--width--high-contrast--extra-strong": { - "default": { - "type": "number", - "value": "0px", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": false, - "original": { - "type": "number", - "value": 0 - }, - "name": "pf-t--global--border--width--high-contrast--extra-strong", - "attributes": { - "category": "global", - "type": "border", - "item": "width", - "subitem": "high-contrast", - "state": "extra-strong" - }, - "path": [ - "global", - "border", - "width", - "high-contrast", - "extra-strong" - ] - } - }, "pf-t--global--border--width--box--default": { "default": { "description": "Use as the default border width for containers like cards, panels, code editors, etc.", @@ -33434,6 +36012,87 @@ ] } }, + "pf-t--global--border--width--high-contrast--regular": { + "default": { + "type": "number", + "value": "0px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": false, + "original": { + "type": "number", + "value": 0 + }, + "name": "pf-t--global--border--width--high-contrast--regular", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "high-contrast", + "state": "regular" + }, + "path": [ + "global", + "border", + "width", + "high-contrast", + "regular" + ] + } + }, + "pf-t--global--border--width--high-contrast--strong": { + "default": { + "type": "number", + "value": "0px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": false, + "original": { + "type": "number", + "value": 0 + }, + "name": "pf-t--global--border--width--high-contrast--strong", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "high-contrast", + "state": "strong" + }, + "path": [ + "global", + "border", + "width", + "high-contrast", + "strong" + ] + } + }, + "pf-t--global--border--width--high-contrast--extra-strong": { + "default": { + "type": "number", + "value": "0px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": false, + "original": { + "type": "number", + "value": 0 + }, + "name": "pf-t--global--border--width--high-contrast--extra-strong", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "high-contrast", + "state": "extra-strong" + }, + "path": [ + "global", + "border", + "width", + "high-contrast", + "extra-strong" + ] + } + }, "pf-t--global--border--width--action--default": { "default": { "description": "Use as the default border width for actions like secondary and tertiary buttons", @@ -39929,78 +42588,78 @@ ] } }, - "pf-t--global--motion--duration--slide-out--short": { + "pf-t--global--motion--duration--fade--short": { "default": { - "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.", + "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.", "type": "number", - "value": "300ms", + "value": "100ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.", + "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.", "type": "number", - "value": "{global.motion.duration.lg}" + "value": "{global.motion.duration.sm}" }, - "name": "pf-t--global--motion--duration--slide-out--short", + "name": "pf-t--global--motion--duration--fade--short", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "slide-out", + "subitem": "fade", "state": "short" }, "path": [ "global", "motion", "duration", - "slide-out", + "fade", "short" ], "references": [ { - "description": "Use for long animation duration. Use for larger, more expressive animations.", + "description": "Use for a short animation duration. Use for simple and/or small animations.", "type": "number", - "value": "300ms", + "value": "100ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use for long animation duration. Use for larger, more expressive animations.", + "description": "Use for a short animation duration. Use for simple and/or small animations.", "type": "number", - "value": "{global.duration.300}" + "value": "{global.duration.100}" }, - "name": "pf-t--global--motion--duration--lg", + "name": "pf-t--global--motion--duration--sm", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "lg" + "subitem": "sm" }, "path": [ "global", "motion", "duration", - "lg" + "sm" ], "references": [ { "type": "number", - "value": "300ms", + "value": "100ms", "filePath": "tokens/default/base.motion.json", "isSource": false, "original": { "type": "number", - "value": 300 + "value": 100 }, - "name": "pf-t--global--duration--300", + "name": "pf-t--global--duration--100", "attributes": { "category": "global", "type": "duration", - "item": "300" + "item": "100" }, "path": [ "global", "duration", - "300" + "100" ] } ] @@ -40008,78 +42667,78 @@ ] } }, - "pf-t--global--motion--duration--slide-out--default": { + "pf-t--global--motion--duration--fade--default": { "default": { - "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.", + "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.", "type": "number", - "value": "400ms", + "value": "200ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.", + "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.", "type": "number", - "value": "{global.motion.duration.xl}" + "value": "{global.motion.duration.md}" }, - "name": "pf-t--global--motion--duration--slide-out--default", + "name": "pf-t--global--motion--duration--fade--default", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "slide-out", + "subitem": "fade", "state": "default" }, "path": [ "global", "motion", "duration", - "slide-out", + "fade", "default" ], "references": [ { - "description": "Use for extra long animation duration.", + "description": "Use for a medium animation duration.", "type": "number", - "value": "400ms", + "value": "200ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use for extra long animation duration.", + "description": "Use for a medium animation duration.", "type": "number", - "value": "{global.duration.400}" + "value": "{global.duration.200}" }, - "name": "pf-t--global--motion--duration--xl", + "name": "pf-t--global--motion--duration--md", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "xl" + "subitem": "md" }, "path": [ "global", "motion", "duration", - "xl" + "md" ], "references": [ { "type": "number", - "value": "400ms", + "value": "200ms", "filePath": "tokens/default/base.motion.json", "isSource": false, "original": { "type": "number", - "value": 400 + "value": 200 }, - "name": "pf-t--global--duration--400", + "name": "pf-t--global--duration--200", "attributes": { "category": "global", "type": "duration", - "item": "400" + "item": "200" }, "path": [ "global", "duration", - "400" + "200" ] } ] @@ -40087,78 +42746,78 @@ ] } }, - "pf-t--global--motion--duration--slide-out--long": { + "pf-t--global--motion--duration--fade--long": { "default": { - "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.", + "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.", "type": "number", - "value": "500ms", + "value": "300ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.", + "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.", "type": "number", - "value": "{global.motion.duration.2xl}" + "value": "{global.motion.duration.lg}" }, - "name": "pf-t--global--motion--duration--slide-out--long", + "name": "pf-t--global--motion--duration--fade--long", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "slide-out", + "subitem": "fade", "state": "long" }, "path": [ "global", "motion", "duration", - "slide-out", + "fade", "long" ], "references": [ { - "description": "Use for significantly long animation duration.", + "description": "Use for long animation duration. Use for larger, more expressive animations.", "type": "number", - "value": "500ms", + "value": "300ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use for significantly long animation duration.", + "description": "Use for long animation duration. Use for larger, more expressive animations.", "type": "number", - "value": "{global.duration.500}" + "value": "{global.duration.300}" }, - "name": "pf-t--global--motion--duration--2xl", + "name": "pf-t--global--motion--duration--lg", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "2xl" + "subitem": "lg" }, "path": [ "global", "motion", "duration", - "2xl" + "lg" ], "references": [ { "type": "number", - "value": "500ms", + "value": "300ms", "filePath": "tokens/default/base.motion.json", "isSource": false, "original": { "type": "number", - "value": 500 + "value": 300 }, - "name": "pf-t--global--duration--500", + "name": "pf-t--global--duration--300", "attributes": { "category": "global", "type": "duration", - "item": "500" + "item": "300" }, "path": [ "global", "duration", - "500" + "300" ] } ] @@ -40166,78 +42825,78 @@ ] } }, - "pf-t--global--motion--duration--icon--short": { + "pf-t--global--motion--duration--slide-out--short": { "default": { - "description": "Use a short duration on an icon that requires a fast/snappy transition. Used to define the speed at which an icon may animate. Used on a notification badge(stateful button).", + "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.", "type": "number", - "value": "50ms", + "value": "300ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use a short duration on an icon that requires a fast/snappy transition. Used to define the speed at which an icon may animate. Used on a notification badge(stateful button).", + "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.", "type": "number", - "value": "{global.motion.duration.xs}" + "value": "{global.motion.duration.lg}" }, - "name": "pf-t--global--motion--duration--icon--short", + "name": "pf-t--global--motion--duration--slide-out--short", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "icon", + "subitem": "slide-out", "state": "short" }, "path": [ "global", "motion", "duration", - "icon", + "slide-out", "short" ], "references": [ { - "description": "Use for the quickest possible duration of an animation.", + "description": "Use for long animation duration. Use for larger, more expressive animations.", "type": "number", - "value": "50ms", + "value": "300ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use for the quickest possible duration of an animation.", + "description": "Use for long animation duration. Use for larger, more expressive animations.", "type": "number", - "value": "{global.duration.50}" + "value": "{global.duration.300}" }, - "name": "pf-t--global--motion--duration--xs", + "name": "pf-t--global--motion--duration--lg", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "xs" + "subitem": "lg" }, "path": [ "global", "motion", "duration", - "xs" + "lg" ], "references": [ { "type": "number", - "value": "50ms", + "value": "300ms", "filePath": "tokens/default/base.motion.json", "isSource": false, "original": { "type": "number", - "value": 50 + "value": 300 }, - "name": "pf-t--global--duration--50", + "name": "pf-t--global--duration--300", "attributes": { "category": "global", "type": "duration", - "item": "50" + "item": "300" }, "path": [ "global", "duration", - "50" + "300" ] } ] @@ -40245,78 +42904,78 @@ ] } }, - "pf-t--global--motion--duration--icon--default": { + "pf-t--global--motion--duration--slide-out--default": { "default": { - "description": "Use a default duration on an icon that requires a moderately timed transition. Used to define the speed at which an icon may animate. Used on a favoriting star(icon button).", + "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.", "type": "number", - "value": "100ms", + "value": "400ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use a default duration on an icon that requires a moderately timed transition. Used to define the speed at which an icon may animate. Used on a favoriting star(icon button).", + "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.", "type": "number", - "value": "{global.motion.duration.sm}" + "value": "{global.motion.duration.xl}" }, - "name": "pf-t--global--motion--duration--icon--default", + "name": "pf-t--global--motion--duration--slide-out--default", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "icon", + "subitem": "slide-out", "state": "default" }, "path": [ "global", "motion", "duration", - "icon", + "slide-out", "default" ], "references": [ { - "description": "Use for a short animation duration. Use for simple and/or small animations.", + "description": "Use for extra long animation duration.", "type": "number", - "value": "100ms", + "value": "400ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use for a short animation duration. Use for simple and/or small animations.", + "description": "Use for extra long animation duration.", "type": "number", - "value": "{global.duration.100}" + "value": "{global.duration.400}" }, - "name": "pf-t--global--motion--duration--sm", + "name": "pf-t--global--motion--duration--xl", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "sm" + "subitem": "xl" }, "path": [ "global", "motion", "duration", - "sm" + "xl" ], "references": [ { "type": "number", - "value": "100ms", + "value": "400ms", "filePath": "tokens/default/base.motion.json", "isSource": false, "original": { "type": "number", - "value": 100 + "value": 400 }, - "name": "pf-t--global--duration--100", + "name": "pf-t--global--duration--400", "attributes": { "category": "global", "type": "duration", - "item": "100" + "item": "400" }, "path": [ "global", "duration", - "100" + "400" ] } ] @@ -40324,78 +42983,78 @@ ] } }, - "pf-t--global--motion--duration--icon--long": { + "pf-t--global--motion--duration--slide-out--long": { "default": { - "description": "Use a long duration on an icon that requires a slow transition. Used to define the speed at which an icon may animate. Used on the settings cog icon(plain menu toggle).", + "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.", "type": "number", - "value": "200ms", + "value": "500ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use a long duration on an icon that requires a slow transition. Used to define the speed at which an icon may animate. Used on the settings cog icon(plain menu toggle).", + "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.", "type": "number", - "value": "{global.motion.duration.md}" + "value": "{global.motion.duration.2xl}" }, - "name": "pf-t--global--motion--duration--icon--long", + "name": "pf-t--global--motion--duration--slide-out--long", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "icon", + "subitem": "slide-out", "state": "long" }, "path": [ "global", "motion", "duration", - "icon", + "slide-out", "long" ], "references": [ { - "description": "Use for a medium animation duration.", + "description": "Use for significantly long animation duration.", "type": "number", - "value": "200ms", + "value": "500ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use for a medium animation duration.", + "description": "Use for significantly long animation duration.", "type": "number", - "value": "{global.duration.200}" + "value": "{global.duration.500}" }, - "name": "pf-t--global--motion--duration--md", + "name": "pf-t--global--motion--duration--2xl", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "md" + "subitem": "2xl" }, "path": [ "global", "motion", "duration", - "md" + "2xl" ], "references": [ { "type": "number", - "value": "200ms", + "value": "500ms", "filePath": "tokens/default/base.motion.json", "isSource": false, "original": { "type": "number", - "value": 200 + "value": 500 }, - "name": "pf-t--global--duration--200", + "name": "pf-t--global--duration--500", "attributes": { "category": "global", "type": "duration", - "item": "200" + "item": "500" }, "path": [ "global", "duration", - "200" + "500" ] } ] @@ -40403,78 +43062,78 @@ ] } }, - "pf-t--global--motion--duration--fade--short": { + "pf-t--global--motion--duration--icon--short": { "default": { - "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.", + "description": "Use a short duration on an icon that requires a fast/snappy transition. Used to define the speed at which an icon may animate. Used on a notification badge(stateful button).", "type": "number", - "value": "100ms", + "value": "50ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.", + "description": "Use a short duration on an icon that requires a fast/snappy transition. Used to define the speed at which an icon may animate. Used on a notification badge(stateful button).", "type": "number", - "value": "{global.motion.duration.sm}" + "value": "{global.motion.duration.xs}" }, - "name": "pf-t--global--motion--duration--fade--short", + "name": "pf-t--global--motion--duration--icon--short", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "fade", + "subitem": "icon", "state": "short" }, "path": [ "global", "motion", "duration", - "fade", + "icon", "short" ], "references": [ { - "description": "Use for a short animation duration. Use for simple and/or small animations.", + "description": "Use for the quickest possible duration of an animation.", "type": "number", - "value": "100ms", + "value": "50ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use for a short animation duration. Use for simple and/or small animations.", + "description": "Use for the quickest possible duration of an animation.", "type": "number", - "value": "{global.duration.100}" + "value": "{global.duration.50}" }, - "name": "pf-t--global--motion--duration--sm", + "name": "pf-t--global--motion--duration--xs", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "sm" + "subitem": "xs" }, "path": [ "global", "motion", "duration", - "sm" + "xs" ], "references": [ { "type": "number", - "value": "100ms", + "value": "50ms", "filePath": "tokens/default/base.motion.json", "isSource": false, "original": { "type": "number", - "value": 100 + "value": 50 }, - "name": "pf-t--global--duration--100", + "name": "pf-t--global--duration--50", "attributes": { "category": "global", "type": "duration", - "item": "100" + "item": "50" }, "path": [ "global", "duration", - "100" + "50" ] } ] @@ -40482,78 +43141,78 @@ ] } }, - "pf-t--global--motion--duration--fade--default": { + "pf-t--global--motion--duration--icon--default": { "default": { - "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.", + "description": "Use a default duration on an icon that requires a moderately timed transition. Used to define the speed at which an icon may animate. Used on a favoriting star(icon button).", "type": "number", - "value": "200ms", + "value": "100ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.", + "description": "Use a default duration on an icon that requires a moderately timed transition. Used to define the speed at which an icon may animate. Used on a favoriting star(icon button).", "type": "number", - "value": "{global.motion.duration.md}" + "value": "{global.motion.duration.sm}" }, - "name": "pf-t--global--motion--duration--fade--default", + "name": "pf-t--global--motion--duration--icon--default", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "fade", + "subitem": "icon", "state": "default" }, "path": [ "global", "motion", "duration", - "fade", + "icon", "default" ], "references": [ { - "description": "Use for a medium animation duration.", + "description": "Use for a short animation duration. Use for simple and/or small animations.", "type": "number", - "value": "200ms", + "value": "100ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use for a medium animation duration.", + "description": "Use for a short animation duration. Use for simple and/or small animations.", "type": "number", - "value": "{global.duration.200}" + "value": "{global.duration.100}" }, - "name": "pf-t--global--motion--duration--md", + "name": "pf-t--global--motion--duration--sm", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "md" + "subitem": "sm" }, "path": [ "global", "motion", "duration", - "md" + "sm" ], "references": [ { "type": "number", - "value": "200ms", + "value": "100ms", "filePath": "tokens/default/base.motion.json", "isSource": false, "original": { "type": "number", - "value": 200 + "value": 100 }, - "name": "pf-t--global--duration--200", + "name": "pf-t--global--duration--100", "attributes": { "category": "global", "type": "duration", - "item": "200" + "item": "100" }, "path": [ "global", "duration", - "200" + "100" ] } ] @@ -40561,78 +43220,78 @@ ] } }, - "pf-t--global--motion--duration--fade--long": { + "pf-t--global--motion--duration--icon--long": { "default": { - "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.", + "description": "Use a long duration on an icon that requires a slow transition. Used to define the speed at which an icon may animate. Used on the settings cog icon(plain menu toggle).", "type": "number", - "value": "300ms", + "value": "200ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.", + "description": "Use a long duration on an icon that requires a slow transition. Used to define the speed at which an icon may animate. Used on the settings cog icon(plain menu toggle).", "type": "number", - "value": "{global.motion.duration.lg}" + "value": "{global.motion.duration.md}" }, - "name": "pf-t--global--motion--duration--fade--long", + "name": "pf-t--global--motion--duration--icon--long", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "fade", + "subitem": "icon", "state": "long" }, "path": [ "global", "motion", "duration", - "fade", + "icon", "long" ], "references": [ { - "description": "Use for long animation duration. Use for larger, more expressive animations.", + "description": "Use for a medium animation duration.", "type": "number", - "value": "300ms", + "value": "200ms", "filePath": "tokens/default/semantic.motion.json", "isSource": false, "original": { - "description": "Use for long animation duration. Use for larger, more expressive animations.", + "description": "Use for a medium animation duration.", "type": "number", - "value": "{global.duration.300}" + "value": "{global.duration.200}" }, - "name": "pf-t--global--motion--duration--lg", + "name": "pf-t--global--motion--duration--md", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "lg" + "subitem": "md" }, "path": [ "global", "motion", "duration", - "lg" + "md" ], "references": [ { "type": "number", - "value": "300ms", + "value": "200ms", "filePath": "tokens/default/base.motion.json", "isSource": false, "original": { "type": "number", - "value": 300 + "value": 200 }, - "name": "pf-t--global--duration--300", + "name": "pf-t--global--duration--200", "attributes": { "category": "global", "type": "duration", - "item": "300" + "item": "200" }, "path": [ "global", "duration", - "300" + "200" ] } ] @@ -42339,6 +44998,356 @@ ] } }, + "pf-t--global--color--brand--accent--100": { + "default": { + "type": "color", + "value": "#ee0000", + "filePath": "tokens/default/base.json", + "isSource": false, + "original": { + "type": "color", + "value": "{color.red.50}" + }, + "name": "pf-t--global--color--brand--accent--100", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "100" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "100" + ], + "references": [ + { + "type": "color", + "value": "#ee0000", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ee0000" + }, + "name": "pf-t--color--red--50", + "attributes": { + "category": "color", + "type": "red", + "item": "50" + }, + "path": [ + "color", + "red", + "50" + ] + } + ] + } + }, + "pf-t--global--color--brand--accent--200": { + "default": { + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/base.json", + "isSource": false, + "original": { + "type": "color", + "value": "{color.red.60}" + }, + "name": "pf-t--global--color--brand--accent--200", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "200" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "200" + ], + "references": [ + { + "type": "color", + "value": "#a60000", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#a60000" + }, + "name": "pf-t--color--red--60", + "attributes": { + "category": "color", + "type": "red", + "item": "60" + }, + "path": [ + "color", + "red", + "60" + ] + } + ] + } + }, + "pf-t--global--color--brand--accent--300": { + "default": { + "type": "color", + "value": "#5f0000", + "filePath": "tokens/default/base.json", + "isSource": false, + "original": { + "type": "color", + "value": "{color.red.70}" + }, + "name": "pf-t--global--color--brand--accent--300", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "300" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "300" + ], + "references": [ + { + "type": "color", + "value": "#5f0000", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#5f0000" + }, + "name": "pf-t--color--red--70", + "attributes": { + "category": "color", + "type": "red", + "item": "70" + }, + "path": [ + "color", + "red", + "70" + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--100": { + "default": { + "type": "color", + "value": "#e0f0ff", + "filePath": "tokens/default/base.json", + "isSource": false, + "original": { + "type": "color", + "value": "{color.blue.10}" + }, + "name": "pf-t--global--color--brand--subtle--100", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "100" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "100" + ], + "references": [ + { + "type": "color", + "value": "#e0f0ff", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#e0f0ff" + }, + "name": "pf-t--color--blue--10", + "attributes": { + "category": "color", + "type": "blue", + "item": "10" + }, + "path": [ + "color", + "blue", + "10" + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--200": { + "default": { + "type": "color", + "value": "#b9dafc", + "filePath": "tokens/default/base.json", + "isSource": false, + "original": { + "type": "color", + "value": "{color.blue.20}" + }, + "name": "pf-t--global--color--brand--subtle--200", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "200" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "200" + ], + "references": [ + { + "type": "color", + "value": "#b9dafc", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#b9dafc" + }, + "name": "pf-t--color--blue--20", + "attributes": { + "category": "color", + "type": "blue", + "item": "20" + }, + "path": [ + "color", + "blue", + "20" + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--300": { + "default": { + "type": "color", + "value": "#4394e5", + "filePath": "tokens/default/base.json", + "isSource": false, + "original": { + "type": "color", + "value": "{color.blue.40}" + }, + "name": "pf-t--global--color--brand--subtle--300", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "300" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "300" + ], + "references": [ + { + "type": "color", + "value": "#4394e5", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#4394e5" + }, + "name": "pf-t--color--blue--40", + "attributes": { + "category": "color", + "type": "blue", + "item": "40" + }, + "path": [ + "color", + "blue", + "40" + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--400": { + "default": { + "type": "color", + "value": "#0066cc", + "filePath": "tokens/default/base.json", + "isSource": false, + "original": { + "type": "color", + "value": "{color.blue.50}" + }, + "name": "pf-t--global--color--brand--subtle--400", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "400" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "400" + ], + "references": [ + { + "type": "color", + "value": "#0066cc", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#0066cc" + }, + "name": "pf-t--color--blue--50", + "attributes": { + "category": "color", + "type": "blue", + "item": "50" + }, + "path": [ + "color", + "blue", + "50" + ] + } + ] + } + }, "pf-t--global--color--disabled--100": { "default": { "type": "color", @@ -47365,6 +50374,33 @@ ] } }, + "pf-t--global--dark--background--color--700": { + "dark": { + "type": "color", + "value": "rgba(199, 199, 199, 0.2500)", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "rgba(199, 199, 199, 0.2500)" + }, + "name": "pf-t--global--dark--background--color--700", + "attributes": { + "category": "global", + "type": "dark", + "item": "background", + "subitem": "color", + "state": "700" + }, + "path": [ + "global", + "dark", + "background", + "color", + "700" + ] + } + }, "pf-t--global--dark--background--color--highlight--100": { "dark": { "type": "color", @@ -47617,658 +50653,658 @@ ] } }, - "pf-t--global--dark--color--disabled--100": { + "pf-t--global--dark--color--brand--accent--100": { "dark": { "type": "color", - "value": "#a3a3a3", + "value": "#ee0000", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.40}" + "value": "{color.red.50}" }, - "name": "pf-t--global--dark--color--disabled--100", + "name": "pf-t--global--dark--color--brand--accent--100", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "disabled", - "state": "100" + "subitem": "brand", + "state": "accent" }, "path": [ "global", "dark", "color", - "disabled", + "brand", + "accent", "100" ], "references": [ { "type": "color", - "value": "#a3a3a3", + "value": "#ee0000", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#a3a3a3" + "value": "#ee0000" }, - "name": "pf-t--color--gray--40", + "name": "pf-t--color--red--50", "attributes": { "category": "color", - "type": "gray", - "item": "40" + "type": "red", + "item": "50" }, "path": [ "color", - "gray", - "40" + "red", + "50" ] } ] } }, - "pf-t--global--dark--color--disabled--200": { + "pf-t--global--dark--color--brand--accent--200": { "dark": { "type": "color", - "value": "#707070", + "value": "#f56e6e", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.50}" + "value": "{color.red.40}" }, - "name": "pf-t--global--dark--color--disabled--200", + "name": "pf-t--global--dark--color--brand--accent--200", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "disabled", - "state": "200" + "subitem": "brand", + "state": "accent" }, "path": [ "global", "dark", "color", - "disabled", + "brand", + "accent", "200" ], "references": [ { "type": "color", - "value": "#707070", + "value": "#f56e6e", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#707070" + "value": "#f56e6e" }, - "name": "pf-t--color--gray--50", + "name": "pf-t--color--red--40", "attributes": { "category": "color", - "type": "gray", - "item": "50" + "type": "red", + "item": "40" }, "path": [ "color", - "gray", - "50" + "red", + "40" ] } ] } }, - "pf-t--global--dark--color--disabled--300": { + "pf-t--global--dark--color--brand--accent--300": { "dark": { "type": "color", - "value": "#383838", + "value": "#f9a8a8", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.70}" + "value": "{color.red.30}" }, - "name": "pf-t--global--dark--color--disabled--300", + "name": "pf-t--global--dark--color--brand--accent--300", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "disabled", - "state": "300" + "subitem": "brand", + "state": "accent" }, "path": [ "global", "dark", "color", - "disabled", + "brand", + "accent", "300" ], "references": [ { "type": "color", - "value": "#383838", + "value": "#f9a8a8", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#383838" + "value": "#f9a8a8" }, - "name": "pf-t--color--gray--70", + "name": "pf-t--color--red--30", "attributes": { "category": "color", - "type": "gray", - "item": "70" + "type": "red", + "item": "30" }, "path": [ "color", - "gray", - "70" + "red", + "30" ] } ] } }, - "pf-t--global--dark--color--disabled--400": { + "pf-t--global--dark--color--brand--accent--400": { "dark": { "type": "color", - "value": "#1f1f1f", + "value": "#fbc5c5", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.red.20}" }, - "name": "pf-t--global--dark--color--disabled--400", + "name": "pf-t--global--dark--color--brand--accent--400", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "disabled", - "state": "400" + "subitem": "brand", + "state": "accent" }, "path": [ "global", "dark", "color", - "disabled", + "brand", + "accent", "400" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#fbc5c5", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#fbc5c5" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--red--20", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "red", + "item": "20" }, "path": [ "color", - "gray", - "90" + "red", + "20" ] } ] } }, - "pf-t--global--dark--color--favorite--100": { + "pf-t--global--dark--color--brand--subtle--100": { "dark": { "type": "color", - "value": "#ffcc17", + "value": "#003366", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.yellow.30}" + "value": "{color.blue.70}" }, - "name": "pf-t--global--dark--color--favorite--100", + "name": "pf-t--global--dark--color--brand--subtle--100", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "favorite", - "state": "100" + "subitem": "brand", + "state": "subtle" }, "path": [ "global", "dark", "color", - "favorite", + "brand", + "subtle", "100" ], "references": [ { "type": "color", - "value": "#ffcc17", + "value": "#003366", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffcc17" + "value": "#003366" }, - "name": "pf-t--color--yellow--30", + "name": "pf-t--color--blue--70", "attributes": { "category": "color", - "type": "yellow", - "item": "30" + "type": "blue", + "item": "70" }, "path": [ "color", - "yellow", - "30" + "blue", + "70" ] } ] } }, - "pf-t--global--dark--color--favorite--200": { + "pf-t--global--dark--color--brand--subtle--200": { "dark": { "type": "color", - "value": "#ffe072", + "value": "#004d99", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.yellow.20}" + "value": "{color.blue.60}" }, - "name": "pf-t--global--dark--color--favorite--200", + "name": "pf-t--global--dark--color--brand--subtle--200", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "favorite", - "state": "200" + "subitem": "brand", + "state": "subtle" }, "path": [ "global", "dark", "color", - "favorite", + "brand", + "subtle", "200" ], "references": [ { "type": "color", - "value": "#ffe072", + "value": "#004d99", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffe072" + "value": "#004d99" }, - "name": "pf-t--color--yellow--20", + "name": "pf-t--color--blue--60", "attributes": { "category": "color", - "type": "yellow", - "item": "20" + "type": "blue", + "item": "60" }, "path": [ "color", - "yellow", - "20" + "blue", + "60" ] } ] } }, - "pf-t--global--dark--color--severity--undefined--100": { + "pf-t--global--dark--color--brand--subtle--300": { "dark": { "type": "color", - "value": "#a3a3a3", + "value": "#92c5f9", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.40}" + "value": "{color.blue.30}" }, - "name": "pf-t--global--dark--color--severity--undefined--100", + "name": "pf-t--global--dark--color--brand--subtle--300", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "severity", - "state": "undefined" + "subitem": "brand", + "state": "subtle" }, "path": [ "global", "dark", "color", - "severity", - "undefined", - "100" + "brand", + "subtle", + "300" ], "references": [ { "type": "color", - "value": "#a3a3a3", + "value": "#92c5f9", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#a3a3a3" + "value": "#92c5f9" }, - "name": "pf-t--color--gray--40", + "name": "pf-t--color--blue--30", "attributes": { "category": "color", - "type": "gray", - "item": "40" + "type": "blue", + "item": "30" }, "path": [ "color", - "gray", - "40" + "blue", + "30" ] } ] } }, - "pf-t--global--dark--color--severity--none--100": { + "pf-t--global--dark--color--disabled--100": { "dark": { "type": "color", - "value": "#92c5f9", + "value": "#a3a3a3", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.blue.30}" + "value": "{color.gray.40}" }, - "name": "pf-t--global--dark--color--severity--none--100", + "name": "pf-t--global--dark--color--disabled--100", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "severity", - "state": "none" + "subitem": "disabled", + "state": "100" }, "path": [ "global", "dark", "color", - "severity", - "none", + "disabled", "100" ], "references": [ { "type": "color", - "value": "#92c5f9", + "value": "#a3a3a3", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#92c5f9" + "value": "#a3a3a3" }, - "name": "pf-t--color--blue--30", + "name": "pf-t--color--gray--40", "attributes": { "category": "color", - "type": "blue", - "item": "30" + "type": "gray", + "item": "40" }, "path": [ "color", - "blue", - "30" + "gray", + "40" ] } ] } }, - "pf-t--global--dark--color--severity--minor--100": { + "pf-t--global--dark--color--disabled--200": { "dark": { "type": "color", - "value": "#c7c7c7", + "value": "#707070", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.30}" + "value": "{color.gray.50}" }, - "name": "pf-t--global--dark--color--severity--minor--100", + "name": "pf-t--global--dark--color--disabled--200", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "severity", - "state": "minor" + "subitem": "disabled", + "state": "200" }, "path": [ "global", "dark", "color", - "severity", - "minor", - "100" + "disabled", + "200" ], "references": [ { "type": "color", - "value": "#c7c7c7", + "value": "#707070", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#c7c7c7" + "value": "#707070" }, - "name": "pf-t--color--gray--30", + "name": "pf-t--color--gray--50", "attributes": { "category": "color", "type": "gray", - "item": "30" + "item": "50" }, "path": [ "color", "gray", - "30" + "50" ] } ] } }, - "pf-t--global--dark--color--severity--moderate--100": { + "pf-t--global--dark--color--disabled--300": { "dark": { "type": "color", - "value": "#ffcc17", + "value": "#383838", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.yellow.30}" + "value": "{color.gray.70}" }, - "name": "pf-t--global--dark--color--severity--moderate--100", + "name": "pf-t--global--dark--color--disabled--300", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "severity", - "state": "moderate" + "subitem": "disabled", + "state": "300" }, "path": [ "global", "dark", "color", - "severity", - "moderate", - "100" + "disabled", + "300" ], "references": [ { "type": "color", - "value": "#ffcc17", + "value": "#383838", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffcc17" + "value": "#383838" }, - "name": "pf-t--color--yellow--30", + "name": "pf-t--color--gray--70", "attributes": { "category": "color", - "type": "yellow", - "item": "30" + "type": "gray", + "item": "70" }, "path": [ "color", - "yellow", - "30" + "gray", + "70" ] } ] } }, - "pf-t--global--dark--color--severity--important--100": { + "pf-t--global--dark--color--disabled--400": { "dark": { "type": "color", - "value": "#f5921b", + "value": "#1f1f1f", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.orange.40}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--dark--color--severity--important--100", + "name": "pf-t--global--dark--color--disabled--400", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "severity", - "state": "important" + "subitem": "disabled", + "state": "400" }, "path": [ "global", "dark", "color", - "severity", - "important", - "100" + "disabled", + "400" ], "references": [ { "type": "color", - "value": "#f5921b", + "value": "#1f1f1f", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#f5921b" + "value": "#1f1f1f" }, - "name": "pf-t--color--orange--40", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "orange", - "item": "40" + "type": "gray", + "item": "90" }, "path": [ "color", - "orange", - "40" + "gray", + "90" ] } ] } }, - "pf-t--global--dark--color--severity--critical--100": { + "pf-t--global--dark--color--favorite--100": { "dark": { "type": "color", - "value": "#f0561d", + "value": "#ffcc17", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.red-orange.50}" + "value": "{color.yellow.30}" }, - "name": "pf-t--global--dark--color--severity--critical--100", + "name": "pf-t--global--dark--color--favorite--100", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "severity", - "state": "critical" + "subitem": "favorite", + "state": "100" }, "path": [ "global", "dark", "color", - "severity", - "critical", + "favorite", "100" ], "references": [ { "type": "color", - "value": "#f0561d", + "value": "#ffcc17", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#f0561d" + "value": "#ffcc17" }, - "name": "pf-t--color--red-orange--50", + "name": "pf-t--color--yellow--30", "attributes": { "category": "color", - "type": "red-orange", - "item": "50" + "type": "yellow", + "item": "30" }, "path": [ "color", - "red-orange", - "50" + "yellow", + "30" ] } ] } }, - "pf-t--global--dark--color--severity--critical--200": { + "pf-t--global--dark--color--favorite--200": { "dark": { "type": "color", - "value": "#f4784a", + "value": "#ffe072", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.red-orange.40}" + "value": "{color.yellow.20}" }, - "name": "pf-t--global--dark--color--severity--critical--200", + "name": "pf-t--global--dark--color--favorite--200", "attributes": { "category": "global", "type": "dark", "item": "color", - "subitem": "severity", - "state": "critical" + "subitem": "favorite", + "state": "200" }, "path": [ "global", "dark", "color", - "severity", - "critical", + "favorite", "200" ], "references": [ { "type": "color", - "value": "#f4784a", + "value": "#ffe072", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#f4784a" + "value": "#ffe072" }, - "name": "pf-t--color--red-orange--40", + "name": "pf-t--color--yellow--20", "attributes": { "category": "color", - "type": "red-orange", - "item": "40" + "type": "yellow", + "item": "20" }, "path": [ "color", - "red-orange", - "40" + "yellow", + "20" ] } ] @@ -49039,6 +52075,363 @@ ] } }, + "pf-t--global--dark--color--severity--undefined--100": { + "dark": { + "type": "color", + "value": "#a3a3a3", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.40}" + }, + "name": "pf-t--global--dark--color--severity--undefined--100", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "severity", + "state": "undefined" + }, + "path": [ + "global", + "dark", + "color", + "severity", + "undefined", + "100" + ], + "references": [ + { + "type": "color", + "value": "#a3a3a3", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#a3a3a3" + }, + "name": "pf-t--color--gray--40", + "attributes": { + "category": "color", + "type": "gray", + "item": "40" + }, + "path": [ + "color", + "gray", + "40" + ] + } + ] + } + }, + "pf-t--global--dark--color--severity--none--100": { + "dark": { + "type": "color", + "value": "#92c5f9", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.30}" + }, + "name": "pf-t--global--dark--color--severity--none--100", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "severity", + "state": "none" + }, + "path": [ + "global", + "dark", + "color", + "severity", + "none", + "100" + ], + "references": [ + { + "type": "color", + "value": "#92c5f9", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#92c5f9" + }, + "name": "pf-t--color--blue--30", + "attributes": { + "category": "color", + "type": "blue", + "item": "30" + }, + "path": [ + "color", + "blue", + "30" + ] + } + ] + } + }, + "pf-t--global--dark--color--severity--minor--100": { + "dark": { + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.30}" + }, + "name": "pf-t--global--dark--color--severity--minor--100", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "severity", + "state": "minor" + }, + "path": [ + "global", + "dark", + "color", + "severity", + "minor", + "100" + ], + "references": [ + { + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#c7c7c7" + }, + "name": "pf-t--color--gray--30", + "attributes": { + "category": "color", + "type": "gray", + "item": "30" + }, + "path": [ + "color", + "gray", + "30" + ] + } + ] + } + }, + "pf-t--global--dark--color--severity--moderate--100": { + "dark": { + "type": "color", + "value": "#ffcc17", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.yellow.30}" + }, + "name": "pf-t--global--dark--color--severity--moderate--100", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "severity", + "state": "moderate" + }, + "path": [ + "global", + "dark", + "color", + "severity", + "moderate", + "100" + ], + "references": [ + { + "type": "color", + "value": "#ffcc17", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffcc17" + }, + "name": "pf-t--color--yellow--30", + "attributes": { + "category": "color", + "type": "yellow", + "item": "30" + }, + "path": [ + "color", + "yellow", + "30" + ] + } + ] + } + }, + "pf-t--global--dark--color--severity--important--100": { + "dark": { + "type": "color", + "value": "#f5921b", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.orange.40}" + }, + "name": "pf-t--global--dark--color--severity--important--100", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "severity", + "state": "important" + }, + "path": [ + "global", + "dark", + "color", + "severity", + "important", + "100" + ], + "references": [ + { + "type": "color", + "value": "#f5921b", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#f5921b" + }, + "name": "pf-t--color--orange--40", + "attributes": { + "category": "color", + "type": "orange", + "item": "40" + }, + "path": [ + "color", + "orange", + "40" + ] + } + ] + } + }, + "pf-t--global--dark--color--severity--critical--100": { + "dark": { + "type": "color", + "value": "#f0561d", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red-orange.50}" + }, + "name": "pf-t--global--dark--color--severity--critical--100", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "severity", + "state": "critical" + }, + "path": [ + "global", + "dark", + "color", + "severity", + "critical", + "100" + ], + "references": [ + { + "type": "color", + "value": "#f0561d", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#f0561d" + }, + "name": "pf-t--color--red-orange--50", + "attributes": { + "category": "color", + "type": "red-orange", + "item": "50" + }, + "path": [ + "color", + "red-orange", + "50" + ] + } + ] + } + }, + "pf-t--global--dark--color--severity--critical--200": { + "dark": { + "type": "color", + "value": "#f4784a", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red-orange.40}" + }, + "name": "pf-t--global--dark--color--severity--critical--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "severity", + "state": "critical" + }, + "path": [ + "global", + "dark", + "color", + "severity", + "critical", + "200" + ], + "references": [ + { + "type": "color", + "value": "#f4784a", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#f4784a" + }, + "name": "pf-t--color--red-orange--40", + "attributes": { + "category": "color", + "type": "red-orange", + "item": "40" + }, + "path": [ + "color", + "red-orange", + "40" + ] + } + ] + } + }, "pf-t--global--dark--color--nonstatus--red--100": { "dark": { "type": "color", @@ -57922,6 +61315,33 @@ ] } }, + "pf-t--chart--global--fill--opacity--area": { + "dark": { + "type": "number", + "value": 20, + "filePath": "tokens/dark/charts.dark.json", + "isSource": true, + "original": { + "type": "number", + "value": 20 + }, + "name": "pf-t--chart--global--fill--opacity--area", + "attributes": { + "category": "chart", + "type": "global", + "item": "fill", + "subitem": "opacity", + "state": "area" + }, + "path": [ + "chart", + "global", + "fill", + "opacity", + "area" + ] + } + }, "pf-t--chart--global--warning--color--100": { "dark": { "type": "color", @@ -58245,6 +61665,29 @@ ] } }, + "pf-t--chart--global--stroke-line-cap": { + "dark": { + "type": "string", + "value": "round", + "filePath": "tokens/dark/charts.dark.json", + "isSource": true, + "original": { + "type": "string", + "value": "round" + }, + "name": "pf-t--chart--global--stroke-line-cap", + "attributes": { + "category": "chart", + "type": "global", + "item": "stroke-line-cap" + }, + "path": [ + "chart", + "global", + "stroke-line-cap" + ] + } + }, "pf-t--chart--global--layout--padding": { "dark": { "type": "number", @@ -58320,29 +61763,6 @@ ] } }, - "pf-t--chart--global--stroke-line-cap": { - "dark": { - "type": "string", - "value": "round", - "filePath": "tokens/dark/charts.dark.json", - "isSource": true, - "original": { - "type": "string", - "value": "round" - }, - "name": "pf-t--chart--global--stroke-line-cap", - "attributes": { - "category": "chart", - "type": "global", - "item": "stroke-line-cap" - }, - "path": [ - "chart", - "global", - "stroke-line-cap" - ] - } - }, "pf-t--chart--global--label--padding": { "dark": { "type": "number", diff --git a/packages/module/patternfly-docs/content/token-layers-default.json b/packages/module/patternfly-docs/content/token-layers-default.json index b1fbea7..f9a7a4e 100644 --- a/packages/module/patternfly-docs/content/token-layers-default.json +++ b/packages/module/patternfly-docs/content/token-layers-default.json @@ -313,99 +313,106 @@ ] } }, - "pf-t--global--icon--color--on-brand--default": { + "pf-t--global--icon--color--brand--accent--default": { "default": { - "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "description": "Use as the color for icons that convey your brand and/or are paired with branded text color.", "type": "color", - "value": "#ffffff", + "value": "#ee0000", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "description": "Use as the color for icons that convey your brand and/or are paired with branded text color.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.brand.accent.default}" }, - "name": "pf-t--global--icon--color--on-brand--default", + "name": "pf-t--global--icon--color--brand--accent--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "on-brand", - "state": "default" + "subitem": "brand", + "state": "accent" }, "path": [ "global", "icon", "color", - "on-brand", + "brand", + "accent", "default" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use this color for elements that you want to reinforce your brand", "type": "color", - "value": "#ffffff", + "value": "#ee0000", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use this color for elements that you want to reinforce your brand", "type": "color", - "value": "{global.icon.color.300}" + "value": "{global.color.brand.accent.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--brand--accent--default", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "default" }, "path": [ "global", - "icon", "color", - "inverse" + "brand", + "accent", + "default" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#ee0000", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.red.50}" }, - "name": "pf-t--global--icon--color--300", + "name": "pf-t--global--color--brand--accent--100", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "300" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "100" }, "path": [ "global", - "icon", "color", - "300" + "brand", + "accent", + "100" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#ee0000", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#ee0000" }, - "name": "pf-t--color--white", + "name": "pf-t--color--red--50", "attributes": { "category": "color", - "type": "white" + "type": "red", + "item": "50" }, "path": [ "color", - "white" + "red", + "50" ] } ] @@ -415,99 +422,106 @@ ] } }, - "pf-t--global--icon--color--on-brand--hover": { + "pf-t--global--icon--color--brand--accent--hover": { "default": { - "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.", "type": "color", - "value": "#ffffff", + "value": "#a60000", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.brand.accent.hover}" }, - "name": "pf-t--global--icon--color--on-brand--hover", + "name": "pf-t--global--icon--color--brand--accent--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "on-brand", - "state": "hover" + "subitem": "brand", + "state": "accent" }, "path": [ "global", "icon", "color", - "on-brand", + "brand", + "accent", "hover" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the hover state for elements that have a branded background color", "type": "color", - "value": "#ffffff", + "value": "#a60000", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the hover state for elements that have a branded background color", "type": "color", - "value": "{global.icon.color.300}" + "value": "{global.color.brand.accent.200}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--brand--accent--hover", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "hover" }, "path": [ "global", - "icon", "color", - "inverse" + "brand", + "accent", + "hover" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#a60000", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.red.60}" }, - "name": "pf-t--global--icon--color--300", + "name": "pf-t--global--color--brand--accent--200", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "300" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "200" }, "path": [ "global", - "icon", "color", - "300" + "brand", + "accent", + "200" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#a60000", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#a60000" }, - "name": "pf-t--color--white", + "name": "pf-t--color--red--60", "attributes": { "category": "color", - "type": "white" + "type": "red", + "item": "60" }, "path": [ "color", - "white" + "red", + "60" ] } ] @@ -517,99 +531,106 @@ ] } }, - "pf-t--global--icon--color--on-brand--clicked": { + "pf-t--global--icon--color--brand--accent--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.", "type": "color", - "value": "#ffffff", + "value": "#a60000", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.brand.accent.clicked}" }, - "name": "pf-t--global--icon--color--on-brand--clicked", + "name": "pf-t--global--icon--color--brand--accent--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "on-brand", - "state": "clicked" + "subitem": "brand", + "state": "accent" }, "path": [ "global", "icon", "color", - "on-brand", + "brand", + "accent", "clicked" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the clicked state for elements that have a brand background color", "type": "color", - "value": "#ffffff", + "value": "#a60000", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the clicked state for elements that have a brand background color", "type": "color", - "value": "{global.icon.color.300}" + "value": "{global.color.brand.accent.200}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--brand--accent--clicked", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "clicked" }, "path": [ "global", - "icon", "color", - "inverse" + "brand", + "accent", + "clicked" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#a60000", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.red.60}" }, - "name": "pf-t--global--icon--color--300", + "name": "pf-t--global--color--brand--accent--200", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "300" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "200" }, "path": [ "global", - "icon", "color", - "300" + "brand", + "accent", + "200" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#a60000", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#a60000" }, - "name": "pf-t--color--white", + "name": "pf-t--color--red--60", "attributes": { "category": "color", - "type": "white" + "type": "red", + "item": "60" }, "path": [ "color", - "white" + "red", + "60" ] } ] @@ -619,101 +640,99 @@ ] } }, - "pf-t--global--icon--color--favorite--default": { + "pf-t--global--icon--color--on-brand--default": { "default": { - "description": "Use as the icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#ffcc17", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.color.favorite.default}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--favorite--default", + "name": "pf-t--global--icon--color--on-brand--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "favorite", + "subitem": "on-brand", "state": "default" }, "path": [ "global", "icon", "color", - "favorite", + "on-brand", "default" ], "references": [ { - "description": "Use as the default color for elements that have been favorited", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#ffcc17", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for elements that have been favorited", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.color.favorite.100}" + "value": "{global.icon.color.300}" }, - "name": "pf-t--global--color--favorite--default", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "favorite", - "subitem": "default" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "favorite", - "default" + "inverse" ], "references": [ { "type": "color", - "value": "#ffcc17", + "value": "#ffffff", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.yellow.30}" + "value": "{color.white}" }, - "name": "pf-t--global--color--favorite--100", + "name": "pf-t--global--icon--color--300", "attributes": { "category": "global", - "type": "color", - "item": "favorite", - "subitem": "100" + "type": "icon", + "item": "color", + "subitem": "300" }, "path": [ "global", + "icon", "color", - "favorite", - "100" + "300" ], "references": [ { "type": "color", - "value": "#ffcc17", + "value": "#ffffff", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffcc17" + "value": "#ffffff" }, - "name": "pf-t--color--yellow--30", + "name": "pf-t--color--white", "attributes": { "category": "color", - "type": "yellow", - "item": "30" + "type": "white" }, "path": [ "color", - "yellow", - "30" + "white" ] } ] @@ -723,101 +742,99 @@ ] } }, - "pf-t--global--icon--color--favorite--hover": { + "pf-t--global--icon--color--on-brand--hover": { "default": { - "description": "Use as the hover state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#dca614", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.color.favorite.hover}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--favorite--hover", + "name": "pf-t--global--icon--color--on-brand--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "favorite", + "subitem": "on-brand", "state": "hover" }, "path": [ "global", "icon", "color", - "favorite", + "on-brand", "hover" ], "references": [ { - "description": "Use as the hover state for elements that have been favorited", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#dca614", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state for elements that have been favorited", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.color.favorite.200}" + "value": "{global.icon.color.300}" }, - "name": "pf-t--global--color--favorite--hover", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "favorite", - "subitem": "hover" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "favorite", - "hover" + "inverse" ], "references": [ { "type": "color", - "value": "#dca614", + "value": "#ffffff", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.yellow.40}" + "value": "{color.white}" }, - "name": "pf-t--global--color--favorite--200", + "name": "pf-t--global--icon--color--300", "attributes": { "category": "global", - "type": "color", - "item": "favorite", - "subitem": "200" + "type": "icon", + "item": "color", + "subitem": "300" }, "path": [ "global", + "icon", "color", - "favorite", - "200" + "300" ], "references": [ { "type": "color", - "value": "#dca614", + "value": "#ffffff", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#dca614" + "value": "#ffffff" }, - "name": "pf-t--color--yellow--40", + "name": "pf-t--color--white", "attributes": { "category": "color", - "type": "yellow", - "item": "40" + "type": "white" }, "path": [ "color", - "yellow", - "40" + "white" ] } ] @@ -827,101 +844,99 @@ ] } }, - "pf-t--global--icon--color--favorite--clicked": { + "pf-t--global--icon--color--on-brand--clicked": { "default": { - "description": "Use as the clicked state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#dca614", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.color.favorite.clicked}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--favorite--clicked", + "name": "pf-t--global--icon--color--on-brand--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "favorite", + "subitem": "on-brand", "state": "clicked" }, "path": [ "global", "icon", "color", - "favorite", + "on-brand", "clicked" ], "references": [ { - "description": "Use as the clicked state for elements that have been favorited", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#dca614", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state for elements that have been favorited", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.color.favorite.200}" + "value": "{global.icon.color.300}" }, - "name": "pf-t--global--color--favorite--clicked", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "favorite", - "subitem": "clicked" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "favorite", - "clicked" + "inverse" ], "references": [ { "type": "color", - "value": "#dca614", + "value": "#ffffff", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.yellow.40}" + "value": "{color.white}" }, - "name": "pf-t--global--color--favorite--200", + "name": "pf-t--global--icon--color--300", "attributes": { "category": "global", - "type": "color", - "item": "favorite", - "subitem": "200" + "type": "icon", + "item": "color", + "subitem": "300" }, "path": [ "global", + "icon", "color", - "favorite", - "200" + "300" ], "references": [ { "type": "color", - "value": "#dca614", + "value": "#ffffff", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#dca614" + "value": "#ffffff" }, - "name": "pf-t--color--yellow--40", + "name": "pf-t--color--white", "attributes": { "category": "color", - "type": "yellow", - "item": "40" + "type": "white" }, "path": [ "color", - "yellow", - "40" + "white" ] } ] @@ -931,106 +946,100 @@ ] } }, - "pf-t--global--icon--color--status--success--default": { + "pf-t--global--icon--color--on-brand--accent--default": { "default": { - "description": "Use as the default color for text that communicates a success status.", + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#3d7317", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for text that communicates a success status.", + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.color.status.success.default}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--success--default", + "name": "pf-t--global--icon--color--on-brand--accent--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "success" + "subitem": "on-brand", + "state": "accent" }, "path": [ "global", "icon", "color", - "status", - "success", + "on-brand", + "accent", "default" ], "references": [ { - "description": "Use as the default color for any element communicating a favorable outcome, like a success status for alert, progress, select.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#3d7317", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for any element communicating a favorable outcome, like a success status for alert, progress, select.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.color.status.success.100}" + "value": "{global.icon.color.300}" }, - "name": "pf-t--global--color--status--success--default", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "status", - "subitem": "success", - "state": "default" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "status", - "success", - "default" + "inverse" ], "references": [ { "type": "color", - "value": "#3d7317", + "value": "#ffffff", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.green.60}" + "value": "{color.white}" }, - "name": "pf-t--global--color--status--success--100", + "name": "pf-t--global--icon--color--300", "attributes": { "category": "global", - "type": "color", - "item": "status", - "subitem": "success", - "state": "100" + "type": "icon", + "item": "color", + "subitem": "300" }, "path": [ "global", + "icon", "color", - "status", - "success", - "100" + "300" ], "references": [ { "type": "color", - "value": "#3d7317", + "value": "#ffffff", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#3d7317" + "value": "#ffffff" }, - "name": "pf-t--color--green--60", + "name": "pf-t--color--white", "attributes": { "category": "color", - "type": "green", - "item": "60" + "type": "white" }, "path": [ "color", - "green", - "60" + "white" ] } ] @@ -1040,106 +1049,100 @@ ] } }, - "pf-t--global--icon--color--status--success--hover": { + "pf-t--global--icon--color--on-brand--accent--hover": { "default": { - "description": "Use as the hover state color for text that communicates a success status.", + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#204d00", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for text that communicates a success status.", + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.color.status.success.hover}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--success--hover", + "name": "pf-t--global--icon--color--on-brand--accent--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "success" + "subitem": "on-brand", + "state": "accent" }, "path": [ "global", "icon", "color", - "status", - "success", + "on-brand", + "accent", "hover" ], "references": [ { - "description": "Use as the hover state for any element that conveys a success status.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#204d00", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state for any element that conveys a success status.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.color.status.success.200}" + "value": "{global.icon.color.300}" }, - "name": "pf-t--global--color--status--success--hover", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "status", - "subitem": "success", - "state": "hover" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "status", - "success", - "hover" + "inverse" ], "references": [ { "type": "color", - "value": "#204d00", + "value": "#ffffff", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.green.70}" + "value": "{color.white}" }, - "name": "pf-t--global--color--status--success--200", + "name": "pf-t--global--icon--color--300", "attributes": { "category": "global", - "type": "color", - "item": "status", - "subitem": "success", - "state": "200" + "type": "icon", + "item": "color", + "subitem": "300" }, "path": [ "global", + "icon", "color", - "status", - "success", - "200" + "300" ], "references": [ { "type": "color", - "value": "#204d00", + "value": "#ffffff", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#204d00" + "value": "#ffffff" }, - "name": "pf-t--color--green--70", + "name": "pf-t--color--white", "attributes": { "category": "color", - "type": "green", - "item": "70" + "type": "white" }, "path": [ "color", - "green", - "70" + "white" ] } ] @@ -1149,106 +1152,100 @@ ] } }, - "pf-t--global--icon--color--status--success--clicked": { + "pf-t--global--icon--color--on-brand--accent--clicked": { "default": { - "description": "Use as the clicked state color for text that communicates a success status.", + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#204d00", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for text that communicates a success status.", + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.color.status.success.clicked}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--success--clicked", + "name": "pf-t--global--icon--color--on-brand--accent--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "success" + "subitem": "on-brand", + "state": "accent" }, "path": [ "global", "icon", "color", - "status", - "success", + "on-brand", + "accent", "clicked" ], "references": [ { - "description": "Use as the clicked state for any element that conveys a success status.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#204d00", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state for any element that conveys a success status.", + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "{global.color.status.success.200}" + "value": "{global.icon.color.300}" }, - "name": "pf-t--global--color--status--success--clicked", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "status", - "subitem": "success", - "state": "clicked" + "type": "icon", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "icon", "color", - "status", - "success", - "clicked" + "inverse" ], "references": [ { "type": "color", - "value": "#204d00", + "value": "#ffffff", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.green.70}" + "value": "{color.white}" }, - "name": "pf-t--global--color--status--success--200", + "name": "pf-t--global--icon--color--300", "attributes": { "category": "global", - "type": "color", - "item": "status", - "subitem": "success", - "state": "200" + "type": "icon", + "item": "color", + "subitem": "300" }, "path": [ "global", + "icon", "color", - "status", - "success", - "200" + "300" ], "references": [ { "type": "color", - "value": "#204d00", + "value": "#ffffff", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#204d00" + "value": "#ffffff" }, - "name": "pf-t--color--green--70", + "name": "pf-t--color--white", "attributes": { "category": "color", - "type": "green", - "item": "70" + "type": "white" }, "path": [ "color", - "green", - "70" + "white" ] } ] @@ -1258,100 +1255,102 @@ ] } }, - "pf-t--global--icon--color--status--on-success--default": { + "pf-t--global--icon--color--on-brand--subtle--default": { "default": { - "description": "Use as the default color for icons that are placed on a success background color and/or are paired with on-success colored text", + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a success background color and/or are paired with on-success colored text", + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--status--on-success--default", + "name": "pf-t--global--icon--color--on-brand--subtle--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "on-success" + "subitem": "on-brand", + "state": "subtle" }, "path": [ "global", "icon", "color", - "status", - "on-success", + "on-brand", + "subtle", "default" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "{global.icon.color.300}" + "value": "{global.icon.color.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "icon", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--icon--color--300", + "name": "pf-t--global--icon--color--100", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "300" + "subitem": "100" }, "path": [ "global", "icon", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#1f1f1f" }, - "name": "pf-t--color--white", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "white" + "type": "gray", + "item": "90" }, "path": [ "color", - "white" + "gray", + "90" ] } ] @@ -1361,100 +1360,102 @@ ] } }, - "pf-t--global--icon--color--status--on-success--hover": { + "pf-t--global--icon--color--on-brand--subtle--hover": { "default": { - "description": "Use as the hover state color for icons that are placed on a success background color and/or are paired with on-success colored text", + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on a success background color and/or are paired with on-success colored text", + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--status--on-success--hover", + "name": "pf-t--global--icon--color--on-brand--subtle--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "on-success" + "subitem": "on-brand", + "state": "subtle" }, "path": [ "global", "icon", "color", - "status", - "on-success", + "on-brand", + "subtle", "hover" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "{global.icon.color.300}" + "value": "{global.icon.color.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "icon", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--icon--color--300", + "name": "pf-t--global--icon--color--100", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "300" + "subitem": "100" }, "path": [ "global", "icon", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#1f1f1f" }, - "name": "pf-t--color--white", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "white" + "type": "gray", + "item": "90" }, "path": [ "color", - "white" + "gray", + "90" ] } ] @@ -1464,100 +1465,102 @@ ] } }, - "pf-t--global--icon--color--status--on-success--clicked": { + "pf-t--global--icon--color--on-brand--subtle--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed on a success background color and/or are paired with on-success colored text", + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a success background color and/or are paired with on-success colored text", + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--status--on-success--clicked", + "name": "pf-t--global--icon--color--on-brand--subtle--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "on-success" + "subitem": "on-brand", + "state": "subtle" }, "path": [ "global", "icon", "color", - "status", - "on-success", + "on-brand", + "subtle", "clicked" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "{global.icon.color.300}" + "value": "{global.icon.color.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "icon", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--icon--color--300", + "name": "pf-t--global--icon--color--100", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "300" + "subitem": "100" }, "path": [ "global", "icon", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#1f1f1f" }, - "name": "pf-t--color--white", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "white" + "type": "gray", + "item": "90" }, "path": [ "color", - "white" + "gray", + "90" ] } ] @@ -1567,79 +1570,103 @@ ] } }, - "pf-t--global--icon--color--status--warning--default": { + "pf-t--global--icon--color--favorite--default": { "default": { - "description": "Use as the default color for text that communicates a warning status.", + "description": "Use as the icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", "type": "color", - "value": "#dca614", + "value": "#ffcc17", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for text that communicates a warning status.", + "description": "Use as the icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", "type": "color", - "value": "{global.color.status.warning.200}" + "value": "{global.color.favorite.default}" }, - "name": "pf-t--global--icon--color--status--warning--default", + "name": "pf-t--global--icon--color--favorite--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "warning" + "subitem": "favorite", + "state": "default" }, "path": [ "global", "icon", "color", - "status", - "warning", + "favorite", "default" ], "references": [ { + "description": "Use as the default color for elements that have been favorited", "type": "color", - "value": "#dca614", - "filePath": "tokens/default/base.json", + "value": "#ffcc17", + "filePath": "tokens/default/semantic.json", "isSource": true, "original": { + "description": "Use as the default color for elements that have been favorited", "type": "color", - "value": "{color.yellow.40}" + "value": "{global.color.favorite.100}" }, - "name": "pf-t--global--color--status--warning--200", + "name": "pf-t--global--color--favorite--default", "attributes": { "category": "global", "type": "color", - "item": "status", - "subitem": "warning", - "state": "200" + "item": "favorite", + "subitem": "default" }, "path": [ "global", "color", - "status", - "warning", - "200" + "favorite", + "default" ], "references": [ { "type": "color", - "value": "#dca614", - "filePath": "tokens/default/palette.color.json", + "value": "#ffcc17", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#dca614" + "value": "{color.yellow.30}" }, - "name": "pf-t--color--yellow--40", + "name": "pf-t--global--color--favorite--100", "attributes": { - "category": "color", - "type": "yellow", - "item": "40" + "category": "global", + "type": "color", + "item": "favorite", + "subitem": "100" }, "path": [ + "global", "color", - "yellow", - "40" + "favorite", + "100" + ], + "references": [ + { + "type": "color", + "value": "#ffcc17", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffcc17" + }, + "name": "pf-t--color--yellow--30", + "attributes": { + "category": "color", + "type": "yellow", + "item": "30" + }, + "path": [ + "color", + "yellow", + "30" + ] + } ] } ] @@ -1647,79 +1674,103 @@ ] } }, - "pf-t--global--icon--color--status--warning--hover": { + "pf-t--global--icon--color--favorite--hover": { "default": { - "description": "Use as the hover state color for text that communicates a warning status.", + "description": "Use as the hover state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", "type": "color", - "value": "#b98412", + "value": "#dca614", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for text that communicates a warning status.", + "description": "Use as the hover state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", "type": "color", - "value": "{global.color.status.warning.300}" + "value": "{global.color.favorite.hover}" }, - "name": "pf-t--global--icon--color--status--warning--hover", + "name": "pf-t--global--icon--color--favorite--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "warning" + "subitem": "favorite", + "state": "hover" }, "path": [ "global", "icon", "color", - "status", - "warning", + "favorite", "hover" ], "references": [ { + "description": "Use as the hover state for elements that have been favorited", "type": "color", - "value": "#b98412", - "filePath": "tokens/default/base.json", + "value": "#dca614", + "filePath": "tokens/default/semantic.json", "isSource": true, "original": { + "description": "Use as the hover state for elements that have been favorited", "type": "color", - "value": "{color.yellow.50}" + "value": "{global.color.favorite.200}" }, - "name": "pf-t--global--color--status--warning--300", + "name": "pf-t--global--color--favorite--hover", "attributes": { "category": "global", "type": "color", - "item": "status", - "subitem": "warning", - "state": "300" + "item": "favorite", + "subitem": "hover" }, "path": [ "global", "color", - "status", - "warning", - "300" + "favorite", + "hover" ], "references": [ { "type": "color", - "value": "#b98412", - "filePath": "tokens/default/palette.color.json", + "value": "#dca614", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#b98412" + "value": "{color.yellow.40}" }, - "name": "pf-t--color--yellow--50", + "name": "pf-t--global--color--favorite--200", "attributes": { - "category": "color", - "type": "yellow", - "item": "50" + "category": "global", + "type": "color", + "item": "favorite", + "subitem": "200" }, "path": [ + "global", "color", - "yellow", - "50" + "favorite", + "200" + ], + "references": [ + { + "type": "color", + "value": "#dca614", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#dca614" + }, + "name": "pf-t--color--yellow--40", + "attributes": { + "category": "color", + "type": "yellow", + "item": "40" + }, + "path": [ + "color", + "yellow", + "40" + ] + } ] } ] @@ -1727,79 +1778,103 @@ ] } }, - "pf-t--global--icon--color--status--warning--clicked": { + "pf-t--global--icon--color--favorite--clicked": { "default": { - "description": "Use as the clicked state color for text that communicates a warning status.", + "description": "Use as the clicked state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", "type": "color", - "value": "#b98412", + "value": "#dca614", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for text that communicates a warning status.", + "description": "Use as the clicked state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)", "type": "color", - "value": "{global.color.status.warning.300}" + "value": "{global.color.favorite.clicked}" }, - "name": "pf-t--global--icon--color--status--warning--clicked", + "name": "pf-t--global--icon--color--favorite--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "status", - "state": "warning" + "subitem": "favorite", + "state": "clicked" }, "path": [ "global", "icon", "color", - "status", - "warning", + "favorite", "clicked" ], "references": [ { + "description": "Use as the clicked state for elements that have been favorited", "type": "color", - "value": "#b98412", - "filePath": "tokens/default/base.json", + "value": "#dca614", + "filePath": "tokens/default/semantic.json", "isSource": true, "original": { + "description": "Use as the clicked state for elements that have been favorited", "type": "color", - "value": "{color.yellow.50}" + "value": "{global.color.favorite.200}" }, - "name": "pf-t--global--color--status--warning--300", + "name": "pf-t--global--color--favorite--clicked", "attributes": { "category": "global", "type": "color", - "item": "status", - "subitem": "warning", - "state": "300" + "item": "favorite", + "subitem": "clicked" }, "path": [ "global", "color", - "status", - "warning", - "300" + "favorite", + "clicked" ], "references": [ { "type": "color", - "value": "#b98412", - "filePath": "tokens/default/palette.color.json", + "value": "#dca614", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#b98412" + "value": "{color.yellow.40}" }, - "name": "pf-t--color--yellow--50", + "name": "pf-t--global--color--favorite--200", "attributes": { - "category": "color", - "type": "yellow", - "item": "50" + "category": "global", + "type": "color", + "item": "favorite", + "subitem": "200" }, "path": [ + "global", "color", - "yellow", - "50" + "favorite", + "200" + ], + "references": [ + { + "type": "color", + "value": "#dca614", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#dca614" + }, + "name": "pf-t--color--yellow--40", + "attributes": { + "category": "color", + "type": "yellow", + "item": "40" + }, + "path": [ + "color", + "yellow", + "40" + ] + } ] } ] @@ -1807,102 +1882,106 @@ ] } }, - "pf-t--global--icon--color--status--on-warning--default": { + "pf-t--global--icon--color--status--success--default": { "default": { - "description": "Use as the default color for icons that are placed on a warning background color and/or are paired with on-warning colored text", + "description": "Use as the default color for text that communicates a success status.", "type": "color", - "value": "#1f1f1f", + "value": "#3d7317", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a warning background color and/or are paired with on-warning colored text", + "description": "Use as the default color for text that communicates a success status.", "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.status.success.default}" }, - "name": "pf-t--global--icon--color--status--on-warning--default", + "name": "pf-t--global--icon--color--status--success--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-warning" + "state": "success" }, "path": [ "global", "icon", "color", "status", - "on-warning", + "success", "default" ], "references": [ { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", + "description": "Use as the default color for any element communicating a favorable outcome, like a success status for alert, progress, select.", "type": "color", - "value": "#1f1f1f", + "value": "#3d7317", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", + "description": "Use as the default color for any element communicating a favorable outcome, like a success status for alert, progress, select.", "type": "color", - "value": "{global.icon.color.100}" + "value": "{global.color.status.success.100}" }, - "name": "pf-t--global--icon--color--regular", + "name": "pf-t--global--color--status--success--default", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "regular" + "type": "color", + "item": "status", + "subitem": "success", + "state": "default" }, "path": [ "global", - "icon", "color", - "regular" + "status", + "success", + "default" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#3d7317", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.green.60}" }, - "name": "pf-t--global--icon--color--100", + "name": "pf-t--global--color--status--success--100", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "100" + "type": "color", + "item": "status", + "subitem": "success", + "state": "100" }, "path": [ "global", - "icon", "color", + "status", + "success", "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#3d7317", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#3d7317" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--green--60", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "green", + "item": "60" }, "path": [ "color", - "gray", - "90" + "green", + "60" ] } ] @@ -1912,424 +1991,105 @@ ] } }, - "pf-t--global--icon--color--status--on-warning--hover": { + "pf-t--global--icon--color--status--success--hover": { "default": { - "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", + "description": "Use as the hover state color for text that communicates a success status.", "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/default/semantic.json", - "isSource": true, - "original": { - "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", - "type": "color", - "value": "{global.icon.color.regular}" - }, - "name": "pf-t--global--icon--color--status--on-warning--hover", - "attributes": { - "category": "global", - "type": "icon", - "item": "color", - "subitem": "status", - "state": "on-warning" - }, - "path": [ - "global", - "icon", - "color", - "status", - "on-warning", - "hover" - ], - "references": [ - { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/default/semantic.json", - "isSource": true, - "original": { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", - "type": "color", - "value": "{global.icon.color.100}" - }, - "name": "pf-t--global--icon--color--regular", - "attributes": { - "category": "global", - "type": "icon", - "item": "color", - "subitem": "regular" - }, - "path": [ - "global", - "icon", - "color", - "regular" - ], - "references": [ - { - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/default/base.json", - "isSource": true, - "original": { - "type": "color", - "value": "{color.gray.90}" - }, - "name": "pf-t--global--icon--color--100", - "attributes": { - "category": "global", - "type": "icon", - "item": "color", - "subitem": "100" - }, - "path": [ - "global", - "icon", - "color", - "100" - ], - "references": [ - { - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/default/palette.color.json", - "isSource": true, - "original": { - "type": "color", - "value": "#1f1f1f" - }, - "name": "pf-t--color--gray--90", - "attributes": { - "category": "color", - "type": "gray", - "item": "90" - }, - "path": [ - "color", - "gray", - "90" - ] - } - ] - } - ] - } - ] - } - }, - "pf-t--global--icon--color--status--on-warning--clicked": { - "default": { - "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/default/semantic.json", - "isSource": true, - "original": { - "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", - "type": "color", - "value": "{global.icon.color.regular}" - }, - "name": "pf-t--global--icon--color--status--on-warning--clicked", - "attributes": { - "category": "global", - "type": "icon", - "item": "color", - "subitem": "status", - "state": "on-warning" - }, - "path": [ - "global", - "icon", - "color", - "status", - "on-warning", - "clicked" - ], - "references": [ - { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/default/semantic.json", - "isSource": true, - "original": { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", - "type": "color", - "value": "{global.icon.color.100}" - }, - "name": "pf-t--global--icon--color--regular", - "attributes": { - "category": "global", - "type": "icon", - "item": "color", - "subitem": "regular" - }, - "path": [ - "global", - "icon", - "color", - "regular" - ], - "references": [ - { - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/default/base.json", - "isSource": true, - "original": { - "type": "color", - "value": "{color.gray.90}" - }, - "name": "pf-t--global--icon--color--100", - "attributes": { - "category": "global", - "type": "icon", - "item": "color", - "subitem": "100" - }, - "path": [ - "global", - "icon", - "color", - "100" - ], - "references": [ - { - "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/default/palette.color.json", - "isSource": true, - "original": { - "type": "color", - "value": "#1f1f1f" - }, - "name": "pf-t--color--gray--90", - "attributes": { - "category": "color", - "type": "gray", - "item": "90" - }, - "path": [ - "color", - "gray", - "90" - ] - } - ] - } - ] - } - ] - } - }, - "pf-t--global--icon--color--status--danger--default": { - "default": { - "description": "Use as the default color for icons that convey danger, like in alerts or banners.", - "type": "color", - "value": "#b1380b", - "filePath": "tokens/default/semantic.json", - "isSource": true, - "original": { - "description": "Use as the default color for icons that convey danger, like in alerts or banners.", - "type": "color", - "value": "{global.color.status.danger.default}" - }, - "name": "pf-t--global--icon--color--status--danger--default", - "attributes": { - "category": "global", - "type": "icon", - "item": "color", - "subitem": "status", - "state": "danger" - }, - "path": [ - "global", - "icon", - "color", - "status", - "danger", - "default" - ], - "references": [ - { - "description": "Use as the default color for any element communicating a critical warning or error, like a danger status for alert, progress, select.", - "type": "color", - "value": "#b1380b", - "filePath": "tokens/default/semantic.json", - "isSource": true, - "original": { - "description": "Use as the default color for any element communicating a critical warning or error, like a danger status for alert, progress, select.", - "type": "color", - "value": "{global.color.status.danger.100}" - }, - "name": "pf-t--global--color--status--danger--default", - "attributes": { - "category": "global", - "type": "color", - "item": "status", - "subitem": "danger", - "state": "default" - }, - "path": [ - "global", - "color", - "status", - "danger", - "default" - ], - "references": [ - { - "type": "color", - "value": "#b1380b", - "filePath": "tokens/default/base.json", - "isSource": true, - "original": { - "type": "color", - "value": "{color.red-orange.60}" - }, - "name": "pf-t--global--color--status--danger--100", - "attributes": { - "category": "global", - "type": "color", - "item": "status", - "subitem": "danger", - "state": "100" - }, - "path": [ - "global", - "color", - "status", - "danger", - "100" - ], - "references": [ - { - "type": "color", - "value": "#b1380b", - "filePath": "tokens/default/palette.color.json", - "isSource": true, - "original": { - "type": "color", - "value": "#b1380b" - }, - "name": "pf-t--color--red-orange--60", - "attributes": { - "category": "color", - "type": "red-orange", - "item": "60" - }, - "path": [ - "color", - "red-orange", - "60" - ] - } - ] - } - ] - } - ] - } - }, - "pf-t--global--icon--color--status--danger--hover": { - "default": { - "description": "Use as the hover state for icons that indicate danger.", - "type": "color", - "value": "#731f00", + "value": "#204d00", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state for icons that indicate danger.", + "description": "Use as the hover state color for text that communicates a success status.", "type": "color", - "value": "{global.color.status.danger.hover}" + "value": "{global.color.status.success.hover}" }, - "name": "pf-t--global--icon--color--status--danger--hover", + "name": "pf-t--global--icon--color--status--success--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "danger" + "state": "success" }, "path": [ "global", "icon", "color", "status", - "danger", + "success", "hover" ], "references": [ { - "description": "Use as the hover state for any element that conveys a danger status.", + "description": "Use as the hover state for any element that conveys a success status.", "type": "color", - "value": "#731f00", + "value": "#204d00", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state for any element that conveys a danger status.", + "description": "Use as the hover state for any element that conveys a success status.", "type": "color", - "value": "{global.color.status.danger.200}" + "value": "{global.color.status.success.200}" }, - "name": "pf-t--global--color--status--danger--hover", + "name": "pf-t--global--color--status--success--hover", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "danger", + "subitem": "success", "state": "hover" }, "path": [ "global", "color", "status", - "danger", + "success", "hover" ], "references": [ { "type": "color", - "value": "#731f00", + "value": "#204d00", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.red-orange.70}" + "value": "{color.green.70}" }, - "name": "pf-t--global--color--status--danger--200", + "name": "pf-t--global--color--status--success--200", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "danger", + "subitem": "success", "state": "200" }, "path": [ "global", "color", "status", - "danger", + "success", "200" ], "references": [ { "type": "color", - "value": "#731f00", + "value": "#204d00", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#731f00" + "value": "#204d00" }, - "name": "pf-t--color--red-orange--70", + "name": "pf-t--color--green--70", "attributes": { "category": "color", - "type": "red-orange", + "type": "green", "item": "70" }, "path": [ "color", - "red-orange", + "green", "70" ] } @@ -2340,105 +2100,105 @@ ] } }, - "pf-t--global--icon--color--status--danger--clicked": { + "pf-t--global--icon--color--status--success--clicked": { "default": { - "description": "Use as the clicked state for icons that indicate danger.", + "description": "Use as the clicked state color for text that communicates a success status.", "type": "color", - "value": "#731f00", + "value": "#204d00", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state for icons that indicate danger.", + "description": "Use as the clicked state color for text that communicates a success status.", "type": "color", - "value": "{global.color.status.danger.clicked}" + "value": "{global.color.status.success.clicked}" }, - "name": "pf-t--global--icon--color--status--danger--clicked", + "name": "pf-t--global--icon--color--status--success--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "danger" + "state": "success" }, "path": [ "global", "icon", "color", "status", - "danger", + "success", "clicked" ], "references": [ { - "description": "Use as the clicked state for any element that conveys a danger status.", + "description": "Use as the clicked state for any element that conveys a success status.", "type": "color", - "value": "#731f00", + "value": "#204d00", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state for any element that conveys a danger status.", + "description": "Use as the clicked state for any element that conveys a success status.", "type": "color", - "value": "{global.color.status.danger.200}" + "value": "{global.color.status.success.200}" }, - "name": "pf-t--global--color--status--danger--clicked", + "name": "pf-t--global--color--status--success--clicked", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "danger", + "subitem": "success", "state": "clicked" }, "path": [ "global", "color", "status", - "danger", + "success", "clicked" ], "references": [ { "type": "color", - "value": "#731f00", + "value": "#204d00", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.red-orange.70}" + "value": "{color.green.70}" }, - "name": "pf-t--global--color--status--danger--200", + "name": "pf-t--global--color--status--success--200", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "danger", + "subitem": "success", "state": "200" }, "path": [ "global", "color", "status", - "danger", + "success", "200" ], "references": [ { "type": "color", - "value": "#731f00", + "value": "#204d00", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#731f00" + "value": "#204d00" }, - "name": "pf-t--color--red-orange--70", + "name": "pf-t--color--green--70", "attributes": { "category": "color", - "type": "red-orange", + "type": "green", "item": "70" }, "path": [ "color", - "red-orange", + "green", "70" ] } @@ -2449,32 +2209,32 @@ ] } }, - "pf-t--global--icon--color--status--on-danger--default": { + "pf-t--global--icon--color--status--on-success--default": { "default": { - "description": "Use as the default color for icons that are placed on a danger background color and/or are paired with on-danger colored text", + "description": "Use as the default color for icons that are placed on a success background color and/or are paired with on-success colored text", "type": "color", "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a danger background color and/or are paired with on-danger colored text", + "description": "Use as the default color for icons that are placed on a success background color and/or are paired with on-success colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--on-danger--default", + "name": "pf-t--global--icon--color--status--on-success--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-danger" + "state": "on-success" }, "path": [ "global", "icon", "color", "status", - "on-danger", + "on-success", "default" ], "references": [ @@ -2552,32 +2312,32 @@ ] } }, - "pf-t--global--icon--color--status--on-danger--hover": { + "pf-t--global--icon--color--status--on-success--hover": { "default": { - "description": "Use as the hover state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", + "description": "Use as the hover state color for icons that are placed on a success background color and/or are paired with on-success colored text", "type": "color", "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", + "description": "Use as the hover state color for icons that are placed on a success background color and/or are paired with on-success colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--on-danger--hover", + "name": "pf-t--global--icon--color--status--on-success--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-danger" + "state": "on-success" }, "path": [ "global", "icon", "color", "status", - "on-danger", + "on-success", "hover" ], "references": [ @@ -2655,32 +2415,32 @@ ] } }, - "pf-t--global--icon--color--status--on-danger--clicked": { + "pf-t--global--icon--color--status--on-success--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", + "description": "Use as the clicked state color for icons that are placed on a success background color and/or are paired with on-success colored text", "type": "color", "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", + "description": "Use as the clicked state color for icons that are placed on a success background color and/or are paired with on-success colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--on-danger--clicked", + "name": "pf-t--global--icon--color--status--on-success--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-danger" + "state": "on-success" }, "path": [ "global", "icon", "color", "status", - "on-danger", + "on-success", "clicked" ], "references": [ @@ -2758,108 +2518,79 @@ ] } }, - "pf-t--global--icon--color--status--info--default": { + "pf-t--global--icon--color--status--warning--default": { "default": { - "description": "Use as the default color for icons that identify informational messages, like in alerts or banners.", + "description": "Use as the default color for text that communicates a warning status.", "type": "color", - "value": "#5e40be", + "value": "#dca614", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that identify informational messages, like in alerts or banners.", + "description": "Use as the default color for text that communicates a warning status.", "type": "color", - "value": "{global.color.status.info.default}" + "value": "{global.color.status.warning.200}" }, - "name": "pf-t--global--icon--color--status--info--default", + "name": "pf-t--global--icon--color--status--warning--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "info" + "state": "warning" }, "path": [ "global", "icon", "color", "status", - "info", + "warning", "default" ], "references": [ { - "description": "Use as the default color for any element communicating information, like an info status for alert, progress, select.", "type": "color", - "value": "#5e40be", - "filePath": "tokens/default/semantic.json", + "value": "#dca614", + "filePath": "tokens/default/base.json", "isSource": true, "original": { - "description": "Use as the default color for any element communicating information, like an info status for alert, progress, select.", "type": "color", - "value": "{global.color.status.info.100}" + "value": "{color.yellow.40}" }, - "name": "pf-t--global--color--status--info--default", + "name": "pf-t--global--color--status--warning--200", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "info", - "state": "default" + "subitem": "warning", + "state": "200" }, "path": [ "global", "color", "status", - "info", - "default" + "warning", + "200" ], "references": [ { "type": "color", - "value": "#5e40be", - "filePath": "tokens/default/base.json", + "value": "#dca614", + "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "{color.purple.50}" + "value": "#dca614" }, - "name": "pf-t--global--color--status--info--100", + "name": "pf-t--color--yellow--40", "attributes": { - "category": "global", - "type": "color", - "item": "status", - "subitem": "info", - "state": "100" + "category": "color", + "type": "yellow", + "item": "40" }, "path": [ - "global", "color", - "status", - "info", - "100" - ], - "references": [ - { - "type": "color", - "value": "#5e40be", - "filePath": "tokens/default/palette.color.json", - "isSource": true, - "original": { - "type": "color", - "value": "#5e40be" - }, - "name": "pf-t--color--purple--50", - "attributes": { - "category": "color", - "type": "purple", - "item": "50" - }, - "path": [ - "color", - "purple", - "50" - ] - } + "yellow", + "40" ] } ] @@ -2867,108 +2598,79 @@ ] } }, - "pf-t--global--icon--color--status--info--hover": { + "pf-t--global--icon--color--status--warning--hover": { "default": { - "description": "Use as the hover state for icons that identify informational messages.", + "description": "Use as the hover state color for text that communicates a warning status.", "type": "color", - "value": "#3d2785", + "value": "#b98412", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state for icons that identify informational messages.", + "description": "Use as the hover state color for text that communicates a warning status.", "type": "color", - "value": "{global.color.status.info.hover}" + "value": "{global.color.status.warning.300}" }, - "name": "pf-t--global--icon--color--status--info--hover", + "name": "pf-t--global--icon--color--status--warning--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "info" + "state": "warning" }, "path": [ "global", "icon", "color", "status", - "info", + "warning", "hover" ], "references": [ { - "description": "Use as the hover state for any element that conveys an info status.", "type": "color", - "value": "#3d2785", - "filePath": "tokens/default/semantic.json", + "value": "#b98412", + "filePath": "tokens/default/base.json", "isSource": true, "original": { - "description": "Use as the hover state for any element that conveys an info status.", "type": "color", - "value": "{global.color.status.info.200}" + "value": "{color.yellow.50}" }, - "name": "pf-t--global--color--status--info--hover", + "name": "pf-t--global--color--status--warning--300", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "info", - "state": "hover" + "subitem": "warning", + "state": "300" }, "path": [ "global", "color", "status", - "info", - "hover" + "warning", + "300" ], "references": [ { "type": "color", - "value": "#3d2785", - "filePath": "tokens/default/base.json", + "value": "#b98412", + "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "{color.purple.60}" + "value": "#b98412" }, - "name": "pf-t--global--color--status--info--200", + "name": "pf-t--color--yellow--50", "attributes": { - "category": "global", - "type": "color", - "item": "status", - "subitem": "info", - "state": "200" + "category": "color", + "type": "yellow", + "item": "50" }, "path": [ - "global", "color", - "status", - "info", - "200" - ], - "references": [ - { - "type": "color", - "value": "#3d2785", - "filePath": "tokens/default/palette.color.json", - "isSource": true, - "original": { - "type": "color", - "value": "#3d2785" - }, - "name": "pf-t--color--purple--60", - "attributes": { - "category": "color", - "type": "purple", - "item": "60" - }, - "path": [ - "color", - "purple", - "60" - ] - } + "yellow", + "50" ] } ] @@ -2976,108 +2678,79 @@ ] } }, - "pf-t--global--icon--color--status--info--clicked": { + "pf-t--global--icon--color--status--warning--clicked": { "default": { - "description": "Use as the clicked state for icons that identify informational messages.", + "description": "Use as the clicked state color for text that communicates a warning status.", "type": "color", - "value": "#3d2785", + "value": "#b98412", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state for icons that identify informational messages.", + "description": "Use as the clicked state color for text that communicates a warning status.", "type": "color", - "value": "{global.color.status.info.clicked}" + "value": "{global.color.status.warning.300}" }, - "name": "pf-t--global--icon--color--status--info--clicked", + "name": "pf-t--global--icon--color--status--warning--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "info" + "state": "warning" }, "path": [ "global", "icon", "color", "status", - "info", + "warning", "clicked" ], "references": [ { - "description": "Use as the clicked state for any element that conveys an info status.", "type": "color", - "value": "#3d2785", - "filePath": "tokens/default/semantic.json", + "value": "#b98412", + "filePath": "tokens/default/base.json", "isSource": true, "original": { - "description": "Use as the clicked state for any element that conveys an info status.", "type": "color", - "value": "{global.color.status.info.200}" + "value": "{color.yellow.50}" }, - "name": "pf-t--global--color--status--info--clicked", + "name": "pf-t--global--color--status--warning--300", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "info", - "state": "clicked" + "subitem": "warning", + "state": "300" }, "path": [ "global", "color", "status", - "info", - "clicked" + "warning", + "300" ], "references": [ { "type": "color", - "value": "#3d2785", - "filePath": "tokens/default/base.json", + "value": "#b98412", + "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "{color.purple.60}" + "value": "#b98412" }, - "name": "pf-t--global--color--status--info--200", + "name": "pf-t--color--yellow--50", "attributes": { - "category": "global", - "type": "color", - "item": "status", - "subitem": "info", - "state": "200" + "category": "color", + "type": "yellow", + "item": "50" }, "path": [ - "global", "color", - "status", - "info", - "200" - ], - "references": [ - { - "type": "color", - "value": "#3d2785", - "filePath": "tokens/default/palette.color.json", - "isSource": true, - "original": { - "type": "color", - "value": "#3d2785" - }, - "name": "pf-t--color--purple--60", - "attributes": { - "category": "color", - "type": "purple", - "item": "60" - }, - "path": [ - "color", - "purple", - "60" - ] - } + "yellow", + "50" ] } ] @@ -3085,100 +2758,102 @@ ] } }, - "pf-t--global--icon--color--status--on-info--default": { + "pf-t--global--icon--color--status--on-warning--default": { "default": { - "description": "Use as the default color for icons that are placed on an info background color and/or are paired with on-info colored text", + "description": "Use as the default color for icons that are placed on a warning background color and/or are paired with on-warning colored text", "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on an info background color and/or are paired with on-info colored text", + "description": "Use as the default color for icons that are placed on a warning background color and/or are paired with on-warning colored text", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--status--on-info--default", + "name": "pf-t--global--icon--color--status--on-warning--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-info" + "state": "on-warning" }, "path": [ "global", "icon", "color", "status", - "on-info", + "on-warning", "default" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "{global.icon.color.300}" + "value": "{global.icon.color.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "icon", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--icon--color--300", + "name": "pf-t--global--icon--color--100", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "300" + "subitem": "100" }, "path": [ "global", "icon", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#1f1f1f" }, - "name": "pf-t--color--white", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "white" + "type": "gray", + "item": "90" }, "path": [ "color", - "white" + "gray", + "90" ] } ] @@ -3188,100 +2863,102 @@ ] } }, - "pf-t--global--icon--color--status--on-info--hover": { + "pf-t--global--icon--color--status--on-warning--hover": { "default": { - "description": "Use as the hover state color for icons that are placed on an info background color and/or are paired with on-info colored text", + "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on an info background color and/or are paired with on-info colored text", + "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--status--on-info--hover", + "name": "pf-t--global--icon--color--status--on-warning--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-info" + "state": "on-warning" }, "path": [ "global", "icon", "color", "status", - "on-info", + "on-warning", "hover" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "{global.icon.color.300}" + "value": "{global.icon.color.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "icon", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--icon--color--300", + "name": "pf-t--global--icon--color--100", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "300" + "subitem": "100" }, "path": [ "global", "icon", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#1f1f1f" }, - "name": "pf-t--color--white", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "white" + "type": "gray", + "item": "90" }, "path": [ "color", - "white" + "gray", + "90" ] } ] @@ -3291,100 +2968,102 @@ ] } }, - "pf-t--global--icon--color--status--on-info--clicked": { + "pf-t--global--icon--color--status--on-warning--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed on an info background color and/or are paired with on-info colored text", + "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on an info background color and/or are paired with on-info colored text", + "description": "Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--status--on-info--clicked", + "name": "pf-t--global--icon--color--status--on-warning--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-info" + "state": "on-warning" }, "path": [ "global", "icon", "color", "status", - "on-info", + "on-warning", "clicked" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "{global.icon.color.300}" + "value": "{global.icon.color.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "icon", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.gray.90}" }, - "name": "pf-t--global--icon--color--300", + "name": "pf-t--global--icon--color--100", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "300" + "subitem": "100" }, "path": [ "global", "icon", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#1f1f1f", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#1f1f1f" }, - "name": "pf-t--color--white", + "name": "pf-t--color--gray--90", "attributes": { "category": "color", - "type": "white" + "type": "gray", + "item": "90" }, "path": [ "color", - "white" + "gray", + "90" ] } ] @@ -3394,105 +3073,105 @@ ] } }, - "pf-t--global--icon--color--status--custom--default": { + "pf-t--global--icon--color--status--danger--default": { "default": { - "description": "Use as the default color for icons that convey generic status with no associated severity. This color can be customized.", + "description": "Use as the default color for icons that convey danger, like in alerts or banners.", "type": "color", - "value": "#147878", + "value": "#b1380b", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that convey generic status with no associated severity. This color can be customized.", + "description": "Use as the default color for icons that convey danger, like in alerts or banners.", "type": "color", - "value": "{global.color.status.custom.default}" + "value": "{global.color.status.danger.default}" }, - "name": "pf-t--global--icon--color--status--custom--default", + "name": "pf-t--global--icon--color--status--danger--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "custom" + "state": "danger" }, "path": [ "global", "icon", "color", "status", - "custom", + "danger", "default" ], "references": [ { - "description": "Use as the default color for any element that conveys a generic status with no associated severity. This color can be customized.", + "description": "Use as the default color for any element communicating a critical warning or error, like a danger status for alert, progress, select.", "type": "color", - "value": "#147878", + "value": "#b1380b", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for any element that conveys a generic status with no associated severity. This color can be customized.", + "description": "Use as the default color for any element communicating a critical warning or error, like a danger status for alert, progress, select.", "type": "color", - "value": "{global.color.status.custom.100}" + "value": "{global.color.status.danger.100}" }, - "name": "pf-t--global--color--status--custom--default", + "name": "pf-t--global--color--status--danger--default", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "custom", + "subitem": "danger", "state": "default" }, "path": [ "global", "color", "status", - "custom", + "danger", "default" ], "references": [ { "type": "color", - "value": "#147878", + "value": "#b1380b", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.teal.60}" + "value": "{color.red-orange.60}" }, - "name": "pf-t--global--color--status--custom--100", + "name": "pf-t--global--color--status--danger--100", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "custom", + "subitem": "danger", "state": "100" }, "path": [ "global", "color", "status", - "custom", + "danger", "100" ], "references": [ { "type": "color", - "value": "#147878", + "value": "#b1380b", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#147878" + "value": "#b1380b" }, - "name": "pf-t--color--teal--60", + "name": "pf-t--color--red-orange--60", "attributes": { "category": "color", - "type": "teal", + "type": "red-orange", "item": "60" }, "path": [ "color", - "teal", + "red-orange", "60" ] } @@ -3503,105 +3182,105 @@ ] } }, - "pf-t--global--icon--color--status--custom--hover": { + "pf-t--global--icon--color--status--danger--hover": { "default": { - "description": "Use as the hover state for icons that convey generic status with no associated severity.", + "description": "Use as the hover state for icons that indicate danger.", "type": "color", - "value": "#004d4d", + "value": "#731f00", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state for icons that convey generic status with no associated severity.", + "description": "Use as the hover state for icons that indicate danger.", "type": "color", - "value": "{global.color.status.custom.hover}" + "value": "{global.color.status.danger.hover}" }, - "name": "pf-t--global--icon--color--status--custom--hover", + "name": "pf-t--global--icon--color--status--danger--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "custom" + "state": "danger" }, "path": [ "global", "icon", "color", "status", - "custom", + "danger", "hover" ], "references": [ { - "description": "Use this color as the hover state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "description": "Use as the hover state for any element that conveys a danger status.", "type": "color", - "value": "#004d4d", + "value": "#731f00", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use this color as the hover state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "description": "Use as the hover state for any element that conveys a danger status.", "type": "color", - "value": "{global.color.status.custom.200}" + "value": "{global.color.status.danger.200}" }, - "name": "pf-t--global--color--status--custom--hover", + "name": "pf-t--global--color--status--danger--hover", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "custom", + "subitem": "danger", "state": "hover" }, "path": [ "global", "color", "status", - "custom", + "danger", "hover" ], "references": [ { "type": "color", - "value": "#004d4d", + "value": "#731f00", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.teal.70}" + "value": "{color.red-orange.70}" }, - "name": "pf-t--global--color--status--custom--200", + "name": "pf-t--global--color--status--danger--200", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "custom", + "subitem": "danger", "state": "200" }, "path": [ "global", "color", "status", - "custom", + "danger", "200" ], "references": [ { "type": "color", - "value": "#004d4d", + "value": "#731f00", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#004d4d" + "value": "#731f00" }, - "name": "pf-t--color--teal--70", + "name": "pf-t--color--red-orange--70", "attributes": { "category": "color", - "type": "teal", + "type": "red-orange", "item": "70" }, "path": [ "color", - "teal", + "red-orange", "70" ] } @@ -3612,105 +3291,105 @@ ] } }, - "pf-t--global--icon--color--status--custom--clicked": { + "pf-t--global--icon--color--status--danger--clicked": { "default": { - "description": "Use as the clicked state for icons that convey generic status with no associated severity.", + "description": "Use as the clicked state for icons that indicate danger.", "type": "color", - "value": "#004d4d", + "value": "#731f00", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state for icons that convey generic status with no associated severity.", + "description": "Use as the clicked state for icons that indicate danger.", "type": "color", - "value": "{global.color.status.custom.clicked}" + "value": "{global.color.status.danger.clicked}" }, - "name": "pf-t--global--icon--color--status--custom--clicked", + "name": "pf-t--global--icon--color--status--danger--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "custom" + "state": "danger" }, "path": [ "global", "icon", "color", "status", - "custom", + "danger", "clicked" ], "references": [ { - "description": "Use as the clicked state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "description": "Use as the clicked state for any element that conveys a danger status.", "type": "color", - "value": "#004d4d", + "value": "#731f00", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "description": "Use as the clicked state for any element that conveys a danger status.", "type": "color", - "value": "{global.color.status.custom.200}" + "value": "{global.color.status.danger.200}" }, - "name": "pf-t--global--color--status--custom--clicked", + "name": "pf-t--global--color--status--danger--clicked", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "custom", + "subitem": "danger", "state": "clicked" }, "path": [ "global", "color", "status", - "custom", + "danger", "clicked" ], "references": [ { "type": "color", - "value": "#004d4d", + "value": "#731f00", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.teal.70}" + "value": "{color.red-orange.70}" }, - "name": "pf-t--global--color--status--custom--200", + "name": "pf-t--global--color--status--danger--200", "attributes": { "category": "global", "type": "color", "item": "status", - "subitem": "custom", + "subitem": "danger", "state": "200" }, "path": [ "global", "color", "status", - "custom", + "danger", "200" ], "references": [ { "type": "color", - "value": "#004d4d", + "value": "#731f00", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#004d4d" + "value": "#731f00" }, - "name": "pf-t--color--teal--70", + "name": "pf-t--color--red-orange--70", "attributes": { "category": "color", - "type": "teal", + "type": "red-orange", "item": "70" }, "path": [ "color", - "teal", + "red-orange", "70" ] } @@ -3721,32 +3400,32 @@ ] } }, - "pf-t--global--icon--color--status--on-custom--default": { + "pf-t--global--icon--color--status--on-danger--default": { "default": { - "description": "Use as the default color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status color, make sure that this token meets contrast requirements with your new custom status color.", + "description": "Use as the default color for icons that are placed on a danger background color and/or are paired with on-danger colored text", "type": "color", "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status color, make sure that this token meets contrast requirements with your new custom status color.", + "description": "Use as the default color for icons that are placed on a danger background color and/or are paired with on-danger colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--on-custom--default", + "name": "pf-t--global--icon--color--status--on-danger--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-custom" + "state": "on-danger" }, "path": [ "global", "icon", "color", "status", - "on-custom", + "on-danger", "default" ], "references": [ @@ -3824,32 +3503,32 @@ ] } }, - "pf-t--global--icon--color--status--on-custom--hover": { + "pf-t--global--icon--color--status--on-danger--hover": { "default": { - "description": "Use as the hover state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status hover color, make sure that this token meets contrast requirements with your new custom status hover color.", + "description": "Use as the hover state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", "type": "color", "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status hover color, make sure that this token meets contrast requirements with your new custom status hover color.", + "description": "Use as the hover state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--on-custom--hover", + "name": "pf-t--global--icon--color--status--on-danger--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-custom" + "state": "on-danger" }, "path": [ "global", "icon", "color", "status", - "on-custom", + "on-danger", "hover" ], "references": [ @@ -3927,32 +3606,32 @@ ] } }, - "pf-t--global--icon--color--status--on-custom--clicked": { + "pf-t--global--icon--color--status--on-danger--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status clicked color, make sure that this token meets contrast requirements with your new custom status clicked color.", + "description": "Use as the clicked state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", "type": "color", "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status clicked color, make sure that this token meets contrast requirements with your new custom status clicked color.", + "description": "Use as the clicked state color for icons that are placed on a danger background color and/or are paired with on-danger colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--on-custom--clicked", + "name": "pf-t--global--icon--color--status--on-danger--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "on-custom" + "state": "on-danger" }, "path": [ "global", "icon", "color", "status", - "on-custom", + "on-danger", "clicked" ], "references": [ @@ -4030,101 +3709,106 @@ ] } }, - "pf-t--global--icon--color--status--unread--on-default--default": { + "pf-t--global--icon--color--status--info--default": { "default": { - "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "description": "Use as the default color for icons that identify informational messages, like in alerts or banners.", "type": "color", - "value": "#ffffff", + "value": "#5e40be", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "description": "Use as the default color for icons that identify informational messages, like in alerts or banners.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.status.info.default}" }, - "name": "pf-t--global--icon--color--status--unread--on-default--default", + "name": "pf-t--global--icon--color--status--info--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "unread" + "state": "info" }, "path": [ "global", "icon", "color", "status", - "unread", - "on-default", + "info", "default" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for any element communicating information, like an info status for alert, progress, select.", "type": "color", - "value": "#ffffff", + "value": "#5e40be", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for any element communicating information, like an info status for alert, progress, select.", "type": "color", - "value": "{global.icon.color.300}" + "value": "{global.color.status.info.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--status--info--default", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "status", + "subitem": "info", + "state": "default" }, "path": [ "global", - "icon", "color", - "inverse" + "status", + "info", + "default" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#5e40be", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.purple.50}" }, - "name": "pf-t--global--icon--color--300", + "name": "pf-t--global--color--status--info--100", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "300" + "type": "color", + "item": "status", + "subitem": "info", + "state": "100" }, "path": [ "global", - "icon", "color", - "300" + "status", + "info", + "100" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#5e40be", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#5e40be" }, - "name": "pf-t--color--white", + "name": "pf-t--color--purple--50", "attributes": { "category": "color", - "type": "white" + "type": "purple", + "item": "50" }, "path": [ "color", - "white" + "purple", + "50" ] } ] @@ -4134,101 +3818,106 @@ ] } }, - "pf-t--global--icon--color--status--unread--on-default--hover": { + "pf-t--global--icon--color--status--info--hover": { "default": { - "description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "description": "Use as the hover state for icons that identify informational messages.", "type": "color", - "value": "#ffffff", + "value": "#3d2785", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "description": "Use as the hover state for icons that identify informational messages.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.status.info.hover}" }, - "name": "pf-t--global--icon--color--status--unread--on-default--hover", + "name": "pf-t--global--icon--color--status--info--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "unread" + "state": "info" }, "path": [ "global", "icon", "color", "status", - "unread", - "on-default", + "info", "hover" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the hover state for any element that conveys an info status.", "type": "color", - "value": "#ffffff", + "value": "#3d2785", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the hover state for any element that conveys an info status.", "type": "color", - "value": "{global.icon.color.300}" + "value": "{global.color.status.info.200}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--status--info--hover", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "status", + "subitem": "info", + "state": "hover" }, "path": [ "global", - "icon", "color", - "inverse" + "status", + "info", + "hover" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#3d2785", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.purple.60}" }, - "name": "pf-t--global--icon--color--300", + "name": "pf-t--global--color--status--info--200", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "300" + "type": "color", + "item": "status", + "subitem": "info", + "state": "200" }, "path": [ "global", - "icon", "color", - "300" + "status", + "info", + "200" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#3d2785", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#3d2785" }, - "name": "pf-t--color--white", + "name": "pf-t--color--purple--60", "attributes": { "category": "color", - "type": "white" + "type": "purple", + "item": "60" }, "path": [ "color", - "white" + "purple", + "60" ] } ] @@ -4238,101 +3927,106 @@ ] } }, - "pf-t--global--icon--color--status--unread--on-default--clicked": { + "pf-t--global--icon--color--status--info--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "description": "Use as the clicked state for icons that identify informational messages.", "type": "color", - "value": "#ffffff", + "value": "#3d2785", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "description": "Use as the clicked state for icons that identify informational messages.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.status.info.clicked}" }, - "name": "pf-t--global--icon--color--status--unread--on-default--clicked", + "name": "pf-t--global--icon--color--status--info--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "unread" + "state": "info" }, "path": [ "global", "icon", "color", "status", - "unread", - "on-default", + "info", "clicked" ], "references": [ { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the clicked state for any element that conveys an info status.", "type": "color", - "value": "#ffffff", + "value": "#3d2785", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the clicked state for any element that conveys an info status.", "type": "color", - "value": "{global.icon.color.300}" + "value": "{global.color.status.info.200}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--status--info--clicked", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "status", + "subitem": "info", + "state": "clicked" }, "path": [ "global", - "icon", "color", - "inverse" + "status", + "info", + "clicked" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#3d2785", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.purple.60}" }, - "name": "pf-t--global--icon--color--300", + "name": "pf-t--global--color--status--info--200", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "300" + "type": "color", + "item": "status", + "subitem": "info", + "state": "200" }, "path": [ "global", - "icon", "color", - "300" + "status", + "info", + "200" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#3d2785", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#3d2785" }, - "name": "pf-t--color--white", + "name": "pf-t--color--purple--60", "attributes": { "category": "color", - "type": "white" + "type": "purple", + "item": "60" }, "path": [ "color", - "white" + "purple", + "60" ] } ] @@ -4342,33 +4036,32 @@ ] } }, - "pf-t--global--icon--color--status--unread--on-attention--default": { + "pf-t--global--icon--color--status--on-info--default": { "default": { - "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "description": "Use as the default color for icons that are placed on an info background color and/or are paired with on-info colored text", "type": "color", "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "description": "Use as the default color for icons that are placed on an info background color and/or are paired with on-info colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--unread--on-attention--default", + "name": "pf-t--global--icon--color--status--on-info--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "unread" + "state": "on-info" }, "path": [ "global", "icon", "color", "status", - "unread", - "on-attention", + "on-info", "default" ], "references": [ @@ -4446,33 +4139,32 @@ ] } }, - "pf-t--global--icon--color--status--unread--on-attention--hover": { + "pf-t--global--icon--color--status--on-info--hover": { "default": { - "description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "description": "Use as the hover state color for icons that are placed on an info background color and/or are paired with on-info colored text", "type": "color", "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "description": "Use as the hover state color for icons that are placed on an info background color and/or are paired with on-info colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--unread--on-attention--hover", + "name": "pf-t--global--icon--color--status--on-info--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "unread" + "state": "on-info" }, "path": [ "global", "icon", "color", "status", - "unread", - "on-attention", + "on-info", "hover" ], "references": [ @@ -4550,33 +4242,1292 @@ ] } }, - "pf-t--global--icon--color--status--unread--on-attention--clicked": { + "pf-t--global--icon--color--status--on-info--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "description": "Use as the clicked state color for icons that are placed on an info background color and/or are paired with on-info colored text", "type": "color", "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "description": "Use as the clicked state color for icons that are placed on an info background color and/or are paired with on-info colored text", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--status--unread--on-attention--clicked", + "name": "pf-t--global--icon--color--status--on-info--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "status", - "state": "unread" + "state": "on-info" }, "path": [ "global", "icon", "color", "status", - "unread", - "on-attention", + "on-info", + "clicked" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.white}" + }, + "name": "pf-t--global--icon--color--300", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "300" + }, + "path": [ + "global", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--custom--default": { + "default": { + "description": "Use as the default color for icons that convey generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "#147878", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the default color for icons that convey generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "{global.color.status.custom.default}" + }, + "name": "pf-t--global--icon--color--status--custom--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "custom" + }, + "path": [ + "global", + "icon", + "color", + "status", + "custom", + "default" + ], + "references": [ + { + "description": "Use as the default color for any element that conveys a generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "#147878", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the default color for any element that conveys a generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "{global.color.status.custom.100}" + }, + "name": "pf-t--global--color--status--custom--default", + "attributes": { + "category": "global", + "type": "color", + "item": "status", + "subitem": "custom", + "state": "default" + }, + "path": [ + "global", + "color", + "status", + "custom", + "default" + ], + "references": [ + { + "type": "color", + "value": "#147878", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.teal.60}" + }, + "name": "pf-t--global--color--status--custom--100", + "attributes": { + "category": "global", + "type": "color", + "item": "status", + "subitem": "custom", + "state": "100" + }, + "path": [ + "global", + "color", + "status", + "custom", + "100" + ], + "references": [ + { + "type": "color", + "value": "#147878", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#147878" + }, + "name": "pf-t--color--teal--60", + "attributes": { + "category": "color", + "type": "teal", + "item": "60" + }, + "path": [ + "color", + "teal", + "60" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--custom--hover": { + "default": { + "description": "Use as the hover state for icons that convey generic status with no associated severity.", + "type": "color", + "value": "#004d4d", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the hover state for icons that convey generic status with no associated severity.", + "type": "color", + "value": "{global.color.status.custom.hover}" + }, + "name": "pf-t--global--icon--color--status--custom--hover", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "custom" + }, + "path": [ + "global", + "icon", + "color", + "status", + "custom", + "hover" + ], + "references": [ + { + "description": "Use this color as the hover state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "#004d4d", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use this color as the hover state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "{global.color.status.custom.200}" + }, + "name": "pf-t--global--color--status--custom--hover", + "attributes": { + "category": "global", + "type": "color", + "item": "status", + "subitem": "custom", + "state": "hover" + }, + "path": [ + "global", + "color", + "status", + "custom", + "hover" + ], + "references": [ + { + "type": "color", + "value": "#004d4d", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.teal.70}" + }, + "name": "pf-t--global--color--status--custom--200", + "attributes": { + "category": "global", + "type": "color", + "item": "status", + "subitem": "custom", + "state": "200" + }, + "path": [ + "global", + "color", + "status", + "custom", + "200" + ], + "references": [ + { + "type": "color", + "value": "#004d4d", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#004d4d" + }, + "name": "pf-t--color--teal--70", + "attributes": { + "category": "color", + "type": "teal", + "item": "70" + }, + "path": [ + "color", + "teal", + "70" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--custom--clicked": { + "default": { + "description": "Use as the clicked state for icons that convey generic status with no associated severity.", + "type": "color", + "value": "#004d4d", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the clicked state for icons that convey generic status with no associated severity.", + "type": "color", + "value": "{global.color.status.custom.clicked}" + }, + "name": "pf-t--global--icon--color--status--custom--clicked", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "custom" + }, + "path": [ + "global", + "icon", + "color", + "status", + "custom", + "clicked" + ], + "references": [ + { + "description": "Use as the clicked state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "#004d4d", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the clicked state color for any element that conveys a generic status with no associated severity. This color can be customized.", + "type": "color", + "value": "{global.color.status.custom.200}" + }, + "name": "pf-t--global--color--status--custom--clicked", + "attributes": { + "category": "global", + "type": "color", + "item": "status", + "subitem": "custom", + "state": "clicked" + }, + "path": [ + "global", + "color", + "status", + "custom", + "clicked" + ], + "references": [ + { + "type": "color", + "value": "#004d4d", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.teal.70}" + }, + "name": "pf-t--global--color--status--custom--200", + "attributes": { + "category": "global", + "type": "color", + "item": "status", + "subitem": "custom", + "state": "200" + }, + "path": [ + "global", + "color", + "status", + "custom", + "200" + ], + "references": [ + { + "type": "color", + "value": "#004d4d", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#004d4d" + }, + "name": "pf-t--color--teal--70", + "attributes": { + "category": "color", + "type": "teal", + "item": "70" + }, + "path": [ + "color", + "teal", + "70" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--on-custom--default": { + "default": { + "description": "Use as the default color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status color, make sure that this token meets contrast requirements with your new custom status color.", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the default color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status color, make sure that this token meets contrast requirements with your new custom status color.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--on-custom--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "on-custom" + }, + "path": [ + "global", + "icon", + "color", + "status", + "on-custom", + "default" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.white}" + }, + "name": "pf-t--global--icon--color--300", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "300" + }, + "path": [ + "global", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--on-custom--hover": { + "default": { + "description": "Use as the hover state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status hover color, make sure that this token meets contrast requirements with your new custom status hover color.", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the hover state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status hover color, make sure that this token meets contrast requirements with your new custom status hover color.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--on-custom--hover", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "on-custom" + }, + "path": [ + "global", + "icon", + "color", + "status", + "on-custom", + "hover" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.white}" + }, + "name": "pf-t--global--icon--color--300", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "300" + }, + "path": [ + "global", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--on-custom--clicked": { + "default": { + "description": "Use as the clicked state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status clicked color, make sure that this token meets contrast requirements with your new custom status clicked color.", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the clicked state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status clicked color, make sure that this token meets contrast requirements with your new custom status clicked color.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--on-custom--clicked", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "on-custom" + }, + "path": [ + "global", + "icon", + "color", + "status", + "on-custom", + "clicked" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.white}" + }, + "name": "pf-t--global--icon--color--300", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "300" + }, + "path": [ + "global", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--unread--on-default--default": { + "default": { + "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--unread--on-default--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "unread" + }, + "path": [ + "global", + "icon", + "color", + "status", + "unread", + "on-default", + "default" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.white}" + }, + "name": "pf-t--global--icon--color--300", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "300" + }, + "path": [ + "global", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--unread--on-default--hover": { + "default": { + "description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--unread--on-default--hover", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "unread" + }, + "path": [ + "global", + "icon", + "color", + "status", + "unread", + "on-default", + "hover" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.white}" + }, + "name": "pf-t--global--icon--color--300", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "300" + }, + "path": [ + "global", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--unread--on-default--clicked": { + "default": { + "description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--unread--on-default--clicked", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "unread" + }, + "path": [ + "global", + "icon", + "color", + "status", + "unread", + "on-default", + "clicked" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.white}" + }, + "name": "pf-t--global--icon--color--300", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "300" + }, + "path": [ + "global", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--unread--on-attention--default": { + "default": { + "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--unread--on-attention--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "unread" + }, + "path": [ + "global", + "icon", + "color", + "status", + "unread", + "on-attention", + "default" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.white}" + }, + "name": "pf-t--global--icon--color--300", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "300" + }, + "path": [ + "global", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--unread--on-attention--hover": { + "default": { + "description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--unread--on-attention--hover", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "unread" + }, + "path": [ + "global", + "icon", + "color", + "status", + "unread", + "on-attention", + "hover" + ], + "references": [ + { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on an inverse background color", + "type": "color", + "value": "{global.icon.color.300}" + }, + "name": "pf-t--global--icon--color--inverse", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "inverse" + }, + "path": [ + "global", + "icon", + "color", + "inverse" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.white}" + }, + "name": "pf-t--global--icon--color--300", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "300" + }, + "path": [ + "global", + "icon", + "color", + "300" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--status--unread--on-attention--clicked": { + "default": { + "description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--status--unread--on-attention--clicked", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "status", + "state": "unread" + }, + "path": [ + "global", + "icon", + "color", + "status", + "unread", + "on-attention", "clicked" ], "references": [ @@ -8754,6 +9705,573 @@ ] } }, + "pf-t--global--border--color--brand--accent--default": { + "default": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "#ee0000", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.default}" + }, + "name": "pf-t--global--border--color--brand--accent--default", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "border", + "color", + "brand", + "accent", + "default" + ], + "references": [ + { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "#ee0000", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.color.brand.accent.100}" + }, + "name": "pf-t--global--color--brand--accent--default", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "default" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "default" + ], + "references": [ + { + "type": "color", + "value": "#ee0000", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.50}" + }, + "name": "pf-t--global--color--brand--accent--100", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "100" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "100" + ], + "references": [ + { + "type": "color", + "value": "#ee0000", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ee0000" + }, + "name": "pf-t--color--red--50", + "attributes": { + "category": "color", + "type": "red", + "item": "50" + }, + "path": [ + "color", + "red", + "50" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--border--color--brand--accent--hover": { + "default": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.hover}" + }, + "name": "pf-t--global--border--color--brand--accent--hover", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "border", + "color", + "brand", + "accent", + "hover" + ], + "references": [ + { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.color.brand.accent.200}" + }, + "name": "pf-t--global--color--brand--accent--hover", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "hover" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "hover" + ], + "references": [ + { + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.60}" + }, + "name": "pf-t--global--color--brand--accent--200", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "200" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "200" + ], + "references": [ + { + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#a60000" + }, + "name": "pf-t--color--red--60", + "attributes": { + "category": "color", + "type": "red", + "item": "60" + }, + "path": [ + "color", + "red", + "60" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--border--color--brand--accent--clicked": { + "default": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.clicked}" + }, + "name": "pf-t--global--border--color--brand--accent--clicked", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "border", + "color", + "brand", + "accent", + "clicked" + ], + "references": [ + { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.color.brand.accent.200}" + }, + "name": "pf-t--global--color--brand--accent--clicked", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "clicked" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "clicked" + ], + "references": [ + { + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.60}" + }, + "name": "pf-t--global--color--brand--accent--200", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "200" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "200" + ], + "references": [ + { + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#a60000" + }, + "name": "pf-t--color--red--60", + "attributes": { + "category": "color", + "type": "red", + "item": "60" + }, + "path": [ + "color", + "red", + "60" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--border--color--brand--subtle--default": { + "default": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "#b9dafc", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.subtle.200}" + }, + "name": "pf-t--global--border--color--brand--subtle--default", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "brand", + "state": "subtle" + }, + "path": [ + "global", + "border", + "color", + "brand", + "subtle", + "default" + ], + "references": [ + { + "type": "color", + "value": "#b9dafc", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.20}" + }, + "name": "pf-t--global--color--brand--subtle--200", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "200" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "200" + ], + "references": [ + { + "type": "color", + "value": "#b9dafc", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#b9dafc" + }, + "name": "pf-t--color--blue--20", + "attributes": { + "category": "color", + "type": "blue", + "item": "20" + }, + "path": [ + "color", + "blue", + "20" + ] + } + ] + } + ] + } + }, + "pf-t--global--border--color--brand--subtle--hover": { + "default": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "#4394e5", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.subtle.300}" + }, + "name": "pf-t--global--border--color--brand--subtle--hover", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "brand", + "state": "subtle" + }, + "path": [ + "global", + "border", + "color", + "brand", + "subtle", + "hover" + ], + "references": [ + { + "type": "color", + "value": "#4394e5", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.40}" + }, + "name": "pf-t--global--color--brand--subtle--300", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "300" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "300" + ], + "references": [ + { + "type": "color", + "value": "#4394e5", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#4394e5" + }, + "name": "pf-t--color--blue--40", + "attributes": { + "category": "color", + "type": "blue", + "item": "40" + }, + "path": [ + "color", + "blue", + "40" + ] + } + ] + } + ] + } + }, + "pf-t--global--border--color--brand--subtle--clicked": { + "default": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "#4394e5", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.subtle.300}" + }, + "name": "pf-t--global--border--color--brand--subtle--clicked", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "brand", + "state": "subtle" + }, + "path": [ + "global", + "border", + "color", + "brand", + "subtle", + "clicked" + ], + "references": [ + { + "type": "color", + "value": "#4394e5", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.40}" + }, + "name": "pf-t--global--color--brand--subtle--300", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "300" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "300" + ], + "references": [ + { + "type": "color", + "value": "#4394e5", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#4394e5" + }, + "name": "pf-t--color--blue--40", + "attributes": { + "category": "color", + "type": "blue", + "item": "40" + }, + "path": [ + "color", + "blue", + "40" + ] + } + ] + } + ] + } + }, "pf-t--global--border--color--status--success--default": { "default": { "description": "Use as the default color for borders that convey a success status, like in alerts, notifications or status labels.", @@ -15101,6 +16619,480 @@ ] } }, + "pf-t--global--color--brand--accent--default": { + "default": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "#ee0000", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.color.brand.accent.100}" + }, + "name": "pf-t--global--color--brand--accent--default", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "default" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "default" + ], + "references": [ + { + "type": "color", + "value": "#ee0000", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.50}" + }, + "name": "pf-t--global--color--brand--accent--100", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "100" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "100" + ], + "references": [ + { + "type": "color", + "value": "#ee0000", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ee0000" + }, + "name": "pf-t--color--red--50", + "attributes": { + "category": "color", + "type": "red", + "item": "50" + }, + "path": [ + "color", + "red", + "50" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--brand--accent--hover": { + "default": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.color.brand.accent.200}" + }, + "name": "pf-t--global--color--brand--accent--hover", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "hover" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "hover" + ], + "references": [ + { + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.60}" + }, + "name": "pf-t--global--color--brand--accent--200", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "200" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "200" + ], + "references": [ + { + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#a60000" + }, + "name": "pf-t--color--red--60", + "attributes": { + "category": "color", + "type": "red", + "item": "60" + }, + "path": [ + "color", + "red", + "60" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--brand--accent--clicked": { + "default": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.color.brand.accent.200}" + }, + "name": "pf-t--global--color--brand--accent--clicked", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "clicked" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "clicked" + ], + "references": [ + { + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.60}" + }, + "name": "pf-t--global--color--brand--accent--200", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "200" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "200" + ], + "references": [ + { + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#a60000" + }, + "name": "pf-t--color--red--60", + "attributes": { + "category": "color", + "type": "red", + "item": "60" + }, + "path": [ + "color", + "red", + "60" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--default": { + "default": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "#e0f0ff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.color.brand.subtle.100}" + }, + "name": "pf-t--global--color--brand--subtle--default", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "default" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "default" + ], + "references": [ + { + "type": "color", + "value": "#e0f0ff", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.10}" + }, + "name": "pf-t--global--color--brand--subtle--100", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "100" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "100" + ], + "references": [ + { + "type": "color", + "value": "#e0f0ff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#e0f0ff" + }, + "name": "pf-t--color--blue--10", + "attributes": { + "category": "color", + "type": "blue", + "item": "10" + }, + "path": [ + "color", + "blue", + "10" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--hover": { + "default": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "#b9dafc", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.color.brand.subtle.200}" + }, + "name": "pf-t--global--color--brand--subtle--hover", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "hover" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "hover" + ], + "references": [ + { + "type": "color", + "value": "#b9dafc", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.20}" + }, + "name": "pf-t--global--color--brand--subtle--200", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "200" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "200" + ], + "references": [ + { + "type": "color", + "value": "#b9dafc", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#b9dafc" + }, + "name": "pf-t--color--blue--20", + "attributes": { + "category": "color", + "type": "blue", + "item": "20" + }, + "path": [ + "color", + "blue", + "20" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--clicked": { + "default": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "#b9dafc", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.color.brand.subtle.200}" + }, + "name": "pf-t--global--color--brand--subtle--clicked", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "clicked" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "clicked" + ], + "references": [ + { + "type": "color", + "value": "#b9dafc", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.20}" + }, + "name": "pf-t--global--color--brand--subtle--200", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "200" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "200" + ], + "references": [ + { + "type": "color", + "value": "#b9dafc", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#b9dafc" + }, + "name": "pf-t--color--blue--20", + "attributes": { + "category": "color", + "type": "blue", + "item": "20" + }, + "path": [ + "color", + "blue", + "20" + ] + } + ] + } + ] + } + }, "pf-t--global--color--brand--default": { "default": { "description": "Use this color for elements that you want to reinforce your brand", @@ -19310,41 +21302,515 @@ "type": "color", "value": "{color.purple.20}" }, - "name": "pf-t--global--color--nonstatus--purple--100", + "name": "pf-t--global--color--nonstatus--purple--100", + "attributes": { + "category": "global", + "type": "color", + "item": "nonstatus", + "subitem": "purple", + "state": "100" + }, + "path": [ + "global", + "color", + "nonstatus", + "purple", + "100" + ], + "references": [ + { + "type": "color", + "value": "#d0c5f4", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#d0c5f4" + }, + "name": "pf-t--color--purple--20", + "attributes": { + "category": "color", + "type": "purple", + "item": "20" + }, + "path": [ + "color", + "purple", + "20" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--nonstatus--purple--hover": { + "default": { + "description": "Use as the hover state color for any element that uses the non status purple background color.", + "type": "color", + "value": "#b6a6e9", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the hover state color for any element that uses the non status purple background color.", + "type": "color", + "value": "{global.color.nonstatus.purple.200}" + }, + "name": "pf-t--global--color--nonstatus--purple--hover", + "attributes": { + "category": "global", + "type": "color", + "item": "nonstatus", + "subitem": "purple", + "state": "hover" + }, + "path": [ + "global", + "color", + "nonstatus", + "purple", + "hover" + ], + "references": [ + { + "type": "color", + "value": "#b6a6e9", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.purple.30}" + }, + "name": "pf-t--global--color--nonstatus--purple--200", + "attributes": { + "category": "global", + "type": "color", + "item": "nonstatus", + "subitem": "purple", + "state": "200" + }, + "path": [ + "global", + "color", + "nonstatus", + "purple", + "200" + ], + "references": [ + { + "type": "color", + "value": "#b6a6e9", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#b6a6e9" + }, + "name": "pf-t--color--purple--30", + "attributes": { + "category": "color", + "type": "purple", + "item": "30" + }, + "path": [ + "color", + "purple", + "30" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--nonstatus--purple--clicked": { + "default": { + "description": "Use as the clicked state color for any element that uses the non status purple background color.", + "type": "color", + "value": "#b6a6e9", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the clicked state color for any element that uses the non status purple background color.", + "type": "color", + "value": "{global.color.nonstatus.purple.200}" + }, + "name": "pf-t--global--color--nonstatus--purple--clicked", + "attributes": { + "category": "global", + "type": "color", + "item": "nonstatus", + "subitem": "purple", + "state": "clicked" + }, + "path": [ + "global", + "color", + "nonstatus", + "purple", + "clicked" + ], + "references": [ + { + "type": "color", + "value": "#b6a6e9", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.purple.30}" + }, + "name": "pf-t--global--color--nonstatus--purple--200", + "attributes": { + "category": "global", + "type": "color", + "item": "nonstatus", + "subitem": "purple", + "state": "200" + }, + "path": [ + "global", + "color", + "nonstatus", + "purple", + "200" + ], + "references": [ + { + "type": "color", + "value": "#b6a6e9", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#b6a6e9" + }, + "name": "pf-t--color--purple--30", + "attributes": { + "category": "color", + "type": "purple", + "item": "30" + }, + "path": [ + "color", + "purple", + "30" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--nonstatus--gray--default": { + "default": { + "description": "Use as the default background color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels, banners, etc.)", + "type": "color", + "value": "#e0e0e0", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the default background color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels, banners, etc.)", + "type": "color", + "value": "{global.color.nonstatus.gray.100}" + }, + "name": "pf-t--global--color--nonstatus--gray--default", + "attributes": { + "category": "global", + "type": "color", + "item": "nonstatus", + "subitem": "gray", + "state": "default" + }, + "path": [ + "global", + "color", + "nonstatus", + "gray", + "default" + ], + "references": [ + { + "type": "color", + "value": "#e0e0e0", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.20}" + }, + "name": "pf-t--global--color--nonstatus--gray--100", + "attributes": { + "category": "global", + "type": "color", + "item": "nonstatus", + "subitem": "gray", + "state": "100" + }, + "path": [ + "global", + "color", + "nonstatus", + "gray", + "100" + ], + "references": [ + { + "type": "color", + "value": "#e0e0e0", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#e0e0e0" + }, + "name": "pf-t--color--gray--20", + "attributes": { + "category": "color", + "type": "gray", + "item": "20" + }, + "path": [ + "color", + "gray", + "20" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--nonstatus--gray--hover": { + "default": { + "description": "Use as the hover state color for any element that uses the non status gray background color.", + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the hover state color for any element that uses the non status gray background color.", + "type": "color", + "value": "{global.color.nonstatus.gray.200}" + }, + "name": "pf-t--global--color--nonstatus--gray--hover", + "attributes": { + "category": "global", + "type": "color", + "item": "nonstatus", + "subitem": "gray", + "state": "hover" + }, + "path": [ + "global", + "color", + "nonstatus", + "gray", + "hover" + ], + "references": [ + { + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.30}" + }, + "name": "pf-t--global--color--nonstatus--gray--200", + "attributes": { + "category": "global", + "type": "color", + "item": "nonstatus", + "subitem": "gray", + "state": "200" + }, + "path": [ + "global", + "color", + "nonstatus", + "gray", + "200" + ], + "references": [ + { + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#c7c7c7" + }, + "name": "pf-t--color--gray--30", + "attributes": { + "category": "color", + "type": "gray", + "item": "30" + }, + "path": [ + "color", + "gray", + "30" + ] + } + ] + } + ] + } + }, + "pf-t--global--color--nonstatus--gray--clicked": { + "default": { + "description": "Use as the clicked state color for any element that uses the non status gray background color.", + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the clicked state color for any element that uses the non status gray background color.", + "type": "color", + "value": "{global.color.nonstatus.gray.200}" + }, + "name": "pf-t--global--color--nonstatus--gray--clicked", + "attributes": { + "category": "global", + "type": "color", + "item": "nonstatus", + "subitem": "gray", + "state": "clicked" + }, + "path": [ + "global", + "color", + "nonstatus", + "gray", + "clicked" + ], + "references": [ + { + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.30}" + }, + "name": "pf-t--global--color--nonstatus--gray--200", + "attributes": { + "category": "global", + "type": "color", + "item": "nonstatus", + "subitem": "gray", + "state": "200" + }, + "path": [ + "global", + "color", + "nonstatus", + "gray", + "200" + ], + "references": [ + { + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#c7c7c7" + }, + "name": "pf-t--color--gray--30", + "attributes": { + "category": "color", + "type": "gray", + "item": "30" + }, + "path": [ + "color", + "gray", + "30" + ] + } + ] + } + ] + } + }, + "pf-t--global--text--color--link--default": { + "default": { + "description": "Use as the default text color for links.", + "type": "color", + "value": "#0066cc", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the default text color for links.", + "type": "color", + "value": "{global.text.color.link.100}" + }, + "name": "pf-t--global--text--color--link--default", + "attributes": { + "category": "global", + "type": "text", + "item": "color", + "subitem": "link", + "state": "default" + }, + "path": [ + "global", + "text", + "color", + "link", + "default" + ], + "references": [ + { + "type": "color", + "value": "#0066cc", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.50}" + }, + "name": "pf-t--global--text--color--link--100", "attributes": { "category": "global", - "type": "color", - "item": "nonstatus", - "subitem": "purple", + "type": "text", + "item": "color", + "subitem": "link", "state": "100" }, "path": [ "global", + "text", "color", - "nonstatus", - "purple", + "link", "100" ], "references": [ { "type": "color", - "value": "#d0c5f4", + "value": "#0066cc", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#d0c5f4" + "value": "#0066cc" }, - "name": "pf-t--color--purple--20", + "name": "pf-t--color--blue--50", "attributes": { "category": "color", - "type": "purple", - "item": "20" + "type": "blue", + "item": "50" }, "path": [ "color", - "purple", - "20" + "blue", + "50" ] } ] @@ -19352,78 +21818,78 @@ ] } }, - "pf-t--global--color--nonstatus--purple--hover": { + "pf-t--global--text--color--link--hover": { "default": { - "description": "Use as the hover state color for any element that uses the non status purple background color.", + "description": "Use as the hover state text color for links.", "type": "color", - "value": "#b6a6e9", + "value": "#004d99", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for any element that uses the non status purple background color.", + "description": "Use as the hover state text color for links.", "type": "color", - "value": "{global.color.nonstatus.purple.200}" + "value": "{global.text.color.link.200}" }, - "name": "pf-t--global--color--nonstatus--purple--hover", + "name": "pf-t--global--text--color--link--hover", "attributes": { "category": "global", - "type": "color", - "item": "nonstatus", - "subitem": "purple", + "type": "text", + "item": "color", + "subitem": "link", "state": "hover" }, "path": [ "global", + "text", "color", - "nonstatus", - "purple", + "link", "hover" ], "references": [ { "type": "color", - "value": "#b6a6e9", + "value": "#004d99", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.purple.30}" + "value": "{color.blue.60}" }, - "name": "pf-t--global--color--nonstatus--purple--200", + "name": "pf-t--global--text--color--link--200", "attributes": { "category": "global", - "type": "color", - "item": "nonstatus", - "subitem": "purple", + "type": "text", + "item": "color", + "subitem": "link", "state": "200" }, "path": [ "global", + "text", "color", - "nonstatus", - "purple", + "link", "200" ], "references": [ { "type": "color", - "value": "#b6a6e9", + "value": "#004d99", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#b6a6e9" + "value": "#004d99" }, - "name": "pf-t--color--purple--30", + "name": "pf-t--color--blue--60", "attributes": { "category": "color", - "type": "purple", - "item": "30" + "type": "blue", + "item": "60" }, "path": [ "color", - "purple", - "30" + "blue", + "60" ] } ] @@ -19431,78 +21897,78 @@ ] } }, - "pf-t--global--color--nonstatus--purple--clicked": { + "pf-t--global--text--color--link--visited": { "default": { - "description": "Use as the clicked state color for any element that uses the non status purple background color.", + "description": "Use as the color to indicate that a link has been visited.", "type": "color", - "value": "#b6a6e9", + "value": "#5e40be", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for any element that uses the non status purple background color.", + "description": "Use as the color to indicate that a link has been visited.", "type": "color", - "value": "{global.color.nonstatus.purple.200}" + "value": "{global.text.color.link.300}" }, - "name": "pf-t--global--color--nonstatus--purple--clicked", + "name": "pf-t--global--text--color--link--visited", "attributes": { "category": "global", - "type": "color", - "item": "nonstatus", - "subitem": "purple", - "state": "clicked" + "type": "text", + "item": "color", + "subitem": "link", + "state": "visited" }, "path": [ "global", + "text", "color", - "nonstatus", - "purple", - "clicked" + "link", + "visited" ], "references": [ { "type": "color", - "value": "#b6a6e9", + "value": "#5e40be", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.purple.30}" + "value": "{color.purple.50}" }, - "name": "pf-t--global--color--nonstatus--purple--200", + "name": "pf-t--global--text--color--link--300", "attributes": { "category": "global", - "type": "color", - "item": "nonstatus", - "subitem": "purple", - "state": "200" + "type": "text", + "item": "color", + "subitem": "link", + "state": "300" }, "path": [ "global", + "text", "color", - "nonstatus", - "purple", - "200" + "link", + "300" ], "references": [ { "type": "color", - "value": "#b6a6e9", + "value": "#5e40be", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#b6a6e9" + "value": "#5e40be" }, - "name": "pf-t--color--purple--30", + "name": "pf-t--color--purple--50", "attributes": { "category": "color", "type": "purple", - "item": "30" + "item": "50" }, "path": [ "color", "purple", - "30" + "50" ] } ] @@ -19510,78 +21976,103 @@ ] } }, - "pf-t--global--color--nonstatus--gray--default": { + "pf-t--global--text--color--brand--default": { "default": { - "description": "Use as the default background color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels, banners, etc.)", + "description": "Use as the default color for branded text.", "type": "color", - "value": "#e0e0e0", + "value": "#0066cc", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default background color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels, banners, etc.)", + "description": "Use as the default color for branded text.", "type": "color", - "value": "{global.color.nonstatus.gray.100}" + "value": "{global.color.brand.default}" }, - "name": "pf-t--global--color--nonstatus--gray--default", + "name": "pf-t--global--text--color--brand--default", "attributes": { "category": "global", - "type": "color", - "item": "nonstatus", - "subitem": "gray", + "type": "text", + "item": "color", + "subitem": "brand", "state": "default" }, "path": [ "global", + "text", "color", - "nonstatus", - "gray", + "brand", "default" ], "references": [ { + "description": "Use this color for elements that you want to reinforce your brand", "type": "color", - "value": "#e0e0e0", - "filePath": "tokens/default/base.json", + "value": "#0066cc", + "filePath": "tokens/default/semantic.json", "isSource": true, "original": { + "description": "Use this color for elements that you want to reinforce your brand", "type": "color", - "value": "{color.gray.20}" + "value": "{global.color.brand.200}" }, - "name": "pf-t--global--color--nonstatus--gray--100", + "name": "pf-t--global--color--brand--default", "attributes": { "category": "global", "type": "color", - "item": "nonstatus", - "subitem": "gray", - "state": "100" + "item": "brand", + "subitem": "default" }, "path": [ "global", "color", - "nonstatus", - "gray", - "100" + "brand", + "default" ], "references": [ { "type": "color", - "value": "#e0e0e0", - "filePath": "tokens/default/palette.color.json", + "value": "#0066cc", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#e0e0e0" + "value": "{color.blue.50}" }, - "name": "pf-t--color--gray--20", + "name": "pf-t--global--color--brand--200", "attributes": { - "category": "color", - "type": "gray", - "item": "20" + "category": "global", + "type": "color", + "item": "brand", + "subitem": "200" }, "path": [ + "global", "color", - "gray", - "20" + "brand", + "200" + ], + "references": [ + { + "type": "color", + "value": "#0066cc", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#0066cc" + }, + "name": "pf-t--color--blue--50", + "attributes": { + "category": "color", + "type": "blue", + "item": "50" + }, + "path": [ + "color", + "blue", + "50" + ] + } ] } ] @@ -19589,78 +22080,103 @@ ] } }, - "pf-t--global--color--nonstatus--gray--hover": { + "pf-t--global--text--color--brand--hover": { "default": { - "description": "Use as the hover state color for any element that uses the non status gray background color.", + "description": "Use as the hover state color for branded text.", "type": "color", - "value": "#c7c7c7", + "value": "#004d99", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for any element that uses the non status gray background color.", + "description": "Use as the hover state color for branded text.", "type": "color", - "value": "{global.color.nonstatus.gray.200}" + "value": "{global.color.brand.hover}" }, - "name": "pf-t--global--color--nonstatus--gray--hover", + "name": "pf-t--global--text--color--brand--hover", "attributes": { "category": "global", - "type": "color", - "item": "nonstatus", - "subitem": "gray", + "type": "text", + "item": "color", + "subitem": "brand", "state": "hover" }, "path": [ "global", + "text", "color", - "nonstatus", - "gray", + "brand", "hover" ], "references": [ { + "description": "Use as the hover state for elements that have a branded background color", "type": "color", - "value": "#c7c7c7", - "filePath": "tokens/default/base.json", + "value": "#004d99", + "filePath": "tokens/default/semantic.json", "isSource": true, "original": { + "description": "Use as the hover state for elements that have a branded background color", "type": "color", - "value": "{color.gray.30}" + "value": "{global.color.brand.300}" }, - "name": "pf-t--global--color--nonstatus--gray--200", + "name": "pf-t--global--color--brand--hover", "attributes": { "category": "global", "type": "color", - "item": "nonstatus", - "subitem": "gray", - "state": "200" + "item": "brand", + "subitem": "hover" }, "path": [ "global", "color", - "nonstatus", - "gray", - "200" + "brand", + "hover" ], "references": [ { "type": "color", - "value": "#c7c7c7", - "filePath": "tokens/default/palette.color.json", + "value": "#004d99", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#c7c7c7" + "value": "{color.blue.60}" }, - "name": "pf-t--color--gray--30", + "name": "pf-t--global--color--brand--300", "attributes": { - "category": "color", - "type": "gray", - "item": "30" + "category": "global", + "type": "color", + "item": "brand", + "subitem": "300" }, "path": [ + "global", "color", - "gray", - "30" + "brand", + "300" + ], + "references": [ + { + "type": "color", + "value": "#004d99", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#004d99" + }, + "name": "pf-t--color--blue--60", + "attributes": { + "category": "color", + "type": "blue", + "item": "60" + }, + "path": [ + "color", + "blue", + "60" + ] + } ] } ] @@ -19668,78 +22184,103 @@ ] } }, - "pf-t--global--color--nonstatus--gray--clicked": { + "pf-t--global--text--color--brand--clicked": { "default": { - "description": "Use as the clicked state color for any element that uses the non status gray background color.", + "description": "Use as the clicked state color for branded text.", "type": "color", - "value": "#c7c7c7", + "value": "#004d99", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for any element that uses the non status gray background color.", + "description": "Use as the clicked state color for branded text.", "type": "color", - "value": "{global.color.nonstatus.gray.200}" + "value": "{global.color.brand.clicked}" }, - "name": "pf-t--global--color--nonstatus--gray--clicked", + "name": "pf-t--global--text--color--brand--clicked", "attributes": { "category": "global", - "type": "color", - "item": "nonstatus", - "subitem": "gray", + "type": "text", + "item": "color", + "subitem": "brand", "state": "clicked" }, "path": [ "global", + "text", "color", - "nonstatus", - "gray", + "brand", "clicked" ], "references": [ { + "description": "Use as the clicked state for elements that have a brand background color", "type": "color", - "value": "#c7c7c7", - "filePath": "tokens/default/base.json", + "value": "#004d99", + "filePath": "tokens/default/semantic.json", "isSource": true, "original": { + "description": "Use as the clicked state for elements that have a brand background color", "type": "color", - "value": "{color.gray.30}" + "value": "{global.color.brand.300}" }, - "name": "pf-t--global--color--nonstatus--gray--200", + "name": "pf-t--global--color--brand--clicked", "attributes": { "category": "global", "type": "color", - "item": "nonstatus", - "subitem": "gray", - "state": "200" + "item": "brand", + "subitem": "clicked" }, "path": [ "global", "color", - "nonstatus", - "gray", - "200" + "brand", + "clicked" ], "references": [ { "type": "color", - "value": "#c7c7c7", - "filePath": "tokens/default/palette.color.json", + "value": "#004d99", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#c7c7c7" + "value": "{color.blue.60}" }, - "name": "pf-t--color--gray--30", + "name": "pf-t--global--color--brand--300", "attributes": { - "category": "color", - "type": "gray", - "item": "30" + "category": "global", + "type": "color", + "item": "brand", + "subitem": "300" }, "path": [ + "global", "color", - "gray", - "30" + "brand", + "300" + ], + "references": [ + { + "type": "color", + "value": "#004d99", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#004d99" + }, + "name": "pf-t--color--blue--60", + "attributes": { + "category": "color", + "type": "blue", + "item": "60" + }, + "path": [ + "color", + "blue", + "60" + ] + } ] } ] @@ -19747,78 +22288,74 @@ ] } }, - "pf-t--global--text--color--link--default": { + "pf-t--global--text--color--regular": { "default": { - "description": "Use as the default text color for links.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "#0066cc", + "value": "#151515", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default text color for links.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "{global.text.color.link.100}" + "value": "{global.text.color.100}" }, - "name": "pf-t--global--text--color--link--default", + "name": "pf-t--global--text--color--regular", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "link", - "state": "default" + "subitem": "regular" }, "path": [ "global", "text", "color", - "link", - "default" + "regular" ], "references": [ { "type": "color", - "value": "#0066cc", + "value": "#151515", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.blue.50}" + "value": "{color.gray.95}" }, - "name": "pf-t--global--text--color--link--100", + "name": "pf-t--global--text--color--100", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "link", - "state": "100" + "subitem": "100" }, "path": [ "global", "text", "color", - "link", "100" ], "references": [ { "type": "color", - "value": "#0066cc", + "value": "#151515", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#0066cc" + "value": "#151515" }, - "name": "pf-t--color--blue--50", + "name": "pf-t--color--gray--95", "attributes": { "category": "color", - "type": "blue", - "item": "50" + "type": "gray", + "item": "95" }, "path": [ "color", - "blue", - "50" + "gray", + "95" ] } ] @@ -19826,77 +22363,73 @@ ] } }, - "pf-t--global--text--color--link--hover": { + "pf-t--global--text--color--subtle": { "default": { - "description": "Use as the hover state text color for links.", + "description": "Use as a subtle text color for text in an element that is secondary or less important, like descriptions or inactive tab labels.", "type": "color", - "value": "#004d99", + "value": "#4d4d4d", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state text color for links.", + "description": "Use as a subtle text color for text in an element that is secondary or less important, like descriptions or inactive tab labels.", "type": "color", - "value": "{global.text.color.link.200}" + "value": "{global.text.color.200}" }, - "name": "pf-t--global--text--color--link--hover", + "name": "pf-t--global--text--color--subtle", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "link", - "state": "hover" + "subitem": "subtle" }, "path": [ "global", "text", "color", - "link", - "hover" + "subtle" ], "references": [ { "type": "color", - "value": "#004d99", + "value": "#4d4d4d", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.blue.60}" + "value": "{color.gray.60}" }, - "name": "pf-t--global--text--color--link--200", + "name": "pf-t--global--text--color--200", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "link", - "state": "200" + "subitem": "200" }, "path": [ "global", "text", "color", - "link", "200" ], "references": [ { "type": "color", - "value": "#004d99", + "value": "#4d4d4d", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#004d99" + "value": "#4d4d4d" }, - "name": "pf-t--color--blue--60", + "name": "pf-t--color--gray--60", "attributes": { "category": "color", - "type": "blue", + "type": "gray", "item": "60" }, "path": [ "color", - "blue", + "gray", "60" ] } @@ -19905,78 +22438,72 @@ ] } }, - "pf-t--global--text--color--link--visited": { + "pf-t--global--text--color--inverse": { "default": { - "description": "Use as the color to indicate that a link has been visited.", + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "#5e40be", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color to indicate that a link has been visited.", + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "{global.text.color.link.300}" + "value": "{global.text.color.300}" }, - "name": "pf-t--global--text--color--link--visited", + "name": "pf-t--global--text--color--inverse", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "link", - "state": "visited" + "subitem": "inverse" }, "path": [ "global", "text", "color", - "link", - "visited" + "inverse" ], "references": [ { "type": "color", - "value": "#5e40be", + "value": "#ffffff", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.purple.50}" + "value": "{color.white}" }, - "name": "pf-t--global--text--color--link--300", + "name": "pf-t--global--text--color--300", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "link", - "state": "300" + "subitem": "300" }, "path": [ "global", "text", "color", - "link", "300" ], "references": [ { "type": "color", - "value": "#5e40be", + "value": "#ffffff", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#5e40be" + "value": "#ffffff" }, - "name": "pf-t--color--purple--50", + "name": "pf-t--color--white", "attributes": { "category": "color", - "type": "purple", - "item": "50" + "type": "white" }, "path": [ "color", - "purple", - "50" + "white" ] } ] @@ -19984,101 +22511,99 @@ ] } }, - "pf-t--global--text--color--brand--default": { + "pf-t--global--text--color--on-brand--default": { "default": { - "description": "Use as the default color for branded text.", + "description": "Use as the default color for text placed on a brand-colored background.", "type": "color", - "value": "#0066cc", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for branded text.", + "description": "Use as the default color for text placed on a brand-colored background.", "type": "color", - "value": "{global.color.brand.default}" + "value": "{global.text.color.inverse}" }, - "name": "pf-t--global--text--color--brand--default", + "name": "pf-t--global--text--color--on-brand--default", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "brand", + "subitem": "on-brand", "state": "default" }, "path": [ "global", "text", "color", - "brand", + "on-brand", "default" ], "references": [ { - "description": "Use this color for elements that you want to reinforce your brand", + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "#0066cc", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use this color for elements that you want to reinforce your brand", + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "{global.color.brand.200}" + "value": "{global.text.color.300}" }, - "name": "pf-t--global--color--brand--default", + "name": "pf-t--global--text--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "brand", - "subitem": "default" + "type": "text", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "text", "color", - "brand", - "default" + "inverse" ], "references": [ { "type": "color", - "value": "#0066cc", + "value": "#ffffff", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.blue.50}" + "value": "{color.white}" }, - "name": "pf-t--global--color--brand--200", + "name": "pf-t--global--text--color--300", "attributes": { "category": "global", - "type": "color", - "item": "brand", - "subitem": "200" + "type": "text", + "item": "color", + "subitem": "300" }, "path": [ "global", + "text", "color", - "brand", - "200" + "300" ], "references": [ { "type": "color", - "value": "#0066cc", + "value": "#ffffff", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#0066cc" + "value": "#ffffff" }, - "name": "pf-t--color--blue--50", + "name": "pf-t--color--white", "attributes": { "category": "color", - "type": "blue", - "item": "50" + "type": "white" }, "path": [ "color", - "blue", - "50" + "white" ] } ] @@ -20088,101 +22613,99 @@ ] } }, - "pf-t--global--text--color--brand--hover": { + "pf-t--global--text--color--on-brand--hover": { "default": { - "description": "Use as the hover state color for branded text.", + "description": "Use as the hover state color for text placed on a brand-colored background.", "type": "color", - "value": "#004d99", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for branded text.", + "description": "Use as the hover state color for text placed on a brand-colored background.", "type": "color", - "value": "{global.color.brand.hover}" + "value": "{global.text.color.inverse}" }, - "name": "pf-t--global--text--color--brand--hover", + "name": "pf-t--global--text--color--on-brand--hover", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "brand", + "subitem": "on-brand", "state": "hover" }, "path": [ "global", "text", "color", - "brand", + "on-brand", "hover" ], "references": [ { - "description": "Use as the hover state for elements that have a branded background color", + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "#004d99", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state for elements that have a branded background color", + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "{global.color.brand.300}" + "value": "{global.text.color.300}" }, - "name": "pf-t--global--color--brand--hover", + "name": "pf-t--global--text--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "brand", - "subitem": "hover" + "type": "text", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "text", "color", - "brand", - "hover" + "inverse" ], "references": [ { "type": "color", - "value": "#004d99", + "value": "#ffffff", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.blue.60}" + "value": "{color.white}" }, - "name": "pf-t--global--color--brand--300", + "name": "pf-t--global--text--color--300", "attributes": { "category": "global", - "type": "color", - "item": "brand", + "type": "text", + "item": "color", "subitem": "300" }, "path": [ "global", + "text", "color", - "brand", "300" ], "references": [ { "type": "color", - "value": "#004d99", + "value": "#ffffff", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#004d99" + "value": "#ffffff" }, - "name": "pf-t--color--blue--60", + "name": "pf-t--color--white", "attributes": { "category": "color", - "type": "blue", - "item": "60" + "type": "white" }, "path": [ "color", - "blue", - "60" + "white" ] } ] @@ -20192,101 +22715,99 @@ ] } }, - "pf-t--global--text--color--brand--clicked": { + "pf-t--global--text--color--on-brand--clicked": { "default": { - "description": "Use as the clicked state color for branded text.", + "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", - "value": "#004d99", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for branded text.", + "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", - "value": "{global.color.brand.clicked}" + "value": "{global.text.color.inverse}" }, - "name": "pf-t--global--text--color--brand--clicked", + "name": "pf-t--global--text--color--on-brand--clicked", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "brand", + "subitem": "on-brand", "state": "clicked" }, "path": [ "global", "text", "color", - "brand", + "on-brand", "clicked" ], "references": [ { - "description": "Use as the clicked state for elements that have a brand background color", + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "#004d99", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state for elements that have a brand background color", + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "{global.color.brand.300}" + "value": "{global.text.color.300}" }, - "name": "pf-t--global--color--brand--clicked", + "name": "pf-t--global--text--color--inverse", "attributes": { "category": "global", - "type": "color", - "item": "brand", - "subitem": "clicked" + "type": "text", + "item": "color", + "subitem": "inverse" }, "path": [ "global", + "text", "color", - "brand", - "clicked" + "inverse" ], "references": [ { "type": "color", - "value": "#004d99", + "value": "#ffffff", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.blue.60}" + "value": "{color.white}" }, - "name": "pf-t--global--color--brand--300", + "name": "pf-t--global--text--color--300", "attributes": { "category": "global", - "type": "color", - "item": "brand", + "type": "text", + "item": "color", "subitem": "300" }, "path": [ "global", + "text", "color", - "brand", "300" ], "references": [ { "type": "color", - "value": "#004d99", + "value": "#ffffff", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#004d99" + "value": "#ffffff" }, - "name": "pf-t--color--blue--60", + "name": "pf-t--color--white", "attributes": { "category": "color", - "type": "blue", - "item": "60" + "type": "white" }, "path": [ "color", - "blue", - "60" + "white" ] } ] @@ -20296,74 +22817,102 @@ ] } }, - "pf-t--global--text--color--regular": { + "pf-t--global--text--color--on-brand--accent--default": { "default": { - "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", + "description": "Use as the default color for text placed on a brand-colored background.", "type": "color", - "value": "#151515", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", + "description": "Use as the default color for text placed on a brand-colored background.", "type": "color", - "value": "{global.text.color.100}" + "value": "{global.text.color.inverse}" }, - "name": "pf-t--global--text--color--regular", + "name": "pf-t--global--text--color--on-brand--accent--default", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "regular" + "subitem": "on-brand", + "state": "accent" }, "path": [ "global", "text", "color", - "regular" + "on-brand", + "accent", + "default" ], "references": [ { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "#151515", - "filePath": "tokens/default/base.json", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", "isSource": true, "original": { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "{color.gray.95}" + "value": "{global.text.color.300}" }, - "name": "pf-t--global--text--color--100", + "name": "pf-t--global--text--color--inverse", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "100" + "subitem": "inverse" }, "path": [ "global", "text", "color", - "100" + "inverse" ], "references": [ { "type": "color", - "value": "#151515", - "filePath": "tokens/default/palette.color.json", + "value": "#ffffff", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#151515" + "value": "{color.white}" }, - "name": "pf-t--color--gray--95", + "name": "pf-t--global--text--color--300", "attributes": { - "category": "color", - "type": "gray", - "item": "95" + "category": "global", + "type": "text", + "item": "color", + "subitem": "300" }, "path": [ + "global", + "text", "color", - "gray", - "95" + "300" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } ] } ] @@ -20371,74 +22920,102 @@ ] } }, - "pf-t--global--text--color--subtle": { + "pf-t--global--text--color--on-brand--accent--hover": { "default": { - "description": "Use as a subtle text color for text in an element that is secondary or less important, like descriptions or inactive tab labels.", + "description": "Use as the hover state color for text placed on a brand-colored background.", "type": "color", - "value": "#4d4d4d", + "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as a subtle text color for text in an element that is secondary or less important, like descriptions or inactive tab labels.", + "description": "Use as the hover state color for text placed on a brand-colored background.", "type": "color", - "value": "{global.text.color.200}" + "value": "{global.text.color.inverse}" }, - "name": "pf-t--global--text--color--subtle", + "name": "pf-t--global--text--color--on-brand--accent--hover", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "subtle" + "subitem": "on-brand", + "state": "accent" }, "path": [ "global", "text", "color", - "subtle" + "on-brand", + "accent", + "hover" ], "references": [ { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "#4d4d4d", - "filePath": "tokens/default/base.json", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", "isSource": true, "original": { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "{color.gray.60}" + "value": "{global.text.color.300}" }, - "name": "pf-t--global--text--color--200", + "name": "pf-t--global--text--color--inverse", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "200" + "subitem": "inverse" }, "path": [ "global", "text", "color", - "200" + "inverse" ], "references": [ { "type": "color", - "value": "#4d4d4d", - "filePath": "tokens/default/palette.color.json", + "value": "#ffffff", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#4d4d4d" + "value": "{color.white}" }, - "name": "pf-t--color--gray--60", + "name": "pf-t--global--text--color--300", "attributes": { - "category": "color", - "type": "gray", - "item": "60" + "category": "global", + "type": "text", + "item": "color", + "subitem": "300" }, "path": [ + "global", + "text", "color", - "gray", - "60" + "300" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } ] } ] @@ -20446,72 +23023,102 @@ ] } }, - "pf-t--global--text--color--inverse": { + "pf-t--global--text--color--on-brand--accent--clicked": { "default": { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", "value": "#ffffff", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", - "value": "{global.text.color.300}" + "value": "{global.text.color.inverse}" }, - "name": "pf-t--global--text--color--inverse", + "name": "pf-t--global--text--color--on-brand--accent--clicked", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "inverse" + "subitem": "on-brand", + "state": "accent" }, "path": [ "global", "text", "color", - "inverse" + "on-brand", + "accent", + "clicked" ], "references": [ { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", "value": "#ffffff", - "filePath": "tokens/default/base.json", + "filePath": "tokens/default/semantic.json", "isSource": true, "original": { + "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", "type": "color", - "value": "{color.white}" + "value": "{global.text.color.300}" }, - "name": "pf-t--global--text--color--300", + "name": "pf-t--global--text--color--inverse", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "300" + "subitem": "inverse" }, "path": [ "global", "text", "color", - "300" + "inverse" ], "references": [ { "type": "color", "value": "#ffffff", - "filePath": "tokens/default/palette.color.json", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "{color.white}" }, - "name": "pf-t--color--white", + "name": "pf-t--global--text--color--300", "attributes": { - "category": "color", - "type": "white" + "category": "global", + "type": "text", + "item": "color", + "subitem": "300" }, "path": [ + "global", + "text", "color", - "white" + "300" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ffffff" + }, + "name": "pf-t--color--white", + "attributes": { + "category": "color", + "type": "white" + }, + "path": [ + "color", + "white" + ] + } ] } ] @@ -20519,99 +23126,102 @@ ] } }, - "pf-t--global--text--color--on-brand--default": { + "pf-t--global--text--color--on-brand--subtle--default": { "default": { "description": "Use as the default color for text placed on a brand-colored background.", "type": "color", - "value": "#ffffff", + "value": "#151515", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { "description": "Use as the default color for text placed on a brand-colored background.", "type": "color", - "value": "{global.text.color.inverse}" + "value": "{global.text.color.regular}" }, - "name": "pf-t--global--text--color--on-brand--default", + "name": "pf-t--global--text--color--on-brand--subtle--default", "attributes": { "category": "global", "type": "text", "item": "color", "subitem": "on-brand", - "state": "default" + "state": "subtle" }, "path": [ "global", "text", "color", "on-brand", + "subtle", "default" ], "references": [ { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "#ffffff", + "value": "#151515", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "{global.text.color.300}" + "value": "{global.text.color.100}" }, - "name": "pf-t--global--text--color--inverse", + "name": "pf-t--global--text--color--regular", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "text", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#151515", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.gray.95}" }, - "name": "pf-t--global--text--color--300", + "name": "pf-t--global--text--color--100", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "300" + "subitem": "100" }, "path": [ "global", "text", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#151515", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#151515" }, - "name": "pf-t--color--white", + "name": "pf-t--color--gray--95", "attributes": { "category": "color", - "type": "white" + "type": "gray", + "item": "95" }, "path": [ "color", - "white" + "gray", + "95" ] } ] @@ -20621,99 +23231,102 @@ ] } }, - "pf-t--global--text--color--on-brand--hover": { + "pf-t--global--text--color--on-brand--subtle--hover": { "default": { "description": "Use as the hover state color for text placed on a brand-colored background.", "type": "color", - "value": "#ffffff", + "value": "#151515", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { "description": "Use as the hover state color for text placed on a brand-colored background.", "type": "color", - "value": "{global.text.color.inverse}" + "value": "{global.text.color.regular}" }, - "name": "pf-t--global--text--color--on-brand--hover", + "name": "pf-t--global--text--color--on-brand--subtle--hover", "attributes": { "category": "global", "type": "text", "item": "color", "subitem": "on-brand", - "state": "hover" + "state": "subtle" }, "path": [ "global", "text", "color", "on-brand", + "subtle", "hover" ], "references": [ { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "#ffffff", + "value": "#151515", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "{global.text.color.300}" + "value": "{global.text.color.100}" }, - "name": "pf-t--global--text--color--inverse", + "name": "pf-t--global--text--color--regular", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "text", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#151515", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.gray.95}" }, - "name": "pf-t--global--text--color--300", + "name": "pf-t--global--text--color--100", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "300" + "subitem": "100" }, "path": [ "global", "text", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#151515", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#151515" }, - "name": "pf-t--color--white", + "name": "pf-t--color--gray--95", "attributes": { "category": "color", - "type": "white" + "type": "gray", + "item": "95" }, "path": [ "color", - "white" + "gray", + "95" ] } ] @@ -20723,99 +23336,102 @@ ] } }, - "pf-t--global--text--color--on-brand--clicked": { + "pf-t--global--text--color--on-brand--subtle--clicked": { "default": { "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", - "value": "#ffffff", + "value": "#151515", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", - "value": "{global.text.color.inverse}" + "value": "{global.text.color.regular}" }, - "name": "pf-t--global--text--color--on-brand--clicked", + "name": "pf-t--global--text--color--on-brand--subtle--clicked", "attributes": { "category": "global", "type": "text", "item": "color", "subitem": "on-brand", - "state": "clicked" + "state": "subtle" }, "path": [ "global", "text", "color", "on-brand", + "subtle", "clicked" ], "references": [ { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "#ffffff", + "value": "#151515", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color of text that is placed on an inverse background color, like tooltips.", + "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.", "type": "color", - "value": "{global.text.color.300}" + "value": "{global.text.color.100}" }, - "name": "pf-t--global--text--color--inverse", + "name": "pf-t--global--text--color--regular", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "inverse" + "subitem": "regular" }, "path": [ "global", "text", "color", - "inverse" + "regular" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#151515", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.gray.95}" }, - "name": "pf-t--global--text--color--300", + "name": "pf-t--global--text--color--100", "attributes": { "category": "global", "type": "text", "item": "color", - "subitem": "300" + "subitem": "100" }, "path": [ "global", "text", "color", - "300" + "100" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#151515", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#151515" }, - "name": "pf-t--color--white", + "name": "pf-t--color--gray--95", "attributes": { "category": "color", - "type": "white" + "type": "gray", + "item": "95" }, "path": [ "color", - "white" + "gray", + "95" ] } ] @@ -30490,269 +33106,108 @@ ] } }, - "pf-t--global--icon--size--3xl": { - "default": { - "description": "Use for triple extra large icons.", - "type": "number", - "value": "6rem", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": true, - "original": { - "description": "Use for triple extra large icons.", - "type": "number", - "value": "{global.icon.size.500}" - }, - "name": "pf-t--global--icon--size--3xl", - "attributes": { - "category": "global", - "type": "icon", - "item": "size", - "subitem": "3xl" - }, - "path": [ - "global", - "icon", - "size", - "3xl" - ], - "references": [ - { - "type": "number", - "value": "6rem", - "filePath": "tokens/default/base.dimension.json", - "isSource": true, - "original": { - "type": "number", - "value": 96 - }, - "name": "pf-t--global--icon--size--500", - "attributes": { - "category": "global", - "type": "icon", - "item": "size", - "subitem": "500" - }, - "path": [ - "global", - "icon", - "size", - "500" - ] - } - ] - } - }, - "pf-t--global--icon--size--font--body--sm": { - "default": { - "description": "Use for icons that are placed inline with small body text", - "type": "number", - "value": "0.75rem", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": true, - "original": { - "description": "Use for icons that are placed inline with small body text", - "type": "number", - "value": "{global.font.size.body.sm}" - }, - "name": "pf-t--global--icon--size--font--body--sm", - "attributes": { - "category": "global", - "type": "icon", - "item": "size", - "subitem": "font", - "state": "body" - }, - "path": [ - "global", - "icon", - "size", - "font", - "body", - "sm" - ], - "references": [ - { - "description": "Use for a smaller font size in body sections.", - "type": "number", - "value": "0.75rem", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": true, - "original": { - "description": "Use for a smaller font size in body sections.", - "type": "number", - "value": "{global.font.size.xs}" - }, - "name": "pf-t--global--font--size--body--sm", - "attributes": { - "category": "global", - "type": "font", - "item": "size", - "subitem": "body", - "state": "sm" - }, - "path": [ - "global", - "font", - "size", - "body", - "sm" - ], - "references": [ - { - "type": "number", - "value": "0.75rem", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": true, - "original": { - "type": "number", - "value": "{global.font.size.100}" - }, - "name": "pf-t--global--font--size--xs", - "attributes": { - "category": "global", - "type": "font", - "item": "size", - "subitem": "xs" - }, - "path": [ - "global", - "font", - "size", - "xs" - ], - "references": [ - { - "type": "number", - "value": "0.75rem", - "filePath": "tokens/default/base.dimension.json", - "isSource": true, - "original": { - "type": "number", - "value": 12 - }, - "name": "pf-t--global--font--size--100", - "attributes": { - "category": "global", - "type": "font", - "item": "size", - "subitem": "100" - }, - "path": [ - "global", - "font", - "size", - "100" - ] - } - ] - } - ] - } - ] - } - }, - "pf-t--global--icon--size--font--body--default": { + "pf-t--global--icon--size--font--heading--h1": { "default": { - "description": "Use for icons that are placed inline with default body text", + "description": "Use for icons that are placed inline with first level headings", "type": "number", - "value": "0.875rem", + "value": "1.5rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use for icons that are placed inline with default body text", + "description": "Use for icons that are placed inline with first level headings", "type": "number", - "value": "{global.font.size.body.default}" + "value": "{global.font.size.heading.h1}" }, - "name": "pf-t--global--icon--size--font--body--default", + "name": "pf-t--global--icon--size--font--heading--h1", "attributes": { "category": "global", "type": "icon", "item": "size", "subitem": "font", - "state": "body" + "state": "heading" }, "path": [ "global", "icon", "size", "font", - "body", - "default" + "heading", + "h1" ], "references": [ { - "description": "Use as the default font size in body sections.", + "description": "Use as the font size for first level headings.", "type": "number", - "value": "0.875rem", + "value": "1.5rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the default font size in body sections.", + "description": "Use as the font size for first level headings.", "type": "number", - "value": "{global.font.size.sm}" + "value": "{global.font.size.2xl}" }, - "name": "pf-t--global--font--size--body--default", + "name": "pf-t--global--font--size--heading--h1", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "body", - "state": "default" + "subitem": "heading", + "state": "h1" }, "path": [ "global", "font", "size", - "body", - "default" + "heading", + "h1" ], "references": [ { - "description": "Use as the font size for small text that isn’t a heading or in a body section.", + "description": "Use as the font size for double extra large text that isn’t a heading or in a body section.", "type": "number", - "value": "0.875rem", + "value": "1.5rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the font size for small text that isn’t a heading or in a body section.", + "description": "Use as the font size for double extra large text that isn’t a heading or in a body section.", "type": "number", - "value": "{global.font.size.200}" + "value": "{global.font.size.600}" }, - "name": "pf-t--global--font--size--sm", + "name": "pf-t--global--font--size--2xl", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "sm" + "subitem": "2xl" }, "path": [ "global", "font", "size", - "sm" + "2xl" ], "references": [ { "type": "number", - "value": "0.875rem", + "value": "1.5rem", "filePath": "tokens/default/base.dimension.json", "isSource": true, "original": { "type": "number", - "value": 14 + "value": 24 }, - "name": "pf-t--global--font--size--200", + "name": "pf-t--global--font--size--600", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "200" + "subitem": "600" }, "path": [ "global", "font", "size", - "200" + "600" ] } ] @@ -30762,108 +33217,108 @@ ] } }, - "pf-t--global--icon--size--font--body--lg": { + "pf-t--global--icon--size--font--heading--h2": { "default": { - "description": "Use for icons that are placed inline with large body text", + "description": "Use for icons that are placed inline with second level headings", "type": "number", - "value": "1rem", + "value": "1.25rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use for icons that are placed inline with large body text", + "description": "Use for icons that are placed inline with second level headings", "type": "number", - "value": "{global.font.size.body.lg}" + "value": "{global.font.size.heading.h2}" }, - "name": "pf-t--global--icon--size--font--body--lg", + "name": "pf-t--global--icon--size--font--heading--h2", "attributes": { "category": "global", "type": "icon", "item": "size", "subitem": "font", - "state": "body" + "state": "heading" }, "path": [ "global", "icon", "size", "font", - "body", - "lg" + "heading", + "h2" ], "references": [ { - "description": "Use for a larger font size in body sections.", + "description": "Use as the font size for second level headings.", "type": "number", - "value": "1rem", + "value": "1.25rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use for a larger font size in body sections.", + "description": "Use as the font size for second level headings.", "type": "number", - "value": "{global.font.size.md}" + "value": "{global.font.size.xl}" }, - "name": "pf-t--global--font--size--body--lg", + "name": "pf-t--global--font--size--heading--h2", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "body", - "state": "lg" + "subitem": "heading", + "state": "h2" }, "path": [ "global", "font", "size", - "body", - "lg" + "heading", + "h2" ], "references": [ { - "description": "Use as the font size for medium text that isn’t a heading or in a body section.", + "description": "Use as the font size for extra large text that isn’t a heading or in a body section.", "type": "number", - "value": "1rem", + "value": "1.25rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the font size for medium text that isn’t a heading or in a body section.", + "description": "Use as the font size for extra large text that isn’t a heading or in a body section.", "type": "number", - "value": "{global.font.size.300}" + "value": "{global.font.size.500}" }, - "name": "pf-t--global--font--size--md", + "name": "pf-t--global--font--size--xl", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "md" + "subitem": "xl" }, "path": [ "global", "font", "size", - "md" + "xl" ], "references": [ { "type": "number", - "value": "1rem", + "value": "1.25rem", "filePath": "tokens/default/base.dimension.json", "isSource": true, "original": { "type": "number", - "value": 16 + "value": 20 }, - "name": "pf-t--global--font--size--300", + "name": "pf-t--global--font--size--500", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "300" + "subitem": "500" }, "path": [ "global", "font", "size", - "300" + "500" ] } ] @@ -30873,19 +33328,19 @@ ] } }, - "pf-t--global--icon--size--font--heading--h1": { + "pf-t--global--icon--size--font--heading--h3": { "default": { - "description": "Use for icons that are placed inline with first level headings", + "description": "Use for icons that are placed inline with third level headings", "type": "number", - "value": "1.5rem", + "value": "1.125rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use for icons that are placed inline with first level headings", + "description": "Use for icons that are placed inline with third level headings", "type": "number", - "value": "{global.font.size.heading.h1}" + "value": "{global.font.size.heading.h3}" }, - "name": "pf-t--global--icon--size--font--heading--h1", + "name": "pf-t--global--icon--size--font--heading--h3", "attributes": { "category": "global", "type": "icon", @@ -30899,82 +33354,82 @@ "size", "font", "heading", - "h1" + "h3" ], "references": [ { - "description": "Use as the font size for first level headings.", + "description": "Use as the font size for third level headings.", "type": "number", - "value": "1.5rem", + "value": "1.125rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the font size for first level headings.", + "description": "Use as the font size for third level headings.", "type": "number", - "value": "{global.font.size.2xl}" + "value": "{global.font.size.lg}" }, - "name": "pf-t--global--font--size--heading--h1", + "name": "pf-t--global--font--size--heading--h3", "attributes": { "category": "global", "type": "font", "item": "size", "subitem": "heading", - "state": "h1" + "state": "h3" }, "path": [ "global", "font", "size", "heading", - "h1" + "h3" ], "references": [ { - "description": "Use as the font size for double extra large text that isn’t a heading or in a body section.", + "description": "Use as the font size for large text that isn’t a heading or in a body section.", "type": "number", - "value": "1.5rem", + "value": "1.125rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the font size for double extra large text that isn’t a heading or in a body section.", + "description": "Use as the font size for large text that isn’t a heading or in a body section.", "type": "number", - "value": "{global.font.size.600}" + "value": "{global.font.size.400}" }, - "name": "pf-t--global--font--size--2xl", + "name": "pf-t--global--font--size--lg", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "2xl" + "subitem": "lg" }, "path": [ "global", "font", "size", - "2xl" + "lg" ], "references": [ { "type": "number", - "value": "1.5rem", + "value": "1.125rem", "filePath": "tokens/default/base.dimension.json", "isSource": true, "original": { "type": "number", - "value": 24 + "value": 18 }, - "name": "pf-t--global--font--size--600", + "name": "pf-t--global--font--size--400", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "600" + "subitem": "400" }, "path": [ "global", "font", "size", - "600" + "400" ] } ] @@ -30984,19 +33439,19 @@ ] } }, - "pf-t--global--icon--size--font--heading--h2": { + "pf-t--global--icon--size--font--heading--h4": { "default": { - "description": "Use for icons that are placed inline with second level headings", + "description": "Use for icons that are placed inline with fourth level headings", "type": "number", - "value": "1.25rem", + "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use for icons that are placed inline with second level headings", + "description": "Use for icons that are placed inline with fourth level headings", "type": "number", - "value": "{global.font.size.heading.h2}" + "value": "{global.font.size.heading.h4}" }, - "name": "pf-t--global--icon--size--font--heading--h2", + "name": "pf-t--global--icon--size--font--heading--h4", "attributes": { "category": "global", "type": "icon", @@ -31010,82 +33465,82 @@ "size", "font", "heading", - "h2" + "h4" ], "references": [ { - "description": "Use as the font size for second level headings.", + "description": "Use as the font size for fourth-level headings.", "type": "number", - "value": "1.25rem", + "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the font size for second level headings.", + "description": "Use as the font size for fourth-level headings.", "type": "number", - "value": "{global.font.size.xl}" + "value": "{global.font.size.md}" }, - "name": "pf-t--global--font--size--heading--h2", + "name": "pf-t--global--font--size--heading--h4", "attributes": { "category": "global", "type": "font", "item": "size", "subitem": "heading", - "state": "h2" + "state": "h4" }, "path": [ "global", "font", "size", "heading", - "h2" + "h4" ], "references": [ { - "description": "Use as the font size for extra large text that isn’t a heading or in a body section.", + "description": "Use as the font size for medium text that isn’t a heading or in a body section.", "type": "number", - "value": "1.25rem", + "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the font size for extra large text that isn’t a heading or in a body section.", + "description": "Use as the font size for medium text that isn’t a heading or in a body section.", "type": "number", - "value": "{global.font.size.500}" + "value": "{global.font.size.300}" }, - "name": "pf-t--global--font--size--xl", + "name": "pf-t--global--font--size--md", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "xl" + "subitem": "md" }, "path": [ "global", "font", "size", - "xl" + "md" ], "references": [ { "type": "number", - "value": "1.25rem", + "value": "1rem", "filePath": "tokens/default/base.dimension.json", "isSource": true, "original": { "type": "number", - "value": 20 + "value": 16 }, - "name": "pf-t--global--font--size--500", + "name": "pf-t--global--font--size--300", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "500" + "subitem": "300" }, "path": [ "global", "font", "size", - "500" + "300" ] } ] @@ -31095,19 +33550,19 @@ ] } }, - "pf-t--global--icon--size--font--heading--h3": { + "pf-t--global--icon--size--font--heading--h5": { "default": { - "description": "Use for icons that are placed inline with third level headings", + "description": "Use for icons that are placed inline with fifth level headings", "type": "number", - "value": "1.125rem", + "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use for icons that are placed inline with third level headings", + "description": "Use for icons that are placed inline with fifth level headings", "type": "number", - "value": "{global.font.size.heading.h3}" + "value": "{global.font.size.heading.h5}" }, - "name": "pf-t--global--icon--size--font--heading--h3", + "name": "pf-t--global--icon--size--font--heading--h5", "attributes": { "category": "global", "type": "icon", @@ -31121,82 +33576,82 @@ "size", "font", "heading", - "h3" + "h5" ], "references": [ { - "description": "Use as the font size for third level headings.", + "description": "Use as the font size for fifth level headings.", "type": "number", - "value": "1.125rem", + "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the font size for third level headings.", + "description": "Use as the font size for fifth level headings.", "type": "number", - "value": "{global.font.size.lg}" + "value": "{global.font.size.md}" }, - "name": "pf-t--global--font--size--heading--h3", + "name": "pf-t--global--font--size--heading--h5", "attributes": { "category": "global", "type": "font", "item": "size", "subitem": "heading", - "state": "h3" + "state": "h5" }, "path": [ "global", "font", "size", "heading", - "h3" + "h5" ], "references": [ { - "description": "Use as the font size for large text that isn’t a heading or in a body section.", + "description": "Use as the font size for medium text that isn’t a heading or in a body section.", "type": "number", - "value": "1.125rem", + "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the font size for large text that isn’t a heading or in a body section.", + "description": "Use as the font size for medium text that isn’t a heading or in a body section.", "type": "number", - "value": "{global.font.size.400}" + "value": "{global.font.size.300}" }, - "name": "pf-t--global--font--size--lg", + "name": "pf-t--global--font--size--md", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "lg" + "subitem": "md" }, "path": [ "global", "font", "size", - "lg" + "md" ], "references": [ { "type": "number", - "value": "1.125rem", + "value": "1rem", "filePath": "tokens/default/base.dimension.json", "isSource": true, "original": { "type": "number", - "value": 18 + "value": 16 }, - "name": "pf-t--global--font--size--400", + "name": "pf-t--global--font--size--300", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "400" + "subitem": "300" }, "path": [ "global", "font", "size", - "400" + "300" ] } ] @@ -31206,19 +33661,19 @@ ] } }, - "pf-t--global--icon--size--font--heading--h4": { + "pf-t--global--icon--size--font--heading--h6": { "default": { - "description": "Use for icons that are placed inline with fourth level headings", + "description": "Use for icons that are placed inline with sixth level headings", "type": "number", "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use for icons that are placed inline with fourth level headings", + "description": "Use for icons that are placed inline with sixth level headings", "type": "number", - "value": "{global.font.size.heading.h4}" + "value": "{global.font.size.heading.h6}" }, - "name": "pf-t--global--icon--size--font--heading--h4", + "name": "pf-t--global--icon--size--font--heading--h6", "attributes": { "category": "global", "type": "icon", @@ -31232,34 +33687,34 @@ "size", "font", "heading", - "h4" + "h6" ], "references": [ { - "description": "Use as the font size for fourth-level headings.", + "description": "Use as the font size for sixth level headings.", "type": "number", "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the font size for fourth-level headings.", + "description": "Use as the font size for sixth level headings.", "type": "number", "value": "{global.font.size.md}" }, - "name": "pf-t--global--font--size--heading--h4", + "name": "pf-t--global--font--size--heading--h6", "attributes": { "category": "global", "type": "font", "item": "size", "subitem": "heading", - "state": "h4" + "state": "h6" }, "path": [ "global", "font", "size", "heading", - "h4" + "h6" ], "references": [ { @@ -31317,108 +33772,106 @@ ] } }, - "pf-t--global--icon--size--font--heading--h5": { + "pf-t--global--icon--size--font--body--sm": { "default": { - "description": "Use for icons that are placed inline with fifth level headings", + "description": "Use for icons that are placed inline with small body text", "type": "number", - "value": "1rem", + "value": "0.75rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use for icons that are placed inline with fifth level headings", + "description": "Use for icons that are placed inline with small body text", "type": "number", - "value": "{global.font.size.heading.h5}" + "value": "{global.font.size.body.sm}" }, - "name": "pf-t--global--icon--size--font--heading--h5", + "name": "pf-t--global--icon--size--font--body--sm", "attributes": { "category": "global", "type": "icon", "item": "size", "subitem": "font", - "state": "heading" + "state": "body" }, "path": [ "global", "icon", "size", "font", - "heading", - "h5" + "body", + "sm" ], "references": [ { - "description": "Use as the font size for fifth level headings.", + "description": "Use for a smaller font size in body sections.", "type": "number", - "value": "1rem", + "value": "0.75rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the font size for fifth level headings.", + "description": "Use for a smaller font size in body sections.", "type": "number", - "value": "{global.font.size.md}" + "value": "{global.font.size.xs}" }, - "name": "pf-t--global--font--size--heading--h5", + "name": "pf-t--global--font--size--body--sm", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "heading", - "state": "h5" + "subitem": "body", + "state": "sm" }, "path": [ "global", "font", "size", - "heading", - "h5" + "body", + "sm" ], "references": [ { - "description": "Use as the font size for medium text that isn’t a heading or in a body section.", "type": "number", - "value": "1rem", + "value": "0.75rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the font size for medium text that isn’t a heading or in a body section.", "type": "number", - "value": "{global.font.size.300}" + "value": "{global.font.size.100}" }, - "name": "pf-t--global--font--size--md", + "name": "pf-t--global--font--size--xs", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "md" + "subitem": "xs" }, "path": [ "global", "font", "size", - "md" + "xs" ], "references": [ { "type": "number", - "value": "1rem", + "value": "0.75rem", "filePath": "tokens/default/base.dimension.json", "isSource": true, "original": { "type": "number", - "value": 16 + "value": 12 }, - "name": "pf-t--global--font--size--300", + "name": "pf-t--global--font--size--100", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "300" + "subitem": "100" }, "path": [ "global", "font", "size", - "300" + "100" ] } ] @@ -31428,60 +33881,171 @@ ] } }, - "pf-t--global--icon--size--font--heading--h6": { + "pf-t--global--icon--size--font--body--default": { "default": { - "description": "Use for icons that are placed inline with sixth level headings", + "description": "Use for icons that are placed inline with default body text", + "type": "number", + "value": "0.875rem", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": true, + "original": { + "description": "Use for icons that are placed inline with default body text", + "type": "number", + "value": "{global.font.size.body.default}" + }, + "name": "pf-t--global--icon--size--font--body--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "size", + "subitem": "font", + "state": "body" + }, + "path": [ + "global", + "icon", + "size", + "font", + "body", + "default" + ], + "references": [ + { + "description": "Use as the default font size in body sections.", + "type": "number", + "value": "0.875rem", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": true, + "original": { + "description": "Use as the default font size in body sections.", + "type": "number", + "value": "{global.font.size.sm}" + }, + "name": "pf-t--global--font--size--body--default", + "attributes": { + "category": "global", + "type": "font", + "item": "size", + "subitem": "body", + "state": "default" + }, + "path": [ + "global", + "font", + "size", + "body", + "default" + ], + "references": [ + { + "description": "Use as the font size for small text that isn’t a heading or in a body section.", + "type": "number", + "value": "0.875rem", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": true, + "original": { + "description": "Use as the font size for small text that isn’t a heading or in a body section.", + "type": "number", + "value": "{global.font.size.200}" + }, + "name": "pf-t--global--font--size--sm", + "attributes": { + "category": "global", + "type": "font", + "item": "size", + "subitem": "sm" + }, + "path": [ + "global", + "font", + "size", + "sm" + ], + "references": [ + { + "type": "number", + "value": "0.875rem", + "filePath": "tokens/default/base.dimension.json", + "isSource": true, + "original": { + "type": "number", + "value": 14 + }, + "name": "pf-t--global--font--size--200", + "attributes": { + "category": "global", + "type": "font", + "item": "size", + "subitem": "200" + }, + "path": [ + "global", + "font", + "size", + "200" + ] + } + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--size--font--body--lg": { + "default": { + "description": "Use for icons that are placed inline with large body text", "type": "number", "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use for icons that are placed inline with sixth level headings", + "description": "Use for icons that are placed inline with large body text", "type": "number", - "value": "{global.font.size.heading.h6}" + "value": "{global.font.size.body.lg}" }, - "name": "pf-t--global--icon--size--font--heading--h6", + "name": "pf-t--global--icon--size--font--body--lg", "attributes": { "category": "global", "type": "icon", "item": "size", "subitem": "font", - "state": "heading" + "state": "body" }, "path": [ "global", "icon", "size", "font", - "heading", - "h6" + "body", + "lg" ], "references": [ { - "description": "Use as the font size for sixth level headings.", + "description": "Use for a larger font size in body sections.", "type": "number", "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the font size for sixth level headings.", + "description": "Use for a larger font size in body sections.", "type": "number", "value": "{global.font.size.md}" }, - "name": "pf-t--global--font--size--heading--h6", + "name": "pf-t--global--font--size--body--lg", "attributes": { "category": "global", "type": "font", "item": "size", - "subitem": "heading", - "state": "h6" + "subitem": "body", + "state": "lg" }, "path": [ "global", "font", "size", - "heading", - "h6" + "body", + "lg" ], "references": [ { @@ -32185,53 +34749,53 @@ ] } }, - "pf-t--global--border--width--regular": { + "pf-t--global--icon--size--3xl": { "default": { - "description": "Use as the default border width for elements.", + "description": "Use for triple extra large icons.", "type": "number", - "value": "1px", + "value": "6rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the default border width for elements.", + "description": "Use for triple extra large icons.", "type": "number", - "value": "{global.border.width.100}" + "value": "{global.icon.size.500}" }, - "name": "pf-t--global--border--width--regular", + "name": "pf-t--global--icon--size--3xl", "attributes": { "category": "global", - "type": "border", - "item": "width", - "subitem": "regular" + "type": "icon", + "item": "size", + "subitem": "3xl" }, "path": [ "global", - "border", - "width", - "regular" + "icon", + "size", + "3xl" ], "references": [ { "type": "number", - "value": "1px", + "value": "6rem", "filePath": "tokens/default/base.dimension.json", "isSource": true, "original": { "type": "number", - "value": 1 + "value": 96 }, - "name": "pf-t--global--border--width--100", + "name": "pf-t--global--icon--size--500", "attributes": { "category": "global", - "type": "border", - "item": "width", - "subitem": "100" + "type": "icon", + "item": "size", + "subitem": "500" }, "path": [ "global", - "border", - "width", - "100" + "icon", + "size", + "500" ] } ] @@ -32399,6 +34963,58 @@ ] } }, + "pf-t--global--border--width--regular": { + "default": { + "description": "Use as the default border width for elements.", + "type": "number", + "value": "1px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": true, + "original": { + "description": "Use as the default border width for elements.", + "type": "number", + "value": "{global.border.width.100}" + }, + "name": "pf-t--global--border--width--regular", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "regular" + }, + "path": [ + "global", + "border", + "width", + "regular" + ], + "references": [ + { + "type": "number", + "value": "1px", + "filePath": "tokens/default/base.dimension.json", + "isSource": true, + "original": { + "type": "number", + "value": 1 + }, + "name": "pf-t--global--border--width--100", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "100" + }, + "path": [ + "global", + "border", + "width", + "100" + ] + } + ] + } + }, "pf-t--global--border--width--strong": { "default": { "description": "Use as a stronger/wider border width for elements.", @@ -32555,87 +35171,6 @@ ] } }, - "pf-t--global--border--width--high-contrast--regular": { - "default": { - "type": "number", - "value": "0px", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": true, - "original": { - "type": "number", - "value": 0 - }, - "name": "pf-t--global--border--width--high-contrast--regular", - "attributes": { - "category": "global", - "type": "border", - "item": "width", - "subitem": "high-contrast", - "state": "regular" - }, - "path": [ - "global", - "border", - "width", - "high-contrast", - "regular" - ] - } - }, - "pf-t--global--border--width--high-contrast--strong": { - "default": { - "type": "number", - "value": "0px", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": true, - "original": { - "type": "number", - "value": 0 - }, - "name": "pf-t--global--border--width--high-contrast--strong", - "attributes": { - "category": "global", - "type": "border", - "item": "width", - "subitem": "high-contrast", - "state": "strong" - }, - "path": [ - "global", - "border", - "width", - "high-contrast", - "strong" - ] - } - }, - "pf-t--global--border--width--high-contrast--extra-strong": { - "default": { - "type": "number", - "value": "0px", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": true, - "original": { - "type": "number", - "value": 0 - }, - "name": "pf-t--global--border--width--high-contrast--extra-strong", - "attributes": { - "category": "global", - "type": "border", - "item": "width", - "subitem": "high-contrast", - "state": "extra-strong" - }, - "path": [ - "global", - "border", - "width", - "high-contrast", - "extra-strong" - ] - } - }, "pf-t--global--border--width--box--default": { "default": { "description": "Use as the default border width for containers like cards, panels, code editors, etc.", @@ -32908,6 +35443,87 @@ ] } }, + "pf-t--global--border--width--high-contrast--regular": { + "default": { + "type": "number", + "value": "0px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": true, + "original": { + "type": "number", + "value": 0 + }, + "name": "pf-t--global--border--width--high-contrast--regular", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "high-contrast", + "state": "regular" + }, + "path": [ + "global", + "border", + "width", + "high-contrast", + "regular" + ] + } + }, + "pf-t--global--border--width--high-contrast--strong": { + "default": { + "type": "number", + "value": "0px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": true, + "original": { + "type": "number", + "value": 0 + }, + "name": "pf-t--global--border--width--high-contrast--strong", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "high-contrast", + "state": "strong" + }, + "path": [ + "global", + "border", + "width", + "high-contrast", + "strong" + ] + } + }, + "pf-t--global--border--width--high-contrast--extra-strong": { + "default": { + "type": "number", + "value": "0px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": true, + "original": { + "type": "number", + "value": 0 + }, + "name": "pf-t--global--border--width--high-contrast--extra-strong", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "high-contrast", + "state": "extra-strong" + }, + "path": [ + "global", + "border", + "width", + "high-contrast", + "extra-strong" + ] + } + }, "pf-t--global--border--width--action--default": { "default": { "description": "Use as the default border width for actions like secondary and tertiary buttons", @@ -39403,78 +42019,78 @@ ] } }, - "pf-t--global--motion--duration--slide-out--short": { + "pf-t--global--motion--duration--fade--short": { "default": { - "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.", + "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.", "type": "number", - "value": "300ms", + "value": "100ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.", + "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.", "type": "number", - "value": "{global.motion.duration.lg}" + "value": "{global.motion.duration.sm}" }, - "name": "pf-t--global--motion--duration--slide-out--short", + "name": "pf-t--global--motion--duration--fade--short", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "slide-out", + "subitem": "fade", "state": "short" }, "path": [ "global", "motion", "duration", - "slide-out", + "fade", "short" ], "references": [ { - "description": "Use for long animation duration. Use for larger, more expressive animations.", + "description": "Use for a short animation duration. Use for simple and/or small animations.", "type": "number", - "value": "300ms", + "value": "100ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use for long animation duration. Use for larger, more expressive animations.", + "description": "Use for a short animation duration. Use for simple and/or small animations.", "type": "number", - "value": "{global.duration.300}" + "value": "{global.duration.100}" }, - "name": "pf-t--global--motion--duration--lg", + "name": "pf-t--global--motion--duration--sm", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "lg" + "subitem": "sm" }, "path": [ "global", "motion", "duration", - "lg" + "sm" ], "references": [ { "type": "number", - "value": "300ms", + "value": "100ms", "filePath": "tokens/default/base.motion.json", "isSource": true, "original": { "type": "number", - "value": 300 + "value": 100 }, - "name": "pf-t--global--duration--300", + "name": "pf-t--global--duration--100", "attributes": { "category": "global", "type": "duration", - "item": "300" + "item": "100" }, "path": [ "global", "duration", - "300" + "100" ] } ] @@ -39482,78 +42098,78 @@ ] } }, - "pf-t--global--motion--duration--slide-out--default": { + "pf-t--global--motion--duration--fade--default": { "default": { - "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.", + "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.", "type": "number", - "value": "400ms", + "value": "200ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.", + "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.", "type": "number", - "value": "{global.motion.duration.xl}" + "value": "{global.motion.duration.md}" }, - "name": "pf-t--global--motion--duration--slide-out--default", + "name": "pf-t--global--motion--duration--fade--default", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "slide-out", + "subitem": "fade", "state": "default" }, "path": [ "global", "motion", "duration", - "slide-out", + "fade", "default" ], "references": [ { - "description": "Use for extra long animation duration.", + "description": "Use for a medium animation duration.", "type": "number", - "value": "400ms", + "value": "200ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use for extra long animation duration.", + "description": "Use for a medium animation duration.", "type": "number", - "value": "{global.duration.400}" + "value": "{global.duration.200}" }, - "name": "pf-t--global--motion--duration--xl", + "name": "pf-t--global--motion--duration--md", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "xl" + "subitem": "md" }, "path": [ "global", "motion", "duration", - "xl" + "md" ], "references": [ { "type": "number", - "value": "400ms", + "value": "200ms", "filePath": "tokens/default/base.motion.json", "isSource": true, "original": { "type": "number", - "value": 400 + "value": 200 }, - "name": "pf-t--global--duration--400", + "name": "pf-t--global--duration--200", "attributes": { "category": "global", "type": "duration", - "item": "400" + "item": "200" }, "path": [ "global", "duration", - "400" + "200" ] } ] @@ -39561,78 +42177,78 @@ ] } }, - "pf-t--global--motion--duration--slide-out--long": { + "pf-t--global--motion--duration--fade--long": { "default": { - "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.", + "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.", "type": "number", - "value": "500ms", + "value": "300ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.", + "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.", "type": "number", - "value": "{global.motion.duration.2xl}" + "value": "{global.motion.duration.lg}" }, - "name": "pf-t--global--motion--duration--slide-out--long", + "name": "pf-t--global--motion--duration--fade--long", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "slide-out", + "subitem": "fade", "state": "long" }, "path": [ "global", "motion", "duration", - "slide-out", + "fade", "long" ], "references": [ { - "description": "Use for significantly long animation duration.", + "description": "Use for long animation duration. Use for larger, more expressive animations.", "type": "number", - "value": "500ms", + "value": "300ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use for significantly long animation duration.", + "description": "Use for long animation duration. Use for larger, more expressive animations.", "type": "number", - "value": "{global.duration.500}" + "value": "{global.duration.300}" }, - "name": "pf-t--global--motion--duration--2xl", + "name": "pf-t--global--motion--duration--lg", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "2xl" + "subitem": "lg" }, "path": [ "global", "motion", "duration", - "2xl" + "lg" ], "references": [ { "type": "number", - "value": "500ms", + "value": "300ms", "filePath": "tokens/default/base.motion.json", "isSource": true, "original": { "type": "number", - "value": 500 + "value": 300 }, - "name": "pf-t--global--duration--500", + "name": "pf-t--global--duration--300", "attributes": { "category": "global", "type": "duration", - "item": "500" + "item": "300" }, "path": [ "global", "duration", - "500" + "300" ] } ] @@ -39640,78 +42256,78 @@ ] } }, - "pf-t--global--motion--duration--icon--short": { + "pf-t--global--motion--duration--slide-out--short": { "default": { - "description": "Use a short duration on an icon that requires a fast/snappy transition. Used to define the speed at which an icon may animate. Used on a notification badge(stateful button).", + "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.", "type": "number", - "value": "50ms", + "value": "300ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use a short duration on an icon that requires a fast/snappy transition. Used to define the speed at which an icon may animate. Used on a notification badge(stateful button).", + "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.", "type": "number", - "value": "{global.motion.duration.xs}" + "value": "{global.motion.duration.lg}" }, - "name": "pf-t--global--motion--duration--icon--short", + "name": "pf-t--global--motion--duration--slide-out--short", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "icon", + "subitem": "slide-out", "state": "short" }, "path": [ "global", "motion", "duration", - "icon", + "slide-out", "short" ], "references": [ { - "description": "Use for the quickest possible duration of an animation.", + "description": "Use for long animation duration. Use for larger, more expressive animations.", "type": "number", - "value": "50ms", + "value": "300ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use for the quickest possible duration of an animation.", + "description": "Use for long animation duration. Use for larger, more expressive animations.", "type": "number", - "value": "{global.duration.50}" + "value": "{global.duration.300}" }, - "name": "pf-t--global--motion--duration--xs", + "name": "pf-t--global--motion--duration--lg", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "xs" + "subitem": "lg" }, "path": [ "global", "motion", "duration", - "xs" + "lg" ], "references": [ { "type": "number", - "value": "50ms", + "value": "300ms", "filePath": "tokens/default/base.motion.json", "isSource": true, "original": { "type": "number", - "value": 50 + "value": 300 }, - "name": "pf-t--global--duration--50", + "name": "pf-t--global--duration--300", "attributes": { "category": "global", "type": "duration", - "item": "50" + "item": "300" }, "path": [ "global", "duration", - "50" + "300" ] } ] @@ -39719,78 +42335,78 @@ ] } }, - "pf-t--global--motion--duration--icon--default": { + "pf-t--global--motion--duration--slide-out--default": { "default": { - "description": "Use a default duration on an icon that requires a moderately timed transition. Used to define the speed at which an icon may animate. Used on a favoriting star(icon button).", + "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.", "type": "number", - "value": "100ms", + "value": "400ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use a default duration on an icon that requires a moderately timed transition. Used to define the speed at which an icon may animate. Used on a favoriting star(icon button).", + "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.", "type": "number", - "value": "{global.motion.duration.sm}" + "value": "{global.motion.duration.xl}" }, - "name": "pf-t--global--motion--duration--icon--default", + "name": "pf-t--global--motion--duration--slide-out--default", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "icon", + "subitem": "slide-out", "state": "default" }, "path": [ "global", "motion", "duration", - "icon", + "slide-out", "default" ], "references": [ { - "description": "Use for a short animation duration. Use for simple and/or small animations.", + "description": "Use for extra long animation duration.", "type": "number", - "value": "100ms", + "value": "400ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use for a short animation duration. Use for simple and/or small animations.", + "description": "Use for extra long animation duration.", "type": "number", - "value": "{global.duration.100}" + "value": "{global.duration.400}" }, - "name": "pf-t--global--motion--duration--sm", + "name": "pf-t--global--motion--duration--xl", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "sm" + "subitem": "xl" }, "path": [ "global", "motion", "duration", - "sm" + "xl" ], "references": [ { "type": "number", - "value": "100ms", + "value": "400ms", "filePath": "tokens/default/base.motion.json", "isSource": true, "original": { "type": "number", - "value": 100 + "value": 400 }, - "name": "pf-t--global--duration--100", + "name": "pf-t--global--duration--400", "attributes": { "category": "global", "type": "duration", - "item": "100" + "item": "400" }, "path": [ "global", "duration", - "100" + "400" ] } ] @@ -39798,78 +42414,78 @@ ] } }, - "pf-t--global--motion--duration--icon--long": { + "pf-t--global--motion--duration--slide-out--long": { "default": { - "description": "Use a long duration on an icon that requires a slow transition. Used to define the speed at which an icon may animate. Used on the settings cog icon(plain menu toggle).", + "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.", "type": "number", - "value": "200ms", + "value": "500ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use a long duration on an icon that requires a slow transition. Used to define the speed at which an icon may animate. Used on the settings cog icon(plain menu toggle).", + "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.", "type": "number", - "value": "{global.motion.duration.md}" + "value": "{global.motion.duration.2xl}" }, - "name": "pf-t--global--motion--duration--icon--long", + "name": "pf-t--global--motion--duration--slide-out--long", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "icon", + "subitem": "slide-out", "state": "long" }, "path": [ "global", "motion", "duration", - "icon", + "slide-out", "long" ], "references": [ { - "description": "Use for a medium animation duration.", + "description": "Use for significantly long animation duration.", "type": "number", - "value": "200ms", + "value": "500ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use for a medium animation duration.", + "description": "Use for significantly long animation duration.", "type": "number", - "value": "{global.duration.200}" + "value": "{global.duration.500}" }, - "name": "pf-t--global--motion--duration--md", + "name": "pf-t--global--motion--duration--2xl", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "md" + "subitem": "2xl" }, "path": [ "global", "motion", "duration", - "md" + "2xl" ], "references": [ { "type": "number", - "value": "200ms", + "value": "500ms", "filePath": "tokens/default/base.motion.json", "isSource": true, "original": { "type": "number", - "value": 200 + "value": 500 }, - "name": "pf-t--global--duration--200", + "name": "pf-t--global--duration--500", "attributes": { "category": "global", "type": "duration", - "item": "200" + "item": "500" }, "path": [ "global", "duration", - "200" + "500" ] } ] @@ -39877,78 +42493,78 @@ ] } }, - "pf-t--global--motion--duration--fade--short": { + "pf-t--global--motion--duration--icon--short": { "default": { - "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.", + "description": "Use a short duration on an icon that requires a fast/snappy transition. Used to define the speed at which an icon may animate. Used on a notification badge(stateful button).", "type": "number", - "value": "100ms", + "value": "50ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.", + "description": "Use a short duration on an icon that requires a fast/snappy transition. Used to define the speed at which an icon may animate. Used on a notification badge(stateful button).", "type": "number", - "value": "{global.motion.duration.sm}" + "value": "{global.motion.duration.xs}" }, - "name": "pf-t--global--motion--duration--fade--short", + "name": "pf-t--global--motion--duration--icon--short", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "fade", + "subitem": "icon", "state": "short" }, "path": [ "global", "motion", "duration", - "fade", + "icon", "short" ], "references": [ { - "description": "Use for a short animation duration. Use for simple and/or small animations.", + "description": "Use for the quickest possible duration of an animation.", "type": "number", - "value": "100ms", + "value": "50ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use for a short animation duration. Use for simple and/or small animations.", + "description": "Use for the quickest possible duration of an animation.", "type": "number", - "value": "{global.duration.100}" + "value": "{global.duration.50}" }, - "name": "pf-t--global--motion--duration--sm", + "name": "pf-t--global--motion--duration--xs", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "sm" + "subitem": "xs" }, "path": [ "global", "motion", "duration", - "sm" + "xs" ], "references": [ { "type": "number", - "value": "100ms", + "value": "50ms", "filePath": "tokens/default/base.motion.json", "isSource": true, "original": { "type": "number", - "value": 100 + "value": 50 }, - "name": "pf-t--global--duration--100", + "name": "pf-t--global--duration--50", "attributes": { "category": "global", "type": "duration", - "item": "100" + "item": "50" }, "path": [ "global", "duration", - "100" + "50" ] } ] @@ -39956,78 +42572,78 @@ ] } }, - "pf-t--global--motion--duration--fade--default": { + "pf-t--global--motion--duration--icon--default": { "default": { - "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.", + "description": "Use a default duration on an icon that requires a moderately timed transition. Used to define the speed at which an icon may animate. Used on a favoriting star(icon button).", "type": "number", - "value": "200ms", + "value": "100ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.", + "description": "Use a default duration on an icon that requires a moderately timed transition. Used to define the speed at which an icon may animate. Used on a favoriting star(icon button).", "type": "number", - "value": "{global.motion.duration.md}" + "value": "{global.motion.duration.sm}" }, - "name": "pf-t--global--motion--duration--fade--default", + "name": "pf-t--global--motion--duration--icon--default", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "fade", + "subitem": "icon", "state": "default" }, "path": [ "global", "motion", "duration", - "fade", + "icon", "default" ], "references": [ { - "description": "Use for a medium animation duration.", + "description": "Use for a short animation duration. Use for simple and/or small animations.", "type": "number", - "value": "200ms", + "value": "100ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use for a medium animation duration.", + "description": "Use for a short animation duration. Use for simple and/or small animations.", "type": "number", - "value": "{global.duration.200}" + "value": "{global.duration.100}" }, - "name": "pf-t--global--motion--duration--md", + "name": "pf-t--global--motion--duration--sm", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "md" + "subitem": "sm" }, "path": [ "global", "motion", "duration", - "md" + "sm" ], "references": [ { "type": "number", - "value": "200ms", + "value": "100ms", "filePath": "tokens/default/base.motion.json", "isSource": true, "original": { "type": "number", - "value": 200 + "value": 100 }, - "name": "pf-t--global--duration--200", + "name": "pf-t--global--duration--100", "attributes": { "category": "global", "type": "duration", - "item": "200" + "item": "100" }, "path": [ "global", "duration", - "200" + "100" ] } ] @@ -40035,78 +42651,78 @@ ] } }, - "pf-t--global--motion--duration--fade--long": { + "pf-t--global--motion--duration--icon--long": { "default": { - "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.", + "description": "Use a long duration on an icon that requires a slow transition. Used to define the speed at which an icon may animate. Used on the settings cog icon(plain menu toggle).", "type": "number", - "value": "300ms", + "value": "200ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.", + "description": "Use a long duration on an icon that requires a slow transition. Used to define the speed at which an icon may animate. Used on the settings cog icon(plain menu toggle).", "type": "number", - "value": "{global.motion.duration.lg}" + "value": "{global.motion.duration.md}" }, - "name": "pf-t--global--motion--duration--fade--long", + "name": "pf-t--global--motion--duration--icon--long", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "fade", + "subitem": "icon", "state": "long" }, "path": [ "global", "motion", "duration", - "fade", + "icon", "long" ], "references": [ { - "description": "Use for long animation duration. Use for larger, more expressive animations.", + "description": "Use for a medium animation duration.", "type": "number", - "value": "300ms", + "value": "200ms", "filePath": "tokens/default/semantic.motion.json", "isSource": true, "original": { - "description": "Use for long animation duration. Use for larger, more expressive animations.", + "description": "Use for a medium animation duration.", "type": "number", - "value": "{global.duration.300}" + "value": "{global.duration.200}" }, - "name": "pf-t--global--motion--duration--lg", + "name": "pf-t--global--motion--duration--md", "attributes": { "category": "global", "type": "motion", "item": "duration", - "subitem": "lg" + "subitem": "md" }, "path": [ "global", "motion", "duration", - "lg" + "md" ], "references": [ { "type": "number", - "value": "300ms", + "value": "200ms", "filePath": "tokens/default/base.motion.json", "isSource": true, "original": { "type": "number", - "value": 300 + "value": 200 }, - "name": "pf-t--global--duration--300", + "name": "pf-t--global--duration--200", "attributes": { "category": "global", "type": "duration", - "item": "300" + "item": "200" }, "path": [ "global", "duration", - "300" + "200" ] } ] @@ -41813,6 +44429,356 @@ ] } }, + "pf-t--global--color--brand--accent--100": { + "default": { + "type": "color", + "value": "#ee0000", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.50}" + }, + "name": "pf-t--global--color--brand--accent--100", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "100" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "100" + ], + "references": [ + { + "type": "color", + "value": "#ee0000", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#ee0000" + }, + "name": "pf-t--color--red--50", + "attributes": { + "category": "color", + "type": "red", + "item": "50" + }, + "path": [ + "color", + "red", + "50" + ] + } + ] + } + }, + "pf-t--global--color--brand--accent--200": { + "default": { + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.60}" + }, + "name": "pf-t--global--color--brand--accent--200", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "200" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "200" + ], + "references": [ + { + "type": "color", + "value": "#a60000", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#a60000" + }, + "name": "pf-t--color--red--60", + "attributes": { + "category": "color", + "type": "red", + "item": "60" + }, + "path": [ + "color", + "red", + "60" + ] + } + ] + } + }, + "pf-t--global--color--brand--accent--300": { + "default": { + "type": "color", + "value": "#5f0000", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.70}" + }, + "name": "pf-t--global--color--brand--accent--300", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "300" + }, + "path": [ + "global", + "color", + "brand", + "accent", + "300" + ], + "references": [ + { + "type": "color", + "value": "#5f0000", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#5f0000" + }, + "name": "pf-t--color--red--70", + "attributes": { + "category": "color", + "type": "red", + "item": "70" + }, + "path": [ + "color", + "red", + "70" + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--100": { + "default": { + "type": "color", + "value": "#e0f0ff", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.10}" + }, + "name": "pf-t--global--color--brand--subtle--100", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "100" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "100" + ], + "references": [ + { + "type": "color", + "value": "#e0f0ff", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#e0f0ff" + }, + "name": "pf-t--color--blue--10", + "attributes": { + "category": "color", + "type": "blue", + "item": "10" + }, + "path": [ + "color", + "blue", + "10" + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--200": { + "default": { + "type": "color", + "value": "#b9dafc", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.20}" + }, + "name": "pf-t--global--color--brand--subtle--200", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "200" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "200" + ], + "references": [ + { + "type": "color", + "value": "#b9dafc", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#b9dafc" + }, + "name": "pf-t--color--blue--20", + "attributes": { + "category": "color", + "type": "blue", + "item": "20" + }, + "path": [ + "color", + "blue", + "20" + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--300": { + "default": { + "type": "color", + "value": "#4394e5", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.40}" + }, + "name": "pf-t--global--color--brand--subtle--300", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "300" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "300" + ], + "references": [ + { + "type": "color", + "value": "#4394e5", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#4394e5" + }, + "name": "pf-t--color--blue--40", + "attributes": { + "category": "color", + "type": "blue", + "item": "40" + }, + "path": [ + "color", + "blue", + "40" + ] + } + ] + } + }, + "pf-t--global--color--brand--subtle--400": { + "default": { + "type": "color", + "value": "#0066cc", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.50}" + }, + "name": "pf-t--global--color--brand--subtle--400", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "subtle", + "state": "400" + }, + "path": [ + "global", + "color", + "brand", + "subtle", + "400" + ], + "references": [ + { + "type": "color", + "value": "#0066cc", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#0066cc" + }, + "name": "pf-t--color--blue--50", + "attributes": { + "category": "color", + "type": "blue", + "item": "50" + }, + "path": [ + "color", + "blue", + "50" + ] + } + ] + } + }, "pf-t--global--color--disabled--100": { "default": { "type": "color", @@ -53136,6 +56102,33 @@ ] } }, + "pf-t--chart--global--fill--opacity--area": { + "default": { + "type": "number", + "value": 30, + "filePath": "tokens/default/charts.json", + "isSource": true, + "original": { + "type": "number", + "value": 30 + }, + "name": "pf-t--chart--global--fill--opacity--area", + "attributes": { + "category": "chart", + "type": "global", + "item": "fill", + "subitem": "opacity", + "state": "area" + }, + "path": [ + "chart", + "global", + "fill", + "opacity", + "area" + ] + } + }, "pf-t--chart--global--warning--color--100": { "default": { "type": "color", @@ -53459,6 +56452,29 @@ ] } }, + "pf-t--chart--global--stroke-line-cap": { + "default": { + "type": "string", + "value": "round", + "filePath": "tokens/default/charts.json", + "isSource": true, + "original": { + "type": "string", + "value": "round" + }, + "name": "pf-t--chart--global--stroke-line-cap", + "attributes": { + "category": "chart", + "type": "global", + "item": "stroke-line-cap" + }, + "path": [ + "chart", + "global", + "stroke-line-cap" + ] + } + }, "pf-t--chart--global--layout--padding": { "default": { "type": "number", @@ -53534,29 +56550,6 @@ ] } }, - "pf-t--chart--global--stroke-line-cap": { - "default": { - "type": "string", - "value": "round", - "filePath": "tokens/default/charts.json", - "isSource": true, - "original": { - "type": "string", - "value": "round" - }, - "name": "pf-t--chart--global--stroke-line-cap", - "attributes": { - "category": "chart", - "type": "global", - "item": "stroke-line-cap" - }, - "path": [ - "chart", - "global", - "stroke-line-cap" - ] - } - }, "pf-t--chart--global--label--padding": { "default": { "type": "number", diff --git a/packages/module/tokens/dark/base.dark.json b/packages/module/tokens/dark/base.dark.json index b2cc390..545026b 100644 --- a/packages/module/tokens/dark/base.dark.json +++ b/packages/module/tokens/dark/base.dark.json @@ -32,6 +32,10 @@ "type": "color", "value": "rgba(199, 199, 199, 0.1500)" }, + "700": { + "type": "color", + "value": "rgba(199, 199, 199, 0.2500)" + }, "highlight": { "100": { "type": "color", @@ -57,6 +61,38 @@ "300": { "type": "color", "value": "{color.blue.10}" + }, + "accent": { + "100": { + "type": "color", + "value": "{color.red.50}" + }, + "200": { + "type": "color", + "value": "{color.red.40}" + }, + "300": { + "type": "color", + "value": "{color.red.30}" + }, + "400": { + "type": "color", + "value": "{color.red.20}" + } + }, + "subtle": { + "100": { + "type": "color", + "value": "{color.blue.70}" + }, + "200": { + "type": "color", + "value": "{color.blue.60}" + }, + "300": { + "type": "color", + "value": "{color.blue.30}" + } } }, "disabled": { @@ -87,48 +123,6 @@ "value": "{color.yellow.20}" } }, - "severity": { - "undefined": { - "100": { - "type": "color", - "value": "{color.gray.40}" - } - }, - "none": { - "100": { - "type": "color", - "value": "{color.blue.30}" - } - }, - "minor": { - "100": { - "type": "color", - "value": "{color.gray.30}" - } - }, - "moderate": { - "100": { - "type": "color", - "value": "{color.yellow.30}" - } - }, - "important": { - "100": { - "type": "color", - "value": "{color.orange.40}" - } - }, - "critical": { - "100": { - "type": "color", - "value": "{color.red-orange.50}" - }, - "200": { - "type": "color", - "value": "{color.red-orange.40}" - } - } - }, "status": { "success": { "100": { @@ -201,6 +195,48 @@ } } }, + "severity": { + "undefined": { + "100": { + "type": "color", + "value": "{color.gray.40}" + } + }, + "none": { + "100": { + "type": "color", + "value": "{color.blue.30}" + } + }, + "minor": { + "100": { + "type": "color", + "value": "{color.gray.30}" + } + }, + "moderate": { + "100": { + "type": "color", + "value": "{color.yellow.30}" + } + }, + "important": { + "100": { + "type": "color", + "value": "{color.orange.40}" + } + }, + "critical": { + "100": { + "type": "color", + "value": "{color.red-orange.50}" + }, + "200": { + "type": "color", + "value": "{color.red-orange.40}" + } + } + }, "nonstatus": { "red": { "100": { diff --git a/packages/module/tokens/dark/charts.dark.json b/packages/module/tokens/dark/charts.dark.json index e86a22b..ff95c30 100644 --- a/packages/module/tokens/dark/charts.dark.json +++ b/packages/module/tokens/dark/charts.dark.json @@ -240,6 +240,12 @@ "type": "color", "value": "{color.white}" } + }, + "opacity": { + "area": { + "type": "number", + "value": 20 + } } }, "warning": { @@ -292,6 +298,10 @@ "value": 22 } }, + "stroke-line-cap": { + "type": "string", + "value": "round" + }, "layout": { "padding": { "type": "number", @@ -306,10 +316,6 @@ "value": 450 } }, - "stroke-line-cap": { - "type": "string", - "value": "round" - }, "label": { "padding": { "type": "number", diff --git a/packages/module/tokens/dark/semantic.dark.json b/packages/module/tokens/dark/semantic.dark.json index 7d93f37..ba779e9 100644 --- a/packages/module/tokens/dark/semantic.dark.json +++ b/packages/module/tokens/dark/semantic.dark.json @@ -164,6 +164,40 @@ "description": "Use as the clicked state for elements that have a brand background color", "type": "color", "value": "{global.dark.color.brand.200}" + }, + "accent": { + "default": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.dark.color.brand.accent.100}" + }, + "hover": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.dark.color.brand.accent.200}" + }, + "clicked": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.dark.color.brand.accent.200}" + } + }, + "subtle": { + "default": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.dark.color.brand.subtle.100}" + }, + "hover": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.dark.color.brand.subtle.200}" + }, + "clicked": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.dark.color.brand.subtle.200}" + } } }, "favorite": { @@ -489,6 +523,23 @@ "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.", "type": "color", "value": "{global.dark.color.brand.300}" + }, + "accent": { + "default": { + "description": "Use as the color for icons that convey your brand and/or are paired with branded text color.", + "type": "color", + "value": "{global.color.brand.accent.default}" + }, + "hover": { + "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.", + "type": "color", + "value": "{global.color.brand.accent.hover}" + }, + "clicked": { + "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.", + "type": "color", + "value": "{global.color.brand.accent.clicked}" + } } }, "on-brand": { @@ -506,6 +557,40 @@ "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", "value": "{global.icon.color.inverse}" + }, + "accent": { + "default": { + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.regular}" + }, + "hover": { + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "clicked": { + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + } + }, + "subtle": { + "default": { + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.regular}" + }, + "hover": { + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.regular}" + }, + "clicked": { + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.regular}" + } } }, "favorite": { @@ -986,6 +1071,40 @@ "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", "value": "{global.color.brand.clicked}" + }, + "accent": { + "default": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.default}" + }, + "hover": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.hover}" + }, + "clicked": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.clicked}" + } + }, + "subtle": { + "default": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.dark.color.brand.subtle.200}" + }, + "hover": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.dark.color.brand.subtle.300}" + }, + "clicked": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.dark.color.brand.subtle.300}" + } } }, "status": { @@ -1334,6 +1453,40 @@ "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", "value": "{global.text.color.inverse}" + }, + "accent": { + "default": { + "description": "Use as the default color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.regular}" + }, + "hover": { + "description": "Use as the hover state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.inverse}" + }, + "clicked": { + "description": "Use as the clicked state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.inverse}" + } + }, + "subtle": { + "default": { + "description": "Use as the default color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.regular}" + }, + "hover": { + "description": "Use as the hover state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.regular}" + }, + "clicked": { + "description": "Use as the clicked state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.regular}" + } } }, "placeholder": { diff --git a/packages/module/tokens/default/base.json b/packages/module/tokens/default/base.json index 8f20748..d126277 100644 --- a/packages/module/tokens/default/base.json +++ b/packages/module/tokens/default/base.json @@ -64,6 +64,38 @@ "500": { "type": "color", "value": "{color.blue.80}" + }, + "accent": { + "100": { + "type": "color", + "value": "{color.red.50}" + }, + "200": { + "type": "color", + "value": "{color.red.60}" + }, + "300": { + "type": "color", + "value": "{color.red.70}" + } + }, + "subtle": { + "100": { + "type": "color", + "value": "{color.blue.10}" + }, + "200": { + "type": "color", + "value": "{color.blue.20}" + }, + "300": { + "type": "color", + "value": "{color.blue.40}" + }, + "400": { + "type": "color", + "value": "{color.blue.50}" + } } }, "disabled": { diff --git a/packages/module/tokens/default/charts.json b/packages/module/tokens/default/charts.json index a2309ce..0b18d71 100644 --- a/packages/module/tokens/default/charts.json +++ b/packages/module/tokens/default/charts.json @@ -240,6 +240,12 @@ "type": "color", "value": "{color.white}" } + }, + "opacity": { + "area": { + "type": "number", + "value": 30 + } } }, "warning": { @@ -292,6 +298,10 @@ "value": 22 } }, + "stroke-line-cap": { + "type": "string", + "value": "round" + }, "layout": { "padding": { "type": "number", @@ -306,10 +316,6 @@ "value": 450 } }, - "stroke-line-cap": { - "type": "string", - "value": "round" - }, "label": { "padding": { "type": "number", diff --git a/packages/module/tokens/default/semantic.dimension.json b/packages/module/tokens/default/semantic.dimension.json index ff144ce..5a894f5 100644 --- a/packages/module/tokens/default/semantic.dimension.json +++ b/packages/module/tokens/default/semantic.dimension.json @@ -35,11 +35,6 @@ } }, "width": { - "regular": { - "description": "Use as the default border width for elements.", - "type": "number", - "value": "{global.border.width.100}" - }, "divider": { "default": { "description": "Use as the default border width for dividers.", @@ -57,6 +52,11 @@ "value": "{global.border.width.100}" } }, + "regular": { + "description": "Use as the default border width for elements.", + "type": "number", + "value": "{global.border.width.100}" + }, "strong": { "description": "Use as a stronger/wider border width for elements.", "type": "number", @@ -73,20 +73,6 @@ "value": "{global.border.width.400}" } }, - "high-contrast": { - "regular": { - "type": "number", - "value": 0 - }, - "strong": { - "type": "number", - "value": 0 - }, - "extra-strong": { - "type": "number", - "value": 0 - } - }, "box": { "default": { "description": "Use as the default border width for containers like cards, panels, code editors, etc.", @@ -116,6 +102,20 @@ } } }, + "high-contrast": { + "regular": { + "type": "number", + "value": 0 + }, + "strong": { + "type": "number", + "value": 0 + }, + "extra-strong": { + "type": "number", + "value": 0 + } + }, "action": { "default": { "description": "Use as the default border width for actions like secondary and tertiary buttons", @@ -396,29 +396,7 @@ "type": "number", "value": "{global.icon.size.400}" }, - "3xl": { - "description": "Use for triple extra large icons.", - "type": "number", - "value": "{global.icon.size.500}" - }, "font": { - "body": { - "sm": { - "description": "Use for icons that are placed inline with small body text", - "type": "number", - "value": "{global.font.size.body.sm}" - }, - "default": { - "description": "Use for icons that are placed inline with default body text", - "type": "number", - "value": "{global.font.size.body.default}" - }, - "lg": { - "description": "Use for icons that are placed inline with large body text", - "type": "number", - "value": "{global.font.size.body.lg}" - } - }, "heading": { "h1": { "description": "Use for icons that are placed inline with first level headings", @@ -451,6 +429,23 @@ "value": "{global.font.size.heading.h6}" } }, + "body": { + "sm": { + "description": "Use for icons that are placed inline with small body text", + "type": "number", + "value": "{global.font.size.body.sm}" + }, + "default": { + "description": "Use for icons that are placed inline with default body text", + "type": "number", + "value": "{global.font.size.body.default}" + }, + "lg": { + "description": "Use for icons that are placed inline with large body text", + "type": "number", + "value": "{global.font.size.body.lg}" + } + }, "xs": { "description": "Use for icons that are placed inline with font–size–xs text", "type": "number", @@ -491,6 +486,11 @@ "type": "number", "value": "{global.font.size.4xl}" } + }, + "3xl": { + "description": "Use for triple extra large icons.", + "type": "number", + "value": "{global.icon.size.500}" } } }, diff --git a/packages/module/tokens/default/semantic.json b/packages/module/tokens/default/semantic.json index b3355e9..a04cf63 100644 --- a/packages/module/tokens/default/semantic.json +++ b/packages/module/tokens/default/semantic.json @@ -164,6 +164,40 @@ "description": "Use as the clicked state for elements that have a brand background color", "type": "color", "value": "{global.color.brand.300}" + }, + "accent": { + "default": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.color.brand.accent.100}" + }, + "hover": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.color.brand.accent.200}" + }, + "clicked": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.color.brand.accent.200}" + } + }, + "subtle": { + "default": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.color.brand.subtle.100}" + }, + "hover": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.color.brand.subtle.200}" + }, + "clicked": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.color.brand.subtle.200}" + } } }, "favorite": { @@ -489,6 +523,23 @@ "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.", "type": "color", "value": "{global.color.brand.clicked}" + }, + "accent": { + "default": { + "description": "Use as the color for icons that convey your brand and/or are paired with branded text color.", + "type": "color", + "value": "{global.color.brand.accent.default}" + }, + "hover": { + "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.", + "type": "color", + "value": "{global.color.brand.accent.hover}" + }, + "clicked": { + "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.", + "type": "color", + "value": "{global.color.brand.accent.clicked}" + } } }, "on-brand": { @@ -506,6 +557,40 @@ "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", "value": "{global.icon.color.inverse}" + }, + "accent": { + "default": { + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "hover": { + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "clicked": { + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + } + }, + "subtle": { + "default": { + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.regular}" + }, + "hover": { + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.regular}" + }, + "clicked": { + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.regular}" + } } }, "favorite": { @@ -986,6 +1071,40 @@ "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", "value": "{global.color.brand.clicked}" + }, + "accent": { + "default": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.default}" + }, + "hover": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.hover}" + }, + "clicked": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.clicked}" + } + }, + "subtle": { + "default": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.subtle.200}" + }, + "hover": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.subtle.300}" + }, + "clicked": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.subtle.300}" + } } }, "status": { @@ -1334,6 +1453,40 @@ "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", "value": "{global.text.color.inverse}" + }, + "accent": { + "default": { + "description": "Use as the default color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.inverse}" + }, + "hover": { + "description": "Use as the hover state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.inverse}" + }, + "clicked": { + "description": "Use as the clicked state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.inverse}" + } + }, + "subtle": { + "default": { + "description": "Use as the default color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.regular}" + }, + "hover": { + "description": "Use as the hover state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.regular}" + }, + "clicked": { + "description": "Use as the clicked state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.regular}" + } } }, "placeholder": { diff --git a/packages/module/tokens/default/semantic.motion.json b/packages/module/tokens/default/semantic.motion.json index 7dff0c3..6e0eb3f 100644 --- a/packages/module/tokens/default/semantic.motion.json +++ b/packages/module/tokens/default/semantic.motion.json @@ -38,6 +38,23 @@ "type": "number", "value": "{global.duration.600}" }, + "fade": { + "short": { + "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.", + "type": "number", + "value": "{global.motion.duration.sm}" + }, + "default": { + "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.", + "type": "number", + "value": "{global.motion.duration.md}" + }, + "long": { + "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.", + "type": "number", + "value": "{global.motion.duration.lg}" + } + }, "slide-out": { "short": { "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.", @@ -72,23 +89,6 @@ "value": "{global.motion.duration.md}" } }, - "fade": { - "short": { - "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.", - "type": "number", - "value": "{global.motion.duration.sm}" - }, - "default": { - "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.", - "type": "number", - "value": "{global.motion.duration.md}" - }, - "long": { - "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.", - "type": "number", - "value": "{global.motion.duration.lg}" - } - }, "slide-in": { "short": { "description": "Use for a short duration of a slide-in animation, which moves an offscreen element into the viewport.", diff --git a/packages/module/tokens/highcontrast-dark/base.dark.json b/packages/module/tokens/highcontrast-dark/base.dark.json index b2cc390..545026b 100644 --- a/packages/module/tokens/highcontrast-dark/base.dark.json +++ b/packages/module/tokens/highcontrast-dark/base.dark.json @@ -32,6 +32,10 @@ "type": "color", "value": "rgba(199, 199, 199, 0.1500)" }, + "700": { + "type": "color", + "value": "rgba(199, 199, 199, 0.2500)" + }, "highlight": { "100": { "type": "color", @@ -57,6 +61,38 @@ "300": { "type": "color", "value": "{color.blue.10}" + }, + "accent": { + "100": { + "type": "color", + "value": "{color.red.50}" + }, + "200": { + "type": "color", + "value": "{color.red.40}" + }, + "300": { + "type": "color", + "value": "{color.red.30}" + }, + "400": { + "type": "color", + "value": "{color.red.20}" + } + }, + "subtle": { + "100": { + "type": "color", + "value": "{color.blue.70}" + }, + "200": { + "type": "color", + "value": "{color.blue.60}" + }, + "300": { + "type": "color", + "value": "{color.blue.30}" + } } }, "disabled": { @@ -87,48 +123,6 @@ "value": "{color.yellow.20}" } }, - "severity": { - "undefined": { - "100": { - "type": "color", - "value": "{color.gray.40}" - } - }, - "none": { - "100": { - "type": "color", - "value": "{color.blue.30}" - } - }, - "minor": { - "100": { - "type": "color", - "value": "{color.gray.30}" - } - }, - "moderate": { - "100": { - "type": "color", - "value": "{color.yellow.30}" - } - }, - "important": { - "100": { - "type": "color", - "value": "{color.orange.40}" - } - }, - "critical": { - "100": { - "type": "color", - "value": "{color.red-orange.50}" - }, - "200": { - "type": "color", - "value": "{color.red-orange.40}" - } - } - }, "status": { "success": { "100": { @@ -201,6 +195,48 @@ } } }, + "severity": { + "undefined": { + "100": { + "type": "color", + "value": "{color.gray.40}" + } + }, + "none": { + "100": { + "type": "color", + "value": "{color.blue.30}" + } + }, + "minor": { + "100": { + "type": "color", + "value": "{color.gray.30}" + } + }, + "moderate": { + "100": { + "type": "color", + "value": "{color.yellow.30}" + } + }, + "important": { + "100": { + "type": "color", + "value": "{color.orange.40}" + } + }, + "critical": { + "100": { + "type": "color", + "value": "{color.red-orange.50}" + }, + "200": { + "type": "color", + "value": "{color.red-orange.40}" + } + } + }, "nonstatus": { "red": { "100": { diff --git a/packages/module/tokens/highcontrast-dark/semantic.highcontrast.dark.json b/packages/module/tokens/highcontrast-dark/semantic.highcontrast.dark.json index 26d3df5..a527b62 100644 --- a/packages/module/tokens/highcontrast-dark/semantic.highcontrast.dark.json +++ b/packages/module/tokens/highcontrast-dark/semantic.highcontrast.dark.json @@ -164,6 +164,40 @@ "description": "Use as the clicked state for elements that have a brand background color", "type": "color", "value": "{global.dark.color.brand.200}" + }, + "accent": { + "default": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.dark.color.brand.accent.300}" + }, + "hover": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.dark.color.brand.accent.400}" + }, + "clicked": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.dark.color.brand.accent.400}" + } + }, + "subtle": { + "default": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.dark.color.brand.subtle.100}" + }, + "hover": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.dark.color.brand.subtle.200}" + }, + "clicked": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.dark.color.brand.subtle.200}" + } } }, "favorite": { @@ -489,6 +523,23 @@ "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.", "type": "color", "value": "{global.dark.color.brand.300}" + }, + "accent": { + "default": { + "description": "Use as the color for icons that convey your brand and/or are paired with branded text color.", + "type": "color", + "value": "{global.color.brand.accent.default}" + }, + "hover": { + "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.", + "type": "color", + "value": "{global.color.brand.accent.hover}" + }, + "clicked": { + "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.", + "type": "color", + "value": "{global.color.brand.accent.clicked}" + } } }, "on-brand": { @@ -506,6 +557,40 @@ "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", "value": "{global.icon.color.inverse}" + }, + "accent": { + "default": { + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "hover": { + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "clicked": { + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + } + }, + "subtle": { + "default": { + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.regular}" + }, + "hover": { + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.regular}" + }, + "clicked": { + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.regular}" + } } }, "favorite": { @@ -986,6 +1071,40 @@ "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", "value": "{global.color.brand.clicked}" + }, + "accent": { + "default": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.dark.color.brand.accent.200}" + }, + "hover": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.dark.color.brand.accent.300}" + }, + "clicked": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.dark.color.brand.accent.300}" + } + }, + "subtle": { + "default": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.dark.color.brand.subtle.200}" + }, + "hover": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.dark.color.brand.subtle.300}" + }, + "clicked": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.dark.color.brand.subtle.300}" + } } }, "status": { @@ -1334,6 +1453,40 @@ "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", "value": "{global.text.color.inverse}" + }, + "accent": { + "default": { + "description": "Use as the default color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.inverse}" + }, + "hover": { + "description": "Use as the hover state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.inverse}" + }, + "clicked": { + "description": "Use as the clicked state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.inverse}" + } + }, + "subtle": { + "default": { + "description": "Use as the default color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.regular}" + }, + "hover": { + "description": "Use as the hover state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.regular}" + }, + "clicked": { + "description": "Use as the clicked state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.regular}" + } } }, "placeholder": { diff --git a/packages/module/tokens/highcontrast/base.json b/packages/module/tokens/highcontrast/base.json index 8f20748..d126277 100644 --- a/packages/module/tokens/highcontrast/base.json +++ b/packages/module/tokens/highcontrast/base.json @@ -64,6 +64,38 @@ "500": { "type": "color", "value": "{color.blue.80}" + }, + "accent": { + "100": { + "type": "color", + "value": "{color.red.50}" + }, + "200": { + "type": "color", + "value": "{color.red.60}" + }, + "300": { + "type": "color", + "value": "{color.red.70}" + } + }, + "subtle": { + "100": { + "type": "color", + "value": "{color.blue.10}" + }, + "200": { + "type": "color", + "value": "{color.blue.20}" + }, + "300": { + "type": "color", + "value": "{color.blue.40}" + }, + "400": { + "type": "color", + "value": "{color.blue.50}" + } } }, "disabled": { diff --git a/packages/module/tokens/highcontrast/semantic.dimension.highcontrast.json b/packages/module/tokens/highcontrast/semantic.dimension.highcontrast.json index fd4770d..1207687 100644 --- a/packages/module/tokens/highcontrast/semantic.dimension.highcontrast.json +++ b/packages/module/tokens/highcontrast/semantic.dimension.highcontrast.json @@ -35,11 +35,6 @@ } }, "width": { - "regular": { - "description": "Use as the default border width for elements.", - "type": "number", - "value": "{global.border.width.100}" - }, "divider": { "default": { "description": "Use as the default border width for dividers.", @@ -57,6 +52,11 @@ "value": "{global.border.width.100}" } }, + "regular": { + "description": "Use as the default border width for elements.", + "type": "number", + "value": "{global.border.width.100}" + }, "strong": { "description": "Use as a stronger/wider border width for elements.", "type": "number", @@ -73,20 +73,6 @@ "value": "{global.border.width.200}" } }, - "high-contrast": { - "regular": { - "type": "number", - "value": "{global.border.width.regular}" - }, - "strong": { - "type": "number", - "value": "{global.border.width.strong}" - }, - "extra-strong": { - "type": "number", - "value": "{global.border.width.extra-strong}" - } - }, "box": { "default": { "description": "Use as the default border width for containers like cards, panels, code editors, etc.", @@ -116,6 +102,20 @@ } } }, + "high-contrast": { + "regular": { + "type": "number", + "value": "{global.border.width.regular}" + }, + "strong": { + "type": "number", + "value": "{global.border.width.strong}" + }, + "extra-strong": { + "type": "number", + "value": "{global.border.width.extra-strong}" + } + }, "action": { "default": { "description": "Use as the default border width for actions like secondary and tertiary buttons", @@ -396,29 +396,7 @@ "type": "number", "value": "{global.icon.size.400}" }, - "3xl": { - "description": "Use for triple extra large icons.", - "type": "number", - "value": "{global.icon.size.500}" - }, "font": { - "body": { - "sm": { - "description": "Use for icons that are placed inline with small body text", - "type": "number", - "value": "{global.font.size.body.sm}" - }, - "default": { - "description": "Use for icons that are placed inline with default body text", - "type": "number", - "value": "{global.font.size.body.default}" - }, - "lg": { - "description": "Use for icons that are placed inline with large body text", - "type": "number", - "value": "{global.font.size.body.lg}" - } - }, "heading": { "h1": { "description": "Use for icons that are placed inline with first level headings", @@ -451,6 +429,23 @@ "value": "{global.font.size.heading.h6}" } }, + "body": { + "sm": { + "description": "Use for icons that are placed inline with small body text", + "type": "number", + "value": "{global.font.size.body.sm}" + }, + "default": { + "description": "Use for icons that are placed inline with default body text", + "type": "number", + "value": "{global.font.size.body.default}" + }, + "lg": { + "description": "Use for icons that are placed inline with large body text", + "type": "number", + "value": "{global.font.size.body.lg}" + } + }, "xs": { "description": "Use for icons that are placed inline with font–size–xs text", "type": "number", @@ -491,6 +486,11 @@ "type": "number", "value": "{global.font.size.4xl}" } + }, + "3xl": { + "description": "Use for triple extra large icons.", + "type": "number", + "value": "{global.icon.size.500}" } } }, diff --git a/packages/module/tokens/highcontrast/semantic.highcontrast.json b/packages/module/tokens/highcontrast/semantic.highcontrast.json index 48deb26..68fab39 100644 --- a/packages/module/tokens/highcontrast/semantic.highcontrast.json +++ b/packages/module/tokens/highcontrast/semantic.highcontrast.json @@ -164,6 +164,40 @@ "description": "Use as the clicked state for elements that have a brand background color", "type": "color", "value": "{global.color.brand.400}" + }, + "accent": { + "default": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.color.brand.accent.200}" + }, + "hover": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.color.brand.accent.300}" + }, + "clicked": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.color.brand.accent.300}" + } + }, + "subtle": { + "default": { + "description": "Use this color for elements that you want to reinforce your brand", + "type": "color", + "value": "{global.color.brand.subtle.100}" + }, + "hover": { + "description": "Use as the hover state for elements that have a branded background color", + "type": "color", + "value": "{global.color.brand.subtle.200}" + }, + "clicked": { + "description": "Use as the clicked state for elements that have a brand background color", + "type": "color", + "value": "{global.color.brand.subtle.200}" + } } }, "favorite": { @@ -489,6 +523,23 @@ "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.", "type": "color", "value": "{color.blue.70}" + }, + "accent": { + "default": { + "description": "Use as the color for icons that convey your brand and/or are paired with branded text color.", + "type": "color", + "value": "{global.color.brand.accent.default}" + }, + "hover": { + "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.", + "type": "color", + "value": "{global.color.brand.accent.hover}" + }, + "clicked": { + "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.", + "type": "color", + "value": "{global.color.brand.accent.clicked}" + } } }, "on-brand": { @@ -506,6 +557,40 @@ "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", "type": "color", "value": "{global.icon.color.inverse}" + }, + "accent": { + "default": { + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "hover": { + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "clicked": { + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + } + }, + "subtle": { + "default": { + "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.regular}" + }, + "hover": { + "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.regular}" + }, + "clicked": { + "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.", + "type": "color", + "value": "{global.icon.color.regular}" + } } }, "favorite": { @@ -986,6 +1071,40 @@ "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", "value": "{global.color.brand.clicked}" + }, + "accent": { + "default": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.default}" + }, + "hover": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.hover}" + }, + "clicked": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.accent.clicked}" + } + }, + "subtle": { + "default": { + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.subtle.200}" + }, + "hover": { + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.subtle.400}" + }, + "clicked": { + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", + "type": "color", + "value": "{global.color.brand.subtle.400}" + } } }, "status": { @@ -1334,6 +1453,40 @@ "description": "Use as the clicked state color for text placed on a brand-colored background.", "type": "color", "value": "{global.text.color.inverse}" + }, + "accent": { + "default": { + "description": "Use as the default color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.inverse}" + }, + "hover": { + "description": "Use as the hover state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.inverse}" + }, + "clicked": { + "description": "Use as the clicked state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.inverse}" + } + }, + "subtle": { + "default": { + "description": "Use as the default color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.regular}" + }, + "hover": { + "description": "Use as the hover state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.regular}" + }, + "clicked": { + "description": "Use as the clicked state color for text placed on a brand-colored background.", + "type": "color", + "value": "{global.text.color.regular}" + } } }, "placeholder": {