orbital-core-components 0.1.1

Themed Orbital UI components for Leptos applications
Documentation
/// Badge stylesheet.
pub fn badge_styles() -> &'static str {
    r#".orbital-badge {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: var(--orb-type-family-sans);
    font-size: var(--orb-type-size-xs);
    font-weight: var(--orb-type-weight-semibold);
    line-height: var(--orb-type-line-sm);
    height: 20px;
    width: 20px;
    min-width: max-content;
    padding: 0 calc(var(--orb-space-inline-xs) + var(--orb-space-inline-2xs));
    border-radius: var(--orb-radius-circular);
    border-color: var(--orb-color-border-transparent);
}

.orbital-badge--filled {
    color: var(--orb-color-text-on-brand);
    background-color: var(--orb-color-brand-bg);
}

.orbital-badge--filled.orbital-badge--danger {
    background-color: var(--orb-color-palette-red-bg);
}

.orbital-badge--filled.orbital-badge--important {
    color: var(--orb-color-surface-canvas);
    background-color: var(--orb-color-text-primary);
}

.orbital-badge--filled.orbital-badge--informative {
    color: var(--orb-color-text-tertiary);
    background-color: var(--orb-color-surface-raised);
}

.orbital-badge--filled.orbital-badge--severe {
    background-color: var(--orb-color-palette-orange-bg);
}

.orbital-badge--filled.orbital-badge--subtle {
    color: var(--orb-color-text-primary);
    background-color: var(--orb-color-surface-canvas);
}

.orbital-badge--filled.orbital-badge--success {
    background-color: var(--orb-color-palette-green-bg);
}

.orbital-badge--filled.orbital-badge--warning {
    color: var(--orb-color-text-primary-static);
    background-color: var(--orb-color-palette-yellow-bg);
}

.orbital-badge--ghost {
    color: var(--orb-color-brand-fg);
}

.orbital-badge--ghost.orbital-badge--danger {
    color: var(--orb-color-palette-red-fg-strong);
}

.orbital-badge--ghost.orbital-badge--important {
    color: var(--orb-color-text-primary);
}

.orbital-badge--ghost.orbital-badge--informative {
    color: var(--orb-color-text-tertiary);
}

.orbital-badge--ghost.orbital-badge--severe {
    color: var(--orb-color-palette-orange-fg-strong);
}

.orbital-badge--ghost.orbital-badge--subtle {
    color: var(--orb-color-text-on-static);
}

.orbital-badge--ghost.orbital-badge--success {
    color: var(--orb-color-palette-green-fg-strong);
}

.orbital-badge--ghost.orbital-badge--warning {
    color: var(--orb-color-palette-yellow-fg-muted);
}

.orbital-badge--outline {
    color: var(--orb-color-brand-fg);
    border-color: currentcolor;
}

.orbital-badge--outline.orbital-badge--danger {
    color: var(--orb-color-palette-red-fg-strong);
    border-color: var(--orb-color-palette-red-border-strong);
}

.orbital-badge--outline.orbital-badge--important {
    color: var(--orb-color-text-tertiary);
    border-color: var(--orb-color-border-accessible);
}

.orbital-badge--outline.orbital-badge--informative {
    color: var(--orb-color-text-tertiary);
    border-color: var(--orb-color-border-subtle);
}

.orbital-badge--outline.orbital-badge--severe {
    color: var(--orb-color-palette-orange-fg-strong);
}

.orbital-badge--outline.orbital-badge--subtle {
    color: var(--orb-color-text-on-static);
}

.orbital-badge--outline.orbital-badge--success {
    color: var(--orb-color-palette-green-fg-strong);
    border-color: var(--orb-color-palette-green-border-strong);
}

.orbital-badge--outline.orbital-badge--warning {
    color: var(--orb-color-palette-yellow-fg-muted);
}

.orbital-badge--tint {
    color: var(--orb-color-brand-fg-secondary);
    background-color: var(--orb-color-brand-bg-subtle);
    border-color: var(--orb-color-brand-stroke-subtle);
}

.orbital-badge--tint.orbital-badge--danger {
    background-color: var(--orb-color-palette-red-bg-subtle);
    color: var(--orb-color-palette-red-fg);
    border-color: var(--orb-color-palette-red-border);
}

.orbital-badge--tint.orbital-badge--important {
    background-color: var(--orb-color-text-tertiary);
    color: var(--orb-color-surface-canvas);
    border-color: var(--orb-color-border-transparent);
}

.orbital-badge--tint.orbital-badge--informative {
    background-color: var(--orb-color-surface-overlay);
    color: var(--orb-color-text-tertiary);
    border-color: var(--orb-color-border-subtle);
}

.orbital-badge--tint.orbital-badge--severe {
    background-color: var(--orb-color-palette-orange-bg-subtle);
    color: var(--orb-color-palette-orange-fg);
    border-color: var(--orb-color-palette-orange-border);
}

.orbital-badge--tint.orbital-badge--subtle {
    background-color: var(--orb-color-surface-canvas);
    color: var(--orb-color-text-tertiary);
    border-color: var(--orb-color-border-subtle);
}

.orbital-badge--tint.orbital-badge--success {
    background-color: var(--orb-color-palette-green-bg-subtle);
    color: var(--orb-color-palette-green-fg);
    border-color: var(--orb-color-palette-green-border);
}

.orbital-badge--tint.orbital-badge--warning {
    background-color: var(--orb-color-palette-yellow-bg-subtle);
    color: var(--orb-color-palette-yellow-fg);
    border-color: var(--orb-color-palette-yellow-border);
}

.orbital-badge--tiny {
    min-width: unset;
    line-height: 4px;
    font-size: 4px;
    height: 6px;
    width: 6px;
    padding: unset;
}

.orbital-badge--extra-small {
    min-width: unset;
    line-height: 6px;
    font-size: 6px;
    height: 10px;
    width: 10px;
    padding: unset;
}

.orbital-badge--small {
    line-height: var(--orb-type-line-sm);
    font-size: var(--orb-type-size-2xs);
    height: 16px;
    width: 16px;
    padding: 0 calc(var(--orb-space-inline-2xs) + var(--orb-space-inline-2xs));
}

.orbital-badge--large {
    height: 24px;
    width: 24px;
    padding: 0 calc(var(--orb-space-inline-xs) + var(--orb-space-inline-2xs));
}

.orbital-badge--extra-large {
    height: 32px;
    width: 32px;
    padding: 0
        calc(var(--orb-space-inline-snudge) + var(--orb-space-inline-2xs));
}

.orbital-badge::after {
    content: "";
    position: absolute;
    inset: 0px;
    border-style: solid;
    border-color: inherit;
    border-width: var(--orb-stroke-thin);
    border-radius: inherit;
}
"#
}