0
# Styling System
1

2
Enhanced styling system with Windows brush integration, platform-specific colors, and comprehensive style management for Windows-native appearance and theming.
3

4
## Capabilities
5

6
### Style Management
7

8
#### StyleSheet
9

10
Core stylesheet management with Windows-specific optimizations and caching.
11

12
```typescript { .api }
13
/**
14
 * Core stylesheet management with Windows optimizations
15
 * Provides style creation, composition, and performance optimizations
16
 */
17
interface StyleSheet {
18
  /** Create optimized stylesheet */
19
  create<T extends NamedStyles<T>>(styles: T): T;
20

21
  /** Flatten style objects */
22
  flatten<T>(style: T): T;
23

24
  /** Compose multiple styles */
25
  compose<T>(style1: T, style2: T): T;
26

27
  /** Absolute fill object */
28
  absoluteFillObject: {
29
    position: 'absolute';
30
    left: 0;
31
    right: 0;
32
    top: 0;
33
    bottom: 0;
34
  };
35

36
  /** Absolute fill style */
37
  absoluteFill: number;
38

39
  /** Hairline width for thin borders */
40
  hairlineWidth: number;
41
}
42

43
type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };
44

45
declare const StyleSheet: StyleSheet;
46
```
47

48
**Usage Examples:**
49

50
```typescript
51
import { StyleSheet } from 'react-native-windows';
52

53
const styles = StyleSheet.create({
54
  container: {
55
    flex: 1,
56
    backgroundColor: '#f5f5f5',
57
    padding: 16,
58
  },
59
  title: {
60
    fontSize: 24,
61
    fontWeight: 'bold',
62
    color: '#333',
63
    marginBottom: 16,
64
  },
65
  button: {
66
    backgroundColor: '#0078d4',
67
    padding: 12,
68
    borderRadius: 4,
69
    alignItems: 'center',
70
  },
71
  buttonText: {
72
    color: 'white',
73
    fontSize: 16,
74
    fontWeight: '600',
75
  },
76
});
77
```
78

79
### Platform Colors
80

81
#### PlatformColor
82

83
Windows brush-based platform colors that automatically adapt to system themes and high contrast modes.
84

85
```typescript { .api }
86
/**
87
 * Windows brush-based platform colors
88
 * Automatically adapts to system themes and high contrast
89
 */
90
function PlatformColor(...names: string[]): PlatformColor;
91

92
type PlatformColor = {
93
  /** Platform color identifier */
94
  semantic: string[];
95
};
96
```
97

98
**Usage Examples:**
99

100
```typescript
101
import { PlatformColor } from 'react-native-windows';
102

103
// Windows system brush colors
104
const windowsColors = {
105
  // Accent colors
106
  accent: PlatformColor('SystemAccentColor'),
107
  accentLight1: PlatformColor('SystemAccentColorLight1'),
108
  accentLight2: PlatformColor('SystemAccentColorLight2'),
109
  accentLight3: PlatformColor('SystemAccentColorLight3'),
110
  accentDark1: PlatformColor('SystemAccentColorDark1'),
111
  accentDark2: PlatformColor('SystemAccentColorDark2'),
112
  accentDark3: PlatformColor('SystemAccentColorDark3'),
113

114
  // Base colors
115
  altHigh: PlatformColor('SystemAltHighColor'),
116
  altLow: PlatformColor('SystemAltLowColor'),
117
  altMedium: PlatformColor('SystemAltMediumColor'),
118
  altMediumHigh: PlatformColor('SystemAltMediumHighColor'),
119
  altMediumLow: PlatformColor('SystemAltMediumLowColor'),
120

121
  // Base high colors
122
  baseHigh: PlatformColor('SystemBaseHighColor'),
123
  baseLow: PlatformColor('SystemBaseLowColor'),
124
  baseMedium: PlatformColor('SystemBaseMediumColor'),
125
  baseMediumHigh: PlatformColor('SystemBaseMediumHighColor'),
126
  baseMediumLow: PlatformColor('SystemBaseMediumLowColor'),
127

128
  // Chrome colors
129
  chromeAltLow: PlatformColor('SystemChromeAltLowColor'),
130
  chromeBlackHigh: PlatformColor('SystemChromeBlackHighColor'),
131
  chromeBlackLow: PlatformColor('SystemChromeBlackLowColor'),
132
  chromeBlackMedium: PlatformColor('SystemChromeBlackMediumColor'),
133
  chromeBlackMediumLow: PlatformColor('SystemChromeBlackMediumLowColor'),
134
  chromeDisabledHigh: PlatformColor('SystemChromeDisabledHighColor'),
135
  chromeDisabledLow: PlatformColor('SystemChromeDisabledLowColor'),
136
  chromeHigh: PlatformColor('SystemChromeHighColor'),
137
  chromeLow: PlatformColor('SystemChromeLowColor'),
138
  chromeMedium: PlatformColor('SystemChromeMediumColor'),
139
  chromeMediumLow: PlatformColor('SystemChromeMediumLowColor'),
140
  chromeWhite: PlatformColor('SystemChromeWhiteColor'),
141

142
  // List colors
143
  listLow: PlatformColor('SystemListLowColor'),
144
  listMedium: PlatformColor('SystemListMediumColor'),
145
};
146

147
// Usage in styles
148
const platformStyles = StyleSheet.create({
149
  accentButton: {
150
    backgroundColor: PlatformColor('SystemAccentColor'),
151
    borderColor: PlatformColor('SystemAccentColorDark1'),
152
  },
153
  systemBackground: {
154
    backgroundColor: PlatformColor('SystemAltHighColor'),
155
  },
156
  systemText: {
157
    color: PlatformColor('SystemBaseHighColor'),
158
  },
159
});
160
```
161

