@hearthsound/design 0.0.0-stage → 0.1.1

package/css/components/field.css

@@ -0,0 +1,298 @@
+/*
+ * k03 text fields and search (k03 C tonal field and pill search, k03f B focused fields stay
+ * grey), k04 A number entry, k04b C textarea, k05 A drop-down trigger, k32 B form field and
+ * the l14 sidebar search.
+ *
+ * Text-type fields (text, search, number, password, textarea) never change their grey rest
+ * surface on focus and carry no focus shadow (k03f). Focus is shown by the caret in
+ * --hs-accent-text and, in a form field, by the accent label.
+ */
+
+/* ------------------------------------------------------------------ */
+/* k03 - anatomy                                                       */
+/* ------------------------------------------------------------------ */
+
+.hs-field,
+.hs-select {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 6px 0 12px;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: var(--hs-radius-control);
+  font: 400 14px var(--hs-font-body);
+  color: var(--hs-fg);
+  background: var(--hs-control-tone);
+  transition:
+    background var(--hs-duration-hover) var(--hs-ease),
+    box-shadow var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-field__lead {
+  --hs-icon-size: 16px;
+  color: var(--hs-fg-muted);
+}
+
+.hs-field__value {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.hs-field__input {
+  all: unset;
+  flex: 1;
+  min-width: 0;
+  caret-color: var(--hs-accent-text);
+}
+
+.hs-field__input::placeholder {
+  color: var(--hs-fg-muted);
+}
+
+/* Inner actions: reveal, clear and the number steps. 28 px square, 14 px glyphs, muted. */
+.hs-field__action,
+.hs-field__step {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--hs-fg-muted);
+  cursor: default;
+  appearance: none;
+  transition:
+    background var(--hs-duration-hover) var(--hs-ease),
+    color var(--hs-duration-hover) var(--hs-ease);
+}
+
+.hs-field__action .hs-icon,
+.hs-field__step .hs-icon {
+  --hs-icon-size: 14px;
+}
+
+.hs-field__action:hover,
+.hs-field__step:hover {
+  background: var(--hs-control-tone);
+  color: var(--hs-fg);
+}
+
+/* Password reveal while the password is shown: the k01 toggle-on tone. */
+.hs-field__action[aria-pressed='true'] {
+  color: var(--hs-fg);
+  background: color-mix(in srgb, var(--hs-fg) 24%, transparent);
+}
+
+.hs-field__action:disabled,
+.hs-field__action[aria-disabled='true'],
+.hs-field__step:disabled,
+.hs-field__step[aria-disabled='true'] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* Search: fully round, tighter padding at the leading edge, round inner actions. */
+.hs-field--search {
+  border-radius: var(--hs-radius-full);
+  padding-left: 14px;
+  padding-right: 4px;
+}
+
+.hs-field--search .hs-field__action {
+  border-radius: var(--hs-radius-full);
+}
+
+/* ------------------------------------------------------------------ */
+/* k03 - states                                                        */
+/* ------------------------------------------------------------------ */
+
+:is(.hs-field, .hs-select):hover:not(:focus-within):not(.hs-field--invalid):not([aria-invalid='true']) {
+  background: color-mix(in srgb, var(--hs-fg) 13%, transparent);
+}
+
+/* k03f B: a focused field keeps the grey surface and no shadow. */
+:is(.hs-field, .hs-select):focus-within {
+  background: var(--hs-control-tone);
+  box-shadow: none;
+}
+
+/* Declared after focus: the invalid tint is not a focus treatment and stays while the
+ * field is focused or hovered. The doubled class matches the focus rule's specificity. */
+.hs-field.hs-field--invalid,
+.hs-field[aria-invalid='true'],
+.hs-select.hs-field--invalid,
+.hs-select[aria-invalid='true'] {
+  background: color-mix(in srgb, var(--hs-error) 12%, transparent);
+}
+
+.hs-field--disabled,
+.hs-field[aria-disabled='true'],
+.hs-field:has(.hs-field__input:disabled),
+.hs-select:disabled,
+.hs-select[aria-disabled='true'] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* k04 - number entry: minus and plus at the end                       */
+/* ------------------------------------------------------------------ */
+
+.hs-field--number {
+  font-variant-numeric: tabular-nums;
+}
+
+.hs-field__unit {
+  color: var(--hs-fg-muted);
+  font-size: 13px;
+}
+
+/* ------------------------------------------------------------------ */
+/* k04b - textarea: fixed three lines, scrolls                          */
+/* ------------------------------------------------------------------ */
+
+.hs-field--textarea {
+  height: 84px;
+  align-items: stretch;
+  padding: 9px 18px 9px 12px;
+  line-height: 22px;
+  overflow: auto;
+}
+
+.hs-field--textarea .hs-field__input {
+  white-space: pre-wrap;
+  resize: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* k05 - drop-down trigger                                             */
+/* ------------------------------------------------------------------ */
+
+/* k05 A: a tonal field with a trailing 14 px chevron; the open trigger sits at the hover
+ * tone and the chevron turns over. The list and its options are hs-listbox / hs-option
+ * in menu.css. The trigger is a button named by its visible label plus the current
+ * value, with aria-haspopup="listbox" and aria-expanded. */
+.hs-select {
+  margin: 0;
+  border: 0;
+  padding-right: 10px;
+  text-align: left;
+  cursor: default;
+  appearance: none;
+}
+
+.hs-select .hs-icon:last-child {
+  --hs-icon-size: 14px;
+  color: var(--hs-fg-muted);
+  transition: transform var(--hs-duration-popover) var(--hs-ease);
+}
+
+.hs-select[aria-expanded='true'] .hs-icon:last-child {
+  transform: rotate(180deg);
+}
+
+.hs-select[aria-expanded='true'] {
+  background: color-mix(in srgb, var(--hs-fg) 13%, transparent);
+}
+
+/* ------------------------------------------------------------------ */
+/* l14 - sidebar search field                                          */
+/* ------------------------------------------------------------------ */
+
+/* The sidebar field is the same pill at 34 px, with 2 px side margins and 8 px below the
+ * lockup. Markup carries both .hs-field--search and .hs-search-field. */
+.hs-search-field {
+  margin: 0 2px 8px;
+  width: auto;
+  height: 34px;
+}
+
+/* p18 board: the results page puts the search pill in the page header at 40 px. */
+.hs-page-header .hs-field--search {
+  height: 40px;
+}
+
+/* ------------------------------------------------------------------ */
+/* k32 - form field                                                    */
+/* ------------------------------------------------------------------ */
+
+.hs-form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  max-width: 560px;
+}
+
+.hs-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.hs-form-field__label {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font: 500 13px var(--hs-font-body);
+  color: var(--hs-fg-muted);
+}
+
+/* The label turns accent while its field holds focus. */
+.hs-form-field:focus-within > .hs-form-field__label {
+  color: var(--hs-accent-text);
+}
+
+.hs-form-field__optional {
+  font-weight: 400;
+  font-size: 12px;
+  color: var(--hs-fg-muted);
+}
+
+.hs-form-field__hint {
+  margin: 0;
+  font-size: 12.5px;
+  color: var(--hs-fg-muted);
+}
+
+.hs-form-field__error {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  font-size: 12.5px;
+  color: var(--hs-error);
+}
+
+.hs-form-field__error .hs-icon {
+  --hs-icon-size: 14px;
+}
+
+/* p26c: a row pinned by the configuration file or the environment shows its value with
+ * this muted lock line instead of a control. */
+.hs-form-field__pinned {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 13px;
+  color: var(--hs-fg-muted);
+}
+
+.hs-form-field__pinned .hs-icon {
+  --hs-icon-size: 12px;
+}
+
+/* k32 B: footer buttons right-aligned (the form's own buttons, not the dialog footer). */
+.hs-form__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}

