132 lines
4.9 KiB
Plaintext
132 lines
4.9 KiB
Plaintext
|
---
|
||
|
|
description: Pico CSS Variables Reference
|
||
|
|
globs:
|
||
|
|
alwaysApply: true
|
||
|
|
---
|
||
|
|
|
||
|
|
# Pico CSS Variables Reference
|
||
|
|
|
||
|
|
## Overview
|
||
|
|
Pico CSS uses CSS custom properties (variables) prefixed with `--pico-` for consistent theming and customization. These variables provide a comprehensive design system that can be leveraged in custom styles.
|
||
|
|
|
||
|
|
## Core Typography Variables
|
||
|
|
|
||
|
|
### Font Properties
|
||
|
|
- `--pico-font-family` - System font stack (sans-serif by default)
|
||
|
|
- `--pico-font-family-sans-serif` - System UI fonts
|
||
|
|
- `--pico-font-family-monospace` - Monospace fonts for code
|
||
|
|
- `--pico-font-family-emoji` - Emoji font fallbacks
|
||
|
|
- `--pico-font-weight` - Base font weight (400)
|
||
|
|
- `--pico-font-size` - Base font size (responsive, starts at 100%)
|
||
|
|
|
||
|
|
### Typography Spacing
|
||
|
|
- `--pico-typography-spacing-vertical` - Vertical spacing between elements (1rem)
|
||
|
|
- `--pico-typography-spacing-top` - Top margin for headings after content blocks
|
||
|
|
- `--pico-line-height` - Line height for text elements
|
||
|
|
|
||
|
|
### Heading Colors
|
||
|
|
- `--pico-h1-color` - H1 heading color
|
||
|
|
- `--pico-h2-color` - H2 heading color
|
||
|
|
- `--pico-h3-color` - H3 heading color
|
||
|
|
- `--pico-h4-color` - H4 heading color
|
||
|
|
- `--pico-h5-color` - H5 heading color
|
||
|
|
- `--pico-h6-color` - H6 heading color
|
||
|
|
|
||
|
|
## Layout & Spacing Variables
|
||
|
|
|
||
|
|
### Container & Spacing
|
||
|
|
- `--pico-spacing` - Base spacing unit used for padding/margins
|
||
|
|
- `--pico-grid-column-gap` - Grid column spacing
|
||
|
|
- `--pico-grid-row-gap` - Grid row spacing
|
||
|
|
|
||
|
|
### Responsive Typography
|
||
|
|
Pico automatically scales font-size across breakpoints:
|
||
|
|
- Mobile: 100%
|
||
|
|
- 576px+: 106.25% (17px)
|
||
|
|
- 768px+: 112.5% (18px)
|
||
|
|
- 1024px+: 118.75% (19px)
|
||
|
|
- 1280px+: 125% (20px)
|
||
|
|
- 1536px+: 131.25% (21px)
|
||
|
|
|
||
|
|
## Color Variables
|
||
|
|
|
||
|
|
### Base Colors
|
||
|
|
- `--pico-background-color` - Main background color
|
||
|
|
- `--pico-color` - Primary text color
|
||
|
|
- `--pico-muted-color` - Subdued text color
|
||
|
|
- `--pico-muted-border-color` - Subtle border color
|
||
|
|
|
||
|
|
### Interactive Elements
|
||
|
|
- `--pico-primary` - Primary action color
|
||
|
|
- `--pico-primary-background` - Primary button background
|
||
|
|
- `--pico-primary-border` - Primary button border
|
||
|
|
- `--pico-primary-underline` - Primary link underline
|
||
|
|
- `--pico-primary-hover` - Primary hover state
|
||
|
|
- `--pico-primary-focus` - Primary focus state
|
||
|
|
|
||
|
|
### Form Elements
|
||
|
|
- `--pico-form-element-background-color` - Input background
|
||
|
|
- `--pico-form-element-border-color` - Input border
|
||
|
|
- `--pico-form-element-color` - Input text color
|
||
|
|
- `--pico-form-element-placeholder-color` - Placeholder text
|
||
|
|
- `--pico-form-element-selected-background-color` - Selected input background
|
||
|
|
|
||
|
|
### Special Content
|
||
|
|
- `--pico-mark-background-color` - Highlighted text background
|
||
|
|
- `--pico-mark-color` - Highlighted text color
|
||
|
|
- `--pico-ins-color` - Inserted text color
|
||
|
|
- `--pico-del-color` - Deleted text color
|
||
|
|
- `--pico-text-selection-color` - Text selection background
|
||
|
|
|
||
|
|
### Table Elements
|
||
|
|
- `--pico-table-border-color` - Table border color
|
||
|
|
- `--pico-table-row-stripped-background-color` - Striped table row background
|
||
|
|
|
||
|
|
### Code Elements
|
||
|
|
- `--pico-code-background-color` - Code block background
|
||
|
|
- `--pico-code-color` - Code text color
|
||
|
|
- `--pico-code-kbd-background-color` - Keyboard shortcut background
|
||
|
|
- `--pico-code-kbd-color` - Keyboard shortcut text
|
||
|
|
|
||
|
|
## Sass Customization Variables
|
||
|
|
|
||
|
|
### Theme Settings
|
||
|
|
- `$theme-color` - Primary theme color (azure, blue, purple, etc.)
|
||
|
|
- `$css-var-prefix` - Prefix for CSS variables (default: "--pico-")
|
||
|
|
- `$enable-classes` - Enable/disable CSS classes (false for classless)
|
||
|
|
- `$enable-responsive-typography` - Enable responsive font scaling
|
||
|
|
- `$enable-transitions` - Enable CSS transitions
|
||
|
|
- `$enable-semantic-container` - Enable semantic HTML containers
|
||
|
|
|
||
|
|
### Available Theme Colors
|
||
|
|
`amber`, `azure`, `blue`, `cyan`, `fuchsia`, `green`, `grey`, `indigo`, `jade`, `lime`, `orange`, `pink`, `pumpkin`, `purple`, `red`, `sand`, `slate`, `violet`, `yellow`, `zinc`
|
||
|
|
|
||
|
|
## Best Practices for AI Assistants
|
||
|
|
|
||
|
|
### When to Use Pico Variables
|
||
|
|
1. **Spacing**: Always use `--pico-spacing` and `--pico-typography-spacing-*` for consistent layout
|
||
|
|
2. **Typography**: Use `--pico-font-*` variables for font properties
|
||
|
|
3. **Colors**: Leverage `--pico-color`, `--pico-muted-color`, and theme colors
|
||
|
|
4. **Responsive Design**: Variables automatically adapt to screen sizes
|
||
|
|
|
||
|
|
### Common Use Cases
|
||
|
|
- **Custom components**: Use Pico variables to match framework styling
|
||
|
|
- **Overlays/Banners**: Use spacing and typography variables for consistency
|
||
|
|
- **Form styling**: Leverage form element variables for native look
|
||
|
|
- **Theme adaptation**: Variables automatically work with different color themes
|
||
|
|
|
||
|
|
### Avoiding Common Mistakes
|
||
|
|
- Don't hardcode values that Pico variables provide
|
||
|
|
- Don't override Pico variables unless creating a custom theme
|
||
|
|
- Use calc() with Pico variables for proportional spacing
|
||
|
|
- Prefer Pico's responsive system over custom breakpoints
|
||
|
|
|
||
|
|
## Example Usage
|
||
|
|
```css
|
||
|
|
.custom-element {
|
||
|
|
margin: var(--pico-spacing);
|
||
|
|
font-family: var(--pico-font-family);
|
||
|
|
color: var(--pico-muted-color);
|
||
|
|
font-size: calc(var(--pico-font-size) * 1.125);
|
||
|
|
}
|
||
|
|
```
|