0
# Style Functions
1

2
Composable style functions that transform component props into CSS properties with theme integration and responsive support. These functions enable systematic styling through props while maintaining theme consistency and responsive behavior.
3

4
## Capabilities
5

6
### Core Style Function System
7

8
Base infrastructure for creating and composing style functions with theme integration.
9

10
```typescript { .api }
11
/**
12
 * Create a style function that transforms props to CSS
13
 * @param options - Style function configuration
14
 * @returns Style transformation function
15
 */
16
function style<PropKey extends string>(options: StyleOptions<PropKey>): StyleFunction<PropKey>;
17

18
interface StyleOptions<PropKey extends string> {
19
  /** CSS property name(s) this function handles */
20
  prop: PropKey;
21
  
22
  /** CSS property name if different from prop */
23
  cssProperty?: string | string[];
24
  
25
  /** Theme key path for value transformation */
26
  themeKey?: string;
27
  
28
  /** Value transformation function */
29
  transform?: TransformFunction;
30
}
31

32
/**
33
 * Style transformation function type
34
 */
35
type StyleFunction<Props> = (props: Props) => CSSObject;
36

37
/**
38
 * Value transformation function
39
 */
40
type TransformFunction = (value: any, theme?: Theme) => any;
41

42
/**
43
 * Extract props interface from style function
44
 */
45
type PropsFor<SomeStyleFunction> = SomeStyleFunction extends StyleFunction<infer Props> 
46
  ? Props 
47
  : never;
48

49
/**
50
 * Get style value from theme path
51
 * @param obj - Object to search
52
 * @param path - Dot notation path
53
 * @returns Value at path
54
 */
55
function getStyleValue(obj: any, path: string): any;
56

57
/**
58
 * Get nested path from object
59
 * @param obj - Object to search
60
 * @param path - Array path
61
 * @returns Value at path
62
 */
63
function getPath(obj: any, path: string[]): any;
64
```
65

66
### Composition System
67

68
Compose multiple style functions into a single function with merged prop interfaces.
69

70
```typescript { .api }
71
/**
72
 * Compose multiple style functions into one
73
 * @param styleFunctions - Style functions to compose
74
 * @returns Composed style function
75
 */
76
function compose<T extends StyleFunction<any>[]>(...styleFunctions: T): ComposedStyleFunction<T>;
77

78
type ComposedStyleFunction<T> = T extends readonly [
79
  StyleFunction<infer P1>,
80
  ...infer Rest
81
] 
82
  ? Rest extends readonly StyleFunction<any>[]
83
    ? StyleFunction<P1 & PropsFor<ComposedStyleFunction<Rest>>>
84
    : StyleFunction<P1>
85
  : StyleFunction<{}>;
86
```
87

88
### Individual Style Function Exports
89

90
Individual style functions that can be imported and used separately for specific CSS properties.
91

