diff --git a/packages/module/build/css/tokens-charts-dark.scss b/packages/module/build/css/tokens-charts-dark.scss index 8c36953..0dac0ea 100644 --- a/packages/module/build/css/tokens-charts-dark.scss +++ b/packages/module/build/css/tokens-charts-dark.scss @@ -1,14 +1,18 @@ // Do not edit directly -// Generated on Thu, 09 May 2024 17:55:04 GMT +// Generated on Thu, 16 May 2024 15:08:07 GMT @mixin pf-v6-tokens { + --pf-t--chart--global--stroke-line-join: round; --pf-t--chart--global--layout--width: 450; --pf-t--chart--global--layout--height: 300; --pf-t--chart--global--layout--padding: 50; - --pf-t--chart--global--label--stroke--width: 0; + --pf-t--chart--global--label--text-anchor: middle; + --pf-t--chart--global--label--stroke: transparent; --pf-t--chart--global--label--margin: 8; --pf-t--chart--global--label--padding: 10; + --pf-t--chart--global--stroke-line-cap: round; + --pf-t--chart--global--letter-spacing: normal; --pf-t--chart--global--FontSize--2xl: 22; --pf-t--chart--global--FontSize--lg: 18; --pf-t--chart--global--FontSize--sm: 14; diff --git a/packages/module/build/css/tokens-charts.scss b/packages/module/build/css/tokens-charts.scss index b5818dd..cdba54b 100644 --- a/packages/module/build/css/tokens-charts.scss +++ b/packages/module/build/css/tokens-charts.scss @@ -1,14 +1,18 @@ // Do not edit directly -// Generated on Thu, 09 May 2024 17:55:04 GMT +// Generated on Thu, 16 May 2024 15:08:07 GMT @mixin pf-v6-tokens { + --pf-t--chart--global--stroke-line-join: round; --pf-t--chart--global--layout--width: 450; --pf-t--chart--global--layout--height: 300; --pf-t--chart--global--layout--padding: 50; - --pf-t--chart--global--label--stroke--width: 0; + --pf-t--chart--global--label--text-anchor: middle; + --pf-t--chart--global--label--stroke: transparent; --pf-t--chart--global--label--margin: 8; --pf-t--chart--global--label--padding: 10; + --pf-t--chart--global--stroke-line-cap: round; + --pf-t--chart--global--letter-spacing: normal; --pf-t--chart--global--FontSize--2xl: 22; --pf-t--chart--global--FontSize--lg: 18; --pf-t--chart--global--FontSize--sm: 14; diff --git a/packages/module/build/css/tokens-dark.scss b/packages/module/build/css/tokens-dark.scss index 7437e76..0f8d564 100644 --- a/packages/module/build/css/tokens-dark.scss +++ b/packages/module/build/css/tokens-dark.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Thu, 09 May 2024 17:55:04 GMT +// Generated on Thu, 16 May 2024 15:08:07 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000); diff --git a/packages/module/build/css/tokens-default.scss b/packages/module/build/css/tokens-default.scss index 17f992b..1018b8a 100644 --- a/packages/module/build/css/tokens-default.scss +++ b/packages/module/build/css/tokens-default.scss @@ -1,15 +1,32 @@ // Do not edit directly -// Generated on Thu, 09 May 2024 17:55:04 GMT +// Generated on Thu, 16 May 2024 15:08:07 GMT @mixin pf-v6-tokens { + --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1); + --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1); + --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2); + --pf-t--global--delay--400: 7000ms; + --pf-t--global--delay--300: 100ms; + --pf-t--global--delay--200: 50ms; + --pf-t--global--delay--100: 0ms; + --pf-t--global--duration--600: 600ms; + --pf-t--global--duration--500: 500ms; + --pf-t--global--duration--400: 400ms; + --pf-t--global--duration--300: 300ms; + --pf-t--global--duration--200: 200ms; + --pf-t--global--duration--100: 100ms; + --pf-t--global--duration--50: 50ms; --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--breakpoint--600: 1450px; + --pf-t--global--breakpoint--550: 1280px; --pf-t--global--breakpoint--500: 1200px; --pf-t--global--breakpoint--400: 992px; + --pf-t--global--breakpoint--350: 960px; --pf-t--global--breakpoint--300: 768px; + --pf-t--global--breakpoint--250: 640px; --pf-t--global--breakpoint--200: 576px; --pf-t--global--breakpoint--100: 0px; --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200); @@ -69,6 +86,20 @@ --pf-t--global--spacer--300: 16px; --pf-t--global--spacer--200: 8px; --pf-t--global--spacer--100: 4px; + --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300); + --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200); + --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100); + --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400); + --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300); + --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200); + --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100); + --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600); + --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500); + --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400); + --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300); + --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200); + --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100); + --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50); --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50); --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60); --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50); @@ -138,6 +169,11 @@ --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--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550); + --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350); + --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300); + --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250); + --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100); --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600); --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500); --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400); @@ -219,10 +255,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); @@ -252,6 +288,18 @@ --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--motion--duration--icon--long: var(--pf-t--global--motion--duration--md); + --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm); + --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs); + --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl); + --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl); + --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg); + --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl); + --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl); + --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg); + --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg); + --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md); + --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm); --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); diff --git a/packages/module/build/css/tokens-palette.scss b/packages/module/build/css/tokens-palette.scss index c8364cb..5c60ae9 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 Thu, 09 May 2024 17:55:04 GMT +// Generated on Thu, 16 May 2024 15:08:07 GMT @mixin pf-v6-tokens { --pf-t--color--red--70: #5f0000; diff --git a/packages/module/tokens/dark/charts.dark.json b/packages/module/tokens/dark/charts.dark.json index 80e85e1..2e25ea2 100644 --- a/packages/module/tokens/dark/charts.dark.json +++ b/packages/module/tokens/dark/charts.dark.json @@ -288,6 +288,14 @@ "value": 22 } }, + "letter-spacing": { + "type": "string", + "value": "normal" + }, + "stroke-line-cap": { + "type": "string", + "value": "round" + }, "label": { "padding": { "type": "number", @@ -301,7 +309,13 @@ "width": { "type": "number", "value": 0 - } + }, + "type": "string", + "value": "transparent" + }, + "text-anchor": { + "type": "string", + "value": "middle" }, "fill": { "type": "color", @@ -321,6 +335,10 @@ "type": "number", "value": 450 } + }, + "stroke-line-join": { + "type": "string", + "value": "round" } }, "theme": { diff --git a/packages/module/tokens/default/base.dimension.json b/packages/module/tokens/default/base.dimension.json index bf31702..1dd9918 100644 --- a/packages/module/tokens/default/base.dimension.json +++ b/packages/module/tokens/default/base.dimension.json @@ -258,10 +258,18 @@ "type": "number", "value": 576 }, + "250": { + "type": "number", + "value": 640 + }, "300": { "type": "number", "value": 768 }, + "350": { + "type": "number", + "value": 960 + }, "400": { "type": "number", "value": 992 @@ -270,6 +278,10 @@ "type": "number", "value": 1200 }, + "550": { + "type": "number", + "value": 1280 + }, "600": { "type": "number", "value": 1450 diff --git a/packages/module/tokens/default/base.motion.json b/packages/module/tokens/default/base.motion.json new file mode 100644 index 0000000..d93710c --- /dev/null +++ b/packages/module/tokens/default/base.motion.json @@ -0,0 +1,67 @@ + +{ + "global": { + "duration": { + "50": { + "type": "number", + "value": 50 + }, + "100": { + "type": "number", + "value": 100 + }, + "200": { + "type": "number", + "value": 200 + }, + "300": { + "type": "number", + "value": 300 + }, + "400": { + "type": "number", + "value": 400 + }, + "500": { + "type": "number", + "value": 500 + }, + "600": { + "type": "number", + "value": 600 + } + }, + "delay": { + "100": { + "type": "number", + "value": 0 + }, + "200": { + "type": "number", + "value": 50 + }, + "300": { + "type": "number", + "value": 100 + }, + "400": { + "type": "number", + "value": 7000 + } + }, + "timing-function": { + "100": { + "type": "string", + "value": "cubic-bezier(.4, 0, .7, .2)" + }, + "200": { + "type": "string", + "value": "cubic-bezier(.4, 0, .2, 1)" + }, + "300": { + "type": "string", + "value": "cubic-bezier(0, 0, .2, 1)" + } + } + } +} \ No newline at end of file diff --git a/packages/module/tokens/default/charts.json b/packages/module/tokens/default/charts.json index a7364ef..8a32eec 100644 --- a/packages/module/tokens/default/charts.json +++ b/packages/module/tokens/default/charts.json @@ -288,6 +288,14 @@ "value": 22 } }, + "letter-spacing": { + "type": "string", + "value": "normal" + }, + "stroke-line-cap": { + "type": "string", + "value": "round" + }, "label": { "padding": { "type": "number", @@ -301,7 +309,13 @@ "width": { "type": "number", "value": 0 - } + }, + "type": "string", + "value": "transparent" + }, + "text-anchor": { + "type": "string", + "value": "middle" }, "fill": { "type": "color", @@ -321,6 +335,10 @@ "type": "number", "value": 450 } + }, + "stroke-line-join": { + "type": "string", + "value": "round" } }, "theme": { diff --git a/packages/module/tokens/default/semantic.dimension.json b/packages/module/tokens/default/semantic.dimension.json index 46cb41a..dfaff55 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}" @@ -597,6 +597,28 @@ "2xl": { "type": "number", "value": "{global.breakpoint.600}" + }, + "height": { + "sm": { + "type": "number", + "value": "{global.breakpoint.100}" + }, + "md": { + "type": "number", + "value": "{global.breakpoint.250}" + }, + "lg": { + "type": "number", + "value": "{global.breakpoint.300}" + }, + "xl": { + "type": "number", + "value": "{global.breakpoint.350}" + }, + "2xl": { + "type": "number", + "value": "{global.breakpoint.550}" + } } } } diff --git a/packages/module/tokens/default/semantic.motion.json b/packages/module/tokens/default/semantic.motion.json new file mode 100644 index 0000000..effb51b --- /dev/null +++ b/packages/module/tokens/default/semantic.motion.json @@ -0,0 +1,125 @@ + +{ + "global": { + "motion": { + "duration": { + "xs": { + "type": "number", + "value": "{global.duration.50}" + }, + "sm": { + "type": "number", + "value": "{global.duration.100}" + }, + "md": { + "type": "number", + "value": "{global.duration.200}" + }, + "lg": { + "type": "number", + "value": "{global.duration.300}" + }, + "xl": { + "type": "number", + "value": "{global.duration.400}" + }, + "2xl": { + "type": "number", + "value": "{global.duration.500}" + }, + "3xl": { + "type": "number", + "value": "{global.duration.600}" + }, + "fade": { + "short": { + "type": "number", + "value": "{global.motion.duration.sm}" + }, + "default": { + "type": "number", + "value": "{global.motion.duration.md}" + }, + "long": { + "type": "number", + "value": "{global.motion.duration.lg}" + } + }, + "slide-out": { + "short": { + "type": "number", + "value": "{global.motion.duration.lg}" + }, + "default": { + "type": "number", + "value": "{global.motion.duration.xl}" + }, + "long": { + "type": "number", + "value": "{global.motion.duration.2xl}" + } + }, + "slide-in": { + "short": { + "type": "number", + "value": "{global.motion.duration.lg}" + }, + "default": { + "type": "number", + "value": "{global.motion.duration.xl}" + }, + "long": { + "type": "number", + "value": "{global.motion.duration.2xl}" + } + }, + "icon": { + "short": { + "type": "number", + "value": "{global.motion.duration.xs}" + }, + "default": { + "type": "number", + "value": "{global.motion.duration.sm}" + }, + "long": { + "type": "number", + "value": "{global.motion.duration.md}" + } + } + }, + "delay": { + "none": { + "type": "number", + "value": "{global.delay.100}" + }, + "short": { + "type": "number", + "value": "{global.delay.200}" + }, + "default": { + "type": "number", + "value": "{global.delay.300}" + }, + "long": { + "type": "number", + "value": "{global.delay.400}" + } + }, + "timing-function": { + "accelerate": { + "type": "number", + "value": "{global.timing-function.100}" + }, + "default": { + "type": "number", + "value": "{global.timing-function.200}" + }, + "decelerate": { + "type": "number", + "value": "{global.timing-function.300}" + } + } + } + } +} \ No newline at end of file