foliage 🍃

GitHub dev.to

Usage with React

> 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;
,
},
},
});
`

$3

`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]);
`

$3

`tsx
import { css, component } from 'foliage-react';

const thing = css
color: blue;

&:hover {
color: red; // when hovered
}

& ~ & {
background: tomato; // as a sibling of , but maybe not directly next to it
}

& + & {
background: lime; // next to
}

&.something {
background: orange; // tagged with an additional CSS class ".something"
}

.something-else & {
border: 1px solid; // inside another element labeled ".something-else"
}
;

export const Thing = component('div', thing, { attrs: { tabIndex: 0 } });

const Example = () => (
<>
Hello world!
How ya doing?
The sun is shining...


`ts
import { css, keyframes, component } from 'foliage-react';

const rotate = keyframes
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
;

const block = css
display: inline-block;
animation: ${rotate} 2s linear infinite;
padding: 2rem 1rem;
font-size: 1.2rem;
;

export const Block = component('div', block);
`

$3

`tsx
import { css, keyframes, createGlobalStyle, Global } from 'foliage-react';
const theme = {
main: '--theme-main',
};

const button = css
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;

/ 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 = () => (
<>



);
`

$3

`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',
},
});
``

Release process

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"