162
#### DynamicColorIOS
163

164
iOS-specific dynamic color support (limited Windows compatibility for cross-platform code).
165

166
```typescript { .api }
167
/**
168
 * iOS dynamic color support (limited Windows compatibility)
169
 * Enables cross-platform color definitions
170
 */
171
interface DynamicColorIOS {
172
  (descriptor: {
173
    light: string;
174
    dark: string;
175
    highContrastLight?: string;
176
    highContrastDark?: string;
177
  }): any;
178
}
179

180
declare const DynamicColorIOS: DynamicColorIOS;
181
```
182

183
### Color Processing
184

185
#### processColor
186

187
Color processing and normalization utilities for consistent color handling across platforms.
188

189
```typescript { .api }
190
/**
191
 * Color processing and normalization utilities
192
 * Handles color format conversion and validation
193
 */
194
function processColor(color: number | string): number | null;
195
```
196

197
**Usage Examples:**
198

199
```typescript
200
import { processColor } from 'react-native-windows';
201

202
// Process various color formats
203
const colors = {
204
  hexColor: processColor('#ff0000'),        // Red
205
  rgbString: processColor('rgb(255, 0, 0)'), // Red
206
  rgbaString: processColor('rgba(255, 0, 0, 0.5)'), // Semi-transparent red
207
  namedColor: processColor('red'),          // Named color
208
  transparentColor: processColor('transparent'), // Fully transparent
209
  invalidColor: processColor('invalid'),    // Returns null
210
};
211

212
// Use in native modules or advanced styling
213
const nativeColor = processColor('#0078d4');
214
if (nativeColor !== null) {
215
  // Pass to native module
216
  NativeModule.setColor(nativeColor);
217
}
218
```
219

220
## Style Types
221

222
### View Styles
223