92
```typescript { .api }
93
// Border style functions
94
export const border: StyleFunction<{ border?: ResponsiveStyleValue<string | number> }>;
95
export const borderTop: StyleFunction<{ borderTop?: ResponsiveStyleValue<string | number> }>;
96
export const borderRight: StyleFunction<{ borderRight?: ResponsiveStyleValue<string | number> }>;
97
export const borderBottom: StyleFunction<{ borderBottom?: ResponsiveStyleValue<string | number> }>;
98
export const borderLeft: StyleFunction<{ borderLeft?: ResponsiveStyleValue<string | number> }>;
99
export const borderColor: StyleFunction<{ borderColor?: ResponsiveStyleValue<string> }>;
100
export const borderTopColor: StyleFunction<{ borderTopColor?: ResponsiveStyleValue<string> }>;
101
export const borderRightColor: StyleFunction<{ borderRightColor?: ResponsiveStyleValue<string> }>;
102
export const borderBottomColor: StyleFunction<{ borderBottomColor?: ResponsiveStyleValue<string> }>;
103
export const borderLeftColor: StyleFunction<{ borderLeftColor?: ResponsiveStyleValue<string> }>;
104
export const borderRadius: StyleFunction<{ borderRadius?: ResponsiveStyleValue<string | number> }>;
105
export const outline: StyleFunction<{ outline?: ResponsiveStyleValue<string | number> }>;
106
export const outlineColor: StyleFunction<{ outlineColor?: ResponsiveStyleValue<string> }>;
107

108
// Flexbox style functions
109
export const flexDirection: StyleFunction<{ flexDirection?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'> }>;
110
export const flexWrap: StyleFunction<{ flexWrap?: ResponsiveStyleValue<'nowrap' | 'wrap' | 'wrap-reverse'> }>;
111
export const justifyContent: StyleFunction<{ justifyContent?: ResponsiveStyleValue<string> }>;
112
export const alignItems: StyleFunction<{ alignItems?: ResponsiveStyleValue<string> }>;
113
export const alignContent: StyleFunction<{ alignContent?: ResponsiveStyleValue<string> }>;
114
export const alignSelf: StyleFunction<{ alignSelf?: ResponsiveStyleValue<string> }>;
115
export const flex: StyleFunction<{ flex?: ResponsiveStyleValue<string | number> }>;
116
export const flexGrow: StyleFunction<{ flexGrow?: ResponsiveStyleValue<number> }>;
117
export const flexShrink: StyleFunction<{ flexShrink?: ResponsiveStyleValue<number> }>;
118
export const flexBasis: StyleFunction<{ flexBasis?: ResponsiveStyleValue<string | number> }>;
119
export const order: StyleFunction<{ order?: ResponsiveStyleValue<number> }>;
120
export const justifyItems: StyleFunction<{ justifyItems?: ResponsiveStyleValue<string> }>;
121
export const justifySelf: StyleFunction<{ justifySelf?: ResponsiveStyleValue<string> }>;
122

123
// CSS Grid style functions
124
export const gap: StyleFunction<{ gap?: ResponsiveStyleValue<string | number> }>;
125
export const columnGap: StyleFunction<{ columnGap?: ResponsiveStyleValue<string | number> }>;
126
export const rowGap: StyleFunction<{ rowGap?: ResponsiveStyleValue<string | number> }>;
127
export const gridColumn: StyleFunction<{ gridColumn?: ResponsiveStyleValue<string> }>;
128
export const gridRow: StyleFunction<{ gridRow?: ResponsiveStyleValue<string> }>;
129
export const gridArea: StyleFunction<{ gridArea?: ResponsiveStyleValue<string> }>;
130
export const gridAutoFlow: StyleFunction<{ gridAutoFlow?: ResponsiveStyleValue<string> }>;
131
export const gridAutoColumns: StyleFunction<{ gridAutoColumns?: ResponsiveStyleValue<string> }>;
132
export const gridAutoRows: StyleFunction<{ gridAutoRows?: ResponsiveStyleValue<string> }>;
133
export const gridTemplateColumns: StyleFunction<{ gridTemplateColumns?: ResponsiveStyleValue<string> }>;
134
export const gridTemplateRows: StyleFunction<{ gridTemplateRows?: ResponsiveStyleValue<string> }>;
135
export const gridTemplateAreas: StyleFunction<{ gridTemplateAreas?: ResponsiveStyleValue<string> }>;
136

137
// Sizing style functions
138
export const width: StyleFunction<{ width?: ResponsiveStyleValue<string | number> }>;
139
export const height: StyleFunction<{ height?: ResponsiveStyleValue<string | number> }>;
140
export const minWidth: StyleFunction<{ minWidth?: ResponsiveStyleValue<string | number> }>;
141
export const maxWidth: StyleFunction<{ maxWidth?: ResponsiveStyleValue<string | number> }>;
142
export const minHeight: StyleFunction<{ minHeight?: ResponsiveStyleValue<string | number> }>;
143
export const maxHeight: StyleFunction<{ maxHeight?: ResponsiveStyleValue<string | number> }>;
144
export const sizeWidth: StyleFunction<{ sizeWidth?: ResponsiveStyleValue<string | number> }>;
145
export const sizeHeight: StyleFunction<{ sizeHeight?: ResponsiveStyleValue<string | number> }>;
146
export const boxSizing: StyleFunction<{ boxSizing?: ResponsiveStyleValue<'border-box' | 'content-box'> }>;
147

148
// Typography style functions
149
export const fontFamily: StyleFunction<{ fontFamily?: ResponsiveStyleValue<string> }>;
150
export const fontSize: StyleFunction<{ fontSize?: ResponsiveStyleValue<string | number> }>;
151
export const fontStyle: StyleFunction<{ fontStyle?: ResponsiveStyleValue<string> }>;
152
export const fontWeight: StyleFunction<{ fontWeight?: ResponsiveStyleValue<string | number> }>;
153
export const letterSpacing: StyleFunction<{ letterSpacing?: ResponsiveStyleValue<string | number> }>;
154
export const lineHeight: StyleFunction<{ lineHeight?: ResponsiveStyleValue<string | number> }>;
155
export const textAlign: StyleFunction<{ textAlign?: ResponsiveStyleValue<string> }>;
156
export const textTransform: StyleFunction<{ textTransform?: ResponsiveStyleValue<string> }>;
157
export const textDecoration: StyleFunction<{ textDecoration?: ResponsiveStyleValue<string> }>;
158

159
// Position style functions
160
export const position: StyleFunction<{ position?: ResponsiveStyleValue<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'> }>;
161
export const top: StyleFunction<{ top?: ResponsiveStyleValue<string | number> }>;
162
export const right: StyleFunction<{ right?: ResponsiveStyleValue<string | number> }>;
163
export const bottom: StyleFunction<{ bottom?: ResponsiveStyleValue<string | number> }>;
164
export const left: StyleFunction<{ left?: ResponsiveStyleValue<string | number> }>;
165
export const zIndex: StyleFunction<{ zIndex?: ResponsiveStyleValue<number> }>;
166

167
// Palette/Color style functions
168
export const color: StyleFunction<{ color?: ResponsiveStyleValue<string> }>;
169
export const bgcolor: StyleFunction<{ bgcolor?: ResponsiveStyleValue<string> }>;
170
export const backgroundColor: StyleFunction<{ backgroundColor?: ResponsiveStyleValue<string> }>;
171

172
// Display style function
173
export const display: StyleFunction<{ display?: ResponsiveStyleValue<string> }>;
174

175
// Spacing individual functions
176
export const margin: StyleFunction<{ margin?: ResponsiveStyleValue<string | number> }>;
177
export const marginTop: StyleFunction<{ marginTop?: ResponsiveStyleValue<string | number> }>;
178
export const marginRight: StyleFunction<{ marginRight?: ResponsiveStyleValue<string | number> }>;
179
export const marginBottom: StyleFunction<{ marginBottom?: ResponsiveStyleValue<string | number> }>;
180
export const marginLeft: StyleFunction<{ marginLeft?: ResponsiveStyleValue<string | number> }>;
181
export const marginX: StyleFunction<{ marginX?: ResponsiveStyleValue<string | number> }>;
182
export const marginY: StyleFunction<{ marginY?: ResponsiveStyleValue<string | number> }>;
183
export const padding: StyleFunction<{ padding?: ResponsiveStyleValue<string | number> }>;
184
export const paddingTop: StyleFunction<{ paddingTop?: ResponsiveStyleValue<string | number> }>;
185
export const paddingRight: StyleFunction<{ paddingRight?: ResponsiveStyleValue<string | number> }>;
186
export const paddingBottom: StyleFunction<{ paddingBottom?: ResponsiveStyleValue<string | number> }>;
187
export const paddingLeft: StyleFunction<{ paddingLeft?: ResponsiveStyleValue<string | number> }>;
188
export const paddingX: StyleFunction<{ paddingX?: ResponsiveStyleValue<string | number> }>;
189
export const paddingY: StyleFunction<{ paddingY?: ResponsiveStyleValue<string | number> }>;
190
```
191

