Style.typed constructor

Style.typed({
  1. CssColor? color,
  2. CssColor? backgroundColor,
  3. CssColor? borderColor,
  4. CssColor? fill,
  5. CssDisplay? display,
  6. CssPosition? position,
  7. CssLength? width,
  8. CssLength? height,
  9. CssLength? minWidth,
  10. CssLength? minHeight,
  11. CssLength? maxWidth,
  12. CssLength? maxHeight,
  13. CssSpacing? margin,
  14. CssLength? marginTop,
  15. CssLength? marginRight,
  16. CssLength? marginBottom,
  17. CssLength? marginLeft,
  18. CssSpacing? padding,
  19. CssLength? paddingTop,
  20. CssLength? paddingRight,
  21. CssLength? paddingBottom,
  22. CssLength? paddingLeft,
  23. CssLength? top,
  24. CssLength? right,
  25. CssLength? bottom,
  26. CssLength? left,
  27. CssFlexDirection? flexDirection,
  28. CssFlexWrap? flexWrap,
  29. CssJustifyContent? justifyContent,
  30. CssAlignItems? alignItems,
  31. CssAlignSelf? alignSelf,
  32. CssAlignContent? alignContent,
  33. CssNumber? flexGrow,
  34. CssNumber? flexShrink,
  35. CssLength? gap,
  36. CssLength? fontSize,
  37. CssFontWeight? fontWeight,
  38. CssFontFamily? fontFamily,
  39. CssFontStyle? fontStyle,
  40. CssTextAlign? textAlign,
  41. CssTextDecoration? textDecoration,
  42. CssTextTransform? textTransform,
  43. CssWhiteSpace? whiteSpace,
  44. CssWordBreak? wordBreak,
  45. CssNumber? lineHeight,
  46. CssLength? letterSpacing,
  47. CssBorder? border,
  48. CssBorder? borderTop,
  49. CssBorder? borderRight,
  50. CssBorder? borderBottom,
  51. CssBorder? borderLeft,
  52. CssLength? borderRadius,
  53. CssNumber? opacity,
  54. CssOverflow? overflow,
  55. CssOverflow? overflowX,
  56. CssOverflow? overflowY,
  57. CssZIndex? zIndex,
  58. CssCursor? cursor,
  59. CssTransition? transition,
  60. String? transform,
  61. String? boxShadow,
  62. String? backdropFilter,
  63. String? background,
  64. String? flex,
  65. String? gridTemplateColumns,
  66. Stylesheet? css,
})

Type-safe constructor with CSS value types.

Example:

Style.v2(
  display: CssDisplay.flex,
  flexDirection: CssFlexDirection.column,
  justifyContent: CssJustifyContent.center,
  alignItems: CssAlignItems.center,
  gap: CssLength.rem(1),
  // Single value padding
  padding: CssSpacing.all(CssLength.px(16)),
  // Or multi-value: vertical | horizontal
  margin: CssSpacing.symmetric(CssLength.px(10), CssLength.px(20)),
  // Or all four sides: top | right | bottom | left
  // margin: CssSpacing.trbl(top, right, bottom, left),
  backgroundColor: CssColor.hex('f5f5f5'),
  color: CssColor.variable('text-primary'),
  borderRadius: CssLength.px(8),
)

Implementation