224
```typescript { .api }
225
/**
226
 * View styling properties with Windows-specific enhancements
227
 */
228
interface ViewStyle {
229
  // Layout
230
  alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
231
  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
232
  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
233
  aspectRatio?: number;
234
  borderBottomWidth?: number;
235
  borderEndWidth?: number;
236
  borderLeftWidth?: number;
237
  borderRightWidth?: number;
238
  borderStartWidth?: number;
239
  borderTopWidth?: number;
240
  borderWidth?: number;
241
  bottom?: number | string;
242
  display?: 'none' | 'flex';
243
  end?: number | string;
244
  flex?: number;
245
  flexBasis?: number | string;
246
  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
247
  flexGrow?: number;
248
  flexShrink?: number;
249
  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
250
  height?: number | string;
251
  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
252
  left?: number | string;
253
  margin?: number | string;
254
  marginBottom?: number | string;
255
  marginEnd?: number | string;
256
  marginHorizontal?: number | string;
257
  marginLeft?: number | string;
258
  marginRight?: number | string;
259
  marginStart?: number | string;
260
  marginTop?: number | string;
261
  marginVertical?: number | string;
262
  maxHeight?: number | string;
263
  maxWidth?: number | string;
264
  minHeight?: number | string;
265
  minWidth?: number | string;
266
  overflow?: 'visible' | 'hidden' | 'scroll';
267
  padding?: number | string;
268
  paddingBottom?: number | string;
269
  paddingEnd?: number | string;
270
  paddingHorizontal?: number | string;
271
  paddingLeft?: number | string;
272
  paddingRight?: number | string;
273
  paddingStart?: number | string;
274
  paddingTop?: number | string;
275
  paddingVertical?: number | string;
276
  position?: 'absolute' | 'relative';
277
  right?: number | string;
278
  start?: number | string;
279
  top?: number | string;
280
  width?: number | string;
281
  zIndex?: number;
282

283
  // Appearance
284
  backgroundColor?: string | PlatformColor;
285
  borderBottomColor?: string | PlatformColor;
286
  borderBottomEndRadius?: number;
287
  borderBottomLeftRadius?: number;
288
  borderBottomRightRadius?: number;
289
  borderBottomStartRadius?: number;
290
  borderColor?: string | PlatformColor;
291
  borderEndColor?: string | PlatformColor;
292
  borderLeftColor?: string | PlatformColor;
293
  borderRadius?: number;
294
  borderRightColor?: string | PlatformColor;
295
  borderStartColor?: string | PlatformColor;
296
  borderStyle?: 'solid' | 'dotted' | 'dashed';
297
  borderTopColor?: string | PlatformColor;
298
  borderTopEndRadius?: number;
299
  borderTopLeftRadius?: number;
300
  borderTopRightRadius?: number;
301
  borderTopStartRadius?: number;
302
  opacity?: number;
303

304
  // Shadow (Windows specific)
305
  elevation?: number;
306
  shadowColor?: string | PlatformColor;
307
  shadowOffset?: { width: number; height: number };
308
  shadowOpacity?: number;
309
  shadowRadius?: number;
310

311
  // Transform
312
  transform?: Transform[];
313
  transformMatrix?: number[];
314
  rotation?: number;
315
  scaleX?: number;
316
  scaleY?: number;
317
  translateX?: number;
318
  translateY?: number;
319
}
320

321
type Transform =
322
  | { perspective: number }
323
  | { rotate: string }
324
  | { rotateX: string }
325
  | { rotateY: string }
326
  | { rotateZ: string }
327
  | { scale: number }
328
  | { scaleX: number }
329
  | { scaleY: number }
330
  | { translateX: number }
331
  | { translateY: number }
332
  | { skewX: string }
333
  | { skewY: string }
334
  | { matrix: number[] };
335
```
336

337
### Text Styles
338

339
```typescript { .api }
340
/**
341
 * Text styling properties with Windows font support
342
 */
343
interface TextStyle extends ViewStyle {
344
  // Font
345
  color?: string | PlatformColor;
346
  fontFamily?: string;
347
  fontSize?: number;
348
  fontStyle?: 'normal' | 'italic';
349
  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
350
  fontVariant?: FontVariant[];
351

352
  // Layout
353
  letterSpacing?: number;
354
  lineHeight?: number;
355
  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
356
  textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center';
357
  textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through';
358
  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed';
359
  textDecorationColor?: string | PlatformColor;
360
  textShadowColor?: string | PlatformColor;
361
  textShadowOffset?: { width: number; height: number };
362
  textShadowRadius?: number;
363
  textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
364

365
  // Windows specific
366
  includeFontPadding?: boolean;
367
  textBreakStrategy?: 'simple' | 'highQuality' | 'balanced';
368
  writingDirection?: 'auto' | 'ltr' | 'rtl';
369
}
370

371
type FontVariant =
372
  | 'small-caps'
373
  | 'oldstyle-nums'
374
  | 'lining-nums'
375
  | 'tabular-nums'
376
  | 'proportional-nums';
377
```
378

379
### Image Styles
380

381
```typescript { .api }
382
/**
383
 * Image styling properties
384
 */
385
interface ImageStyle extends ViewStyle {
386
  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
387
  tintColor?: string | PlatformColor;
388
  overlayColor?: string | PlatformColor;
389
}
390
```
391

392
## Windows-Specific Styling Features
393

394
### High Contrast Support
395

396
```typescript
397
// Automatic high contrast adaptation
398
const adaptiveStyles = StyleSheet.create({
399
  button: {
400
    backgroundColor: PlatformColor('SystemAccentColor'),
401
    borderColor: PlatformColor('SystemAccentColorDark1'),
402
    borderWidth: 1,
403
  },
404
  text: {
405
    color: PlatformColor('SystemBaseHighColor'),
406
  },
407
  background: {
408
    backgroundColor: PlatformColor('SystemAltHighColor'),
409
  },
410
});
411

412
// Manual high contrast handling
413
const getHighContrastStyles = (isHighContrast: boolean, colors: IHighContrastColors) => {
414
  if (isHighContrast) {
415
    return StyleSheet.create({
416
      button: {
417
        backgroundColor: colors.ButtonFaceColor,
418
        borderColor: colors.ButtonTextColor,
419
        borderWidth: 2, // Increased border in high contrast
420
      },
421
      text: {
422
        color: colors.WindowTextColor,
423
        fontSize: 16, // Larger text in high contrast
424
      },
425
      background: {
426
        backgroundColor: colors.WindowColor,
427
      },
428
    });
429
  }
430

431
  return adaptiveStyles;
432
};
433
```
434

