@beamwind/preset-system
Advanced tools
beamwind design system preset using a semantic naming scheme
beamwind design system preset using a semantic naming scheme
This is a only a preset. @beamwind/system provides a ready to use
bwexport.
@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.
npm install @beamwind/preset-system
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.
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.
primary - is the color displayed most frequently across screens and components
secondary - provides more ways to accent and distinguish certain screens and component parts
Secondary colors are best for:
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.
refines the used tone -
primary-hoverorprimary-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.provide accessible contrast to their base color -
on-primaryoron-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 acolorCSS declaration if a correspondingon-*color is found.
affect surfaces of components, such as cards, sheets, and menus
surface - primary backgroundsheet - for accented backgroundspanel - for cardsmenu - for dropoutsbeamwind provides a standard white space scale using common design terms:
none, base, xs, sm, md, lg, xl, 2xl, 3xl, px, autoAssign 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 copyhttps://v5.getbootstrap.com/docs/5.0/extend/approach/#z-index-scales
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.
FAQs
beamwind design system preset using a semantic naming scheme
We found that @beamwind/preset-system demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
