pixl.json

The pixl.json file holds configuration for your project.

We use it to understand how your project is set up and how to generate components customized for your project.

You can create a pixl.json file in your project by running the following command:

pixl init

See the CLI section for more information.

path

The path to the directory where the components will be generated.

{
  "path": "lib"
}

widgetbook

Configuration to include or exclude the widgetbook from the generated components.

{
  "widgetbook": true | false
}

styles

Configuration to help the CLI understand how styles is set up in your project.

See the installation section for how to set up styles.

styles.style

This is used to generate the default style for your components. This cannot be changed after initialization.

{
  "styles": {
    "style": "default"
  }
}

styles.baseColor

This is used to generate the default color palette for your components. This cannot be changed after initialization.

{
  "styles": {
    "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc"
  }
}

styles.baseInset

The base inset is used to create utilty classes for spacing. Components will be added with this inset.

{
  "styles": {
    "baseInset": 8.0
  }
}

styles.baseRadius

The base radius is used for components like buttons, cards and inputs

{
  "styles": {
    "baseRadius": 8.0
  }
}

styles.colors

Under the colors object in your pixl.json configuration file, define the colors you want to use. You can set colors directly or create nested color objects for more complex color schemes.

When Pixl processes your configuration, it will generate a ui_colors.dart file based on the colors you defined. Nested color objects will be converted into camel case strings of their keys. If a nested key is set to 'default', Pixl will use the parent key as an alias.

For example, the provided pixl.json configuration:

{
  "colors": {
    "white": "#FFFFFF",
    "bg": {
      "description": "Default background color",
      "default": "#1A1A1A",
      "foreground": "#1E1E1E",
      "lighter": "#2F2F2F"
    }
  }
}

Will generate a ui_colors.dart file with the following content:

class UIColors {
  static Color white = const Color(0xFFFFFFFF);
 
  /// Default background color
  static Color bg = const Color(0xFF1A1A1A);
  static Color bgForeground = const Color(0xFF1E1E1E);
  static Color bgLighter = const Color(0xFF2F2F2F);
}

You can define color values in various formats:

• Hexadecimal: "#000000"
• RGB: "rgb(0, 0, 0)"
• RGBA: "rgba(0, 0, 0, 0.5)"
• HSL: "hsl(0, 0%, 0%)""

refs

The CLI uses these values to place generated components in the correct location.