Regione Toscana Design System — Servizi Design System Core

Semantic Color Utilities 

<div class="rtds-p-6">
    <div class="rtds-pb-4">
        <h1 class="rtds-text-2xl rtds-font-bold">Semantic color scheme</h1>
    </div>
    <div class="rtds-grid rtds-grid-cols-2 rtds-gap-10">

        <div>
            <h2 class="rtds-text-xl rtds-mb-6"><strong>Link</strong></h2>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-link-primary</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-link-primary rtds-flex-1">

                        <p class="rtds-link-primary rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-link-primary-hover</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-link-primary-hover rtds-flex-1">

                        <p class="rtds-link-primary-hover rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-link-inverse</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-link-inverse rtds-flex-1">

                        <p class="rtds-link-inverse rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-link-inverse-hover</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-link-inverse-hover rtds-flex-1">

                        <p class="rtds-link-inverse-hover rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-link-inverse-visited</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-link-inverse-visited rtds-flex-1">

                        <p class="rtds-link-inverse-visited rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-link-visited</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-link-visited rtds-flex-1">

                        <p class="rtds-link-visited rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-link-secondary</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-link-secondary rtds-flex-1">

                        <p class="rtds-link-secondary rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-link-secondary-hover</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-link-secondary-hover rtds-flex-1">

                        <p class="rtds-link-secondary-hover rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-link-secondary-active</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-link-secondary-active rtds-flex-1">

                        <p class="rtds-link-secondary-active rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-link-secondary-focus</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-link-secondary-focus rtds-flex-1">

                        <p class="rtds-link-secondary-focus rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

        </div>

        <div>
            <h2 class="rtds-text-xl rtds-mb-6"><strong>Buttons</strong></h2>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-primary</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-button-primary rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-primary-hover</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-button-primary-hover rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-primary-active</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-button-primary-active rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-secondary</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-button-secondary rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-secondary-hover</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-button-secondary-hover rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-secondary-active</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-button-secondary-active rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-disabled</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-button-disabled rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-inverted</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-button-inverted rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-inverted-hover</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-button-inverted-hover rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-inverted-focus</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-button-inverted-focus rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-inverted-active</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-button-inverted-active rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-text-inverted-text</strong></h3>

                    </div>
                    <div class="rtds-pb-6  rtds-flex-1">

                        <p class="rtds-button-text-inverted-text rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-text-inverted-text-hover</strong></h3>

                    </div>
                    <div class="rtds-pb-6  rtds-flex-1">

                        <p class="rtds-button-text-inverted-text-hover rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-text-inverted-text-focus</strong></h3>

                    </div>
                    <div class="rtds-pb-6  rtds-flex-1">

                        <p class="rtds-button-text-inverted-text-focus rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-text-inverted-text-active</strong></h3>

                    </div>
                    <div class="rtds-pb-6  rtds-flex-1">

                        <p class="rtds-button-text-inverted-text-active rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-outline</strong></h3>

                    </div>
                    <div class="rtds-pb-6  rtds-flex-1">

                        <p class="rtds-button-outline rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-outline-hover</strong></h3>

                    </div>
                    <div class="rtds-pb-6  rtds-flex-1">

                        <p class="rtds-button-outline-hover rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-outline-active</strong></h3>

                    </div>
                    <div class="rtds-pb-6  rtds-flex-1">

                        <p class="rtds-button-outline-active rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-only-text</strong></h3>

                    </div>
                    <div class="rtds-pb-6  rtds-flex-1">

                        <p class="rtds-button-only-text rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-only-text-hover</strong></h3>

                    </div>
                    <div class="rtds-pb-6  rtds-flex-1">

                        <p class="rtds-button-only-text-hover rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-button-only-text-active</strong></h3>

                    </div>
                    <div class="rtds-pb-6  rtds-flex-1">

                        <p class="rtds-button-only-text-active rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

        </div>

        <div>
            <h2 class="rtds-text-xl rtds-mb-6"><strong>Content - text color</strong></h2>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-01</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-01 rtds-flex-1">

                        <p class="rtds-content-01 rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-02</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-02 rtds-flex-1">

                        <p class="rtds-content-02 rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-03</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-03 rtds-flex-1">

                        <p class="rtds-content-03 rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-placeholder</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-placeholder rtds-flex-1">

                        <p class="rtds-content-placeholder rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-05</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-05 rtds-flex-1">

                        <p class="rtds-content-05 rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-inverse</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-inverse rtds-flex-1">

                        <p class="rtds-content-inverse rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-disabled</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-disabled rtds-flex-1">

                        <p class="rtds-content-disabled rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-primary</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-primary rtds-flex-1">

                        <p class="rtds-content-primary rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-primary-dark</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-primary-dark rtds-flex-1">

                        <p class="rtds-content-primary-dark rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-primary-light</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-primary-light rtds-flex-1">

                        <p class="rtds-content-primary-light rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-secondary</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-secondary rtds-flex-1">

                        <p class="rtds-content-secondary rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-secondary-dark</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-secondary-dark rtds-flex-1">

                        <p class="rtds-content-secondary-dark rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-secondary-light</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-secondary-light rtds-flex-1">

                        <p class="rtds-content-secondary-light rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-error</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-error rtds-flex-1">

                        <p class="rtds-content-error rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-success</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-success rtds-flex-1">

                        <p class="rtds-content-success rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-warn</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-warn rtds-flex-1">

                        <p class="rtds-content-warn rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-info</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-info rtds-flex-1">

                        <p class="rtds-content-info rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-content-category</strong></h3>

                    </div>
                    <div class="rtds-pb-6 rtds-content-category rtds-flex-1">

                        <p class="rtds-content-category rtds-text-lg">text sample</p>

                    </div>
                </div>
            </div>

        </div>

        <div>
            <h2 class="rtds-text-xl rtds-mb-6"><strong>Background</strong></h2>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-01</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-01 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-02</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-02 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-03</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-03 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-04</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-04 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-05</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-05 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-06</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-06 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-07</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-07 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-08</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-08 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-09</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-09 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-primary</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-primary rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-primary-light</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-primary-light rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-primary-dark</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-primary-dark rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-secondary</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-secondary rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-secondary-light</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-secondary-light rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-secondary-dark</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-secondary-dark rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-background-inverse</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-background-inverse rtds-flex-1">

                    </div>
                </div>
            </div>

        </div>

        <div>
            <h2 class="rtds-text-xl rtds-mb-6"><strong>Border</strong></h2>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-border-gray-01</strong></h3>

                    </div>
                    <div class=" rtds-mb-6 rtds-h-8 rtds-border-gray-01 rtds-border-l-2 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-border-gray-02</strong></h3>

                    </div>
                    <div class=" rtds-mb-6 rtds-h-8 rtds-border-gray-02 rtds-border-l-2 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-border-gray-03</strong></h3>

                    </div>
                    <div class=" rtds-mb-6 rtds-h-8 rtds-border-gray-03 rtds-border-l-2 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-border-gray-04</strong></h3>

                    </div>
                    <div class=" rtds-mb-6 rtds-h-8 rtds-border-gray-04 rtds-border-l-2 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-border-primary</strong></h3>

                    </div>
                    <div class=" rtds-mb-6 rtds-h-8 rtds-border-primary rtds-border-l-2 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-border-secondary</strong></h3>

                    </div>
                    <div class=" rtds-mb-6 rtds-h-8 rtds-border-secondary rtds-border-l-2 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-border-input</strong></h3>

                    </div>
                    <div class=" rtds-mb-6 rtds-h-8 rtds-border-input rtds-border-l-2 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-border-inverse</strong></h3>

                    </div>
                    <div class=" rtds-mb-6 rtds-h-8 rtds-border-inverse rtds-border-l-2 rtds-flex-1">

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-divide-gray-01</strong></h3>

                    </div>
                    <div class="rtds-divide-gray-01 rtds-divide-y  rtds-h-14 rtds-divide-gray-01 rtds-flex-1">

                        <div>text sample</div>

                        <div>text sample</div>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-divide-gray-02</strong></h3>

                    </div>
                    <div class="rtds-divide-gray-02 rtds-divide-y  rtds-h-14 rtds-divide-gray-02 rtds-flex-1">

                        <div>text sample</div>

                        <div>text sample</div>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-divide-gray-03</strong></h3>

                    </div>
                    <div class="rtds-divide-gray-03 rtds-divide-y  rtds-h-14 rtds-divide-gray-03 rtds-flex-1">

                        <div>text sample</div>

                        <div>text sample</div>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-divide-gray-04</strong></h3>

                    </div>
                    <div class="rtds-divide-gray-04 rtds-divide-y  rtds-h-14 rtds-divide-gray-04 rtds-flex-1">

                        <div>text sample</div>

                        <div>text sample</div>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-divide-primary</strong></h3>

                    </div>
                    <div class="rtds-divide-primary rtds-divide-y  rtds-h-14 rtds-divide-primary rtds-flex-1">

                        <div>text sample</div>

                        <div>text sample</div>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-divide-secondary</strong></h3>

                    </div>
                    <div class="rtds-divide-secondary rtds-divide-y  rtds-h-14 rtds-divide-secondary rtds-flex-1">

                        <div>text sample</div>

                        <div>text sample</div>

                    </div>
                </div>
            </div>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-divide-inverse</strong></h3>

                    </div>
                    <div class="rtds-divide-inverse rtds-divide-y  rtds-h-14 rtds-divide-inverse rtds-flex-1">

                        <div>text sample</div>

                        <div>text sample</div>

                    </div>
                </div>
            </div>

        </div>

        <div>
            <h2 class="rtds-text-xl rtds-mb-6"><strong>Additional</strong></h2>

            <div class="rtds-grid rtds-gap-4">
                <div class="rtds-flex rtds-gap-4">
                    <div class="rtds-w-1/3">
                        <h3 class="rtds-text-md"><strong>rtds-outline-focusring</strong></h3>

                    </div>
                    <div class=" rtds-h-14 rtds-outline rtds-outline-focusring rtds-flex-1">

                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
 
