@hearthsound/design 0.1.6 → 0.1.8

package/css/base.css

@@ -243,3 +243,12 @@ a.link:focus-visible,
     scroll-behavior: auto;
   }
 }
+
+/* p02: inline code in running text, 13 px mono on the control tone, radius 5. */
+.hs-inline-code {
+  padding: 1px 5px;
+  font-family: var(--hs-font-mono);
+  font-size: 13px;
+  background: var(--hs-control-tone);
+  border-radius: 5px;
+}

package/css/components/admin.css

@@ -255,3 +255,8 @@
     white-space: normal;
   }
 }
+
+/* p24-r3: a permission list inside a grey group takes the group's insets. */
+.hs-settings-group > .hs-permission-list {
+  padding: 14px 16px;
+}

package/css/components/check.css

@@ -34,13 +34,15 @@
 }
 
 /* The native control keeps its semantics and keyboard behaviour; the box draws it. */
+/* The native control covers the whole row, invisible, so the row is its hit target. */
 .hs-choice__input {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inset: 0;
+  width: 100%;
+  height: 100%;
   margin: 0;
   opacity: 0;
-  pointer-events: none;
+  cursor: inherit;
 }
 
 .hs-choice__box {

package/css/components/list.css

@@ -154,8 +154,30 @@
   font-variant-numeric: tabular-nums;
 }
 
-.hs-reorder-list .hs-setting-row__subtitle--mono {
+.hs-setting-row__subtitle--mono {
   font: 400 12px var(--hs-font-mono);
+  overflow-wrap: anywhere;
+}
+
+/* p04-r1, p06: a failed outcome or check line. */
+.hs-setting-row__subtitle--error {
+  color: var(--hs-error);
+}
+
+/* p04-r1: the glyph that leads a plugin outcome row. */
+.hs-setting-row__icon--success {
+  color: var(--hs-success);
+}
+
+.hs-setting-row__icon--error {
+  color: var(--hs-error);
+}
+
+/* p04-r1: a muted group heading above a grey group (plugin layers in setup). */
+.hs-group-heading {
+  margin: 10px 0 0;
+  font: 600 13px var(--hs-font-body);
+  color: var(--hs-fg-muted);
 }
 
 .hs-reorder-handle {

package/css/components/shell.css

@@ -209,6 +209,13 @@ a.hs-lockup:focus-visible {
   justify-content: center;
 }
 
+/* Setup: 760 px column, 640 px form, Back and Continue at the ends. Step titles keep the
+ * board's 23 px at every width (p02-p06). */
+.hs-setup .hs-title-3 {
+  font-size: 23px;
+  line-height: 1.2;
+}
+
 /* Setup: 760 px column, 640 px form, Back and Continue at the ends. */
 .hs-setup {
   display: flex;
@@ -245,8 +252,9 @@ a.hs-lockup:focus-visible {
     padding: 14px;
   }
 
+  /* The plain frame keeps its 24 px top padding on phones (l12-r1). */
   .hs-onboarding__body {
-    padding: 0 14px 24px;
+    padding: 24px 14px 24px;
   }
 
   .hs-onboarding__body > .hs-signin {
@@ -275,9 +283,10 @@ a.hs-lockup:focus-visible {
     height: 26px;
   }
 
+  /* Phone sign-in: the column is centred in the space left, biased up by 20vh (l12-r1 B). */
   .hs-onboarding__main {
-    align-items: flex-start;
-    padding: 14px 14px 24px;
+    align-items: center;
+    padding: 14px 14px 20vh;
   }
 
   .hs-setup__actions {

package/css/components/upload.css

@@ -68,3 +68,9 @@
     margin-left: 28px;
   }
 }
+
+/* p24-r1: the smaller drop area inside the Add Plugins dialog. */
+.hs-drop-zone--small {
+  padding: 18px 14px;
+  gap: 8px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hearthsound/design",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "license": "MIT",
   "description": "Design language of Hearthsound: tokens, fonts, icons and component styles",
   "repository": {