How is your experience with the OutSystems Community?
neo-design-system
Reactive icon

Neo Design System

version 0.3.0 (Compatible with OutSystems 11)
Uploaded
 on 21 Sep
 by 
0.0
 (0 ratings)
neo-design-system

Neo Design System

Details
Neo Design System brings the ODC Portal's design language to your own apps.
Read more

EARLY ALPHA — APIs, tokens and block names may change between releases. Pin a version and expect breaking changes.

Neo Design System brings the ODC Portal's design language to your own apps. Install it, set the theme, drop in the shell — the look is done.

612 design tokens (colour, typography, spacing, sizing, elevation, motion) plus 277 dark-mode overrides, so light and dark are both correct out of the box.

Includes the NeoBase theme on a 12-column grid and 19 blocks covering the app shell, sidebar navigation, avatars, badges, icons, search, pagination, dropdowns and skeleton loaders.

Theme switching is built in — SetTheme, GetTheme, ToggleTheme, UseSystemTheme — and AppShell raises OnThemeChange.

Getting started: add NeoDesignSystem and TrueShade, set NeoBase as your theme, place AppShell and fill its Header, Aside and Content placeholders. Reference tokens from your own CSS with var(--token).

Limitations
  • Requires TrueShade to handle the appearance of the theme.
  • No RTL support.
  • Alpha: expect breaking changes.
Release notes (0.3.0)

New

The login layer on the demo app now covers the three screens that surround it, so an account flow is styled end to end rather than only its front door. All three are built from the same Layout_Login block:

  • Reset password — Layout_Login with fewer rows. It needs no new classes; it was already possible in 0.2.0 and is called out here because it is part of the same flow.
  • Sign up — the email step, which is where the new error states earn their keep.
  • Verify email — the step that needed genuinely new styling.

What the verify step added:

  • A password requirements checklist. password-analysis-title and password-analysis-requirements, with password-analysis-requirements-item for each line — a marker and a label, on a 4px rhythm. Put it inside a field marked verify-password-field and it unrolls on :focus-within, a 0.4s max-height transition, so the rules appear while the field is being filled and fold away afterwards.
  • The consent row. verify-consent-row sets the checkbox-and-label rhythm — 12px type, an 8px gap, and the label free to wrap without dragging the checkbox out of line.
  • The password field variant used on that step, with the reveal icon anchored to the top of the field so a validation message appearing beneath cannot push it out of position.

As with the password reveal in 0.2.0, the library ships the styling. Which requirements are met, and when, is your logic.

Form error states

Login inputs now have an invalid state: not-valid on a field gives it the error border, and keeps it through hover and focus rather than losing it to the interaction state. Pair it with the validation message and a submit that marks the offending fields.

The searchable dropdown

Most of this release. The dropdown now behaves the way the rest of the system does, rather than looking right and acting differently.

  • Keyboard. It opens when it receives focus and puts the caret in the search box, so arrow keys, type-ahead and Enter are the ones you already know. Tab moves on to the next real field instead of walking the option list, and Escape closes it.
  • Focus ring on the trigger, matching every other focusable control — and no doubled ring once the panel is open.
  • An 8px gap between the trigger and the option panel.
  • A two-line empty state. "No results found", with a hint line beneath it, instead of a bare one-liner.
  • The search icon follows --icon-primary, so it is legible in light as well as dark.


Unlike the password reveal, this one ships the behaviour as well as the styling: all 13 OutSystemsUI/Dropdowns client actions work against DropdownField, so DropdownSetValue, DropdownClear, DropdownGetSelectedValues and the rest do what they do on the stock widget.

The three blocks are DropdownField (the searchable field), DropdownEmpty (a floating menu container for icon-button row actions) and DropdownItem.

Dialog styling

A modal dialog, 48 rules that were previously missing: the overlay and its dimmed backdrop, the card, a header with title, subtitle and close, a footer, the scrollable variant, the tabbed variant, and the "unsaved changes" confirmation layer. Build a dialog with these class names and it picks up the design system instead of rendering unstyled.

As with the password reveal, the library ships the styling. Opening, closing and what the buttons do are yours.

Fixes

  • The checkbox no longer changes size between breakpoints. It was 20px on desktop and 32px on tablet and phone, because OutSystems UI enlarges checkboxes for touch at a specificity the token-level rule could not reach. Now 20px throughout, tick still centred.
  • The dropdown's search icon was washed out in light mode — it was drawn as an image with a colour baked in and ignored the icon token.


One behaviour change

DropdownSetValue and DropdownClear default to not raising the dropdown's change event, which left the control showing a stale selection after a programmatic change. Both now raise it. If you were relying on the silent behaviour — setting an initial value without triggering your own OnChange logic, say — guard that logic rather than the call.

License (0.3.0)
Reviews (0)
Team
Other assets in this category