@mirohq/design-system-styles 3.2.16 → 3.2.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +4 -4
- package/dist/main.js.map +1 -1
- package/dist/module.js +4 -4
- package/dist/module.js.map +1 -1
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -23,12 +23,12 @@ var focus = /*#__PURE__*/Object.freeze({
|
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
const fadeInScaled = designSystemStitches.keyframes({
|
|
26
|
-
"0%": { opacity: 0, transform: "scale(0.
|
|
26
|
+
"0%": { opacity: 0, transform: "scale(0.96)" },
|
|
27
27
|
"100%": { opacity: 1, transform: "scale(1)" }
|
|
28
28
|
});
|
|
29
29
|
const fadeOutScaled = designSystemStitches.keyframes({
|
|
30
30
|
"0%": { opacity: 1, transform: "scale(1)" },
|
|
31
|
-
"100%": { opacity: 0, transform: "scale(0.
|
|
31
|
+
"100%": { opacity: 0, transform: "scale(0.96)" }
|
|
32
32
|
});
|
|
33
33
|
const fadeIn = designSystemStitches.keyframes({
|
|
34
34
|
"0%": { opacity: 0 },
|
|
@@ -57,8 +57,8 @@ const floatingAnimation = ({
|
|
|
57
57
|
out: animOut
|
|
58
58
|
}) => ({
|
|
59
59
|
"@media (prefers-reduced-motion: no-preference)": {
|
|
60
|
-
animationDuration: "
|
|
61
|
-
animationTimingFunction: "cubic-bezier(0.
|
|
60
|
+
animationDuration: "300ms",
|
|
61
|
+
animationTimingFunction: "cubic-bezier(0.19, 1, 0.22, 1)",
|
|
62
62
|
willChange: "transform, opacity",
|
|
63
63
|
'&[data-state="open"]': { animationName: animIn },
|
|
64
64
|
'&[data-state="closed"]': { animationName: animOut },
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/focus.ts","../src/animations.ts","../src/floating.ts"],"sourcesContent":["import type { CSS } from '@mirohq/design-system-stitches'\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nexport const css = (style: CSS) => {\n // Manage focus outline for Windows High Contrast Mode\n const styleWithOutline = {\n // use `as any` to workaround TS2742 error\n ...(style as any),\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n }\n\n return {\n '&:focus-visible': styleWithOutline,\n '&[data-focused]': styleWithOutline,\n '&[data-focus-visible]': styleWithOutline,\n }\n}\n","import { keyframes } from '@mirohq/design-system-stitches'\n\nexport const fadeInScaled = keyframes({\n '0%': { opacity: 0, transform: 'scale(0.
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/focus.ts","../src/animations.ts","../src/floating.ts"],"sourcesContent":["import type { CSS } from '@mirohq/design-system-stitches'\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nexport const css = (style: CSS) => {\n // Manage focus outline for Windows High Contrast Mode\n const styleWithOutline = {\n // use `as any` to workaround TS2742 error\n ...(style as any),\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n }\n\n return {\n '&:focus-visible': styleWithOutline,\n '&[data-focused]': styleWithOutline,\n '&[data-focus-visible]': styleWithOutline,\n }\n}\n","import { keyframes } from '@mirohq/design-system-stitches'\n\nexport const fadeInScaled = keyframes({\n '0%': { opacity: 0, transform: 'scale(0.96)' },\n '100%': { opacity: 1, transform: 'scale(1)' },\n})\n\nexport const fadeOutScaled = keyframes({\n '0%': { opacity: 1, transform: 'scale(1)' },\n '100%': { opacity: 0, transform: 'scale(0.96)' },\n})\n\nexport const fadeIn = keyframes({\n '0%': { opacity: 0 },\n '50%': { opacity: 0.7 },\n '100%': { opacity: 1 },\n})\n\nexport const fadeOut = keyframes({\n '0%': { opacity: 1 },\n '100%': { opacity: 0 },\n})\n","import type { keyframes, CSS } from '@mirohq/design-system-stitches'\n\nimport { fadeInScaled, fadeOutScaled } from './animations'\n\ntype Keyframes = ReturnType<typeof keyframes>\n\ninterface FloatingAnimation {\n in?: Keyframes\n out?: Keyframes\n}\n\nconst defaultAnimation: FloatingAnimation = {\n in: fadeInScaled,\n out: fadeOutScaled,\n}\n\n// Sets transform-origin per side/align combination so the scale animation\n// originates from the trigger point rather than the element's centre.\nconst floatingAnimation = ({\n in: animIn,\n out: animOut,\n}: FloatingAnimation): CSS => ({\n '@media (prefers-reduced-motion: no-preference)': {\n animationDuration: '300ms',\n animationTimingFunction: 'cubic-bezier(0.19, 1, 0.22, 1)',\n willChange: 'transform, opacity',\n '&[data-state=\"open\"]': { animationName: animIn },\n '&[data-state=\"closed\"]': { animationName: animOut },\n '&[data-side=\"top\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'bottom left' },\n '&[data-align=\"center\"]': { transformOrigin: 'bottom center' },\n '&[data-align=\"end\"]': { transformOrigin: 'bottom right' },\n },\n '&[data-side=\"right\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'top left' },\n '&[data-align=\"center\"]': { transformOrigin: 'center left' },\n '&[data-align=\"end\"]': { transformOrigin: 'bottom left' },\n },\n '&[data-side=\"bottom\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'top left' },\n '&[data-align=\"center\"]': { transformOrigin: 'top center' },\n '&[data-align=\"end\"]': { transformOrigin: 'top right' },\n },\n '&[data-side=\"left\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'top right' },\n '&[data-align=\"center\"]': { transformOrigin: 'center right' },\n '&[data-align=\"end\"]': { transformOrigin: 'bottom right' },\n },\n },\n})\n\nexport const css = ({\n radius = '$100',\n shadow = '$elevation-200',\n animation = defaultAnimation,\n}: {\n radius?: CSS['borderRadius']\n shadow?: CSS['boxShadow']\n animation?: FloatingAnimation | false\n} = {}): CSS => ({\n borderRadius: radius,\n boxShadow: shadow,\n ...(animation !== false ? floatingAnimation(animation) : {}),\n})\n"],"names":["css","keyframes"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -21,12 +21,12 @@ var focus = /*#__PURE__*/Object.freeze({
|
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
const fadeInScaled = keyframes({
|
|
24
|
-
"0%": { opacity: 0, transform: "scale(0.
|
|
24
|
+
"0%": { opacity: 0, transform: "scale(0.96)" },
|
|
25
25
|
"100%": { opacity: 1, transform: "scale(1)" }
|
|
26
26
|
});
|
|
27
27
|
const fadeOutScaled = keyframes({
|
|
28
28
|
"0%": { opacity: 1, transform: "scale(1)" },
|
|
29
|
-
"100%": { opacity: 0, transform: "scale(0.
|
|
29
|
+
"100%": { opacity: 0, transform: "scale(0.96)" }
|
|
30
30
|
});
|
|
31
31
|
const fadeIn = keyframes({
|
|
32
32
|
"0%": { opacity: 0 },
|
|
@@ -55,8 +55,8 @@ const floatingAnimation = ({
|
|
|
55
55
|
out: animOut
|
|
56
56
|
}) => ({
|
|
57
57
|
"@media (prefers-reduced-motion: no-preference)": {
|
|
58
|
-
animationDuration: "
|
|
59
|
-
animationTimingFunction: "cubic-bezier(0.
|
|
58
|
+
animationDuration: "300ms",
|
|
59
|
+
animationTimingFunction: "cubic-bezier(0.19, 1, 0.22, 1)",
|
|
60
60
|
willChange: "transform, opacity",
|
|
61
61
|
'&[data-state="open"]': { animationName: animIn },
|
|
62
62
|
'&[data-state="closed"]': { animationName: animOut },
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/focus.ts","../src/animations.ts","../src/floating.ts"],"sourcesContent":["import type { CSS } from '@mirohq/design-system-stitches'\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nexport const css = (style: CSS) => {\n // Manage focus outline for Windows High Contrast Mode\n const styleWithOutline = {\n // use `as any` to workaround TS2742 error\n ...(style as any),\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n }\n\n return {\n '&:focus-visible': styleWithOutline,\n '&[data-focused]': styleWithOutline,\n '&[data-focus-visible]': styleWithOutline,\n }\n}\n","import { keyframes } from '@mirohq/design-system-stitches'\n\nexport const fadeInScaled = keyframes({\n '0%': { opacity: 0, transform: 'scale(0.
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/focus.ts","../src/animations.ts","../src/floating.ts"],"sourcesContent":["import type { CSS } from '@mirohq/design-system-stitches'\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nexport const css = (style: CSS) => {\n // Manage focus outline for Windows High Contrast Mode\n const styleWithOutline = {\n // use `as any` to workaround TS2742 error\n ...(style as any),\n\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n }\n\n return {\n '&:focus-visible': styleWithOutline,\n '&[data-focused]': styleWithOutline,\n '&[data-focus-visible]': styleWithOutline,\n }\n}\n","import { keyframes } from '@mirohq/design-system-stitches'\n\nexport const fadeInScaled = keyframes({\n '0%': { opacity: 0, transform: 'scale(0.96)' },\n '100%': { opacity: 1, transform: 'scale(1)' },\n})\n\nexport const fadeOutScaled = keyframes({\n '0%': { opacity: 1, transform: 'scale(1)' },\n '100%': { opacity: 0, transform: 'scale(0.96)' },\n})\n\nexport const fadeIn = keyframes({\n '0%': { opacity: 0 },\n '50%': { opacity: 0.7 },\n '100%': { opacity: 1 },\n})\n\nexport const fadeOut = keyframes({\n '0%': { opacity: 1 },\n '100%': { opacity: 0 },\n})\n","import type { keyframes, CSS } from '@mirohq/design-system-stitches'\n\nimport { fadeInScaled, fadeOutScaled } from './animations'\n\ntype Keyframes = ReturnType<typeof keyframes>\n\ninterface FloatingAnimation {\n in?: Keyframes\n out?: Keyframes\n}\n\nconst defaultAnimation: FloatingAnimation = {\n in: fadeInScaled,\n out: fadeOutScaled,\n}\n\n// Sets transform-origin per side/align combination so the scale animation\n// originates from the trigger point rather than the element's centre.\nconst floatingAnimation = ({\n in: animIn,\n out: animOut,\n}: FloatingAnimation): CSS => ({\n '@media (prefers-reduced-motion: no-preference)': {\n animationDuration: '300ms',\n animationTimingFunction: 'cubic-bezier(0.19, 1, 0.22, 1)',\n willChange: 'transform, opacity',\n '&[data-state=\"open\"]': { animationName: animIn },\n '&[data-state=\"closed\"]': { animationName: animOut },\n '&[data-side=\"top\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'bottom left' },\n '&[data-align=\"center\"]': { transformOrigin: 'bottom center' },\n '&[data-align=\"end\"]': { transformOrigin: 'bottom right' },\n },\n '&[data-side=\"right\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'top left' },\n '&[data-align=\"center\"]': { transformOrigin: 'center left' },\n '&[data-align=\"end\"]': { transformOrigin: 'bottom left' },\n },\n '&[data-side=\"bottom\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'top left' },\n '&[data-align=\"center\"]': { transformOrigin: 'top center' },\n '&[data-align=\"end\"]': { transformOrigin: 'top right' },\n },\n '&[data-side=\"left\"]': {\n '&[data-align=\"start\"]': { transformOrigin: 'top right' },\n '&[data-align=\"center\"]': { transformOrigin: 'center right' },\n '&[data-align=\"end\"]': { transformOrigin: 'bottom right' },\n },\n },\n})\n\nexport const css = ({\n radius = '$100',\n shadow = '$elevation-200',\n animation = defaultAnimation,\n}: {\n radius?: CSS['borderRadius']\n shadow?: CSS['boxShadow']\n animation?: FloatingAnimation | false\n} = {}): CSS => ({\n borderRadius: radius,\n boxShadow: shadow,\n ...(animation !== false ? floatingAnimation(animation) : {}),\n})\n"],"names":["css"],"mappings":"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"}
|