@hearthsound/design 0.0.0-stage → 0.1.1

package/css/components/section.css

@@ -0,0 +1,86 @@
+/*
+ * @hearthsound/design - sections
+ *
+ * k33 C section header whose title is the link, and l13 B Home shelves.
+ * Values from shared/approved/components.css (.shead, .homebody, .hsec,
+ * .shelf) and spec/components.md.
+ */
+
+.hs-section-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+}
+
+.hs-section-header__title {
+  margin: 0;
+  font: 750 19px/1.2 var(--hs-font-display);
+  letter-spacing: -0.02em;
+}
+
+.hs-section-header__link {
+  color: inherit;
+  text-decoration: none;
+  border-radius: 6px;
+}
+
+.hs-section-header__arrow {
+  width: 18px;
+  height: 18px;
+  vertical-align: -2px;
+  margin-left: 4px;
+  color: var(--hs-fg-muted);
+}
+
+/* Keyboard focus uses the approved tint; no hover treatment is drawn. */
+.hs-section-header__link:focus-visible {
+  outline: none;
+  background: var(--hs-accent-tint);
+}
+
+/* ------------------------------------------------------------------ */
+/* l13 B - Home shelves                                               */
+/* ------------------------------------------------------------------ */
+
+.hs-home {
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
+  padding: 4px 0 28px;
+}
+
+.hs-home-section .hs-section-header {
+  padding: 0 24px 8px 32px;
+}
+
+/* Desktop scroll buttons sit at the right of the header. */
+.hs-home-section .hs-section-header > .hs-shelf__button:first-of-type {
+  margin-left: auto;
+}
+
+.hs-shelf {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 180px;
+  gap: 28px;
+  overflow-x: auto;
+  padding: 0 32px 6px;
+  scrollbar-width: none;
+}
+
+@media (max-width: 720px) {
+  .hs-home-section .hs-section-header {
+    padding: 0 14px 6px;
+  }
+
+  .hs-shelf {
+    grid-auto-columns: 140px;
+    gap: 14px;
+    padding: 0 14px 4px;
+  }
+
+  .hs-shelf__button {
+    display: none;
+  }
+}

package/css/components/segmented.css

@@ -0,0 +1,64 @@
+/*
+ * k23 A - segmented control. Tabs have exactly two visual states, selected and
+ * unselected; hover and keyboard focus use the shared treatments and are never drawn as
+ * tab states. p20-r1: the now-playing switch is a text segmented control
+ * ("Lyrics" / "Queue").
+ *
+ * Markup: <div class="hs-segmented" role="tablist" aria-label="...">
+ * <button class="hs-segmented__tab hs-segmented__tab--selected" role="tab"
+ * aria-selected="true">Lyrics</button>...</div>.
+ */
+
+.hs-segmented {
+  display: flex;
+  gap: 0;
+  margin: 0 14px 12px;
+  padding: 3px;
+  background: var(--hs-control-tone);
+  border-radius: var(--hs-radius-full);
+  width: max-content;
+  max-width: calc(100% - 28px);
+  overflow-x: auto;
+}
+
+/* Inside the now-playing panel: zero margin, so the track may take the full width. */
+.hs-segmented--flush {
+  margin: 0;
+  max-width: 100%;
+}
+
+.hs-segmented__tab {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  height: 32px;
+  padding: 0 14px;
+  margin: 0;
+  border: 0;
+  border-radius: var(--hs-radius-full);
+  background: transparent;
+  font: 500 14px var(--hs-font-body);
+  color: var(--hs-fg);
+  white-space: nowrap;
+  cursor: default;
+  appearance: none;
+}
+
+.hs-segmented__tab--selected,
+.hs-segmented__tab[aria-selected='true'] {
+  background: var(--hs-segment-selected-bg);
+  box-shadow: var(--hs-elevation-1);
+  font-weight: 600;
+}
+
+.hs-segmented__tab:hover:not(.hs-segmented__tab--selected):not([aria-selected='true']) {
+  background: color-mix(in srgb, var(--hs-fg) 10%, transparent);
+}
+
+.hs-segmented__tab:focus-visible {
+  outline: none;
+  background: var(--hs-accent-tint);
+  color: var(--hs-accent-text);
+  font-weight: 600;
+  box-shadow: var(--hs-focus-shadow);
+}