<div class="rtds-p-6">
  <div class="rtds-pb-4">
    <h1 class="rtds-text-2xl rtds-font-bold">Semantic color scheme</h1>
  </div>
  <div class="rtds-grid rtds-grid-cols-2 rtds-gap-10">
    {% for color in colors %}
    <div>
      <h2 class="rtds-text-xl rtds-mb-6"><strong>{{ color.name }}</strong></h2>
      {% for hue in color.hues %}
      <div class="rtds-grid rtds-gap-4">
        <div class="rtds-flex rtds-gap-4">
          <div class="rtds-w-1/3">
            <h3 class="rtds-text-md"><strong>{{ hue.name }}</strong></h3>
            {#
            <p><strong>{{ hue.hex }}</strong></p>
            #}
          </div>
          <div
            class="{% if hue.isDivide %}{{ hue.class }} rtds-divide-y {% endif %}{% if hue.textclass %}rtds-pb-6{% elseif hue.isBorder %} rtds-mb-6 rtds-h-8{% else %} rtds-h-14{% endif %} {{ hue.class }}{% if hue.isBorder %} rtds-border-l-2{% endif %} rtds-flex-1"
          >
            {% if hue.textclass %}
            <p class="{{ hue.textclass }} rtds-text-lg">text sample</p>
            {% endif %}
            {% if hue.isDivide %}
              {% for i in range(0, 2) %}
              <div>text sample</div>
              {% endfor %}
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% endfor %}
  </div>
</div>
 
