@hearthsound/design 0.0.0-stage → 0.1.1

package/css/components/card.css

@@ -0,0 +1,339 @@
+/*
+ * @hearthsound/design - cards
+ *
+ * k13 C album card, k14 B artist card, k15 playlist card, k16 C mosaic,
+ * f15b missing art, l10 admin Overview cards, p18 Top Result card.
+ * Values from shared/approved/components.css (.ac, .mos, .dash, .acard,
+ * p18 page CSS) and spec/components.md.
+ */
+
+/* ------------------------------------------------------------------ */
+/* k13 / k14 / k15 - cards                                            */
+/* ------------------------------------------------------------------ */
+
+.hs-card {
+  position: relative;
+  padding: 8px;
+  margin: -8px;
+  border-radius: var(--hs-radius-card);
+  color: var(--hs-fg);
+  font: 400 14px/1.35 var(--hs-font-body);
+  container-type: inline-size;
+  transition: background var(--hs-duration-hover) var(--hs-ease);
+}
+
+/* The card link covers the whole tile; the play disc is a separate target
+ * above it, reachable with Tab after the card (k13). */
+.hs-card__link {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  color: inherit;
+  text-decoration: none;
+}
+
+.hs-card:has(.hs-card__link:focus-visible) {
+  outline: none;
+  background: var(--hs-accent-tint);
+}
+
+.hs-card__cover {
+  position: relative;
+  display: block;
+  aspect-ratio: 1;
+  border-radius: var(--hs-radius-art);
+  transition: transform var(--hs-duration-hover) var(--hs-ease),
+    box-shadow var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-card__cover img {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  display: block;
+  object-fit: cover;
+}
+
+/* f15b - tonal tile with the centred icon at 36% (minimum 14 px). */
+.hs-art-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--hs-art-placeholder-bg);
+  color: var(--hs-fg-muted);
+}
+
+.hs-art-placeholder .hs-icon {
+  --hs-icon-size: 36%;
+  min-width: 14px;
+  min-height: 14px;
+  opacity: 0.8;
+}
+
+.hs-card__text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.hs-card__title {
+  font-weight: 600;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.hs-card__artist {
+  color: var(--hs-fg-muted);
+  font-size: 13px;
+}
+
+/* Play disc: 44 px acid disc at the cover's bottom-right, 8 px inset. */
+.hs-card__play {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  z-index: 2;
+  opacity: 0;
+  transform: translateY(4px);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
+  transition: opacity var(--hs-duration-hover) var(--hs-ease),
+    transform var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-card:hover,
+.hs-card:active {
+  background: var(--hs-control-tone);
+}
+
+.hs-card:hover .hs-card__play,
+.hs-card:focus-within .hs-card__play {
+  opacity: 1;
+  transform: none;
+}
+
+.hs-card:active .hs-card__cover {
+  transform: scale(0.98);
+}
+
+.hs-card:has(.hs-card__link:focus-visible) .hs-card__cover {
+  transform: translateY(-2px) scale(1.03);
+  box-shadow: var(--hs-focus-shadow);
+}
+
+.hs-card:has(.hs-card__link:focus-visible) .hs-card__title {
+  color: var(--hs-accent-text);
+}
+
+/* k14 B - round picture, name under, centred, 4 px disc inset. */
+.hs-card--artist .hs-card__cover {
+  border-radius: 50%;
+}
+
+.hs-card--artist .hs-art-placeholder .hs-icon {
+  --hs-icon-size: 40%;
+}
+
+.hs-card--artist .hs-card__play {
+  right: 4px;
+  bottom: 4px;
+}
+
+.hs-card--artist .hs-card__text {
+  align-items: center;
+  text-align: center;
+}
+
+/* f09 - art corners drop to 6 px below a 120 px cover. */
+@container (max-width: 119px) {
+  .hs-card__cover {
+    border-radius: var(--hs-radius-art-small);
+  }
+
+  .hs-card__cover > .hs-mosaic {
+    border-radius: var(--hs-radius-art-small);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hs-card,
+  .hs-card__cover,
+  .hs-card__play {
+    transition: none;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* k16 C - playlist mosaic cover                                      */
+/* ------------------------------------------------------------------ */
+
+.hs-mosaic {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  border-radius: inherit;
+  overflow: hidden;
+}
+
+.hs-mosaic img {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  display: block;
+  object-fit: cover;
+}
+
+.hs-mosaic .hs-art-placeholder {
+  border-radius: 0;
+  min-height: 0;
+}
+
+.hs-mosaic--1 {
+  grid-template: 1fr / 1fr;
+}
+
+.hs-mosaic--2 {
+  grid-template: 1fr / 1fr 1fr;
+}
+
+.hs-mosaic--3 {
+  grid-template: 1fr 1fr / 1fr 1fr;
+}
+
+.hs-mosaic--3 > :first-child {
+  grid-row: 1 / 3;
+}
+
+.hs-mosaic--4 {
+  grid-template: 1fr 1fr / 1fr 1fr;
+}
+
+/* ------------------------------------------------------------------ */
+/* l10 - admin Overview cards                                         */
+/* ------------------------------------------------------------------ */
+
+.hs-admin-card {
+  background: var(--hs-group-bg);
+  box-shadow: var(--hs-group-shadow);
+  border-radius: var(--hs-radius-card);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-start;
+  color: var(--hs-fg);
+  text-decoration: none;
+}
+
+.hs-admin-card__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  font-weight: 600;
+}
+
+.hs-admin-card__header .hs-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--hs-fg-muted);
+}
+
+.hs-admin-card__header .hs-icon:last-child {
+  margin-left: auto;
+}
+
+.hs-admin-card__number {
+  font: 750 29px var(--hs-font-display);
+  letter-spacing: -0.02em;
+}
+
+/* c04 value line under the key number. */
+.hs-admin-card__line {
+  color: var(--hs-fg-muted);
+  font-size: 13px;
+}
+
+.hs-admin-card .hs-progress {
+  width: 100%;
+}
+
+.hs-admin-card:focus-visible {
+  outline: none;
+  background: var(--hs-accent-tint);
+  box-shadow: var(--hs-focus-shadow);
+}
+
+/* ------------------------------------------------------------------ */
+/* p18 - Top Result card                                              */
+/* ------------------------------------------------------------------ */
+
+.hs-top-result-row {
+  display: grid;
+  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
+  gap: 24px;
+  padding: 0 24px 8px 32px;
+}
+
+.hs-top-result {
+  position: relative;
+  background: var(--hs-group-bg);
+  border-radius: var(--hs-radius-card);
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-start;
+}
+
+.hs-top-result__art {
+  width: 96px;
+  height: 96px;
+  border-radius: var(--hs-radius-art);
+  overflow: hidden;
+  display: block;
+  margin-bottom: 8px;
+  box-shadow: var(--hs-art-shadow);
+}
+
+.hs-top-result__art img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.hs-top-result__name {
+  font: 750 26px/1.15 var(--hs-font-display);
+  letter-spacing: -0.02em;
+}
+
+.hs-top-result__meta {
+  color: var(--hs-fg-muted);
+  font-size: 13px;
+}
+
+.hs-top-result .hs-play-button {
+  position: absolute;
+  right: 18px;
+  bottom: 18px;
+}
+
+@media (max-width: 1000px) {
+  .hs-top-result-row {
+    grid-template-columns: 1fr;
+    padding: 0 24px;
+  }
+}
+
+@media (max-width: 720px) {
+  .hs-top-result-row {
+    padding: 0 14px;
+  }
+}

package/css/components/check.css

@@ -0,0 +1,202 @@
+/*
+ * k06 checkbox and radio (k06 C: outline at rest, bright accent when on) and
+ * k07-r2 switch (light: white shadowed knob; dark: dark knob on yellow).
+ *
+ * Markup: <label class="hs-choice"><input type="checkbox" class="hs-choice__input">
+ * <span class="hs-choice__box"><svg class="hs-icon hs-choice__check">...</svg></span>Label
+ * </label>. The native input is the control; the box is its face. A radio row adds
+ * .hs-choice--radio and an 8 px .hs-choice__dot instead of the check; an on box adds
+ * .hs-choice__box--on.
+ *
+ * ACCEPTED EXCEPTION (k07-r2, foundations.md 12.1 item 1): the light on state of the
+ * switch has no 3:1 pair.
+ */
+
+/* ------------------------------------------------------------------ */
+/* k06 - checkbox and radio                                            */
+/* ------------------------------------------------------------------ */
+
+.hs-choice {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 32px;
+  padding: 0 10px 0 6px;
+  border-radius: var(--hs-radius-control);
+  font: 14px var(--hs-font-body);
+  color: var(--hs-fg);
+  cursor: default;
+  user-select: none;
+  transition:
+    background var(--hs-duration-hover) var(--hs-ease),
+    color var(--hs-duration-hover) var(--hs-ease);
+}
+
+/* The native control keeps its semantics and keyboard behaviour; the box draws it. */
+.hs-choice__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.hs-choice__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 2px var(--hs-fg-muted);
+  transition:
+    background var(--hs-duration-hover) var(--hs-ease),
+    box-shadow var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-choice--radio .hs-choice__box {
+  border-radius: 50%;
+}
+
+/* The check mark is drawn by the box, so it only shows when on. Mixed uses the same slot
+ * with adwaita/remove (k06). */
+.hs-choice__check {
+  --hs-icon-size: 14px;
+  display: none;
+}
+
+.hs-choice__box .hs-choice__dot {
+  display: none;
+}
+
+.hs-choice__box--on {
+  box-shadow: none;
+  background: var(--hs-accent-bg);
+  color: var(--hs-accent-fg);
+}
+
+.hs-choice__box--on .hs-choice__check {
+  display: inline-block;
+}
+
+.hs-choice__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--hs-accent-fg);
+}
+
+.hs-choice__box--on .hs-choice__dot {
+  display: block;
+}
+
+.hs-choice:hover .hs-choice__box:not(.hs-choice__box--on) {
+  box-shadow: inset 0 0 0 2px var(--hs-fg);
+  background: var(--hs-control-tone);
+}
+
+.hs-choice:active .hs-choice__box:not(.hs-choice__box--on) {
+  box-shadow: inset 0 0 0 2px var(--hs-fg);
+  background: color-mix(in srgb, var(--hs-fg) 18%, transparent);
+}
+
+.hs-choice:hover .hs-choice__box--on {
+  background: color-mix(in srgb, var(--hs-accent-bg) 90%, #000);
+}
+
+.hs-choice:active .hs-choice__box--on {
+  background: color-mix(in srgb, var(--hs-accent-bg) 80%, #000);
+}
+
+/* f13-r3: the row takes the tint, the label the accent colour at weight 600. */
+.hs-choice:focus-visible,
+.hs-choice:has(.hs-choice__input:focus-visible),
+.hs-choice:has(.hs-switch:focus-visible) {
+  outline: none;
+  background: var(--hs-accent-tint);
+  color: var(--hs-accent-text);
+  font-weight: 600;
+  box-shadow: var(--hs-focus-shadow);
+}
+
+.hs-choice--disabled,
+.hs-choice[aria-disabled='true'],
+.hs-choice:has(.hs-choice__input:disabled),
+.hs-choice:has(.hs-switch:disabled) {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* k07-r2 - switch                                                     */
+/* ------------------------------------------------------------------ */
+
+.hs-switch {
+  position: relative;
+  display: inline-block;
+  flex: none;
+  width: 44px;
+  height: 24px;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 12px;
+  background: var(--hs-switch-off);
+  cursor: default;
+  appearance: none;
+  transition: background var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-switch::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background: var(--hs-switch-knob);
+  box-shadow: var(--hs-switch-knob-shadow);
+  transition:
+    left var(--hs-duration-press) var(--hs-ease),
+    width var(--hs-duration-press) var(--hs-ease),
+    background var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-switch--on,
+.hs-switch[aria-checked='true'] {
+  background: var(--hs-accent-bg);
+}
+
+.hs-switch--on::after,
+.hs-switch[aria-checked='true']::after {
+  left: 23px;
+  background: var(--hs-switch-knob-on);
+}
+
+/* The switch lives in a k11-r1 row, so hover and press come from the row. */
+.hs-choice:hover .hs-switch:not(.hs-switch--on):not([aria-checked='true']) {
+  background: color-mix(in srgb, var(--hs-fg) 62%, var(--hs-view-bg));
+}
+
+.hs-choice:hover .hs-switch--on,
+.hs-choice:hover .hs-switch[aria-checked='true'],
+.hs-choice:active .hs-switch--on,
+.hs-choice:active .hs-switch[aria-checked='true'] {
+  background: color-mix(in srgb, var(--hs-accent-bg) 90%, #000);
+}
+
+/* Press: the knob stretches to 22 px; the on knob's left position follows. */
+.hs-choice:active .hs-switch::after {
+  width: 22px;
+}
+
+.hs-choice:active .hs-switch--on::after,
+.hs-choice:active .hs-switch[aria-checked='true']::after {
+  left: 19px;
+}

package/css/components/dialog.css

@@ -0,0 +1,85 @@
+/*
+ * k19 C - dialogs: a centred card on desktop, a bottom card on phones (l11c A), the
+ * 640 px instance-dialog exception (p05-r1 A) and the o05 A no-close-button rule.
+ *
+ * Markup: <div class="hs-scrim"></div> then <div class="hs-dialog" role="dialog"
+ * aria-modal="true" aria-labelledby="...">. Alerts use role="alertdialog" with
+ * aria-describedby on the alert text and a destructive action button; action dialogs
+ * carry the suggested button. There is never a close button: Escape, a click on the
+ * scrim or Cancel closes the dialog. Focus moves in and is trapped by the page.
+ * Long forms grow in height and scroll inside (l11c).
+ */
+
+/* p17 z-index fix: above the sticky page header (5), below the dialog (10). */
+.hs-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 9;
+  background: rgb(0 0 0 / 40%);
+}
+
+.hs-dialog {
+  position: fixed;
+  z-index: 10;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: min(340px, calc(100vw - 48px));
+  max-height: calc(100vh - 48px);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  background: var(--hs-dialog-bg);
+  border-radius: var(--hs-radius-dialog);
+  box-shadow: var(--hs-elevation-3);
+  color: var(--hs-fg);
+  font: 400 14px/1.45 var(--hs-font-body);
+}
+
+/* p05-r1 A: the instance dialog (setup Configure and admin Instances) is 640 px wide. */
+.hs-dialog--wide {
+  width: min(640px, calc(100vw - 48px));
+}
+
+.hs-dialog__title {
+  margin: 0;
+  font: 750 19px/1.2 var(--hs-font-display);
+  letter-spacing: -0.02em;
+}
+
+.hs-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* Alerts are the same card: role="alertdialog" with aria-describedby on the alert text
+ * and a destructive action button; action dialogs use the suggested button (k19). */
+
+/* ------------------------------------------------------------------ */
+/* Phone (l07): bottom card, stacked full-width buttons                */
+/* ------------------------------------------------------------------ */
+
+@media (max-width: 720px) {
+  .hs-dialog {
+    left: 10px;
+    right: 10px;
+    bottom: 10px;
+    top: auto;
+    width: auto;
+    max-height: calc(100vh - 20px);
+    transform: none;
+  }
+
+  .hs-dialog__footer {
+    flex-direction: column-reverse;
+  }
+
+  .hs-dialog__footer .hs-button {
+    width: 100%;
+    height: 44px;
+  }
+}