package/css/components/list.css

@@ -0,0 +1,260 @@
+/*
+ * @hearthsound/design - lists
+ *
+ * k11-r1 boxed lists and settings rows (C: white page, deeper grey group),
+ * k28 admin tables, k30 / k30-r1 reorderable lists.
+ * Values from shared/approved/components.css (k11-r1, k28, k30) and
+ * spec/components.md. Board classes used there are mapped in components.md.
+ */
+
+/* ------------------------------------------------------------------ */
+/* k11-r1 - boxed lists (settings groups)                             */
+/* ------------------------------------------------------------------ */
+
+.hs-settings-group {
+  background: var(--hs-group-bg);
+  box-shadow: var(--hs-group-shadow);
+  border-radius: var(--hs-radius-card);
+  overflow: hidden;
+}
+
+.hs-setting-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: var(--hs-row-comfortable);
+  padding: 8px 16px;
+  position: relative;
+  font: 400 14px/1.4 var(--hs-font-body);
+  color: var(--hs-fg);
+  transition: background var(--hs-duration-hover) var(--hs-ease);
+}
+
+/* k11-r1 - a 1 px hairline drawn as an inset shadow, so rows keep their height. */
+.hs-settings-group .hs-setting-row + .hs-setting-row {
+  box-shadow: inset 0 1px 0 var(--hs-separator);
+}
+
+.hs-setting-row--two-line {
+  min-height: 60px;
+}
+
+/* B08 - compact admin density. */
+.hs-setting-row--compact {
+  min-height: var(--hs-row-compact);
+  padding: var(--hs-row-pad-compact) 16px;
+}
+
+.hs-setting-row__text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.hs-setting-row__subtitle {
+  color: var(--hs-fg-muted);
+  font-size: 13px;
+}
+
+.hs-setting-row__value {
+  color: var(--hs-fg-muted);
+}
+
+.hs-setting-row__icon {
+  color: var(--hs-fg-muted);
+  width: 16px;
+  height: 16px;
+}
+
+/* Button row: centred label with an icon, the icon in the text colour. */
+.hs-setting-row--button {
+  justify-content: center;
+  font-weight: 600;
+  gap: 8px;
+}
+
+.hs-setting-row--button .hs-setting-row__icon {
+  color: var(--hs-fg);
+}
+
+/* Property row: a muted 12 px key line over the value. */
+.hs-setting-row--property .hs-setting-row__text {
+  gap: 2px;
+}
+
+.hs-setting-row__key {
+  color: var(--hs-fg-muted);
+  font-size: 12px;
+}
+
+/* Expander row: the trailing chevron turns when the row is open. */
+.hs-setting-row--expander > .hs-setting-row__icon:last-child {
+  transition: transform var(--hs-duration-popover) var(--hs-ease);
+}
+
+.hs-setting-row--expander[aria-expanded='true'] > .hs-setting-row__icon:last-child {
+  transform: rotate(180deg);
+}
+
+.hs-setting-row--nested {
+  padding-left: 32px;
+}
+
+.hs-setting-row--interactive:hover {
+  background: var(--hs-control-tone);
+}
+
+.hs-setting-row--interactive:active {
+  background: color-mix(in srgb, var(--hs-fg) 15%, transparent);
+}
+
+/* f13-r3 - tint and lift, first text span in the accent text at weight 600. */
+.hs-setting-row:focus-visible {
+  outline: none;
+  background: var(--hs-accent-tint);
+  box-shadow: var(--hs-focus-shadow) !important;
+  z-index: 1;
+}
+
+.hs-setting-row:focus-visible .hs-setting-row__text > :first-child {
+  color: var(--hs-accent-text);
+  font-weight: 600;
+}
+
+.hs-setting-row[aria-disabled='true'] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hs-setting-row,
+  .hs-setting-row--expander > .hs-setting-row__icon:last-child {
+    transition: none;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* k30 / k30-r1 - reorderable lists                                  */
+/* ------------------------------------------------------------------ */
+
+.hs-reorder-list .hs-setting-row__number {
+  width: 20px;
+  color: var(--hs-fg-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.hs-reorder-list .hs-setting-row__subtitle--mono {
+  font: 400 12px var(--hs-font-mono);
+}
+
+.hs-reorder-handle {
+  width: 16px;
+  height: 16px;
+  color: var(--hs-fg-muted);
+  cursor: grab;
+  display: none;
+}
+
+/* Reorder mode (k30-r1: entered from a "Reorder" menu item) or an
+ * always-handles list (setup Order p05b-r1, Customize Home p07b, Layers p25b). */
+.hs-reorder-list--reordering .hs-reorder-handle,
+.hs-reorder-list--handles .hs-reorder-handle {
+  display: inline-flex;
+}
+
+.hs-setting-row--lifted {
+  background: var(--hs-popover-bg);
+  box-shadow: var(--hs-elevation-2) !important;
+  border-radius: var(--hs-radius-row);
+  transform: translateY(-8px);
+  z-index: 3;
+}
+
+.hs-reorder-slot {
+  display: block;
+  height: 52px;
+  background: color-mix(in srgb, var(--hs-accent-bg) 14%, transparent);
+}
+
+.hs-setting-row--grabbed {
+  background: var(--hs-accent-tint);
+  box-shadow: var(--hs-focus-shadow) !important;
+}
+
+.hs-setting-row--grabbed .hs-setting-row__text > :first-child {
+  font-weight: 600;
+}
+
+/* ------------------------------------------------------------------ */
+/* k28 - admin tables                                                */
+/* ------------------------------------------------------------------ */
+
+.hs-table {
+  width: 100%;
+  border-collapse: collapse;
+  font: 400 14px var(--hs-font-body);
+  color: var(--hs-fg);
+}
+
+.hs-table th {
+  text-align: left;
+  font: 600 12px var(--hs-font-body);
+  color: var(--hs-fg-muted);
+  height: 34px;
+  padding: 0 10px;
+  white-space: nowrap;
+}
+
+.hs-table th[aria-sort] {
+  color: var(--hs-fg);
+}
+
+.hs-table th .hs-icon {
+  width: 12px;
+  height: 12px;
+  vertical-align: -1px;
+  margin-left: 4px;
+}
+
+.hs-table td {
+  height: 36px;
+  padding: 0 10px;
+  box-shadow: inset 0 1px 0 var(--hs-separator);
+  white-space: nowrap;
+}
+
+.hs-table .hs-table__cell--numeric {
+  text-align: right;
+}
+
+.hs-sort-button {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  cursor: default;
+}
+
+.hs-sort-button:focus-visible {
+  outline: none;
+  background: var(--hs-accent-tint);
+  color: var(--hs-accent-text);
+  box-shadow: var(--hs-focus-shadow);
+}
+
+.hs-table__scroll {
+  position: relative;
+  overflow-x: auto;
+}
+
+/* k28 - phones scroll sideways with a right-edge fade. */
+@media (max-width: 720px) {
+  .hs-table__scroll {
+    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
+  }
+}