Installation

npm i nano-theme

Usage

import'nano-theme/lib/global-reset';

import{rule}from'nano-theme';constclassName=rule({color:'red',fontSize:16,'@media screen and (min-width: 768px)':{color:'blue',},});

import{rule}from'nano-theme';constclassName=rule({col:'red',fz:16,'@media screen and (min-width: 768px)':{col:'blue',},});

import{keyframes}from'nano-theme';constanimationName=keyframes({from:{opacity:0,},to:{opacity:1,},});

import{theme,font,colors,b1,b2,b3,b4}from'nano-theme';

React Usage

import{Provider,GlobalCss,useTheme,useRule,makeRule}from'nano-theme';

<Providertheme={'light'}><GlobalCss/><MyApp/><Provider/>

consttheme=useTheme();

constMyComponent=()=>{constclassName=useRule({col:'red',fz:16,'@media screen and (min-width: 768px)':{col:'blue',},});return<divclassName={className}>Hello</div>;};

constuseClassName=makeRule({color:'red',fontSize:16,'@media screen and (min-width: 768px)':{color:'blue',},});constMyComponent=()=>{constclassName=useClassName();return<divclassName={className}>Hello</div>;};