diff --git a/packages/module/build/css/tokens-charts-dark.scss b/packages/module/build/css/tokens-charts-dark.scss index 12a0114..1526cf9 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 00:46:55 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/packages/module/build/css/tokens-charts.scss b/packages/module/build/css/tokens-charts.scss index c97797c..a70aaf0 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 00:46:55 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/packages/module/build/css/tokens-dark.scss b/packages/module/build/css/tokens-dark.scss index 6ec9e91..9b20ee6 100644 --- a/packages/module/build/css/tokens-dark.scss +++ b/packages/module/build/css/tokens-dark.scss @@ -1,17 +1,20 @@ // Do not edit directly -// Generated on Wed, 10 Sep 2025 19:58:14 GMT +// Generated on Fri, 31 Oct 2025 00:46:55 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); --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600); --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500); + --pf-t--global--background--color--loading--skeleton--default: var(--pf-t--global--dark--background--color--700); + --pf-t--global--background--color--loading--skeleton--subtle: var(--pf-t--global--dark--background--color--600); --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600); --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100); --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200); @@ -33,6 +36,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 +130,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 +166,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 +252,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 +282,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 +315,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 +387,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..e473a40 100644 --- a/packages/module/build/css/tokens-default.scss +++ b/packages/module/build/css/tokens-default.scss @@ -1,10 +1,11 @@ // Do not edit directly -// Generated on Wed, 10 Sep 2025 19:58:14 GMT +// Generated on Fri, 31 Oct 2025 00:46:55 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000); --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500); + --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000); --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000); --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000); --pf-t--global--border--radius--0: 0px; @@ -130,6 +131,8 @@ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500); --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30); --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40); + --pf-t--global--background--color--loading--skeleton--default: var(--pf-t--global--background--color--600); + --pf-t--global--background--color--loading--skeleton--subtle: var(--pf-t--global--background--color--700); --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600); --pf-t--global--border--color--100: var(--pf-t--color--gray--30); --pf-t--global--border--color--200: var(--pf-t--color--gray--40); @@ -221,6 +224,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); @@ -289,7 +299,7 @@ --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80); --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60); --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70); - --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--80); + --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70); --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50); --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60); --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70); @@ -400,6 +410,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 +449,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 +590,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 +616,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 +652,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 +733,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..c3ff98e 100644 --- a/packages/module/build/css/tokens-highcontrast-dark.scss +++ b/packages/module/build/css/tokens-highcontrast-dark.scss @@ -1,16 +1,19 @@ // Do not edit directly -// Generated on Wed, 10 Sep 2025 19:58:14 GMT +// Generated on Fri, 31 Oct 2025 00:46:55 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); --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600); --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500); + --pf-t--global--background--color--loading--skeleton--default: var(--pf-t--global--dark--background--color--700); + --pf-t--global--background--color--loading--skeleton--subtle: var(--pf-t--global--dark--background--color--600); --pf-t--global--background--color--primary--default: var(--pf-t--color--black); --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600); --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100); @@ -33,6 +36,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 +130,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 +169,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 +282,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 +315,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 +387,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..746c7e1 100644 --- a/packages/module/build/css/tokens-highcontrast.scss +++ b/packages/module/build/css/tokens-highcontrast.scss @@ -1,10 +1,11 @@ // Do not edit directly -// Generated on Wed, 10 Sep 2025 19:58:14 GMT +// Generated on Fri, 31 Oct 2025 00:46:55 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000); --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500); + --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000); --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000); --pf-t--global--border--radius--0: 0px; --pf-t--global--border--radius--100: 4px; @@ -110,6 +111,8 @@ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500); --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30); --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40); + --pf-t--global--background--color--loading--skeleton--default: var(--pf-t--global--background--color--600); + --pf-t--global--background--color--loading--skeleton--subtle: var(--pf-t--global--background--color--700); --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600); --pf-t--global--border--color--100: var(--pf-t--color--gray--30); --pf-t--global--border--color--200: var(--pf-t--color--gray--40); @@ -205,6 +208,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); @@ -273,7 +283,7 @@ --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80); --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60); --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70); - --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--80); + --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70); --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50); --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60); --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70); @@ -309,10 +319,6 @@ --pf-t--global--icon--color--150: var(--pf-t--color--gray--60); --pf-t--global--icon--color--200: var(--pf-t--color--gray--50); --pf-t--global--icon--color--300: var(--pf-t--color--white); - --pf-t--global--icon--color--brand--clicked: var(--pf-t--color--blue--70); - --pf-t--global--icon--color--brand--default: var(--pf-t--color--blue--60); - --pf-t--global--icon--color--brand--hover: var(--pf-t--color--blue--70); - --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--150); --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400); --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500); --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250); @@ -333,9 +339,6 @@ --pf-t--global--text--color--300: var(--pf-t--color--white); --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40); --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70); - --pf-t--global--text--color--brand--clicked: var(--pf-t--color--blue--80); - --pf-t--global--text--color--brand--default: var(--pf-t--color--blue--70); - --pf-t--global--text--color--brand--hover: var(--pf-t--color--blue--80); --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50); --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60); --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70); @@ -375,6 +378,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 +421,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); @@ -473,6 +485,9 @@ --pf-t--global--font--size--heading--h4: var(--pf-t--global--font--size--md); --pf-t--global--font--size--heading--h5: var(--pf-t--global--font--size--md); --pf-t--global--font--size--heading--h6: var(--pf-t--global--font--size--md); + --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--400); + --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--300); + --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--400); --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200); --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300); --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300); @@ -486,8 +501,6 @@ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200); --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--100); --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--200); - --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--200); - --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--200); --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600); --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--500); --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--600); @@ -526,6 +539,9 @@ --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md); --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg); + --pf-t--global--text--color--brand--clicked: var(--pf-t--global--color--brand--500); + --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--400); + --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--500); --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200); --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300); --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--200); @@ -535,9 +551,9 @@ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100); --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100); --pf-t--global--text--color--required: var(--pf-t--global--text--color--500); - --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--200); + --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--300); --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--200); - --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--200); + --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--300); --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600); --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--500); --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--600); @@ -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); @@ -623,6 +651,9 @@ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); + --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse); @@ -665,9 +696,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..c3ba74c 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 00:46:55 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..b1e82cb 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,32 @@ ] } }, - "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": [ @@ -4561,33 +4236,32 @@ ] } }, - "pf-t--global--icon--color--status--unread--on-attention--hover": { + "pf-t--global--icon--color--status--on-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 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": "#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 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": [ @@ -4669,33 +4343,32 @@ ] } }, - "pf-t--global--icon--color--status--unread--on-attention--clicked": { + "pf-t--global--icon--color--status--on-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 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": "#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 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": [ @@ -4777,76 +4450,109 @@ ] } }, - "pf-t--global--icon--color--regular": { + "pf-t--global--icon--color--status--custom--default": { "dark": { - "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 icons that convey generic status with no associated severity. This color can be customized.", "type": "color", - "value": "#f2f2f2", + "value": "#63bdbd", "filePath": "tokens/dark/semantic.dark.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 icons that convey generic status with no associated severity. This color can be customized.", "type": "color", - "value": "{global.dark.icon.color.100}" + "value": "{global.color.status.custom.default}" }, - "name": "pf-t--global--icon--color--regular", + "name": "pf-t--global--icon--color--status--custom--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "regular" + "subitem": "status", + "state": "custom" }, "path": [ "global", "icon", "color", - "regular" + "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": "#f2f2f2", - "filePath": "tokens/dark/base.dark.json", + "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": "{color.gray.10}" + "value": "{global.dark.color.status.custom.100}" }, - "name": "pf-t--global--dark--icon--color--100", + "name": "pf-t--global--color--status--custom--default", "attributes": { "category": "global", - "type": "dark", - "item": "icon", - "subitem": "color", - "state": "100" + "type": "color", + "item": "status", + "subitem": "custom", + "state": "default" }, "path": [ "global", - "dark", - "icon", "color", - "100" + "status", + "custom", + "default" ], "references": [ { "type": "color", - "value": "#f2f2f2", - "filePath": "tokens/dark/palette.color.json", + "value": "#63bdbd", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#f2f2f2" + "value": "{color.teal.40}" }, - "name": "pf-t--color--gray--10", + "name": "pf-t--global--dark--color--status--custom--100", "attributes": { - "category": "color", - "type": "gray", - "item": "10" + "category": "global", + "type": "dark", + "item": "color", + "subitem": "status", + "state": "custom" }, "path": [ + "global", + "dark", "color", - "gray", - "10" + "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" + ] + } ] } ] @@ -4854,76 +4560,109 @@ ] } }, - "pf-t--global--icon--color--subtle": { + "pf-t--global--icon--color--status--custom--hover": { "dark": { - "description": "Use as the color for icons when you want the icon to have less emphasis and/or when paired with subtle-colored text", + "description": "Use as the hover state for icons that convey generic status with no associated severity.", "type": "color", - "value": "#a3a3a3", + "value": "#9ad8d8", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons when you want the icon to have less emphasis and/or when paired with subtle-colored text", + "description": "Use as the hover state for icons that convey generic status with no associated severity.", "type": "color", - "value": "{global.dark.icon.color.200}" + "value": "{global.color.status.custom.hover}" }, - "name": "pf-t--global--icon--color--subtle", + "name": "pf-t--global--icon--color--status--custom--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "subtle" + "subitem": "status", + "state": "custom" }, "path": [ "global", "icon", "color", - "subtle" + "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": "#a3a3a3", - "filePath": "tokens/dark/base.dark.json", + "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": "{color.gray.40}" + "value": "{global.dark.color.status.custom.200}" }, - "name": "pf-t--global--dark--icon--color--200", + "name": "pf-t--global--color--status--custom--hover", "attributes": { "category": "global", - "type": "dark", - "item": "icon", - "subitem": "color", - "state": "200" + "type": "color", + "item": "status", + "subitem": "custom", + "state": "hover" }, "path": [ "global", - "dark", - "icon", "color", - "200" + "status", + "custom", + "hover" ], "references": [ { "type": "color", - "value": "#a3a3a3", - "filePath": "tokens/dark/palette.color.json", + "value": "#9ad8d8", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#a3a3a3" + "value": "{color.teal.30}" }, - "name": "pf-t--color--gray--40", + "name": "pf-t--global--dark--color--status--custom--200", "attributes": { - "category": "color", - "type": "gray", - "item": "40" + "category": "global", + "type": "dark", + "item": "color", + "subitem": "status", + "state": "custom" }, "path": [ + "global", + "dark", "color", - "gray", - "40" + "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" + ] + } ] } ] @@ -4931,76 +4670,109 @@ ] } }, - "pf-t--global--icon--color--inverse": { + "pf-t--global--icon--color--status--custom--clicked": { "dark": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the clicked state for icons that convey generic status with no associated severity.", "type": "color", - "value": "#1f1f1f", + "value": "#9ad8d8", "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 icons that convey generic status with no associated severity.", "type": "color", - "value": "{global.dark.icon.color.300}" + "value": "{global.color.status.custom.clicked}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--icon--color--status--custom--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "inverse" + "subitem": "status", + "state": "custom" }, "path": [ "global", "icon", "color", - "inverse" + "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": "#1f1f1f", - "filePath": "tokens/dark/base.dark.json", + "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": "{color.gray.90}" + "value": "{global.dark.color.status.custom.200}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--color--status--custom--clicked", "attributes": { "category": "global", - "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "type": "color", + "item": "status", + "subitem": "custom", + "state": "clicked" }, "path": [ "global", - "dark", - "icon", "color", - "300" + "status", + "custom", + "clicked" ], "references": [ { "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/dark/palette.color.json", + "value": "#9ad8d8", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "{color.teal.30}" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--global--dark--color--status--custom--200", "attributes": { - "category": "color", - "type": "gray", - "item": "90" + "category": "global", + "type": "dark", + "item": "color", + "subitem": "status", + "state": "custom" }, "path": [ + "global", + "dark", "color", - "gray", - "90" + "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" + ] + } ] } ] @@ -5008,76 +4780,106 @@ ] } }, - "pf-t--global--icon--color--disabled": { + "pf-t--global--icon--color--status--on-custom--default": { "dark": { - "description": "Use as the color for icons that show in disabled icon buttons and/or when paired with disabled-color text", + "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": "#707070", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that show in disabled icon buttons and/or when paired with disabled-color text", + "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.dark.color.disabled.200}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--disabled", + "name": "pf-t--global--icon--color--status--on-custom--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "disabled" + "subitem": "status", + "state": "on-custom" }, "path": [ "global", "icon", "color", - "disabled" + "status", + "on-custom", + "default" ], "references": [ { + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#707070", - "filePath": "tokens/dark/base.dark.json", + "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": "{color.gray.50}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--dark--color--disabled--200", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "dark", + "type": "icon", "item": "color", - "subitem": "disabled", - "state": "200" + "subitem": "inverse" }, "path": [ "global", - "dark", + "icon", "color", - "disabled", - "200" + "inverse" ], "references": [ { "type": "color", - "value": "#707070", - "filePath": "tokens/dark/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#707070" + "value": "{color.gray.90}" }, - "name": "pf-t--color--gray--50", + "name": "pf-t--global--dark--icon--color--300", "attributes": { - "category": "color", - "type": "gray", - "item": "50" + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ + "global", + "dark", + "icon", "color", - "gray", - "50" + "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" + ] + } ] } ] @@ -5085,76 +4887,106 @@ ] } }, - "pf-t--global--icon--color--on-disabled": { + "pf-t--global--icon--color--status--on-custom--hover": { "dark": { - "description": "Use as the color for icons that are placed on a disabled background color and/or are paired with on-disabled colored text.", + "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": "#383838", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on a disabled background color and/or are paired with on-disabled colored text.", + "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.dark.color.disabled.300}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--on-disabled", + "name": "pf-t--global--icon--color--status--on-custom--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "on-disabled" + "subitem": "status", + "state": "on-custom" }, "path": [ "global", "icon", "color", - "on-disabled" + "status", + "on-custom", + "hover" ], "references": [ { + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#383838", - "filePath": "tokens/dark/base.dark.json", + "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": "{color.gray.70}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--dark--color--disabled--300", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "dark", + "type": "icon", "item": "color", - "subitem": "disabled", - "state": "300" + "subitem": "inverse" }, "path": [ "global", - "dark", + "icon", "color", - "disabled", - "300" + "inverse" ], "references": [ { "type": "color", - "value": "#383838", - "filePath": "tokens/dark/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#383838" + "value": "{color.gray.90}" }, - "name": "pf-t--color--gray--70", + "name": "pf-t--global--dark--icon--color--300", "attributes": { - "category": "color", - "type": "gray", - "item": "70" + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ + "global", + "dark", + "icon", "color", - "gray", - "70" + "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" + ] + } ] } ] @@ -5162,80 +4994,1382 @@ ] } }, - "pf-t--global--icon--color--severity--undefined--default": { + "pf-t--global--icon--color--status--on-custom--clicked": { "dark": { - "description": "Use as the default color for severity icons that don’t communicate a specific severity level for issues.", + "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": "#a3a3a3", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for severity icons that don’t communicate a specific severity level for issues.", + "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.dark.color.severity.undefined.100}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--severity--undefined--default", + "name": "pf-t--global--icon--color--status--on-custom--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "severity", - "state": "undefined" + "subitem": "status", + "state": "on-custom" }, "path": [ "global", "icon", "color", - "severity", - "undefined", - "default" + "status", + "on-custom", + "clicked" ], "references": [ { + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#a3a3a3", - "filePath": "tokens/dark/base.dark.json", + "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": "{color.gray.40}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--dark--color--severity--undefined--100", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "dark", + "type": "icon", "item": "color", - "subitem": "severity", - "state": "undefined" + "subitem": "inverse" }, "path": [ "global", - "dark", + "icon", "color", - "severity", - "undefined", - "100" + "inverse" ], "references": [ { "type": "color", - "value": "#a3a3a3", - "filePath": "tokens/dark/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#a3a3a3" + "value": "{color.gray.90}" }, - "name": "pf-t--color--gray--40", + "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": [ + { + "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--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 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 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": "#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--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 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 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": [ + { + "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--regular": { + "dark": { + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", + "type": "color", + "value": "#f2f2f2", + "filePath": "tokens/dark/semantic.dark.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.dark.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": "#f2f2f2", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.10}" + }, + "name": "pf-t--global--dark--icon--color--100", + "attributes": { + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "100" + }, + "path": [ + "global", + "dark", + "icon", + "color", + "100" + ], + "references": [ + { + "type": "color", + "value": "#f2f2f2", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#f2f2f2" + }, + "name": "pf-t--color--gray--10", + "attributes": { + "category": "color", + "type": "gray", + "item": "10" + }, + "path": [ + "color", + "gray", + "10" + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--subtle": { + "dark": { + "description": "Use as the color for icons when you want the icon to have less emphasis and/or when paired with subtle-colored text", + "type": "color", + "value": "#a3a3a3", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color for icons when you want the icon to have less emphasis and/or when paired with subtle-colored text", + "type": "color", + "value": "{global.dark.icon.color.200}" + }, + "name": "pf-t--global--icon--color--subtle", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "subtle" + }, + "path": [ + "global", + "icon", + "color", + "subtle" + ], + "references": [ + { + "type": "color", + "value": "#a3a3a3", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.40}" + }, + "name": "pf-t--global--dark--icon--color--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "200" + }, + "path": [ + "global", + "dark", + "icon", + "color", + "200" + ], + "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--icon--color--inverse": { + "dark": { + "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--disabled": { + "dark": { + "description": "Use as the color for icons that show in disabled icon buttons and/or when paired with disabled-color text", + "type": "color", + "value": "#707070", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that show in disabled icon buttons and/or when paired with disabled-color text", + "type": "color", + "value": "{global.dark.color.disabled.200}" + }, + "name": "pf-t--global--icon--color--disabled", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "disabled" + }, + "path": [ + "global", + "icon", + "color", + "disabled" + ], + "references": [ + { + "type": "color", + "value": "#707070", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.50}" + }, + "name": "pf-t--global--dark--color--disabled--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "disabled", + "state": "200" + }, + "path": [ + "global", + "dark", + "color", + "disabled", + "200" + ], + "references": [ + { + "type": "color", + "value": "#707070", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#707070" + }, + "name": "pf-t--color--gray--50", + "attributes": { + "category": "color", + "type": "gray", + "item": "50" + }, + "path": [ + "color", + "gray", + "50" + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--on-disabled": { + "dark": { + "description": "Use as the color for icons that are placed on a disabled background color and/or are paired with on-disabled colored text.", + "type": "color", + "value": "#383838", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on a disabled background color and/or are paired with on-disabled colored text.", + "type": "color", + "value": "{global.dark.color.disabled.300}" + }, + "name": "pf-t--global--icon--color--on-disabled", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "on-disabled" + }, + "path": [ + "global", + "icon", + "color", + "on-disabled" + ], + "references": [ + { + "type": "color", + "value": "#383838", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.70}" + }, + "name": "pf-t--global--dark--color--disabled--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "disabled", + "state": "300" + }, + "path": [ + "global", + "dark", + "color", + "disabled", + "300" + ], + "references": [ + { + "type": "color", + "value": "#383838", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#383838" + }, + "name": "pf-t--color--gray--70", + "attributes": { + "category": "color", + "type": "gray", + "item": "70" + }, + "path": [ + "color", + "gray", + "70" + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--severity--undefined--default": { + "dark": { + "description": "Use as the default color for severity icons that don’t communicate a specific severity level for issues.", + "type": "color", + "value": "#a3a3a3", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the default color for severity icons that don’t communicate a specific severity level for issues.", + "type": "color", + "value": "{global.dark.color.severity.undefined.100}" + }, + "name": "pf-t--global--icon--color--severity--undefined--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "severity", + "state": "undefined" + }, + "path": [ + "global", + "icon", + "color", + "severity", + "undefined", + "default" + ], + "references": [ + { + "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--icon--color--severity--none--default": { + "dark": { + "description": "Use as the default color for severity icons that identify no issues.", + "type": "color", + "value": "#92c5f9", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the default color for severity icons that identify no issues.", + "type": "color", + "value": "{global.dark.color.severity.none.100}" + }, + "name": "pf-t--global--icon--color--severity--none--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "severity", + "state": "none" + }, + "path": [ + "global", + "icon", + "color", + "severity", + "none", + "default" + ], + "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--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--icon--color--severity--minor--default": { + "dark": { + "description": "Use as the default color for severity icons that identify issues of minor severity.", + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the default color for severity icons that identify issues of minor severity.", + "type": "color", + "value": "{global.dark.color.severity.minor.100}" + }, + "name": "pf-t--global--icon--color--severity--minor--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "severity", + "state": "minor" + }, + "path": [ + "global", + "icon", + "color", + "severity", + "minor", + "default" + ], + "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--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": "40" + "item": "30" }, "path": [ "color", "gray", - "40" + "30" ] } ] @@ -5243,79 +6377,79 @@ ] } }, - "pf-t--global--icon--color--severity--none--default": { + "pf-t--global--icon--color--severity--moderate--default": { "dark": { - "description": "Use as the default color for severity icons that identify no issues.", + "description": "Use as the default color for severity icons that identify issues of moderate severity.", "type": "color", - "value": "#92c5f9", + "value": "#ffcc17", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for severity icons that identify no issues.", + "description": "Use as the default color for severity icons that identify issues of moderate severity.", "type": "color", - "value": "{global.dark.color.severity.none.100}" + "value": "{global.dark.color.severity.moderate.100}" }, - "name": "pf-t--global--icon--color--severity--none--default", + "name": "pf-t--global--icon--color--severity--moderate--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "severity", - "state": "none" + "state": "moderate" }, "path": [ "global", "icon", "color", "severity", - "none", + "moderate", "default" ], "references": [ { "type": "color", - "value": "#92c5f9", + "value": "#ffcc17", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.blue.30}" + "value": "{color.yellow.30}" }, - "name": "pf-t--global--dark--color--severity--none--100", + "name": "pf-t--global--dark--color--severity--moderate--100", "attributes": { "category": "global", "type": "dark", "item": "color", "subitem": "severity", - "state": "none" + "state": "moderate" }, "path": [ "global", "dark", "color", "severity", - "none", + "moderate", "100" ], "references": [ { "type": "color", - "value": "#92c5f9", + "value": "#ffcc17", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#92c5f9" + "value": "#ffcc17" }, - "name": "pf-t--color--blue--30", + "name": "pf-t--color--yellow--30", "attributes": { "category": "color", - "type": "blue", + "type": "yellow", "item": "30" }, "path": [ "color", - "blue", + "yellow", "30" ] } @@ -5324,80 +6458,482 @@ ] } }, - "pf-t--global--icon--color--severity--minor--default": { + "pf-t--global--icon--color--severity--important--default": { "dark": { - "description": "Use as the default color for severity icons that identify issues of minor severity.", + "description": "Use as the default color for severity icons that identify issues of important severity.", "type": "color", - "value": "#c7c7c7", + "value": "#f5921b", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for severity icons that identify issues of minor severity.", + "description": "Use as the default color for severity icons that identify issues of important severity.", "type": "color", - "value": "{global.dark.color.severity.minor.100}" + "value": "{global.dark.color.severity.important.100}" }, - "name": "pf-t--global--icon--color--severity--minor--default", + "name": "pf-t--global--icon--color--severity--important--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "severity", - "state": "minor" + "state": "important" }, "path": [ "global", "icon", "color", "severity", - "minor", + "important", "default" ], "references": [ { "type": "color", - "value": "#c7c7c7", + "value": "#f5921b", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.30}" + "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--icon--color--severity--critical--default": { + "dark": { + "description": "Use as the default color for severity icons that identify issues of critical severity.", + "type": "color", + "value": "#f0561d", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the default color for severity icons that identify issues of critical severity.", + "type": "color", + "value": "{global.dark.color.severity.critical.100}" + }, + "name": "pf-t--global--icon--color--severity--critical--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "severity", + "state": "critical" + }, + "path": [ + "global", + "icon", + "color", + "severity", + "critical", + "default" + ], + "references": [ + { + "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--icon--color--nonstatus--on-red--default": { + "dark": { + "description": "Use as the default color for icons that are placed on a non status red background color and/or are paired with on-red 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 non status red background color and/or are paired with on-red colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--nonstatus--on-red--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "nonstatus", + "state": "on-red" + }, + "path": [ + "global", + "icon", + "color", + "nonstatus", + "on-red", + "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--nonstatus--on-red--hover": { + "dark": { + "description": "Use as the hover state color for icons that are placed on a non status red background color and/or are paired with on-red 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 non status red background color and/or are paired with on-red colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--nonstatus--on-red--hover", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "nonstatus", + "state": "on-red" + }, + "path": [ + "global", + "icon", + "color", + "nonstatus", + "on-red", + "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--nonstatus--on-red--clicked": { + "dark": { + "description": "Use as the clicked state color for icons that are placed on a nonstatus red background color and/or are paired with on-red 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 nonstatus red background color and/or are paired with on-red colored text.", + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "name": "pf-t--global--icon--color--nonstatus--on-red--clicked", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "nonstatus", + "state": "on-red" + }, + "path": [ + "global", + "icon", + "color", + "nonstatus", + "on-red", + "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--dark--color--severity--minor--100", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "dark", + "type": "icon", "item": "color", - "subitem": "severity", - "state": "minor" + "subitem": "inverse" }, "path": [ "global", - "dark", + "icon", "color", - "severity", - "minor", - "100" + "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--icon--color--300", "attributes": { - "category": "color", - "type": "gray", - "item": "30" + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ + "global", + "dark", + "icon", "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" + ] + } ] } ] @@ -5405,80 +6941,106 @@ ] } }, - "pf-t--global--icon--color--severity--moderate--default": { + "pf-t--global--icon--color--nonstatus--on-orangered--default": { "dark": { - "description": "Use as the default color for severity icons that identify issues of moderate severity.", + "description": "Use as the default color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", "type": "color", - "value": "#ffcc17", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for severity icons that identify issues of moderate severity.", + "description": "Use as the default color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", "type": "color", - "value": "{global.dark.color.severity.moderate.100}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--severity--moderate--default", + "name": "pf-t--global--icon--color--nonstatus--on-orangered--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "severity", - "state": "moderate" + "subitem": "nonstatus", + "state": "on-orangered" }, "path": [ "global", "icon", "color", - "severity", - "moderate", + "nonstatus", + "on-orangered", "default" ], "references": [ { + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#ffcc17", - "filePath": "tokens/dark/base.dark.json", + "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": "{color.yellow.30}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--dark--color--severity--moderate--100", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "dark", + "type": "icon", "item": "color", - "subitem": "severity", - "state": "moderate" + "subitem": "inverse" }, "path": [ "global", - "dark", + "icon", "color", - "severity", - "moderate", - "100" + "inverse" ], "references": [ { "type": "color", - "value": "#ffcc17", - "filePath": "tokens/dark/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#ffcc17" + "value": "{color.gray.90}" }, - "name": "pf-t--color--yellow--30", + "name": "pf-t--global--dark--icon--color--300", "attributes": { - "category": "color", - "type": "yellow", - "item": "30" + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ + "global", + "dark", + "icon", "color", - "yellow", - "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" + ] + } ] } ] @@ -5486,80 +7048,106 @@ ] } }, - "pf-t--global--icon--color--severity--important--default": { + "pf-t--global--icon--color--nonstatus--on-orangered--hover": { "dark": { - "description": "Use as the default color for severity icons that identify issues of important severity.", + "description": "Use as the hover state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", "type": "color", - "value": "#f5921b", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for severity icons that identify issues of important severity.", + "description": "Use as the hover state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", "type": "color", - "value": "{global.dark.color.severity.important.100}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--severity--important--default", + "name": "pf-t--global--icon--color--nonstatus--on-orangered--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "severity", - "state": "important" + "subitem": "nonstatus", + "state": "on-orangered" }, "path": [ "global", "icon", "color", - "severity", - "important", - "default" + "nonstatus", + "on-orangered", + "hover" ], "references": [ { + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#f5921b", - "filePath": "tokens/dark/base.dark.json", + "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": "{color.orange.40}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--dark--color--severity--important--100", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "dark", + "type": "icon", "item": "color", - "subitem": "severity", - "state": "important" + "subitem": "inverse" }, "path": [ "global", - "dark", + "icon", "color", - "severity", - "important", - "100" + "inverse" ], "references": [ { "type": "color", - "value": "#f5921b", - "filePath": "tokens/dark/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#f5921b" + "value": "{color.gray.90}" }, - "name": "pf-t--color--orange--40", + "name": "pf-t--global--dark--icon--color--300", "attributes": { - "category": "color", - "type": "orange", - "item": "40" + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ + "global", + "dark", + "icon", "color", - "orange", - "40" + "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" + ] + } ] } ] @@ -5567,80 +7155,106 @@ ] } }, - "pf-t--global--icon--color--severity--critical--default": { + "pf-t--global--icon--color--nonstatus--on-orangered--clicked": { "dark": { - "description": "Use as the default color for severity icons that identify issues of critical severity.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", "type": "color", - "value": "#f0561d", + "value": "#1f1f1f", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for severity icons that identify issues of critical severity.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", "type": "color", - "value": "{global.dark.color.severity.critical.100}" + "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--severity--critical--default", + "name": "pf-t--global--icon--color--nonstatus--on-orangered--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "severity", - "state": "critical" + "subitem": "nonstatus", + "state": "on-orangered" }, "path": [ "global", "icon", "color", - "severity", - "critical", - "default" + "nonstatus", + "on-orangered", + "clicked" ], "references": [ { + "description": "Use as the color for icons that are placed on an inverse background color", "type": "color", - "value": "#f0561d", - "filePath": "tokens/dark/base.dark.json", + "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": "{color.red-orange.50}" + "value": "{global.dark.icon.color.300}" }, - "name": "pf-t--global--dark--color--severity--critical--100", + "name": "pf-t--global--icon--color--inverse", "attributes": { "category": "global", - "type": "dark", + "type": "icon", "item": "color", - "subitem": "severity", - "state": "critical" + "subitem": "inverse" }, "path": [ "global", - "dark", + "icon", "color", - "severity", - "critical", - "100" + "inverse" ], "references": [ { "type": "color", - "value": "#f0561d", - "filePath": "tokens/dark/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#f0561d" + "value": "{color.gray.90}" }, - "name": "pf-t--color--red-orange--50", + "name": "pf-t--global--dark--icon--color--300", "attributes": { - "category": "color", - "type": "red-orange", - "item": "50" + "category": "global", + "type": "dark", + "item": "icon", + "subitem": "color", + "state": "300" }, "path": [ + "global", + "dark", + "icon", "color", - "red-orange", - "50" + "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" + ] + } ] } ] @@ -5648,32 +7262,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-red--default": { + "pf-t--global--icon--color--nonstatus--on-orange--default": { "dark": { - "description": "Use as the default color for icons that are placed on a non status red background color and/or are paired with on-red colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange 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 non status red background color and/or are paired with on-red colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-red--default", + "name": "pf-t--global--icon--color--nonstatus--on-orange--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-red" + "state": "on-orange" }, "path": [ "global", "icon", "color", "nonstatus", - "on-red", + "on-orange", "default" ], "references": [ @@ -5755,32 +7369,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-red--hover": { + "pf-t--global--icon--color--nonstatus--on-orange--hover": { "dark": { - "description": "Use as the hover state color for icons that are placed on a non status red background color and/or are paired with on-red colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange 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 non status red background color and/or are paired with on-red colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-red--hover", + "name": "pf-t--global--icon--color--nonstatus--on-orange--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-red" + "state": "on-orange" }, "path": [ "global", "icon", "color", "nonstatus", - "on-red", + "on-orange", "hover" ], "references": [ @@ -5862,32 +7476,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-red--clicked": { + "pf-t--global--icon--color--nonstatus--on-orange--clicked": { "dark": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus red background color and/or are paired with on-red colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange 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 nonstatus red background color and/or are paired with on-red colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-red--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-orange--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-red" + "state": "on-orange" }, "path": [ "global", "icon", "color", "nonstatus", - "on-red", + "on-orange", "clicked" ], "references": [ @@ -5969,32 +7583,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-orangered--default": { + "pf-t--global--icon--color--nonstatus--on-yellow--default": { "dark": { - "description": "Use as the default color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow 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 nonstatus orangered background color and/or are paired with on-orangered colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-orangered--default", + "name": "pf-t--global--icon--color--nonstatus--on-yellow--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-orangered" + "state": "on-yellow" }, "path": [ "global", "icon", "color", "nonstatus", - "on-orangered", + "on-yellow", "default" ], "references": [ @@ -6076,32 +7690,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-orangered--hover": { + "pf-t--global--icon--color--nonstatus--on-yellow--hover": { "dark": { - "description": "Use as the hover state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow 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 nonstatus orangered background color and/or are paired with on-orangered colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-orangered--hover", + "name": "pf-t--global--icon--color--nonstatus--on-yellow--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-orangered" + "state": "on-yellow" }, "path": [ "global", "icon", "color", "nonstatus", - "on-orangered", + "on-yellow", "hover" ], "references": [ @@ -6183,32 +7797,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-orangered--clicked": { + "pf-t--global--icon--color--nonstatus--on-yellow--clicked": { "dark": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow 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 nonstatus orangered background color and/or are paired with on-orangered colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-orangered--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-yellow--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-orangered" + "state": "on-yellow" }, "path": [ "global", "icon", "color", "nonstatus", - "on-orangered", + "on-yellow", "clicked" ], "references": [ @@ -6290,32 +7904,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-orange--default": { + "pf-t--global--icon--color--nonstatus--on-green--default": { "dark": { - "description": "Use as the default color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus green background color and/or are paired with on-green 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 nonstatus orange background color and/or are paired with on-orange colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-orange--default", + "name": "pf-t--global--icon--color--nonstatus--on-green--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-orange" + "state": "on-green" }, "path": [ "global", "icon", "color", "nonstatus", - "on-orange", + "on-green", "default" ], "references": [ @@ -6397,32 +8011,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-orange--hover": { + "pf-t--global--icon--color--nonstatus--on-green--hover": { "dark": { - "description": "Use as the hover state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus green background color and/or are paired with on-green 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 nonstatus orange background color and/or are paired with on-orange colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-orange--hover", + "name": "pf-t--global--icon--color--nonstatus--on-green--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-orange" + "state": "on-green" }, "path": [ "global", "icon", "color", "nonstatus", - "on-orange", + "on-green", "hover" ], "references": [ @@ -6504,32 +8118,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-orange--clicked": { + "pf-t--global--icon--color--nonstatus--on-green--clicked": { "dark": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus green background color and/or are paired with on-green 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 nonstatus orange background color and/or are paired with on-orange colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-orange--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-green--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-orange" + "state": "on-green" }, "path": [ "global", "icon", "color", "nonstatus", - "on-orange", + "on-green", "clicked" ], "references": [ @@ -6611,32 +8225,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-yellow--default": { + "pf-t--global--icon--color--nonstatus--on-teal--default": { "dark": { - "description": "Use as the default color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal 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 nonstatus yellow background color and/or are paired with on-yellow colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-yellow--default", + "name": "pf-t--global--icon--color--nonstatus--on-teal--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-yellow" + "state": "on-teal" }, "path": [ "global", "icon", "color", "nonstatus", - "on-yellow", + "on-teal", "default" ], "references": [ @@ -6718,32 +8332,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-yellow--hover": { + "pf-t--global--icon--color--nonstatus--on-teal--hover": { "dark": { - "description": "Use as the hover state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal 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 nonstatus yellow background color and/or are paired with on-yellow colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-yellow--hover", + "name": "pf-t--global--icon--color--nonstatus--on-teal--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-yellow" + "state": "on-teal" }, "path": [ "global", "icon", "color", "nonstatus", - "on-yellow", + "on-teal", "hover" ], "references": [ @@ -6825,32 +8439,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-yellow--clicked": { + "pf-t--global--icon--color--nonstatus--on-teal--clicked": { "dark": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal 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 nonstatus yellow background color and/or are paired with on-yellow colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-yellow--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-teal--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-yellow" + "state": "on-teal" }, "path": [ "global", "icon", "color", "nonstatus", - "on-yellow", + "on-teal", "clicked" ], "references": [ @@ -6932,32 +8546,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-green--default": { + "pf-t--global--icon--color--nonstatus--on-blue--default": { "dark": { - "description": "Use as the default color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue 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 nonstatus green background color and/or are paired with on-green colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-green--default", + "name": "pf-t--global--icon--color--nonstatus--on-blue--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-green" + "state": "on-blue" }, "path": [ "global", "icon", "color", "nonstatus", - "on-green", + "on-blue", "default" ], "references": [ @@ -7039,32 +8653,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-green--hover": { + "pf-t--global--icon--color--nonstatus--on-blue--hover": { "dark": { - "description": "Use as the hover state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue 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 nonstatus green background color and/or are paired with on-green colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-green--hover", + "name": "pf-t--global--icon--color--nonstatus--on-blue--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-green" + "state": "on-blue" }, "path": [ "global", "icon", "color", "nonstatus", - "on-green", + "on-blue", "hover" ], "references": [ @@ -7146,32 +8760,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-green--clicked": { + "pf-t--global--icon--color--nonstatus--on-blue--clicked": { "dark": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue 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 nonstatus green background color and/or are paired with on-green colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-green--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-blue--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-green" + "state": "on-blue" }, "path": [ "global", "icon", "color", "nonstatus", - "on-green", + "on-blue", "clicked" ], "references": [ @@ -7253,32 +8867,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-teal--default": { + "pf-t--global--icon--color--nonstatus--on-purple--default": { "dark": { - "description": "Use as the default color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple 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 nonstatus teal background color and/or are paired with on-teal colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-teal--default", + "name": "pf-t--global--icon--color--nonstatus--on-purple--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-teal" + "state": "on-purple" }, "path": [ "global", "icon", "color", "nonstatus", - "on-teal", + "on-purple", "default" ], "references": [ @@ -7360,32 +8974,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-teal--hover": { + "pf-t--global--icon--color--nonstatus--on-purple--hover": { "dark": { - "description": "Use as the hover state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple 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 nonstatus teal background color and/or are paired with on-teal colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-teal--hover", + "name": "pf-t--global--icon--color--nonstatus--on-purple--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-teal" + "state": "on-purple" }, "path": [ "global", "icon", "color", "nonstatus", - "on-teal", + "on-purple", "hover" ], "references": [ @@ -7467,32 +9081,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-teal--clicked": { + "pf-t--global--icon--color--nonstatus--on-purple--clicked": { "dark": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple 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 nonstatus teal background color and/or are paired with on-teal colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", "type": "color", "value": "{global.icon.color.inverse}" }, - "name": "pf-t--global--icon--color--nonstatus--on-teal--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-purple--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-teal" + "state": "on-purple" }, "path": [ "global", "icon", "color", "nonstatus", - "on-teal", + "on-purple", "clicked" ], "references": [ @@ -7574,104 +9188,104 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-blue--default": { + "pf-t--global--icon--color--nonstatus--on-gray--default": { "dark": { - "description": "Use as the default color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray 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 nonstatus blue background color and/or are paired with on-blue colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-blue--default", + "name": "pf-t--global--icon--color--nonstatus--on-gray--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-blue" + "state": "on-gray" }, "path": [ "global", "icon", "color", "nonstatus", - "on-blue", + "on-gray", "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" ] } ] @@ -7681,104 +9295,104 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-blue--hover": { + "pf-t--global--icon--color--nonstatus--on-gray--hover": { "dark": { - "description": "Use as the hover state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray 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 nonstatus blue background color and/or are paired with on-blue colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-blue--hover", + "name": "pf-t--global--icon--color--nonstatus--on-gray--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-blue" + "state": "on-gray" }, "path": [ "global", "icon", "color", "nonstatus", - "on-blue", + "on-gray", "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" ] } ] @@ -7788,104 +9402,104 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-blue--clicked": { + "pf-t--global--icon--color--nonstatus--on-gray--clicked": { "dark": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray 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 nonstatus blue background color and/or are paired with on-blue colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-blue--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-gray--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-blue" + "state": "on-gray" }, "path": [ "global", "icon", "color", "nonstatus", - "on-blue", + "on-gray", "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" ] } ] @@ -7895,106 +9509,76 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-purple--default": { + "pf-t--global--border--color--control--read-only": { "dark": { - "description": "Use as the default color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", "type": "color", - "value": "#1f1f1f", + "value": "#4d4d4d", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.dark.border.color.50}" }, - "name": "pf-t--global--icon--color--nonstatus--on-purple--default", + "name": "pf-t--global--border--color--control--read-only", "attributes": { "category": "global", - "type": "icon", + "type": "border", "item": "color", - "subitem": "nonstatus", - "state": "on-purple" + "subitem": "control", + "state": "read-only" }, "path": [ "global", - "icon", + "border", "color", - "nonstatus", - "on-purple", - "default" + "control", + "read-only" ], "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", + "value": "#4d4d4d", + "filePath": "tokens/dark/base.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}" + "value": "{color.gray.60}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--dark--border--color--50", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "dark", + "item": "border", + "subitem": "color", + "state": "50" }, "path": [ "global", - "icon", + "dark", + "border", "color", - "inverse" + "50" ], "references": [ { "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/dark/base.dark.json", + "value": "#4d4d4d", + "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "#4d4d4d" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--color--gray--60", "attributes": { - "category": "global", - "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "category": "color", + "type": "gray", + "item": "60" }, "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" - ] - } + "gray", + "60" ] } ] @@ -8002,104 +9586,103 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-purple--hover": { + "pf-t--global--border--color--brand--default": { "dark": { - "description": "Use as the hover state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "#1f1f1f", + "value": "#92c5f9", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.brand.default}" }, - "name": "pf-t--global--icon--color--nonstatus--on-purple--hover", + "name": "pf-t--global--border--color--brand--default", "attributes": { "category": "global", - "type": "icon", + "type": "border", "item": "color", - "subitem": "nonstatus", - "state": "on-purple" + "subitem": "brand", + "state": "default" }, "path": [ "global", - "icon", + "border", "color", - "nonstatus", - "on-purple", - "hover" + "brand", + "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": "#92c5f9", "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.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--brand--default", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "brand", + "subitem": "default" }, "path": [ "global", - "icon", "color", - "inverse" + "brand", + "default" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#92c5f9", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.blue.30}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--color--brand--100", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "item": "color", + "subitem": "brand", + "state": "100" }, "path": [ "global", "dark", - "icon", "color", - "300" + "brand", + "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#92c5f9", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#92c5f9" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--blue--30", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "blue", + "item": "30" }, "path": [ "color", - "gray", - "90" + "blue", + "30" ] } ] @@ -8109,104 +9692,103 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-purple--clicked": { + "pf-t--global--border--color--brand--hover": { "dark": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "#1f1f1f", + "value": "#b9dafc", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.brand.hover}" }, - "name": "pf-t--global--icon--color--nonstatus--on-purple--clicked", + "name": "pf-t--global--border--color--brand--hover", "attributes": { "category": "global", - "type": "icon", + "type": "border", "item": "color", - "subitem": "nonstatus", - "state": "on-purple" + "subitem": "brand", + "state": "hover" }, "path": [ "global", - "icon", + "border", "color", - "nonstatus", - "on-purple", - "clicked" + "brand", + "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": "#b9dafc", "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.200}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--color--brand--hover", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "inverse" + "type": "color", + "item": "brand", + "subitem": "hover" }, "path": [ "global", - "icon", "color", - "inverse" + "brand", + "hover" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#b9dafc", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.blue.20}" }, - "name": "pf-t--global--dark--icon--color--300", + "name": "pf-t--global--dark--color--brand--200", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "300" + "item": "color", + "subitem": "brand", + "state": "200" }, "path": [ "global", "dark", - "icon", "color", - "300" + "brand", + "200" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#b9dafc", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#b9dafc" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--blue--20", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "blue", + "item": "20" }, "path": [ "color", - "gray", - "90" + "blue", + "20" ] } ] @@ -8216,104 +9798,103 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-gray--default": { + "pf-t--global--border--color--brand--clicked": { "dark": { - "description": "Use as the default color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "#f2f2f2", + "value": "#b9dafc", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.brand.clicked}" }, - "name": "pf-t--global--icon--color--nonstatus--on-gray--default", + "name": "pf-t--global--border--color--brand--clicked", "attributes": { "category": "global", - "type": "icon", + "type": "border", "item": "color", - "subitem": "nonstatus", - "state": "on-gray" + "subitem": "brand", + "state": "clicked" }, "path": [ "global", - "icon", + "border", "color", - "nonstatus", - "on-gray", - "default" + "brand", + "clicked" ], "references": [ { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", + "description": "Use as the clicked state for elements that have a brand background color", "type": "color", - "value": "#f2f2f2", + "value": "#b9dafc", "filePath": "tokens/dark/semantic.dark.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 clicked state for elements that have a brand background color", "type": "color", - "value": "{global.dark.icon.color.100}" + "value": "{global.dark.color.brand.200}" }, - "name": "pf-t--global--icon--color--regular", + "name": "pf-t--global--color--brand--clicked", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "regular" + "type": "color", + "item": "brand", + "subitem": "clicked" }, "path": [ "global", - "icon", "color", - "regular" + "brand", + "clicked" ], "references": [ { "type": "color", - "value": "#f2f2f2", + "value": "#b9dafc", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.10}" + "value": "{color.blue.20}" }, - "name": "pf-t--global--dark--icon--color--100", + "name": "pf-t--global--dark--color--brand--200", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "100" + "item": "color", + "subitem": "brand", + "state": "200" }, "path": [ "global", "dark", - "icon", "color", - "100" + "brand", + "200" ], "references": [ { "type": "color", - "value": "#f2f2f2", + "value": "#b9dafc", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#f2f2f2" + "value": "#b9dafc" }, - "name": "pf-t--color--gray--10", + "name": "pf-t--color--blue--20", "attributes": { "category": "color", - "type": "gray", - "item": "10" + "type": "blue", + "item": "20" }, "path": [ "color", - "gray", - "10" + "blue", + "20" ] } ] @@ -8323,104 +9904,107 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-gray--hover": { + "pf-t--global--border--color--brand--accent--default": { "dark": { - "description": "Use as the hover state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "#f2f2f2", + "value": "#ee0000", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.brand.accent.default}" }, - "name": "pf-t--global--icon--color--nonstatus--on-gray--hover", + "name": "pf-t--global--border--color--brand--accent--default", "attributes": { "category": "global", - "type": "icon", + "type": "border", "item": "color", - "subitem": "nonstatus", - "state": "on-gray" + "subitem": "brand", + "state": "accent" }, "path": [ "global", - "icon", + "border", "color", - "nonstatus", - "on-gray", - "hover" + "brand", + "accent", + "default" ], "references": [ { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", + "description": "Use this color for elements that you want to reinforce your brand", "type": "color", - "value": "#f2f2f2", + "value": "#ee0000", "filePath": "tokens/dark/semantic.dark.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 this color for elements that you want to reinforce your brand", "type": "color", - "value": "{global.dark.icon.color.100}" + "value": "{global.dark.color.brand.accent.100}" }, - "name": "pf-t--global--icon--color--regular", + "name": "pf-t--global--color--brand--accent--default", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "regular" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "default" }, "path": [ "global", - "icon", "color", - "regular" + "brand", + "accent", + "default" ], "references": [ { "type": "color", - "value": "#f2f2f2", + "value": "#ee0000", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.10}" + "value": "{color.red.50}" }, - "name": "pf-t--global--dark--icon--color--100", + "name": "pf-t--global--dark--color--brand--accent--100", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "100" + "item": "color", + "subitem": "brand", + "state": "accent" }, "path": [ "global", "dark", - "icon", "color", + "brand", + "accent", "100" ], "references": [ { "type": "color", - "value": "#f2f2f2", + "value": "#ee0000", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#f2f2f2" + "value": "#ee0000" }, - "name": "pf-t--color--gray--10", + "name": "pf-t--color--red--50", "attributes": { "category": "color", - "type": "gray", - "item": "10" + "type": "red", + "item": "50" }, "path": [ "color", - "gray", - "10" + "red", + "50" ] } ] @@ -8430,104 +10014,107 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-gray--clicked": { + "pf-t--global--border--color--brand--accent--hover": { "dark": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "#f2f2f2", + "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 nonstatus gray background color and/or are paired with on-gray colored text.", + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.brand.accent.hover}" }, - "name": "pf-t--global--icon--color--nonstatus--on-gray--clicked", + "name": "pf-t--global--border--color--brand--accent--hover", "attributes": { "category": "global", - "type": "icon", + "type": "border", "item": "color", - "subitem": "nonstatus", - "state": "on-gray" + "subitem": "brand", + "state": "accent" }, "path": [ "global", - "icon", + "border", "color", - "nonstatus", - "on-gray", - "clicked" + "brand", + "accent", + "hover" ], "references": [ { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", + "description": "Use as the hover state for elements that have a branded background color", "type": "color", - "value": "#f2f2f2", + "value": "#f56e6e", "filePath": "tokens/dark/semantic.dark.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 hover state for elements that have a branded background color", "type": "color", - "value": "{global.dark.icon.color.100}" + "value": "{global.dark.color.brand.accent.200}" }, - "name": "pf-t--global--icon--color--regular", + "name": "pf-t--global--color--brand--accent--hover", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "regular" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "hover" }, "path": [ "global", - "icon", "color", - "regular" + "brand", + "accent", + "hover" ], "references": [ { "type": "color", - "value": "#f2f2f2", + "value": "#f56e6e", "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.10}" + "value": "{color.red.40}" }, - "name": "pf-t--global--dark--icon--color--100", + "name": "pf-t--global--dark--color--brand--accent--200", "attributes": { "category": "global", "type": "dark", - "item": "icon", - "subitem": "color", - "state": "100" + "item": "color", + "subitem": "brand", + "state": "accent" }, "path": [ "global", "dark", - "icon", "color", - "100" + "brand", + "accent", + "200" ], "references": [ { "type": "color", - "value": "#f2f2f2", + "value": "#f56e6e", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#f2f2f2" + "value": "#f56e6e" }, - "name": "pf-t--color--gray--10", + "name": "pf-t--color--red--40", "attributes": { "category": "color", - "type": "gray", - "item": "10" + "type": "red", + "item": "40" }, "path": [ "color", - "gray", - "10" + "red", + "40" ] } ] @@ -8537,76 +10124,109 @@ ] } }, - "pf-t--global--border--color--control--read-only": { + "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": "#4d4d4d", + "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.dark.border.color.50}" + "value": "{global.color.brand.accent.clicked}" }, - "name": "pf-t--global--border--color--control--read-only", + "name": "pf-t--global--border--color--brand--accent--clicked", "attributes": { "category": "global", "type": "border", "item": "color", - "subitem": "control", - "state": "read-only" + "subitem": "brand", + "state": "accent" }, "path": [ "global", "border", "color", - "control", - "read-only" + "brand", + "accent", + "clicked" ], "references": [ { + "description": "Use as the clicked state for elements that have a brand background color", "type": "color", - "value": "#4d4d4d", - "filePath": "tokens/dark/base.dark.json", + "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": "{color.gray.60}" + "value": "{global.dark.color.brand.accent.200}" }, - "name": "pf-t--global--dark--border--color--50", + "name": "pf-t--global--color--brand--accent--clicked", "attributes": { "category": "global", - "type": "dark", - "item": "border", - "subitem": "color", - "state": "50" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "clicked" }, "path": [ "global", - "dark", - "border", "color", - "50" + "brand", + "accent", + "clicked" ], "references": [ { "type": "color", - "value": "#4d4d4d", - "filePath": "tokens/dark/palette.color.json", + "value": "#f56e6e", + "filePath": "tokens/dark/base.dark.json", "isSource": true, "original": { "type": "color", - "value": "#4d4d4d" + "value": "{color.red.40}" }, - "name": "pf-t--color--gray--60", + "name": "pf-t--global--dark--color--brand--accent--200", "attributes": { - "category": "color", - "type": "gray", - "item": "60" + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "accent" }, "path": [ + "global", + "dark", "color", - "gray", - "60" + "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" + ] + } ] } ] @@ -8614,130 +10234,80 @@ ] } }, - "pf-t--global--border--color--high-contrast": { - "dark": { - "type": "color", - "value": "rgba(255, 255, 255, 0.0000)", - "filePath": "tokens/dark/semantic.dark.json", - "isSource": true, - "original": { - "type": "color", - "value": "rgba(255, 255, 255, 0.0000)" - }, - "name": "pf-t--global--border--color--high-contrast", - "attributes": { - "category": "global", - "type": "border", - "item": "color", - "subitem": "high-contrast" - }, - "path": [ - "global", - "border", - "color", - "high-contrast" - ] - } - }, - "pf-t--global--border--color--brand--default": { + "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": "#92c5f9", + "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.color.brand.default}" + "value": "{global.dark.color.brand.subtle.200}" }, - "name": "pf-t--global--border--color--brand--default", + "name": "pf-t--global--border--color--brand--subtle--default", "attributes": { "category": "global", "type": "border", "item": "color", "subitem": "brand", - "state": "default" + "state": "subtle" }, "path": [ "global", "border", "color", "brand", + "subtle", "default" ], "references": [ { - "description": "Use this color for elements that you want to reinforce your brand", "type": "color", - "value": "#92c5f9", - "filePath": "tokens/dark/semantic.dark.json", + "value": "#004d99", + "filePath": "tokens/dark/base.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.100}" + "value": "{color.blue.60}" }, - "name": "pf-t--global--color--brand--default", + "name": "pf-t--global--dark--color--brand--subtle--200", "attributes": { "category": "global", - "type": "color", - "item": "brand", - "subitem": "default" + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "subtle" }, "path": [ "global", + "dark", "color", "brand", - "default" + "subtle", + "200" ], "references": [ { "type": "color", - "value": "#92c5f9", - "filePath": "tokens/dark/base.dark.json", + "value": "#004d99", + "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "{color.blue.30}" + "value": "#004d99" }, - "name": "pf-t--global--dark--color--brand--100", + "name": "pf-t--color--blue--60", "attributes": { - "category": "global", - "type": "dark", - "item": "color", - "subitem": "brand", - "state": "100" + "category": "color", + "type": "blue", + "item": "60" }, "path": [ - "global", - "dark", "color", - "brand", - "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" - ] - } + "blue", + "60" ] } ] @@ -8745,105 +10315,80 @@ ] } }, - "pf-t--global--border--color--brand--hover": { + "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": "#b9dafc", + "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.color.brand.hover}" + "value": "{global.dark.color.brand.subtle.300}" }, - "name": "pf-t--global--border--color--brand--hover", + "name": "pf-t--global--border--color--brand--subtle--hover", "attributes": { "category": "global", "type": "border", "item": "color", "subitem": "brand", - "state": "hover" + "state": "subtle" }, "path": [ "global", "border", "color", "brand", + "subtle", "hover" ], "references": [ { - "description": "Use as the hover state for elements that have a branded background color", "type": "color", - "value": "#b9dafc", - "filePath": "tokens/dark/semantic.dark.json", + "value": "#92c5f9", + "filePath": "tokens/dark/base.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.200}" + "value": "{color.blue.30}" }, - "name": "pf-t--global--color--brand--hover", + "name": "pf-t--global--dark--color--brand--subtle--300", "attributes": { "category": "global", - "type": "color", - "item": "brand", - "subitem": "hover" + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "subtle" }, "path": [ "global", + "dark", "color", "brand", - "hover" + "subtle", + "300" ], "references": [ { "type": "color", - "value": "#b9dafc", - "filePath": "tokens/dark/base.dark.json", + "value": "#92c5f9", + "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "{color.blue.20}" + "value": "#92c5f9" }, - "name": "pf-t--global--dark--color--brand--200", + "name": "pf-t--color--blue--30", "attributes": { - "category": "global", - "type": "dark", - "item": "color", - "subitem": "brand", - "state": "200" + "category": "color", + "type": "blue", + "item": "30" }, "path": [ - "global", - "dark", "color", - "brand", - "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" - ] - } + "blue", + "30" ] } ] @@ -8851,105 +10396,80 @@ ] } }, - "pf-t--global--border--color--brand--clicked": { + "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": "#b9dafc", + "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.color.brand.clicked}" + "value": "{global.dark.color.brand.subtle.300}" }, - "name": "pf-t--global--border--color--brand--clicked", + "name": "pf-t--global--border--color--brand--subtle--clicked", "attributes": { "category": "global", "type": "border", "item": "color", "subitem": "brand", - "state": "clicked" + "state": "subtle" }, "path": [ "global", "border", "color", "brand", + "subtle", "clicked" ], "references": [ { - "description": "Use as the clicked state for elements that have a brand background color", "type": "color", - "value": "#b9dafc", - "filePath": "tokens/dark/semantic.dark.json", + "value": "#92c5f9", + "filePath": "tokens/dark/base.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.200}" + "value": "{color.blue.30}" }, - "name": "pf-t--global--color--brand--clicked", + "name": "pf-t--global--dark--color--brand--subtle--300", "attributes": { "category": "global", - "type": "color", - "item": "brand", - "subitem": "clicked" + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "subtle" }, "path": [ "global", + "dark", "color", "brand", - "clicked" + "subtle", + "300" ], "references": [ { "type": "color", - "value": "#b9dafc", - "filePath": "tokens/dark/base.dark.json", + "value": "#92c5f9", + "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "{color.blue.20}" + "value": "#92c5f9" }, - "name": "pf-t--global--dark--color--brand--200", + "name": "pf-t--color--blue--30", "attributes": { - "category": "global", - "type": "dark", - "item": "color", - "subitem": "brand", - "state": "200" + "category": "color", + "type": "blue", + "item": "30" }, "path": [ - "global", - "dark", "color", - "brand", - "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" - ] - } + "blue", + "30" ] } ] @@ -10497,113 +12017,140 @@ ] } }, - "pf-t--global--border--color--status--custom--clicked": { + "pf-t--global--border--color--status--custom--clicked": { + "dark": { + "description": "Use as the clicked state color for borders that convey a custom status, like in alerts, notifications or status labels.", + "type": "color", + "value": "#9ad8d8", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the clicked state color for borders that convey a custom status, like in alerts, notifications or status labels.", + "type": "color", + "value": "{global.color.status.custom.clicked}" + }, + "name": "pf-t--global--border--color--status--custom--clicked", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "status", + "state": "custom" + }, + "path": [ + "global", + "border", + "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--border--color--high-contrast": { "dark": { - "description": "Use as the clicked state color for borders that convey a custom status, like in alerts, notifications or status labels.", + "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.", "type": "color", - "value": "#9ad8d8", + "value": "rgba(255, 255, 255, 0.0000)", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "Use as the clicked state color for borders that convey a custom status, like in alerts, notifications or status labels.", + "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.", "type": "color", - "value": "{global.color.status.custom.clicked}" + "value": "rgba(255, 255, 255, 0.0000)" }, - "name": "pf-t--global--border--color--status--custom--clicked", + "name": "pf-t--global--border--color--high-contrast", "attributes": { "category": "global", "type": "border", "item": "color", - "subitem": "status", - "state": "custom" + "subitem": "high-contrast" }, "path": [ "global", "border", "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" - ] - } - ] - } - ] - } + "high-contrast" ] } }, @@ -11098,112 +12645,6 @@ ] } }, - "pf-t--global--border--color--main--default": { - "dark": { - "type": "color", - "value": "#292929", - "filePath": "tokens/dark/semantic.dark.json", - "isSource": true, - "original": { - "type": "color", - "value": "{global.background.color.primary.default}" - }, - "name": "pf-t--global--border--color--main--default", - "attributes": { - "category": "global", - "type": "border", - "item": "color", - "subitem": "main", - "state": "default" - }, - "path": [ - "global", - "border", - "color", - "main", - "default" - ], - "references": [ - { - "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.", - "type": "color", - "value": "#292929", - "filePath": "tokens/dark/semantic.dark.json", - "isSource": true, - "original": { - "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.", - "type": "color", - "value": "{global.dark.background.color.200}" - }, - "name": "pf-t--global--background--color--primary--default", - "attributes": { - "category": "global", - "type": "background", - "item": "color", - "subitem": "primary", - "state": "default" - }, - "path": [ - "global", - "background", - "color", - "primary", - "default" - ], - "references": [ - { - "type": "color", - "value": "#292929", - "filePath": "tokens/dark/base.dark.json", - "isSource": true, - "original": { - "type": "color", - "value": "{color.gray.80}" - }, - "name": "pf-t--global--dark--background--color--200", - "attributes": { - "category": "global", - "type": "dark", - "item": "background", - "subitem": "color", - "state": "200" - }, - "path": [ - "global", - "dark", - "background", - "color", - "200" - ], - "references": [ - { - "type": "color", - "value": "#292929", - "filePath": "tokens/dark/palette.color.json", - "isSource": true, - "original": { - "type": "color", - "value": "#292929" - }, - "name": "pf-t--color--gray--80", - "attributes": { - "category": "color", - "type": "gray", - "item": "80" - }, - "path": [ - "color", - "gray", - "80" - ] - } - ] - } - ] - } - ] - } - }, "pf-t--global--border--color--nonstatus--red--default": { "dark": { "description": "Use as the default border color for any element that does not convey status and that you always will want to be red (i.e. color-coded labels, banners, etc.)", @@ -13391,6 +14832,112 @@ ] } }, + "pf-t--global--border--color--main--default": { + "dark": { + "type": "color", + "value": "#292929", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{global.background.color.primary.default}" + }, + "name": "pf-t--global--border--color--main--default", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "main", + "state": "default" + }, + "path": [ + "global", + "border", + "color", + "main", + "default" + ], + "references": [ + { + "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.", + "type": "color", + "value": "#292929", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.", + "type": "color", + "value": "{global.dark.background.color.200}" + }, + "name": "pf-t--global--background--color--primary--default", + "attributes": { + "category": "global", + "type": "background", + "item": "color", + "subitem": "primary", + "state": "default" + }, + "path": [ + "global", + "background", + "color", + "primary", + "default" + ], + "references": [ + { + "type": "color", + "value": "#292929", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.80}" + }, + "name": "pf-t--global--dark--background--color--200", + "attributes": { + "category": "global", + "type": "dark", + "item": "background", + "subitem": "color", + "state": "200" + }, + "path": [ + "global", + "dark", + "background", + "color", + "200" + ], + "references": [ + { + "type": "color", + "value": "#292929", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#292929" + }, + "name": "pf-t--color--gray--80", + "attributes": { + "category": "color", + "type": "gray", + "item": "80" + }, + "path": [ + "color", + "gray", + "80" + ] + } + ] + } + ] + } + ] + } + }, "pf-t--global--box-shadow--color--sm--default": { "dark": { "description": "Use as the color of small box-shadows.", @@ -15488,6 +17035,596 @@ ] } }, + "pf-t--global--background--color--loading--skeleton--default": { + "dark": { + "type": "color", + "value": "rgba(199, 199, 199, 0.2500)", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{global.dark.background.color.700}" + }, + "name": "pf-t--global--background--color--loading--skeleton--default", + "attributes": { + "category": "global", + "type": "background", + "item": "color", + "subitem": "loading", + "state": "skeleton" + }, + "path": [ + "global", + "background", + "color", + "loading", + "skeleton", + "default" + ], + "references": [ + { + "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--background--color--loading--skeleton--subtle": { + "dark": { + "type": "color", + "value": "rgba(199, 199, 199, 0.1500)", + "filePath": "tokens/dark/semantic.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{global.dark.background.color.600}" + }, + "name": "pf-t--global--background--color--loading--skeleton--subtle", + "attributes": { + "category": "global", + "type": "background", + "item": "color", + "subitem": "loading", + "state": "skeleton" + }, + "path": [ + "global", + "background", + "color", + "loading", + "skeleton", + "subtle" + ], + "references": [ + { + "type": "color", + "value": "rgba(199, 199, 199, 0.1500)", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "rgba(199, 199, 199, 0.1500)" + }, + "name": "pf-t--global--dark--background--color--600", + "attributes": { + "category": "global", + "type": "dark", + "item": "background", + "subitem": "color", + "state": "600" + }, + "path": [ + "global", + "dark", + "background", + "color", + "600" + ] + } + ] + } + }, + "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 +22634,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 +23229,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 +23335,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 +23440,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 +23547,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 +23654,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 +23759,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 +23864,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" ] } ] @@ -28299,13 +31070,13 @@ }, "pf-t--global--focus-ring--color--default": { "dark": { - "description": "This token is used to define the color value for custom focus rings.", + "description": "Use as color value for custom focus rings", "type": "color", "value": "#92c5f9", "filePath": "tokens/dark/semantic.dark.json", "isSource": true, "original": { - "description": "This token is used to define the color value for custom focus rings.", + "description": "Use as color value for custom focus rings", "type": "color", "value": "{global.dark.focus-ring.color.100}" }, @@ -30612,11 +33383,13 @@ }, "pf-t--global--spacer--inset--page-chrome": { "default": { + "description": "Use to define inner padding for structural elements in order to maintain alignment, like in the masthead, navigation menu, or main page content.", "type": "number", "value": "1.5rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { + "description": "Use to define inner padding for structural elements in order to maintain alignment, like in the masthead, navigation menu, or main page content.", "type": "number", "value": "{global.spacer.lg}" }, @@ -30685,11 +33458,13 @@ }, "pf-t--global--spacer--gutter--default": { "default": { + "description": "Use to define gutters between elements in certain layouts, like grids.", "type": "number", "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { + "description": "Use to define gutters between elements in certain layouts, like grids.", "type": "number", "value": "{global.spacer.md}" }, @@ -33029,139 +35804,6 @@ ] } }, - "pf-t--global--border--width--main--default": { - "default": { - "type": "number", - "value": "4px", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": false, - "original": { - "type": "number", - "value": "{global.border.width.400}" - }, - "name": "pf-t--global--border--width--main--default", - "attributes": { - "category": "global", - "type": "border", - "item": "width", - "subitem": "main", - "state": "default" - }, - "path": [ - "global", - "border", - "width", - "main", - "default" - ], - "references": [ - { - "type": "number", - "value": "4px", - "filePath": "tokens/default/base.dimension.json", - "isSource": false, - "original": { - "type": "number", - "value": 4 - }, - "name": "pf-t--global--border--width--400", - "attributes": { - "category": "global", - "type": "border", - "item": "width", - "subitem": "400" - }, - "path": [ - "global", - "border", - "width", - "400" - ] - } - ] - } - }, - "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 +36076,139 @@ ] } }, + "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--main--default": { + "default": { + "type": "number", + "value": "4px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": false, + "original": { + "type": "number", + "value": "{global.border.width.400}" + }, + "name": "pf-t--global--border--width--main--default", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "main", + "state": "default" + }, + "path": [ + "global", + "border", + "width", + "main", + "default" + ], + "references": [ + { + "type": "number", + "value": "4px", + "filePath": "tokens/default/base.dimension.json", + "isSource": false, + "original": { + "type": "number", + "value": 4 + }, + "name": "pf-t--global--border--width--400", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "400" + }, + "path": [ + "global", + "border", + "width", + "400" + ] + } + ] + } + }, "pf-t--global--border--width--action--default": { "default": { "description": "Use as the default border width for actions like secondary and tertiary buttons", @@ -33488,6 +36263,96 @@ ] } }, + "pf-t--global--border--width--action--plain--default": { + "default": { + "description": "Use as the default border width for plain actions", + "type": "number", + "value": "0px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": false, + "original": { + "description": "Use as the default border width for plain actions", + "type": "number", + "value": 0 + }, + "name": "pf-t--global--border--width--action--plain--default", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "action", + "state": "plain" + }, + "path": [ + "global", + "border", + "width", + "action", + "plain", + "default" + ] + } + }, + "pf-t--global--border--width--action--plain--hover": { + "default": { + "description": "Use as the border width for plain actions in their hover state", + "type": "number", + "value": "0px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": false, + "original": { + "description": "Use as the border width for plain actions in their hover state", + "type": "number", + "value": 0 + }, + "name": "pf-t--global--border--width--action--plain--hover", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "action", + "state": "plain" + }, + "path": [ + "global", + "border", + "width", + "action", + "plain", + "hover" + ] + } + }, + "pf-t--global--border--width--action--plain--clicked": { + "default": { + "description": "Use as the border width for plain actions in their clicked state", + "type": "number", + "value": "0px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": false, + "original": { + "description": "Use as the border width for plain actions in their clicked state", + "type": "number", + "value": 0 + }, + "name": "pf-t--global--border--width--action--plain--clicked", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "action", + "state": "plain" + }, + "path": [ + "global", + "border", + "width", + "action", + "plain", + "clicked" + ] + } + }, "pf-t--global--border--width--action--hover": { "default": { "description": "Use as the hover state border width for actions like secondary and tertiary buttons", @@ -33596,96 +36461,6 @@ ] } }, - "pf-t--global--border--width--action--plain--default": { - "default": { - "description": "Use as the default border width for actions like secondary and tertiary buttons", - "type": "number", - "value": "0px", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": false, - "original": { - "description": "Use as the default border width for actions like secondary and tertiary buttons", - "type": "number", - "value": 0 - }, - "name": "pf-t--global--border--width--action--plain--default", - "attributes": { - "category": "global", - "type": "border", - "item": "width", - "subitem": "action", - "state": "plain" - }, - "path": [ - "global", - "border", - "width", - "action", - "plain", - "default" - ] - } - }, - "pf-t--global--border--width--action--plain--hover": { - "default": { - "description": "Use as the hover state border width for actions like secondary and tertiary buttons", - "type": "number", - "value": "0px", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": false, - "original": { - "description": "Use as the hover state border width for actions like secondary and tertiary buttons", - "type": "number", - "value": 0 - }, - "name": "pf-t--global--border--width--action--plain--hover", - "attributes": { - "category": "global", - "type": "border", - "item": "width", - "subitem": "action", - "state": "plain" - }, - "path": [ - "global", - "border", - "width", - "action", - "plain", - "hover" - ] - } - }, - "pf-t--global--border--width--action--plain--clicked": { - "default": { - "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", - "type": "number", - "value": "0px", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": false, - "original": { - "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", - "type": "number", - "value": 0 - }, - "name": "pf-t--global--border--width--action--plain--clicked", - "attributes": { - "category": "global", - "type": "border", - "item": "width", - "subitem": "action", - "state": "plain" - }, - "path": [ - "global", - "border", - "width", - "action", - "plain", - "clicked" - ] - } - }, "pf-t--global--border--width--control--default": { "default": { "description": "Use as the default border width for controls like text inputs, menu toggles and control buttons", @@ -39479,11 +42254,13 @@ }, "pf-t--global--focus-ring--position--offset": { "default": { + "description": "Use to define the position of a custom focus ring that sits outside (offset) of the element receiving focus.", "type": "number", "value": "2px", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { + "description": "Use to define the position of a custom focus ring that sits outside (offset) of the element receiving focus.", "type": "number", "value": 2 }, @@ -39504,11 +42281,13 @@ }, "pf-t--global--focus-ring--position--inset": { "default": { + "description": "Use to define the position of a custom focus ring that sits inside (inset) of the element receiving focus.", "type": "number", "value": "-4px", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { + "description": "Use to define the position of a custom focus ring that sits inside (inset) of the element receiving focus.", "type": "number", "value": -4 }, @@ -39529,11 +42308,13 @@ }, "pf-t--global--focus-ring--width--offset": { "default": { + "description": "Use to define the width of a custom focus ring that sits outside (offset) of the element receiving focus.", "type": "number", "value": "2px", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { + "description": "Use to define the width of a custom focus ring that sits outside (offset) of the element receiving focus.", "type": "number", "value": 2 }, @@ -39554,11 +42335,13 @@ }, "pf-t--global--focus-ring--width--inset": { "default": { + "description": "Use to define the width of a custom focus ring that sits inside (inset) of the element receiving focus.", "type": "number", "value": "3px", "filePath": "tokens/default/semantic.dimension.json", "isSource": false, "original": { + "description": "Use to define the width of a custom focus ring that sits inside (inset) of the element receiving focus.", "type": "number", "value": 3 }, @@ -39929,6 +42712,243 @@ ] } }, + "pf-t--global--motion--duration--fade--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.", + "type": "number", + "value": "100ms", + "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.", + "type": "number", + "value": "{global.motion.duration.sm}" + }, + "name": "pf-t--global--motion--duration--fade--short", + "attributes": { + "category": "global", + "type": "motion", + "item": "duration", + "subitem": "fade", + "state": "short" + }, + "path": [ + "global", + "motion", + "duration", + "fade", + "short" + ], + "references": [ + { + "description": "Use for a short animation duration. Use for simple and/or small animations.", + "type": "number", + "value": "100ms", + "filePath": "tokens/default/semantic.motion.json", + "isSource": false, + "original": { + "description": "Use for a short animation duration. Use for simple and/or small animations.", + "type": "number", + "value": "{global.duration.100}" + }, + "name": "pf-t--global--motion--duration--sm", + "attributes": { + "category": "global", + "type": "motion", + "item": "duration", + "subitem": "sm" + }, + "path": [ + "global", + "motion", + "duration", + "sm" + ], + "references": [ + { + "type": "number", + "value": "100ms", + "filePath": "tokens/default/base.motion.json", + "isSource": false, + "original": { + "type": "number", + "value": 100 + }, + "name": "pf-t--global--duration--100", + "attributes": { + "category": "global", + "type": "duration", + "item": "100" + }, + "path": [ + "global", + "duration", + "100" + ] + } + ] + } + ] + } + }, + "pf-t--global--motion--duration--fade--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.", + "type": "number", + "value": "200ms", + "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.", + "type": "number", + "value": "{global.motion.duration.md}" + }, + "name": "pf-t--global--motion--duration--fade--default", + "attributes": { + "category": "global", + "type": "motion", + "item": "duration", + "subitem": "fade", + "state": "default" + }, + "path": [ + "global", + "motion", + "duration", + "fade", + "default" + ], + "references": [ + { + "description": "Use for a medium animation duration.", + "type": "number", + "value": "200ms", + "filePath": "tokens/default/semantic.motion.json", + "isSource": false, + "original": { + "description": "Use for a medium animation duration.", + "type": "number", + "value": "{global.duration.200}" + }, + "name": "pf-t--global--motion--duration--md", + "attributes": { + "category": "global", + "type": "motion", + "item": "duration", + "subitem": "md" + }, + "path": [ + "global", + "motion", + "duration", + "md" + ], + "references": [ + { + "type": "number", + "value": "200ms", + "filePath": "tokens/default/base.motion.json", + "isSource": false, + "original": { + "type": "number", + "value": 200 + }, + "name": "pf-t--global--duration--200", + "attributes": { + "category": "global", + "type": "duration", + "item": "200" + }, + "path": [ + "global", + "duration", + "200" + ] + } + ] + } + ] + } + }, + "pf-t--global--motion--duration--fade--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.", + "type": "number", + "value": "300ms", + "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.", + "type": "number", + "value": "{global.motion.duration.lg}" + }, + "name": "pf-t--global--motion--duration--fade--long", + "attributes": { + "category": "global", + "type": "motion", + "item": "duration", + "subitem": "fade", + "state": "long" + }, + "path": [ + "global", + "motion", + "duration", + "fade", + "long" + ], + "references": [ + { + "description": "Use for long animation duration. Use for larger, more expressive animations.", + "type": "number", + "value": "300ms", + "filePath": "tokens/default/semantic.motion.json", + "isSource": false, + "original": { + "description": "Use for long animation duration. Use for larger, more expressive animations.", + "type": "number", + "value": "{global.duration.300}" + }, + "name": "pf-t--global--motion--duration--lg", + "attributes": { + "category": "global", + "type": "motion", + "item": "duration", + "subitem": "lg" + }, + "path": [ + "global", + "motion", + "duration", + "lg" + ], + "references": [ + { + "type": "number", + "value": "300ms", + "filePath": "tokens/default/base.motion.json", + "isSource": false, + "original": { + "type": "number", + "value": 300 + }, + "name": "pf-t--global--duration--300", + "attributes": { + "category": "global", + "type": "duration", + "item": "300" + }, + "path": [ + "global", + "duration", + "300" + ] + } + ] + } + ] + } + }, "pf-t--global--motion--duration--slide-out--short": { "default": { "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.", @@ -40403,243 +43423,6 @@ ] } }, - "pf-t--global--motion--duration--fade--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.", - "type": "number", - "value": "100ms", - "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.", - "type": "number", - "value": "{global.motion.duration.sm}" - }, - "name": "pf-t--global--motion--duration--fade--short", - "attributes": { - "category": "global", - "type": "motion", - "item": "duration", - "subitem": "fade", - "state": "short" - }, - "path": [ - "global", - "motion", - "duration", - "fade", - "short" - ], - "references": [ - { - "description": "Use for a short animation duration. Use for simple and/or small animations.", - "type": "number", - "value": "100ms", - "filePath": "tokens/default/semantic.motion.json", - "isSource": false, - "original": { - "description": "Use for a short animation duration. Use for simple and/or small animations.", - "type": "number", - "value": "{global.duration.100}" - }, - "name": "pf-t--global--motion--duration--sm", - "attributes": { - "category": "global", - "type": "motion", - "item": "duration", - "subitem": "sm" - }, - "path": [ - "global", - "motion", - "duration", - "sm" - ], - "references": [ - { - "type": "number", - "value": "100ms", - "filePath": "tokens/default/base.motion.json", - "isSource": false, - "original": { - "type": "number", - "value": 100 - }, - "name": "pf-t--global--duration--100", - "attributes": { - "category": "global", - "type": "duration", - "item": "100" - }, - "path": [ - "global", - "duration", - "100" - ] - } - ] - } - ] - } - }, - "pf-t--global--motion--duration--fade--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.", - "type": "number", - "value": "200ms", - "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.", - "type": "number", - "value": "{global.motion.duration.md}" - }, - "name": "pf-t--global--motion--duration--fade--default", - "attributes": { - "category": "global", - "type": "motion", - "item": "duration", - "subitem": "fade", - "state": "default" - }, - "path": [ - "global", - "motion", - "duration", - "fade", - "default" - ], - "references": [ - { - "description": "Use for a medium animation duration.", - "type": "number", - "value": "200ms", - "filePath": "tokens/default/semantic.motion.json", - "isSource": false, - "original": { - "description": "Use for a medium animation duration.", - "type": "number", - "value": "{global.duration.200}" - }, - "name": "pf-t--global--motion--duration--md", - "attributes": { - "category": "global", - "type": "motion", - "item": "duration", - "subitem": "md" - }, - "path": [ - "global", - "motion", - "duration", - "md" - ], - "references": [ - { - "type": "number", - "value": "200ms", - "filePath": "tokens/default/base.motion.json", - "isSource": false, - "original": { - "type": "number", - "value": 200 - }, - "name": "pf-t--global--duration--200", - "attributes": { - "category": "global", - "type": "duration", - "item": "200" - }, - "path": [ - "global", - "duration", - "200" - ] - } - ] - } - ] - } - }, - "pf-t--global--motion--duration--fade--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.", - "type": "number", - "value": "300ms", - "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.", - "type": "number", - "value": "{global.motion.duration.lg}" - }, - "name": "pf-t--global--motion--duration--fade--long", - "attributes": { - "category": "global", - "type": "motion", - "item": "duration", - "subitem": "fade", - "state": "long" - }, - "path": [ - "global", - "motion", - "duration", - "fade", - "long" - ], - "references": [ - { - "description": "Use for long animation duration. Use for larger, more expressive animations.", - "type": "number", - "value": "300ms", - "filePath": "tokens/default/semantic.motion.json", - "isSource": false, - "original": { - "description": "Use for long animation duration. Use for larger, more expressive animations.", - "type": "number", - "value": "{global.duration.300}" - }, - "name": "pf-t--global--motion--duration--lg", - "attributes": { - "category": "global", - "type": "motion", - "item": "duration", - "subitem": "lg" - }, - "path": [ - "global", - "motion", - "duration", - "lg" - ], - "references": [ - { - "type": "number", - "value": "300ms", - "filePath": "tokens/default/base.motion.json", - "isSource": false, - "original": { - "type": "number", - "value": 300 - }, - "name": "pf-t--global--duration--300", - "attributes": { - "category": "global", - "type": "duration", - "item": "300" - }, - "path": [ - "global", - "duration", - "300" - ] - } - ] - } - ] - } - }, "pf-t--global--motion--duration--slide-in--short": { "default": { "description": "Use for a short duration of a slide-in animation, which moves an offscreen element into the viewport.", @@ -41999,6 +44782,31 @@ ] } }, + "pf-t--global--background--color--700": { + "default": { + "type": "color", + "value": "rgba(199, 199, 199, 0.1000)", + "filePath": "tokens/default/base.json", + "isSource": false, + "original": { + "type": "color", + "value": "rgba(199, 199, 199, 0.1000)" + }, + "name": "pf-t--global--background--color--700", + "attributes": { + "category": "global", + "type": "background", + "item": "color", + "subitem": "700" + }, + "path": [ + "global", + "background", + "color", + "700" + ] + } + }, "pf-t--global--background--color--highlight--100": { "default": { "type": "color", @@ -42339,6 +45147,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", @@ -43255,12 +46413,12 @@ "pf-t--global--color--status--danger--300": { "default": { "type": "color", - "value": "#4c1405", + "value": "#731f00", "filePath": "tokens/default/base.json", "isSource": false, "original": { "type": "color", - "value": "{color.red-orange.80}" + "value": "{color.red-orange.70}" }, "name": "pf-t--global--color--status--danger--300", "attributes": { @@ -43280,23 +46438,23 @@ "references": [ { "type": "color", - "value": "#4c1405", + "value": "#731f00", "filePath": "tokens/dark/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#4c1405" + "value": "#731f00" }, - "name": "pf-t--color--red-orange--80", + "name": "pf-t--color--red-orange--70", "attributes": { "category": "color", "type": "red-orange", - "item": "80" + "item": "70" }, "path": [ "color", "red-orange", - "80" + "70" ] } ] @@ -47365,6 +50523,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,6 +50802,363 @@ ] } }, + "pf-t--global--dark--color--brand--accent--100": { + "dark": { + "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--dark--color--brand--accent--200": { + "dark": { + "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--dark--color--brand--accent--300": { + "dark": { + "type": "color", + "value": "#f9a8a8", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.30}" + }, + "name": "pf-t--global--dark--color--brand--accent--300", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "accent", + "300" + ], + "references": [ + { + "type": "color", + "value": "#f9a8a8", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#f9a8a8" + }, + "name": "pf-t--color--red--30", + "attributes": { + "category": "color", + "type": "red", + "item": "30" + }, + "path": [ + "color", + "red", + "30" + ] + } + ] + } + }, + "pf-t--global--dark--color--brand--accent--400": { + "dark": { + "type": "color", + "value": "#fbc5c5", + "filePath": "tokens/dark/base.dark.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.red.20}" + }, + "name": "pf-t--global--dark--color--brand--accent--400", + "attributes": { + "category": "global", + "type": "dark", + "item": "color", + "subitem": "brand", + "state": "accent" + }, + "path": [ + "global", + "dark", + "color", + "brand", + "accent", + "400" + ], + "references": [ + { + "type": "color", + "value": "#fbc5c5", + "filePath": "tokens/dark/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#fbc5c5" + }, + "name": "pf-t--color--red--20", + "attributes": { + "category": "color", + "type": "red", + "item": "20" + }, + "path": [ + "color", + "red", + "20" + ] + } + ] + } + }, + "pf-t--global--dark--color--brand--subtle--100": { + "dark": { + "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--dark--color--brand--subtle--200": { + "dark": { + "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--dark--color--brand--subtle--300": { + "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--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--dark--color--disabled--100": { "dark": { "type": "color", @@ -58245,81 +61787,6 @@ ] } }, - "pf-t--chart--global--layout--padding": { - "dark": { - "type": "number", - "value": 50, - "filePath": "tokens/dark/charts.dark.json", - "isSource": true, - "original": { - "type": "number", - "value": 50 - }, - "name": "pf-t--chart--global--layout--padding", - "attributes": { - "category": "chart", - "type": "global", - "item": "layout", - "subitem": "padding" - }, - "path": [ - "chart", - "global", - "layout", - "padding" - ] - } - }, - "pf-t--chart--global--layout--height": { - "dark": { - "type": "number", - "value": 300, - "filePath": "tokens/dark/charts.dark.json", - "isSource": true, - "original": { - "type": "number", - "value": 300 - }, - "name": "pf-t--chart--global--layout--height", - "attributes": { - "category": "chart", - "type": "global", - "item": "layout", - "subitem": "height" - }, - "path": [ - "chart", - "global", - "layout", - "height" - ] - } - }, - "pf-t--chart--global--layout--width": { - "dark": { - "type": "number", - "value": 450, - "filePath": "tokens/dark/charts.dark.json", - "isSource": true, - "original": { - "type": "number", - "value": 450 - }, - "name": "pf-t--chart--global--layout--width", - "attributes": { - "category": "chart", - "type": "global", - "item": "layout", - "subitem": "width" - }, - "path": [ - "chart", - "global", - "layout", - "width" - ] - } - }, "pf-t--chart--global--stroke-line-cap": { "dark": { "type": "string", @@ -58501,6 +61968,81 @@ ] } }, + "pf-t--chart--global--layout--padding": { + "dark": { + "type": "number", + "value": 50, + "filePath": "tokens/dark/charts.dark.json", + "isSource": true, + "original": { + "type": "number", + "value": 50 + }, + "name": "pf-t--chart--global--layout--padding", + "attributes": { + "category": "chart", + "type": "global", + "item": "layout", + "subitem": "padding" + }, + "path": [ + "chart", + "global", + "layout", + "padding" + ] + } + }, + "pf-t--chart--global--layout--height": { + "dark": { + "type": "number", + "value": 300, + "filePath": "tokens/dark/charts.dark.json", + "isSource": true, + "original": { + "type": "number", + "value": 300 + }, + "name": "pf-t--chart--global--layout--height", + "attributes": { + "category": "chart", + "type": "global", + "item": "layout", + "subitem": "height" + }, + "path": [ + "chart", + "global", + "layout", + "height" + ] + } + }, + "pf-t--chart--global--layout--width": { + "dark": { + "type": "number", + "value": 450, + "filePath": "tokens/dark/charts.dark.json", + "isSource": true, + "original": { + "type": "number", + "value": 450 + }, + "name": "pf-t--chart--global--layout--width", + "attributes": { + "category": "chart", + "type": "global", + "item": "layout", + "subitem": "width" + }, + "path": [ + "chart", + "global", + "layout", + "width" + ] + } + }, "pf-t--chart--global--stroke-line-join": { "dark": { "type": "string", diff --git a/packages/module/patternfly-docs/content/token-layers-default.json b/packages/module/patternfly-docs/content/token-layers-default.json index b1fbea7..65aeffc 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": [ @@ -4656,72 +5607,530 @@ }, "pf-t--global--icon--color--regular": { "default": { - "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 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--subtle": { + "default": { + "description": "Use as the color for icons when you want the icon to have less emphasis and/or when paired with subtle-colored text", + "type": "color", + "value": "#707070", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the color for icons when you want the icon to have less emphasis and/or when paired with subtle-colored text", + "type": "color", + "value": "{global.icon.color.200}" + }, + "name": "pf-t--global--icon--color--subtle", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "subtle" + }, + "path": [ + "global", + "icon", + "color", + "subtle" + ], + "references": [ + { + "type": "color", + "value": "#707070", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.50}" + }, + "name": "pf-t--global--icon--color--200", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "200" + }, + "path": [ + "global", + "icon", + "color", + "200" + ], + "references": [ + { + "type": "color", + "value": "#707070", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#707070" + }, + "name": "pf-t--color--gray--50", + "attributes": { + "category": "color", + "type": "gray", + "item": "50" + }, + "path": [ + "color", + "gray", + "50" + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--inverse": { + "default": { + "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--disabled": { + "default": { + "description": "Use as the color for icons that show in disabled icon buttons and/or when paired with disabled-color text", + "type": "color", + "value": "#a3a3a3", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that show in disabled icon buttons and/or when paired with disabled-color text", + "type": "color", + "value": "{global.color.disabled.200}" + }, + "name": "pf-t--global--icon--color--disabled", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "disabled" + }, + "path": [ + "global", + "icon", + "color", + "disabled" + ], + "references": [ + { + "type": "color", + "value": "#a3a3a3", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.40}" + }, + "name": "pf-t--global--color--disabled--200", + "attributes": { + "category": "global", + "type": "color", + "item": "disabled", + "subitem": "200" + }, + "path": [ + "global", + "color", + "disabled", + "200" + ], + "references": [ + { + "type": "color", + "value": "#a3a3a3", + "filePath": "tokens/default/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--icon--color--on-disabled": { + "default": { + "description": "Use as the color for icons that are placed on a disabled background color and/or are paired with on-disabled colored text.", + "type": "color", + "value": "#4d4d4d", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the color for icons that are placed on a disabled background color and/or are paired with on-disabled colored text.", + "type": "color", + "value": "{global.color.disabled.300}" + }, + "name": "pf-t--global--icon--color--on-disabled", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "on-disabled" + }, + "path": [ + "global", + "icon", + "color", + "on-disabled" + ], + "references": [ + { + "type": "color", + "value": "#4d4d4d", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.60}" + }, + "name": "pf-t--global--color--disabled--300", + "attributes": { + "category": "global", + "type": "color", + "item": "disabled", + "subitem": "300" + }, + "path": [ + "global", + "color", + "disabled", + "300" + ], + "references": [ + { + "type": "color", + "value": "#4d4d4d", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#4d4d4d" + }, + "name": "pf-t--color--gray--60", + "attributes": { + "category": "color", + "type": "gray", + "item": "60" + }, + "path": [ + "color", + "gray", + "60" + ] + } + ] + } + ] + } + }, + "pf-t--global--icon--color--severity--undefined--default": { + "default": { + "description": "Use as the default color for severity icons that don’t communicate a specific severity level for issues.", + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the default color for severity icons that don’t communicate a specific severity level for issues.", + "type": "color", + "value": "{global.color.severity.undefined.100}" + }, + "name": "pf-t--global--icon--color--severity--undefined--default", + "attributes": { + "category": "global", + "type": "icon", + "item": "color", + "subitem": "severity", + "state": "undefined" + }, + "path": [ + "global", + "icon", + "color", + "severity", + "undefined", + "default" + ], + "references": [ + { + "type": "color", + "value": "#c7c7c7", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.gray.30}" + }, + "name": "pf-t--global--color--severity--undefined--100", + "attributes": { + "category": "global", + "type": "color", + "item": "severity", + "subitem": "undefined", + "state": "100" + }, + "path": [ + "global", + "color", + "severity", + "undefined", + "100" + ], + "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--icon--color--severity--none--default": { + "default": { + "description": "Use as the default color for severity icons that identify no issues.", "type": "color", - "value": "#1f1f1f", + "value": "#4394e5", "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 severity icons that identify no issues.", "type": "color", - "value": "{global.icon.color.100}" + "value": "{global.color.severity.none.100}" }, - "name": "pf-t--global--icon--color--regular", + "name": "pf-t--global--icon--color--severity--none--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "regular" + "subitem": "severity", + "state": "none" }, "path": [ "global", "icon", "color", - "regular" + "severity", + "none", + "default" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#4394e5", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.blue.40}" }, - "name": "pf-t--global--icon--color--100", + "name": "pf-t--global--color--severity--none--100", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "100" + "type": "color", + "item": "severity", + "subitem": "none", + "state": "100" }, "path": [ "global", - "icon", "color", + "severity", + "none", "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#4394e5", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#4394e5" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--blue--40", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "blue", + "item": "40" }, "path": [ "color", - "gray", - "90" + "blue", + "40" ] } ] @@ -4729,30 +6138,33 @@ ] } }, - "pf-t--global--icon--color--subtle": { + "pf-t--global--icon--color--severity--minor--default": { "default": { - "description": "Use as the color for icons when you want the icon to have less emphasis and/or when paired with subtle-colored text", + "description": "Use as the default color for severity icons that identify issues of minor severity.", "type": "color", "value": "#707070", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons when you want the icon to have less emphasis and/or when paired with subtle-colored text", + "description": "Use as the default color for severity icons that identify issues of minor severity.", "type": "color", - "value": "{global.icon.color.200}" + "value": "{global.color.severity.minor.100}" }, - "name": "pf-t--global--icon--color--subtle", + "name": "pf-t--global--icon--color--severity--minor--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "subtle" + "subitem": "severity", + "state": "minor" }, "path": [ "global", "icon", "color", - "subtle" + "severity", + "minor", + "default" ], "references": [ { @@ -4764,18 +6176,20 @@ "type": "color", "value": "{color.gray.50}" }, - "name": "pf-t--global--icon--color--200", + "name": "pf-t--global--color--severity--minor--100", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "200" + "type": "color", + "item": "severity", + "subitem": "minor", + "state": "100" }, "path": [ "global", - "icon", "color", - "200" + "severity", + "minor", + "100" ], "references": [ { @@ -4804,72 +6218,79 @@ ] } }, - "pf-t--global--icon--color--inverse": { + "pf-t--global--icon--color--severity--moderate--default": { "default": { - "description": "Use as the color for icons that are placed on an inverse background color", + "description": "Use as the default color for severity icons that identify issues of moderate severity.", "type": "color", - "value": "#ffffff", + "value": "#dca614", "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 severity icons that identify issues of moderate severity.", "type": "color", - "value": "{global.icon.color.300}" + "value": "{global.color.severity.moderate.100}" }, - "name": "pf-t--global--icon--color--inverse", + "name": "pf-t--global--icon--color--severity--moderate--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "inverse" + "subitem": "severity", + "state": "moderate" }, "path": [ "global", "icon", "color", - "inverse" + "severity", + "moderate", + "default" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#dca614", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.white}" + "value": "{color.yellow.40}" }, - "name": "pf-t--global--icon--color--300", + "name": "pf-t--global--color--severity--moderate--100", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "300" + "type": "color", + "item": "severity", + "subitem": "moderate", + "state": "100" }, "path": [ "global", - "icon", "color", - "300" + "severity", + "moderate", + "100" ], "references": [ { "type": "color", - "value": "#ffffff", + "value": "#dca614", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#ffffff" + "value": "#dca614" }, - "name": "pf-t--color--white", + "name": "pf-t--color--yellow--40", "attributes": { "category": "color", - "type": "white" + "type": "yellow", + "item": "40" }, "path": [ "color", - "white" + "yellow", + "40" ] } ] @@ -4877,74 +6298,79 @@ ] } }, - "pf-t--global--icon--color--disabled": { + "pf-t--global--icon--color--severity--important--default": { "default": { - "description": "Use as the color for icons that show in disabled icon buttons and/or when paired with disabled-color text", + "description": "Use as the default color for severity icons that identify issues of important severity.", "type": "color", - "value": "#a3a3a3", + "value": "#ca6c0f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that show in disabled icon buttons and/or when paired with disabled-color text", + "description": "Use as the default color for severity icons that identify issues of important severity.", "type": "color", - "value": "{global.color.disabled.200}" + "value": "{global.color.severity.important.100}" }, - "name": "pf-t--global--icon--color--disabled", + "name": "pf-t--global--icon--color--severity--important--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "disabled" + "subitem": "severity", + "state": "important" }, "path": [ "global", "icon", "color", - "disabled" + "severity", + "important", + "default" ], "references": [ { "type": "color", - "value": "#a3a3a3", + "value": "#ca6c0f", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.40}" + "value": "{color.orange.50}" }, - "name": "pf-t--global--color--disabled--200", + "name": "pf-t--global--color--severity--important--100", "attributes": { "category": "global", "type": "color", - "item": "disabled", - "subitem": "200" + "item": "severity", + "subitem": "important", + "state": "100" }, "path": [ "global", "color", - "disabled", - "200" + "severity", + "important", + "100" ], "references": [ { "type": "color", - "value": "#a3a3a3", + "value": "#ca6c0f", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#a3a3a3" + "value": "#ca6c0f" }, - "name": "pf-t--color--gray--40", + "name": "pf-t--color--orange--50", "attributes": { "category": "color", - "type": "gray", - "item": "40" + "type": "orange", + "item": "50" }, "path": [ "color", - "gray", - "40" + "orange", + "50" ] } ] @@ -4952,73 +6378,78 @@ ] } }, - "pf-t--global--icon--color--on-disabled": { + "pf-t--global--icon--color--severity--critical--default": { "default": { - "description": "Use as the color for icons that are placed on a disabled background color and/or are paired with on-disabled colored text.", + "description": "Use as the default color for severity icons that identify issues of critical severity.", "type": "color", - "value": "#4d4d4d", + "value": "#b1380b", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the color for icons that are placed on a disabled background color and/or are paired with on-disabled colored text.", + "description": "Use as the default color for severity icons that identify issues of critical severity.", "type": "color", - "value": "{global.color.disabled.300}" + "value": "{global.color.severity.critical.100}" }, - "name": "pf-t--global--icon--color--on-disabled", + "name": "pf-t--global--icon--color--severity--critical--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "on-disabled" + "subitem": "severity", + "state": "critical" }, "path": [ "global", "icon", "color", - "on-disabled" + "severity", + "critical", + "default" ], "references": [ { "type": "color", - "value": "#4d4d4d", + "value": "#b1380b", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.60}" + "value": "{color.red-orange.60}" }, - "name": "pf-t--global--color--disabled--300", + "name": "pf-t--global--color--severity--critical--100", "attributes": { "category": "global", "type": "color", - "item": "disabled", - "subitem": "300" + "item": "severity", + "subitem": "critical", + "state": "100" }, "path": [ "global", "color", - "disabled", - "300" + "severity", + "critical", + "100" ], "references": [ { "type": "color", - "value": "#4d4d4d", + "value": "#b1380b", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#4d4d4d" + "value": "#b1380b" }, - "name": "pf-t--color--gray--60", + "name": "pf-t--color--red-orange--60", "attributes": { "category": "color", - "type": "gray", + "type": "red-orange", "item": "60" }, "path": [ "color", - "gray", + "red-orange", "60" ] } @@ -5027,79 +6458,104 @@ ] } }, - "pf-t--global--icon--color--severity--undefined--default": { + "pf-t--global--icon--color--nonstatus--on-red--default": { "default": { - "description": "Use as the default color for severity icons that don’t communicate a specific severity level for issues.", + "description": "Use as the default color for icons that are placed on a non status red background color and/or are paired with on-red colored text.", "type": "color", - "value": "#c7c7c7", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for severity icons that don’t communicate a specific severity level for issues.", + "description": "Use as the default color for icons that are placed on a non status red background color and/or are paired with on-red colored text.", "type": "color", - "value": "{global.color.severity.undefined.100}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--severity--undefined--default", + "name": "pf-t--global--icon--color--nonstatus--on-red--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "severity", - "state": "undefined" + "subitem": "nonstatus", + "state": "on-red" }, "path": [ "global", "icon", "color", - "severity", - "undefined", + "nonstatus", + "on-red", "default" ], "references": [ { + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#c7c7c7", - "filePath": "tokens/default/base.json", + "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": "{color.gray.30}" + "value": "{global.icon.color.100}" }, - "name": "pf-t--global--color--severity--undefined--100", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", - "type": "color", - "item": "severity", - "subitem": "undefined", - "state": "100" + "type": "icon", + "item": "color", + "subitem": "regular" }, "path": [ "global", + "icon", "color", - "severity", - "undefined", - "100" + "regular" ], "references": [ { "type": "color", - "value": "#c7c7c7", - "filePath": "tokens/default/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#c7c7c7" + "value": "{color.gray.90}" }, - "name": "pf-t--color--gray--30", + "name": "pf-t--global--icon--color--100", "attributes": { - "category": "color", - "type": "gray", - "item": "30" + "category": "global", + "type": "icon", + "item": "color", + "subitem": "100" }, "path": [ + "global", + "icon", "color", - "gray", - "30" + "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" + ] + } ] } ] @@ -5107,79 +6563,104 @@ ] } }, - "pf-t--global--icon--color--severity--none--default": { + "pf-t--global--icon--color--nonstatus--on-red--hover": { "default": { - "description": "Use as the default color for severity icons that identify no issues.", + "description": "Use as the hover state color for icons that are placed on a non status red background color and/or are paired with on-red colored text.", "type": "color", - "value": "#4394e5", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for severity icons that identify no issues.", + "description": "Use as the hover state color for icons that are placed on a non status red background color and/or are paired with on-red colored text.", "type": "color", - "value": "{global.color.severity.none.100}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--severity--none--default", + "name": "pf-t--global--icon--color--nonstatus--on-red--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "severity", - "state": "none" + "subitem": "nonstatus", + "state": "on-red" }, "path": [ "global", "icon", "color", - "severity", - "none", - "default" + "nonstatus", + "on-red", + "hover" ], "references": [ { + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#4394e5", - "filePath": "tokens/default/base.json", + "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": "{color.blue.40}" + "value": "{global.icon.color.100}" }, - "name": "pf-t--global--color--severity--none--100", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", - "type": "color", - "item": "severity", - "subitem": "none", - "state": "100" + "type": "icon", + "item": "color", + "subitem": "regular" }, "path": [ "global", + "icon", "color", - "severity", - "none", - "100" + "regular" ], "references": [ { "type": "color", - "value": "#4394e5", - "filePath": "tokens/default/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#4394e5" + "value": "{color.gray.90}" }, - "name": "pf-t--color--blue--40", + "name": "pf-t--global--icon--color--100", "attributes": { - "category": "color", - "type": "blue", - "item": "40" + "category": "global", + "type": "icon", + "item": "color", + "subitem": "100" }, "path": [ + "global", + "icon", "color", - "blue", - "40" + "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" + ] + } ] } ] @@ -5187,79 +6668,104 @@ ] } }, - "pf-t--global--icon--color--severity--minor--default": { + "pf-t--global--icon--color--nonstatus--on-red--clicked": { "default": { - "description": "Use as the default color for severity icons that identify issues of minor severity.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus red background color and/or are paired with on-red colored text.", "type": "color", - "value": "#707070", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for severity icons that identify issues of minor severity.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus red background color and/or are paired with on-red colored text.", "type": "color", - "value": "{global.color.severity.minor.100}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--severity--minor--default", + "name": "pf-t--global--icon--color--nonstatus--on-red--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "severity", - "state": "minor" + "subitem": "nonstatus", + "state": "on-red" }, "path": [ "global", "icon", "color", - "severity", - "minor", - "default" + "nonstatus", + "on-red", + "clicked" ], "references": [ { + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#707070", - "filePath": "tokens/default/base.json", + "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": "{color.gray.50}" + "value": "{global.icon.color.100}" }, - "name": "pf-t--global--color--severity--minor--100", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", - "type": "color", - "item": "severity", - "subitem": "minor", - "state": "100" + "type": "icon", + "item": "color", + "subitem": "regular" }, "path": [ "global", + "icon", "color", - "severity", - "minor", - "100" + "regular" ], "references": [ { "type": "color", - "value": "#707070", - "filePath": "tokens/default/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#707070" + "value": "{color.gray.90}" }, - "name": "pf-t--color--gray--50", + "name": "pf-t--global--icon--color--100", "attributes": { - "category": "color", - "type": "gray", - "item": "50" + "category": "global", + "type": "icon", + "item": "color", + "subitem": "100" }, "path": [ - "color", - "gray", - "50" + "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" + ] + } ] } ] @@ -5267,79 +6773,104 @@ ] } }, - "pf-t--global--icon--color--severity--moderate--default": { + "pf-t--global--icon--color--nonstatus--on-orangered--default": { "default": { - "description": "Use as the default color for severity icons that identify issues of moderate severity.", + "description": "Use as the default color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", "type": "color", - "value": "#dca614", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for severity icons that identify issues of moderate severity.", + "description": "Use as the default color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", "type": "color", - "value": "{global.color.severity.moderate.100}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--severity--moderate--default", + "name": "pf-t--global--icon--color--nonstatus--on-orangered--default", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "severity", - "state": "moderate" + "subitem": "nonstatus", + "state": "on-orangered" }, "path": [ "global", "icon", "color", - "severity", - "moderate", + "nonstatus", + "on-orangered", "default" ], "references": [ { + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#dca614", - "filePath": "tokens/default/base.json", + "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": "{color.yellow.40}" + "value": "{global.icon.color.100}" }, - "name": "pf-t--global--color--severity--moderate--100", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", - "type": "color", - "item": "severity", - "subitem": "moderate", - "state": "100" + "type": "icon", + "item": "color", + "subitem": "regular" }, "path": [ "global", + "icon", "color", - "severity", - "moderate", - "100" + "regular" ], "references": [ { "type": "color", - "value": "#dca614", - "filePath": "tokens/default/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#dca614" + "value": "{color.gray.90}" }, - "name": "pf-t--color--yellow--40", + "name": "pf-t--global--icon--color--100", "attributes": { - "category": "color", - "type": "yellow", - "item": "40" + "category": "global", + "type": "icon", + "item": "color", + "subitem": "100" }, "path": [ + "global", + "icon", "color", - "yellow", - "40" + "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" + ] + } ] } ] @@ -5347,79 +6878,104 @@ ] } }, - "pf-t--global--icon--color--severity--important--default": { + "pf-t--global--icon--color--nonstatus--on-orangered--hover": { "default": { - "description": "Use as the default color for severity icons that identify issues of important severity.", + "description": "Use as the hover state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", "type": "color", - "value": "#ca6c0f", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for severity icons that identify issues of important severity.", + "description": "Use as the hover state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", "type": "color", - "value": "{global.color.severity.important.100}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--severity--important--default", + "name": "pf-t--global--icon--color--nonstatus--on-orangered--hover", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "severity", - "state": "important" + "subitem": "nonstatus", + "state": "on-orangered" }, "path": [ "global", "icon", "color", - "severity", - "important", - "default" + "nonstatus", + "on-orangered", + "hover" ], "references": [ { + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#ca6c0f", - "filePath": "tokens/default/base.json", + "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": "{color.orange.50}" + "value": "{global.icon.color.100}" }, - "name": "pf-t--global--color--severity--important--100", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", - "type": "color", - "item": "severity", - "subitem": "important", - "state": "100" + "type": "icon", + "item": "color", + "subitem": "regular" }, "path": [ "global", + "icon", "color", - "severity", - "important", - "100" + "regular" ], "references": [ { "type": "color", - "value": "#ca6c0f", - "filePath": "tokens/default/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#ca6c0f" + "value": "{color.gray.90}" }, - "name": "pf-t--color--orange--50", + "name": "pf-t--global--icon--color--100", "attributes": { - "category": "color", - "type": "orange", - "item": "50" + "category": "global", + "type": "icon", + "item": "color", + "subitem": "100" }, "path": [ + "global", + "icon", "color", - "orange", - "50" + "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" + ] + } ] } ] @@ -5427,79 +6983,104 @@ ] } }, - "pf-t--global--icon--color--severity--critical--default": { + "pf-t--global--icon--color--nonstatus--on-orangered--clicked": { "default": { - "description": "Use as the default color for severity icons that identify issues of critical severity.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", "type": "color", - "value": "#b1380b", + "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for severity icons that identify issues of critical severity.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", "type": "color", - "value": "{global.color.severity.critical.100}" + "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--severity--critical--default", + "name": "pf-t--global--icon--color--nonstatus--on-orangered--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", - "subitem": "severity", - "state": "critical" + "subitem": "nonstatus", + "state": "on-orangered" }, "path": [ "global", "icon", "color", - "severity", - "critical", - "default" + "nonstatus", + "on-orangered", + "clicked" ], "references": [ { + "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", "type": "color", - "value": "#b1380b", - "filePath": "tokens/default/base.json", + "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": "{color.red-orange.60}" + "value": "{global.icon.color.100}" }, - "name": "pf-t--global--color--severity--critical--100", + "name": "pf-t--global--icon--color--regular", "attributes": { "category": "global", - "type": "color", - "item": "severity", - "subitem": "critical", - "state": "100" + "type": "icon", + "item": "color", + "subitem": "regular" }, "path": [ "global", + "icon", "color", - "severity", - "critical", - "100" + "regular" ], "references": [ { "type": "color", - "value": "#b1380b", - "filePath": "tokens/default/palette.color.json", + "value": "#1f1f1f", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#b1380b" + "value": "{color.gray.90}" }, - "name": "pf-t--color--red-orange--60", + "name": "pf-t--global--icon--color--100", "attributes": { - "category": "color", - "type": "red-orange", - "item": "60" + "category": "global", + "type": "icon", + "item": "color", + "subitem": "100" }, "path": [ + "global", + "icon", "color", - "red-orange", - "60" + "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" + ] + } ] } ] @@ -5507,32 +7088,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-red--default": { + "pf-t--global--icon--color--nonstatus--on-orange--default": { "default": { - "description": "Use as the default color for icons that are placed on a non status red background color and/or are paired with on-red colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a non status red background color and/or are paired with on-red colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-red--default", + "name": "pf-t--global--icon--color--nonstatus--on-orange--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-red" + "state": "on-orange" }, "path": [ "global", "icon", "color", "nonstatus", - "on-red", + "on-orange", "default" ], "references": [ @@ -5612,32 +7193,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-red--hover": { + "pf-t--global--icon--color--nonstatus--on-orange--hover": { "default": { - "description": "Use as the hover state color for icons that are placed on a non status red background color and/or are paired with on-red colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange 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 non status red background color and/or are paired with on-red colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-red--hover", + "name": "pf-t--global--icon--color--nonstatus--on-orange--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-red" + "state": "on-orange" }, "path": [ "global", "icon", "color", "nonstatus", - "on-red", + "on-orange", "hover" ], "references": [ @@ -5717,32 +7298,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-red--clicked": { + "pf-t--global--icon--color--nonstatus--on-orange--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus red background color and/or are paired with on-red colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus red background color and/or are paired with on-red colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-red--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-orange--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-red" + "state": "on-orange" }, "path": [ "global", "icon", "color", "nonstatus", - "on-red", + "on-orange", "clicked" ], "references": [ @@ -5822,32 +7403,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-orangered--default": { + "pf-t--global--icon--color--nonstatus--on-yellow--default": { "default": { - "description": "Use as the default color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-orangered--default", + "name": "pf-t--global--icon--color--nonstatus--on-yellow--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-orangered" + "state": "on-yellow" }, "path": [ "global", "icon", "color", "nonstatus", - "on-orangered", + "on-yellow", "default" ], "references": [ @@ -5927,32 +7508,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-orangered--hover": { + "pf-t--global--icon--color--nonstatus--on-yellow--hover": { "default": { - "description": "Use as the hover state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow 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 nonstatus orangered background color and/or are paired with on-orangered colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-orangered--hover", + "name": "pf-t--global--icon--color--nonstatus--on-yellow--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-orangered" + "state": "on-yellow" }, "path": [ "global", "icon", "color", "nonstatus", - "on-orangered", + "on-yellow", "hover" ], "references": [ @@ -6032,32 +7613,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-orangered--clicked": { + "pf-t--global--icon--color--nonstatus--on-yellow--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-orangered--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-yellow--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-orangered" + "state": "on-yellow" }, "path": [ "global", "icon", "color", "nonstatus", - "on-orangered", + "on-yellow", "clicked" ], "references": [ @@ -6137,32 +7718,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-orange--default": { + "pf-t--global--icon--color--nonstatus--on-green--default": { "default": { - "description": "Use as the default color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-orange--default", + "name": "pf-t--global--icon--color--nonstatus--on-green--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-orange" + "state": "on-green" }, "path": [ "global", "icon", "color", "nonstatus", - "on-orange", + "on-green", "default" ], "references": [ @@ -6242,32 +7823,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-orange--hover": { + "pf-t--global--icon--color--nonstatus--on-green--hover": { "default": { - "description": "Use as the hover state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus green background color and/or are paired with on-green 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 nonstatus orange background color and/or are paired with on-orange colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-orange--hover", + "name": "pf-t--global--icon--color--nonstatus--on-green--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-orange" + "state": "on-green" }, "path": [ "global", "icon", "color", "nonstatus", - "on-orange", + "on-green", "hover" ], "references": [ @@ -6347,32 +7928,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-orange--clicked": { + "pf-t--global--icon--color--nonstatus--on-green--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-orange--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-green--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-orange" + "state": "on-green" }, "path": [ "global", "icon", "color", "nonstatus", - "on-orange", + "on-green", "clicked" ], "references": [ @@ -6452,32 +8033,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-yellow--default": { + "pf-t--global--icon--color--nonstatus--on-teal--default": { "default": { - "description": "Use as the default color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-yellow--default", + "name": "pf-t--global--icon--color--nonstatus--on-teal--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-yellow" + "state": "on-teal" }, "path": [ "global", "icon", "color", "nonstatus", - "on-yellow", + "on-teal", "default" ], "references": [ @@ -6557,32 +8138,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-yellow--hover": { + "pf-t--global--icon--color--nonstatus--on-teal--hover": { "default": { - "description": "Use as the hover state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal 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 nonstatus yellow background color and/or are paired with on-yellow colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-yellow--hover", + "name": "pf-t--global--icon--color--nonstatus--on-teal--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-yellow" + "state": "on-teal" }, "path": [ "global", "icon", "color", "nonstatus", - "on-yellow", + "on-teal", "hover" ], "references": [ @@ -6662,32 +8243,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-yellow--clicked": { + "pf-t--global--icon--color--nonstatus--on-teal--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-yellow--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-teal--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-yellow" + "state": "on-teal" }, "path": [ "global", "icon", "color", "nonstatus", - "on-yellow", + "on-teal", "clicked" ], "references": [ @@ -6767,32 +8348,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-green--default": { + "pf-t--global--icon--color--nonstatus--on-blue--default": { "default": { - "description": "Use as the default color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-green--default", + "name": "pf-t--global--icon--color--nonstatus--on-blue--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-green" + "state": "on-blue" }, "path": [ "global", "icon", "color", "nonstatus", - "on-green", + "on-blue", "default" ], "references": [ @@ -6872,32 +8453,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-green--hover": { + "pf-t--global--icon--color--nonstatus--on-blue--hover": { "default": { - "description": "Use as the hover state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue 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 nonstatus green background color and/or are paired with on-green colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-green--hover", + "name": "pf-t--global--icon--color--nonstatus--on-blue--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-green" + "state": "on-blue" }, "path": [ "global", "icon", "color", "nonstatus", - "on-green", + "on-blue", "hover" ], "references": [ @@ -6977,32 +8558,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-green--clicked": { + "pf-t--global--icon--color--nonstatus--on-blue--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-green--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-blue--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-green" + "state": "on-blue" }, "path": [ "global", "icon", "color", "nonstatus", - "on-green", + "on-blue", "clicked" ], "references": [ @@ -7082,32 +8663,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-teal--default": { + "pf-t--global--icon--color--nonstatus--on-purple--default": { "default": { - "description": "Use as the default color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-teal--default", + "name": "pf-t--global--icon--color--nonstatus--on-purple--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-teal" + "state": "on-purple" }, "path": [ "global", "icon", "color", "nonstatus", - "on-teal", + "on-purple", "default" ], "references": [ @@ -7187,32 +8768,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-teal--hover": { + "pf-t--global--icon--color--nonstatus--on-purple--hover": { "default": { - "description": "Use as the hover state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple 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 nonstatus teal background color and/or are paired with on-teal colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-teal--hover", + "name": "pf-t--global--icon--color--nonstatus--on-purple--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-teal" + "state": "on-purple" }, "path": [ "global", "icon", "color", "nonstatus", - "on-teal", + "on-purple", "hover" ], "references": [ @@ -7292,32 +8873,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-teal--clicked": { + "pf-t--global--icon--color--nonstatus--on-purple--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-teal--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-purple--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-teal" + "state": "on-purple" }, "path": [ "global", "icon", "color", "nonstatus", - "on-teal", + "on-purple", "clicked" ], "references": [ @@ -7397,32 +8978,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-blue--default": { + "pf-t--global--icon--color--nonstatus--on-gray--default": { "default": { - "description": "Use as the default color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", + "description": "Use as the default color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-blue--default", + "name": "pf-t--global--icon--color--nonstatus--on-gray--default", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-blue" + "state": "on-gray" }, "path": [ "global", "icon", "color", "nonstatus", - "on-blue", + "on-gray", "default" ], "references": [ @@ -7502,32 +9083,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-blue--hover": { + "pf-t--global--icon--color--nonstatus--on-gray--hover": { "default": { - "description": "Use as the hover state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray 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 nonstatus blue background color and/or are paired with on-blue colored text.", + "description": "Use as the hover state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-blue--hover", + "name": "pf-t--global--icon--color--nonstatus--on-gray--hover", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-blue" + "state": "on-gray" }, "path": [ "global", "icon", "color", "nonstatus", - "on-blue", + "on-gray", "hover" ], "references": [ @@ -7607,32 +9188,32 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-blue--clicked": { + "pf-t--global--icon--color--nonstatus--on-gray--clicked": { "default": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", "type": "color", "value": "#1f1f1f", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.", + "description": "Use as the clicked state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", "type": "color", "value": "{global.icon.color.regular}" }, - "name": "pf-t--global--icon--color--nonstatus--on-blue--clicked", + "name": "pf-t--global--icon--color--nonstatus--on-gray--clicked", "attributes": { "category": "global", "type": "icon", "item": "color", "subitem": "nonstatus", - "state": "on-blue" + "state": "on-gray" }, "path": [ "global", "icon", "color", "nonstatus", - "on-blue", + "on-gray", "clicked" ], "references": [ @@ -7712,104 +9293,74 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-purple--default": { + "pf-t--global--border--color--control--read-only": { "default": { - "description": "Use as the default color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", "type": "color", - "value": "#1f1f1f", + "value": "#e0e0e0", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.border.color.50}" }, - "name": "pf-t--global--icon--color--nonstatus--on-purple--default", + "name": "pf-t--global--border--color--control--read-only", "attributes": { "category": "global", - "type": "icon", + "type": "border", "item": "color", - "subitem": "nonstatus", - "state": "on-purple" + "subitem": "control", + "state": "read-only" }, "path": [ "global", - "icon", + "border", "color", - "nonstatus", - "on-purple", - "default" + "control", + "read-only" ], "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", + "value": "#e0e0e0", + "filePath": "tokens/default/base.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}" + "value": "{color.gray.20}" }, - "name": "pf-t--global--icon--color--regular", + "name": "pf-t--global--border--color--50", "attributes": { "category": "global", - "type": "icon", + "type": "border", "item": "color", - "subitem": "regular" + "subitem": "50" }, "path": [ "global", - "icon", + "border", "color", - "regular" + "50" ], "references": [ { "type": "color", - "value": "#1f1f1f", - "filePath": "tokens/default/base.json", + "value": "#e0e0e0", + "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "#e0e0e0" }, - "name": "pf-t--global--icon--color--100", + "name": "pf-t--color--gray--20", "attributes": { - "category": "global", - "type": "icon", - "item": "color", - "subitem": "100" + "category": "color", + "type": "gray", + "item": "20" }, "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" - ] - } + "gray", + "20" ] } ] @@ -7817,102 +9368,101 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-purple--hover": { + "pf-t--global--border--color--brand--default": { "default": { - "description": "Use as the hover state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "#1f1f1f", + "value": "#0066cc", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.brand.default}" }, - "name": "pf-t--global--icon--color--nonstatus--on-purple--hover", + "name": "pf-t--global--border--color--brand--default", "attributes": { "category": "global", - "type": "icon", + "type": "border", "item": "color", - "subitem": "nonstatus", - "state": "on-purple" + "subitem": "brand", + "state": "default" }, "path": [ "global", - "icon", + "border", "color", - "nonstatus", - "on-purple", - "hover" + "brand", + "default" ], "references": [ { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", + "description": "Use this color for elements that you want to reinforce your brand", "type": "color", - "value": "#1f1f1f", + "value": "#0066cc", "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 this color for elements that you want to reinforce your brand", "type": "color", - "value": "{global.icon.color.100}" + "value": "{global.color.brand.200}" }, - "name": "pf-t--global--icon--color--regular", + "name": "pf-t--global--color--brand--default", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "regular" + "type": "color", + "item": "brand", + "subitem": "default" }, "path": [ "global", - "icon", "color", - "regular" + "brand", + "default" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#0066cc", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.blue.50}" }, - "name": "pf-t--global--icon--color--100", + "name": "pf-t--global--color--brand--200", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "100" + "type": "color", + "item": "brand", + "subitem": "200" }, "path": [ "global", - "icon", "color", - "100" + "brand", + "200" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#0066cc", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#0066cc" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--blue--50", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "blue", + "item": "50" }, "path": [ "color", - "gray", - "90" + "blue", + "50" ] } ] @@ -7922,102 +9472,101 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-purple--clicked": { + "pf-t--global--border--color--brand--hover": { "default": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "#1f1f1f", + "value": "#004d99", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.", + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.brand.hover}" }, - "name": "pf-t--global--icon--color--nonstatus--on-purple--clicked", + "name": "pf-t--global--border--color--brand--hover", "attributes": { "category": "global", - "type": "icon", + "type": "border", "item": "color", - "subitem": "nonstatus", - "state": "on-purple" + "subitem": "brand", + "state": "hover" }, "path": [ "global", - "icon", + "border", "color", - "nonstatus", - "on-purple", - "clicked" + "brand", + "hover" ], "references": [ { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", + "description": "Use as the hover state for elements that have a branded background color", "type": "color", - "value": "#1f1f1f", + "value": "#004d99", "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 hover state for elements that have a branded background color", "type": "color", - "value": "{global.icon.color.100}" + "value": "{global.color.brand.300}" }, - "name": "pf-t--global--icon--color--regular", + "name": "pf-t--global--color--brand--hover", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "regular" + "type": "color", + "item": "brand", + "subitem": "hover" }, "path": [ "global", - "icon", "color", - "regular" + "brand", + "hover" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#004d99", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.blue.60}" }, - "name": "pf-t--global--icon--color--100", + "name": "pf-t--global--color--brand--300", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "100" + "type": "color", + "item": "brand", + "subitem": "300" }, "path": [ "global", - "icon", "color", - "100" + "brand", + "300" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#004d99", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#004d99" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--blue--60", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "blue", + "item": "60" }, "path": [ "color", - "gray", - "90" + "blue", + "60" ] } ] @@ -8027,102 +9576,101 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-gray--default": { + "pf-t--global--border--color--brand--clicked": { "default": { - "description": "Use as the default color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "#1f1f1f", + "value": "#004d99", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the default color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", + "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.brand.clicked}" }, - "name": "pf-t--global--icon--color--nonstatus--on-gray--default", + "name": "pf-t--global--border--color--brand--clicked", "attributes": { "category": "global", - "type": "icon", + "type": "border", "item": "color", - "subitem": "nonstatus", - "state": "on-gray" + "subitem": "brand", + "state": "clicked" }, "path": [ "global", - "icon", + "border", "color", - "nonstatus", - "on-gray", - "default" + "brand", + "clicked" ], "references": [ { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", + "description": "Use as the clicked state for elements that have a brand background color", "type": "color", - "value": "#1f1f1f", + "value": "#004d99", "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 clicked state for elements that have a brand background color", "type": "color", - "value": "{global.icon.color.100}" + "value": "{global.color.brand.300}" }, - "name": "pf-t--global--icon--color--regular", + "name": "pf-t--global--color--brand--clicked", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "regular" + "type": "color", + "item": "brand", + "subitem": "clicked" }, "path": [ "global", - "icon", "color", - "regular" + "brand", + "clicked" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#004d99", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.blue.60}" }, - "name": "pf-t--global--icon--color--100", + "name": "pf-t--global--color--brand--300", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "100" + "type": "color", + "item": "brand", + "subitem": "300" }, "path": [ "global", - "icon", "color", - "100" + "brand", + "300" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#004d99", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#004d99" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--blue--60", "attributes": { - "category": "color", - "type": "gray", - "item": "90" + "category": "color", + "type": "blue", + "item": "60" }, "path": [ "color", - "gray", - "90" + "blue", + "60" ] } ] @@ -8132,102 +9680,106 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-gray--hover": { + "pf-t--global--border--color--brand--accent--default": { "default": { - "description": "Use as the hover state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "#1f1f1f", + "value": "#ee0000", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the hover state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", + "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.brand.accent.default}" }, - "name": "pf-t--global--icon--color--nonstatus--on-gray--hover", + "name": "pf-t--global--border--color--brand--accent--default", "attributes": { "category": "global", - "type": "icon", + "type": "border", "item": "color", - "subitem": "nonstatus", - "state": "on-gray" + "subitem": "brand", + "state": "accent" }, "path": [ "global", - "icon", + "border", "color", - "nonstatus", - "on-gray", - "hover" + "brand", + "accent", + "default" ], "references": [ { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", + "description": "Use this color for elements that you want to reinforce your brand", "type": "color", - "value": "#1f1f1f", + "value": "#ee0000", "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 this color for elements that you want to reinforce your brand", "type": "color", - "value": "{global.icon.color.100}" + "value": "{global.color.brand.accent.100}" }, - "name": "pf-t--global--icon--color--regular", + "name": "pf-t--global--color--brand--accent--default", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "regular" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "default" }, "path": [ "global", - "icon", "color", - "regular" + "brand", + "accent", + "default" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#ee0000", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.red.50}" }, - "name": "pf-t--global--icon--color--100", + "name": "pf-t--global--color--brand--accent--100", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "100" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "100" }, "path": [ "global", - "icon", "color", + "brand", + "accent", "100" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#ee0000", "filePath": "tokens/default/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" ] } ] @@ -8237,102 +9789,106 @@ ] } }, - "pf-t--global--icon--color--nonstatus--on-gray--clicked": { + "pf-t--global--border--color--brand--accent--hover": { "default": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "#1f1f1f", + "value": "#a60000", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.", + "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.", "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.brand.accent.hover}" }, - "name": "pf-t--global--icon--color--nonstatus--on-gray--clicked", + "name": "pf-t--global--border--color--brand--accent--hover", "attributes": { "category": "global", - "type": "icon", + "type": "border", "item": "color", - "subitem": "nonstatus", - "state": "on-gray" + "subitem": "brand", + "state": "accent" }, "path": [ "global", - "icon", + "border", "color", - "nonstatus", - "on-gray", - "clicked" + "brand", + "accent", + "hover" ], "references": [ { - "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text", + "description": "Use as the hover state for elements that have a branded background color", "type": "color", - "value": "#1f1f1f", + "value": "#a60000", "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 hover state for elements that have a branded background color", "type": "color", - "value": "{global.icon.color.100}" + "value": "{global.color.brand.accent.200}" }, - "name": "pf-t--global--icon--color--regular", + "name": "pf-t--global--color--brand--accent--hover", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "regular" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "hover" }, "path": [ "global", - "icon", "color", - "regular" + "brand", + "accent", + "hover" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#a60000", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.gray.90}" + "value": "{color.red.60}" }, - "name": "pf-t--global--icon--color--100", + "name": "pf-t--global--color--brand--accent--200", "attributes": { "category": "global", - "type": "icon", - "item": "color", - "subitem": "100" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "200" }, "path": [ "global", - "icon", "color", - "100" + "brand", + "accent", + "200" ], "references": [ { "type": "color", - "value": "#1f1f1f", + "value": "#a60000", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#1f1f1f" + "value": "#a60000" }, - "name": "pf-t--color--gray--90", + "name": "pf-t--color--red--60", "attributes": { "category": "color", - "type": "gray", - "item": "90" + "type": "red", + "item": "60" }, "path": [ "color", - "gray", - "90" + "red", + "60" ] } ] @@ -8342,74 +9898,108 @@ ] } }, - "pf-t--global--border--color--control--read-only": { + "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": "#e0e0e0", + "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.border.color.50}" + "value": "{global.color.brand.accent.clicked}" }, - "name": "pf-t--global--border--color--control--read-only", + "name": "pf-t--global--border--color--brand--accent--clicked", "attributes": { "category": "global", "type": "border", "item": "color", - "subitem": "control", - "state": "read-only" + "subitem": "brand", + "state": "accent" }, "path": [ "global", "border", "color", - "control", - "read-only" + "brand", + "accent", + "clicked" ], "references": [ { + "description": "Use as the clicked state for elements that have a brand background color", "type": "color", - "value": "#e0e0e0", - "filePath": "tokens/default/base.json", + "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": "{color.gray.20}" + "value": "{global.color.brand.accent.200}" }, - "name": "pf-t--global--border--color--50", + "name": "pf-t--global--color--brand--accent--clicked", "attributes": { "category": "global", - "type": "border", - "item": "color", - "subitem": "50" + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "clicked" }, "path": [ "global", - "border", "color", - "50" + "brand", + "accent", + "clicked" ], "references": [ { "type": "color", - "value": "#e0e0e0", - "filePath": "tokens/default/palette.color.json", + "value": "#a60000", + "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "#e0e0e0" + "value": "{color.red.60}" }, - "name": "pf-t--color--gray--20", + "name": "pf-t--global--color--brand--accent--200", "attributes": { - "category": "color", - "type": "gray", - "item": "20" + "category": "global", + "type": "color", + "item": "brand", + "subitem": "accent", + "state": "200" }, "path": [ + "global", "color", - "gray", - "20" + "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" + ] + } ] } ] @@ -8417,128 +10007,79 @@ ] } }, - "pf-t--global--border--color--high-contrast": { - "default": { - "type": "color", - "value": "rgba(255, 255, 255, 0.0000)", - "filePath": "tokens/default/semantic.json", - "isSource": true, - "original": { - "type": "color", - "value": "rgba(255, 255, 255, 0.0000)" - }, - "name": "pf-t--global--border--color--high-contrast", - "attributes": { - "category": "global", - "type": "border", - "item": "color", - "subitem": "high-contrast" - }, - "path": [ - "global", - "border", - "color", - "high-contrast" - ] - } - }, - "pf-t--global--border--color--brand--default": { + "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": "#0066cc", + "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.default}" + "value": "{global.color.brand.subtle.200}" }, - "name": "pf-t--global--border--color--brand--default", + "name": "pf-t--global--border--color--brand--subtle--default", "attributes": { "category": "global", "type": "border", "item": "color", "subitem": "brand", - "state": "default" + "state": "subtle" }, "path": [ "global", "border", "color", "brand", + "subtle", "default" ], "references": [ { - "description": "Use this color for elements that you want to reinforce your brand", "type": "color", - "value": "#0066cc", - "filePath": "tokens/default/semantic.json", + "value": "#b9dafc", + "filePath": "tokens/default/base.json", "isSource": true, "original": { - "description": "Use this color for elements that you want to reinforce your brand", "type": "color", - "value": "{global.color.brand.200}" + "value": "{color.blue.20}" }, - "name": "pf-t--global--color--brand--default", + "name": "pf-t--global--color--brand--subtle--200", "attributes": { "category": "global", "type": "color", "item": "brand", - "subitem": "default" + "subitem": "subtle", + "state": "200" }, "path": [ "global", "color", "brand", - "default" + "subtle", + "200" ], "references": [ { "type": "color", - "value": "#0066cc", - "filePath": "tokens/default/base.json", + "value": "#b9dafc", + "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "{color.blue.50}" + "value": "#b9dafc" }, - "name": "pf-t--global--color--brand--200", + "name": "pf-t--color--blue--20", "attributes": { - "category": "global", - "type": "color", - "item": "brand", - "subitem": "200" + "category": "color", + "type": "blue", + "item": "20" }, "path": [ - "global", "color", - "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" - ] - } + "blue", + "20" ] } ] @@ -8546,103 +10087,79 @@ ] } }, - "pf-t--global--border--color--brand--hover": { + "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": "#004d99", + "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.hover}" + "value": "{global.color.brand.subtle.300}" }, - "name": "pf-t--global--border--color--brand--hover", + "name": "pf-t--global--border--color--brand--subtle--hover", "attributes": { "category": "global", "type": "border", "item": "color", "subitem": "brand", - "state": "hover" + "state": "subtle" }, "path": [ "global", "border", "color", "brand", + "subtle", "hover" ], "references": [ { - "description": "Use as the hover state for elements that have a branded background color", "type": "color", - "value": "#004d99", - "filePath": "tokens/default/semantic.json", + "value": "#4394e5", + "filePath": "tokens/default/base.json", "isSource": true, "original": { - "description": "Use as the hover state for elements that have a branded background color", "type": "color", - "value": "{global.color.brand.300}" + "value": "{color.blue.40}" }, - "name": "pf-t--global--color--brand--hover", + "name": "pf-t--global--color--brand--subtle--300", "attributes": { "category": "global", "type": "color", "item": "brand", - "subitem": "hover" + "subitem": "subtle", + "state": "300" }, "path": [ "global", "color", "brand", - "hover" + "subtle", + "300" ], "references": [ { "type": "color", - "value": "#004d99", - "filePath": "tokens/default/base.json", + "value": "#4394e5", + "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "{color.blue.60}" + "value": "#4394e5" }, - "name": "pf-t--global--color--brand--300", + "name": "pf-t--color--blue--40", "attributes": { - "category": "global", - "type": "color", - "item": "brand", - "subitem": "300" + "category": "color", + "type": "blue", + "item": "40" }, "path": [ - "global", "color", - "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" - ] - } + "blue", + "40" ] } ] @@ -8650,103 +10167,79 @@ ] } }, - "pf-t--global--border--color--brand--clicked": { + "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": "#004d99", + "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.clicked}" + "value": "{global.color.brand.subtle.300}" }, - "name": "pf-t--global--border--color--brand--clicked", + "name": "pf-t--global--border--color--brand--subtle--clicked", "attributes": { "category": "global", "type": "border", "item": "color", "subitem": "brand", - "state": "clicked" + "state": "subtle" }, "path": [ "global", "border", "color", "brand", + "subtle", "clicked" ], "references": [ { - "description": "Use as the clicked state for elements that have a brand background color", "type": "color", - "value": "#004d99", - "filePath": "tokens/default/semantic.json", + "value": "#4394e5", + "filePath": "tokens/default/base.json", "isSource": true, "original": { - "description": "Use as the clicked state for elements that have a brand background color", "type": "color", - "value": "{global.color.brand.300}" + "value": "{color.blue.40}" }, - "name": "pf-t--global--color--brand--clicked", + "name": "pf-t--global--color--brand--subtle--300", "attributes": { "category": "global", "type": "color", "item": "brand", - "subitem": "clicked" + "subitem": "subtle", + "state": "300" }, "path": [ "global", "color", "brand", - "clicked" + "subtle", + "300" ], "references": [ { "type": "color", - "value": "#004d99", - "filePath": "tokens/default/base.json", + "value": "#4394e5", + "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "{color.blue.60}" + "value": "#4394e5" }, - "name": "pf-t--global--color--brand--300", + "name": "pf-t--color--blue--40", "attributes": { - "category": "global", - "type": "color", - "item": "brand", - "subitem": "300" + "category": "color", + "type": "blue", + "item": "40" }, "path": [ - "global", "color", - "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" - ] - } + "blue", + "40" ] } ] @@ -10193,112 +11686,139 @@ ] } }, - "pf-t--global--border--color--status--custom--clicked": { + "pf-t--global--border--color--status--custom--clicked": { + "default": { + "description": "Use as the clicked state color for borders that convey a custom status, like in alerts, notifications or status labels.", + "type": "color", + "value": "#004d4d", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the clicked state color for borders that convey a custom status, like in alerts, notifications or status labels.", + "type": "color", + "value": "{global.color.status.custom.clicked}" + }, + "name": "pf-t--global--border--color--status--custom--clicked", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "status", + "state": "custom" + }, + "path": [ + "global", + "border", + "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--border--color--high-contrast": { "default": { - "description": "Use as the clicked state color for borders that convey a custom status, like in alerts, notifications or status labels.", + "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.", "type": "color", - "value": "#004d4d", + "value": "rgba(255, 255, 255, 0.0000)", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "Use as the clicked state color for borders that convey a custom status, like in alerts, notifications or status labels.", + "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.", "type": "color", - "value": "{global.color.status.custom.clicked}" + "value": "rgba(255, 255, 255, 0.0000)" }, - "name": "pf-t--global--border--color--status--custom--clicked", + "name": "pf-t--global--border--color--high-contrast", "attributes": { "category": "global", "type": "border", "item": "color", - "subitem": "status", - "state": "custom" + "subitem": "high-contrast" }, "path": [ "global", "border", "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" - ] - } - ] - } - ] - } + "high-contrast" ] } }, @@ -10779,108 +12299,6 @@ ] } }, - "pf-t--global--border--color--main--default": { - "default": { - "type": "color", - "value": "#ffffff", - "filePath": "tokens/default/semantic.json", - "isSource": true, - "original": { - "type": "color", - "value": "{global.background.color.primary.default}" - }, - "name": "pf-t--global--border--color--main--default", - "attributes": { - "category": "global", - "type": "border", - "item": "color", - "subitem": "main", - "state": "default" - }, - "path": [ - "global", - "border", - "color", - "main", - "default" - ], - "references": [ - { - "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.", - "type": "color", - "value": "#ffffff", - "filePath": "tokens/default/semantic.json", - "isSource": true, - "original": { - "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.", - "type": "color", - "value": "{global.background.color.100}" - }, - "name": "pf-t--global--background--color--primary--default", - "attributes": { - "category": "global", - "type": "background", - "item": "color", - "subitem": "primary", - "state": "default" - }, - "path": [ - "global", - "background", - "color", - "primary", - "default" - ], - "references": [ - { - "type": "color", - "value": "#ffffff", - "filePath": "tokens/default/base.json", - "isSource": true, - "original": { - "type": "color", - "value": "{color.white}" - }, - "name": "pf-t--global--background--color--100", - "attributes": { - "category": "global", - "type": "background", - "item": "color", - "subitem": "100" - }, - "path": [ - "global", - "background", - "color", - "100" - ], - "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--border--color--nonstatus--red--default": { "default": { "description": "Use as the default border color for any element that does not convey status and that you always will want to be red (i.e. color-coded labels, banners, etc.)", @@ -13041,6 +14459,108 @@ ] } }, + "pf-t--global--border--color--main--default": { + "default": { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "type": "color", + "value": "{global.background.color.primary.default}" + }, + "name": "pf-t--global--border--color--main--default", + "attributes": { + "category": "global", + "type": "border", + "item": "color", + "subitem": "main", + "state": "default" + }, + "path": [ + "global", + "border", + "color", + "main", + "default" + ], + "references": [ + { + "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.", + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.", + "type": "color", + "value": "{global.background.color.100}" + }, + "name": "pf-t--global--background--color--primary--default", + "attributes": { + "category": "global", + "type": "background", + "item": "color", + "subitem": "primary", + "state": "default" + }, + "path": [ + "global", + "background", + "color", + "primary", + "default" + ], + "references": [ + { + "type": "color", + "value": "#ffffff", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.white}" + }, + "name": "pf-t--global--background--color--100", + "attributes": { + "category": "global", + "type": "background", + "item": "color", + "subitem": "100" + }, + "path": [ + "global", + "background", + "color", + "100" + ], + "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--box-shadow--color--sm--default": { "default": { "description": "Use as the color of small box-shadows.", @@ -15101,6 +16621,586 @@ ] } }, + "pf-t--global--background--color--loading--skeleton--default": { + "default": { + "type": "color", + "value": "rgba(199, 199, 199, 0.2500)", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "type": "color", + "value": "{global.background.color.600}" + }, + "name": "pf-t--global--background--color--loading--skeleton--default", + "attributes": { + "category": "global", + "type": "background", + "item": "color", + "subitem": "loading", + "state": "skeleton" + }, + "path": [ + "global", + "background", + "color", + "loading", + "skeleton", + "default" + ], + "references": [ + { + "type": "color", + "value": "rgba(199, 199, 199, 0.2500)", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "rgba(199, 199, 199, 0.2500)" + }, + "name": "pf-t--global--background--color--600", + "attributes": { + "category": "global", + "type": "background", + "item": "color", + "subitem": "600" + }, + "path": [ + "global", + "background", + "color", + "600" + ] + } + ] + } + }, + "pf-t--global--background--color--loading--skeleton--subtle": { + "default": { + "type": "color", + "value": "rgba(199, 199, 199, 0.1000)", + "filePath": "tokens/default/semantic.json", + "isSource": true, + "original": { + "type": "color", + "value": "{global.background.color.700}" + }, + "name": "pf-t--global--background--color--loading--skeleton--subtle", + "attributes": { + "category": "global", + "type": "background", + "item": "color", + "subitem": "loading", + "state": "skeleton" + }, + "path": [ + "global", + "background", + "color", + "loading", + "skeleton", + "subtle" + ], + "references": [ + { + "type": "color", + "value": "rgba(199, 199, 199, 0.1000)", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "rgba(199, 199, 199, 0.1000)" + }, + "name": "pf-t--global--background--color--700", + "attributes": { + "category": "global", + "type": "background", + "item": "color", + "subitem": "700" + }, + "path": [ + "global", + "background", + "color", + "700" + ] + } + ] + } + }, + "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 +21410,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 +21926,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 +22005,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 +22084,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 +22188,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 +22292,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 +22396,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 +22471,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 +22546,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 +22619,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 +22721,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 +22823,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 +22925,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 +23028,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 +23131,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 +23234,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 +23339,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 +23444,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" ] } ] @@ -27775,13 +30499,13 @@ }, "pf-t--global--focus-ring--color--default": { "default": { - "description": "This token is used to define the color value for custom focus rings.", + "description": "Use as color value for custom focus rings", "type": "color", "value": "#0066cc", "filePath": "tokens/default/semantic.json", "isSource": true, "original": { - "description": "This token is used to define the color value for custom focus rings.", + "description": "Use as color value for custom focus rings", "type": "color", "value": "{global.focus-ring.color.100}" }, @@ -30086,11 +32810,13 @@ }, "pf-t--global--spacer--inset--page-chrome": { "default": { + "description": "Use to define inner padding for structural elements in order to maintain alignment, like in the masthead, navigation menu, or main page content.", "type": "number", "value": "1.5rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { + "description": "Use to define inner padding for structural elements in order to maintain alignment, like in the masthead, navigation menu, or main page content.", "type": "number", "value": "{global.spacer.lg}" }, @@ -30159,11 +32885,13 @@ }, "pf-t--global--spacer--gutter--default": { "default": { + "description": "Use to define gutters between elements in certain layouts, like grids.", "type": "number", "value": "1rem", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { + "description": "Use to define gutters between elements in certain layouts, like grids.", "type": "number", "value": "{global.spacer.md}" }, @@ -32503,139 +35231,6 @@ ] } }, - "pf-t--global--border--width--main--default": { - "default": { - "type": "number", - "value": "4px", - "filePath": "tokens/default/semantic.dimension.json", - "isSource": true, - "original": { - "type": "number", - "value": "{global.border.width.400}" - }, - "name": "pf-t--global--border--width--main--default", - "attributes": { - "category": "global", - "type": "border", - "item": "width", - "subitem": "main", - "state": "default" - }, - "path": [ - "global", - "border", - "width", - "main", - "default" - ], - "references": [ - { - "type": "number", - "value": "4px", - "filePath": "tokens/default/base.dimension.json", - "isSource": true, - "original": { - "type": "number", - "value": 4 - }, - "name": "pf-t--global--border--width--400", - "attributes": { - "category": "global", - "type": "border", - "item": "width", - "subitem": "400" - }, - "path": [ - "global", - "border", - "width", - "400" - ] - } - ] - } - }, - "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,163 +35503,188 @@ ] } }, - "pf-t--global--border--width--action--default": { + "pf-t--global--border--width--high-contrast--regular": { "default": { - "description": "Use as the default border width for actions like secondary and tertiary buttons", "type": "number", - "value": "1px", + "value": "0px", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the default border width for actions like secondary and tertiary buttons", "type": "number", - "value": "{global.border.width.100}" + "value": 0 }, - "name": "pf-t--global--border--width--action--default", + "name": "pf-t--global--border--width--high-contrast--regular", "attributes": { "category": "global", "type": "border", "item": "width", - "subitem": "action", - "state": "default" + "subitem": "high-contrast", + "state": "regular" }, "path": [ "global", "border", "width", - "action", - "default" - ], - "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" - ] - } + "high-contrast", + "regular" ] } }, - "pf-t--global--border--width--action--hover": { + "pf-t--global--border--width--high-contrast--strong": { "default": { - "description": "Use as the hover state border width for actions like secondary and tertiary buttons", "type": "number", - "value": "2px", + "value": "0px", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the hover state border width for actions like secondary and tertiary buttons", "type": "number", - "value": "{global.border.width.200}" + "value": 0 }, - "name": "pf-t--global--border--width--action--hover", + "name": "pf-t--global--border--width--high-contrast--strong", "attributes": { "category": "global", "type": "border", "item": "width", - "subitem": "action", - "state": "hover" + "subitem": "high-contrast", + "state": "strong" }, "path": [ "global", "border", "width", - "action", - "hover" + "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--main--default": { + "default": { + "type": "number", + "value": "4px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": true, + "original": { + "type": "number", + "value": "{global.border.width.400}" + }, + "name": "pf-t--global--border--width--main--default", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "main", + "state": "default" + }, + "path": [ + "global", + "border", + "width", + "main", + "default" ], "references": [ { "type": "number", - "value": "2px", + "value": "4px", "filePath": "tokens/default/base.dimension.json", "isSource": true, "original": { "type": "number", - "value": 2 + "value": 4 }, - "name": "pf-t--global--border--width--200", + "name": "pf-t--global--border--width--400", "attributes": { "category": "global", "type": "border", "item": "width", - "subitem": "200" + "subitem": "400" }, "path": [ "global", "border", "width", - "200" + "400" ] } ] } }, - "pf-t--global--border--width--action--clicked": { + "pf-t--global--border--width--action--default": { "default": { - "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", + "description": "Use as the default border width for actions like secondary and tertiary buttons", "type": "number", - "value": "2px", + "value": "1px", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", + "description": "Use as the default border width for actions like secondary and tertiary buttons", "type": "number", - "value": "{global.border.width.200}" + "value": "{global.border.width.100}" }, - "name": "pf-t--global--border--width--action--clicked", + "name": "pf-t--global--border--width--action--default", "attributes": { "category": "global", "type": "border", "item": "width", "subitem": "action", - "state": "clicked" + "state": "default" }, "path": [ "global", "border", "width", "action", - "clicked" + "default" ], "references": [ { "type": "number", - "value": "2px", + "value": "1px", "filePath": "tokens/default/base.dimension.json", "isSource": true, "original": { "type": "number", - "value": 2 + "value": 1 }, - "name": "pf-t--global--border--width--200", + "name": "pf-t--global--border--width--100", "attributes": { "category": "global", "type": "border", "item": "width", - "subitem": "200" + "subitem": "100" }, "path": [ "global", "border", "width", - "200" + "100" ] } ] @@ -33072,13 +35692,13 @@ }, "pf-t--global--border--width--action--plain--default": { "default": { - "description": "Use as the default border width for actions like secondary and tertiary buttons", + "description": "Use as the default border width for plain actions", "type": "number", "value": "0px", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the default border width for actions like secondary and tertiary buttons", + "description": "Use as the default border width for plain actions", "type": "number", "value": 0 }, @@ -33102,13 +35722,13 @@ }, "pf-t--global--border--width--action--plain--hover": { "default": { - "description": "Use as the hover state border width for actions like secondary and tertiary buttons", + "description": "Use as the border width for plain actions in their hover state", "type": "number", "value": "0px", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the hover state border width for actions like secondary and tertiary buttons", + "description": "Use as the border width for plain actions in their hover state", "type": "number", "value": 0 }, @@ -33132,13 +35752,13 @@ }, "pf-t--global--border--width--action--plain--clicked": { "default": { - "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", + "description": "Use as the border width for plain actions in their clicked state", "type": "number", "value": "0px", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { - "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", + "description": "Use as the border width for plain actions in their clicked state", "type": "number", "value": 0 }, @@ -33160,6 +35780,114 @@ ] } }, + "pf-t--global--border--width--action--hover": { + "default": { + "description": "Use as the hover state border width for actions like secondary and tertiary buttons", + "type": "number", + "value": "2px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": true, + "original": { + "description": "Use as the hover state border width for actions like secondary and tertiary buttons", + "type": "number", + "value": "{global.border.width.200}" + }, + "name": "pf-t--global--border--width--action--hover", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "action", + "state": "hover" + }, + "path": [ + "global", + "border", + "width", + "action", + "hover" + ], + "references": [ + { + "type": "number", + "value": "2px", + "filePath": "tokens/default/base.dimension.json", + "isSource": true, + "original": { + "type": "number", + "value": 2 + }, + "name": "pf-t--global--border--width--200", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "200" + }, + "path": [ + "global", + "border", + "width", + "200" + ] + } + ] + } + }, + "pf-t--global--border--width--action--clicked": { + "default": { + "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", + "type": "number", + "value": "2px", + "filePath": "tokens/default/semantic.dimension.json", + "isSource": true, + "original": { + "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", + "type": "number", + "value": "{global.border.width.200}" + }, + "name": "pf-t--global--border--width--action--clicked", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "action", + "state": "clicked" + }, + "path": [ + "global", + "border", + "width", + "action", + "clicked" + ], + "references": [ + { + "type": "number", + "value": "2px", + "filePath": "tokens/default/base.dimension.json", + "isSource": true, + "original": { + "type": "number", + "value": 2 + }, + "name": "pf-t--global--border--width--200", + "attributes": { + "category": "global", + "type": "border", + "item": "width", + "subitem": "200" + }, + "path": [ + "global", + "border", + "width", + "200" + ] + } + ] + } + }, "pf-t--global--border--width--control--default": { "default": { "description": "Use as the default border width for controls like text inputs, menu toggles and control buttons", @@ -38953,11 +41681,13 @@ }, "pf-t--global--focus-ring--position--offset": { "default": { + "description": "Use to define the position of a custom focus ring that sits outside (offset) of the element receiving focus.", "type": "number", "value": "2px", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { + "description": "Use to define the position of a custom focus ring that sits outside (offset) of the element receiving focus.", "type": "number", "value": 2 }, @@ -38978,11 +41708,13 @@ }, "pf-t--global--focus-ring--position--inset": { "default": { + "description": "Use to define the position of a custom focus ring that sits inside (inset) of the element receiving focus.", "type": "number", "value": "-4px", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { + "description": "Use to define the position of a custom focus ring that sits inside (inset) of the element receiving focus.", "type": "number", "value": -4 }, @@ -39003,11 +41735,13 @@ }, "pf-t--global--focus-ring--width--offset": { "default": { + "description": "Use to define the width of a custom focus ring that sits outside (offset) of the element receiving focus.", "type": "number", "value": "2px", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { + "description": "Use to define the width of a custom focus ring that sits outside (offset) of the element receiving focus.", "type": "number", "value": 2 }, @@ -39028,11 +41762,13 @@ }, "pf-t--global--focus-ring--width--inset": { "default": { + "description": "Use to define the width of a custom focus ring that sits inside (inset) of the element receiving focus.", "type": "number", "value": "3px", "filePath": "tokens/default/semantic.dimension.json", "isSource": true, "original": { + "description": "Use to define the width of a custom focus ring that sits inside (inset) of the element receiving focus.", "type": "number", "value": 3 }, @@ -39403,78 +42139,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 +42218,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 +42297,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 +42376,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 +42455,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 +42534,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 +42613,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 +42692,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 +42771,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" ] } ] @@ -41473,6 +44209,31 @@ ] } }, + "pf-t--global--background--color--700": { + "default": { + "type": "color", + "value": "rgba(199, 199, 199, 0.1000)", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "rgba(199, 199, 199, 0.1000)" + }, + "name": "pf-t--global--background--color--700", + "attributes": { + "category": "global", + "type": "background", + "item": "color", + "subitem": "700" + }, + "path": [ + "global", + "background", + "color", + "700" + ] + } + }, "pf-t--global--background--color--highlight--100": { "default": { "type": "color", @@ -41669,150 +44430,500 @@ ] } }, - "pf-t--global--color--brand--300": { - "default": { - "type": "color", - "value": "#004d99", - "filePath": "tokens/default/base.json", - "isSource": true, - "original": { - "type": "color", - "value": "{color.blue.60}" - }, - "name": "pf-t--global--color--brand--300", - "attributes": { - "category": "global", - "type": "color", - "item": "brand", - "subitem": "300" - }, - "path": [ - "global", - "color", - "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" - ] - } - ] - } - }, - "pf-t--global--color--brand--400": { - "default": { - "type": "color", - "value": "#003366", - "filePath": "tokens/default/base.json", - "isSource": true, - "original": { - "type": "color", - "value": "{color.blue.70}" - }, - "name": "pf-t--global--color--brand--400", - "attributes": { - "category": "global", - "type": "color", - "item": "brand", - "subitem": "400" - }, - "path": [ - "global", - "color", - "brand", - "400" - ], - "references": [ - { - "type": "color", - "value": "#003366", - "filePath": "tokens/default/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--500": { - "default": { - "type": "color", - "value": "#032142", - "filePath": "tokens/default/base.json", - "isSource": true, - "original": { - "type": "color", - "value": "{color.blue.80}" - }, - "name": "pf-t--global--color--brand--500", - "attributes": { - "category": "global", - "type": "color", - "item": "brand", - "subitem": "500" - }, - "path": [ - "global", - "color", - "brand", - "500" - ], - "references": [ - { - "type": "color", - "value": "#032142", - "filePath": "tokens/default/palette.color.json", - "isSource": true, - "original": { - "type": "color", - "value": "#032142" - }, - "name": "pf-t--color--blue--80", - "attributes": { - "category": "color", - "type": "blue", - "item": "80" - }, - "path": [ - "color", - "blue", - "80" - ] - } - ] - } - }, + "pf-t--global--color--brand--300": { + "default": { + "type": "color", + "value": "#004d99", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.60}" + }, + "name": "pf-t--global--color--brand--300", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "300" + }, + "path": [ + "global", + "color", + "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" + ] + } + ] + } + }, + "pf-t--global--color--brand--400": { + "default": { + "type": "color", + "value": "#003366", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.70}" + }, + "name": "pf-t--global--color--brand--400", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "400" + }, + "path": [ + "global", + "color", + "brand", + "400" + ], + "references": [ + { + "type": "color", + "value": "#003366", + "filePath": "tokens/default/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--500": { + "default": { + "type": "color", + "value": "#032142", + "filePath": "tokens/default/base.json", + "isSource": true, + "original": { + "type": "color", + "value": "{color.blue.80}" + }, + "name": "pf-t--global--color--brand--500", + "attributes": { + "category": "global", + "type": "color", + "item": "brand", + "subitem": "500" + }, + "path": [ + "global", + "color", + "brand", + "500" + ], + "references": [ + { + "type": "color", + "value": "#032142", + "filePath": "tokens/default/palette.color.json", + "isSource": true, + "original": { + "type": "color", + "value": "#032142" + }, + "name": "pf-t--color--blue--80", + "attributes": { + "category": "color", + "type": "blue", + "item": "80" + }, + "path": [ + "color", + "blue", + "80" + ] + } + ] + } + }, + "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", @@ -42729,12 +45840,12 @@ "pf-t--global--color--status--danger--300": { "default": { "type": "color", - "value": "#4c1405", + "value": "#731f00", "filePath": "tokens/default/base.json", "isSource": true, "original": { "type": "color", - "value": "{color.red-orange.80}" + "value": "{color.red-orange.70}" }, "name": "pf-t--global--color--status--danger--300", "attributes": { @@ -42754,23 +45865,23 @@ "references": [ { "type": "color", - "value": "#4c1405", + "value": "#731f00", "filePath": "tokens/default/palette.color.json", "isSource": true, "original": { "type": "color", - "value": "#4c1405" + "value": "#731f00" }, - "name": "pf-t--color--red-orange--80", + "name": "pf-t--color--red-orange--70", "attributes": { "category": "color", "type": "red-orange", - "item": "80" + "item": "70" }, "path": [ "color", "red-orange", - "80" + "70" ] } ] @@ -53459,81 +56570,6 @@ ] } }, - "pf-t--chart--global--layout--padding": { - "default": { - "type": "number", - "value": 50, - "filePath": "tokens/default/charts.json", - "isSource": true, - "original": { - "type": "number", - "value": 50 - }, - "name": "pf-t--chart--global--layout--padding", - "attributes": { - "category": "chart", - "type": "global", - "item": "layout", - "subitem": "padding" - }, - "path": [ - "chart", - "global", - "layout", - "padding" - ] - } - }, - "pf-t--chart--global--layout--height": { - "default": { - "type": "number", - "value": 300, - "filePath": "tokens/default/charts.json", - "isSource": true, - "original": { - "type": "number", - "value": 300 - }, - "name": "pf-t--chart--global--layout--height", - "attributes": { - "category": "chart", - "type": "global", - "item": "layout", - "subitem": "height" - }, - "path": [ - "chart", - "global", - "layout", - "height" - ] - } - }, - "pf-t--chart--global--layout--width": { - "default": { - "type": "number", - "value": 450, - "filePath": "tokens/default/charts.json", - "isSource": true, - "original": { - "type": "number", - "value": 450 - }, - "name": "pf-t--chart--global--layout--width", - "attributes": { - "category": "chart", - "type": "global", - "item": "layout", - "subitem": "width" - }, - "path": [ - "chart", - "global", - "layout", - "width" - ] - } - }, "pf-t--chart--global--stroke-line-cap": { "default": { "type": "string", @@ -53717,6 +56753,81 @@ ] } }, + "pf-t--chart--global--layout--padding": { + "default": { + "type": "number", + "value": 50, + "filePath": "tokens/default/charts.json", + "isSource": true, + "original": { + "type": "number", + "value": 50 + }, + "name": "pf-t--chart--global--layout--padding", + "attributes": { + "category": "chart", + "type": "global", + "item": "layout", + "subitem": "padding" + }, + "path": [ + "chart", + "global", + "layout", + "padding" + ] + } + }, + "pf-t--chart--global--layout--height": { + "default": { + "type": "number", + "value": 300, + "filePath": "tokens/default/charts.json", + "isSource": true, + "original": { + "type": "number", + "value": 300 + }, + "name": "pf-t--chart--global--layout--height", + "attributes": { + "category": "chart", + "type": "global", + "item": "layout", + "subitem": "height" + }, + "path": [ + "chart", + "global", + "layout", + "height" + ] + } + }, + "pf-t--chart--global--layout--width": { + "default": { + "type": "number", + "value": 450, + "filePath": "tokens/default/charts.json", + "isSource": true, + "original": { + "type": "number", + "value": 450 + }, + "name": "pf-t--chart--global--layout--width", + "attributes": { + "category": "chart", + "type": "global", + "item": "layout", + "subitem": "width" + }, + "path": [ + "chart", + "global", + "layout", + "width" + ] + } + }, "pf-t--chart--global--stroke-line-join": { "default": { "type": "string", diff --git a/packages/module/tokens/dark/base.dark.json b/packages/module/tokens/dark/base.dark.json index b2cc390..928e4ee 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": { diff --git a/packages/module/tokens/dark/charts.dark.json b/packages/module/tokens/dark/charts.dark.json index e86a22b..05d3303 100644 --- a/packages/module/tokens/dark/charts.dark.json +++ b/packages/module/tokens/dark/charts.dark.json @@ -292,20 +292,6 @@ "value": 22 } }, - "layout": { - "padding": { - "type": "number", - "value": 50 - }, - "height": { - "type": "number", - "value": 300 - }, - "width": { - "type": "number", - "value": 450 - } - }, "stroke-line-cap": { "type": "string", "value": "round" @@ -336,6 +322,20 @@ "value": "{color.white}" } }, + "layout": { + "padding": { + "type": "number", + "value": 50 + }, + "height": { + "type": "number", + "value": 300 + }, + "width": { + "type": "number", + "value": 450 + } + }, "stroke-line-join": { "type": "string", "value": "round" diff --git a/packages/module/tokens/dark/semantic.dark.json b/packages/module/tokens/dark/semantic.dark.json index 7d93f37..c563b09 100644 --- a/packages/module/tokens/dark/semantic.dark.json +++ b/packages/module/tokens/dark/semantic.dark.json @@ -145,6 +145,18 @@ "type": "color", "value": "{global.dark.background.color.500}" } + }, + "loading": { + "skeleton": { + "default": { + "type": "color", + "value": "{global.dark.background.color.700}" + }, + "subtle": { + "type": "color", + "value": "{global.dark.background.color.600}" + } + } } } }, @@ -164,6 +176,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 +535,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 +569,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": { @@ -967,10 +1064,6 @@ "value": "{global.dark.border.color.50}" } }, - "high-contrast": { - "type": "color", - "value": "rgba(255, 255, 255, 0.0000)" - }, "brand": { "default": { "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", @@ -986,6 +1079,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": { @@ -1075,6 +1202,11 @@ } } }, + "high-contrast": { + "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.", + "type": "color", + "value": "rgba(255, 255, 255, 0.0000)" + }, "default": { "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.", "type": "color", @@ -1105,12 +1237,6 @@ "type": "color", "value": "{global.dark.border.color.200}" }, - "main": { - "default": { - "type": "color", - "value": "{global.background.color.primary.default}" - } - }, "nonstatus": { "red": { "default": { @@ -1265,6 +1391,12 @@ "value": "{global.dark.color.nonstatus.gray.300}" } } + }, + "main": { + "default": { + "type": "color", + "value": "{global.background.color.primary.default}" + } } } }, @@ -1334,6 +1466,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": { @@ -1763,7 +1929,7 @@ "focus-ring": { "color": { "default": { - "description": "This token is used to define the color value for custom focus rings.", + "description": "Use as color value for custom focus rings", "type": "color", "value": "{global.dark.focus-ring.color.100}" } diff --git a/packages/module/tokens/default/base.json b/packages/module/tokens/default/base.json index 8f20748..1b181ed 100644 --- a/packages/module/tokens/default/base.json +++ b/packages/module/tokens/default/base.json @@ -31,6 +31,10 @@ "type": "color", "value": "rgba(199, 199, 199, 0.2500)" }, + "700": { + "type": "color", + "value": "rgba(199, 199, 199, 0.1000)" + }, "highlight": { "100": { "type": "color", @@ -64,6 +68,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": { @@ -154,7 +190,7 @@ }, "300": { "type": "color", - "value": "{color.red-orange.80}" + "value": "{color.red-orange.70}" } }, "info": { diff --git a/packages/module/tokens/default/charts.json b/packages/module/tokens/default/charts.json index a2309ce..b84e326 100644 --- a/packages/module/tokens/default/charts.json +++ b/packages/module/tokens/default/charts.json @@ -292,20 +292,6 @@ "value": 22 } }, - "layout": { - "padding": { - "type": "number", - "value": 50 - }, - "height": { - "type": "number", - "value": 300 - }, - "width": { - "type": "number", - "value": 450 - } - }, "stroke-line-cap": { "type": "string", "value": "round" @@ -336,6 +322,20 @@ "value": "{color.gray.90}" } }, + "layout": { + "padding": { + "type": "number", + "value": 50 + }, + "height": { + "type": "number", + "value": 300 + }, + "width": { + "type": "number", + "value": 450 + } + }, "stroke-line-join": { "type": "string", "value": "round" diff --git a/packages/module/tokens/default/semantic.dimension.json b/packages/module/tokens/default/semantic.dimension.json index ff144ce..bc0f387 100644 --- a/packages/module/tokens/default/semantic.dimension.json +++ b/packages/module/tokens/default/semantic.dimension.json @@ -67,26 +67,6 @@ "type": "number", "value": "{global.border.width.300}" }, - "main": { - "default": { - "type": "number", - "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,38 +96,58 @@ } } }, - "action": { - "default": { - "description": "Use as the default border width for actions like secondary and tertiary buttons", + "high-contrast": { + "regular": { "type": "number", - "value": "{global.border.width.100}" + "value": 0 }, - "hover": { - "description": "Use as the hover state border width for actions like secondary and tertiary buttons", + "strong": { "type": "number", - "value": "{global.border.width.200}" + "value": 0 }, - "clicked": { - "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", + "extra-strong": { "type": "number", - "value": "{global.border.width.200}" + "value": 0 + } + }, + "main": { + "default": { + "type": "number", + "value": "{global.border.width.400}" + } + }, + "action": { + "default": { + "description": "Use as the default border width for actions like secondary and tertiary buttons", + "type": "number", + "value": "{global.border.width.100}" }, "plain": { "default": { - "description": "Use as the default border width for actions like secondary and tertiary buttons", + "description": "Use as the default border width for plain actions", "type": "number", "value": 0 }, "hover": { - "description": "Use as the hover state border width for actions like secondary and tertiary buttons", + "description": "Use as the border width for plain actions in their hover state", "type": "number", "value": 0 }, "clicked": { - "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", + "description": "Use as the border width for plain actions in their clicked state", "type": "number", "value": 0 } + }, + "hover": { + "description": "Use as the hover state border width for actions like secondary and tertiary buttons", + "type": "number", + "value": "{global.border.width.200}" + }, + "clicked": { + "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", + "type": "number", + "value": "{global.border.width.200}" } }, "control": { @@ -358,12 +358,14 @@ }, "inset": { "page-chrome": { + "description": "Use to define inner padding for structural elements in order to maintain alignment, like in the masthead, navigation menu, or main page content.", "type": "number", "value": "{global.spacer.lg}" } }, "gutter": { "default": { + "description": "Use to define gutters between elements in certain layouts, like grids.", "type": "number", "value": "{global.spacer.md}" } @@ -1038,20 +1040,24 @@ "focus-ring": { "position": { "offset": { + "description": "Use to define the position of a custom focus ring that sits outside (offset) of the element receiving focus.", "type": "number", "value": 2 }, "inset": { + "description": "Use to define the position of a custom focus ring that sits inside (inset) of the element receiving focus.", "type": "number", "value": -4 } }, "width": { "offset": { + "description": "Use to define the width of a custom focus ring that sits outside (offset) of the element receiving focus.", "type": "number", "value": 2 }, "inset": { + "description": "Use to define the width of a custom focus ring that sits inside (inset) of the element receiving focus.", "type": "number", "value": 3 } diff --git a/packages/module/tokens/default/semantic.json b/packages/module/tokens/default/semantic.json index b3355e9..d5cb2bb 100644 --- a/packages/module/tokens/default/semantic.json +++ b/packages/module/tokens/default/semantic.json @@ -145,6 +145,18 @@ "type": "color", "value": "{global.background.color.500}" } + }, + "loading": { + "skeleton": { + "default": { + "type": "color", + "value": "{global.background.color.600}" + }, + "subtle": { + "type": "color", + "value": "{global.background.color.700}" + } + } } } }, @@ -164,6 +176,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 +535,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 +569,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": { @@ -967,10 +1064,6 @@ "value": "{global.border.color.50}" } }, - "high-contrast": { - "type": "color", - "value": "rgba(255, 255, 255, 0.0000)" - }, "brand": { "default": { "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", @@ -986,6 +1079,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": { @@ -1075,6 +1202,11 @@ } } }, + "high-contrast": { + "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.", + "type": "color", + "value": "rgba(255, 255, 255, 0.0000)" + }, "default": { "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.", "type": "color", @@ -1105,12 +1237,6 @@ "type": "color", "value": "{global.border.color.300}" }, - "main": { - "default": { - "type": "color", - "value": "{global.background.color.primary.default}" - } - }, "nonstatus": { "red": { "default": { @@ -1265,6 +1391,12 @@ "value": "{global.color.nonstatus.gray.300}" } } + }, + "main": { + "default": { + "type": "color", + "value": "{global.background.color.primary.default}" + } } } }, @@ -1334,6 +1466,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": { @@ -1763,7 +1929,7 @@ "focus-ring": { "color": { "default": { - "description": "This token is used to define the color value for custom focus rings.", + "description": "Use as color value for custom focus rings", "type": "color", "value": "{global.focus-ring.color.100}" } 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..928e4ee 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": { diff --git a/packages/module/tokens/highcontrast-dark/semantic.highcontrast.dark.json b/packages/module/tokens/highcontrast-dark/semantic.highcontrast.dark.json index 26d3df5..88c3964 100644 --- a/packages/module/tokens/highcontrast-dark/semantic.highcontrast.dark.json +++ b/packages/module/tokens/highcontrast-dark/semantic.highcontrast.dark.json @@ -145,6 +145,18 @@ "type": "color", "value": "{global.dark.background.color.500}" } + }, + "loading": { + "skeleton": { + "default": { + "type": "color", + "value": "{global.dark.background.color.700}" + }, + "subtle": { + "type": "color", + "value": "{global.dark.background.color.600}" + } + } } } }, @@ -164,6 +176,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 +535,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 +569,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": { @@ -967,10 +1064,6 @@ "value": "{global.dark.border.color.50}" } }, - "high-contrast": { - "type": "color", - "value": "{global.border.color.default}" - }, "brand": { "default": { "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", @@ -986,6 +1079,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": { @@ -1075,6 +1202,11 @@ } } }, + "high-contrast": { + "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.", + "type": "color", + "value": "{global.border.color.default}" + }, "default": { "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.", "type": "color", @@ -1105,12 +1237,6 @@ "type": "color", "value": "{global.dark.border.color.300}" }, - "main": { - "default": { - "type": "color", - "value": "{global.border.color.default}" - } - }, "nonstatus": { "red": { "default": { @@ -1265,6 +1391,12 @@ "value": "{global.dark.color.nonstatus.gray.300}" } } + }, + "main": { + "default": { + "type": "color", + "value": "{global.border.color.default}" + } } } }, @@ -1334,6 +1466,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": { @@ -1763,7 +1929,7 @@ "focus-ring": { "color": { "default": { - "description": "This token is used to define the color value for custom focus rings.", + "description": "Use as color value for custom focus rings", "type": "color", "value": "{global.dark.focus-ring.color.100}" } diff --git a/packages/module/tokens/highcontrast/base.json b/packages/module/tokens/highcontrast/base.json index 8f20748..1b181ed 100644 --- a/packages/module/tokens/highcontrast/base.json +++ b/packages/module/tokens/highcontrast/base.json @@ -31,6 +31,10 @@ "type": "color", "value": "rgba(199, 199, 199, 0.2500)" }, + "700": { + "type": "color", + "value": "rgba(199, 199, 199, 0.1000)" + }, "highlight": { "100": { "type": "color", @@ -64,6 +68,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": { @@ -154,7 +190,7 @@ }, "300": { "type": "color", - "value": "{color.red-orange.80}" + "value": "{color.red-orange.70}" } }, "info": { diff --git a/packages/module/tokens/highcontrast/semantic.dimension.highcontrast.json b/packages/module/tokens/highcontrast/semantic.dimension.highcontrast.json index fd4770d..e9510a4 100644 --- a/packages/module/tokens/highcontrast/semantic.dimension.highcontrast.json +++ b/packages/module/tokens/highcontrast/semantic.dimension.highcontrast.json @@ -67,26 +67,6 @@ "type": "number", "value": "{global.border.width.300}" }, - "main": { - "default": { - "type": "number", - "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,38 +96,58 @@ } } }, - "action": { - "default": { - "description": "Use as the default border width for actions like secondary and tertiary buttons", + "high-contrast": { + "regular": { "type": "number", - "value": "{global.border.width.100}" + "value": "{global.border.width.regular}" }, - "hover": { - "description": "Use as the hover state border width for actions like secondary and tertiary buttons", + "strong": { "type": "number", - "value": "{global.border.width.200}" + "value": "{global.border.width.strong}" }, - "clicked": { - "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", + "extra-strong": { + "type": "number", + "value": "{global.border.width.extra-strong}" + } + }, + "main": { + "default": { "type": "number", "value": "{global.border.width.200}" + } + }, + "action": { + "default": { + "description": "Use as the default border width for actions like secondary and tertiary buttons", + "type": "number", + "value": "{global.border.width.100}" }, "plain": { "default": { - "description": "Use as the default border width for actions like secondary and tertiary buttons", + "description": "Use as the default border width for plain actions", "type": "number", "value": 0 }, "hover": { - "description": "Use as the hover state border width for actions like secondary and tertiary buttons", + "description": "Use as the border width for plain actions in their hover state", "type": "number", "value": "{global.border.width.100}" }, "clicked": { - "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", + "description": "Use as the border width for plain actions in their clicked state", "type": "number", "value": "{global.border.width.200}" } + }, + "hover": { + "description": "Use as the hover state border width for actions like secondary and tertiary buttons", + "type": "number", + "value": "{global.border.width.200}" + }, + "clicked": { + "description": "Use as the clicked state border width for actions like secondary and tertiary buttons", + "type": "number", + "value": "{global.border.width.200}" } }, "control": { @@ -358,12 +358,14 @@ }, "inset": { "page-chrome": { + "description": "Use to define inner padding for structural elements in order to maintain alignment, like in the masthead, navigation menu, or main page content.", "type": "number", "value": "{global.spacer.lg}" } }, "gutter": { "default": { + "description": "Use to define gutters between elements in certain layouts, like grids.", "type": "number", "value": "{global.spacer.md}" } @@ -1038,20 +1040,24 @@ "focus-ring": { "position": { "offset": { + "description": "Use to define the position of a custom focus ring that sits outside (offset) of the element receiving focus.", "type": "number", "value": 2 }, "inset": { + "description": "Use to define the position of a custom focus ring that sits inside (inset) of the element receiving focus.", "type": "number", "value": -4 } }, "width": { "offset": { + "description": "Use to define the width of a custom focus ring that sits outside (offset) of the element receiving focus.", "type": "number", "value": 2 }, "inset": { + "description": "Use to define the width of a custom focus ring that sits inside (inset) of the element receiving focus.", "type": "number", "value": 3 } diff --git a/packages/module/tokens/highcontrast/semantic.highcontrast.json b/packages/module/tokens/highcontrast/semantic.highcontrast.json index 48deb26..37f8c6a 100644 --- a/packages/module/tokens/highcontrast/semantic.highcontrast.json +++ b/packages/module/tokens/highcontrast/semantic.highcontrast.json @@ -145,6 +145,18 @@ "type": "color", "value": "{global.background.color.500}" } + }, + "loading": { + "skeleton": { + "default": { + "type": "color", + "value": "{global.background.color.600}" + }, + "subtle": { + "type": "color", + "value": "{global.background.color.700}" + } + } } } }, @@ -164,6 +176,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": { @@ -478,17 +524,34 @@ "default": { "description": "Use as the color for icons that convey your brand and/or are paired with branded text color.", "type": "color", - "value": "{color.blue.60}" + "value": "{global.color.brand.300}" }, "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": "{color.blue.70}" + "value": "{global.color.brand.400}" }, "clicked": { "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}" + "value": "{global.color.brand.400}" + }, + "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 +569,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": { @@ -530,17 +627,17 @@ "default": { "description": "Use as the default color for text that communicates a success status.", "type": "color", - "value": "{global.color.status.success.150}" + "value": "{global.color.status.success.default}" }, "hover": { "description": "Use as the hover state color for text that communicates a success status.", "type": "color", - "value": "{global.color.status.success.200}" + "value": "{global.color.status.success.hover}" }, "clicked": { "description": "Use as the clicked state color for text that communicates a success status.", "type": "color", - "value": "{global.color.status.success.200}" + "value": "{global.color.status.success.clicked}" } }, "on-success": { @@ -967,10 +1064,6 @@ "value": "{global.border.color.50}" } }, - "high-contrast": { - "type": "color", - "value": "{global.border.color.default}" - }, "brand": { "default": { "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.", @@ -986,6 +1079,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": { @@ -1075,6 +1202,11 @@ } } }, + "high-contrast": { + "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.", + "type": "color", + "value": "{global.border.color.default}" + }, "default": { "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.", "type": "color", @@ -1105,12 +1237,6 @@ "type": "color", "value": "{global.border.color.400}" }, - "main": { - "default": { - "type": "color", - "value": "{global.border.color.default}" - } - }, "nonstatus": { "red": { "default": { @@ -1265,6 +1391,12 @@ "value": "{global.color.nonstatus.gray.500}" } } + }, + "main": { + "default": { + "type": "color", + "value": "{global.border.color.default}" + } } } }, @@ -1291,17 +1423,17 @@ "default": { "description": "Use as the default color for branded text.", "type": "color", - "value": "{color.blue.70}" + "value": "{global.color.brand.400}" }, "hover": { "description": "Use as the hover state color for branded text.", "type": "color", - "value": "{color.blue.80}" + "value": "{global.color.brand.500}" }, "clicked": { "description": "Use as the clicked state color for branded text.", "type": "color", - "value": "{color.blue.80}" + "value": "{global.color.brand.500}" } }, "regular": { @@ -1334,6 +1466,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": { @@ -1369,11 +1535,11 @@ }, "hover": { "type": "color", - "value": "{global.color.status.success.200}" + "value": "{global.color.status.success.300}" }, "clicked": { "type": "color", - "value": "{global.color.status.success.200}" + "value": "{global.color.status.success.300}" } }, "on-success": { @@ -1763,7 +1929,7 @@ "focus-ring": { "color": { "default": { - "description": "This token is used to define the color value for custom focus rings.", + "description": "Use as color value for custom focus rings", "type": "color", "value": "{global.focus-ring.color.200}" }