Context Panels
Quick-access panels for OxyMade variables via right-click in the builder.
OxyMade adds right-click context panels throughout the builder, giving you quick access to design system variables without leaving your current workflow.
Overview
When editing elements in Oxygen Builder, you can right-click on various input fields to open OxyMade’s context panels. These panels provide quick selection of pre-defined variables for:
- Spacing (padding, margin, gap)
- Colors (all semantic color variants)
- Border Radius values
- Typography sizes
- Sizing (width, height)
How It Works
- Select an element in the builder
- Find the property you want to edit (e.g., padding, background color)
- Right-click on the input field
- A popup panel appears with OxyMade variable options
- Click a value to apply it instantly
The panel automatically detects the input type and shows relevant options.
Spacing Panel
Right-click on padding, margin, or gap inputs to access spacing variables.
Available Values
| Variable | Value | Use Case |
|---|---|---|
s1 - s10 | 4px - 40px | Small spacing increments |
s12 - s20 | 48px - 80px | Medium spacing |
s24 - s72 | 96px - 288px | Large spacing |
Section Spacing
For larger vertical sections:
| Variable | Value | Use Case |
|---|---|---|
ss-none | 0px | No spacing |
ss-xs | 32px | Extra small sections |
ss-sm | 48px | Small sections |
ss-md | 64px | Medium sections |
ss-lg | 96px | Large sections |
ss-xl | 128px | Extra large sections |
ss-xxl | 256px | Maximum section spacing |
Color Panel
Right-click on color inputs to access the full OxyMade color palette.
Color Categories
- Primary - Main brand color (11 shades)
- Secondary - Complementary color (11 shades)
- Tertiary - Supporting color (11 shades)
- Accent - Highlight color (11 shades)
- Neutral - UI/text colors (11 shades)
- Base White - Pure white
- Base Black - Near black
Shade Options
Each color includes these shade variants:
| Shade | Purpose |
|---|---|
bg | Light backgrounds |
surface | Card/container backgrounds |
subtle | Subtle backgrounds |
border | Border colors |
muted | Muted/secondary text |
base | Primary use of color |
hover | Hover states |
text | Body text color |
active | Active/pressed states |
heading | Heading text |
dark | Darkest variant |
Transparency Options
The color panel also offers transparency variants:
- 10%, 20%, 30%… up to 90% opacity
- Useful for overlays and subtle backgrounds
Border Radius Panel
Right-click on border radius inputs to access radius presets.
| Variable | Value | Result |
|---|---|---|
radius-none | 0px | Square corners |
radius-sm | 4px | Subtle rounding |
radius-md | 8px | Medium rounding |
radius-lg | 12px | Large rounding |
radius-xl | 16px | Extra large |
radius-2xl | 24px | Very rounded |
radius-full | 9999px | Fully rounded (pills/circles) |
Typography Panel
Right-click on font-size inputs to access typography scale values.
Text Sizes
| Variable | Size | Use Case |
|---|---|---|
text-xs | 12px | Fine print, captions |
text-sm | 14px | Small text, labels |
text-base | 16px | Body text |
text-lg | 18px | Large body text |
text-xl | 20px | Subheadings |
text-2xl | 24px | Small headings |
text-3xl | 30px | Medium headings |
text-4xl | 36px | Large headings |
text-5xl | 48px | Display text |
text-6xl | 60px | Large display |
text-7xl | 72px | Hero text |
text-8xl | 96px | Extra large display |
text-9xl | 128px | Maximum size |
Heading Sizes
| Variable | Size | Use Case |
|---|---|---|
h1 | 3rem | Page titles |
h2 | 2.25rem | Section headings |
h3 | 1.875rem | Subsection headings |
h4 | 1.5rem | Card titles |
h5 | 1.25rem | Small headings |
h6 | 1rem | Smallest headings |
Sizing Panel
Right-click on width or height inputs to access sizing presets.
Width Options
| Variable | Value | Use Case |
|---|---|---|
auto | auto | Content-based width |
full | 100% | Full container width |
1/2 | 50% | Half width |
1/3 | 33.33% | One third |
2/3 | 66.67% | Two thirds |
1/4 | 25% | One quarter |
3/4 | 75% | Three quarters |
1/5 | 20% | One fifth |
2/5 | 40% | Two fifths |
3/5 | 60% | Three fifths |
4/5 | 80% | Four fifths |
Height Options
| Variable | Value | Use Case |
|---|---|---|
auto | auto | Content-based height |
full | 100% | Full container height |
screen | 100vh | Full viewport height |
svh | 100svh | Small viewport height |
dvh | 100dvh | Dynamic viewport height |
Panel Behavior
Opening Panels
- Right-click triggers the context menu
- Panel appears near the input field
- Position adjusts to stay within viewport
Closing Panels
Panels close when you:
- Click a value (applies and closes)
- Press Escape key
- Click outside the panel
- Click the close button
Smart Detection
The panel automatically detects what type of input you’re clicking:
- Padding/margin/gap → Spacing panel
- Background/text color → Color panel
- Border radius → Radius panel
- Font size → Typography panel
- Width/height → Sizing panel
Tips & Best Practices
Use Consistent Values
Always use OxyMade variables instead of arbitrary values:
- Maintains design consistency
- Easy to update globally
- Better responsive behavior
Quick Workflow
- Build your layout structure first
- Use context panels to apply spacing
- Apply colors from the palette
- Fine-tune with typography sizes
Keyboard Shortcuts
- Right-click - Open context panel
- Escape - Close panel
- Click value - Apply and close