@beamwind/preset-semantic
Advanced tools
beamwind design system preset using a semantic naming scheme
beamwind design system preset using a semantic naming scheme
Create 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? A semantic naming scheme helps to reduce the guess work. 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-semantic
import { setup } from 'beamwind'
import semantic from '@beamwind/preset-semantic'
setup(
semantic({
colors: {
// Override any color - the tones should be defined here
},
}),
)
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
hoveractivedisabled - usually in form controls and buttonsselected - indicate selected or focused controlprovide 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 copyThis 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.
Thanks for being willing to contribute!
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-semantic 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.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.
