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>