Object | Color
Object | Color | Text Colors
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="ss-c-grid">
<label>.object--color--text_primary</label>
<div class="ss-c-swatch ss-c-object--color--text_primary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--text_secondary</label>
<div class="ss-c-swatch ss-c-object--color--text_secondary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--text_tertiary</label>
<div class="ss-c-swatch ss-c-object--color--text_tertiary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Object | Color | Line Colors
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="ss-c-grid">
<label>.object--color--line_primary</label>
<div class="ss-c-swatch ss-c-object--color--line_primary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--line_secondary</label>
<div class="ss-c-swatch ss-c-object--color--line_secondary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--line_tertiary</label>
<div class="ss-c-swatch ss-c-object--color--line_tertiary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Object | Color | Fill Colors
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="ss-c-grid">
<label>.object--color--color_primary</label>
<div class="ss-c-swatch ss-c-object--color--fill_primary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--color_secondary</label>
<div class="ss-c-swatch ss-c-object--color--fill_secondary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--color_tertiary</label>
<div class="ss-c-swatch ss-c-object--color--fill_tertiary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Object | Color | Accent Colors
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="ss-c-grid">
<label>.object--color--accent_primary</label>
<div class="ss-c-swatch ss-c-object--color--accent_primary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--accent_secondary</label>
<div class="ss-c-swatch ss-c-object--color--accent_secondary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--accent_tertiary</label>
<div class="ss-c-swatch ss-c-object--color--accent_tertiary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Object | Color | State Colors
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="ss-c-grid">
<label>.object--color--state_visited</label>
<div class="ss-c-swatch ss-c-object--color--state_visited">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--state_focus</label>
<div class="ss-c-swatch ss-c-object--color--state_focus">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--state_hover</label>
<div class="ss-c-swatch ss-c-object--color--state_hover">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--state_active</label>
<div class="ss-c-swatch ss-c-object--color--state_active">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--state_link</label>
<div class="ss-c-swatch ss-c-object--color--state_link">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--state_enabled</label>
<div class="ss-c-swatch ss-c-object--color--state_enabled">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--state_disabled</label>
<div class="ss-c-swatch ss-c-object--color--state_disabled">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--state_current</label>
<div class="ss-c-swatch ss-c-object--color--state_current">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--state_checked</label>
<div class="ss-c-swatch ss-c-object--color--state_checked">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--state_invalid</label>
<div class="ss-c-swatch ss-c-object--color--state_invalid">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--state_muted</label>
<div class="ss-c-swatch ss-c-object--color--state_muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Object | Color | Log Colors
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML
<div class="ss-c-grid">
<label>.object--color--log_trace</label>
<div class="ss-c-swatch ss-c-object--color--log_trace">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--log_debug</label>
<div class="ss-c-swatch ss-c-object--color--log_debug">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--log_success</label>
<div class="ss-c-swatch ss-c-object--color--log_success">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--log_info</label>
<div class="ss-c-swatch ss-c-object--color--log_info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--log_notice</label>
<div class="ss-c-swatch ss-c-object--color--log_notice">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--log_warning</label>
<div class="ss-c-swatch ss-c-object--color--log_warning">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--log_audit</label>
<div class="ss-c-swatch ss-c-object--color--log_audit">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--log_error</label>
<div class="ss-c-swatch ss-c-object--color--log_error">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--log_security</label>
<div class="ss-c-swatch ss-c-object--color--log_security">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--log_critical</label>
<div class="ss-c-swatch ss-c-object--color--log_critical">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--log_alert</label>
<div class="ss-c-swatch ss-c-object--color--log_alert">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<label>.object--color--log_emergency</label>
<div class="ss-c-swatch ss-c-object--color--log_emergency">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>