> ## Documentation Index > Fetch the complete documentation index at: https://www.beeq.design/llms.txt > Use this file to discover all available pages before exploring further. # Stroke > BEEQ stroke defines border widths, border colors, and outline treatment for components, states, and custom surfaces. export const CodeLivePreview = ({code, children, height, removePadding = false, mode = 'shadow'}) => { const previewRef = useRef(null); const BEEQ_ESM_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.esm.js'; const BEEQ_CSS_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.css'; const BEEQ_ICONS_URL = 'https://esm.sh/@beeq/core/dist/beeq/svg'; const ensureParentBeeqRuntime = () => { if (document.querySelector('script[data-beeq-parent-runtime]')) return; const script = document.createElement('script'); script.type = 'module'; script.src = BEEQ_ESM_URL; script.dataset.beeqParentRuntime = BEEQ_ICONS_URL; document.head.appendChild(script); }; const executeSnippetScripts = (root, runtimeWindow, previewRootArg, skipAttr) => { root.querySelectorAll('script').forEach(oldScript => { if (skipAttr && oldScript.hasAttribute(skipAttr)) return; if (oldScript.src) { const newScript = runtimeWindow.document.createElement('script'); newScript.src = oldScript.src; oldScript.replaceWith(newScript); return; } runtimeWindow.Function('previewRoot', oldScript.textContent || '')(previewRootArg); oldScript.remove(); }); }; const syncIframeMode = iframeDoc => { const root = document.documentElement; const explicitMode = root.getAttribute('bq-mode'); const isDark = root.classList.contains('dark'); const resolvedMode = explicitMode || (isDark ? 'dark' : 'light'); iframeDoc.documentElement.setAttribute('bq-mode', resolvedMode); iframeDoc.body.setAttribute('bq-mode', resolvedMode); }; useEffect(() => { if (mode === 'shadow') ensureParentBeeqRuntime(); }, [mode]); useEffect(() => { const container = previewRef.current; if (!container) return; if (removePadding) container.style.padding = '0'; container.innerHTML = ''; if (mode === 'iframe') { const iframe = document.createElement('iframe'); iframe.className = 'preview-iframe'; iframe.style.width = '100%'; iframe.style.border = '0'; iframe.style.display = 'block'; iframe.style.minHeight = height ?? '0px'; iframe.setAttribute('title', 'Live code preview'); iframe.setAttribute('loading', 'lazy'); iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin'); container.appendChild(iframe); const iframeDoc = iframe.contentDocument; const iframeWin = iframe.contentWindow; if (!iframeDoc || !iframeWin) return; iframeDoc.open(); iframeDoc.write(['', '', '', ' ', ' ', ' ', ` `, ` `, '', '', code, '', ''].join('\n')); iframeDoc.close(); syncIframeMode(iframeDoc); const modeObserver = new MutationObserver(() => syncIframeMode(iframeDoc)); modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'bq-mode'] }); executeSnippetScripts(iframeDoc, iframeWin, iframeDoc, 'data-beeq-iframe-runtime'); return () => modeObserver.disconnect(); } const shadowRoot = container.shadowRoot ?? container.attachShadow({ mode: 'open' }); if (!shadowRoot.adoptedStyleSheets.length) { const fixSheet = new CSSStyleSheet(); fixSheet.replaceSync(` bq-dropdown::part(panel), bq-panel::part(panel), bq-select::part(panel), bq-date-picker::part(panel) { z-index: 9999; } bq-tooltip::part(panel) { position: absolute; } `); shadowRoot.adoptedStyleSheets = [fixSheet]; } shadowRoot.innerHTML = [``, code].join(''); executeSnippetScripts(shadowRoot, window, shadowRoot); return undefined; }, [code, mode, height]); return
{}
{} {children &&
{children}
}
; }; Stroke controls how surfaces separate, how states become visible, and how interactive elements communicate focus or selection. BEEQ uses stroke width tokens and semantic stroke colors so borders, dividers, outlines, and SVG strokes stay consistent across themes. BEEQ components include their default stroke treatment. Use these tokens when you customize component CSS variables, build custom surfaces around components, or need product-specific states to follow the same visual system. *** ## 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. | body { padding: var(--bq-spacing-m); } .stroke-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--bq-spacing-m); } .stroke-scale__tile { display: grid; align-content: space-between; gap: var(--bq-spacing-s); aspect-ratio: 1; padding: var(--bq-spacing-m); border-style: solid; border-color: var(--bq-stroke--brand); border-radius: var(--bq-radius--m); background: var(--bq-background--secondary); } .stroke-scale__tile--s { border-width: var(--bq-stroke-s); } .stroke-scale__tile--m { border-width: var(--bq-stroke-m); } .stroke-scale__tile--l { border-width: var(--bq-stroke-l); } .stroke-scale__value { color: var(--bq-text--secondary); font-size: var(--bq-font-size--s); }
s 1px default border
m 2px focus or active border
l 3px emphasis border
`} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .stroke-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--bq-spacing-m); } .stroke-scale__tile { display: grid; align-content: space-between; gap: var(--bq-spacing-s); aspect-ratio: 1; padding: var(--bq-spacing-m); border-style: solid; border-color: var(--bq-stroke--brand); border-radius: var(--bq-radius--m); background: var(--bq-background--secondary); } .stroke-scale__tile--s { border-width: var(--bq-stroke-s); } .stroke-scale__tile--m { border-width: var(--bq-stroke-m); } .stroke-scale__tile--l { border-width: var(--bq-stroke-l); } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
s 1px default border
m 2px focus or active border
l 3px emphasis border
``` *** ## 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. | body { padding: var(--bq-spacing-m); } .stroke-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--bq-spacing-m); } .stroke-color-card { display: grid; gap: var(--bq-spacing-xs); padding: var(--bq-spacing-m); border: var(--bq-stroke-m) solid var(--stroke-color); border-radius: var(--bq-radius--m); background: var(--bq-background--secondary); } .stroke-color-card span { color: var(--bq-text--secondary); font-size: var(--bq-font-size--s); }
Default --bq-stroke--primary
Focus --bq-stroke--brand
Success --bq-stroke--success
Warning --bq-stroke--warning
Danger --bq-stroke--danger
Info --bq-stroke--info
`} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .stroke-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--bq-spacing-m); } .stroke-color-card { display: grid; gap: var(--bq-spacing-xs); padding: var(--bq-spacing-m); border: var(--bq-stroke-m) solid var(--stroke-color); border-radius: var(--bq-radius--m); background: var(--bq-background--secondary); } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Default --bq-stroke--primary
Focus --bq-stroke--brand
Success --bq-stroke--success
Warning --bq-stroke--warning
Danger --bq-stroke--danger
Info --bq-stroke--info
``` *** ## 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 CSS `border-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. body { padding: var(--bq-spacing-m); } .stroke-style { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--bq-spacing-m); } .stroke-style__surface { display: grid; gap: var(--bq-spacing-xs); padding: var(--bq-spacing-l); border-width: var(--bq-stroke-s); border-color: var(--bq-stroke--primary); border-radius: var(--bq-radius--m); background: var(--bq-background--secondary); } .stroke-style__surface--solid { border-style: solid; } .stroke-style__surface--dashed { border-style: dashed; border-color: var(--bq-stroke--brand); background: var(--bq-ui--brand-alt); } .stroke-style__surface p { margin: 0; color: var(--bq-text--secondary); }

