๐ก Quickly generate elegant themes with minimal code
Documentation for Bepaint will be temporarily available here in the README while my website undergoes construction using this library itself. The documentation in the future will be available at https://tresabhi.github.io/projects/bepaint.
Install Bepaint as an NPM package and Radix Color to compose pallets
npm install bepaint @radix-ui/colors
# or
yarn add bepaint @radix-ui/colors
Use this library in combination with Radix Colors to instantly create pallets. Radix Colors provides color scales of 12 that can be composed together to create a color system for a website/app.
The colors provided should be more than sufficient; however, you may try to curate a pallet. Just remember to structure your color pallet similarly to what is provided by the Radix team.
import { createColors } from 'bepaint';
import { mauve, red } from '@radix-ui/colors';
const colors = {
/**
* appBackground1, component, textLowContrast, etc.
*/
...createColors(mauve),
/**
* appBackground1_danger, component_danger,
* textLowContrast_danger, etc.
*/
...createColors(red, '_danger'),
};
Stitches, for example:
// stitches.config.ts
import { createColors, createBorderStyles, createRadii } from 'bepaint';
import { mauve, blue } from '@radix-ui/colors';
import { createStitches } from '@stitches/react';
export const { styled, css } = createStitches({
theme: {
colors: {
...createColors(mauve),
...createColors(blue, '_accent'),
},
borderStyles: createBorderStyles(mauve),
radii: createRadii(),
},
});
import { colors } from 'theme.ts';
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
canvas.colors.appBackground2;
document.body.style.backgroundColor = colors.appBackground1;
The flagship creator deals with creating colors for use anywhere that requires it.
Info This library simply implements the understanding the scales section of Radix Colors. All tokens comply with the guidelines. I would highly recommend giving the docs a read.
createColors
- Combines the output of all color creators listed below
- Accepts a color pallet
- Accepts a suffix
createBackgroundColors
: common background colorscreateBorderColors
: common border colors- It's redundant; use
createBorderStyles
for preset some CSS `border-style
- It's redundant; use
createComponentColors
: common inputs, buttons, sliders, etc. colorscreateTextColors
: common text colors
createBorderStyles
- Simple plug-and-chug presets for the CSS
border
property - Accepts a color pallet
- Accepts a suffix
- Accepts a border style
- Default:
solid 0.0625rem
(solid, 1 pixel wide) - Lets you override other properties of the border apart from the concatenated color
- Default:
- Simple plug-and-chug presets for the CSS
createFontSizes
- Combines the output of all font size creators listed below
- Accepts a scale
- Accepts a suffix
createBodyFontSizes
: common font sizes for content mattercreateHeadingFontSizes
: common font sizes for headings and subheadings
createRadii
- Provides presets for the CSS
border-radius
property - Accepts a scale
- Accepts a suffix
- Provides presets for the CSS
createSpaces
- Combines the output of all space creators listed below
createGapSpaces
: common spaces for the CSSgap
property commonly used in combination with the CSSflex
displaycreateMarginSpaces
: common spaces for the CSSmargin
propertycreatePaddingSpaces
: common spaces for the CSSpadding
property
createSizes
: common sizes for CSS propertieswidth
andheight
createBordersStyles
- Implements the same border colors from
createBorderColors
- Accepts a
borderStyles
argument- Lets you change the style of the border which, by default, is
solid 0.0625rem
(1px
wide solid border)
- Lets you change the style of the border which, by default, is
- Implements the same border colors from
createBorderWidths
: common border widths to be used in the CSSborder-width
property
createFontWeights
: common font weights to be used in the CSSfont-weight
property
- Follow the implementation pattern seen in the rest of the files in the repository
- Make sure to use Prettier as the source code comes with a very opinionated
.prettierrc
- Run
yarn format
for good measure
- Run
- Renamed
Hovered
toHover
- Added
createFontWeights
- Added
createBorderWidths
- Renamed
Pressed
toActive
- Renamed
Selected
toFocused
- Renamed to
createBorderStyles
fromcreateBordersStyles
- The redundant
border
prefix has been removed - The
borderStyles
argument has been moved beforesuffix
- Added
componentNonInteractive
- Moved
ComponentPriorities
in front ofComponentStates
- Added
title
- Added
footnote
- Added
title
- Added
textDecoration
- Most color-related creators accept a Radix Colors pallet
- Some creators also accept a scale that is simply multiplied with every value
- Every creator accepts a suffix
- Suffixes insert a
_
between the key and the suffix - Suffixes are fully typed
- Accepts color pallet
- Accepts
borderStyles
argument- Lets you change the CSS properties of the border
- By default, it is
solid 0.0625rem
(1px
wide) borderStyles
will be prefixed with the color of choice
- Accepts color pallet
- Meant to be used anywhere that requires colors
- Accepts scale
- Provides presets for
font-size
- Do not use this to size in-text icons; instead, use
createSizes( ... ).inTextIcon
- Accepts scale
- Provides presets for border radii (
border-radius
)
- Accepts scale
- Provides presets for CSS
width
andheight
- More to come later
- Accepts scale
- Provides presets for CSS
gap
,padding
, andmargin