192
**Usage Examples:**
193

194
```typescript
195
import { border, borderRadius, flexDirection, gap } from "@mui/system";
196

197
// Create custom styled component using individual functions
198
const CustomComponent = styled('div')(
199
  border,
200
  borderRadius,
201
  flexDirection,
202
  gap
203
);
204

205
// Use with individual props
206
<CustomComponent 
207
  border={1}
208
  borderRadius={2}
209
  flexDirection="column"
210
  gap={2}
211
>
212
  Content
213
</CustomComponent>
214
```
215

216
### Spacing Functions
217

218
Handle margin and padding properties with theme spacing values and responsive behavior.
219

220
```typescript { .api }
221
/**
222
 * Complete spacing style function (margin + padding)
223
 */
224
const spacing: StyleFunction<SpacingProps>;
225

226
/**
227
 * Margin-only style function
228
 */
229
const margin: StyleFunction<MarginProps>;
230

231
/**
232
 * Padding-only style function
233
 */
234
const padding: StyleFunction<PaddingProps>;
235

236
interface SpacingProps {
237
  /** All margin and padding */
238
  m?: ResponsiveStyleValue<number | string>;
239
  p?: ResponsiveStyleValue<number | string>;
240
  
241
  /** Margin directions */
242
  mt?: ResponsiveStyleValue<number | string>;
243
  mr?: ResponsiveStyleValue<number | string>;
244
  mb?: ResponsiveStyleValue<number | string>;
245
  ml?: ResponsiveStyleValue<number | string>;
246
  mx?: ResponsiveStyleValue<number | string>;
247
  my?: ResponsiveStyleValue<number | string>;
248
  
249
  /** Padding directions */
250
  pt?: ResponsiveStyleValue<number | string>;
251
  pr?: ResponsiveStyleValue<number | string>;
252
  pb?: ResponsiveStyleValue<number | string>;
253
  pl?: ResponsiveStyleValue<number | string>;
254
  px?: ResponsiveStyleValue<number | string>;
255
  py?: ResponsiveStyleValue<number | string>;
256
  
257
  /** CSS margin/padding properties */
258
  margin?: ResponsiveStyleValue<number | string>;
259
  padding?: ResponsiveStyleValue<number | string>;
260
  marginTop?: ResponsiveStyleValue<number | string>;
261
  marginRight?: ResponsiveStyleValue<number | string>;
262
  marginBottom?: ResponsiveStyleValue<number | string>;
263
  marginLeft?: ResponsiveStyleValue<number | string>;
264
  paddingTop?: ResponsiveStyleValue<number | string>;
265
  paddingRight?: ResponsiveStyleValue<number | string>;
266
  paddingBottom?: ResponsiveStyleValue<number | string>;
267
  paddingLeft?: ResponsiveStyleValue<number | string>;
268
}
269

270
interface MarginProps {
271
  m?: ResponsiveStyleValue<number | string>;
272
  mt?: ResponsiveStyleValue<number | string>;
273
  mr?: ResponsiveStyleValue<number | string>;
274
  mb?: ResponsiveStyleValue<number | string>;
275
  ml?: ResponsiveStyleValue<number | string>;
276
  mx?: ResponsiveStyleValue<number | string>;
277
  my?: ResponsiveStyleValue<number | string>;
278
  margin?: ResponsiveStyleValue<number | string>;
279
  marginTop?: ResponsiveStyleValue<number | string>;
280
  marginRight?: ResponsiveStyleValue<number | string>;
281
  marginBottom?: ResponsiveStyleValue<number | string>;
282
  marginLeft?: ResponsiveStyleValue<number | string>;
283
}
284

285
interface PaddingProps {
286
  p?: ResponsiveStyleValue<number | string>;
287
  pt?: ResponsiveStyleValue<number | string>;
288
  pr?: ResponsiveStyleValue<number | string>;
289
  pb?: ResponsiveStyleValue<number | string>;
290
  pl?: ResponsiveStyleValue<number | string>;
291
  px?: ResponsiveStyleValue<number | string>;
292
  py?: ResponsiveStyleValue<number | string>;
293
  padding?: ResponsiveStyleValue<number | string>;
294
  paddingTop?: ResponsiveStyleValue<number | string>;
295
  paddingRight?: ResponsiveStyleValue<number | string>;
296
  paddingBottom?: ResponsiveStyleValue<number | string>;
297
  paddingLeft?: ResponsiveStyleValue<number | string>;
298
}
299

300
/**
301
 * Create unary spacing function
302
 * @param transformer - Value transformation function
303
 * @returns Spacing transform function
304
 */
305
function createUnarySpacing<Transformer extends TransformFunction>(
306
  transformer: Transformer
307
): (value: number | string) => string;
308

309
/**
310
 * Create unary unit function
311
 * @param unit - CSS unit string
312
 * @returns Unit transform function
313
 */
314
function createUnaryUnit(unit: string): (value: number | string) => string;
315

316
/**
317
 * Get transformed spacing value
318
 * @param transformer - Transformation function
319
 * @param propValue - Raw prop value
320
 * @returns Transformed CSS value
321
 */
322
function getValue<T>(transformer: T, propValue: unknown): T extends TransformFunction ? ReturnType<T> : unknown;
323
```
324