{
  "colors": [
    {
      "name": "Link",
      "hues": [
        {
          "name": "rtds-link-primary",
          "class": "rtds-link-primary",
          "textclass": "rtds-link-primary"
        },
        {
          "name": "rtds-link-primary-hover",
          "class": "rtds-link-primary-hover",
          "textclass": "rtds-link-primary-hover"
        },
        {
          "name": "rtds-link-inverse",
          "class": "rtds-link-inverse",
          "textclass": "rtds-link-inverse"
        },
        {
          "name": "rtds-link-inverse-hover",
          "class": "rtds-link-inverse-hover",
          "textclass": "rtds-link-inverse-hover"
        },
        {
          "name": "rtds-link-inverse-visited",
          "class": "rtds-link-inverse-visited",
          "textclass": "rtds-link-inverse-visited"
        },
        {
          "name": "rtds-link-visited",
          "class": "rtds-link-visited",
          "textclass": "rtds-link-visited"
        },
        {
          "name": "rtds-link-secondary",
          "class": "rtds-link-secondary",
          "textclass": "rtds-link-secondary"
        },
        {
          "name": "rtds-link-secondary-hover",
          "class": "rtds-link-secondary-hover",
          "textclass": "rtds-link-secondary-hover"
        },
        {
          "name": "rtds-link-secondary-active",
          "class": "rtds-link-secondary-active",
          "textclass": "rtds-link-secondary-active"
        },
        {
          "name": "rtds-link-secondary-focus",
          "class": "rtds-link-secondary-focus",
          "textclass": "rtds-link-secondary-focus"
        }
      ]
    },
    {
      "name": "Buttons",
      "hues": [
        {
          "name": "rtds-button-primary",
          "class": "rtds-button-primary"
        },
        {
          "name": "rtds-button-primary-hover",
          "class": "rtds-button-primary-hover"
        },
        {
          "name": "rtds-button-primary-active",
          "class": "rtds-button-primary-active"
        },
        {
          "name": "rtds-button-secondary",
          "class": "rtds-button-secondary"
        },
        {
          "name": "rtds-button-secondary-hover",
          "class": "rtds-button-secondary-hover"
        },
        {
          "name": "rtds-button-secondary-active",
          "class": "rtds-button-secondary-active"
        },
        {
          "name": "rtds-button-disabled",
          "class": "rtds-button-disabled"
        },
        {
          "name": "rtds-button-inverted",
          "class": "rtds-button-inverted"
        },
        {
          "name": "rtds-button-inverted-hover",
          "class": "rtds-button-inverted-hover"
        },
        {
          "name": "rtds-button-inverted-focus",
          "class": "rtds-button-inverted-focus"
        },
        {
          "name": "rtds-button-inverted-active",
          "class": "rtds-button-inverted-active"
        },
        {
          "name": "rtds-button-text-inverted-text",
          "textclass": "rtds-button-text-inverted-text"
        },
        {
          "name": "rtds-button-text-inverted-text-hover",
          "textclass": "rtds-button-text-inverted-text-hover"
        },
        {
          "name": "rtds-button-text-inverted-text-focus",
          "textclass": "rtds-button-text-inverted-text-focus"
        },
        {
          "name": "rtds-button-text-inverted-text-active",
          "textclass": "rtds-button-text-inverted-text-active"
        },
        {
          "name": "rtds-button-outline",
          "textclass": "rtds-button-outline"
        },
        {
          "name": "rtds-button-outline-hover",
          "textclass": "rtds-button-outline-hover"
        },
        {
          "name": "rtds-button-outline-active",
          "textclass": "rtds-button-outline-active"
        },
        {
          "name": "rtds-button-only-text",
          "textclass": "rtds-button-only-text"
        },
        {
          "name": "rtds-button-only-text-hover",
          "textclass": "rtds-button-only-text-hover"
        },
        {
          "name": "rtds-button-only-text-active",
          "textclass": "rtds-button-only-text-active"
        }
      ]
    },
    {
      "name": "Content - text color",
      "hues": [
        {
          "name": "rtds-content-01",
          "class": "rtds-content-01",
          "textclass": "rtds-content-01"
        },
        {
          "name": "rtds-content-02",
          "class": "rtds-content-02",
          "textclass": "rtds-content-02"
        },
        {
          "name": "rtds-content-03",
          "class": "rtds-content-03",
          "textclass": "rtds-content-03"
        },
        {
          "name": "rtds-content-placeholder",
          "class": "rtds-content-placeholder",
          "textclass": "rtds-content-placeholder"
        },
        {
          "name": "rtds-content-05",
          "class": "rtds-content-05",
          "textclass": "rtds-content-05"
        },
        {
          "name": "rtds-content-inverse",
          "class": "rtds-content-inverse",
          "textclass": "rtds-content-inverse"
        },
        {
          "name": "rtds-content-disabled",
          "class": "rtds-content-disabled",
          "textclass": "rtds-content-disabled"
        },
        {
          "name": "rtds-content-primary",
          "class": "rtds-content-primary",
          "textclass": "rtds-content-primary"
        },
        {
          "name": "rtds-content-primary-dark",
          "class": "rtds-content-primary-dark",
          "textclass": "rtds-content-primary-dark"
        },
        {
          "name": "rtds-content-primary-light",
          "class": "rtds-content-primary-light",
          "textclass": "rtds-content-primary-light"
        },
        {
          "name": "rtds-content-secondary",
          "class": "rtds-content-secondary",
          "textclass": "rtds-content-secondary"
        },
        {
          "name": "rtds-content-secondary-dark",
          "class": "rtds-content-secondary-dark",
          "textclass": "rtds-content-secondary-dark"
        },
        {
          "name": "rtds-content-secondary-light",
          "class": "rtds-content-secondary-light",
          "textclass": "rtds-content-secondary-light"
        },
        {
          "name": "rtds-content-error",
          "class": "rtds-content-error",
          "textclass": "rtds-content-error"
        },
        {
          "name": "rtds-content-success",
          "class": "rtds-content-success",
          "textclass": "rtds-content-success"
        },
        {
          "name": "rtds-content-warn",
          "class": "rtds-content-warn",
          "textclass": "rtds-content-warn"
        },
        {
          "name": "rtds-content-info",
          "class": "rtds-content-info",
          "textclass": "rtds-content-info"
        },
        {
          "name": "rtds-content-category",
          "class": "rtds-content-category",
          "textclass": "rtds-content-category"
        }
      ]
    },
    {
      "name": "Background",
      "hues": [
        {
          "name": "rtds-background-01",
          "class": "rtds-background-01"
        },
        {
          "name": "rtds-background-02",
          "class": "rtds-background-02"
        },
        {
          "name": "rtds-background-03",
          "class": "rtds-background-03"
        },
        {
          "name": "rtds-background-04",
          "class": "rtds-background-04"
        },
        {
          "name": "rtds-background-05",
          "class": "rtds-background-05"
        },
        {
          "name": "rtds-background-06",
          "class": "rtds-background-06"
        },
        {
          "name": "rtds-background-07",
          "class": "rtds-background-07"
        },
        {
          "name": "rtds-background-08",
          "class": "rtds-background-08"
        },
        {
          "name": "rtds-background-09",
          "class": "rtds-background-09"
        },
        {
          "name": "rtds-background-primary",
          "class": "rtds-background-primary"
        },
        {
          "name": "rtds-background-primary-light",
          "class": "rtds-background-primary-light"
        },
        {
          "name": "rtds-background-primary-dark",
          "class": "rtds-background-primary-dark"
        },
        {
          "name": "rtds-background-secondary",
          "class": "rtds-background-secondary"
        },
        {
          "name": "rtds-background-secondary-light",
          "class": "rtds-background-secondary-light"
        },
        {
          "name": "rtds-background-secondary-dark",
          "class": "rtds-background-secondary-dark"
        },
        {
          "name": "rtds-background-inverse",
          "class": "rtds-background-inverse"
        }
      ]
    },
    {
      "name": "Border",
      "hues": [
        {
          "name": "rtds-border-gray-01",
          "class": "rtds-border-gray-01",
          "isBorder": true
        },
        {
          "name": "rtds-border-gray-02",
          "class": "rtds-border-gray-02",
          "isBorder": true
        },
        {
          "name": "rtds-border-gray-03",
          "class": "rtds-border-gray-03",
          "isBorder": true
        },
        {
          "name": "rtds-border-gray-04",
          "class": "rtds-border-gray-04",
          "isBorder": true
        },
        {
          "name": "rtds-border-primary",
          "class": "rtds-border-primary",
          "isBorder": true
        },
        {
          "name": "rtds-border-secondary",
          "class": "rtds-border-secondary",
          "isBorder": true
        },
        {
          "name": "rtds-border-input",
          "class": "rtds-border-input",
          "isBorder": true
        },
        {
          "name": "rtds-border-inverse",
          "class": "rtds-border-inverse",
          "isBorder": true
        },
        {
          "name": "rtds-divide-gray-01",
          "class": "rtds-divide-gray-01",
          "isDivide": true
        },
        {
          "name": "rtds-divide-gray-02",
          "class": "rtds-divide-gray-02",
          "isDivide": true
        },
        {
          "name": "rtds-divide-gray-03",
          "class": "rtds-divide-gray-03",
          "isDivide": true
        },
        {
          "name": "rtds-divide-gray-04",
          "class": "rtds-divide-gray-04",
          "isDivide": true
        },
        {
          "name": "rtds-divide-primary",
          "class": "rtds-divide-primary",
          "isDivide": true
        },
        {
          "name": "rtds-divide-secondary",
          "class": "rtds-divide-secondary",
          "isDivide": true
        },
        {
          "name": "rtds-divide-inverse",
          "class": "rtds-divide-inverse",
          "isDivide": true
        }
      ]
    },
    {
      "name": "Additional",
      "hues": [
        {
          "name": "rtds-outline-focusring",
          "class": "rtds-outline rtds-outline-focusring"
        }
      ]
    }
  ]
}
  • Content: 
    /**
 * SEMANTIC COLOR UTILITIES
 *
*/
/* CONTENT TEXT COLOR UTILITIES */
.rtds-content-01 {
        color: var(--color-content-01);
    }
