@beamwind/preset-system
v2.3.0
Published
beamwind design system preset using a semantic naming scheme
Downloads
40
Readme
@beamwind/preset-system
beamwind design system preset using a semantic naming scheme
This is a only a preset. @beamwind/system provides a ready to use
bw
export.
@beamwind/preset-system tries to follow a semantic naming approach by using a common language to reduce the guess work. A small set of well known design tokens hopefully prevents magic values or ambiguous names. This creates a taxonomy of tokenized variables used by system adopters and library’s components. The more predictably the model is catalogued, the easier it is to apply, maintain, and endure.
As with all systems, one of the most important things are reasoning. Why use this color instead of that color? Thinking color systems instead of color palettes can benefit everyone involved in choosing and using color as part of a UI. It allows designers to focus on the more complex problems — no more procrastinating on design choices. This enables developers to create a simpler more logical codebase.
Installation
npm install @beamwind/preset-system
Usage
Please refer to the main documentation for further information.
import { setup } from '@beamwind/core'
import system from '@beamwind/preset-system'
setup(
system({
colors: {
// Override any color - the tones should be defined here
},
}),
)
See preset-system/src/theme.ts and core/src/theme.ts for the set values.
Colors
Naming colors is one of the most challenging parts of a color system. Many systems try to map color tones to their relative lightness, but this can be problematic because it creates a very loose mental model. Other systems will try to name colors based on use or hierarchy and those are equally problematic.
Applying a systematic approach to colors will help stay organized and give reasoning behind how and when to use certain colors. But most importantly, it will allow to easily apply a new color scheme to the design. Dark Mode will only be a few color tweaks away, once everything is put into the system.
The color names are designed to have a strong correlation with the tone of voice being used.
Internally @beamwind/colors is used to generate states, "on" and surface colors for a tone.
Tones
primary
- is the color displayed most frequently across screens and componentssecondary
- provides more ways to accent and distinguish certain screens and component partsSecondary colors are best for:
- Floating action buttons
- Selection controls, like sliders and switches
- Highlighting selected text
- Progress bars
- Links and headlines
critical
- Super important. You need to see this.caution
- You should be aware something is happening or mid-way through a process. Could be a risk or an item that needs to be acted upon.positive
- Good vibes & new things! Wants to get the user to act on something or be aware something good happened.neutral
- Subtle information or details historic in nature. Often already actioned & in the past. No priority required due to the lack of importance or change.info
- Guidance & advice. Generally from the UI or business. Functional, calm and non urgent.promote
- Things we wish to make prominent and give more visibility to. Typically used to highlight features, updates or marketing messages.
States
refines the used tone -
primary-hover
orprimary-active
hover
- applies when a pointing device interacts with an element without necessarily activating itfocus
- applies when an element is in a state that is ready to be interacted with, i.e. it has the :focus of the input device.active
- applies during the period in which the element is being activated. For example, if using a mouse 🐭, it would be the time between when the mouse button is clicked and when it is released.disabled
- usually in form controls and buttonsselected
- indicate selected a value.
"On" colors
provide accessible contrast to their base color -
on-primary
oron-primary-active
Whenever elements, such as text or icons, appear in front of surfaces, those elements should use colors designed to be clear and legible against the colors behind them. When a color appears "on" top of a primary color, it’s called an "on primary color". They are labelled using the original color category (such as primary color) with the prefix on-
.
"On" colors are primarily applied to text, iconography, and strokes. Sometimes, they are applied to surfaces.
The
bg-<color>
directive adds acolor
CSS declaration if a correspondingon-*
color is found.
Surface
affect surfaces of components, such as cards, sheets, and menus
surface
- primary backgroundsheet
- for accented backgroundspanel
- for cardsmenu
- for dropouts
Spacing
beamwind provides a standard white space scale using common design terms:
none
,base
,xs
,sm
,md
,lg
,xl
,2xl
,3xl
,px
,auto
Typography
Assign values to the scale (h1 — h6)
h1
: Typically used for headings on main screensh2
: Subheadings, such as for container headersh3
: Supplementary content such as numerical values or calloutsh4
: Axis labels, supporting contenth5
: Supporting content, such as card containersh6
: Supporting content, such as labelsp
: Body copy
Scales
Elevation
https://v5.getbootstrap.com/docs/5.0/extend/approach/#z-index-scales
Acknowledgements
- Braid Design System / Tones
- Material Design / The color system
- Dark Mode — Working with Color Systems
- Speccing Colors in Design Systems
- The light and the dark side: creating a UI colour system in 3 steps
- Light & Dark Color Modes in Design Systems
Contribute
Thanks for being willing to contribute!
This project is free and open-source, so if you think this project can help you or anyone else, you may star it on GitHub. Feel free to open an issue if you have any idea, question, or you've found a bug.
Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub
We are following the Conventional Commits convention.