To change o-text any CSS font properties just added in a o-slice style or class.
<div class="bigbang">
<div class="gravity-spot">
<div class="orbit-5">
<o-text class="cyan">This text is cyan and bold</o-text>
<o-text class="purple">This text is purple and capitalized</o-text>
</div>
</div>
</div>
To change o-text background color use CSS custom var --o-text-color and -o--hover-text-color in a o-slice style.
<div class="bigbang">
<div class="gravity-spot">
<div class="orbit-5">
<o-text class="cyan">This text is cyan</o-text>
<o-text class="purple">This text is purple</o-text>
</div>
</div>
</div>
o-text.cyan {
--o-text-color: var(--o-cyan-light);
--o-hover-text-color: var(--o-cyan)
}
o-text.purple {
--o-text-color: var(--o-purple-light);
--o-hover-text-color: var(--o-purple)
}
o-text:hover{
cursor: pointer
}
o-text {
--o-gap: 1; /* This will be added as default soon*/
}
o-text has one special attribute: text-anchor to arrange its content. You can choose between start, middle, and end values.
<div class="bigbang">
<div class="gravity-spot">
<div class="orbit-5">
<o-text text-anchor="start" class="purple">This text starts at begining</o-text>
<o-text text-anchor="middle" class="purple">This text starts at middle</o-text>
<o-text text-anchor="end" class="purple">This text is at end</o-text>
</div>
</div>
</div>
o-text.purple {
--o-text-color: var(--o-purple-light);
--o-hover-text-color: var(--o-purple)
}
o-text:hover{
cursor: pointer
}
o-text {
--o-gap: 1; /* This will be added as default soon*/
color: var(--o-purple-dark);
}
o-text allow distribute its content to fill text-length using fit-range attribute.
<div class="bigbang">
<div class="gravity-spot">
<div class="orbit-5">
<o-text fit-range class="orange">This text is along all text path- ||| -</o-text>
</div>
</div>
</div>