Pills

All rules live under #boot .c-pills in etc/designs/concordia/clientlibs/base/less/pills.less, imported from base/css.txt (with design tokens). The default pill is burgundy fill with white type; modifiers swap background and border behaviour. Accordion context: from 768px up, .c-accordion .c-pills__list uses justify-content: end.

Design system notes

• Align with tokens: prefer CDS custom properties already used in the file (--cds-font-size-050, --cds-space-, --cds-border-radius-full, --cds-color-tint-) and dependencies.less colours for solid pills.
• Legacy cleanup: the LESS file includes a TODO to replace .pill-sunset, .pill-light-grey, .research-grey, .pill-certificate, .pill-interdisciplinary, .pill-option, .research-creation with generic c-pills__pill--* usage; track templates that emit lowercase label classes (for example some CCE views).
• Contrast: yellow and cyan pills use black text on saturated backgrounds; verify contrast when changing hex or tokens.

• List: Flex row, wrap, gap: 0.5rem, no bullets; top margin on small screens, reset at 768px.
• Default pill: border-radius: 20px, padding .25rem .75rem, bold, CDS body font, burgundy background.
• Large: c-pills__pill--large uses brand font, larger type (--cds-font-size-125), semi-bold, border-radius: 40px, more padding; mobile padding tweak.
• Input pill span: Full pill radius (--cds-border-radius-full), 2px solid border, horizontal padding from --cds-space-20, white background until hover, active, or checked (then filled per colour modifier).

• Input pills: :hover, :active, :checked on the control fill the span and flip text to white (except yellow, cyan, grey, burgundy-tint variants where spec keeps dark text).
• Transparent + input: Hover on span can add underline for link-like filters.

• Card: .c-card .c-pills__container gets margin-top: 20px and left-aligned text.
• Right cluster: .c-pills__container--right at 768px+ gets margin-left: auto, text-align: right, align-self: center.

• Static pills are plain text in span or list items; ensure surrounding heading or list context makes the meaning clear.
• Input pills hide the native input with position: absolute; left: -9999px. That pattern removes the control from the visual flow but it should remain focusable; test keyboard order and focus visibility on the label (browser focuses label and activates input). If focus is lost or invisible, add explicit :focus-within styles on the label or use a visually hidden class that keeps focus visible.
• Faculty pills pair text with decorative SVG (role="presentation", aria-hidden="true"); status should still be clear from visible text.

• Use aria-label when the visible text is ambiguous (example: CDS Beta pill).
• For filter groups, a visible group label or fieldset / legend (where used) helps screen reader users.

• Labels for checkbox or radio pills should toggle when Space is used on the focused control.
• Large view toggles implemented as links behave like normal links (Enter).

• Announced text is the pill label; colour alone must not be the only cue (faculty pattern uses icon, tint variants, and wording).

• Confirm focus ring on c-pills__input label spans matches design system expectations; pills.less does not define a custom focus-custom block on pill labels (unlike some form controls).

• Understanding non-text contrast (1.4.11) for pill boundaries and fills.
• Understanding use of color (1.4.1).

Pills are CSS-first: there is no single Pills dialog for authors. Templates, HTL, and JSP build lists and labels and apply c-pills classes. Behaviour (static tag versus filter input) is defined per feature (student lists, offerings, profiles, and so on).

Styles ship with apps.concordia.base (see Implementation files).

1. Static pills: span with c-pills__pill and a colour modifier inside ul.c-pills__list for tags, program types, topics, and similar.
2. Toggle / filter pills: label.c-pills__input wrapping a visually hidden checkbox or radio and a span that looks like a pill; selected state uses :checked and colour modifiers.
3. Large segmented controls: Links or buttons with c-pills__pill c-pills__pill--large (for example view toggles).
4. Layout helpers: .c-pills__container--right aligns a pill group to the end of a row on desktop; cards get extra top margin for .c-pills__container via nested rules.

Clientlib: apps.concordia.base (see base/css.txt); embedded in concordia-master-clientlibs.

Overrides: individual-profile-list.less, student-group-list.less, cce/less/offering-template.less extend or tweak pills in context.

Static tag (preferred):

<div class="c-pills">
  <ul class="c-pills__list">
    <li><span class="c-pills__pill c-pills__pill--grey">Topic</span></li>
  </ul>
</div>

Checkbox / radio pill (pattern):

<ul class="c-pills__list">
  <li>
    <label class="c-pills__input c-pills__pill--blue">
      <input type="checkbox" name="x" value="y">
      <span>Label</span>
    </label>
  </li>
</ul>

(Individual profile list uses c-pills__filter-pill inside the label instead of a bare span.)

There is no global Pills component dialog. Labels come from i18n in JSP, models or HTL, or fixed copy in templates (for example CDS beta, association legend). Card components may expose fields that map to pill HTML from models.

• dependencies.less (colour variables).
• CDS design token LESS (via base imports).
• Optional SVG sprite for faculty pills (ci-circle-check / ci-circle-cross).