@hattisar/design-tokens 0.3.10 → 0.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "description": "Shared design tokens (colors, type, radius, spacing, motion) and base primitives (reset, buttons, inputs, cards, modals, auth shell) for every Hattisar frontend.",
   "main": "tokens.css",
   "files": [

package/tokens.css

@@ -1032,6 +1032,50 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
  * picker in the app is a Combobox underneath, so this is the
  * difference between one red label on a form and all of them.
  */
+/*
+ * And a star after the label text, the way Zoho marks a required
+ * field.
+ *
+ * Harder than it looks, because the label's text is a bare text node:
+ * `<label>First Name<input required></label>`. A plain `label::after`
+ * renders after *everything* in the label — under the input, not
+ * beside the words — and the only way to attach it to the text
+ * directly would be to wrap that text in a span on every field of
+ * every form.
+ *
+ * So the label becomes a wrapping flex row for required fields only,
+ * and the three items are ordered explicitly: the text (order 0, an
+ * anonymous flex item), the star (order 1), then the control, forced
+ * onto the next line by a full-width basis. The result is the text and
+ * its star on one line and the field under them — which is what the
+ * label already looked like, with a star added and no markup touched.
+ */
+label:has(:required) {
+  /*
+   * !important because 212 labels in this app carry an inline
+   * `style={{ display: "block" }}`, and an inline declaration beats
+   * any stylesheet rule regardless of specificity. This is the case
+   * the keyword exists for: overriding markup a stylesheet cannot
+   * reach. Without it the star renders after the control on every one
+   * of those labels instead of beside the words.
+   */
+  display: flex !important;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+
+label:has(:required) > * {
+  order: 2;
+  flex-basis: 100%;
+}
+
+label:has(:required)::after {
+  content: "*";
+  order: 1;
+  margin-left: 2px;
+  color: var(--color-danger);
+}
+
 label:has(:required) {
   color: var(--color-danger);
 }