@redseed/redseed-ui-tailwindcss 7.66.0 → 7.67.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,23 @@
|
|
|
1
|
+
/* ── A form field breathes at 8px, not 4px ──────────────────────────────────────────
|
|
2
|
+
Two nested gaps make a field: this one, label -> control, and __field's below it,
|
|
3
|
+
control -> help. Both were space-xxs (4px), which is the TIGHT PAIR value.
|
|
4
|
+
|
|
5
|
+
A tight pair is two lines of TEXT where line-height already contributes half-leading
|
|
6
|
+
at both ends, so 4px is all the visible separation the pair can take (see the note
|
|
7
|
+
above .rsui-card-header__subtitle in card_header.css). Neither of these gaps is that
|
|
8
|
+
shape. A 14px label sits above a 50px control, not above another line of text, and
|
|
9
|
+
there is no leading between them to absorb — so 4px renders as 4px and the label
|
|
10
|
+
reads as welded to the box.
|
|
11
|
+
|
|
12
|
+
8px is the brand's own label -> value step and the smallest value on its 8px rhythm.
|
|
13
|
+
It is also what the PRODUCT independently arrived at: redseed's Styles/formfield_slot.css
|
|
14
|
+
reimplements this component with `gap-y-2`, exactly 8px, which is a second opinion
|
|
15
|
+
reached without reference to this one.
|
|
16
|
+
|
|
17
|
+
The radio-group override below keeps its own 12px and is unaffected. --compact is a
|
|
18
|
+
flex ROW and does not wrap, so a row-gap never applies to it. */
|
|
1
19
|
.rsui-form-field-slot {
|
|
2
|
-
@apply flex flex-col gap-y-space-
|
|
20
|
+
@apply flex flex-col gap-y-space-xs border-0 bg-transparent p-0;
|
|
3
21
|
}
|
|
4
22
|
|
|
5
23
|
.rsui-form-field-slot.rsui-form-field-radio-group {
|
|
@@ -26,8 +44,10 @@
|
|
|
26
44
|
@apply text-base font-semibold;
|
|
27
45
|
}
|
|
28
46
|
|
|
47
|
+
/* The second half of the pair above: control -> help. This is the gap that made help
|
|
48
|
+
text look attached to the input. Same 4px -> 8px, same reasoning. */
|
|
29
49
|
.rsui-form-field-slot__field {
|
|
30
|
-
@apply shrink-0 flex flex-col gap-y-space-
|
|
50
|
+
@apply shrink-0 flex flex-col gap-y-space-xs;
|
|
31
51
|
}
|
|
32
52
|
|
|
33
53
|
.rsui-form-field-slot__help {
|
|
@@ -2,8 +2,19 @@
|
|
|
2
2
|
@apply text-base text-text-primary font-semibold;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
+
/* ── Between whole fields: 16px ─────────────────────────────────────────────────────
|
|
6
|
+
This was space-sm (12px), which is not a value on the brand's 8px rhythm at all —
|
|
7
|
+
the rhythm runs 8, 16, 24, 32, 48, 64, 96.
|
|
8
|
+
|
|
9
|
+
16px is also what the other form context already uses: FormSlot spaces a form's
|
|
10
|
+
children with mt-space-md. Those two were the only places in the library that space
|
|
11
|
+
stacked fields, and they disagreed. Now they do not.
|
|
12
|
+
|
|
13
|
+
The gap between two fields has to stay clearly larger than the 8px inside one, or a
|
|
14
|
+
field stops reading as a unit — 16 against 8 is the same 1:2 grouping the card meta
|
|
15
|
+
uses. */
|
|
5
16
|
.rsui-form-fieldset__fields {
|
|
6
|
-
@apply flex flex-col gap-space-
|
|
17
|
+
@apply flex flex-col gap-space-md;
|
|
7
18
|
}
|
|
8
19
|
|
|
9
20
|
.rsui-form-fieldset__fields--padded {
|