325
**Usage Examples:**
326

327
```typescript
328
import { spacing, margin, padding } from "@mui/system";
329

330
// Component with spacing props
331
<Box m={2} p={1} mt={3}>
332
  {/* margin: 16px, padding: 8px, margin-top: 24px */}
333
</Box>
334

335
// Responsive spacing
336
<Box 
337
  p={{ xs: 1, sm: 2, md: 3 }}
338
  m={{ xs: 0, md: 2 }}
339
>
340
  Responsive spacing
341
</Box>
342

343
// Using spacing functions directly
344
const spacedStyles = spacing({
345
  m: 2,
346
  p: { xs: 1, md: 2 },
347
});
348
```
349

350
### Typography Functions
351

352
Handle font properties, text styling, and typography system integration.
353

354
```typescript { .api }
355
/**
356
 * Complete typography style function
357
 */
358
const typography: StyleFunction<TypographyProps>;
359

360
/**
361
 * Typography variant function
362
 */
363
const typographyVariant: StyleFunction<{ variant: string }>;
364

365
interface TypographyProps {
366
  /** Typography variant from theme */
367
  variant?: ResponsiveStyleValue<string>;
368
  
369
  /** Font family */
370
  fontFamily?: ResponsiveStyleValue<string>;
371
  
372
  /** Font size */
373
  fontSize?: ResponsiveStyleValue<number | string>;
374
  
375
  /** Font style */
376
  fontStyle?: ResponsiveStyleValue<string>;
377
  
378
  /** Font weight */
379
  fontWeight?: ResponsiveStyleValue<number | string>;
380
  
381
  /** Letter spacing */
382
  letterSpacing?: ResponsiveStyleValue<number | string>;
383
  
384
  /** Line height */
385
  lineHeight?: ResponsiveStyleValue<number | string>;
386
  
387
  /** Text alignment */
388
  textAlign?: ResponsiveStyleValue<string>;
389
  
390
  /** Text transform */
391
  textTransform?: ResponsiveStyleValue<string>;
392
}
393

394
// Individual typography functions
395
const fontFamily: StyleFunction<{ fontFamily: ResponsiveStyleValue<string> }>;
396
const fontSize: StyleFunction<{ fontSize: ResponsiveStyleValue<number | string> }>;
397
const fontStyle: StyleFunction<{ fontStyle: ResponsiveStyleValue<string> }>;
398
const fontWeight: StyleFunction<{ fontWeight: ResponsiveStyleValue<number | string> }>;
399
const letterSpacing: StyleFunction<{ letterSpacing: ResponsiveStyleValue<number | string> }>;
400
const lineHeight: StyleFunction<{ lineHeight: ResponsiveStyleValue<number | string> }>;
401
const textAlign: StyleFunction<{ textAlign: ResponsiveStyleValue<string> }>;
402
const textTransform: StyleFunction<{ textTransform: ResponsiveStyleValue<string> }>;
403
```
404

