@cretadoc/ui v2.0.1

@cretadoc/ui

It provides the components and themes to build Cretadoc interfaces.

Requirements

This package uses Vanilla Extract to provides themes and components. The CSS files are not pre-compiled so you need a plugin to integrate Vanilla Extract into your bundler. Please read Bundler integration.

Install

npm install @cretadoc/ui

yarn add @cretadoc/ui

pnpm add @cretadoc/ui

Components

This package provides different React components to help you build your interfaces. All you need to do is to import them and use them in your application.

Example:

app.tsx

import { Button } from '@cretadoc/ui';
import { FC } from 'react';

export const App: FC = () => {
  return (
    <div>
      <Button>Click here</Button>
    </div>
  );
};

Themes

This package provides different themes to use in Cretadoc interfaces. Each theme is represented as an object containing an id, a name, a color scheme and a collection of tokens associated to CSS values.

Build the themes

To use the themes, first you need to build them. This package provides a function named buildThemes to make the process easier. All you need to do is to pass an array of themes to build in a .css.ts file.

themes.css.ts

import { buildThemes, themes } from '@cretadoc/ui';

buildThemes(themes);

If you don't need all the themes, you can pass a filtered array to the buildThemes helper. For example, if you only want cretadoc-light theme, you can do something like:

import { buildThemes, lightThemes } from '@cretadoc/ui';

buildThemes(lightThemes.filter((theme) => theme.id === 'cretadoc-light'));

Usage with @cretadoc/ui components

To use a theme, you need to add an attribute data-theme to your application wrapper. Its value must be an existent theme id.

Example with React:

app.tsx

import { Button } from '@cretadoc/ui';
import { FC } from 'react';
import './themes.css.ts';

export const App: FC = () => {
  return (
    <div data-theme="a-theme-id">
      <Button>Click here</Button>
    </div>
  );
};

Usage with your own components

You can reuse the themes contract with your own components. However your application needs:

• to handle Typescript,
• Vanilla-extract tools (like the style function).

Example with React:

custom-button.css.ts

import { contract } from '@cretadoc/ui';
import { style } from '@vanilla-extract/css';

export const button = style({
  background: contract.colors.background,
  color: contract.colors.foreground,
});

custom-button.tsx

import { FC, ReactNode } from 'react';
import * as styles from './button.css';

type CustomButtonProps = {
  children: ReactNode;
};

export const CustomButton: FC<CustomButtonProps> = ({ children }) => {
  return <button className={styles.button}>{children}</button>;
};

app.tsx

import { FC } from 'react';
import { Button } from './custom-button.tsx';
import './themes.css.ts';

export const App: FC = () => {
  return (
    <div data-theme="a-theme-id">
      <Button>Click here</Button>
    </div>
  );
};

License

This package is released under the MIT license.

The documentation (Markdown files) is released under a Creative Commons license.