Merge np.Shared and Forms improvements

.cursor/rules/noteplan-programming-general.mdc

@@ -274,6 +274,7 @@ See `@helpers/react/DynamicDialog/DynamicDialog.jsx` and `dialogElementRenderer.
 ## NotePlan Theme Colors
 
 When using CSS variables for styling, use these NotePlan theme color variables with their default values:
+**DO NOT INVENT NEW CSS VARIABLES. USE THESE EXISTING ONES.**
 
 ```css
 --bg-main-color: #eff1f5;
@@ -298,10 +299,16 @@ When using CSS variables for styling, use these NotePlan theme color variables w
 --hashtag-color: inherit;
 --attag-color: inherit;
 --code-color: #0091f8;
+--fg-placeholder-color: rgba(76, 79, 105, 0.7);
+--fg-error-color: #b85450;
+--bg-error-color: #f5e6e6;
+--fg-disabled-color: #999999;
+--bg-disabled-color: #f5f5f5;
 ```
 
 **Always use these CSS variables with their default fallback values** when styling React components. For example:
 ```css
-background: var(--tint-color, #dc8a78);
+background: var(--bg-main-color, #eff1f5);
 color: var(--fg-main-color, #4c4f69);
+icon: var(--tint-color, #1e66f5);
 ```