What BEEQ provides
BEEQ provides a small stroke width scale and semantic stroke color variables. These are available as CSS custom properties wherever BEEQ styles are loaded. If your application uses the BEEQ Tailwind preset, the same values are also available through Tailwind border width, stroke width, border color, stroke color, and logical border utilities. Treat those utilities as a convenience layer. CSS variables are the portable contract.| BEEQ provides | Use it for |
|---|---|
| Stroke width variables | Border widths, dividers, outlines, and SVG stroke widths. |
| Semantic stroke color variables | Theme-aware border, divider, outline, feedback, and state colors. |
| Component CSS variables | Scoped border customization for components that expose border variables. |
| Tailwind preset mappings | Utility classes when the consuming app installs the BEEQ Tailwind preset. |
Stroke width scale
The stroke width scale has three values. Use the smallest value for standard separation, the medium value for selected or focused states, and the largest value only when the surface has enough size and emphasis.| Token | CSS variable | Tailwind keys | Value | Common use |
|---|---|---|---|---|
s | --bq-stroke-s | border-s, stroke-s | 1px | Default borders, dividers, table lines, and subtle separation. |
m | --bq-stroke-m | border-m, stroke-m | 2px | Focus, active, selected, or emphasized states. |
l | --bq-stroke-l | border-l, stroke-l | 3px | Large emphasis surfaces or highly visible outlines. |
Stroke color roles
Semantic stroke colors adapt to the active BEEQ theme. Use them instead of primitive color values so borders and outlines keep the right contrast in light and dark mode.| CSS variable | Role | Common use |
|---|---|---|
--bq-stroke--primary | Default separation | Card borders, dividers, table lines, and neutral outlines. |
--bq-stroke--secondary | Stronger neutral separation | Selected neutral states or higher emphasis borders. |
--bq-stroke--tertiary | High-contrast neutral separation | Strong outlines that still need a neutral color. |
--bq-stroke--brand | Brand or focus emphasis | Focus rings, active states, and brand-highlighted outlines. |
--bq-stroke--success | Positive state | Valid fields, saved states, and success feedback. |
--bq-stroke--warning | Caution state | Warning feedback or attention states. |
--bq-stroke--danger | Error state | Invalid fields, destructive states, and danger feedback. |
--bq-stroke--info | Informational state | Informational borders and support messaging. |
--bq-stroke--inverse | Inverse surfaces | Borders on dark or inverted surfaces. |
--bq-stroke--alt | Alternative low-emphasis surfaces | Subtle borders on alternative backgrounds. |
Stroke style and positioning
BEEQ uses solid strokes for normal borders, dividers, and outlines. Use dashed strokes only when the surface represents a placeholder, incomplete content, drop zone, or temporary target. BEEQ does not expose separate stroke-style tokens. Use CSSborder-style for solid or dashed treatment, and keep the width and color tied to BEEQ tokens.
Components are designed around CSS border behavior. With box-sizing: border-box, the border is included in the element size, which matches the inside stroke positioning used in design tools.
How strokes work in code
Use CSS variables directly when you build custom UI. Use component props and component CSS variables when the stroke belongs to a BEEQ component. If your project uses the BEEQ Tailwind preset, standard utilities such asborder-s, border-primary, stroke-m, and stroke-brand map to the same token system. The preset also adds logical border utilities such as border-bs-s, border-be-s, border-i-s, and border-is-s for layout direction support.
Component stroke customization
Start with component APIs when a component exposes border or stroke-related props. Use component CSS variables for scoped overrides, and use::part() only when you need to adjust exposed internal structure.
Choosing stroke
Stroke should support the role of the element and the state it communicates. Use lighter treatment for stable surfaces and stronger treatment for interaction feedback.| Use | Recommended stroke |
|---|---|
| Default container or divider | var(--bq-stroke-s) with var(--bq-stroke--primary) |
| Hover or selected neutral state | var(--bq-stroke-s) or var(--bq-stroke-m) with a stronger semantic stroke color |
| Focus or active state | var(--bq-stroke-m) with var(--bq-stroke--brand) |
| Success, warning, danger, or info state | State color with a width that matches the component size |
| Placeholder, drag-and-drop, or incomplete state | Dashed stroke with a semantic color |
| Large emphasis surface | var(--bq-stroke-l) only when the surface has enough space and visual weight |
Usage guidelines
Use BEEQ stroke tokens
Use BEEQ stroke tokens
Use
--bq-stroke-s, --bq-stroke-m, and --bq-stroke-l instead of one-off pixel values. The small scale keeps borders consistent across components and custom surfaces.Prefer semantic stroke colors
Prefer semantic stroke colors
Use
--bq-stroke--* variables instead of primitive colors. Semantic colors adapt to the theme and communicate the role of the border.Use s for default separation
Use s for default separation
Use
s for cards, dividers, tables, and neutral containers. It creates separation without competing with content.Use m for focus and active emphasis
Use m for focus and active emphasis
Use
m when the border communicates interaction, selection, or keyboard focus. Pair it with a clear semantic color.Use l sparingly
Use l sparingly
Use
l only for large or high-emphasis surfaces. Thick borders can crowd compact controls and make dense UI feel heavy.Reserve dashed strokes for temporary surfaces
Reserve dashed strokes for temporary surfaces
Use dashed strokes for placeholders, incomplete content, drag-and-drop targets, and upload areas. Avoid dashed borders for stable containers.
Keep stroke, radius, and spacing aligned
Keep stroke, radius, and spacing aligned
Choose stroke width together with radius and padding. A thicker border usually needs enough internal spacing to avoid a cramped layout.
Do not use stroke alone to communicate state
Do not use stroke alone to communicate state
Pair state borders with text, icons, labels, or ARIA where needed. Shape and color alone are not enough for every user.
Accessibility and constraints
Stroke is visual, but it affects how people find and understand interactive states.- Keep focus indicators visible. Use enough contrast between the focus stroke and the surrounding surface.
- Avoid replacing browser or component focus treatment without providing an equally visible alternative.
- Do not rely on color or stroke width alone to communicate error, warning, success, or selected states.
- Keep borders inside the element box with
box-sizing: border-boxso focus and active states do not shift layout. - Check dense layouts at zoomed and narrow widths. Thicker strokes reduce the available content area.
- Use semantic state colors consistently so users can learn the meaning of success, warning, danger, and focus borders.
Resources
Global CSS variables
Review the stroke width and semantic stroke color variables used by BEEQ themes.
Root token source
See the source that defines the BEEQ stroke width values.