package/css/components/shell.css

@@ -0,0 +1,281 @@
+/*
+ * l01-r1 - the app shell: one solid grid, never translucent (f11). Sidebar on the left,
+ * the content column on the right, the player bar docked under the content column only.
+ * Widths follow l07: 240 px above 1280 px, 200 px from 721 to 1280 px, and a phone
+ * drawer at 720 px and below. l08 caps the page at 1440 px and sets the card grids.
+ * l12/l12-r1 onboarding frames (plain and split), the i03 lockup sizes and the p27
+ * booting frame also live here.
+ */
+
+.hs-shell {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'side main'
+    'side player';
+  height: 100vh;
+  overflow: hidden;
+  background: var(--hs-view-bg);
+  color: var(--hs-fg);
+}
+
+.hs-shell__sidebar {
+  grid-area: side;
+  min-height: 0;
+}
+
+.hs-shell__main {
+  grid-area: main;
+  min-width: 0;
+  overflow: auto;
+}
+
+.hs-shell__player {
+  grid-area: player;
+}
+
+@media (max-width: 1280px) {
+  .hs-shell {
+    grid-template-columns: 200px minmax(0, 1fr);
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* l01-r1 - phone: one column, no sidebar, mini player at the foot     */
+/* ------------------------------------------------------------------ */
+
+@media (max-width: 720px) {
+  .hs-shell {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr) auto;
+    grid-template-areas:
+      'main'
+      'player';
+  }
+
+  .hs-shell__sidebar {
+    display: none;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* l01-r1 - the 300 px drawer over the 40% scrim, level-3 shadow       */
+/* ------------------------------------------------------------------ */
+
+.hs-drawer {
+  position: fixed;
+  inset: 0 auto 0 0;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  overflow-y: auto;
+  background: var(--hs-sidebar-bg);
+  box-shadow: var(--hs-elevation-3);
+}
+
+.hs-drawer .hs-sidebar,
+.hs-sidebar--drawer {
+  height: 100%;
+}
+
+/* layouts.md 11.4: drawer scrim 20, drawer 30. The base scrim is dialog.css. */
+.hs-scrim--drawer {
+  z-index: 20;
+}
+
+/* ------------------------------------------------------------------ */
+/* l08 - content cap and card grids                                    */
+/* ------------------------------------------------------------------ */
+
+.hs-page {
+  width: 100%;
+  max-width: 1440px;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.hs-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
+  gap: 30px 28px;
+}
+
+@media (max-width: 720px) {
+  .hs-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 22px 18px;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* i03 - lockup and its sizes                                          */
+/* ------------------------------------------------------------------ */
+
+.hs-lockup {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--hs-fg);
+  font: 750 19px var(--hs-font-display);
+  letter-spacing: -0.025em;
+}
+
+.hs-lockup img,
+.hs-lockup svg {
+  flex: none;
+  width: 26px;
+  height: 26px;
+}
+
+.hs-lockup--large {
+  gap: 14px;
+  font-size: 34px;
+}
+
+.hs-lockup--large img,
+.hs-lockup--large svg {
+  width: 46px;
+  height: 46px;
+}
+
+/* ------------------------------------------------------------------ */
+/* l12, l12-r1 - onboarding frames                                     */
+/* ------------------------------------------------------------------ */
+
+.hs-onboarding {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--hs-view-bg);
+  color: var(--hs-fg);
+}
+
+.hs-onboarding__top {
+  padding: 18px 24px;
+}
+
+.hs-onboarding__body {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  padding: 24px 24px 48px;
+}
+
+/* Split sign-in frame above 720 px: the brand panel is 40% wide, at least 320 px. */
+.hs-onboarding--split {
+  display: grid;
+  grid-template-columns: minmax(320px, 40%) 1fr;
+}
+
+.hs-onboarding__brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--hs-sidebar-bg);
+}
+
+.hs-onboarding__main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+}
+
+/* The sign-in column: 340 px, 18 px gaps, a full-width 44 px suggested button. */
+.hs-signin {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  width: 100%;
+  max-width: 340px;
+}
+
+.hs-signin .hs-button--suggested {
+  width: 100%;
+  height: 44px;
+  justify-content: center;
+}
+
+/* Setup: 760 px column, 640 px form, Back and Continue at the ends. */
+.hs-setup {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  width: 100%;
+  max-width: 760px;
+}
+
+.hs-setup .hs-form {
+  max-width: 640px;
+}
+
+.hs-setup__actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  max-width: 640px;
+}
+
+/* p27: the booting frame is the plain frame with a 48 px spinner and no text. */
+.hs-booting {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ------------------------------------------------------------------ */
+/* Phone (l12-r1 B)                                                    */
+/* ------------------------------------------------------------------ */
+
+@media (max-width: 720px) {
+  .hs-onboarding__top {
+    padding: 14px;
+  }
+
+  .hs-onboarding__body {
+    padding: 0 14px 24px;
+  }
+
+  .hs-onboarding__body > .hs-signin {
+    margin-top: 20vh;
+  }
+
+  .hs-onboarding--split {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto 1fr;
+  }
+
+  .hs-onboarding--split .hs-onboarding__brand {
+    justify-content: flex-start;
+    padding: 14px;
+  }
+
+  /* The large lockup collapses to the small size on phones. */
+  .hs-onboarding--split .hs-lockup--large {
+    gap: 8px;
+    font-size: 19px;
+  }
+
+  .hs-onboarding--split .hs-lockup--large img,
+  .hs-onboarding--split .hs-lockup--large svg {
+    width: 26px;
+    height: 26px;
+  }
+
+  .hs-onboarding__main {
+    align-items: flex-start;
+    padding: 14px 14px 24px;
+  }
+
+  .hs-setup__actions {
+    flex-direction: column-reverse;
+  }
+
+  .hs-setup__actions .hs-button {
+    width: 100%;
+    height: 44px;
+    justify-content: center;
+  }
+}

package/css/components/sidebar.css

@@ -0,0 +1,170 @@
+/*
+ * k24 B - sidebar rows and section headings (surface owned by the shell), plus the
+ * k26 C avatar and the account row. Hover is l02b A: a faint tone at half the
+ * current-page tone. Current is aria-current="page". The account menu itself is
+ * menu.css; the row keeps its pressed tone while that menu is open (p07b).
+ */
+
+.hs-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  height: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  background: var(--hs-sidebar-bg);
+  color: var(--hs-fg);
+}
+
+/* l01-r1, i03: the lockup leads the sidebar; the search field sits 8 px below it. */
+.hs-sidebar .hs-lockup {
+  min-height: 44px;
+  padding: 0 10px;
+  margin-bottom: 8px;
+  box-sizing: border-box;
+}
+
+.hs-sidebar .hs-search-field {
+  margin: 0 2px 8px;
+}
+
+/* Fills the space between the library rows and the foot (layouts.md 2.1). */
+.hs-sidebar__spacer {
+  flex: 1;
+  min-height: 8px;
+}
+
+/* ------------------------------------------------------------------ */
+/* k24 - headings and rows                                             */
+/* ------------------------------------------------------------------ */
+
+.hs-nav__heading {
+  margin: 0;
+  padding: 14px 10px 6px;
+  font: 600 11px var(--hs-font-body);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--hs-fg-muted);
+}
+
+.hs-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  height: 36px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  border-radius: var(--hs-radius-row);
+  background: transparent;
+  color: var(--hs-fg);
+  font: 400 14px var(--hs-font-body);
+  text-align: left;
+  text-decoration: none;
+  cursor: default;
+  appearance: none;
+  transition: background var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-nav-item .hs-icon {
+  --hs-icon-size: 16px;
+  color: var(--hs-fg-muted);
+}
+
+.hs-nav-item .hs-count-badge {
+  margin-left: auto;
+}
+
+/* l02b A: faint hover, never on the current page. */
+.hs-nav-item:hover:not(.hs-nav-item--current):not([aria-current='page']) {
+  background: color-mix(in srgb, var(--hs-fg) 5%, transparent);
+}
+
+.hs-nav-item--current,
+.hs-nav-item[aria-current='page'] {
+  background: var(--hs-control-tone);
+  font-weight: 600;
+}
+
+.hs-nav-item--current .hs-icon,
+.hs-nav-item[aria-current='page'] .hs-icon {
+  color: var(--hs-fg);
+}
+
+.hs-nav-item:focus-visible {
+  outline: none;
+  background: var(--hs-accent-tint);
+  color: var(--hs-accent-text);
+  font-weight: 600;
+  box-shadow: var(--hs-focus-shadow);
+}
+
+/* ------------------------------------------------------------------ */
+/* k26 - avatar and account row                                        */
+/* ------------------------------------------------------------------ */
+
+.hs-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--hs-control-tone);
+  color: var(--hs-fg-muted);
+}
+
+.hs-avatar .hs-icon {
+  --hs-icon-size: 18px;
+}
+
+.hs-account {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  height: 48px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  border-radius: var(--hs-radius-row);
+  background: var(--hs-control-tone);
+  color: var(--hs-fg);
+  font: 500 14px var(--hs-font-body);
+  text-align: left;
+  cursor: default;
+  appearance: none;
+  transition: background var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-account__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* p07b: the row keeps its pressed tone while the menu is open. */
+.hs-account[aria-expanded='true'] {
+  background: color-mix(in srgb, var(--hs-fg) 15%, transparent);
+}
+
+.hs-account:focus-visible {
+  outline: none;
+  background: var(--hs-accent-tint);
+  color: var(--hs-accent-text);
+  box-shadow: var(--hs-focus-shadow);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hs-nav-item,
+  .hs-account {
+    transition: none;
+  }
+}

package/css/components/slider.css

@@ -0,0 +1,92 @@
+/*
+ * k08 C - seek and volume sliders: thick acid on grey, no thumb at rest.
+ *
+ * Markup: <div class="hs-slider" role="slider" tabindex="0" aria-label="Seek"
+ * aria-valuetext="..."><span class="hs-slider__track"></span>
+ * <span class="hs-slider__buffer" style="width:..."></span>
+ * <span class="hs-slider__elapsed" style="width:..."></span>
+ * <span class="hs-slider__thumb" style="left:..."></span></div>.
+ * The client writes the buffer, elapsed and thumb lengths; the package only draws them.
+ *
+ * ACCEPTED EXCEPTION (k08, foundations.md 12.1 item 2): the light elapsed fill measures
+ * 1.4:1 against the page; the 8 px track and the filled length carry the position.
+ */
+
+.hs-slider {
+  position: relative;
+  flex: 1;
+  height: 24px;
+  min-width: 60px;
+}
+
+.hs-slider__track,
+.hs-slider__buffer,
+.hs-slider__elapsed {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  height: 8px;
+  margin-top: -4px;
+  border-radius: var(--hs-radius-full);
+  transition:
+    height var(--hs-duration-hover) var(--hs-ease),
+    margin var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-slider__track {
+  right: 0;
+  background: var(--hs-slider-track);
+}
+
+.hs-slider__buffer {
+  background: var(--hs-slider-buffer);
+}
+
+.hs-slider__elapsed {
+  background: var(--hs-accent-bg);
+}
+
+/* Hover and drag thicken track, buffer and elapsed to 12 px. */
+.hs-slider:hover .hs-slider__track,
+.hs-slider:hover .hs-slider__buffer,
+.hs-slider:hover .hs-slider__elapsed,
+.hs-slider:active .hs-slider__track,
+.hs-slider:active .hs-slider__buffer,
+.hs-slider:active .hs-slider__elapsed {
+  height: 12px;
+  margin-top: -6px;
+}
+
+/* No thumb except on keyboard focus. */
+.hs-slider__thumb {
+  position: absolute;
+  top: 50%;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--hs-accent-bg);
+  opacity: 0;
+  box-shadow: var(--hs-focus-shadow), 0 1px 3px rgb(0 0 0 / 18%);
+  transition: opacity var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-slider:focus-visible {
+  outline: none;
+}
+
+.hs-slider:focus-visible .hs-slider__thumb {
+  opacity: 1;
+}
+
+/* o02 idle: the whole control is inert, no thumb. */
+.hs-slider:disabled,
+.hs-slider[aria-disabled='true'] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.hs-slider:disabled .hs-slider__thumb,
+.hs-slider[aria-disabled='true'] .hs-slider__thumb {
+  opacity: 0;
+}