@blockle/blocks NPM | npm.io

1.0.10 • Published 10 months ago

Install

Weekly downloads

49

License

MIT

Repository

Last release

10 months ago

@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,
});

@everything-registry/sub-chunk-132 @zalastax/nolb-_bloc @infinitebrahmanuniverse/nolb-_bloc

1 year ago

1 year ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

0.20.0-alpha1.0

1 year ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago