Skip to main content

Variant mixins

Variant mixins help create components without the need to define the basic styles of the design system. They streamline the process and ensure consistency.

To use the variant mixins, apply them to each of the relevant classes and pseudo-classes required in the component.

@use '@circutor/ui/abstracts/cds-mixins' as mixins;

.my-class {
    @include mixins.cds-accent;
    &:hover{
        @include mixins.cds-accent--hover;
    }
    &:active{
        @include mixins.cds-accent--active;
    }
    &[disabled], &.is-disabled, &[aria-disabled=true]{
        @include mixins.cds-accent--disabled;
    }
    ...
}

Accent​

The Accent variant is designed to add a touch of emphasis to UI elements without overpowering the overall design. It introduces a brand color that stands out while maintaining visual harmony. This variant is typically used in elements that require subtle prominence, such as highlights, tags, or supporting buttons.

NameMixin
Defaultmixins.cds-accent
Hovermixins.cds-accent--hover
Activemixins.cds-accent--active
Disabledmixins.cds-accent--disabled
Accent variant
Accent disabled

Primary​

The Primary variant represents the main action or most prominent element in a given context. It is used to highlight key interactive components such as primary buttons or main badges. This variant ensures strong visual hierarchy and clear user guidance, making essential actions easily recognizable.

NameMixin
Defaultmixins.cds-primary
Hovermixins.cds-primary--hover
Activemixins.cds-primary--active
Disabledmixins.cds-primary--disabled
Primary variant
Primary disabled

Secondary​

The Secondary variant provides a complementary styling option that supports the primary elements without competing for attention. It is often used for alternative actions, secondary buttons, or supporting UI elements, offering a balanced contrast while maintaining coherence with the design system.

NameMixin
Defaultmixins.cds-secondary
Hovermixins.cds-secondary--hover
Activemixins.cds-secondary--active
Disabledmixins.cds-secondary--disabled
Secondary variant
Secondary disabled

Tertiary​

The Tertiary variant offers a subtle and minimal styling option, designed for low-emphasis actions or tertiary buttons. It is ideal for non-primary interactions, such as navigation links or secondary utilities, ensuring a clean and unobtrusive appearance while aligning with the overall design system.

NameMixin
Defaultmixins.cds-tertiary
Hovermixins.cds-tertiary--hover
Activemixins.cds-tertiary--active
Disabledmixins.cds-tertiary--disabled
Tertiary variant
Tertiary disabled

Inverse​

The Inverse variant is specifically designed for high-contrast scenarios, ensuring readability on dark or highly saturated backgrounds. It inverts the typical color scheme to maintain accessibility and clarity, often applied to text, icons, or elements placed on dark surfaces.

NameMixin
Defaultmixins.cds-inverse
Hovermixins.cds-inverse--hover
Activemixins.cds-inverse--active
Disabledmixins.cds-inverse--disabled
Inverse variant
Inverse disabled

Feedback​

The Feedback variant is used to communicate system status, such as success, error, warning, or informational messages. It ensures clear and accessible visual feedback, helping users quickly understand system responses. Feedback colors are predefined and consistent across different components like banners, alerts, and form validation states.

NameMixin
Defaultmixins.cds-feedback('feedback-state')
Icons

The Feedback mixins always include an icon that indicates the type of message being displayed. This icon is predefined and automatically inserted using the ::before pseudoclass, ensuring visual consistency and eliminating the need for manual configuration in each component.

Is highlighted​

The feedback variant has a highlighted mode to emphasize feedback colors automatically by adding the state modifier is-highlighted.

Alternative​

The Alternative variant is intended for special cases where additional differentiation is needed. It breaks from the standard color scheme and should be used sparingly in small components like badges or decorative elements. Due to its distinct nature, it is recommended to apply this variant with caution to maintain design consistency.

NameMixin
Defaultmixins.cds-color-alternative('color-number')
Hovermixins.cds-color-alternative--hover('color-number')
Activemixins.cds-color-alternative--active('color-number')
Alternative 1
Alternative 2
Alternative 3
Alternative 4
Alternative 5
Alternative 6
Alternative 7
Alternative 8
Alternative 9
Alternative 10

Is highlighted​

The alternatives also have a highlighted mode to automatically emphasize the colors by adding the state modifier is-highlighted.

Alternative 1
Alternative 2
Alternative 3
Alternative 4
Alternative 5
Alternative 6
Alternative 7
Alternative 8
Alternative 9
Alternative 10