405
**Usage Examples:**
406

407
```typescript
408
import { typography } from "@mui/system";
409

410
// Typography props on components
411
<Box 
412
  fontSize="h4.fontSize"
413
  fontWeight="bold"
414
  textAlign="center"
415
>
416
  Styled text
417
</Box>
418

419
// Responsive typography
420
<Box
421
  fontSize={{ xs: '1rem', md: '1.5rem' }}
422
  fontWeight={{ xs: 400, md: 600 }}
423
>
424
  Responsive text
425
</Box>
426
```
427

428
### Border Functions
429

430
Handle border properties including width, style, color, and radius with theme integration.
431

432
```typescript { .api }
433
/**
434
 * Complete border style function
435
 */
436
const borders: StyleFunction<BordersProps>;
437

438
interface BordersProps {
439
  /** Border shorthand */
440
  border?: ResponsiveStyleValue<number | string>;
441
  borderTop?: ResponsiveStyleValue<number | string>;
442
  borderRight?: ResponsiveStyleValue<number | string>;
443
  borderBottom?: ResponsiveStyleValue<number | string>;
444
  borderLeft?: ResponsiveStyleValue<number | string>;
445
  
446
  /** Border color */
447
  borderColor?: ResponsiveStyleValue<string>;
448
  borderTopColor?: ResponsiveStyleValue<string>;
449
  borderRightColor?: ResponsiveStyleValue<string>;
450
  borderBottomColor?: ResponsiveStyleValue<string>;
451
  borderLeftColor?: ResponsiveStyleValue<string>;
452
  
453
  /** Border radius */
454
  borderRadius?: ResponsiveStyleValue<number | string>;
455
  borderTopLeftRadius?: ResponsiveStyleValue<number | string>;
456
  borderTopRightRadius?: ResponsiveStyleValue<number | string>;
457
  borderBottomLeftRadius?: ResponsiveStyleValue<number | string>;
458
  borderBottomRightRadius?: ResponsiveStyleValue<number | string>;
459
}
460

461
// Individual border functions
462
const border: StyleFunction<{ border: ResponsiveStyleValue<number | string> }>;
463
const borderTop: StyleFunction<{ borderTop: ResponsiveStyleValue<number | string> }>;
464
const borderRight: StyleFunction<{ borderRight: ResponsiveStyleValue<number | string> }>;
465
const borderBottom: StyleFunction<{ borderBottom: ResponsiveStyleValue<number | string> }>;
466
const borderLeft: StyleFunction<{ borderLeft: ResponsiveStyleValue<number | string> }>;
467
const borderColor: StyleFunction<{ borderColor: ResponsiveStyleValue<string> }>;
468
const borderTopColor: StyleFunction<{ borderTopColor: ResponsiveStyleValue<string> }>;
469
const borderRightColor: StyleFunction<{ borderRightColor: ResponsiveStyleValue<string> }>;
470
const borderBottomColor: StyleFunction<{ borderBottomColor: ResponsiveStyleValue<string> }>;
471
const borderLeftColor: StyleFunction<{ borderLeftColor: ResponsiveStyleValue<string> }>;
472
const borderRadius: StyleFunction<{ borderRadius: ResponsiveStyleValue<number | string> }>;
473
```
474

