@blockle/blocks 1.0.0 → 1.0.2

package/README.md

@@ -1 +1,70 @@
-# @blockle/blocks
+# @blockle/blocks design system
+
+Design system for react with vanilla-extract.
+
+## Installation
+
+```bash
+yarn add @blockle/blocks
+```
+
+## Setup
+
+```jsx
+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
+
+```jsx
+import React from 'react';
+import { Button } from '@blockle/blocks';
+
+const App = () => <Button variant="ghost">Click me</Button>;
+```
+
+## Theming
+
+yourTheme.css.ts
+
+```jsx
+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,
+});
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Design system for React",
   "type": "module",
   "sideEffects": false,