.rtds-content-02 {
        color: var(--color-content-02);
    }
.rtds-content-03 {
        color: var(--color-content-03);
    }
.rtds-content-placeholder {
        color: var(--color-content-placeholder);
    }
.rtds-input-placeholder {
        color: var(--color-input-placeholder);
    }
.rtds-content-05 {
        color: var(--color-content-05);
    }
.rtds-content-inverse {
        color: var(--color-content-inverse);
    }
.rtds-content-disabled {
        color: var(--color-content-disabled);
    }
.rtds-content-primary {
        color: var(--color-content-primary);
    }
.rtds-content-primary-dark {
        color: var(--color-content-primary-dark);
    }
.rtds-content-primary-light {
        color: var(--color-content-primary-light);
    }
.rtds-content-secondary {
        color: var(--color-content-secondary);
    }
.rtds-content-secondary-dark {
        color: var(--color-content-secondary-dark);
    }
.rtds-content-secondary-light {
        color: var(--color-content-secondary-light);
    }
.rtds-content-error {
        color: var(--color-content-error);
    }
.rtds-content-warn {
        color: var(--color-content-warn);
    }
.rtds-content-info {
        color: var(--color-content-info);
    }
.rtds-content-success {
        color: var(--color-content-success);
    }
.rtds-content-category {
        color: var(--color-content-category);
    }
/* BUTTON COLOR UTILITIES */
.rtds-button-primary {
        background-color: var(--color-button-primary);
        border-color: var(--color-button-primary);
    }
.rtds-button-primary-hover {
        background-color: var(--color-button-primary-hover);
        border-color: var(--color-button-primary-hover);
    }
.rtds-button-primary-active {
        background-color: var(--color-button-primary-active);
        border-color: var(--color-button-primary-active);
    }
.rtds-button-secondary {
        background-color: var(--color-button-secondary);
        border-color: var(--color-button-secondary);
    }
.rtds-button-secondary-hover {
        background-color: var(--color-button-secondary-hover);
        border-color: var(--color-button-secondary-hover);
    }
.rtds-button-secondary-active {
        background-color: var(--color-button-secondary-active);
        border-color: var(--color-button-secondary-active);
    }
.rtds-button-disabled {
        background-color: var(--color-button-disabled);
        border-color: var(--color-button-disabled);
    }
.rtds-button-outline {
        color: var(--color-button-outline);
        border-color: var(--color-button-outline);
    }
.rtds-button-outline-hover {
        color: var(--color-button-outline-hover);
        border-color: var(--color-button-outline-hover);
    }
.rtds-button-outline-active {
        color: var(--color-button-outline-active);
        border-color: var(--color-button-outline-active);
    }
.rtds-button-only-text {
        color: var(--color-button-only-text);
        border-color: transparent;
    }
.rtds-button-only-text-hover {
        color: var(--color-button-only-text-hover);
        border-color: transparent;
    }
.rtds-button-only-text-active {
        color: var(--color-button-only-text-active);
        border-color: transparent;
    }
.rtds-button-inverted {
        background-color: var(--color-button-inverted);
        border-color: var(--color-button-inverted);
    }