475
**Usage Examples:**
476

477
```typescript
478
import { borders } from "@mui/system";
479

480
// Border props on components
481
<Box 
482
  border={1}
483
  borderColor="primary.main"
484
  borderRadius={2}
485
>
486
  Bordered content
487
</Box>
488

489
// Individual border sides
490
<Box
491
  borderTop={1}
492
  borderBottom={2}
493
  borderColor="grey.300"
494
>
495
  Partial borders
496
</Box>
497
```
498

499
### Color/Palette Functions
500

501
Handle color and background-color properties with theme palette integration.
502

503
```typescript { .api }
504
/**
505
 * Complete palette style function
506
 */
507
const palette: StyleFunction<PaletteProps>;
508

509
interface PaletteProps {
510
  /** Text color */
511
  color?: ResponsiveStyleValue<string>;
512
  
513
  /** Background color */
514
  bgcolor?: ResponsiveStyleValue<string>;
515
  backgroundColor?: ResponsiveStyleValue<string>;
516
}
517

518
// Individual color functions
519
const color: StyleFunction<{ color: ResponsiveStyleValue<string> }>;
520
const bgcolor: StyleFunction<{ bgcolor: ResponsiveStyleValue<string> }>;
521
```
522

523
**Usage Examples:**
524

525
```typescript
526
import { palette } from "@mui/system";
527

528
// Color props on components
529
<Box 
530
  color="primary.main"
531
  bgcolor="background.paper"
532
>
533
  Colored content
534
</Box>
535

536
// Responsive colors
537
<Box
538
  color={{ xs: 'text.secondary', md: 'primary.main' }}
539
  bgcolor={{ xs: 'grey.100', md: 'primary.light' }}
540
>
541
  Responsive colors
542
</Box>
543
```
544

545
### Sizing Functions
546

547
Handle width, height, and dimension properties with theme integration.
548

