Introduction

Vunix uses presets to apply a specific style to its components. The preset configuration is the theme used by Vunix, and it includes common presets/props such as variants, rounded, sizes, class, and others, as well as custom key/value pairs for specific components.

Commons configuration

In the Vunix framework, each component inherits from the DefaultConfig interface, which includes the following keys:

• class: Style classes of the root element
• variants: Contains all variants as key/value pairs
• sizes: Contains all sizes as key/value pairs (optional)
• rounded: Contains all rounded styles as key/value pairs (optional)

export declare interface DefaultConfig {
  class: MethodOrStringType, // style classes of root element
  variants: VariantsConfig, // Contain all variants key / value
  sizes?: MethodOrObject, // Contain all sizes key / value
  rounded?: MethodOrObject // Contain all rounded key / value
}

The class key

The class key is injected into the root element of the component. If the class key is not at the root of the preset object, it is applied to sub-elements of the component. The values can be either a string or a method that returns a string. This allows for dynamic and responsive class definitions based on the component's props.

The variants key

The variants key is used to define different styles for your component. For example, if you want to add a new style of button with a red background and white text, you can do it by adding a new variant:

import type { Config } from '@vunix/core'
export default {
  Button: {
    variants: {
      'red-800': 'bg-red-800 text-white hover:bg-red-200 focus:outline-none focus:ring focus:ring-red-300'
    }
    ...
  }
} as Config

You can then use the new variant by passing the variant prop to your component:

<VButton variant="red-800">My Red Button</VButton>

The sizes key

The sizes configuration handles the size of your component. Here's an example of the default size configuration for the VButton component:

import type { Config } from '@vunix/core'
export default {
  Button: {
    sizes: {
      [SizeEnum.sm]: 'px-2 py-1.5 text-xs',
      [SizeEnum.md]: 'px-3 py-2 text-sm',
      [SizeEnum.lg]: 'px-4 py-2 text-xl',
    },
    ...
  }
} as Config

You can then use the different sizes by passing the size prop to your component:

<VButton size="sm">Small Button</VButton>
<VButton size="md">Medium Button</VButton>
<VButton size="lg">Large Button</VButton>

The rounded key component

The rounded configuration handles the rounded styles of your component. Here's an example of the default rounded configuration:

export const rounded: ConfigMethodType = ({ props }) => {
  return ({
    xs: 'rounded-sm',
    sm: 'rounded',
    md: 'rounded-md',
    lg: 'rounded-lg',
    xl: 'rounded-xl',
    full: 'rounded-full'
  } as any)[props.rounded]
}

As you can see, the rounded key is a function that returns the current prop rounded value provided by the component. You can change this behavior by providing a custom function or by providing an object that will be used as key/value pairs from the rounded prop value.

You can use the different rounded styles by passing the rounded prop to your component:

<VButton rounded="sm">Small Rounded Button</VButton>
<VButton rounded="md">Medium Rounded Button</VButton>
<VButton rounded="lg">Large Rounded Button</VButton>
<VButton rounded="full">Full Rounded Button</VButton>

Conclusion

The theming configuration system provides a powerful and flexible way to customize the look and feel of your components. By using the class, variants, sizes, and rounded keys in your component's preset configuration, you can easily create a wide range of visual styles that can be used across your application. Additionally, the ability to use custom functions or objects for these keys allows you to easily extend the Vunix framework's default styles or create your own custom styles.

We hope this documentation has been helpful in understanding the basics of theming preset configuration in Vunix.