.rtds-button-inverted-hover {
        background-color: var(--color-button-inverted-hover);
        border-color: var(--color-button-inverted-hover);
    }
.rtds-button-inverted-focus {
        background-color: var(--color-button-inverted-focus);
        border-color: var(--color-button-inverted-focus);
    }
.rtds-button-inverted-active {
        background-color: var(--color-button-inverted-active);
        border-color: var(--color-button-inverted-active);
    }
.rtds-button-inverted-text {
        color: var(--color-button-inverted-text);
    }
.rtds-button-inverted-text-hover {
        color: var(--color-button-inverted-text-hover);
    }
.rtds-button-inverted-text-focus {
        color: var(--color-button-inverted-text-focus);
    }
.rtds-button-inverted-text-active {
        color: var(--color-button-inverted-text-active);
    }
.rtds-button-text-inverted {
        background-color: var(--color-button-text-inverted);
        border-color: var(--color-button-text-inverted);
    }
.rtds-button-text-inverted-hover {
        background-color: var(--color-button-text-inverted-hover);
        border-color: var(--color-button-text-inverted-hover);
    }
.rtds-button-text-inverted-focus {
        background-color: var(--color-button-text-inverted-focus);
        border-color: var(--color-button-text-inverted-focus);
    }
.rtds-button-text-inverted-active {
        background-color: var(--color-button-text-inverted-active);
        border-color: var(--color-button-text-inverted-active);
    }
.rtds-button-text-inverted-text {
        color: var(--color-button-text-inverted-text);
    }
.rtds-button-text-inverted-text-hover {
        color: var(--color-button-text-inverted-text-hover);
    }
.rtds-button-text-inverted-text-focus {
        color: var(--color-button-text-inverted-text-focus);
    }
.rtds-button-text-inverted-text-active {
        color: var(--color-button-text-inverted-text-active);
    }
/* LINK TEXT COLOR UTILITIES */
.rtds-link-primary {
        color: var(--color-link-primary);
    }
.rtds-link-visited {
        color: var(--color-link-visited);
    }
.rtds-link-inverse {
        color: var(--color-link-inverse);
    }
.rtds-link-primary-hover {
        color: var(--color-link-primary-hover);
    }
.rtds-link-inverse-hover {
        color: var(--color-link-inverse-hover);
    }
.rtds-link-inverse-visited {
        color: var(--color-link-inverse-visited);
    }
/* Link secondary */
.rtds-link-secondary {
        color: var(--color-link-secondary);
    }
.rtds-link-secondary-hover {
        color: var(--color-link-secondary-hover);
    }
.rtds-link-secondary-focus {
        color: var(--color-link-secondary-focus);
    }
.rtds-link-secondary-active {
        color: var(--color-link-secondary-active);
    }
/* BACKGROUND CUSTOM UTILITIES */
.rtds-background-01 {
        background-color: var(--color-background-01);
    }
.rtds-background-02 {
        background-color: var(--color-background-02);
    }
.rtds-background-03 {
        background-color: var(--color-background-03);
    }
.rtds-background-04 {
        background-color: var(--color-background-04);
    }
.rtds-background-05 {
        background-color: var(--color-background-05);
    }
.rtds-background-06 {
        background-color: var(--color-background-06);
    }
.rtds-background-07 {
        background-color: var(--color-background-07);
    }
.rtds-background-08 {
        background-color: var(--color-background-08);
    }
.rtds-background-09 {
        background-color: var(--color-background-09);
    }
.rtds-background-primary {
        background-color: var(--color-background-primary);
    }
.rtds-background-primary-light {
        background-color: var(--color-background-primary-light);
    }
.rtds-background-inverse {
        background-color: var(--color-background-inverse);
    }
.rtds-background-primary-dark {
        background-color: var(--color-background-primary-dark);
    }
.rtds-background-secondary {
        background-color: var(--color-background-secondary);
    }
.rtds-background-secondary-light {
        background-color: var(--color-background-secondary-light);
    }
.rtds-background-secondary-dark {
        background-color: var(--color-background-secondary-dark);
    }
/* BORDER CUSTOM */
.rtds-border-gray-01 {
        border-color: var(--color-border-gray-01);
    }
.rtds-divide-gray-01 {
        border-color: var(--color-divide-gray-01);
    }
.rtds-border-gray-02 {
        border-color: var(--color-border-gray-02);
    }
.rtds-divide-gray-02 {
        border-color: var(--color-divide-gray-02);
    }
.rtds-border-gray-03 {
        border-color: var(--color-border-gray-03);
    }
.rtds-divide-gray-03 {
        border-color: var(--color-divide-gray-03);
    }
.rtds-border-gray-04 {
        border-color: var(--color-border-gray-04);
    }
.rtds-divide-gray-04 {
        border-color: var(--color-divide-gray-04);
    }
.rtds-border-input {
        border-color: var(--color-border-input);
    }
.rtds-border-primary {
        border-color: var(--color-border-primary);
    }
.rtds-divide-primary {
        border-color: var(--color-divide-primary);
    }
.rtds-border-secondary {
        border-color: var(--color-border-secondary);
    }
.rtds-divide-secondary {
        border-color: var(--color-divide-secondary);
    }
.rtds-border-inverse {
        border-color: var(--color-border-inverse);
    }
