Clove

Design tokens and components for the Clove Design System

This repository hosts the Clove design system – design tokens and reusable UI components for Penn. See the online documentation built with Storybook, combining technical documentation with live UI component demos and code samples.

Usage

Clove currently covers 4 different use cases:

• React components based on Material UI.
• Vanilla JavaScript design tokens.
• Vanilla CSS stylesheets for specific systems.
• A Tailwind CSS configuration for reusable utility classes.

React and Material UI

Clove is available as the clove package on npm, providing a set of React components based on Material UI. First install the dependencies:

npm install --save clove @material-ui/core @material-ui/lab react react-dom

Then reuse the Clove Material UI theme:

import { ThemeProvider, CssBaseline } from '@material-ui/core';
import { theme } from 'clove';

// Use the theme like you normally would use any Material UI theme object – via the ThemeProvider or with any other theme API.
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <App />
  </ThemeProvider>,
  document.getElementById('root'),
);

Then reuse Material UI components directly from Material UI, as you normally would:

import { Alert } from '@material-ui/lab';

A few components have customizations that require importing directly from Clove:

import { DarkBadge } from 'clove';
import { DarkBreadcrumbs } from 'clove';
import { DarkTabs } from 'clove';
import { EmptyState } from 'clove';
import { Tile } from 'clove';
import { Shield } from 'clove';

Tailwind CSS

🚧 Experimental support, proceed with caution.

View the available tokens and utilities in our Tailwind Config Viewer.

We provides stylesheets of utility classes and components built with Tailwind, compatible with all web technologies.

You may either use the stylesheets directly in your project, or import the Tailwind config to generate your own stylesheets. Here is how to reuse the design system’s Tailwind config in your own project’s tailwind.config.js:

const baseConfig = require('clove/tailwind.config');

module.exports = {
  ...baseConfig,
  // Add any configuration specific to your project, such as CSS purge settings.
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
  },
};

Design tokens

🚧 Experimental support, proceed with caution.

For platforms not explicitly supported by the design system, all of the design tokens are still available as vanilla JavaScript in the npm package:

const {
  colors,
  fontSans,
  fontSerif,
  fontMono,
  fontSize,
  fontWeight,
  letterSpacing,
  borderRadius,
  boxShadow,
  spacing,
  breakpoints,
} = require('clove/tokens');

All of the tokens can then be used with any UI framework that supports variables, for example:

• Any framework based on CSS-in-JS methodologies.
• Any development tooling using PostCSS.

For example, Bootstrap can be used with CSS variables to configure Bootstrap colors to match Penn’s branding.

Contributing

See CONTRIBUTING.md.