This is a Technology Sample you can rely on to build your own Design System, based on React and React Aria.
Disclaimer: Technology Samples aren't comprehensive Design Systems but showcases a given technology so you free to build you own solution upon it.
This tech sample uses React and JSX to implement its components with TypeScript. It relies on React Aria, which is a part of the Adobe Spectrum Design System. React Aria provides a collection of React Hooks to handle the accessibility and navigation behaviors, allowing you to set a proper interaction layer for all of your components.
React Aria ensures consistent behavior, no matter the UI.
React Aria provides accessibility and behavior according to WAI-ARIA Authoring Practices, including full screen reader and keyboard navigation support.
Because of the agnostic nature of React Aria, the Design Tokens for styling are declared in CSS Custom Properties.
The components then use Scss for their internal styles, relying on CSS Custom Properties for Tokens access.
The Tokens are split in different components:
typography: fonts definitionscolors: colors and variantsspacing: relative and absolute spaceselevation: shadows effectsborder-radiustransitions: easing and speedz-index: z-axe indices
All tokens are declared in dedicated _*.scss files in their dedicated tokens' components. They declare CSS Custom Properties, prefixed with --aria-*. They're then all exposed by the all/all.scss component global stylesheet.
Your theme tokens are accessible by importing the theme stylesheet:
import '~/all/src/all.scss';Components can access the Tokens anywhere in their stylesheets as they're exposed at top CSS level :root.
When styled with SCSS, components can use the Sass var method to read the Tokens values.
.button {
border-radius: var(--aria-border-radius-medium);
background: var(--aria-color-primary);
color: var(--aria-color-white);
}Then the styles are imported in the component using a CSS in React module interpolation:
import styles from './button.module.scss';
export const Button => (
<button className={`${styles.button}`}>
// ...
</button>
)Stories are written in Storybook's Component Story Format.
The theme stylesheet containing the Tokens is injected in all stories files, thanks to the story-layout component:
import '~/story-layout';
import React from 'react';
import { Button } from '../index';
export const primary = () => <Button>Primary</Button>;Stories for the components are located in their stories/ folder.
Documentation pages are decorated by a React layout using the @divriots/dockit-react helpers. See the mdx-layout component.
Each component embed its own documentation in its doc/ folder. You can use any web format for your documentation but we recommend you to write it with the mdx format, allowing you to embed your components live in the documentation.