0.1.2 • Published 2 years ago
@discovery-dao/ui v0.1.2
dapper-ui
Get Started
yarn
cd examples && npm i
Development
Watch styles changes
yarn start
Inside example
npm run dev
Workflow suggestions
Create the desired styles with storybook: yarn storybook
and yarn start
.
Then stop them and run Inside example npm run dev
to start the application.
Notes
Right now use chakra-ui components. Use this custom library only for customTheme.
Publish
- Change the package name to one that is available on npm.
Setup semantic release
npx semantic-release-cli setup
Update package-lock with the latest dependencies
npm i
Commit
npm run acp
Usage
import { extendTheme } from "@chakra-ui/react";
import { customTheme } from "@discovery-dao/ui";
const theme = extendTheme(customTheme);
...
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</CacheProvider>
Extend the theme
const myTheme = {
components: {
Button: {
// 1. We can update the base styles
baseStyle: {
fontWeight: 'bold', // Normally, it is "semibold"
},
// 2. We can add a new button size or extend existing
sizes: {
xl: {
h: '56px',
fontSize: 'lg',
px: '32px',
},
},
// 3. We can add a new visual variant
variants: {
'with-shadow': {
bg: 'red.400',
boxShadow: '0 0 2px 2px #efdfde',
},
// 4. We can override existing variants
solid: (props) => ({
bg: props.colorMode === 'dark' ? 'red.300' : 'red.500',
}),
},
},
},
};
const theme = extendTheme(customTheme, myTheme);
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago
0.0.19
2 years ago
0.0.16
2 years ago
0.0.17
2 years ago
0.0.18
2 years ago
0.0.10
2 years ago
0.0.11
2 years ago
0.0.12
2 years ago
0.0.13
2 years ago
0.0.14
2 years ago
0.0.15
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago