MNotes/components-wiki/figures/textfield/theming-filled.html

23 lines
726 B
HTML
Raw Normal View History

<div class="figure-wrapper">
<style>
figure.themed {
background-color: #f4fbfa;
}
figure.themed.filled {
--md-filled-text-field-container-shape: 0px;
--md-sys-typescale-body-large: 400 1rem system-ui;
--md-sys-color-primary: #006a6a;
--md-sys-color-surface-container-highest: #e0e3e2;
--md-filled-text-field-label-text-color: #3f4948;
--md-filled-text-field-input-text-color: #161d1d;
}
</style>
<figure
class="themed filled"
aria-label="A filled text field with the label filled themed to a greenish color"
style="padding-block: 16px; gap: 16px"
>
<md-filled-text-field label="Filled" value="Value"> </md-filled-text-field>
</figure>
</div>