.rtds-divide-inverse {
        border-color: var(--color-divide-inverse);
    }
  • URL: /components/raw/semantic-color-utilities/semantic-color.built.css
  • Filesystem Path: components/01-design-system/tokens/02-semantic-color-utilities/semantic-color.built.css
  • Size: 9 KB
  • Content: 
    /**
 * SEMANTIC COLOR UTILITIES
 *
*/
@layer utilities {
    /* CONTENT TEXT COLOR UTILITIES */
    .rtds-content-01 {
        color: var(--color-content-01);
    }

    .rtds-content-02 {
        color: var(--color-content-02);
    }

    .rtds-content-03 {
        color: var(--color-content-03);
    }

    .rtds-content-placeholder {
        color: var(--color-content-placeholder);
    }

    .rtds-input-placeholder {
        color: var(--color-input-placeholder);
    }

    .rtds-content-05 {
        color: var(--color-content-05);
    }

    .rtds-content-inverse {
        color: var(--color-content-inverse);
    }

    .rtds-content-disabled {
        color: var(--color-content-disabled);
    }

    .rtds-content-primary {
        color: var(--color-content-primary);
    }

    .rtds-content-primary-dark {
        color: var(--color-content-primary-dark);
    }

    .rtds-content-primary-light {
        color: var(--color-content-primary-light);
    }

    .rtds-content-secondary {
        color: var(--color-content-secondary);
    }

    .rtds-content-secondary-dark {
        color: var(--color-content-secondary-dark);
    }

    .rtds-content-secondary-light {
        color: var(--color-content-secondary-light);
    }

    .rtds-content-error {
        color: var(--color-content-error);
    }

    .rtds-content-warn {
        color: var(--color-content-warn);
    }

    .rtds-content-info {
        color: var(--color-content-info);
    }

    .rtds-content-success {
        color: var(--color-content-success);
    }

    .rtds-content-category {
        color: var(--color-content-category);
    }

    /* BUTTON COLOR UTILITIES */
    .rtds-button-primary {
        background-color: var(--color-button-primary);
        border-color: var(--color-button-primary);
    }

    .rtds-button-primary-hover {
        background-color: var(--color-button-primary-hover);
        border-color: var(--color-button-primary-hover);
    }

    .rtds-button-primary-active {
        background-color: var(--color-button-primary-active);
        border-color: var(--color-button-primary-active);
    }

    .rtds-button-secondary {
        background-color: var(--color-button-secondary);
        border-color: var(--color-button-secondary);
    }

    .rtds-button-secondary-hover {
        background-color: var(--color-button-secondary-hover);
        border-color: var(--color-button-secondary-hover);
    }

    .rtds-button-secondary-active {
        background-color: var(--color-button-secondary-active);
        border-color: var(--color-button-secondary-active);
    }

    .rtds-button-disabled {
        background-color: var(--color-button-disabled);
        border-color: var(--color-button-disabled);
    }

    .rtds-button-outline {
        color: var(--color-button-outline);
        border-color: var(--color-button-outline);
    }

    .rtds-button-outline-hover {
        color: var(--color-button-outline-hover);
        border-color: var(--color-button-outline-hover);
    }

    .rtds-button-outline-active {
        color: var(--color-button-outline-active);
        border-color: var(--color-button-outline-active);
    }

    .rtds-button-only-text {
        color: var(--color-button-only-text);
        border-color: transparent;
    }

    .rtds-button-only-text-hover {
        color: var(--color-button-only-text-hover);
        border-color: transparent;
    }

    .rtds-button-only-text-active {
        color: var(--color-button-only-text-active);
        border-color: transparent;
    }

    .rtds-button-inverted {
        background-color: var(--color-button-inverted);
        border-color: var(--color-button-inverted);
    }

    .rtds-button-inverted-hover {
        background-color: var(--color-button-inverted-hover);
        border-color: var(--color-button-inverted-hover);
    }

    .rtds-button-inverted-focus {
        background-color: var(--color-button-inverted-focus);
        border-color: var(--color-button-inverted-focus);
    }

    .rtds-button-inverted-active {
        background-color: var(--color-button-inverted-active);
        border-color: var(--color-button-inverted-active);
    }

    .rtds-button-inverted-text {
        color: var(--color-button-inverted-text);
    }

    .rtds-button-inverted-text-hover {
        color: var(--color-button-inverted-text-hover);
    }

    .rtds-button-inverted-text-focus {
        color: var(--color-button-inverted-text-focus);
    }

    .rtds-button-inverted-text-active {
        color: var(--color-button-inverted-text-active);
    }

    .rtds-button-text-inverted {
        background-color: var(--color-button-text-inverted);
        border-color: var(--color-button-text-inverted);
    }

    .rtds-button-text-inverted-hover {
        background-color: var(--color-button-text-inverted-hover);
        border-color: var(--color-button-text-inverted-hover);
    }

    .rtds-button-text-inverted-focus {
        background-color: var(--color-button-text-inverted-focus);
        border-color: var(--color-button-text-inverted-focus);
    }

    .rtds-button-text-inverted-active {
        background-color: var(--color-button-text-inverted-active);
        border-color: var(--color-button-text-inverted-active);
    }

    .rtds-button-text-inverted-text {
        color: var(--color-button-text-inverted-text);
    }

    .rtds-button-text-inverted-text-hover {
        color: var(--color-button-text-inverted-text-hover);
    }

    .rtds-button-text-inverted-text-focus {
        color: var(--color-button-text-inverted-text-focus);
    }

    .rtds-button-text-inverted-text-active {
        color: var(--color-button-text-inverted-text-active);
    }


    /* LINK TEXT COLOR UTILITIES */
    .rtds-link-primary {
        color: var(--color-link-primary);
    }

    .rtds-link-visited {
        color: var(--color-link-visited);
    }

    .rtds-link-inverse {
        color: var(--color-link-inverse);
    }

    .rtds-link-primary-hover {
        color: var(--color-link-primary-hover);
    }

    .rtds-link-inverse-hover {
        color: var(--color-link-inverse-hover);
    }

    .rtds-link-inverse-visited {
        color: var(--color-link-inverse-visited);
    }

    /* Link secondary */
    .rtds-link-secondary {
        color: var(--color-link-secondary);
    }

    .rtds-link-secondary-hover {
        color: var(--color-link-secondary-hover);
    }

    .rtds-link-secondary-focus {
        color: var(--color-link-secondary-focus);
    }

    .rtds-link-secondary-active {
        color: var(--color-link-secondary-active);
    }

    /* BACKGROUND CUSTOM UTILITIES */
    .rtds-background-01 {
        background-color: var(--color-background-01);
    }

    .rtds-background-02 {
        background-color: var(--color-background-02);
    }

    .rtds-background-03 {
        background-color: var(--color-background-03);
    }

    .rtds-background-04 {
        background-color: var(--color-background-04);
    }

    .rtds-background-05 {
        background-color: var(--color-background-05);
    }

    .rtds-background-06 {
        background-color: var(--color-background-06);
    }

    .rtds-background-07 {
        background-color: var(--color-background-07);
    }

    .rtds-background-08 {
        background-color: var(--color-background-08);
    }

    .rtds-background-09 {
        background-color: var(--color-background-09);
    }

    .rtds-background-primary {
        background-color: var(--color-background-primary);
    }

    .rtds-background-primary-light {
        background-color: var(--color-background-primary-light);
    }
    
    .rtds-background-inverse {
        background-color: var(--color-background-inverse);
    }

    .rtds-background-primary-dark {
        background-color: var(--color-background-primary-dark);
    }

    .rtds-background-secondary {
        background-color: var(--color-background-secondary);
    }

    .rtds-background-secondary-light {
        background-color: var(--color-background-secondary-light);
    }

    .rtds-background-secondary-dark {
        background-color: var(--color-background-secondary-dark);
    }

    /* BORDER CUSTOM */
    .rtds-border-gray-01 {
        border-color: var(--color-border-gray-01);
    }

    .rtds-divide-gray-01 {
        border-color: var(--color-divide-gray-01);
    }

    .rtds-border-gray-02 {
        border-color: var(--color-border-gray-02);
    }

    .rtds-divide-gray-02 {
        border-color: var(--color-divide-gray-02);
    }

    .rtds-border-gray-03 {
        border-color: var(--color-border-gray-03);
    }

    .rtds-divide-gray-03 {
        border-color: var(--color-divide-gray-03);
    }

    .rtds-border-gray-04 {
        border-color: var(--color-border-gray-04);
    }

    .rtds-divide-gray-04 {
        border-color: var(--color-divide-gray-04);
    }

    .rtds-border-input {
        border-color: var(--color-border-input);
    }

    .rtds-border-primary {
        border-color: var(--color-border-primary);
    }

    .rtds-divide-primary {
        border-color: var(--color-divide-primary);
    }

    .rtds-border-secondary {
        border-color: var(--color-border-secondary);
    }

    .rtds-divide-secondary {
        border-color: var(--color-divide-secondary);
    }

    .rtds-border-inverse {
        border-color: var(--color-border-inverse);
    }

    .rtds-divide-inverse {
        border-color: var(--color-divide-inverse);
    }

}
  • URL: /components/raw/semantic-color-utilities/semantic-color.css
  • Filesystem Path: components/01-design-system/tokens/02-semantic-color-utilities/semantic-color.css
  • Size: 9.5 KB
  • Handle: @semantic-color-utilities
  • Preview:
  • Filesystem Path: components/01-design-system/tokens/02-semantic-color-utilities/semantic-color-utilities.njk

