Ketupa

React Visual Design Language

Install

npm install --save ketupa

Usage

import React from 'react'

import { View, Circle, Stack, Text, Grid, Button } from 'ketupa'
import 'ketupa/dist/index.css'

const App = () => {
  document.body.setAttribute('spellcheck', false)
  return (
    <Grid gutter={2}>
      <Stack color='none' guter={2}>
        <View space={4}>
          <Text size={4} bolder>Typography</Text>
        </View>
        <Stack>
          <Text size={6} space={2} bold>Size  6, guide equivalent to 65px</Text>
          <Text size={5} space={2}>Size  5, equivalent to 45px</Text>
          <Text size={4} space={2}>Size  4, equivalent to 35px</Text>
          <Text size={3} space={2}>Size  3, equivalent to 24px</Text>
          <Text size={2} space={2}>Size  2, equivalent to 18px</Text>
          <Text size={1} space={2}>Size  1, equivalent to 16px</Text>
          <Text size={0} space={2}>Size  0, equivalent to 14px</Text>
        </Stack>
      </Stack>
      <Stack color='none' guter={2}>
        <View space={4}>
          <Text size={4} bolder text="Color Scheme" />
        </View>
        <View>
          <Circle color='prime' />
          <Stack>
            <Text size={3} bold>Prime</Text>
            <Text type='mono'>#00b0c8</Text>
          </Stack>
        </View>
        <View>
          <Circle color='alt' />
          <Stack>
            <Text size={3} bold>Alt</Text>
            <Text type='mono'>#e2334d</Text>
          </Stack>
        </View>
        <View>
          <Circle color='black' />
          <Stack>
            <Text size={3} bold>Black</Text>
            <Text type='mono'>#1b1b1b</Text>
          </Stack>
        </View>
        <View>
          <Circle color='dark' />
          <Stack>
            <Text size={3} bold>Dark</Text>
            <Text type='mono'>#6d6e71</Text>
          </Stack>
        </View>
        <View>
          <Circle color='grey' />
          <Stack>
            <Text size={3} bold>Grey</Text>
            <Text type='mono'>#95a0a9</Text>
          </Stack>
        </View>
        <View>
          <Circle color='light' />
          <Stack>
            <Text size={3} bold>Light</Text>
            <Text type='mono'>#e1e4e6</Text>
          </Stack>
        </View>
        <View>
          <Circle color='white' />
          <Stack>
            <Text size={3} bold>White</Text>
            <Text type='mono'>#ffffff</Text>
          </Stack>
        </View>
      </Stack>
      <Stack color='none' guter={2}>
        <View space={4}>
          <Text size={4} bolder>Controls</Text>
        </View>
        <Stack space={3}>
          <View space={2}>
            <Text size={3} bolder>Input text</Text>
          </View>
          <Text size={3} space={2} entry>Text with entry capability</Text>
          <Text size={3} space={2} entry noEnter>Single line text entry</Text>
          <Text size={3} bold entry numberOnly>Number only input</Text>
        </Stack>
        <Stack>
          <View space={2}>
            <Text size={3} bolder>Button</Text>
          </View>
          <View space={1}>
            <Button>Click me</Button>
            <Button color='alt'>Click me</Button>
            <Button color='black'>Click me</Button>
          </View>
          <View>
            <Button holo >Click me</Button>
            <Button holo color='alt'>Click me</Button>
            <Button holo color='black'>Click me</Button>
          </View>
        </Stack>
      </Stack>
    </Grid>
  )
}

export default App

License

MIT © arbo77