@blockle/blocks 0.0.6 → 0.2.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Niek Saarberg
+Copyright (c) 2023 Blockle
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,27 +1,58 @@
 # @blockle/blocks
 
-## Get started
+Blocks design system
 
-Install with yarn
+## Installation
 
 ```bash
-yarn add @blockle/blocks
+npm install @blockle/blocks
 ```
 
-Install with npm
+## Setup
 
-```bash
-npm install --save @blockle/blocks
-```
+```jsx
+import React from 'react';
+
+import '@blockle/blocks/reset.css';
+import { ThemeProvider } from '@blockle/blocks';
+import { theme } from '@blockle/blocks/themes/momotaro';
 
-### Basic example
+// const Link = makeLinkComponent(...)
 
-```tsx
-import '@blockle/blocks/dist/blocks.css';
+const App = () => (
+  <ThemeProvider theme={theme} spritePath="/public/" linkComponent={Link}>
+    ...
+  </ThemeProvider>
+);
 ```
 
-```tsx
+## Usage
+
+```jsx
+import React from 'react';
 import { Button } from '@blockle/blocks';
 
-const MyComponent = () => <Button>Hi</Button>;
+const App = () => <Button>Click me</Button>;
+```
+
+## Theming
+
+yourTheme.css.ts
+
+```jsx
+import { makeTokens, makeComponentTheme, makeTheme } from "@blockle/blocks";
+
+const tokens = makeTokens({ ... });
+
+const button = makeComponentTheme({
+  type: 'button',
+  ...
+});
+
+const theme = makeTheme({
+  tokens,
+  components: {
+    button
+  }
+});
 ```