Animation/Border are not working

[osanzharevskyy]

Project setup:

• i've setup project with tsdx;
• packages: "devDependencies": { "@babel/core": "^7.17.10", "@babel/helper-create-class-features-plugin": "^7.17.9", "@size-limit/preset-small-lib": "^7.0.8", "@storybook/addon-docs": "^6.4.22", "@storybook/addon-essentials": "^6.4.22", "@storybook/addon-info": "^5.3.21", "@storybook/addon-links": "^6.4.22", "@storybook/addons": "^6.4.22", "@storybook/node-logger": "^6.4.22", "@storybook/react": "^6.4.22", "@types/react": "^18.0.8", "@types/react-dom": "^18.0.3", "autoprefixer": "^10.4.7", "babel-loader": "^8.2.5", "husky": "^7.0.4", "postcss-flexbugs-fixes": "^5.0.2", "react": "^18.1.0", "react-dom": "^18.1.0", "react-is": "^18.1.0", "size-limit": "^7.0.8", "storybook-design-token": "^2.1.0", "tsdx": "^0.14.1", "tslib": "^2.4.0", "typescript": "^4.6.4" }
• styles copied from the demo folder;
• animation added to the *.stories.mdx: <DesignTokenDocBlock categoryName="Animations" />
• border added to the *.stories.mdx: <DesignTokenDocBlock categoryName="Borders" />

Issues:

• animations don't work, it shows static rectangle: https://ibb.co/5BhQn6Z
• borders with css variables don't work: https://ibb.co/kK9ZG9N

[Sqrrl]

Sorry for the late response. Could you provide the stylesheet with your tokens?

[osanzharevskyy]

i used your file, from the samples.

[Sqrrl]

I'm struggling to reproduce this. The issue only exists for borders and animations? Other tokens are working fine?

Could you provide a code example to reproduce the issue?

[osanzharevskyy]

sure, this is the whole test project - https://drive.google.com/file/d/1cmVOWzGSB8uaD4pK4mkwVuk3rHKTbZmH/view?usp=sharing, and the screenshot -