Type Badge - defuss-shadcn

On this page (3)

Component Skill — components/type-badge/component-skill.md

Native basis

<span> element with data-type driving the color and title carrying the full type name as the native tooltip. No interactivity.

Web Platform APIs

Classes

.type-badge

Types (data-type)

ATMAtom - cyanMOLMolecule - blueORGOrganism - violetBLKBlock - amberTPLTemplate - slate

Sizes (data-size)

xs0.5625rem - the defaultsm0.6875remmd0.8125remlg0.9375remxl1.0625rem

§All types

The code is the type; the title tooltip spells it out. Colors are hardcoded per taxonomy identity - a type looks the same under every theme.

§Sizes

data-size scales the chip from the xs default up to xl.

§CSS view file

/* -- Type Badge component ------------------------------------ */

@layer components {

  .type-badge {

    font-size: 0.5625rem;

    font-weight: 600;

    letter-spacing: 0.05em;

    font-family: var(--font-mono);

    padding: 0.125rem 0.375rem;

    border: 1px solid;

    border-radius: var(--radius-sm);

    background: transparent;

    flex-shrink: 0;

    line-height: 1.4;

    &[data-size="xs"] { font-size: 0.5625rem; }

    &[data-size="sm"] { font-size: 0.6875rem; }

    &[data-size="md"] { font-size: 0.8125rem; }

    &[data-size="lg"] { font-size: 0.9375rem; }

    &[data-size="xl"] { font-size: 1.0625rem; }

    &[data-type="ATM"] { color: #06B6D4; border-color: color-mix(in oklch, #06B6D4 40%, transparent); }

    &[data-type="MOL"] { color: #3B82F6; border-color: color-mix(in oklch, #3B82F6 40%, transparent); }

    &[data-type="ORG"] { color: #8B5CF6; border-color: color-mix(in oklch, #8B5CF6 40%, transparent); }

    &[data-type="BLK"] { color: #F59E0B; border-color: color-mix(in oklch, #F59E0B 40%, transparent); }

    &[data-type="TPL"] { color: #64748B; border-color: color-mix(in oklch, #64748B 40%, transparent); }

  .dark .type-badge {

    &[data-type="ATM"] { color: #22D3EE; border-color: color-mix(in oklch, #22D3EE 40%, transparent); }

    &[data-type="MOL"] { color: #60A5FA; border-color: color-mix(in oklch, #60A5FA 40%, transparent); }

    &[data-type="ORG"] { color: #A78BFA; border-color: color-mix(in oklch, #A78BFA 40%, transparent); }

    &[data-type="BLK"] { color: #FBBF24; border-color: color-mix(in oklch, #FBBF24 40%, transparent); }

    &[data-type="TPL"] { color: #94A3B8; border-color: color-mix(in oklch, #94A3B8 40%, transparent); }

  @media (forced-colors: active) {

    .type-badge { color: CanvasText; border-color: CanvasText; }