Standard surface

Use solid strokes for stable borders and separators.

Drop zone

Use dashed strokes for placeholder or drag-and-drop areas.

`} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .stroke-style { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--bq-spacing-m); } .stroke-style__surface { padding: var(--bq-spacing-l); border-width: var(--bq-stroke-s); border-color: var(--bq-stroke--primary); border-radius: var(--bq-radius--m); background: var(--bq-background--secondary); } .stroke-style__surface--solid { border-style: solid; } .stroke-style__surface--dashed { border-style: dashed; border-color: var(--bq-stroke--brand); background: var(--bq-ui--brand-alt); } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}

Standard surface

Use solid strokes for stable borders and separators.

Drop zone

Use dashed strokes for placeholder or drag-and-drop areas.

``` *** ## 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 as `border-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. body { padding: var(--bq-spacing-m); } .stroke-code { display: grid; gap: var(--bq-spacing-m); } .stroke-code__surface { display: grid; gap: var(--bq-spacing-xs); padding: var(--bq-spacing-m); border: var(--bq-stroke-s) solid var(--bq-stroke--primary); border-radius: var(--bq-radius--m); background: var(--bq-background--secondary); } .stroke-code__logical { border-block-start: var(--bq-stroke-m) solid var(--bq-stroke--brand); padding-block-start: var(--bq-spacing-m); } .stroke-code__surface p { margin: 0; color: var(--bq-text--secondary); }