Utility di Colori Semantici

Utility personalizzate per la gestione dei colori semantici nel Design System.

Panoramica

Set di classi personalizzate con prefisso rtds- utilizzate per gestire:

  • Colori del testo
  • Colori di sfondo
  • Colori dei bordi

Ogni classe ha assegnata una classe di colore Tailwind come definito nel Figma Design System. L’assegnazione della utility di colore Tailwind attualmente avviene tramite @apply nel css. Queste utility hanno la precedenza d’uso rispetto alle classi di colore standard di Tailwind.

Categorie di Utility

Colori del Testo (Content)

  • Testo Base:

    • rtds-content-01: Testo principale (neutral-900)
    • rtds-content-02: Testo secondario (secondary-500)
    • rtds-content-03: Testo terziario (neutral-800)
    • rtds-content-05: Testo quaternario (neutral-700)
    • rtds-content-inverse: Testo su sfondo scuro (neutral-50)
    • rtds-content-disabled: Testo disabilitato (neutral-600)

  • Testo Semantico:

    • rtds-content-primary: Testo primario (primary-500)
    • rtds-content-secondary: Testo secondario (secondary-500)
    • rtds-content-error: Testo di errore (error-dark)
    • rtds-content-warn: Testo di avviso (warn-dark)
    • rtds-content-info: Testo informativo (info-dark)
    • rtds-content-success: Testo di successo (success-dark)

Colori dei Pulsanti

Ogni variante pulsante ha classi per sfondo, bordo e testo in tutti gli stati interattivi.

  • Pulsante Primario:

    • rtds-button-primary: Sfondo e bordo primario
    • rtds-button-primary-hover: Stato hover
    • rtds-button-primary-active: Stato attivo

  • Pulsante Secondario:

    • rtds-button-secondary: Sfondo e bordo secondario
    • rtds-button-secondary-hover: Stato hover
    • rtds-button-secondary-active: Stato attivo

  • Pulsante Outline:

    • rtds-button-outline: Testo e bordo primario
    • rtds-button-outline-hover: Stato hover
    • rtds-button-outline-active: Stato attivo

  • Pulsante Solo Testo:

    • rtds-button-only-text: Testo primario
    • rtds-button-only-text-hover: Stato hover
    • rtds-button-only-text-active: Stato attivo

  • Pulsante Inverted (su sfondi scuri):

    • rtds-button-inverted: Sfondo bianco, testo primario
    • rtds-button-inverted-hover: Stato hover
    • rtds-button-inverted-active: Stato attivo

  • Pulsante Text Inverted (testo su sfondo scuro):

    • rtds-button-text-inverted: Testo bianco
    • rtds-button-text-inverted-hover: Stato hover

  • Stato Disabilitato (applicabile a tutti i pulsanti):

    • rtds-button-disabled: Sfondo/testo disabilitato

  • Link Primario:

    • rtds-link-primary: Testo link primario
    • rtds-link-primary-hover: Hover
    • rtds-link-visited: Link già visitato

  • Link Secondario:

    • rtds-link-secondary: Testo link secondario
    • rtds-link-secondary-hover: Hover

  • Link Inverse (su sfondi scuri):

    • rtds-link-inverse: Testo link chiaro
    • rtds-link-inverse-hover: Hover
    • rtds-link-inverse-visited: Link visitato

Colori di Sfondo

  • Sfondo Neutro (scala da chiaro a scuro):

    • rtds-background-01: Sfondo pagina, superficie principale
    • rtds-background-02: Sfondo secondario leggero
    • rtds-background-03: Sfondo terziario
    • rtds-background-04 … rtds-background-09: Scale progressivamente più scure

  • Sfondo Semantico:

    • rtds-background-primary: Sfondo colore primario
    • rtds-background-primary-light: Variante chiara
    • rtds-background-primary-dark: Variante scura
    • rtds-background-secondary: Sfondo colore secondario
    • rtds-background-secondary-light: Variante chiara
    • rtds-background-secondary-dark: Variante scura
    • rtds-background-inverse: Sfondo scuro (per sezioni in contrasto)

