Config File

We highly recommend using a dedicated blocks.config.ts file to configure Design Blocks, in order to get the best experience with IDEs and other integrations. This approach ensures a smoother and more efficient integration, allowing you to fully leverage Design Blocks features and tools in your development environment.

A full featured config file looks like this:

import { createBlocks, createTokens } from '@design-blocks/native';
import colors from '@design-blocks/colors/tailwind-css';
 
const lightTheme = {
  tokens: {
    colors: {
      ...
    },
    spacings: {
      ...
    },
    fontSizes: {
      ...
    },
    fontWeights: {
      ...
    },
    radii: {
      ...
    },
    sizes: {
      ...
    },
    borders: {
      ...
    },
  },
  extendTokens: {
    spacings: {
      ...
    },
    fontSizes: {
      ...
    },
    fontWeights: {
      ...
    },
    radii: {
      ...
    },
    sizes: {
      ...
    },
    borders: {
      ...
    },
  },
} as const;
 
const darkTheme = {
  tokens: {
    ...
  },
  extendTokens: {
    ...
  },
}
 
const blueTheme = {
  tokens: {
    ...
  },
  extendTokens: {
    ...
  },
}
 
const utils = {
  getSpacing: (value: string | number) => {
    return value;
  },
  ...
}
 
const [lightthemeTokens] = createTokens({ theme: lightTheme, utils });
const [darkThemeTokens] = createTokens({ theme: darkTheme, utils });
const [blueThemeTokens] = createTokens({ theme: blueTheme, utils });
 
export const { block, css, themes } = createBlocks({
  themes: {
    light: lightThemeTokens,
    dark: darkThemeTokens,
    blue: blueThemeTokens,
  },
});

The createTokens function receives a configuration object:

• theme: defines the tokens for your theme, mapping to CSS properties and style props.
• utils: creates custom utilities to enhance your development experience.

And returns an array with the following:

• theme: In position 0 of the array is the theme with generated tokens, and the utilities you defined are already included in the output theme, combined by createTokens.

The createBlocks function receives a configuration object:

• theme: receives the tokens generated by createTokens.
• themes: or it can receive an object with multiple themes generated by createTokens. See the multiple themes section for more details.

And returns all the available functions:

• block: Facilitates creating styled React-Native components.
• themes: The themes object is passed to the ThemeProvider, allowing the use of multiple themes. See the multiple themes section for more details.
• css: Facilitates string interpolation for writing CSS in a readable manner.

Tome encuenta que las utilidades que ha definido sersan incluidas en el tema de salida, combinadas por createTokens.