create-flowmo 1.2.0 → 1.2.1
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.
package/package.json
CHANGED
|
@@ -445,12 +445,17 @@ Follow this checklist when creating or editing a screen. Do not skip steps.
|
|
|
445
445
|
5. If Font Awesome icons are used, the FA CDN `<link>` is in `<head>`
|
|
446
446
|
6. No `@media` queries or custom breakpoints
|
|
447
447
|
7. Scroll model and grid are handled by `grid.css` (not duplicated in `theme.css`)
|
|
448
|
-
8.
|
|
448
|
+
8. **Text readability** — for every text element, confirm the text color contrasts with its background:
|
|
449
|
+
- Dark backgrounds (`.background-primary`, `.background-neutral-10`, navy/dark sections) → use light text (`.text-neutral-0` or white custom class)
|
|
450
|
+
- Light backgrounds (`.background-neutral-0`, white sections) → use dark text (`.text-neutral-10` or default)
|
|
451
|
+
- **Header and menu links are especially prone** — if the header has a dark background, menu links MUST use a light text class. OSUI link defaults are the primary color, which may be invisible on a dark header.
|
|
452
|
+
- Buttons: check that button text contrasts with the button background (`.btn` defaults to white text — don't add `.text-neutral-0` on a white button)
|
|
453
|
+
9. If any check fails, fix and re-check before continuing
|
|
449
454
|
- [ ] Step 3: **Install dependencies** — if `node_modules/` does not exist, run `npm install`
|
|
450
455
|
- [ ] Step 4: **Start the dev server** — run `npm run dev` to serve the project at `http://localhost:5173/`
|
|
451
456
|
- [ ] Step 5: **Visual verification** — open the screen URL in the browser and check:
|
|
452
457
|
- Layout renders correctly (no collapsed sections, no overlapping elements)
|
|
453
|
-
-
|
|
458
|
+
- **Text readability** — read every section and confirm ALL text is visible against its background. Pay special attention to: header/nav menu links, buttons, text in dark sections, links in footers
|
|
454
459
|
- Page scrolls within `.active-screen`
|
|
455
460
|
- Icons render (not 0×0 invisible boxes)
|
|
456
461
|
- Menu links and form fields have proper spacing (`.ThemeGrid_MarginGutter`)
|
|
@@ -460,6 +465,7 @@ Follow this checklist when creating or editing a screen. Do not skip steps.
|
|
|
460
465
|
|
|
461
466
|
- `.active-screen` is **REQUIRED** as the outermost wrapper. Without it, utility classes and CSS variables will NOT resolve. It also serves as the **scroll container** \u2014 OSUI sets `html { overflow: hidden }` so `.active-screen` must have `overflow-y: auto; height: 100vh` (provided by `grid.css`).\n- **`.ThemeGrid_MarginGutter` needs `grid.css`** \u2014 this class is used for menu link spacing and form field gutters, but its `margin-left` value is NOT in `outsystems-ui.css`. It comes from `grid.css`. Without it, menu links will bunch together with no spacing.
|
|
462
467
|
- **Button + color utilities don't mix** — `.btn` overrides `color` and `background-color` at high specificity. Stacking `.btn .background-neutral-0 .text-primary` will produce invisible text (white on white). Create custom button classes in `theme.css` instead.
|
|
468
|
+
- **Header menu links vanish on dark headers** — OSUI link color defaults to `var(--color-primary)`. On a dark header where `--color-primary` is also dark (e.g. navy), menu links become invisible. Fix: add a custom class in `theme.css` that forces light link color in the header (e.g. `.header__link { color: #fff; }`).
|
|
463
469
|
- **`.list-item` has white background** — In dark-background sections (footer, sidebar), list items will show as white rectangles. Override with `background: transparent !important` in `theme.css`.
|
|
464
470
|
- **Font Awesome is not bundled** — If using `<i class="fa fa-exchange">` style icons, add the FA 4.7 CDN link to `<head>` or the icons will be invisible (0×0 size).
|
|
465
471
|
- OutSystems pattern previews render inside iframes — CSS resolves against the OSUI framework, not browser defaults. Your `.visual.html` must link the OSUI stylesheet.
|