Colori dei Bordi

  • Bordi Grigi (scala da chiaro a scuro):

    • rtds-border-gray-01: Bordo molto leggero
    • rtds-border-gray-02: Bordo leggero standard
    • rtds-border-gray-03: Bordo medio
    • rtds-border-gray-04: Bordo scuro

  • Bordi Semantici:

    • rtds-border-primary: Bordo colore primario
    • rtds-border-secondary: Bordo colore secondario
    • rtds-border-input: Bordo per campi input
    • rtds-border-inverse: Bordo chiaro (su sfondi scuri)

  • Divisori (con border-color su divide-*):

    • rtds-divide-gray-01 … rtds-divide-gray-04: Divisori grigi
    • rtds-divide-primary: Divisore primario
    • rtds-divide-secondary: Divisore secondario
    • rtds-divide-inverse: Divisore chiaro

Focus Ring

  • rtds-outline-focusring: Colore del focus ring per accessibilità tastiera

CSS Custom Properties

Tutte le utility semantiche si basano su CSS Custom Properties definite in public/css/custom-properties.css. I CMS ospitanti possono sovrascriverle senza modificare il markup.

Content (testo)

Variabile Default
--color-content-01 --color-neutral-900
--color-content-02 --color-secondary-500
--color-content-03 --color-neutral-800
--color-content-05 --color-neutral-700
--color-content-inverse --color-neutral-50
--color-content-disabled --color-neutral-600
--color-content-primary --color-primary-500
--color-content-primary-dark --color-primary-900
--color-content-primary-light --color-primary-100
--color-content-secondary --color-secondary-500
--color-content-secondary-dark --color-secondary-900
--color-content-secondary-light --color-secondary-100
--color-content-error --color-error-dark
--color-content-warn --color-warn-dark
--color-content-info --color-info-dark
--color-content-success --color-success-dark
--color-content-category --color-primary-600
--color-content-placeholder --color-secondary-500
--color-input-placeholder --color-secondary-500

Button

Variabile Default
--color-button-primary --color-primary-500
--color-button-primary-hover --color-primary-600
--color-button-primary-active --color-primary-700
--color-button-secondary --color-secondary-500
--color-button-secondary-hover --color-secondary-600
--color-button-secondary-active --color-secondary-700
--color-button-disabled --color-secondary-300
--color-button-outline --color-primary-500
--color-button-outline-hover --color-primary-600
--color-button-outline-active --color-primary-700
--color-button-only-text --color-primary-500
--color-button-only-text-hover --color-primary-600
--color-button-only-text-active --color-primary-700
--color-button-inverted --color-neutral-50
--color-button-inverted-hover --color-neutral-50
--color-button-inverted-active --color-neutral-100
--color-button-inverted-text --color-content-02
--color-button-text-inverted transparent
--color-button-text-inverted-hover rgba(0,0,0,0.5)
--color-button-text-inverted-text --color-content-inverse
Variabile Default
--color-link-primary --color-primary-500
--color-link-primary-hover --color-primary-600
--color-link-visited --color-primary-900
--color-link-inverse --color-primary-400
--color-link-inverse-hover --color-primary-200
--color-link-inverse-visited --color-primary-100
--color-link-secondary --color-secondary-500
--color-link-secondary-hover --color-secondary-500
--color-link-secondary-active --color-neutral-900

Background

Variabile Default
--color-background-01 --color-neutral-50
--color-background-02 --color-neutral-100
--color-background-03 --color-neutral-300
--color-background-04 --color-neutral-400
--color-background-05 --color-neutral-700
--color-background-06 --color-neutral-800
--color-background-07 --color-neutral-900
--color-background-08 --color-secondary-600
--color-background-09 --color-secondary-800
--color-background-primary --color-primary-500
--color-background-primary-light --color-primary-50
--color-background-primary-dark --color-primary-900
--color-background-secondary --color-secondary-500
--color-background-secondary-light --color-secondary-200
--color-background-secondary-dark --color-secondary-900
--color-background-inverse --color-neutral-50

Border e Divide

Variabile Default
--color-border-gray-01 --color-neutral-300
--color-border-gray-02 --color-neutral-400
--color-border-gray-03 --color-neutral-600
--color-border-gray-04 --color-neutral-800
--color-border-input --color-neutral-700
--color-border-primary --color-primary-500
--color-border-secondary --color-secondary-500
--color-border-inverse --color-neutral-50
--color-divide-gray-01 --color-neutral-300
--color-divide-gray-02 --color-neutral-400
--color-divide-gray-03 --color-neutral-600
--color-divide-gray-04 --color-neutral-800
--color-divide-primary --color-primary-500
--color-divide-secondary --color-secondary-500
--color-divide-inverse --color-neutral-50

Utilizzo

<!-- Testi -->
<p class="rtds-content-01">Testo principale</p>
<p class="rtds-content-primary">Testo con colore primario</p>
<p class="rtds-content-inverse">Testo su sfondo scuro</p>
<span class="rtds-content-error">Messaggio di errore</span>

<!-- Sfondi -->
<div class="rtds-background-01">Sfondo neutro chiaro</div>
<div class="rtds-background-primary">Sfondo primario</div>
<div class="rtds-background-inverse">Sezione in contrasto scuro</div>

<!-- Bordi -->
<div class="rtds-border rtds-border-gray-02 rtds-rounded">Elemento con bordo</div>
<div class="rtds-border rtds-border-primary">Bordo primario</div>

<!-- Divisori tra elementi lista -->
<ul class="rtds-divide-y rtds-divide-gray-02">
  <li class="rtds-py-3">Elemento</li>
  <li class="rtds-py-3">Elemento</li>
</ul>

<!-- Pulsante semantico (usare @button per componente completo) -->
<button class="rtds-button-primary rtds-content-inverse">
  Pulsante primario
</button>

<!-- Link -->
<a href="#" class="rtds-link-primary">Link primario</a>
<a href="#" class="rtds-link-inverse">Link su sfondo scuro</a>