Skeleton - Design System

1 - Prerequisites

Host element will have the .dcx-skeleton class name
Host element will have conditional classes for all variants .dcx-skeleton-variant-{text | circular | rectangular | rounded} class name.
Host element will have conditional classes for both animations .dcx-skeleton-animation-{wave | pulsate} class name.

Name	Description
Default	Instance without specific properties defined

Element	Description	Token Name
Skeleton	The host element container	skeleton

When developing take a close look to the FormInput component. It is a form element as well, the tokens and styling approach should be similar.

Considerations:

❗ Take a close look to the FormInput component. It is a form element as well, the tokens and styling approach should be similar.
Add the tokens to src/design-system/tokens.json
Define all styles in src/design-system/skeleton.css
Add import to the new CSS file in src/design-system/index.css

Possible tokens:

Create the pages for:

On each MDX page make examples for each possible variant

Please follow these steps to create your branch:

git checkout release/1.1.0
git pull
git checkout -b 'feature/skeleton-design-system'