Style.typed({
  // Colors
  CssColor? color,
  CssColor? backgroundColor,
  CssColor? borderColor,
  CssColor? fill,
  // Layout
  CssDisplay? display,
  CssPosition? position,
  // Sizing
  CssLength? width,
  CssLength? height,
  CssLength? minWidth,
  CssLength? minHeight,
  CssLength? maxWidth,
  CssLength? maxHeight,
  // Spacing (CssSpacing supports multi-value shorthand: all, symmetric, trbl)
  CssSpacing? margin,
  CssLength? marginTop,
  CssLength? marginRight,
  CssLength? marginBottom,
  CssLength? marginLeft,
  CssSpacing? padding,
  CssLength? paddingTop,
  CssLength? paddingRight,
  CssLength? paddingBottom,
  CssLength? paddingLeft,
  // Position offsets
  CssLength? top,
  CssLength? right,
  CssLength? bottom,
  CssLength? left,
  // Flexbox
  CssFlexDirection? flexDirection,
  CssFlexWrap? flexWrap,
  CssJustifyContent? justifyContent,
  CssAlignItems? alignItems,
  CssAlignSelf? alignSelf,
  CssAlignContent? alignContent,
  CssNumber? flexGrow,
  CssNumber? flexShrink,
  CssLength? gap,
  // Typography
  CssLength? fontSize,
  CssFontWeight? fontWeight,
  CssFontFamily? fontFamily,
  CssFontStyle? fontStyle,
  CssTextAlign? textAlign,
  CssTextDecoration? textDecoration,
  CssTextTransform? textTransform,
  CssWhiteSpace? whiteSpace,
  CssWordBreak? wordBreak,
  CssNumber? lineHeight,
  CssLength? letterSpacing,
  // Borders
  CssBorder? border,
  CssBorder? borderTop,
  CssBorder? borderRight,
  CssBorder? borderBottom,
  CssBorder? borderLeft,
  CssLength? borderRadius,
  // Visual
  CssNumber? opacity,
  CssOverflow? overflow,
  CssOverflow? overflowX,
  CssOverflow? overflowY,
  CssZIndex? zIndex,
  CssCursor? cursor,
  // Effects
  CssTransition? transition,
  // Complex properties (keep as String for flexibility)
  String? transform,
  String? boxShadow,
  String? backdropFilter,
  String? background,
  String? flex,
  String? gridTemplateColumns,
  Stylesheet? css,
}) : stylesheet = css {
  // Colors
  if (color != null) _properties['color'] = color.toCss();
  if (backgroundColor != null) {
    _properties['background-color'] = backgroundColor.toCss();
  }
  if (borderColor != null) _properties['border-color'] = borderColor.toCss();
  if (fill != null) _properties['fill'] = fill.toCss();

  // Layout
  if (display != null) _properties['display'] = display.toCss();
  if (position != null) _properties['position'] = position.toCss();

  // Sizing
  if (width != null) _properties['width'] = width.toCss();
  if (height != null) _properties['height'] = height.toCss();
  if (minWidth != null) _properties['min-width'] = minWidth.toCss();
  if (minHeight != null) _properties['min-height'] = minHeight.toCss();
  if (maxWidth != null) _properties['max-width'] = maxWidth.toCss();
  if (maxHeight != null) _properties['max-height'] = maxHeight.toCss();

  // Spacing
  if (margin != null) _properties['margin'] = margin.toCss();
  if (marginTop != null) _properties['margin-top'] = marginTop.toCss();
  if (marginRight != null) _properties['margin-right'] = marginRight.toCss();
  if (marginBottom != null) {
    _properties['margin-bottom'] = marginBottom.toCss();
  }
  if (marginLeft != null) _properties['margin-left'] = marginLeft.toCss();
  if (padding != null) _properties['padding'] = padding.toCss();
  if (paddingTop != null) _properties['padding-top'] = paddingTop.toCss();
  if (paddingRight != null) {
    _properties['padding-right'] = paddingRight.toCss();
  }
  if (paddingBottom != null) {
    _properties['padding-bottom'] = paddingBottom.toCss();
  }
  if (paddingLeft != null) _properties['padding-left'] = paddingLeft.toCss();

  // Position offsets
  if (top != null) _properties['top'] = top.toCss();
  if (right != null) _properties['right'] = right.toCss();
  if (bottom != null) _properties['bottom'] = bottom.toCss();
  if (left != null) _properties['left'] = left.toCss();

  // Flexbox
  if (flexDirection != null) {
    _properties['flex-direction'] = flexDirection.toCss();
  }
  if (flexWrap != null) _properties['flex-wrap'] = flexWrap.toCss();
  if (justifyContent != null) {
    _properties['justify-content'] = justifyContent.toCss();
  }
  if (alignItems != null) _properties['align-items'] = alignItems.toCss();
  if (alignSelf != null) _properties['align-self'] = alignSelf.toCss();
  if (alignContent != null) {
    _properties['align-content'] = alignContent.toCss();
  }
  if (flexGrow != null) _properties['flex-grow'] = flexGrow.toCss();
  if (flexShrink != null) _properties['flex-shrink'] = flexShrink.toCss();
  if (gap != null) _properties['gap'] = gap.toCss();

  // Typography
  if (fontSize != null) _properties['font-size'] = fontSize.toCss();
  if (fontWeight != null) _properties['font-weight'] = fontWeight.toCss();
  if (fontFamily != null) _properties['font-family'] = fontFamily.toCss();
  if (fontStyle != null) _properties['font-style'] = fontStyle.toCss();
  if (textAlign != null) _properties['text-align'] = textAlign.toCss();
  if (textDecoration != null) {
    _properties['text-decoration'] = textDecoration.toCss();
  }
  if (textTransform != null) {
    _properties['text-transform'] = textTransform.toCss();
  }
  if (whiteSpace != null) _properties['white-space'] = whiteSpace.toCss();
  if (wordBreak != null) _properties['word-break'] = wordBreak.toCss();
  if (lineHeight != null) _properties['line-height'] = lineHeight.toCss();
  if (letterSpacing != null) {
    _properties['letter-spacing'] = letterSpacing.toCss();
  }

  // Borders
  if (border != null) _properties['border'] = border.toCss();
  if (borderTop != null) _properties['border-top'] = borderTop.toCss();
  if (borderRight != null) _properties['border-right'] = borderRight.toCss();
  if (borderBottom != null) {
    _properties['border-bottom'] = borderBottom.toCss();
  }
  if (borderLeft != null) _properties['border-left'] = borderLeft.toCss();
  if (borderRadius != null) {
    _properties['border-radius'] = borderRadius.toCss();
  }

  // Visual
  if (opacity != null) _properties['opacity'] = opacity.toCss();
  if (overflow != null) _properties['overflow'] = overflow.toCss();
  if (overflowX != null) _properties['overflow-x'] = overflowX.toCss();
  if (overflowY != null) _properties['overflow-y'] = overflowY.toCss();
  if (zIndex != null) _properties['z-index'] = zIndex.toCss();
  if (cursor != null) _properties['cursor'] = cursor.toCss();

  // Effects
  if (transition != null) _properties['transition'] = transition.toCss();

  // Complex properties (string-based)
  if (transform != null) _properties['transform'] = transform;
  if (boxShadow != null) _properties['box-shadow'] = boxShadow;
  if (backdropFilter != null) _properties['backdrop-filter'] = backdropFilter;
  if (background != null) _properties['background'] = background;
  if (flex != null) _properties['flex'] = flex;
  if (gridTemplateColumns != null) {
    _properties['grid-template-columns'] = gridTemplateColumns;
  }
}