diff --git a/packages/module/build.js b/packages/module/build.js index 1cc2d49..ff5a41f 100644 --- a/packages/module/build.js +++ b/packages/module/build.js @@ -12,6 +12,7 @@ StyleDictionary.registerTransform({ token.attributes.type === 'spacer' || token.attributes.type === 'border' || token.attributes.type === 'icon' || + token.attributes.type === 'box-shadow' || token.attributes.type === 'font', transformer: (token) => `${token.value}px` }); diff --git a/packages/module/build/css/_tokens-charts.scss b/packages/module/build/css/_tokens-charts.scss index dbdcf46..ff06ba4 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, 14 Feb 2024 00:59:20 GMT + * Generated on Tue, 20 Feb 2024 01:08:05 GMT */ :root { @@ -95,31 +95,31 @@ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--300: var(--pf-t--chart--color--green--300); --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--200: var(--pf-t--chart--color--yellow--300); --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--100: var(--pf-t--chart--color--blue--300); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2500: var(--pf-t--chart--color--orange--200); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2400: var(--pf-t--chart--color--yellow--400); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2300: var(--pf-t--chart--color--teal--400); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2200: var(--pf-t--chart--color--green--200); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2100: var(--pf-t--chart--color--blue--400); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2000: var(--pf-t--chart--color--orange--400); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1900: var(--pf-t--chart--color--yellow--200); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1800: var(--pf-t--chart--color--teal--200); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1700: var(--pf-t--chart--color--green--400); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1600: var(--pf-t--chart--color--blue--200); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1500: var(--pf-t--chart--color--orange--100); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1400: var(--pf-t--chart--color--yellow--500); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1300: var(--pf-t--chart--color--teal--500); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1200: var(--pf-t--chart--color--green--100); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1100: var(--pf-t--chart--color--blue--500); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1000: var(--pf-t--chart--color--orange--500); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--900: var(--pf-t--chart--color--yellow--100); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--800: var(--pf-t--chart--color--teal--100); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--700: var(--pf-t--chart--color--green--500); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--600: var(--pf-t--chart--color--blue--100); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--500: var(--pf-t--chart--color--orange--300); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--400: var(--pf-t--chart--color--yellow--300); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--300: var(--pf-t--chart--color--teal--300); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--200: var(--pf-t--chart--color--green--300); - --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--100: var(--pf-t--chart--color--blue--300); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2500: var(--pf-t--chart--color--orange--200); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2400: var(--pf-t--chart--color--yellow--400); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2300: var(--pf-t--chart--color--teal--400); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2200: var(--pf-t--chart--color--green--200); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2100: var(--pf-t--chart--color--blue--400); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2000: var(--pf-t--chart--color--orange--400); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1900: var(--pf-t--chart--color--yellow--200); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1800: var(--pf-t--chart--color--teal--200); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1700: var(--pf-t--chart--color--green--400); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1600: var(--pf-t--chart--color--blue--200); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1500: var(--pf-t--chart--color--orange--100); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1400: var(--pf-t--chart--color--yellow--500); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1300: var(--pf-t--chart--color--teal--500); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1200: var(--pf-t--chart--color--green--100); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1100: var(--pf-t--chart--color--blue--500); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1000: var(--pf-t--chart--color--orange--500); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--900: var(--pf-t--chart--color--yellow--100); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--800: var(--pf-t--chart--color--teal--100); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--700: var(--pf-t--chart--color--green--500); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--600: var(--pf-t--chart--color--blue--100); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--500: var(--pf-t--chart--color--orange--300); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--400: var(--pf-t--chart--color--yellow--300); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--300: var(--pf-t--chart--color--teal--300); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--200: var(--pf-t--chart--color--green--300); + --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--100: var(--pf-t--chart--color--blue--300); --pf-t--chart--theme--colorscales--orange--colorscale--500: var(--pf-t--chart--color--orange--400); --pf-t--chart--theme--colorscales--orange--colorscale--400: var(--pf-t--chart--color--orange--200); --pf-t--chart--theme--colorscales--orange--colorscale--300: var(--pf-t--chart--color--orange--500); diff --git a/packages/module/build/css/_tokens-dark.scss b/packages/module/build/css/_tokens-dark.scss index 2576572..9503bf0 100644 --- a/packages/module/build/css/_tokens-dark.scss +++ b/packages/module/build/css/_tokens-dark.scss @@ -1,12 +1,19 @@ /** * Do not edit directly - * Generated on Wed, 14 Feb 2024 00:59:20 GMT + * Generated on Tue, 20 Feb 2024 01:08:05 GMT */ :root { --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000); + --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000); + --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500); --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000); + --pf-t--global--box-shadow--color--lg: var(--pf-t--global--dark--box-shadow--color--100); + --pf-t--global--box-shadow--color--md: var(--pf-t--global--dark--box-shadow--color--100); + --pf-t--global--box-shadow--color--sm: var(--pf-t--global--dark--box-shadow--color--100); --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500); + --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--dark--icon--color--300: var(--pf-t--color--gray--90); --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40); --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10); @@ -15,7 +22,7 @@ --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20); --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30); --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90); - --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--40); + --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30); --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10); --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40); --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50); @@ -71,7 +78,7 @@ --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10); --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70); --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80); - --pf-t--global--dark--background--color--100: var(--pf-t--color--black); + --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95); --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300); --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300); --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250); @@ -180,8 +187,8 @@ --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300); --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200); - --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--200); - --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300); --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200); @@ -344,12 +351,10 @@ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default); --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default); - --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default); - --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--action--plain--hover); - --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--action--plain--hover); } diff --git a/packages/module/build/css/_tokens-default.scss b/packages/module/build/css/_tokens-default.scss index c2ddafd..9444af5 100644 --- a/packages/module/build/css/_tokens-default.scss +++ b/packages/module/build/css/_tokens-default.scss @@ -1,11 +1,32 @@ /** * Do not edit directly - * Generated on Wed, 14 Feb 2024 00:59:19 GMT + * Generated on Tue, 20 Feb 2024 01:08:05 GMT */ :root { --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000); + --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500); --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000); + --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200); + --pf-t--global--box-shadow--color--100: rgba(0, 0, 0, 0.1600); + --pf-t--global--box-shadow--spread--100: 0px; + --pf-t--global--box-shadow--blur--300: 24px; + --pf-t--global--box-shadow--blur--200: 8px; + --pf-t--global--box-shadow--blur--100: 2px; + --pf-t--global--box-shadow--Y--700: 8px; + --pf-t--global--box-shadow--Y--600: 4px; + --pf-t--global--box-shadow--Y--500: 1px; + --pf-t--global--box-shadow--Y--400: 0px; + --pf-t--global--box-shadow--Y--300: -1px; + --pf-t--global--box-shadow--Y--200: -4px; + --pf-t--global--box-shadow--Y--100: -8px; + --pf-t--global--box-shadow--X--700: 8px; + --pf-t--global--box-shadow--X--600: 4px; + --pf-t--global--box-shadow--X--500: 1px; + --pf-t--global--box-shadow--X--400: 0px; + --pf-t--global--box-shadow--X--300: -1px; + --pf-t--global--box-shadow--X--200: -4px; + --pf-t--global--box-shadow--X--100: -8px; --pf-t--global--Zindex--600: 600; --pf-t--global--Zindex--500: 500; --pf-t--global--Zindex--400: 400; @@ -97,18 +118,60 @@ --pf-t--global--color--brand--300: var(--pf-t--color--blue--60); --pf-t--global--color--brand--200: var(--pf-t--color--blue--50); --pf-t--global--color--brand--100: var(--pf-t--color--blue--40); + --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500); + --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600); + --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600); --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40); --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30); --pf-t--global--background--color--400: var(--pf-t--color--gray--80); --pf-t--global--background--color--300: var(--pf-t--color--gray--20); --pf-t--global--background--color--200: var(--pf-t--color--gray--10); --pf-t--global--background--color--100: var(--pf-t--color--white); - --pf-t--global--Zindex--2xl: var(--pf-t--global--Zindex--600); - --pf-t--global--Zindex--xl: var(--pf-t--global--Zindex--500); - --pf-t--global--Zindex--lg: var(--pf-t--global--Zindex--400); - --pf-t--global--Zindex--md: var(--pf-t--global--Zindex--300); - --pf-t--global--Zindex--sm: var(--pf-t--global--Zindex--200); - --pf-t--global--Zindex--xs: var(--pf-t--global--Zindex--100); + --pf-t--global--box-shadow--color--lg: var(--pf-t--global--box-shadow--color--200); + --pf-t--global--box-shadow--color--md: var(--pf-t--global--box-shadow--color--200); + --pf-t--global--box-shadow--color--sm: var(--pf-t--global--box-shadow--color--100); + --pf-t--global--box-shadow--spread--lg: var(--pf-t--global--box-shadow--spread--100); + --pf-t--global--box-shadow--spread--md: var(--pf-t--global--box-shadow--spread--100); + --pf-t--global--box-shadow--spread--sm: var(--pf-t--global--box-shadow--spread--100); + --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300); + --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200); + --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100); + --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--700); + --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--100); + --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700); + --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--600); + --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--200); + --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600); + --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--500); + --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--300); + --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500); + --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--700); + --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--100); + --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--600); + --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--200); + --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--500); + --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--300); + --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--Zindex--2xl: 600; + --pf-t--global--Zindex--xl: 500; + --pf-t--global--Zindex--lg: 400; + --pf-t--global--Zindex--md: 300; + --pf-t--global--Zindex--sm: 200; + --pf-t--global--Zindex--xs: 100; --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800); --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700); --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600); @@ -138,10 +201,10 @@ --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300); --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200); - --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100); --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100); --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100); --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100); --pf-t--global--icon--color--300: var(--pf-t--color--white); --pf-t--global--icon--color--200: var(--pf-t--color--gray--50); --pf-t--global--icon--color--100: var(--pf-t--color--gray--90); @@ -165,77 +228,84 @@ --pf-t--global--spacer--md: var(--pf-t--global--spacer--300); --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200); --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100); - --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100); - --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200); + --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300); + --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--300); + --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--200); + --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300); + --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300); + --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200); + --pf-t--global--text--color--required: var(--pf-t--global--text--color--400); + --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300); + --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--100); --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300); - --pf-t--global--text--color--disabled--default: var(--pf-t--global--color--disabled--300); - --pf-t--global--text--color--disabled--light: var(--pf-t--global--color--disabled--100); - --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100); - --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--200); + --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200); + --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100); --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--300); + --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--200); + --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100); + --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--200); --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--200); --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--100); - --pf-t--global--color--nonstatus--gray--active: var(--pf-t--global--color--nonstatus--gray--200); - --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100); + --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200); --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200); - --pf-t--global--color--nonstatus--purple--active: var(--pf-t--global--color--nonstatus--purple--200); - --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100); + --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100); + --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200); --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200); - --pf-t--global--color--nonstatus--blue--active: var(--pf-t--global--color--nonstatus--blue--200); + --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100); + --pf-t--global--color--nonstatus--cyan--clicked: var(--pf-t--global--color--nonstatus--cyan--200); --pf-t--global--color--nonstatus--cyan--hover: var(--pf-t--global--color--nonstatus--cyan--200); --pf-t--global--color--nonstatus--cyan--default: var(--pf-t--global--color--nonstatus--cyan--100); - --pf-t--global--color--nonstatus--cyan--active: var(--pf-t--global--color--nonstatus--cyan--200); - --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100); + --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200); --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200); - --pf-t--global--color--nonstatus--green--active: var(--pf-t--global--color--nonstatus--green--200); - --pf-t--global--color--nonstatus--gold--default: var(--pf-t--global--color--nonstatus--gold--100); + --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100); + --pf-t--global--color--nonstatus--gold--clicked: var(--pf-t--global--color--nonstatus--gold--200); --pf-t--global--color--nonstatus--gold--hover: var(--pf-t--global--color--nonstatus--gold--200); - --pf-t--global--color--nonstatus--gold--active: var(--pf-t--global--color--nonstatus--gold--200); - --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100); + --pf-t--global--color--nonstatus--gold--default: var(--pf-t--global--color--nonstatus--gold--100); + --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200); --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200); - --pf-t--global--color--nonstatus--orange--active: var(--pf-t--global--color--nonstatus--orange--200); - --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100); + --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100); + --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200); --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200); - --pf-t--global--color--nonstatus--orangered--active: var(--pf-t--global--color--nonstatus--orangered--200); - --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100); + --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100); + --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200); --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200); - --pf-t--global--color--nonstatus--red--active: var(--pf-t--global--color--nonstatus--red--200); - --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--100); + --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100); + --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--200); --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--200); - --pf-t--global--color--status--custom--active: var(--pf-t--global--color--status--custom--200); - --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--100); + --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--100); + --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--200); --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--200); - --pf-t--global--color--status--info--active: var(--pf-t--global--color--status--info--200); - --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--100); + --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--100); + --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200); --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--200); - --pf-t--global--color--status--danger--active: var(--pf-t--global--color--status--danger--200); + --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--100); + --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--200); --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--200); - --pf-t--global--color--status--warning--active: var(--pf-t--global--color--status--warning--200); --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--100); - --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--100); + --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--200); --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--200); - --pf-t--global--color--status--success--active: var(--pf-t--global--color--status--success--200); - --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--100); + --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--100); + --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--200); --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--200); - --pf-t--global--color--favorite--active: var(--pf-t--global--color--favorite--200); - --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200); + --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--100); + --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300); --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300); - --pf-t--global--color--brand--active: var(--pf-t--global--color--brand--300); - --pf-t--global--background--color--secondary--selected: 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--background--color--inverse--default: var(--pf-t--global--background--color--400); + --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200); --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100); - --pf-t--global--background--color--primary--selected: var(--pf-t--global--background--color--200); - --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100); - --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200); - --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100); - --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200); - --pf-t--global--background--color--floating--selected: var(--pf-t--global--background--color--200); - --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400); + --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100); --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100); + --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100); + --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300); + --pf-t--global--background--color--secondary--hover: 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--primary--clicked: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100); + --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200); --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100); - --pf-t--global--background--color--highlight--active: var(--pf-t--global--background--color--highlight--200); --pf-t--global--font--size--heading--h6: 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--h4: var(--pf-t--global--font--size--md); @@ -245,40 +315,47 @@ --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md); --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm); --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs); - --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100); - --pf-t--global--border--color--default: var(--pf-t--global--border--color--100); - --pf-t--global--border--color--active: var(--pf-t--global--color--brand--200); - --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--200); + --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--300); + --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--300); + --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--200); + --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--300); + --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--300); + --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--200); + --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--300); --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--300); - --pf-t--global--border--color--nonstatus--blue--active: var(--pf-t--global--color--nonstatus--blue--300); - --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200); - --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300); - --pf-t--global--border--color--nonstatus--red--active: var(--pf-t--global--color--nonstatus--red--300); - --pf-t--global--border--color--nonstatus--orangered--active: var(--pf-t--global--color--nonstatus--orangered--300); - --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--200); - --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--300); - --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--300); - --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--200); - --pf-t--global--border--color--nonstatus--orange--active: var(--pf-t--global--color--nonstatus--orange--300); - --pf-t--global--border--color--nonstatus--gold--default: var(--pf-t--global--color--nonstatus--gold--200); - --pf-t--global--border--color--nonstatus--gold--hover: var(--pf-t--global--color--nonstatus--gold--300); - --pf-t--global--border--color--nonstatus--gold--active: var(--pf-t--global--color--nonstatus--gold--300); - --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--200); - --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--300); - --pf-t--global--border--color--nonstatus--green--active: var(--pf-t--global--color--nonstatus--green--300); - --pf-t--global--border--color--nonstatus--cyan--active: var(--pf-t--global--color--nonstatus--cyan--300); + --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--200); + --pf-t--global--border--color--nonstatus--cyan--clicked: var(--pf-t--global--color--nonstatus--cyan--300); --pf-t--global--border--color--nonstatus--cyan--hover: var(--pf-t--global--color--nonstatus--cyan--300); --pf-t--global--border--color--nonstatus--cyan--default: var(--pf-t--global--color--nonstatus--cyan--200); - --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--200); - --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--300); - --pf-t--global--border--color--nonstatus--purple--active: var(--pf-t--global--color--nonstatus--purple--300); - --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--200); - --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--300); - --pf-t--global--border--color--nonstatus--gray--active: var(--pf-t--global--color--nonstatus--gray--300); - --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100); - --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--300); + --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--300); + --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--300); + --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--200); + --pf-t--global--border--color--nonstatus--gold--clicked: var(--pf-t--global--color--nonstatus--gold--300); + --pf-t--global--border--color--nonstatus--gold--hover: var(--pf-t--global--color--nonstatus--gold--300); + --pf-t--global--border--color--nonstatus--gold--default: var(--pf-t--global--color--nonstatus--gold--200); + --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--300); + --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--300); + --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--200); + --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--300); + --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--300); + --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--200); + --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300); + --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300); + --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200); + --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200); + --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100); + --pf-t--global--border--color--default: var(--pf-t--global--border--color--100); + --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300); + --pf-t--global--border--color--status--warning--hover: 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--icon--color--on-disabled: var(--pf-t--global--color--disabled--300); + --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--100); --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300); --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200); + --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100); + --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300); + --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--300); + --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--200); --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl); --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl); --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl); @@ -287,132 +364,172 @@ --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md); --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm); --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs); - --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--icon--color--inverse); - --pf-t--global--text--color--on-brand--default: var(--pf-t--global--icon--color--inverse); - --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle); - --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default); - --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover); - --pf-t--global--text--color--brand--active: var(--pf-t--global--color--brand--active); - --pf-t--global--text--color--status--custom--active: var(--pf-t--global--color--status--custom--active); + --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-cyan--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-cyan--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-cyan--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-gold--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-gold--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-gold--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default); - --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse); - --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--icon--color--inverse); - --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse); - --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default); - --pf-t--global--text--color--status--info--active: var(--pf-t--global--color--status--info--active); + --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover); - --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse); - --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse); - --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse); - --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--icon--color--inverse); - --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse); - --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse); - --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover); - --pf-t--global--text--color--status--success--active: var(--pf-t--global--color--status--success--active); - --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default); - --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); - --pf-t--global--text--color--status--warning--active: var(--pf-t--global--color--status--warning--active); - --pf-t--global--text--color--status--danger--active: var(--pf-t--global--color--status--danger--active); - --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default); - --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); - --pf-t--global--text--color--nonstatus--on-gold--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-gold--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-cyan--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-cyan--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--text--color--brand--clicked: var(--pf-t--global--color--brand--clicked); + --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover); + --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default); + --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle); + --pf-t--global--text--color--on-brand--clicked: 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--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default); + --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked); + --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover); + --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default); --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default); - --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); - --pf-t--global--border--color--brand--active: var(--pf-t--global--color--brand--active); - --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default); - --pf-t--global--border--color--status--danger--active: var(--pf-t--global--color--status--danger--active); - --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); - --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default); + --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default); + --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); - --pf-t--global--border--color--status--custom--active: var(--pf-t--global--color--status--custom--active); - --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default); - --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover); - --pf-t--global--border--color--status--success--active: var(--pf-t--global--color--status--success--active); - --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default); - --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); - --pf-t--global--border--color--status--warning--active: var(--pf-t--global--color--status--warning--active); - --pf-t--global--border--color--status--info--active: var(--pf-t--global--color--status--info--active); + --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default); - --pf-t--global--icon--color--on-brand--hover: 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--brand--hover: var(--pf-t--global--color--brand--hover); - --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default); - --pf-t--global--icon--color--brand--active: var(--pf-t--global--color--brand--active); - --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse); - --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse); - --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse); - --pf-t--global--icon--color--status--on-success--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--on-warning--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse); - --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse); - --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse); - --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse); - --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); - --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default); - --pf-t--global--icon--color--status--warning--active: var(--pf-t--global--color--status--warning--active); - --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); - --pf-t--global--icon--color--status--custom--active: var(--pf-t--global--color--status--custom--active); - --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--success--active: var(--pf-t--global--color--status--success--active); - --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default); - --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); - --pf-t--global--icon--color--status--danger--active: var(--pf-t--global--color--status--danger--active); - --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover); - --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default); - --pf-t--global--icon--color--status--info--active: var(--pf-t--global--color--status--info--active); - --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); + --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover); + --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); + --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover); + --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default); + --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-cyan--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-cyan--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-cyan--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-gold--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-gold--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-gold--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--nonstatus--on-gold--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--nonstatus--on-gold--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--nonstatus--on-cyan--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--nonstatus--on-cyan--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular); - --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default); + --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--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-custom--default: 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--hover: var(--pf-t--global--color--status--custom--hover); + --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); + --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover); + --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); + --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover); + --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked); --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover); - --pf-t--global--icon--color--favorite--active: var(--pf-t--global--color--favorite--active); + --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default); + --pf-t--global--icon--color--on-brand--clicked: 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--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked); + --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover); + --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default); + --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg); + --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default); + --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm); --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6); --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5); --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4); --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3); --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2); --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1); - --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg); - --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default); - --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm); + --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default); } diff --git a/packages/module/build/css/_tokens-palette.scss b/packages/module/build/css/_tokens-palette.scss index 03bd667..08dc0d9 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, 14 Feb 2024 00:59:20 GMT + * Generated on Tue, 20 Feb 2024 01:08:05 GMT */ :root { diff --git a/packages/module/tokens/dark/base.dark.json b/packages/module/tokens/dark/base.dark.json index 7bf1382..f5e90dc 100644 --- a/packages/module/tokens/dark/base.dark.json +++ b/packages/module/tokens/dark/base.dark.json @@ -6,7 +6,7 @@ "color": { "100": { "type": "color", - "value": "{color.black}" + "value": "{color.gray.95}" }, "200": { "type": "color", @@ -24,6 +24,10 @@ "type": "color", "value": "rgba(21, 21, 21, 0.8000)" }, + "600": { + "type": "color", + "value": "rgba(199, 199, 199, 0.1500)" + }, "highlight": { "100": { "type": "color", @@ -325,6 +329,14 @@ "value": "{color.gray.90}" } } + }, + "box-shadow": { + "color": { + "100": { + "type": "color", + "value": "rgba(0, 0, 0, 0.5000)" + } + } } } } diff --git a/packages/module/tokens/dark/semantic.dark.json b/packages/module/tokens/dark/semantic.dark.json index 5c2f975..27857fb 100644 --- a/packages/module/tokens/dark/semantic.dark.json +++ b/packages/module/tokens/dark/semantic.dark.json @@ -38,11 +38,11 @@ }, "hover": { "type": "color", - "value": "{global.background.color.action.plain.hover}" + "value": "{global.dark.background.color.200}" }, "clicked": { "type": "color", - "value": "{global.background.color.action.plain.hover}" + "value": "{global.dark.background.color.200}" } }, "action": { @@ -53,11 +53,11 @@ }, "hover": { "type": "color", - "value": "{global.dark.background.color.200}" + "value": "{global.dark.background.color.600}" }, "clicked": { "type": "color", - "value": "{global.dark.background.color.200}" + "value": "{global.dark.background.color.600}" }, "alt": { "hover": { @@ -171,13 +171,13 @@ "type": "color", "value": "{global.color.status.danger.default}" }, - "clicked": { - "type": "color", - "value": "{global.color.status.danger.clicked}" - }, "hover": { "type": "color", "value": "{global.color.status.danger.hover}" + }, + "clicked": { + "type": "color", + "value": "{global.color.status.danger.clicked}" } } }, @@ -1354,6 +1354,22 @@ } } } + }, + "box-shadow": { + "color": { + "sm": { + "type": "color", + "value": "{global.dark.box-shadow.color.100}" + }, + "md": { + "type": "color", + "value": "{global.dark.box-shadow.color.100}" + }, + "lg": { + "type": "color", + "value": "{global.dark.box-shadow.color.100}" + } + } } } } \ No newline at end of file diff --git a/packages/module/tokens/default/base.dimension.json b/packages/module/tokens/default/base.dimension.json index 570222a..41f61a0 100644 --- a/packages/module/tokens/default/base.dimension.json +++ b/packages/module/tokens/default/base.dimension.json @@ -166,6 +166,88 @@ "type": "number", "value": 600 } + }, + "box-shadow": { + "X": { + "100": { + "type": "number", + "value": -8 + }, + "200": { + "type": "number", + "value": -4 + }, + "300": { + "type": "number", + "value": -1 + }, + "400": { + "type": "number", + "value": 0 + }, + "500": { + "type": "number", + "value": 1 + }, + "600": { + "type": "number", + "value": 4 + }, + "700": { + "type": "number", + "value": 8 + } + }, + "Y": { + "100": { + "type": "number", + "value": -8 + }, + "200": { + "type": "number", + "value": -4 + }, + "300": { + "type": "number", + "value": -1 + }, + "400": { + "type": "number", + "value": 0 + }, + "500": { + "type": "number", + "value": 1 + }, + "600": { + "type": "number", + "value": 4 + }, + "700": { + "type": "number", + "value": 8 + } + }, + "blur": { + "100": { + "type": "number", + "value": 2 + }, + "200": { + "type": "number", + "value": 8 + }, + "300": { + "type": "number", + "value": 24 + } + }, + "spread": { + "100": { + "type": "number", + "value": 0 + } + } } } } \ No newline at end of file diff --git a/packages/module/tokens/default/base.json b/packages/module/tokens/default/base.json index 795b90c..1096d00 100644 --- a/packages/module/tokens/default/base.json +++ b/packages/module/tokens/default/base.json @@ -23,6 +23,10 @@ "type": "color", "value": "rgba(21, 21, 21, 0.2000)" }, + "600": { + "type": "color", + "value": "rgba(199, 199, 199, 0.2500)" + }, "highlight": { "100": { "type": "color", @@ -324,6 +328,18 @@ "value": "{color.white}" } } + }, + "box-shadow": { + "color": { + "100": { + "type": "color", + "value": "rgba(0, 0, 0, 0.1600)" + }, + "200": { + "type": "color", + "value": "rgba(0, 0, 0, 0.1200)" + } + } } } } \ No newline at end of file diff --git a/packages/module/tokens/default/chart.json b/packages/module/tokens/default/chart.json index a8c885a..ff59d5e 100644 --- a/packages/module/tokens/default/chart.json +++ b/packages/module/tokens/default/chart.json @@ -441,7 +441,7 @@ } } }, - "Multi-colored-ordered": { + "multi-colored-ordered": { "colorscale": { "100": { "type": "color", diff --git a/packages/module/tokens/default/semantic.dimension.json b/packages/module/tokens/default/semantic.dimension.json index 37df421..b20b26a 100644 --- a/packages/module/tokens/default/semantic.dimension.json +++ b/packages/module/tokens/default/semantic.dimension.json @@ -29,6 +29,10 @@ } }, "width": { + "regular": { + "type": "number", + "value": "{global.border.width.100}" + }, "divider": { "default": { "type": "number", @@ -43,10 +47,6 @@ "value": "{global.border.width.100}" } }, - "regular": { - "type": "number", - "value": "{global.border.width.100}" - }, "strong": { "type": "number", "value": "{global.border.width.200}" @@ -197,21 +197,11 @@ "type": "number", "value": "{global.icon.size.400}" }, + "3xl": { + "type": "number", + "value": "{global.icon.size.500}" + }, "font": { - "body": { - "sm": { - "type": "number", - "value": "{global.font.size.body.sm}" - }, - "default": { - "type": "number", - "value": "{global.font.size.body.default}" - }, - "lg": { - "type": "number", - "value": "{global.font.size.body.lg}" - } - }, "heading": { "h1": { "type": "number", @@ -238,6 +228,20 @@ "value": "{global.font.size.heading.h6}" } }, + "body": { + "sm": { + "type": "number", + "value": "{global.font.size.body.sm}" + }, + "default": { + "type": "number", + "value": "{global.font.size.body.default}" + }, + "lg": { + "type": "number", + "value": "{global.font.size.body.lg}" + } + }, "xs": { "type": "number", "value": "{global.font.size.xs}" @@ -270,10 +274,6 @@ "type": "number", "value": "{global.font.size.4xl}" } - }, - "3xl": { - "type": "number", - "value": "{global.icon.size.500}" } } }, @@ -378,6 +378,172 @@ "type": "number", "value": "{global.Zindex.600}" } + }, + "box-shadow": { + "X": { + "sm": { + "default": { + "type": "number", + "value": "{global.box-shadow.X.400}" + }, + "top": { + "type": "number", + "value": "{global.box-shadow.X.400}" + }, + "bottom": { + "type": "number", + "value": "{global.box-shadow.X.400}" + }, + "left": { + "type": "number", + "value": "{global.box-shadow.X.300}" + }, + "right": { + "type": "number", + "value": "{global.box-shadow.X.500}" + } + }, + "md": { + "default": { + "type": "number", + "value": "{global.box-shadow.X.400}" + }, + "top": { + "type": "number", + "value": "{global.box-shadow.X.400}" + }, + "bottom": { + "type": "number", + "value": "{global.box-shadow.X.400}" + }, + "left": { + "type": "number", + "value": "{global.box-shadow.X.200}" + }, + "right": { + "type": "number", + "value": "{global.box-shadow.X.600}" + } + }, + "lg": { + "default": { + "type": "number", + "value": "{global.box-shadow.X.400}" + }, + "top": { + "type": "number", + "value": "{global.box-shadow.X.400}" + }, + "bottom": { + "type": "number", + "value": "{global.box-shadow.X.400}" + }, + "left": { + "type": "number", + "value": "{global.box-shadow.X.100}" + }, + "right": { + "type": "number", + "value": "{global.box-shadow.X.700}" + } + } + }, + "Y": { + "sm": { + "default": { + "type": "number", + "value": "{global.box-shadow.Y.500}" + }, + "top": { + "type": "number", + "value": "{global.box-shadow.Y.300}" + }, + "bottom": { + "type": "number", + "value": "{global.box-shadow.Y.500}" + }, + "left": { + "type": "number", + "value": "{global.box-shadow.Y.400}" + }, + "right": { + "type": "number", + "value": "{global.box-shadow.Y.400}" + } + }, + "md": { + "default": { + "type": "number", + "value": "{global.box-shadow.Y.600}" + }, + "top": { + "type": "number", + "value": "{global.box-shadow.Y.200}" + }, + "bottom": { + "type": "number", + "value": "{global.box-shadow.Y.600}" + }, + "left": { + "type": "number", + "value": "{global.box-shadow.Y.400}" + }, + "right": { + "type": "number", + "value": "{global.box-shadow.Y.400}" + } + }, + "lg": { + "default": { + "type": "number", + "value": "{global.box-shadow.Y.700}" + }, + "top": { + "type": "number", + "value": "{global.box-shadow.Y.100}" + }, + "bottom": { + "type": "number", + "value": "{global.box-shadow.Y.700}" + }, + "left": { + "type": "number", + "value": "{global.box-shadow.Y.400}" + }, + "right": { + "type": "number", + "value": "{global.box-shadow.Y.400}" + } + } + }, + "blur": { + "sm": { + "type": "number", + "value": "{global.box-shadow.blur.100}" + }, + "md": { + "type": "number", + "value": "{global.box-shadow.blur.200}" + }, + "lg": { + "type": "number", + "value": "{global.box-shadow.blur.300}" + } + }, + "spread": { + "sm": { + "type": "number", + "value": "{global.box-shadow.spread.100}" + }, + "md": { + "type": "number", + "value": "{global.box-shadow.spread.100}" + }, + "lg": { + "type": "number", + "value": "{global.box-shadow.spread.100}" + } + } } } } \ No newline at end of file diff --git a/packages/module/tokens/default/semantic.json b/packages/module/tokens/default/semantic.json index d2e28a2..f92eb55 100644 --- a/packages/module/tokens/default/semantic.json +++ b/packages/module/tokens/default/semantic.json @@ -1,323 +1,470 @@ + { "global": { - "color": { - "nonstatus": { - "purple": { - "active": { + "background": { + "color": { + "primary": { + "default": { "type": "color", - "value": "{global.color.nonstatus.purple.200}" + "value": "{global.background.color.100}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.purple.200}" + "value": "{global.background.color.200}" }, + "clicked": { + "type": "color", + "value": "{global.background.color.200}" + } + }, + "secondary": { "default": { "type": "color", - "value": "{global.color.nonstatus.purple.100}" + "value": "{global.background.color.200}" + }, + "hover": { + "type": "color", + "value": "{global.background.color.300}" + }, + "clicked": { + "type": "color", + "value": "{global.background.color.300}" } }, - "green": { - "active": { + "floating": { + "default": { "type": "color", - "value": "{global.color.nonstatus.green.200}" + "value": "{global.background.color.100}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.green.200}" + "value": "{global.background.color.200}" }, + "clicked": { + "type": "color", + "value": "{global.background.color.200}" + } + }, + "action": { + "plain": { + "default": { + "type": "color", + "value": "rgba(255, 255, 255, 0.0000)" + }, + "hover": { + "type": "color", + "value": "{global.background.color.600}" + }, + "clicked": { + "type": "color", + "value": "{global.background.color.600}" + }, + "alt": { + "hover": { + "type": "color", + "value": "{global.background.color.100}" + }, + "clicked": { + "type": "color", + "value": "{global.background.color.100}" + } + } + } + }, + "control": { "default": { "type": "color", - "value": "{global.color.nonstatus.green.100}" + "value": "{global.background.color.primary.default}" } }, - "gold": { - "active": { + "highlight": { + "default": { "type": "color", - "value": "{global.color.nonstatus.gold.200}" + "value": "{global.background.color.highlight.100}" + }, + "clicked": { + "type": "color", + "value": "{global.background.color.highlight.200}" + } + }, + "inverse": { + "default": { + "type": "color", + "value": "{global.background.color.400}" + } + }, + "disabled": { + "default": { + "type": "color", + "value": "{global.color.disabled.100}" + } + }, + "backdrop": { + "default": { + "type": "color", + "value": "{global.background.color.500}" + } + } + } + }, + "color": { + "brand": { + "default": { + "type": "color", + "value": "{global.color.brand.200}" + }, + "hover": { + "type": "color", + "value": "{global.color.brand.300}" + }, + "clicked": { + "type": "color", + "value": "{global.color.brand.300}" + } + }, + "favorite": { + "default": { + "type": "color", + "value": "{global.color.favorite.100}" + }, + "hover": { + "type": "color", + "value": "{global.color.favorite.200}" + }, + "clicked": { + "type": "color", + "value": "{global.color.favorite.200}" + } + }, + "status": { + "success": { + "default": { + "type": "color", + "value": "{global.color.status.success.100}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.gold.200}" + "value": "{global.color.status.success.200}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.nonstatus.gold.100}" + "value": "{global.color.status.success.200}" } }, - "orange": { - "active": { + "unread": { + "default": { + "default": { + "type": "color", + "value": "{global.color.brand.default}" + }, + "hover": { + "type": "color", + "value": "{global.color.brand.hover}" + }, + "clicked": { + "type": "color", + "value": "{global.color.brand.clicked}" + } + }, + "attention": { + "default": { + "type": "color", + "value": "{global.color.status.danger.default}" + }, + "hover": { + "type": "color", + "value": "{global.color.status.danger.hover}" + }, + "clicked": { + "type": "color", + "value": "{global.color.status.danger.clicked}" + } + } + }, + "warning": { + "default": { "type": "color", - "value": "{global.color.nonstatus.orange.200}" + "value": "{global.color.status.warning.100}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.orange.200}" + "value": "{global.color.status.warning.200}" }, + "clicked": { + "type": "color", + "value": "{global.color.status.warning.200}" + } + }, + "danger": { "default": { "type": "color", - "value": "{global.color.nonstatus.orange.100}" + "value": "{global.color.status.danger.100}" + }, + "hover": { + "type": "color", + "value": "{global.color.status.danger.200}" + }, + "clicked": { + "type": "color", + "value": "{global.color.status.danger.200}" } }, - "orangered": { - "active": { + "info": { + "default": { "type": "color", - "value": "{global.color.nonstatus.orangered.200}" + "value": "{global.color.status.info.100}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.orangered.200}" + "value": "{global.color.status.info.200}" }, + "clicked": { + "type": "color", + "value": "{global.color.status.info.200}" + } + }, + "custom": { "default": { "type": "color", - "value": "{global.color.nonstatus.orangered.100}" + "value": "{global.color.status.custom.100}" + }, + "hover": { + "type": "color", + "value": "{global.color.status.custom.200}" + }, + "clicked": { + "type": "color", + "value": "{global.color.status.custom.200}" } }, + "read": { + "on-secondary": { + "type": "color", + "value": "{global.background.color.control.default}" + }, + "on-primary": { + "type": "color", + "value": "{global.background.color.secondary.default}" + } + } + }, + "nonstatus": { "red": { - "active": { + "default": { "type": "color", - "value": "{global.color.nonstatus.red.200}" + "value": "{global.color.nonstatus.red.100}" }, "hover": { "type": "color", "value": "{global.color.nonstatus.red.200}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.nonstatus.red.100}" + "value": "{global.color.nonstatus.red.200}" } }, - "blue": { - "active": { + "orange": { + "default": { "type": "color", - "value": "{global.color.nonstatus.blue.200}" + "value": "{global.color.nonstatus.orange.100}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.blue.200}" + "value": "{global.color.nonstatus.orange.200}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.nonstatus.blue.100}" + "value": "{global.color.nonstatus.orange.200}" } }, - "cyan": { - "active": { + "orangered": { + "default": { "type": "color", - "value": "{global.color.nonstatus.cyan.200}" + "value": "{global.color.nonstatus.orangered.100}" + }, + "hover": { + "type": "color", + "value": "{global.color.nonstatus.orangered.200}" }, + "clicked": { + "type": "color", + "value": "{global.color.nonstatus.orangered.200}" + } + }, + "gold": { "default": { "type": "color", - "value": "{global.color.nonstatus.cyan.100}" + "value": "{global.color.nonstatus.gold.100}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.cyan.200}" + "value": "{global.color.nonstatus.gold.200}" + }, + "clicked": { + "type": "color", + "value": "{global.color.nonstatus.gold.200}" } }, - "gray": { - "active": { + "green": { + "default": { "type": "color", - "value": "{global.color.nonstatus.gray.200}" + "value": "{global.color.nonstatus.green.100}" + }, + "hover": { + "type": "color", + "value": "{global.color.nonstatus.green.200}" }, + "clicked": { + "type": "color", + "value": "{global.color.nonstatus.green.200}" + } + }, + "cyan": { "default": { "type": "color", - "value": "{global.color.nonstatus.gray.100}" + "value": "{global.color.nonstatus.cyan.100}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.gray.200}" + "value": "{global.color.nonstatus.cyan.200}" + }, + "clicked": { + "type": "color", + "value": "{global.color.nonstatus.cyan.200}" } - } - }, - "favorite": { - "active": { - "type": "color", - "value": "{global.color.favorite.200}" }, - "hover": { - "type": "color", - "value": "{global.color.favorite.200}" - }, - "default": { - "type": "color", - "value": "{global.color.favorite.100}" - } - }, - "status": { - "info": { - "active": { + "blue": { + "default": { "type": "color", - "value": "{global.color.status.info.200}" + "value": "{global.color.nonstatus.blue.100}" }, "hover": { "type": "color", - "value": "{global.color.status.info.200}" + "value": "{global.color.nonstatus.blue.200}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.status.info.100}" + "value": "{global.color.nonstatus.blue.200}" } }, - "danger": { - "active": { + "purple": { + "default": { "type": "color", - "value": "{global.color.status.danger.200}" + "value": "{global.color.nonstatus.purple.100}" }, "hover": { "type": "color", - "value": "{global.color.status.danger.200}" + "value": "{global.color.nonstatus.purple.200}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.status.danger.100}" + "value": "{global.color.nonstatus.purple.200}" } }, - "warning": { + "gray": { "default": { "type": "color", - "value": "{global.color.status.warning.100}" + "value": "{global.color.nonstatus.gray.100}" }, - "active": { + "hover": { "type": "color", - "value": "{global.color.status.warning.200}" + "value": "{global.color.nonstatus.gray.200}" }, - "hover": { + "clicked": { "type": "color", - "value": "{global.color.status.warning.200}" + "value": "{global.color.nonstatus.gray.200}" } - }, - "success": { - "active": { + } + } + }, + "icon": { + "color": { + "brand": { + "default": { "type": "color", - "value": "{global.color.status.success.200}" + "value": "{global.color.brand.default}" }, "hover": { "type": "color", - "value": "{global.color.status.success.200}" + "value": "{global.color.brand.hover}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.status.success.100}" + "value": "{global.color.brand.clicked}" } }, - "custom": { - "active": { + "on-brand": { + "default": { "type": "color", - "value": "{global.color.status.custom.200}" + "value": "{global.icon.color.inverse}" }, "hover": { "type": "color", - "value": "{global.color.status.custom.200}" + "value": "{global.icon.color.inverse}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.status.custom.100}" + "value": "{global.icon.color.inverse}" } - } - }, - "brand": { - "active": { - "type": "color", - "value": "{global.color.brand.300}" - }, - "hover": { - "type": "color", - "value": "{global.color.brand.300}" }, - "default": { - "type": "color", - "value": "{global.color.brand.200}" - } - } - }, - "icon": { - "color": { "favorite": { - "active": { + "default": { "type": "color", - "value": "{global.color.favorite.active}" + "value": "{global.color.favorite.default}" }, "hover": { "type": "color", "value": "{global.color.favorite.hover}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.favorite.default}" + "value": "{global.color.favorite.clicked}" } }, - "nonstatus": { - "on-gray": { - "hover": { - "type": "color", - "value": "{global.icon.color.regular}" - }, + "status": { + "success": { "default": { "type": "color", - "value": "{global.icon.color.regular}" - } - }, - "on-purple": { - "hover": { - "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.status.success.default}" }, - "default": { - "type": "color", - "value": "{global.icon.color.regular}" - } - }, - "on-cyan": { "hover": { "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.status.success.hover}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.status.success.clicked}" } }, - "on-green": { - "hover": { - "type": "color", - "value": "{global.icon.color.regular}" - }, + "on-success": { "default": { "type": "color", "value": "{global.icon.color.regular}" - } - }, - "on-gold": { + }, "hover": { "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.icon.color.inverse}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.icon.color.inverse}" } }, - "on-red": { + "warning": { "default": { "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.status.warning.200}" }, "hover": { "type": "color", - "value": "{global.icon.color.regular}" - } - }, - "on-blue": { - "default": { - "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.status.warning.300}" }, - "hover": { + "clicked": { "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.status.warning.300}" } }, - "on-orange": { + "on-warning": { "default": { "type": "color", "value": "{global.icon.color.regular}" @@ -325,111 +472,83 @@ "hover": { "type": "color", "value": "{global.icon.color.regular}" - } - }, - "on-orangered": { - "default": { - "type": "color", - "value": "{global.icon.color.regular}" }, - "hover": { + "clicked": { "type": "color", "value": "{global.icon.color.regular}" } - } - }, - "status": { - "info": { - "active": { - "type": "color", - "value": "{global.color.status.info.active}" - }, - "default": { - "type": "color", - "value": "{global.color.status.info.default}" - }, - "hover": { - "type": "color", - "value": "{global.color.status.info.hover}" - } }, "danger": { - "active": { + "default": { "type": "color", - "value": "{global.color.status.danger.active}" + "value": "{global.color.status.danger.default}" }, "hover": { "type": "color", "value": "{global.color.status.danger.hover}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.status.danger.default}" + "value": "{global.color.status.danger.clicked}" } }, - "success": { - "active": { + "on-danger": { + "default": { "type": "color", - "value": "{global.color.status.success.active}" + "value": "{global.icon.color.regular}" }, "hover": { "type": "color", - "value": "{global.color.status.success.hover}" + "value": "{global.icon.color.inverse}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.status.success.default}" + "value": "{global.icon.color.inverse}" } }, - "custom": { - "active": { + "info": { + "default": { "type": "color", - "value": "{global.color.status.custom.active}" + "value": "{global.color.status.info.default}" }, "hover": { "type": "color", - "value": "{global.color.status.custom.hover}" + "value": "{global.color.status.info.hover}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.status.custom.default}" + "value": "{global.color.status.info.clicked}" } }, - "warning": { - "active": { - "type": "color", - "value": "{global.color.status.warning.active}" - }, + "on-info": { "default": { "type": "color", - "value": "{global.color.status.warning.default}" + "value": "{global.icon.color.inverse}" }, - "hover": { - "type": "color", - "value": "{global.color.status.warning.hover}" - } - }, - "on-info": { "hover": { "type": "color", "value": "{global.icon.color.inverse}" }, - "default": { + "clicked": { "type": "color", "value": "{global.icon.color.inverse}" } }, - "on-custom": { + "custom": { + "default": { + "type": "color", + "value": "{global.color.status.custom.default}" + }, "hover": { "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.status.custom.hover}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.status.custom.clicked}" } }, - "on-warning": { + "on-custom": { "default": { "type": "color", "value": "{global.icon.color.regular}" @@ -437,313 +556,471 @@ "hover": { "type": "color", "value": "{global.icon.color.inverse}" - } - }, - "on-success": { - "default": { - "type": "color", - "value": "{global.icon.color.inverse}" }, - "hover": { + "clicked": { "type": "color", "value": "{global.icon.color.inverse}" } }, - "on-danger": { - "default": { - "type": "color", - "value": "{global.icon.color.inverse}" + "unread": { + "on-default": { + "default": { + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "hover": { + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "clicked": { + "type": "color", + "value": "{global.icon.color.inverse}" + } }, - "hover": { - "type": "color", - "value": "{global.icon.color.inverse}" + "on-attention": { + "default": { + "type": "color", + "value": "{global.icon.color.regular}" + }, + "hover": { + "type": "color", + "value": "{global.icon.color.inverse}" + }, + "clicked": { + "type": "color", + "value": "{global.icon.color.inverse}" + } } } }, + "regular": { + "type": "color", + "value": "{global.icon.color.100}" + }, "subtle": { "type": "color", "value": "{global.icon.color.200}" }, - "brand": { - "active": { - "type": "color", - "value": "{global.color.brand.active}" - }, - "default": { - "type": "color", - "value": "{global.color.brand.default}" - }, - "hover": { - "type": "color", - "value": "{global.color.brand.hover}" - } - }, "inverse": { "type": "color", "value": "{global.icon.color.300}" }, "disabled": { "type": "color", - "value": "{global.color.disabled.300}" + "value": "{global.color.disabled.100}" }, - "regular": { + "on-disabled": { "type": "color", - "value": "{global.icon.color.100}" + "value": "{global.color.disabled.300}" }, - "on-brand": { - "default": { - "type": "color", - "value": "{global.icon.color.inverse}" - }, - "hover": { - "type": "color", - "value": "{global.icon.color.inverse}" - } - } - } - }, - "text": { - "color": { "nonstatus": { - "on-gray": { + "on-red": { + "default": { + "type": "color", + "value": "{global.icon.color.regular}" + }, "hover": { "type": "color", "value": "{global.icon.color.regular}" }, + "clicked": { + "type": "color", + "value": "{global.icon.color.regular}" + } + }, + "on-orangered": { "default": { "type": "color", "value": "{global.icon.color.regular}" + }, + "hover": { + "type": "color", + "value": "{global.icon.color.regular}" + }, + "clicked": { + "type": "color", + "value": "{global.icon.color.regular}" } }, - "on-purple": { + "on-orange": { + "default": { + "type": "color", + "value": "{global.icon.color.regular}" + }, "hover": { "type": "color", "value": "{global.icon.color.regular}" }, + "clicked": { + "type": "color", + "value": "{global.icon.color.regular}" + } + }, + "on-gold": { "default": { "type": "color", "value": "{global.icon.color.regular}" + }, + "hover": { + "type": "color", + "value": "{global.icon.color.regular}" + }, + "clicked": { + "type": "color", + "value": "{global.icon.color.regular}" } }, - "on-cyan": { + "on-green": { + "default": { + "type": "color", + "value": "{global.icon.color.regular}" + }, "hover": { "type": "color", "value": "{global.icon.color.regular}" }, - "default": { + "clicked": { "type": "color", "value": "{global.icon.color.regular}" } }, - "on-orange": { + "on-cyan": { + "default": { + "type": "color", + "value": "{global.icon.color.regular}" + }, "hover": { "type": "color", "value": "{global.icon.color.regular}" }, - "default": { + "clicked": { "type": "color", "value": "{global.icon.color.regular}" } }, - "on-orangered": { + "on-blue": { + "default": { + "type": "color", + "value": "{global.icon.color.regular}" + }, "hover": { "type": "color", "value": "{global.icon.color.regular}" }, - "default": { + "clicked": { "type": "color", "value": "{global.icon.color.regular}" } }, - "on-red": { + "on-purple": { + "default": { + "type": "color", + "value": "{global.icon.color.regular}" + }, "hover": { "type": "color", "value": "{global.icon.color.regular}" }, - "default": { + "clicked": { "type": "color", "value": "{global.icon.color.regular}" } }, - "on-blue": { + "on-gray": { + "default": { + "type": "color", + "value": "{global.icon.color.regular}" + }, "hover": { "type": "color", "value": "{global.icon.color.regular}" }, - "default": { + "clicked": { "type": "color", "value": "{global.icon.color.regular}" } + } + } + } + }, + "border": { + "color": { + "brand": { + "default": { + "type": "color", + "value": "{global.color.brand.default}" }, - "on-green": { + "hover": { + "type": "color", + "value": "{global.color.brand.hover}" + }, + "clicked": { + "type": "color", + "value": "{global.color.brand.clicked}" + } + }, + "status": { + "success": { "default": { "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.status.success.default}" }, "hover": { "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.status.success.hover}" + }, + "clicked": { + "type": "color", + "value": "{global.color.status.success.clicked}" } }, - "on-gold": { + "warning": { "default": { "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.status.warning.200}" }, "hover": { "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.status.warning.300}" + }, + "clicked": { + "type": "color", + "value": "{global.color.status.warning.300}" } - } - }, - "status": { + }, "danger": { + "default": { + "type": "color", + "value": "{global.color.status.danger.default}" + }, "hover": { "type": "color", "value": "{global.color.status.danger.hover}" }, + "clicked": { + "type": "color", + "value": "{global.color.status.danger.clicked}" + } + }, + "info": { "default": { "type": "color", - "value": "{global.color.status.danger.default}" + "value": "{global.color.status.info.default}" + }, + "hover": { + "type": "color", + "value": "{global.color.status.info.hover}" }, - "active": { + "clicked": { "type": "color", - "value": "{global.color.status.danger.active}" + "value": "{global.color.status.info.clicked}" } }, - "warning": { - "active": { + "custom": { + "default": { "type": "color", - "value": "{global.color.status.warning.active}" + "value": "{global.color.status.custom.default}" }, "hover": { "type": "color", - "value": "{global.color.status.warning.hover}" + "value": "{global.color.status.custom.hover}" }, + "clicked": { + "type": "color", + "value": "{global.color.status.custom.clicked}" + } + } + }, + "default": { + "type": "color", + "value": "{global.border.color.100}" + }, + "hover": { + "type": "color", + "value": "{global.color.brand.100}" + }, + "clicked": { + "type": "color", + "value": "{global.color.brand.200}" + }, + "disabled": { + "type": "color", + "value": "{global.background.color.disabled.default}" + }, + "alt": { + "type": "color", + "value": "{global.background.color.primary.default}" + }, + "nonstatus": { + "red": { "default": { "type": "color", - "value": "{global.color.status.warning.default}" + "value": "{global.color.nonstatus.red.200}" + }, + "hover": { + "type": "color", + "value": "{global.color.nonstatus.red.300}" + }, + "clicked": { + "type": "color", + "value": "{global.color.nonstatus.red.300}" } }, - "success": { - "active": { + "orangered": { + "default": { "type": "color", - "value": "{global.color.status.success.active}" + "value": "{global.color.nonstatus.orangered.200}" }, "hover": { "type": "color", - "value": "{global.color.status.success.hover}" + "value": "{global.color.nonstatus.orangered.300}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.status.success.default}" + "value": "{global.color.nonstatus.orangered.300}" } }, - "on-custom": { + "orange": { "default": { "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.nonstatus.orange.200}" }, "hover": { "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.nonstatus.orange.300}" + }, + "clicked": { + "type": "color", + "value": "{global.color.nonstatus.orange.300}" } }, - "on-info": { + "gold": { "default": { "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.nonstatus.gold.200}" }, "hover": { "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.nonstatus.gold.300}" + }, + "clicked": { + "type": "color", + "value": "{global.color.nonstatus.gold.300}" } }, - "on-danger": { + "green": { "default": { "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.nonstatus.green.200}" }, "hover": { "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.nonstatus.green.300}" + }, + "clicked": { + "type": "color", + "value": "{global.color.nonstatus.green.300}" } }, - "info": { - "hover": { + "cyan": { + "default": { "type": "color", - "value": "{global.color.status.info.hover}" + "value": "{global.color.nonstatus.cyan.200}" }, - "active": { + "hover": { "type": "color", - "value": "{global.color.status.info.active}" + "value": "{global.color.nonstatus.cyan.300}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.status.info.default}" + "value": "{global.color.nonstatus.cyan.300}" } }, - "on-warning": { + "blue": { "default": { "type": "color", - "value": "{global.icon.color.regular}" + "value": "{global.color.nonstatus.blue.200}" }, "hover": { "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.nonstatus.blue.300}" + }, + "clicked": { + "type": "color", + "value": "{global.color.nonstatus.blue.300}" } }, - "on-success": { + "purple": { "default": { "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.nonstatus.purple.200}" }, "hover": { "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.nonstatus.purple.300}" + }, + "clicked": { + "type": "color", + "value": "{global.color.nonstatus.purple.300}" } }, - "custom": { + "gray": { "default": { "type": "color", - "value": "{global.color.status.custom.default}" + "value": "{global.color.nonstatus.gray.200}" }, "hover": { "type": "color", - "value": "{global.color.status.custom.hover}" + "value": "{global.color.nonstatus.gray.300}" }, - "active": { + "clicked": { "type": "color", - "value": "{global.color.status.custom.active}" + "value": "{global.color.nonstatus.gray.300}" } } - }, - "brand": { - "active": { + } + } + }, + "text": { + "color": { + "link": { + "default": { "type": "color", - "value": "{global.color.brand.active}" + "value": "{global.text.color.link.100}" }, "hover": { "type": "color", - "value": "{global.color.brand.hover}" + "value": "{global.text.color.link.200}" }, - "default": { + "visited": { "type": "color", - "value": "{global.color.brand.default}" + "value": "{global.text.color.link.300}" } }, - "link": { - "visited": { + "regular": { + "type": "color", + "value": "{global.text.color.100}" + }, + "subtle": { + "type": "color", + "value": "{global.text.color.200}" + }, + "inverse": { + "type": "color", + "value": "{global.text.color.300}" + }, + "on-brand": { + "default": { "type": "color", - "value": "{global.text.color.link.300}" + "value": "{global.text.color.inverse}" }, "hover": { "type": "color", - "value": "{global.text.color.link.200}" + "value": "{global.text.color.inverse}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.text.color.link.100}" + "value": "{global.text.color.inverse}" } }, "placeholder": { @@ -751,358 +1028,346 @@ "value": "{global.text.color.subtle}" }, "disabled": { - "light": { - "type": "color", - "value": "{global.color.disabled.100}" - }, - "default": { - "type": "color", - "value": "{global.color.disabled.300}" - } - }, - "inverse": { - "type": "color", - "value": "{global.text.color.300}" - }, - "subtle": { "type": "color", - "value": "{global.text.color.200}" + "value": "{global.color.disabled.100}" }, - "regular": { + "on-disabled": { "type": "color", - "value": "{global.text.color.100}" + "value": "{global.color.disabled.300}" }, - "on-brand": { + "brand": { "default": { "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.brand.default}" }, "hover": { "type": "color", - "value": "{global.icon.color.inverse}" + "value": "{global.color.brand.hover}" + }, + "clicked": { + "type": "color", + "value": "{global.color.brand.clicked}" } - } - } - }, - "border": { - "color": { - "nonstatus": { - "gray": { - "active": { + }, + "required": { + "type": "color", + "value": "{global.text.color.400}" + }, + "status": { + "success": { + "default": { "type": "color", - "value": "{global.color.nonstatus.gray.300}" + "value": "{global.color.status.success.default}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.gray.300}" + "value": "{global.color.status.success.hover}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.nonstatus.gray.200}" + "value": "{global.color.status.success.clicked}" } }, - "purple": { - "active": { + "on-success": { + "default": { "type": "color", - "value": "{global.color.nonstatus.purple.300}" + "value": "{global.text.color.regular}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.purple.300}" + "value": "{global.text.color.inverse}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.nonstatus.purple.200}" + "value": "{global.text.color.inverse}" } }, - "cyan": { + "warning": { "default": { "type": "color", - "value": "{global.color.nonstatus.cyan.200}" + "value": "{global.color.status.warning.200}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.cyan.300}" + "value": "{global.color.status.warning.300}" }, - "active": { + "clicked": { "type": "color", - "value": "{global.color.nonstatus.cyan.300}" + "value": "{global.color.status.warning.300}" } }, - "green": { - "active": { + "on-warning": { + "default": { "type": "color", - "value": "{global.color.nonstatus.green.300}" + "value": "{global.text.color.regular}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.green.300}" + "value": "{global.text.color.regular}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.nonstatus.green.200}" + "value": "{global.text.color.regular}" } }, - "gold": { - "active": { + "danger": { + "default": { "type": "color", - "value": "{global.color.nonstatus.gold.300}" + "value": "{global.color.status.danger.200}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.gold.300}" + "value": "{global.color.status.danger.300}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.nonstatus.gold.200}" + "value": "{global.color.status.danger.300}" } }, - "orange": { - "active": { - "type": "color", - "value": "{global.color.nonstatus.orange.300}" - }, + "on-danger": { "default": { "type": "color", - "value": "{global.color.nonstatus.orange.200}" + "value": "{global.text.color.regular}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.orange.300}" + "value": "{global.text.color.inverse}" + }, + "clicked": { + "type": "color", + "value": "{global.icon.color.inverse}" } }, - "orangered": { + "info": { + "default": { + "type": "color", + "value": "{global.color.status.info.default}" + }, "hover": { "type": "color", - "value": "{global.color.nonstatus.orangered.300}" + "value": "{global.color.status.info.hover}" }, + "clicked": { + "type": "color", + "value": "{global.color.status.info.clicked}" + } + }, + "on-info": { "default": { "type": "color", - "value": "{global.color.nonstatus.orangered.200}" + "value": "{global.text.color.inverse}" }, - "active": { + "hover": { "type": "color", - "value": "{global.color.nonstatus.orangered.300}" + "value": "{global.text.color.inverse}" + }, + "clicked": { + "type": "color", + "value": "{global.text.color.inverse}" } }, - "red": { - "active": { + "custom": { + "default": { "type": "color", - "value": "{global.color.nonstatus.red.300}" + "value": "{global.color.status.custom.default}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.red.300}" + "value": "{global.color.status.custom.hover}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.nonstatus.red.200}" + "value": "{global.color.status.custom.clicked}" } }, - "blue": { - "active": { + "on-custom": { + "default": { "type": "color", - "value": "{global.color.nonstatus.blue.300}" + "value": "{global.text.color.regular}" }, "hover": { "type": "color", - "value": "{global.color.nonstatus.blue.300}" + "value": "{global.text.color.inverse}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.nonstatus.blue.200}" + "value": "{global.text.color.inverse}" + } + }, + "unread": { + "on-default": { + "default": { + "type": "color", + "value": "{global.text.color.inverse}" + }, + "hover": { + "type": "color", + "value": "{global.text.color.inverse}" + }, + "clicked": { + "type": "color", + "value": "{global.text.color.inverse}" + } + }, + "on-attention": { + "default": { + "type": "color", + "value": "{global.text.color.regular}" + }, + "hover": { + "type": "color", + "value": "{global.text.color.inverse}" + }, + "clicked": { + "type": "color", + "value": "{global.text.color.inverse}" + } } } }, - "active": { - "type": "color", - "value": "{global.color.brand.200}" - }, - "status": { - "info": { + "nonstatus": { + "on-red": { "default": { "type": "color", - "value": "{global.color.status.info.default}" + "value": "{global.text.color.regular}" }, "hover": { "type": "color", - "value": "{global.color.status.info.hover}" + "value": "{global.text.color.regular}" }, - "active": { + "clicked": { "type": "color", - "value": "{global.color.status.info.active}" + "value": "{global.text.color.regular}" } }, - "warning": { - "active": { + "on-orangered": { + "default": { "type": "color", - "value": "{global.color.status.warning.active}" + "value": "{global.text.color.regular}" }, "hover": { "type": "color", - "value": "{global.color.status.warning.hover}" + "value": "{global.text.color.regular}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.status.warning.default}" + "value": "{global.text.color.regular}" } }, - "success": { - "active": { + "on-orange": { + "default": { "type": "color", - "value": "{global.color.status.success.active}" + "value": "{global.text.color.regular}" }, "hover": { "type": "color", - "value": "{global.color.status.success.hover}" + "value": "{global.text.color.regular}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.status.success.default}" + "value": "{global.text.color.regular}" } }, - "custom": { - "active": { + "on-gold": { + "default": { "type": "color", - "value": "{global.color.status.custom.active}" + "value": "{global.text.color.regular}" }, "hover": { "type": "color", - "value": "{global.color.status.custom.hover}" + "value": "{global.text.color.regular}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.status.custom.default}" + "value": "{global.text.color.regular}" } }, - "danger": { - "hover": { + "on-green": { + "default": { "type": "color", - "value": "{global.color.status.danger.hover}" + "value": "{global.text.color.regular}" }, - "active": { + "hover": { "type": "color", - "value": "{global.color.status.danger.active}" + "value": "{global.text.color.regular}" }, - "default": { + "clicked": { "type": "color", - "value": "{global.color.status.danger.default}" + "value": "{global.text.color.regular}" } - } - }, - "brand": { - "active": { - "type": "color", - "value": "{global.color.brand.active}" }, - "hover": { - "type": "color", - "value": "{global.color.brand.hover}" - }, - "default": { - "type": "color", - "value": "{global.color.brand.default}" - } - }, - "default": { - "type": "color", - "value": "{global.border.color.100}" - }, - "hover": { - "type": "color", - "value": "{global.color.brand.100}" - } - } - }, - "background": { - "color": { - "action": { - "plain": { + "on-cyan": { "default": { "type": "color", - "value": "rgba(255, 255, 255, 0.0000)" - }, - "alt": { - "hover": { - "type": "color", - "value": "{global.background.color.100}" - } + "value": "{global.text.color.regular}" }, "hover": { "type": "color", - "value": "{global.background.color.200}" + "value": "{global.text.color.regular}" + }, + "clicked": { + "type": "color", + "value": "{global.text.color.regular}" } - } - }, - "floating": { - "selected": { - "type": "color", - "value": "{global.background.color.200}" - }, - "hover": { - "type": "color", - "value": "{global.background.color.200}" - }, - "default": { - "type": "color", - "value": "{global.background.color.100}" - } - }, - "primary": { - "hover": { - "type": "color", - "value": "{global.background.color.200}" }, - "default": { - "type": "color", - "value": "{global.background.color.100}" + "on-blue": { + "default": { + "type": "color", + "value": "{global.text.color.regular}" + }, + "hover": { + "type": "color", + "value": "{global.text.color.regular}" + }, + "clicked": { + "type": "color", + "value": "{global.text.color.regular}" + } }, - "selected": { - "type": "color", - "value": "{global.background.color.200}" - } - }, - "highlight": { - "active": { - "type": "color", - "value": "{global.background.color.highlight.200}" + "on-purple": { + "default": { + "type": "color", + "value": "{global.text.color.regular}" + }, + "hover": { + "type": "color", + "value": "{global.text.color.regular}" + }, + "clicked": { + "type": "color", + "value": "{global.text.color.regular}" + } }, - "default": { - "type": "color", - "value": "{global.background.color.highlight.100}" - } - }, - "control": { - "default": { - "type": "color", - "value": "{global.background.color.primary.default}" - } - }, - "disabled": { - "default": { - "type": "color", - "value": "{global.color.disabled.100}" + "on-gray": { + "default": { + "type": "color", + "value": "{global.text.color.regular}" + }, + "hover": { + "type": "color", + "value": "{global.text.color.regular}" + }, + "clicked": { + "type": "color", + "value": "{global.text.color.regular}" + } } + } + } + }, + "box-shadow": { + "color": { + "sm": { + "type": "color", + "value": "{global.box-shadow.color.100}" }, - "inverse": { - "default": { - "type": "color", - "value": "{global.background.color.400}" - } + "md": { + "type": "color", + "value": "{global.box-shadow.color.200}" }, - "secondary": { - "hover": { - "type": "color", - "value": "{global.background.color.300}" - }, - "default": { - "type": "color", - "value": "{global.background.color.200}" - }, - "selected": { - "type": "color", - "value": "{global.background.color.300}" - } + "lg": { + "type": "color", + "value": "{global.box-shadow.color.200}" } } }