Styled Components for forest
npm install foliage> Work in progress. Most of this examples are just concept
``ts
import { css, component } from 'foliage-react';
const button = css
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
border: 2px solid white;;
export const Button = component('a', button, {
defaults: { color: 'default' },
variants: {
color: {
primary: css
background: white;
color: black;
,
default: css
background: transparent;
color: white;
,`
},
},
});
`ts
import { css, component } from 'foliage-react';
const button = css
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;;
export const Button = component('button', button);
const tomato = css
color: tomato;
border-color: tomato;;
export const TomatoButton = component('button', [button, tomato]);
`
`tsx
import { css, component } from 'foliage-react';
const thing = css
color: blue;
&:hover {
color: red; //
}
& ~ & {
background: tomato; //
}
& + & {
background: lime; //
}
&.something {
background: orange; //
}
.something-else & {
border: 1px solid; //
};
export const Thing = component('div', thing, { attrs: { tabIndex: 0 } });
const Example = () => (
<>
$3
`ts
import { css, keyframes, component } from 'foliage-react';const rotate = keyframes
;const block = css
;export const Block = component('div', block);
`$3
`tsx
import { css, keyframes, createGlobalStyle, Global } from 'foliage-react';
const theme = {
main: '--theme-main',
};const button = css
/ Color the border and text with theme.main /
color: var(${theme.main});
border: 2px solid var(${theme.main});;
const Button = component('button', button);
const primaryTheme = createGlobalStyle
:root {
${theme.main}: palevioletred;
};
const secondaryTheme = createGlobalStyle
:root {
${theme.main}: mediumseagreen;
};
const Example = () => (
<>
>
);
`
`tsx
import { css, component } from 'foliage-react';
const baseStyles = css
color: white;
background-color: mediumseagreen;
border-radius: 4px;;
export const Button = component('button', baseStyles, {
variants: {
color: {
gray: css
background-color: gainsboro;
,
blue: css
background-color: dodgerblue;
,
},
size: {
md: css
height: 26px;
,
lg: css
height: 36px;
,
},
},
compound: [
{
color: 'blue',
size: 'lg',
css: css
background-color: purple;
,``
},
],
defaults: {
color: 'gray',
size: 'md',
},
});
1. Check out the draft release.
1. All PRs should have correct labels and useful titles. You can review available labels here.
1. Update labels for PRs and titles, next manually run the release drafter action to regenerate the draft release.
1. Review the new version and press "Publish"
1. If required check "Create discussion for this release"