0
# Shorthand Properties
1

2
Intelligent generators for CSS shorthand properties with flexible value handling, automatic expansion, and cross-browser compatibility for CSS-in-JS applications.
3

4
## Capabilities
5

6
### Spacing Shorthands
7

8
Functions for generating margin and padding shorthand properties with intelligent value distribution.
9

10
```javascript { .api }
11
/**
12
 * Generates margin shorthand properties with intelligent value expansion
13
 * @param values - 1-4 margin values following CSS shorthand rules
14
 * @returns Styles object with margin properties
15
 */
16
function margin(...values: Array<?string | ?number>): Styles;
17

18
/**
19
 * Generates padding shorthand properties with intelligent value expansion
20
 * @param values - 1-4 padding values following CSS shorthand rules
21
 * @returns Styles object with padding properties
22
 */
23
function padding(...values: Array<?string | ?number>): Styles;
24
```
25

26
**Usage Examples:**
27

28
```javascript
29
import { margin, padding } from "polished";
30

31
// Margin variations
32
const singleValue = margin("20px");           // All sides: 20px
33
const twoValues = margin("10px", "20px");     // Vertical: 10px, Horizontal: 20px
34
const threeValues = margin("10px", "20px", "15px");  // Top: 10px, Horizontal: 20px, Bottom: 15px
35
const fourValues = margin("10px", "20px", "15px", "25px");  // Top, Right, Bottom, Left
36

37
// Padding with mixed units
38
const mixedPadding = padding("1rem", "20px", "1.5rem");
39
```
40

41
### Border Shorthands
42

43
Functions for generating border properties with flexible parameter handling.
44

45
```javascript { .api }
46
/**
47
 * Generates border shorthand properties for specific sides or all sides
48
 * @param side - Optional side specification ("top", "right", "bottom", "left")
49
 * @param width - Border width value
50
 * @param style - Border style value
51
 * @param color - Border color value
52
 * @returns Styles object with border properties
53
 */
54
function border(side?: string, width?: string, style?: string, color?: string): Styles;
55

56
/**
57
 * Generates border-color shorthand properties
58
 * @param values - 1-4 color values following CSS shorthand rules
59
 * @returns Styles object with border-color properties
60
 */
61
function borderColor(...values: Array<?string>): Styles;
62

63
/**
64
 * Generates border-radius shorthand properties
65
 * @param side - Optional corner specification or radius value
66
 * @param radius - Radius value when side is specified
67
 * @returns Styles object with border-radius properties
68
 */
69
function borderRadius(side?: string, radius?: string): Styles;
70

71
/**
72
 * Generates border-style shorthand properties
73
 * @param values - 1-4 style values following CSS shorthand rules
74
 * @returns Styles object with border-style properties
75
 */
76
function borderStyle(...values: Array<?string>): Styles;
77

78
/**
79
 * Generates border-width shorthand properties
80
 * @param values - 1-4 width values following CSS shorthand rules
81
 * @returns Styles object with border-width properties
82
 */
83
function borderWidth(...values: Array<?string | ?number>): Styles;
84
```
85

86
**Usage Examples:**
87

88
```javascript
89
import { border, borderColor, borderRadius, borderStyle, borderWidth } from "polished";
90

91
// Complete border
92
const cardBorder = {
93
  ...border("1px", "solid", "#ddd")  // All sides
94
};
95

96
// Specific side border
97
const topBorder = {
98
  ...border("top", "2px", "solid", "#333")  // Top border only
99
};
100

101
// Border components
102
const borderStyles = {
103
  ...borderWidth("1px", "2px"),           // Top/bottom: 1px, Left/right: 2px
104
  ...borderStyle("solid", "dashed"),      // Top/bottom: solid, Left/right: dashed
105
  ...borderColor("#333", "#666", "#999"), // Top: #333, Sides: #666, Bottom: #999
106
  ...borderRadius("top", "10px")          // Top corners: 10px
107
};
108
```
109

110
### Positioning Shorthands
111

112
Functions for generating position-related shorthand properties.
113

114
```javascript { .api }
115
/**
116
 * Generates position shorthand properties (top, right, bottom, left)
117
 * @param values - 1-4 position values following CSS shorthand rules
118
 * @returns Styles object with position offset properties
119
 */
120
function position(...values: Array<?string | ?number>): Styles;
121

122
/**
123
 * Generates size shorthand properties (width and height)
124
 * @param width - Width value
125
 * @param height - Height value (defaults to width if not provided)
126
 * @returns Styles object with width and height properties
127
 */
128
function size(width: string | number, height?: string | number): Styles;
129
```
130

