styles property

Implementation

List<StyleRule> get styles {
  final colors = this.colors;
  final typography = this.typography;

  final hasTextToken = colors.any((color) => color.name == ContentColors.text.name);
  final hasBackgroundToken = colors.any((color) => color.name == ContentColors.background.name);

  final variables = <String, String>{
    if (font case final font?) '--content-font': font.value,
    if (codeFont case final codeFont?) '--content-code-font': codeFont.value,
  };

  for (final extension in extensions.values) {
    final vars = extension.buildVariables(this);
    for (final MapEntry(:key, :value) in vars.entries) {
      assert(key.startsWith('--'), 'CSS variable names must start with "--": $key');
      if (value is ColorToken && colors.any((c) => c.name == value.name)) {
        // Refer to global colors that are already defined in the theme.
        variables[key] = 'var(--${value.name})';
      } else if (value is ThemeColor) {
        colors.add(ColorToken(key.substring(2), value.light, dark: value.dark));
      } else if (value is Color) {
        colors.add(ColorToken(key.substring(2), value));
      } else if (value is Unit) {
        variables[key] = value.value;
      } else {
        variables[key] = value.toString();
      }
    }
  }

  return [
    ...colors.build(),
    if (reset) ..._resetStyles,
    if (variables.isNotEmpty)
      css(':root').styles(
        raw: {
          for (final MapEntry(:key, :value) in variables.entries) key: value,
        },
      ),
    if (font != null) css(':host,html').styles(fontFamily: currentFont),
    if (codeFont != null) css('code, kbd, pre, samp').styles(fontFamily: currentCodeFont),
    if (hasTextToken || hasBackgroundToken)
      css('body').styles(
        color: hasTextToken ? ContentColors.text : null,
        backgroundColor: hasBackgroundToken ? ContentColors.background : null,
      ),
    typography.build(),
    for (final extension in extensions.values) ...extension.buildStyles(this),
  ];
}