demos/CustomCalciteIconColor.html

<!--
    1. Calcite sample: https://developers.arcgis.com/calcite-design-system/components/input
    2. Codepen sample: https://codepen.io/geospatialem/pen/WNgoYKe
-->
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <script type="module" src=https://js.arcgis.com/calcite-components/1.0.7/calcite.esm.js></script>
    <link rel="stylesheet" type="text/css" href=https://js.arcgis.com/calcite-components/1.0.7/calcite.css />
    <style>
        /* WCAG 1.4.6: Contrast (Enhanced) - Level AAA */
        body {
            --calcite-ui-danger: #a92519;
        }
    </style>
</head>

<body>

    <calcite-label>
        Desired subdomain
        <calcite-input status="invalid" suffix-text=".city-of-acme.gov" placeholder="Enter your subdomain"
            value="big-map-fan"></calcite-input>
        <calcite-input-message icon="exclamation-mark-circle-f" status="invalid">
            Apologies, this subdomain has already been registered.
        </calcite-input-message>
    </calcite-label>

</body>

</html>