@leavepulse/ui 0.22.15 → 0.22.16

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/tokens/utilities.css +18 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leavepulse/ui",
3
- "version": "0.22.15",
3
+ "version": "0.22.16",
4
4
  "type": "module",
5
5
  "description": "LeavePulse token-driven Vue component kit.",
6
6
  "repository": {
package/src/tokens/utilities.css CHANGED
@@ -38,26 +38,31 @@
38
38
  }
39
39
 
40
40
  /*
41
- * Autofilled fields keep the field's own colours.
41
+ * Autofilled fields, in the kit's own palette.
42
42
  *
43
- * A browser paints its own background on an autofilled control, and it wins
44
- * over `background` outright. Our inputs draw their surface and border on the
45
- * WRAPPER, so that paint lands on the bare <input> inside — a band of colour
46
- * that stops short of the field's real height and reads as a rendering fault.
43
+ * A browser paints its own background on an autofilled control and it beats any
44
+ * `background`, so the state cannot simply be styled — it has to be covered.
45
+ * Keeping it VISIBLE is the point: a filled-in field should still say it was
46
+ * filled in by the password manager. What it must not do is look broken, and
47
+ * the browser default did two things that read as a rendering fault.
47
48
  *
48
- * The background cannot be overridden, so it is covered: a large inset shadow
49
- * repaints the control in the field's own surface colour, and the text colour
50
- * is forced back with `-webkit-text-fill-color`, which the autofill style also
51
- * hijacks. The transition delay keeps Chrome from flashing its yellow during
52
- * the fade it runs on load.
49
+ * First, our fields draw their surface and border on the WRAPPER, so the paint
50
+ * landed on the bare <input> inside — a band of colour stopping short of the
51
+ * field's real height. The input now stretches the full inner height.
52
+ *
53
+ * Second, the wrapper is what carries the rounded corners, so an inset shadow
54
+ * on a square <input> filled the rounded frame with square corners. The radius
55
+ * is inherited here so the tint follows the same shape as the field.
53
56
  */
54
57
  .lp-autofill:-webkit-autofill,
55
58
  .lp-autofill:-webkit-autofill:hover,
56
59
  .lp-autofill:-webkit-autofill:focus,
57
60
  .lp-autofill:-webkit-autofill:active {
58
- box-shadow: inset 0 0 0 1000px var(--color-surface-soft);
61
+ border-radius: inherit;
62
+ box-shadow: inset 0 0 0 1000px var(--color-brand-soft);
59
63
  -webkit-text-fill-color: var(--color-ink);
60
64
  caret-color: var(--color-ink);
65
+ /* Outruns the fade Chrome plays on load, which would flash its yellow. */
61
66
  transition: background-color 100000s ease-in-out 0s;
62
67
  }
63
68
 
@@ -69,7 +74,8 @@
69
74
  * nothing on Firefox.
70
75
  */
71
76
  .lp-autofill:autofill {
72
- box-shadow: inset 0 0 0 1000px var(--color-surface-soft);
77
+ border-radius: inherit;
78
+ box-shadow: inset 0 0 0 1000px var(--color-brand-soft);
73
79
  -webkit-text-fill-color: var(--color-ink);
74
80
  caret-color: var(--color-ink);
75
81
  filter: none;