Style

Class name	Type	Description
`tc-style-*`	Component	Styled component (see examples)

Styles utilize a combination of background, border and text colors. Because they exist on the components layer, any aspect can be overridden using utility classes.

NOTE: Due to their opacity, tc-style-*-light styles do not work well for elements which may overlay others (have a higher z-index), such as toasts.

Examples

tc-style-default

tc-style-default-o

tc-style-content

tc-style-inverse

tc-style-primary

tc-style-primary-o

tc-style-secondary

tc-style-secondary-o

tc-style-info

tc-style-info-o

tc-style-info-light

tc-style-warning

tc-style-warning-o

tc-style-warning-light

tc-style-error

tc-style-error-o

tc-style-error-light

tc-style-success

tc-style-success-o

tc-style-success-light

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">

    <div class="p-4 tc-style-default border">tc-style-default</div>
    <div class="p-4 tc-style-default-o border">tc-style-default-o</div>
    <div class="p-4 tc-style-content border">tc-style-content</div>
    <div class="p-4 tc-style-inverse border">tc-style-inverse</div>
    <div class="p-4 tc-style-primary border">tc-style-primary</div>
    <div class="p-4 tc-style-primary-o border">tc-style-primary-o</div>
    <div class="p-4 tc-style-secondary border">tc-style-secondary</div>
    <div class="p-4 tc-style-secondary-o border">tc-style-secondary-o</div>
    <div class="p-4 tc-style-info border">tc-style-info</div>
    <div class="p-4 tc-style-info-o border">tc-style-info-o</div>
    <div class="p-4 tc-style-info-light border">tc-style-info-light</div>
    <div class="p-4 tc-style-warning border">tc-style-warning</div>
    <div class="p-4 tc-style-warning-o border">tc-style-warning-o</div>
    <div class="p-4 tc-style-warning-light border">tc-style-warning-light</div>
    <div class="p-4 tc-style-error border">tc-style-error</div>
    <div class="p-4 tc-style-error-o border">tc-style-error-o</div>
    <div class="p-4 tc-style-error-light border">tc-style-error-light</div>
    <div class="p-4 tc-style-success border">tc-style-success</div>
    <div class="p-4 tc-style-success-o border">tc-style-success-o</div>
    <div class="p-4 tc-style-success-light border">tc-style-success-light</div>

</div>