Full border

Use a complete border when the surface needs a visible container edge.

Logical emphasis

Use logical borders when only one side needs emphasis and layout direction matters.

`} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .stroke-code__surface { padding: var(--bq-spacing-m); border: var(--bq-stroke-s) solid var(--bq-stroke--primary); border-radius: var(--bq-radius--m); background: var(--bq-background--secondary); } .stroke-code__logical { border-block-start: var(--bq-stroke-m) solid var(--bq-stroke--brand); padding-block-start: var(--bq-spacing-m); } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}

Full border

Use a complete border when the surface needs a visible container edge.

Logical emphasis

Use logical borders when only one side needs emphasis and layout direction matters.

``` *** ## 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. body { padding: var(--bq-spacing-m); } .stroke-components { display: grid; gap: var(--bq-spacing-m); } .stroke-components__card { --bq-card--borderColor: var(--bq-stroke--primary); --bq-card--borderWidth: var(--bq-stroke-s); --bq-card--borderStyle: solid; } .stroke-components__card::part(wrapper) { display: grid; gap: var(--bq-spacing-m); } .stroke-components bq-alert { --bq-alert--min-width: 0; --bq-alert--border-width: var(--bq-stroke-m); } .stroke-components bq-button[data-emphasis] { --bq-button--border-width: var(--bq-stroke-m); --bq-button--border-color: var(--bq-stroke--brand); }

Review changes

Saved The alert uses a stronger stroke for state feedback.
Review details
`} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .stroke-components__card { --bq-card--borderColor: var(--bq-stroke--primary); --bq-card--borderWidth: var(--bq-stroke-s); --bq-card--borderStyle: solid; } .stroke-components__card::part(wrapper) { display: grid; gap: var(--bq-spacing-m); } .stroke-components bq-alert { --bq-alert--border-width: var(--bq-stroke-m); --bq-alert--min-width: 0; } .stroke-components bq-button[data-emphasis] { --bq-button--border-width: var(--bq-stroke-m); --bq-button--border-color: var(--bq-stroke--brand); } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}

Review changes

Saved The alert uses a stronger stroke for state feedback.
Review details
``` *** ## 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 `--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. Use `--bq-stroke--*` variables instead of primitive colors. Semantic colors adapt to the theme and communicate the role of the border. Use `s` for cards, dividers, tables, and neutral containers. It creates separation without competing with content. Use `m` when the border communicates interaction, selection, or keyboard focus. Pair it with a clear semantic color. Use `l` only for large or high-emphasis surfaces. Thick borders can crowd compact controls and make dense UI feel heavy. Use dashed strokes for placeholders, incomplete content, drag-and-drop targets, and upload areas. Avoid dashed borders for stable containers. Choose stroke width together with radius and padding. A thicker border usually needs enough internal spacing to avoid a cramped layout. 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-box` so 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 Review the stroke width and semantic stroke color variables used by BEEQ themes. See the source that defines the BEEQ stroke width values.