/* App-local styles for Roster. * * The app is built from @ecosystem/design components; what lives here is the * member card, the person page and the profile editor's link rows — the three * shapes no existing component covers. * * Per packages/design/README.md this file may consume semantic tokens but * must not redefine any .ds-* component. */ /* This app's accent lives in @ecosystem/design — css/app-themes.css, keyed on the `data-app` slug the shell puts on . It moved there when the accents started being DERIVED from each app's logo rather than chosen per app: the ramp, the contrast check and the logo are one decision now, and splitting them across six stylesheets is how they drift apart. Repointing a semantic token is still the supported extension point — that file is just where this particular repointing happens. */ /* --- A person, on the grid ------------------------------------------------ */ /* A member's card is a link, so it needs the things .ds-card doesn't assume: a text colour that survives visited/hover, and its own internal layout — .ds-card only sets the box, not what's inside it. */ .member { display: flex; align-items: flex-start; gap: var(--ds-space-3); color: inherit; text-decoration: none; transition: border-color var(--ds-duration-fast) var(--ds-ease), box-shadow var(--ds-duration-fast) var(--ds-ease); } .member:hover { border-color: var(--ds-border-strong); box-shadow: var(--ds-shadow-md); color: inherit; } .member__avatar { flex: none; } .member__body { display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; } .member__name { font-weight: var(--ds-weight-semibold); } .member__pronouns, .member__where { font-size: var(--ds-text-xs); color: var(--ds-text-subtle); } .member__title { font-size: var(--ds-text-sm); color: var(--ds-text-muted); } .member__skills { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); margin-top: var(--ds-space-1); } /* An empty profile says so rather than leaving a gap, because on a directory the absence IS the information — it is the nudge to go and fill it in. */ .member__empty { margin-top: var(--ds-space-1); font-size: var(--ds-text-xs); font-style: italic; color: var(--ds-text-subtle); } /* --- One person's page ---------------------------------------------------- */ .person__head { display: flex; align-items: flex-start; gap: var(--ds-space-4); } .person__avatar { flex: none; } .person__id { min-width: 0; } .person__pronouns { margin-inline-start: var(--ds-space-2); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-normal); color: var(--ds-text-subtle); } .person__title { margin: var(--ds-space-1) 0 0; font-size: var(--ds-text-lg); color: var(--ds-text-muted); } .person__roles { margin-top: var(--ds-space-2); } /* --ds-measure, not a container width: a bio is prose, and prose that runs the full width of a desktop is prose nobody finishes. */ .person__bio { max-width: var(--ds-measure); margin: 0; white-space: pre-wrap; line-height: var(--ds-leading-base); } .skill-chip { border: 0; cursor: pointer; font: inherit; font-size: var(--ds-text-xs); } .skill-chip:hover { background: var(--ds-accent-subtle); color: var(--ds-accent); } .sprout-card { display: block; color: inherit; text-decoration: none; transition: border-color var(--ds-duration-fast) var(--ds-ease), box-shadow var(--ds-duration-fast) var(--ds-ease); } .sprout-card:hover { border-color: var(--ds-border-strong); box-shadow: var(--ds-shadow-md); } .sprout-card__title { font-weight: var(--ds-weight-medium); margin-bottom: var(--ds-space-1); } /* A small section heading ("Skills", "Shared pages") — the same shape as .ds-nav__label but not that class itself, since this isn't navigation. */ .section-label { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-subtle); margin-bottom: var(--ds-space-2); } /* --- The editor ----------------------------------------------------------- */ /* The label is narrow and the URL is long, so they must not share a width. The remove button stays its own size at the end of the row. */ .link-row { align-items: center; } .link-row__label { flex: 0 1 10rem; min-width: 0; } .link-row__url { flex: 1 1 16rem; min-width: 0; } /* --- Chrome --------------------------------------------------------------- */ .search { width: min(20rem, 35vw); } @media (max-width: 30rem) { .search { width: 9rem; } } .ds-nav__empty { padding: var(--ds-space-1) var(--ds-space-2); margin: 0; font-size: var(--ds-text-xs); color: var(--ds-text-subtle); } .toast { position: fixed; inset-inline: auto var(--ds-space-4); inset-block-end: var(--ds-space-4); z-index: var(--ds-z-toast); max-width: 28rem; box-shadow: var(--ds-shadow-lg); } /* --- Org chart ------------------------------------------------------------- An indented tree, not boxes and connector lines. A node-and-edge layout needs a layout algorithm and is the wrong shape for a browser anyway: this version is navigable with a screen reader, survives a narrow window, and stays readable past fifteen people. See renderChart() in app.js. -------------------------------------------------------------------------- */ .chart, .chart__reports { list-style: none; margin: 0; padding: 0; } /* The indent, and the line that makes the nesting legible at a glance. */ .chart__reports { margin-left: var(--ds-space-4); padding-left: var(--ds-space-4); border-left: var(--ds-border-width) solid var(--ds-border); } .chart__node { margin-block: var(--ds-space-1); } .chart__person { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-3); border: var(--ds-border-width) solid transparent; border-radius: var(--ds-radius-md); color: var(--ds-text); text-decoration: none; } .chart__person:hover { background: var(--ds-surface-hover); border-color: var(--ds-border); } .chart__person--you { background: var(--ds-accent-subtle); } .chart__person--you .chart__name { color: var(--ds-accent); } .chart__who { display: flex; flex-direction: column; min-width: 0; } .chart__name { font-weight: var(--ds-weight-medium); } .chart__title { color: var(--ds-text-muted); font-size: var(--ds-text-xs); } .chart__person .ds-badge { margin-inline-start: auto; }