Add dt props to all components and directives

[mertsincan]

It generates scoped CSS variables using design tokens for the component. Related to; #5501

Exp;

<Panel
    :dt="{
        colorScheme: {
            light: {
                headerIcon: {
                    color: '{surface.500}',
                    hoverColor: '{surface.600}',
                    hoverBackground: '{surface.100}'
                }
            },
            dark: {
                headerIcon: {
                    color: '{surface.400}',
                    hoverColor: '{surface.300}',
                    hoverBackground: '{surface.800}'
                }
            }
        }
    }"
>
    ...
</Panel>

[mahir2757]

i want to know how to use dt props in any componets is there any example.
dt?: DesignToken;