131
**Usage Examples:**
132

133
```javascript
134
import { position, size } from "polished";
135

136
// Absolute positioning
137
const absoluteElement = {
138
  position: "absolute",
139
  ...position("10px", "20px", "30px", "40px")  // Top, Right, Bottom, Left
140
};
141

142
// Size variations
143
const square = size("100px");           // 100px × 100px
144
const rectangle = size("200px", "150px"); // 200px × 150px
145
const responsive = size("100%", "50vh");  // Full width, half viewport height
146
```
147

148
### Background Shorthands
149

150
Functions for generating background-related shorthand properties.
151

152
```javascript { .api }
153
/**
154
 * Generates background shorthand properties for multiple backgrounds
155
 * @param backgrounds - Array of background configuration objects
156
 * @returns Styles object with background properties
157
 */
158
function backgrounds(...backgrounds: Array<BackgroundConfiguration>): Styles;
159

160
/**
161
 * Generates background-image shorthand for multiple images
162
 * @param images - Array of image URLs or gradient functions
163
 * @returns Styles object with background-image property
164
 */
165
function backgroundImages(...images: Array<string>): Styles;
166
```
167

168
### Animation Shorthands
169

170
Functions for generating animation and transition shorthand properties.
171

172
```javascript { .api }
173
/**
174
 * Generates animation shorthand properties
175
 * @param animations - Array of animation configuration objects
176
 * @returns Styles object with animation properties
177
 */
178
function animation(...animations: Array<AnimationConfiguration>): Styles;
179

180
/**
181
 * Generates transition shorthand properties
182
 * @param transitions - Array of transition configuration objects
183
 * @returns Styles object with transition properties
184
 */
185
function transitions(...transitions: Array<TransitionConfiguration>): Styles;
186
```
187

188
**Usage Examples:**
189

190
```javascript
191
import { animation, transitions } from "polished";
192

193
// Animation definitions
194
const fadeIn = {
195
  ...animation({
196
    name: "fadeIn",
197
    duration: "0.3s",
198
    timingFunction: "ease-out",
199
    fillMode: "forwards"
200
  })
201
};
202

203
// Multiple transitions
204
const buttonTransitions = {
205
  ...transitions(
206
    { property: "background-color", duration: "0.2s" },
207
    { property: "transform", duration: "0.1s", timingFunction: "ease-out" }
208
  )
209
};
210
```
211

212
### Form and Input Shorthands
213

214
Functions for generating form-related shorthand selectors and properties.
215

216
```javascript { .api }
217
/**
218
 * Generates selector string for text input elements
219
 * @param pseudoSelector - Optional pseudo-selector to append
220
 * @returns Selector string targeting text input elements
221
 */
222
function textInputs(pseudoSelector?: string): string;
223

224
/**
225
 * Generates selector string for button elements
226
 * @param pseudoSelector - Optional pseudo-selector to append
227
 * @returns Selector string targeting button elements
228
 */
229
function buttons(pseudoSelector?: string): string;
230
```
231

232
**Usage Examples:**
233

234
```javascript
235
import { textInputs, buttons } from "polished";
236

237
// Styled components usage
238
const StyledInput = styled.input`
239
  ${textInputs()} {
240
    border: 1px solid #ccc;
241
    padding: 8px 12px;
242
    border-radius: 4px;
243
  }
244

245
  ${textInputs(":focus")} {
246
    border-color: #007bff;
247
    outline: none;
248
  }
249
`;
250

251
const StyledButton = styled.button`
252
  ${buttons()} {
253
    background: #007bff;
254
    color: white;
255
    border: none;
256
    padding: 10px 20px;
257
    border-radius: 4px;
258
  }
259

260
  ${buttons(":hover")} {
261
    background: #0056b3;
262
  }
263
`;
264
```
265

266
## Types
267

268
```javascript { .api }
269
interface Styles {
270
  [key: string]: string | number | Styles;
271
}
272

273
interface BackgroundConfiguration {
274
  image?: string;
275
  position?: string;
276
  size?: string;
277
  repeat?: string;
278
  attachment?: string;
279
  origin?: string;
280
  clip?: string;
281
  color?: string;
282
}
283

284
interface AnimationConfiguration {
285
  name: string;
286
  duration?: string;
287
  timingFunction?: string;
288
  delay?: string;
289
  iterationCount?: string;
290
  direction?: string;
291
  fillMode?: string;
292
  playState?: string;
293
}
294

295
interface TransitionConfiguration {
296
  property: string;
297
  duration?: string;
298
  timingFunction?: string;
299
  delay?: string;
300
}
301
```