Semantic Color Utilities

Ready

HTML
View
Context
Assets
Info
Notes


        
        <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"
        }
      ]
    }
  ]
}

File:

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:
- With layout
- Component only
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

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

Colori dei Link

rtds-link-primary: Link primario
rtds-link-visited: Link visitato
rtds-link-inverse: Link su sfondo scuro
rtds-link-primary-hover: Hover link primario
rtds-link-inverse-hover: Hover link su sfondo scuro

Colori di Sfondo

Sfondo Neutro:
- rtds-background-01 a rtds-background-09: Scale di grigi
Sfondo Semantico:
- rtds-background-primary: Sfondo primario
- rtds-background-secondary: Sfondo secondario
- rtds-background-inverse: Sfondo chiaro

Colori dei Bordi

Bordi Grigi:
- rtds-border-gray-01 a rtds-border-gray-04: Scale di grigi
- rtds-divide-gray-01 a rtds-divide-gray-04: Divisori
Bordi Semantici:
- rtds-border-primary: Bordo primario
- rtds-border-secondary: Bordo secondario
- rtds-border-inverse: Bordo chiaro

Utilizzo

<!-- Esempio di utilizzo per il testo -->
<p class="rtds-content-primary">Testo con colore primario</p>

<!-- Esempio di utilizzo per lo sfondo -->
<div class="rtds-background-01">Contenitore con sfondo chiaro</div>

<!-- Esempio di utilizzo per i bordi -->
<div class="rtds-border-gray-01">Elemento con bordo grigio chiaro</div>

<!-- Esempio di utilizzo per i pulsanti -->
<button class="rtds-button-primary rtds-content-inverse">
  Pulsante primario
</button>