549
```typescript { .api }
550
/**
551
 * Complete sizing style function
552
 */
553
const sizing: StyleFunction<SizingProps>;
554

555
interface SizingProps {
556
  /** Width properties */
557
  width?: ResponsiveStyleValue<number | string>;
558
  maxWidth?: ResponsiveStyleValue<number | string>;
559
  minWidth?: ResponsiveStyleValue<number | string>;
560
  
561
  /** Height properties */
562
  height?: ResponsiveStyleValue<number | string>;
563
  maxHeight?: ResponsiveStyleValue<number | string>;
564
  minHeight?: ResponsiveStyleValue<number | string>;
565
  
566
  /** Box sizing */
567
  boxSizing?: ResponsiveStyleValue<string>;
568
}
569

570
// Individual sizing functions
571
const width: StyleFunction<{ width: ResponsiveStyleValue<number | string> }>;
572
const maxWidth: StyleFunction<{ maxWidth: ResponsiveStyleValue<number | string> }>;
573
const minWidth: StyleFunction<{ minWidth: ResponsiveStyleValue<number | string> }>;
574
const height: StyleFunction<{ height: ResponsiveStyleValue<number | string> }>;
575
const maxHeight: StyleFunction<{ maxHeight: ResponsiveStyleValue<number | string> }>;
576
const minHeight: StyleFunction<{ minHeight: ResponsiveStyleValue<number | string> }>;
577
const sizeWidth: StyleFunction<{ sizeWidth: ResponsiveStyleValue<number | string> }>;
578
const sizeHeight: StyleFunction<{ sizeHeight: ResponsiveStyleValue<number | string> }>;
579
const boxSizing: StyleFunction<{ boxSizing: ResponsiveStyleValue<string> }>;
580
```
581

582
### Flexbox Functions
583

584
Handle flexbox container and item properties for flexible layouts.
585

586
```typescript { .api }
587
/**
588
 * Complete flexbox style function
589
 */
590
const flexbox: StyleFunction<FlexboxProps>;
591

592
interface FlexboxProps {
593
  /** Flex container properties */
594
  flexDirection?: ResponsiveStyleValue<string>;
595
  flexWrap?: ResponsiveStyleValue<string>;
596
  justifyContent?: ResponsiveStyleValue<string>;
597
  alignItems?: ResponsiveStyleValue<string>;
598
  alignContent?: ResponsiveStyleValue<string>;
599
  
600
  /** Flex item properties */
601
  flex?: ResponsiveStyleValue<number | string>;
602
  flexGrow?: ResponsiveStyleValue<number>;
603
  flexShrink?: ResponsiveStyleValue<number>;
604
  flexBasis?: ResponsiveStyleValue<number | string>;
605
  alignSelf?: ResponsiveStyleValue<string>;
606
  order?: ResponsiveStyleValue<number>;
607
  
608
  /** Additional properties */
609
  justifyItems?: ResponsiveStyleValue<string>;
610
  justifySelf?: ResponsiveStyleValue<string>;
611
}
612

613
// Individual flexbox functions
614
const flexDirection: StyleFunction<{ flexDirection: ResponsiveStyleValue<string> }>;
615
const flexWrap: StyleFunction<{ flexWrap: ResponsiveStyleValue<string> }>;
616
const justifyContent: StyleFunction<{ justifyContent: ResponsiveStyleValue<string> }>;
617
const alignItems: StyleFunction<{ alignItems: ResponsiveStyleValue<string> }>;
618
const alignContent: StyleFunction<{ alignContent: ResponsiveStyleValue<string> }>;
619
const flex: StyleFunction<{ flex: ResponsiveStyleValue<number | string> }>;
620
const flexGrow: StyleFunction<{ flexGrow: ResponsiveStyleValue<number> }>;
621
const flexShrink: StyleFunction<{ flexShrink: ResponsiveStyleValue<number> }>;
622
const flexBasis: StyleFunction<{ flexBasis: ResponsiveStyleValue<number | string> }>;
623
const alignSelf: StyleFunction<{ alignSelf: ResponsiveStyleValue<string> }>;
624
const order: StyleFunction<{ order: ResponsiveStyleValue<number> }>;
625
const justifyItems: StyleFunction<{ justifyItems: ResponsiveStyleValue<string> }>;
626
const justifySelf: StyleFunction<{ justifySelf: ResponsiveStyleValue<string> }>;
627
```
628

629
### CSS Grid Functions
630

631
Handle CSS Grid container and item properties for grid layouts.
632