435
### Theme-Aware Colors
436

437
```typescript
438
// Automatic theme adaptation using platform colors
439
const themeAwareStyles = StyleSheet.create({
440
  surface: {
441
    backgroundColor: PlatformColor('SystemChromeMediumLowColor'),
442
    borderColor: PlatformColor('SystemBaseLowColor'),
443
  },
444
  primaryButton: {
445
    backgroundColor: PlatformColor('SystemAccentColor'),
446
    color: PlatformColor('SystemChromeWhiteColor'),
447
  },
448
  secondaryButton: {
449
    backgroundColor: 'transparent',
450
    borderColor: PlatformColor('SystemAccentColor'),
451
    borderWidth: 1,
452
    color: PlatformColor('SystemAccentColor'),
453
  },
454
  text: {
455
    color: PlatformColor('SystemBaseHighColor'),
456
  },
457
  subtleText: {
458
    color: PlatformColor('SystemBaseMediumColor'),
459
  },
460
});
461
```
462

463
### Windows Typography
464

465
```typescript
466
// Windows font stack and typography
467
const typographyStyles = StyleSheet.create({
468
  // Segoe UI font stack
469
  heading1: {
470
    fontFamily: 'Segoe UI',
471
    fontSize: 32,
472
    fontWeight: '300', // Light
473
    lineHeight: 40,
474
  },
475
  heading2: {
476
    fontFamily: 'Segoe UI',
477
    fontSize: 24,
478
    fontWeight: '400', // Regular
479
    lineHeight: 32,
480
  },
481
  body: {
482
    fontFamily: 'Segoe UI',
483
    fontSize: 14,
484
    fontWeight: '400',
485
    lineHeight: 20,
486
  },
487
  caption: {
488
    fontFamily: 'Segoe UI',
489
    fontSize: 12,
490
    fontWeight: '400',
491
    lineHeight: 16,
492
  },
493

494
  // Variable fonts support
495
  variableFont: {
496
    fontFamily: 'Segoe UI Variable',
497
    fontWeight: '350', // Custom weight with variable fonts
498
    fontSize: 16,
499
  },
500
});
501
```
502

503
### Responsive Design
504

505
```typescript
506
import { Dimensions } from 'react-native-windows';
507

508
// Responsive breakpoints
509
const { width } = Dimensions.get('window');
510
const isTablet = width >= 768;
511
const isDesktop = width >= 1024;
512

513
const responsiveStyles = StyleSheet.create({
514
  container: {
515
    padding: isDesktop ? 32 : isTablet ? 24 : 16,
516
    maxWidth: isDesktop ? 1200 : '100%',
517
    alignSelf: 'center',
518
  },
519
  grid: {
520
    flexDirection: isTablet ? 'row' : 'column',
521
    flexWrap: 'wrap',
522
  },
523
  gridItem: {
524
    width: isDesktop ? '25%' : isTablet ? '50%' : '100%',
525
    padding: 8,
526
  },
527
});
528
```
529

530
## Performance Optimizations
531

532
### Style Caching
533

534
```typescript
535
// Use StyleSheet.create for performance
536
const optimizedStyles = StyleSheet.create({
537
  // Styles are cached and optimized
538
  container: {
539
    flex: 1,
540
    backgroundColor: '#f5f5f5',
541
  },
542
});
543

544
// Avoid inline styles for performance
545
// ❌ Poor performance
546
<View style={{ flex: 1, backgroundColor: '#f5f5f5' }} />
547

548
// ✅ Good performance
549
<View style={optimizedStyles.container} />
550
```
551

552
### Style Composition
553

554
```typescript
555
// Compose styles efficiently
556
const baseButton = StyleSheet.create({
557
  button: {
558
    padding: 12,
559
    borderRadius: 4,
560
    alignItems: 'center',
561
    justifyContent: 'center',
562
  },
563
});
564

565
const primaryButton = StyleSheet.create({
566
  button: {
567
    backgroundColor: PlatformColor('SystemAccentColor'),
568
    color: 'white',
569
  },
570
});
571

572
// Compose styles
573
const composedStyle = [baseButton.button, primaryButton.button];
574
```