.talos-input and .talos-textarea are the text-entry controls. Each draws its
chamfered bottom-right corner and 1px hairline from an SVG background that
carries the state colour — so the validation classes recolour the cut itself,
not just the text beside it.
Default
PREVIEW
<input class="talos-input" placeholder="atlas-01" />
<textarea class="talos-textarea"></textarea>Body-font text, light weight. :focus brightens the hairline; :disabled dims
to 0.5 and blocks the cursor.
State — error & success
PREVIEW
<input class="talos-input talos-input--error" value="99999" />
<input class="talos-input talos-input--success" value="atlas-01" />--error paints the cut + hairline in --talos-danger; --success in
--talos-success. The colour is the state — it rides the chamfered outline, so a
glance reads valid/invalid without reading the helper text.
Disabled
PREVIEW
<input class="talos-input" value="locked" disabled />Classes
| Class | Effect |
|---|---|
.talos-input | single-line text control |
.talos-textarea | multi-line variant (same chamfer + states) |
.talos-input--error | recolours cut + hairline to --talos-danger |
.talos-input--success | recolours cut + hairline to --talos-success |
:disabled | dims to 0.5, blocks pointer |
Wrap in a .talos-field to pair with a label and a
help/error line.