@blockle/blocks
TypeScript icon, indicating that this package has built-in type declarations

1.0.6 • Public • Published

@blockle/blocks design system

Design system for react with vanilla-extract.

Installation

yarn add @blockle/blocks

Setup

import React from 'react';

import '@blockle/blocks/reset';
import { BlocksProvider } from '@blockle/blocks';
import { momotaro } from '@blockle/blocks-theme-momotaro';

const App = () => (
  <BlocksProvider theme={momotaro}>
    <div>Your app here</div>
  </BlocksProvider>
);

Usage

import React from 'react';
import { Button } from '@blockle/blocks';

const App = () => <Button variant="ghost">Click me</Button>;

Theming

yourTheme.css.ts

import { ThemeTokens, makeComponentTheme, makeTheme, style } from "@blockle/blocks";

const tokens: ThemeTokens = {
  // ...
};

const button = makeComponentTheme('button', {
  base: style({
    ...
  }),
  variants: {
    primary: style({
      ...
    }),
    secondary: style({
      ...
    })
  },
  compoundVariants: [],
  defaultVariants: {
    variant: 'primary',
  },
});

export const theme = makeTheme({
  name: 'Theme name',
  tokens,
  components,
});

/@blockle/blocks/

    Package Sidebar

    Install

    npm i @blockle/blocks

    Weekly Downloads

    268

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    3.69 kB

    Total Files

    9

    Last publish

    Collaborators

    • saartje87