633
```typescript { .api }
634
/**
635
 * CSS Grid style function
636
 */
637
const grid: StyleFunction<CssGridProps>;
638

639
interface CssGridProps {
640
  /** Grid container properties */
641
  gridTemplateColumns?: ResponsiveStyleValue<string>;
642
  gridTemplateRows?: ResponsiveStyleValue<string>;
643
  gridTemplateAreas?: ResponsiveStyleValue<string>;
644
  gridAutoColumns?: ResponsiveStyleValue<string>;
645
  gridAutoRows?: ResponsiveStyleValue<string>;
646
  gridAutoFlow?: ResponsiveStyleValue<string>;
647
  
648
  /** Grid item properties */
649
  gridColumn?: ResponsiveStyleValue<string>;
650
  gridRow?: ResponsiveStyleValue<string>;
651
  gridArea?: ResponsiveStyleValue<string>;
652
  
653
  /** Gap properties */
654
  gap?: ResponsiveStyleValue<number | string>;
655
  rowGap?: ResponsiveStyleValue<number | string>;
656
  columnGap?: ResponsiveStyleValue<number | string>;
657
}
658

659
// Individual grid functions
660
const gap: StyleFunction<{ gap: ResponsiveStyleValue<number | string> }>;
661
const columnGap: StyleFunction<{ columnGap: ResponsiveStyleValue<number | string> }>;
662
const rowGap: StyleFunction<{ rowGap: ResponsiveStyleValue<number | string> }>;
663
const gridColumn: StyleFunction<{ gridColumn: ResponsiveStyleValue<string> }>;
664
const gridRow: StyleFunction<{ gridRow: ResponsiveStyleValue<string> }>;
665
const gridArea: StyleFunction<{ gridArea: ResponsiveStyleValue<string> }>;
666
const gridAutoFlow: StyleFunction<{ gridAutoFlow: ResponsiveStyleValue<string> }>;
667
const gridAutoColumns: StyleFunction<{ gridAutoColumns: ResponsiveStyleValue<string> }>;
668
const gridAutoRows: StyleFunction<{ gridAutoRows: ResponsiveStyleValue<string> }>;
669
const gridTemplateColumns: StyleFunction<{ gridTemplateColumns: ResponsiveStyleValue<string> }>;
670
const gridTemplateRows: StyleFunction<{ gridTemplateRows: ResponsiveStyleValue<string> }>;
671
const gridTemplateAreas: StyleFunction<{ gridTemplateAreas: ResponsiveStyleValue<string> }>;
672
```
673

674
### Position Functions
675

676
Handle positioning properties including position, coordinates, and z-index.
677

678
```typescript { .api }
679
/**
680
 * Position style function
681
 */
682
const positions: StyleFunction<PositionsProps>;
683

684
interface PositionsProps {
685
  /** Position type */
686
  position?: ResponsiveStyleValue<string>;
687
  
688
  /** Coordinates */
689
  top?: ResponsiveStyleValue<number | string>;
690
  right?: ResponsiveStyleValue<number | string>;
691
  bottom?: ResponsiveStyleValue<number | string>;
692
  left?: ResponsiveStyleValue<number | string>;
693
  
694
  /** Layering */
695
  zIndex?: ResponsiveStyleValue<number | string>;
696
}
697
```
698

699
### Display Functions
700

701
Handle display, visibility, and overflow properties.
702

703
```typescript { .api }
704
/**
705
 * Display style function
706
 */
707
const display: StyleFunction<DisplayProps>;
708

709
interface DisplayProps {
710
  /** Display type */
711
  display?: ResponsiveStyleValue<string>;
712
  displayPrint?: ResponsiveStyleValue<string>;
713
  
714
  /** Overflow */
715
  overflow?: ResponsiveStyleValue<string>;
716
  textOverflow?: ResponsiveStyleValue<string>;
717
  
718
  /** Visibility */
719
  visibility?: ResponsiveStyleValue<string>;
720
  whiteSpace?: ResponsiveStyleValue<string>;
721
}
722
```
723

724
### Shadow Functions
725

726
Handle box-shadow properties with theme shadow values.
727

728
```typescript { .api }
729
/**
730
 * Shadow style function
731
 */
732
const shadows: StyleFunction<ShadowsProps>;
733

734
interface ShadowsProps {
735
  /** Box shadow */
736
  boxShadow?: ResponsiveStyleValue<number | string>;
737
}
738
```
739

740
## Function Integration
741

742
All style functions integrate seamlessly with:
743

744
- **Theme System**: Automatic theme value resolution for colors, spacing, breakpoints
745
- **Responsive Design**: Object syntax for breakpoint-specific values
746
- **sx Prop**: All style functions work within sx prop context
747
- **Component Props**: Direct usage as component props with full TypeScript support
748
- **Composition**: Functions can be composed together for reusable styling patterns